/* Motion supports the lesson; the reading surface always stays still. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:50;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(var(--reading-progress,0));transform-origin:left}
.header-tools{display:flex;align-items:center;gap:12px;flex:none}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;background:#f0f6ff;border:1px solid #d9e5f5;border-radius:99px;color:#294a79;font-size:.8rem;font-weight:650;cursor:pointer;white-space:nowrap}
.motion-toggle:hover{background:#e6f0ff}.motion-toggle:disabled{cursor:default}
.motion-symbol{display:block;position:relative;width:21px;height:21px;background:var(--lime);border-radius:50%;flex:none}
.motion-symbol:before,.motion-symbol:after{content:"";position:absolute;width:2px;height:8px;top:6px;background:#214777;border-radius:2px}
.motion-symbol:before{left:7px}.motion-symbol:after{right:7px}
.motion-toggle[aria-pressed="false"] .motion-symbol{background:#d2dfef}
.motion-toggle[aria-pressed="false"] .motion-symbol:before{width:0;height:0;top:6px;left:8px;background:none;border-left:6px solid #375a84;border-top:4px solid transparent;border-bottom:4px solid transparent;border-radius:0}
.motion-toggle[aria-pressed="false"] .motion-symbol:after{display:none}
.site-header{gap:24px}.navigation{gap:25px}
.hero-scene{perspective:950px;--scene-x:0px;--scene-y:0px;--scene-rx:0deg;--scene-ry:0deg}
.scene-world,.scene-float{position:absolute;inset:0;transform-style:preserve-3d}
.scene-world{transform:translate3d(var(--scene-x),var(--scene-y),0) rotateX(var(--scene-rx)) rotateY(var(--scene-ry));transition:transform .45s cubic-bezier(.16,.8,.2,1);z-index:2}
.hero-art{filter:drop-shadow(0 18px 15px #19478614)}
.scene-orbit{background:radial-gradient(ellipse at 35% 60%,#e2f8ff,#f0f5ff 70%);box-shadow:inset 0 0 40px #ffffffaa}
.scene-orbit:before{background:radial-gradient(circle at 35% 30%,#eaffb9,#ceef77 75%);box-shadow:inset -12px -10px 23px #a9cd5822}
.scene-ring{position:absolute;border-radius:50%;pointer-events:none;border:1px solid #487cec40;z-index:0}
.ring-one{inset:15% 0 11%;transform:rotate(-24deg)}
.ring-two{inset:4% 17%;border:1px dashed #477ae23b;transform:rotate(27deg)}
.ring-one:before{content:"";position:absolute;left:15%;top:10%;width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #d6e8ff}
.ring-two:before{content:"";position:absolute;right:0;top:48%;width:13px;height:13px;background:var(--lime);border-radius:4px;transform:rotate(15deg)}
.scene-satellite{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;width:120px;height:137px;pointer-events:none}
.scene-satellite img{width:98px;height:98px;object-fit:contain;filter:drop-shadow(0 7px 8px #0735ec1a)}
.scene-satellite span{font-size:.69rem;line-height:1.5;font-weight:700;padding:3px 9px;background:#ffffffed;color:var(--blue);border:1px solid #dce6f9;border-radius:99px;white-space:nowrap}
.satellite-life{bottom:-10px;left:5px;transform:rotate(-8deg)}
.satellite-curious{top:-31px;right:5px;transform:rotate(8deg)}
.scene-note{z-index:4;box-shadow:0 8px 0 #fff0b42b,0 12px 22px #32579a08}
.scene-label{z-index:4}.spark-one{left:-6px;bottom:139px;font-size:34px}.spark-two{right:139px;top:2px;font-size:25px}
.orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;z-index:1}
.dot-a{top:21%;left:0;background:#95dbff}.dot-b{bottom:8%;right:7%;background:var(--blue);width:6px;height:6px}.dot-c{top:0;left:46%;background:var(--lime);width:13px;height:13px;border-radius:4px;transform:rotate(15deg)}
.motion-enabled .scene-float{animation:scene-float 7s ease-in-out infinite}
.motion-enabled .satellite-life{animation:satellite-life 8s ease-in-out infinite}
.motion-enabled .satellite-curious{animation:satellite-curious 9s ease-in-out infinite}
.motion-enabled .ring-one{animation:orbit-one 32s linear infinite}
.motion-enabled .ring-two{animation:orbit-two 40s linear infinite}
.motion-enabled .scene-spark{animation:spark-wiggle 8s ease-in-out infinite}
.motion-enabled .dot-a{animation:dot-float 6s ease-in-out infinite}
.motion-enabled .hero.entered .scene-world{animation:scene-arrive .65s cubic-bezier(.18,.8,.25,1) both}
.motion-enabled .hero.entered .underline-lime:after{transform-origin:left;animation:underline-arrive .55s .1s cubic-bezier(.18,.8,.25,1) both}
.hero-scene.is-offscreen .scene-float,.hero-scene.is-offscreen .scene-ring,.hero-scene.is-offscreen .scene-satellite,.hero-scene.is-offscreen .scene-spark,.hero-scene.is-offscreen .orbit-dot{animation-play-state:paused}
@keyframes scene-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes satellite-life{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes satellite-curious{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(10px) rotate(3deg)}}
@keyframes orbit-one{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}}
@keyframes orbit-two{from{transform:rotate(27deg)}to{transform:rotate(-333deg)}}
@keyframes spark-wiggle{0%,100%{rotate:0deg}50%{rotate:18deg}}
@keyframes dot-float{0%,100%{translate:0 0}50%{translate:4px -8px}}
@keyframes scene-arrive{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes underline-arrive{from{scale:0 1}to{scale:1 1}}
/* Reveals run once. Paragraphs are never hidden while someone is reading. */
.motion-enabled .reveal-ready{transition:opacity .38s ease,translate .38s cubic-bezier(.2,.75,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-enabled .reveal-ready:not(.revealed){opacity:0;translate:0 18px}
.motion-enabled .reveal-ready.revealed{opacity:1;translate:0 0}
/* Every card contains a real, keyboard-accessible lesson preview. */
.learning-section .heading-row h2{font-size:1.9rem;color:var(--blue)}
.learning-section .heading-row .eyebrow{font-size:.86rem;margin-bottom:14px;color:#537198}
.learning-hint{font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.learning-hint>span{font-size:22px;color:var(--blue)}
.learning-grid{align-items:start}
.learning-card{transition:box-shadow .25s ease;transform-style:preserve-3d;border:1px solid transparent}
.learning-card img{transition:transform .4s cubic-bezier(.2,.75,.3,1),filter .4s ease}
.learning-card.is-open{box-shadow:0 15px 40px #24467214;border-color:#21469424}
.learning-card .card-foot{margin-top:18px;padding-top:13px}
.learning-detail{grid-column:1/-1;margin-top:15px}
.learning-detail summary{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:47px;list-style:none;cursor:pointer;border:1px solid #ffffffad;background:#ffffff7d;border-radius:12px;padding:10px 14px;color:#123eb8;font-size:.94rem;font-weight:750;line-height:1.6}
.learning-detail summary:hover{background:#ffffffe6}
.learning-detail summary::-webkit-details-marker{display:none}
.detail-plus{width:21px;height:21px;border-radius:50%;background:var(--blue);position:relative;flex:none}
.detail-plus:before,.detail-plus:after{content:"";position:absolute;background:white;border-radius:1px;left:6px;top:10px;width:9px;height:1.5px}
.detail-plus:after{transform:rotate(90deg);transition:transform .2s ease}
.learning-detail[open] .detail-plus:after{transform:rotate(0)}
.learning-detail[open] summary{background:var(--blue);border-color:var(--blue);color:white}
.learning-detail[open] .detail-plus{background:var(--lime)}
.learning-detail[open] .detail-plus:before,.learning-detail[open] .detail-plus:after{background:var(--blue)}
.lesson-peek{margin-top:20px;padding:22px 21px;background:#fffef9;border:1px solid #ffffff;border-radius:6px 21px 6px 6px;position:relative;box-shadow:4px 5px 0 #ffffff55;transform-origin:top center}
.lesson-peek:after{content:"";position:absolute;right:0;top:0;border-top:21px solid #d7e7ed;border-left:21px solid transparent;border-radius:0 20px 0 0}
.peek-kicker{font-size:.8rem;color:#4c658b;display:block;margin-bottom:17px}
.lesson-peek h4{font-size:1.35rem;color:var(--blue);line-height:1.5}
.learning-card .lesson-peek p{font-size:.95rem;color:var(--muted);margin-top:17px}
.lesson-peek ol{list-style:none;counter-reset:lesson-step;margin-top:21px;display:grid;gap:16px}
.lesson-peek li{counter-increment:lesson-step;display:grid;grid-template-columns:22px 1fr;gap:9px;font-size:.93rem;color:#405575;line-height:1.8}
.lesson-peek li:before{content:counter(lesson-step,decimal-leading-zero);font-size:.79rem;color:var(--blue);font-weight:750;padding-top:3px}
.peek-result{border-block:1px solid #d7e2f1;padding-block:13px;margin-top:25px;display:grid;gap:7px}
.peek-result>span{font-size:.81rem;color:#657793}.peek-result strong{font-size:.94rem;color:#2f5079;font-weight:650}
.peek-status{font-size:.78rem;color:#66758f;display:block;margin-top:18px}
.motion-enabled .workbook{transition:transform .45s ease,box-shadow .45s ease}
.motion-enabled .button{transition:translate .18s ease,box-shadow .18s ease,background .18s ease}
.motion-enabled .button:active{translate:0 2px;box-shadow:1px 1px 0 #c2f050}
.process li,.roadmap>li{--path-progress:0}
.process li:after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue);scale:var(--path-progress) 1;transform-origin:left;transition:scale .45s ease;pointer-events:none}
.process li.step-in-view{--path-progress:1}
.roadmap>li.step-in-view .roadmap-dot{border-color:var(--blue);background:var(--lime);box-shadow:0 0 0 5px #eaf4d8;transition:background .3s,box-shadow .3s}
@media(hover:hover) and (pointer:fine){
 .motion-enabled .learning-card:hover>img{transform:translateY(-7px) rotate(-3deg) scale(1.045);filter:drop-shadow(0 12px 9px #1d4bab16)}
 .motion-enabled .card-lime:hover>img{transform:translateY(-7px) rotate(2deg) scale(1.045)}
 .motion-enabled .workbook:hover{transform:rotate(0);box-shadow:0 22px 42px #19397920}
 .motion-enabled .button:hover{translate:0 -2px}
}
@media(max-width:1150px) and (min-width:801px){.site-header{gap:17px}.navigation{gap:16px;font-size:.85rem}.navigation .nav-contact{padding-inline:15px}.motion-toggle{font-size:.74rem;padding-inline:9px;gap:6px}.site-header .brand{gap:10px}.site-header .brand-en{font-size:.63rem}.site-header .brand-ko{font-size:2rem}.scene-satellite{width:97px;height:117px}.scene-satellite img{width:78px;height:78px}.scene-satellite span{font-size:.62rem}.satellite-curious{right:-6px;top:-21px}.satellite-life{left:-6px;bottom:-7px}}
@media(max-width:940px) and (min-width:801px){.site-header .brand-en{display:none}.navigation{gap:13px}.site-header{gap:14px}.scene-satellite span{display:none}.satellite-curious{top:-15px;right:0}.satellite-life{left:0}.learning-hint{max-width:210px;font-size:.84rem}.learning-section .heading-row h2{font-size:1.6rem}.learning-detail summary{padding:9px 11px;font-size:.87rem}.lesson-peek{padding:21px 15px}.lesson-peek h4{font-size:1.14rem}}
@media(max-width:800px){
 .header-tools{margin-left:auto;gap:11px}.site-header{gap:16px}.motion-toggle{font-size:.77rem;min-height:42px;padding:6px 9px;gap:6px}.motion-symbol{width:18px;height:18px}.motion-symbol:before,.motion-symbol:after{top:5px;height:8px}.motion-symbol:before{left:6px}.motion-symbol:after{right:6px}.motion-toggle[aria-pressed="false"] .motion-symbol:before{left:7px;top:5px}.header-tools .menu-toggle{margin:0}.site-header .navigation{margin:0}.scene-satellite{display:none}.spark-one{left:4px;bottom:21px;font-size:34px}.spark-two{right:3px;top:18px;font-size:27px}.scene-ring.ring-one{inset:15% 6% 10%;border-color:#487cec35}.scene-ring.ring-two{inset:3% 23%;border-color:#477ae226}.ring-one:before{width:7px;height:7px;box-shadow:0 0 0 3px #d6e8ff}.ring-two:before{width:9px;height:9px}.dot-a{left:5%;top:47%}.dot-b{right:12%;bottom:1%}.dot-c{display:none}
 .motion-enabled .scene-float{animation:mobile-arrival 3.6s ease-in-out 1 both}
 .motion-enabled .scene-ring,.motion-enabled .scene-spark,.motion-enabled .orbit-dot{animation:none}
 .motion-enabled .hero.entered .scene-world{animation:scene-arrive .4s ease both}
 .learning-section .heading-row h2{font-size:1.65rem}.learning-hint{font-size:.89rem;margin-top:18px;align-items:start;line-height:1.8;gap:8px}.learning-hint>span{line-height:1.4}.learning-detail{margin-top:14px}.learning-detail summary{font-size:1rem;min-height:48px}.lesson-peek{padding:23px 20px;margin-top:19px}.lesson-peek h4{font-size:1.4rem}.learning-card .lesson-peek p,.lesson-peek li{font-size:1rem}.peek-kicker{font-size:.85rem}.peek-result>span{font-size:.87rem}.peek-result strong{font-size:1rem}.peek-status{font-size:.85rem}
 .process li:after{inset:0 auto 0 -1px;width:2px;height:auto;scale:1 var(--path-progress);transform-origin:top}
 .process li:last-child:after{display:none}
}
@keyframes mobile-arrival{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}70%{transform:translateY(2px)}}
@media(max-width:380px){.site-header>.brand .brand-en{display:none}.header-tools{gap:9px}.site-header{gap:10px}.motion-toggle{font-size:.76rem;padding-inline:8px}.learning-section .heading-row h2{font-size:1.5rem}}
/* The control stops all decoration, including hover and one-time entrances. */
html:not(.motion-enabled) .scene-world{transform:none;transition:none}
html:not(.motion-enabled) .reveal-ready{opacity:1;translate:0 0}
html:not(.motion-enabled) .learning-card img,html:not(.motion-enabled) .detail-plus:after,html:not(.motion-enabled) .process li:after,html:not(.motion-enabled) .roadmap-dot,html:not(.motion-enabled) .button{transition:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1!important;translate:0 0!important}.scene-world{transform:none!important}}
@media print{.reading-progress,.header-tools{display:none!important}*{animation:none!important;transition:none!important}.reveal-ready{opacity:1!important;translate:0 0!important}}
/* Keep rotating orbit bounds inside the page on compact desktop layouts. */
@media(max-width:1150px) and (min-width:801px){.ring-one{inset:20% 12%}.ring-two{inset:9% 20%}}