/* The story stays simple. The stage carries the atmosphere. */
body{background:#080c17;isolation:isolate}.ambient{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}.ambient>div{position:absolute;left:-15%;top:8%;width:65vw;height:70vh;background:radial-gradient(ellipse,#38255166,transparent 70%);filter:blur(25px)}.ambient>div+div{left:55%;top:-40%;background:radial-gradient(ellipse,#6046202b,transparent 65%)}header{height:76px;border-bottom:0;padding:0 4.5%;max-width:1680px;margin:auto}.brand{font-weight:600;gap:12px}.brand img{width:42px;height:42px}.route{gap:16px}.route i{width:25px;height:25px}.route>div{width:34px;background:linear-gradient(90deg,#f5a52440,#ffffff16)}.route .current i{box-shadow:0 0 20px #f5a52430}.motion-toggle{display:flex;align-items:center;gap:7px;background:transparent;color:#a7adbd;border:1px solid #ffffff19;border-radius:25px;padding:8px 11px;font-size:9px}.motion-icon{font-size:13px;width:12px}main{width:calc(100% - 56px);max-width:1540px;min-height:calc(100svh - 123px);border:1px solid #ffffff16;border-radius:22px;overflow:hidden;box-shadow:0 18px 90px #0005;grid-template-columns:50% 50%;position:relative;background:#0d1220}.art{min-height:650px;border-right:0;background:radial-gradient(ellipse at 53% 54%,#79503844 0%,#33203944 38%,transparent 68%),linear-gradient(140deg,#181628,#0c1220 85%);perspective:1400px;--tilt-x:0deg;--tilt-y:0deg;transition:background .6s}.art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,#0d1220);pointer-events:none;z-index:3}.spotlight{position:absolute;left:10%;top:-30%;width:80%;height:125%;transform:rotate(-25deg);background:conic-gradient(from 163deg at 50% 0%,transparent,#f5cf9020 5deg,#f5cf9007 19deg,transparent 28deg);filter:blur(10px);z-index:0;pointer-events:none}.scene-marker{position:absolute;left:32px;right:32px;top:29px;display:flex;align-items:center;gap:18px;z-index:4;color:#bcb2aa;font-size:8px;letter-spacing:1.9px}.scene-marker i{height:1px;background:linear-gradient(90deg,#f5a52460,transparent);flex:1}.scene-word{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font:italic clamp(90px,12vw,180px)/1 Georgia,serif;letter-spacing:-9px;color:#dac4a30b;z-index:0;pointer-events:none}.vertical-type,.sticker{display:none}.halo{width:84%;border-color:#f5a52417;transform:rotateX(55deg) rotate(-30deg);animation:orbit-breathe 9s ease-in-out infinite}.halo:before,.halo:after{border-color:#f5a5240d}.orbit-light{position:absolute;width:71%;aspect-ratio:1;border:1px solid #f5a52417;border-radius:50%;box-shadow:0 0 60px #f5a52406;transform:rotateX(30deg) rotate(-20deg);z-index:0;pointer-events:none}.paper{width:min(69%,420px);padding:13px 13px 19px;border-radius:4px;background:#f4eedd;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-6deg) translateY(-4px);box-shadow:-12px 20px 0 #0001,0 35px 85px #0009,0 0 65px #ffc16510;transition:transform .65s cubic-bezier(.2,.75,.2,1),box-shadow .65s;animation:paper-arrives .75s cubic-bezier(.2,.75,.2,1) both;z-index:2}.paper-back{width:min(69%,420px);transform:rotate(5deg) translate(16px,7px);background:#806b59;border:1px solid #d9b88533;opacity:.4;animation:none;box-shadow:0 20px 70px #0008}.paper-head{font-size:6px;letter-spacing:1.8px;padding-bottom:12px}.paper-head span:last-child{color:#936224}.image-wrap{border-radius:2px}.paper figcaption{padding:17px 7px 0}.paper figcaption strong{font-size:45px;letter-spacing:-1.7px}.paper figcaption div>span{font-size:9px;letter-spacing:.2px}.sound-mark{font-size:27px}.scene-caption{bottom:31px;color:#b6adbf;z-index:4;font-size:9px}.tiny-star{font-size:27px}.art.meaning-open #picture{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(0deg) translateY(-12px);box-shadow:0 35px 95px #0008,0 0 70px #f5a52424}.art.meaning-open .picture-glow{animation:shine .8s ease-out}.art.meaning-open .orbit-light{border-color:#f5a52460}.dust{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.dust i{position:absolute;left:var(--left);top:var(--top);height:2px;width:2px;border-radius:50%;background:#ffdf98;box-shadow:0 0 7px #f5a524aa;opacity:0;animation:dust-drift var(--duration) var(--delay) infinite ease-in-out}.dust i:nth-child(3n){width:3px;height:3px}.work{background:linear-gradient(130deg,#0d1220,#101626);z-index:4}.work-inner{padding:35px clamp(25px,4vw,68px) 24px}.lesson-label{font-size:8px;color:#b5aec1;letter-spacing:1.6px;margin-bottom:28px}.live-dot{box-shadow:0 0 10px #f5a52480}.pretitle{color:#d5bb98;letter-spacing:.8px;font-size:11px}#word-title{font-size:clamp(59px,6.2vw,96px);background:linear-gradient(110deg,#fff1cb,#f5a524 70%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-4px;margin-bottom:17px}.word-type{margin-bottom:24px}.word-type button{background:#ffffff05;border-color:#ffffff18}.instruction{font-size:14px;color:#b4bed0;line-height:1.7}.meaning-flip{min-height:135px;background:radial-gradient(ellipse at 0 0,#f5a52416,transparent 80%),#141a2a;border:1px solid #f5a52465;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 12px 28px #0002}.meaning-flip:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,#f5a52410 50%,transparent 80%);transform:translateX(-110%);animation:invitation 7s 1.8s infinite;pointer-events:none}.flip-prompt{font-size:20px;font-weight:550;line-height:1.5}.flip-prompt small{display:block;color:#ab9b83;font-size:7px;letter-spacing:1.6px;font-weight:400;margin-bottom:9px}.flip-prompt>span:last-child{width:43px;height:43px;border-radius:50%;border:1px solid #f5a52455;display:grid;place-items:center;font-size:27px;font-weight:400;background:#f5a5240d;flex-shrink:0}.meaning-flip.revealed{background:linear-gradient(120deg,#f5a52420,#f5a52406);border-color:var(--amber)}.word-example{font-size:20px;line-height:1.7;color:#adb8c9}.word-example b{color:#fbd58a}.small-copy{font-size:9px;color:#838da2}.scene-progress{height:2px;background:#ffffff09}.scene-progress>span{display:block;height:100%;background:linear-gradient(90deg,#95661d,#f5a524);box-shadow:0 0 12px #f5a52450;transition:width .6s cubic-bezier(.2,.75,.2,1)}.controls{border-top:0;padding:20px clamp(25px,4vw,68px);min-height:89px;background:#0a0f1e77}.controls-note strong{color:#d9dfeb}.controls-note>span{color:#8f9ab0}#next{background:linear-gradient(110deg,#ffc355,#f5a524);box-shadow:0 6px 22px #f5a52415;border-radius:7px;padding:15px 20px}#next:disabled{box-shadow:none;background:#242a39}.stage.enter{animation:scene-enter .5s cubic-bezier(.2,.7,.2,1)}.art.info-view{background:radial-gradient(ellipse at 45% 40%,#61502144,transparent 70%),#121626}.art.info-view .spotlight{transform:rotate(15deg)}.infographic-preview{width:min(78%,425px);max-height:calc(100svh - 200px);animation:unfold .75s cubic-bezier(.2,.75,.2,1);transform-origin:50% 50%}.infographic-preview img{max-height:calc(100svh - 220px);filter:drop-shadow(0 26px 32px #0007);border:1px solid #f5a52422}.infographic-preview>span{display:inline-block;border:1px solid #f5a52430;background:#f5a52409;border-radius:20px;padding:7px 14px;font-size:9px}.word-connections>div{position:relative;padding:16px 0 16px 20px;border-color:#ffffff12}.word-connections>div:before{content:"";position:absolute;left:0;top:25px;width:5px;height:5px;background:var(--amber);border-radius:50%;box-shadow:0 0 10px #f5a52433}.word-connections small{color:#aab3c7;font-size:8px}.word-connections p{font-size:24px}.word-connections>div:nth-child(2){animation-delay:.06s}.word-connections>div:nth-child(3){animation-delay:.12s}body[data-scene="1"] .word-connections>div{animation:scene-enter .5s ease-out both}.art.recall-view{background:radial-gradient(ellipse,#322b5655,transparent 75%),#111526}.recall-art{width:76%;max-width:390px;padding:43px 24px;border-radius:20px;background:linear-gradient(150deg,#242445,#15172a 75%);border:1px solid #918acb44;transform:rotate(-4deg);box-shadow:0 40px 80px #0007;animation:unfold .6s ease-out}.recall-art>span{font-size:8px;color:#c0bad0}.recall-art>strong{color:#f5d298;font-size:clamp(40px,4.3vw,67px);margin:24px 0 14px}.recall-symbol{position:relative;border:0;width:120px;height:120px;margin:25px auto;font-size:56px}.recall-symbol svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a59abd60;stroke-width:1;stroke-dasharray:4 7;animation:ring-turn 30s linear infinite}.recall-art>p{color:#b2abc9;font-size:11px}.art.recalled .recall-art{border-color:#bce8ca88;transform:rotate(0deg);box-shadow:0 25px 90px #93d9b013}.art.recalled .recall-symbol{color:var(--green)}.art.recalled .recall-symbol svg{stroke:var(--green);stroke-dasharray:none;animation:none}.choice{border-color:#ffffff20;background:linear-gradient(110deg,#ffffff05,#ffffff02);border-radius:10px}.choice.correct{background:linear-gradient(110deg,#bce8ca20,#bce8ca06);border-color:var(--green);animation:answer-bounce .35s ease-out}.choice.wrong{animation:answer-shake .3s ease-out}.recall-choices .choice{min-height:57px;padding:15px 18px}.choice>span{border-radius:50%;width:24px;height:24px}.response p{line-height:1.8}.art.solved #picture{transform:rotate(-2deg) translateY(-10px);box-shadow:0 25px 80px #0009,0 0 90px #f5a52420}.finish-symbol{width:62px;height:62px;display:grid;place-items:center;border:1px solid #f5a52450;border-radius:50%;font-size:38px;box-shadow:0 0 35px #f5a52410;margin-bottom:20px}.store-links a{border:1px solid #f5a52433;background:linear-gradient(120deg,#fff3d7,#f0e3c7);box-shadow:0 8px 24px #0002}.app-benefits>span{border-color:#ffffff15;background:#ffffff03}.try-web{color:#f5c76e}.spark{border-radius:2px}footer{height:47px;padding:0 4.5%;font-size:8px;border-top:0;max-width:1680px;margin:auto}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}.motion-paused .enter,.motion-paused .paper,.motion-paused .infographic-preview,.motion-paused .recall-art,.motion-paused .word-connections>div{animation:none!important;opacity:1}.motion-paused .dust{display:none}.motion-paused .celebration{display:none}
@keyframes dust-drift{0%{opacity:0;transform:translate(0,15px)}25%,70%{opacity:.4}100%{opacity:0;transform:translate(18px,-65px)}}@keyframes orbit-breathe{50%{transform:rotateX(55deg) rotate(-22deg) scale(1.06)}}@keyframes paper-arrives{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}@keyframes scene-enter{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes unfold{from{opacity:0;transform:perspective(1200px) rotateY(18deg) translateY(18px) scale(.95)}to{opacity:1;transform:perspective(1200px) rotateY(0) translateY(0) scale(1)}}@keyframes invitation{0%,55%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}@keyframes ring-turn{to{transform:rotate(360deg)}}@keyframes answer-bounce{50%{transform:scale(1.025)}}@keyframes answer-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(min-width:701px) and (max-width:1000px){main{grid-template-columns:45% 55%;width:calc(100% - 32px)}.work-inner{padding:27px}.controls{padding:18px 25px}.paper,.paper-back{width:77%}.paper figcaption strong{font-size:35px}.scene-marker{left:20px;right:20px;font-size:6px}.scene-caption{font-size:8px}#word-title{font-size:65px}.route{gap:10px}.route>div{width:22px}.motion-toggle{font-size:8px;padding:7px 9px}.infographic-preview{width:85%}.controls-note>span{display:none}.recall-art{width:83%}.recall-art>strong{font-size:42px}.instruction{font-size:12px}.word-connections p{font-size:21px}}
@media(min-width:701px) and (max-height:820px){header{height:63px}main{min-height:calc(100svh - 102px)}.art{min-height:0}.work-inner{padding:23px 8% 18px}.lesson-label{margin-bottom:19px}.pretitle{font-size:10px;margin-bottom:9px}h1{font-size:35px;margin-bottom:13px}#word-title{font-size:66px;margin-bottom:15px}.instruction{font-size:12px;margin-bottom:19px}.word-type{margin-bottom:19px}.meaning-flip{min-height:120px;padding:19px}.word-example{font-size:18px;margin:18px 0 10px}.controls{min-height:72px;padding:13px 8%}footer{height:39px}.paper,.paper-back{width:min(65%,340px)}.paper{padding:11px 11px 15px}.paper figcaption{padding-top:12px}.paper figcaption strong{font-size:37px}.scene-marker{top:22px;font-size:7px}.scene-caption{bottom:23px;font-size:8px}.word-connections>div{padding:12px 0 12px 18px}.word-connections>div:before{top:20px}.word-connections p{font-size:21px;margin-top:6px}.word-connections small{font-size:7px}.infographic-preview{width:min(77%,425px);max-height:calc(100svh - 175px);margin-top:10px}.infographic-preview img{max-height:calc(100svh - 205px)}.infographic-preview>span{font-size:8px;padding:6px 12px}.word-connections{margin-bottom:15px}.expand-info{font-size:10px}.recall-art{padding:30px 22px;max-width:340px}.recall-art>strong{margin-top:20px;font-size:49px}.recall-symbol{width:95px;height:95px;font-size:47px;margin:20px auto}.finish-symbol{width:42px;height:42px;font-size:27px;margin-bottom:13px}#finish-title{font-size:35px}.app-benefits{margin:15px 0}.finish-copy{margin:12px 0 17px}.try-web{margin-top:15px}.pdf-link{padding-top:12px}}
@media(max-width:700px){header{height:65px;padding:0 5%}.brand{font-size:14px;gap:7px}.brand img{width:31px;height:31px}.route{gap:7px;font-size:8px}.route i{width:19px;height:19px;font-size:8px}.route>div{width:9px}.route>span{gap:5px}.motion-toggle{width:28px;height:28px;padding:0;justify-content:center}.motion-toggle #motion-label{display:none}.motion-icon{font-size:12px}.route>span:not(.current){font-size:0;gap:0}main{width:calc(100% - 20px);min-height:calc(100svh - 101px);border-radius:15px;display:flex;overflow:clip}.art{height:220px;min-height:0;flex-shrink:0;padding-left:0;justify-content:center;border-bottom:1px solid #ffffff13;perspective:900px}.art:after{background:linear-gradient(0deg,#0d1220 0%,transparent 32%)}.scene-marker{top:15px;left:16px;right:16px;font-size:6px;letter-spacing:1.3px;gap:10px}.scene-word{font-size:85px;bottom:12px;letter-spacing:-5px;left:49%;white-space:nowrap;color:#dac4a30e}.paper,.paper-back{width:156px}.paper{padding:7px 7px 9px;transform:rotate(-7deg) translateY(14px);border-radius:2px}.paper-back{transform:rotate(7deg) translate(13px,14px);left:auto;aspect-ratio:.83}.paper-head{font-size:3px;padding-bottom:5px;letter-spacing:.7px}.paper-head span:last-child{font-size:7px;line-height:5px}.paper figcaption{padding:7px 2px 0}.paper figcaption strong{font-size:22px;letter-spacing:-.7px}.paper figcaption div>span{font-size:5px;margin-top:4px}.sound-mark{font-size:14px}.halo{width:300px;left:calc(50% - 150px);top:-45px}.orbit-light{width:230px;top:-5px;left:calc(50% - 115px)}.scene-caption{display:none}.spotlight{left:20%;top:-55%;width:70%;height:165%}.art.meaning-open #picture,.art.solved #picture{transform:rotate(0) translateY(10px)}.work{flex:1}.work-inner{padding:23px 6% 9px}.lesson-label{font-size:7px;letter-spacing:1.2px;margin-bottom:16px}.lesson-label>span:last-child{font-size:8px}.pretitle{font-size:10px;margin-bottom:8px}#word-title{font-size:61px;margin-bottom:12px;letter-spacing:-2.8px}.word-type{margin-bottom:16px;font-size:8px;gap:12px}.word-type>span{font-size:11px}.word-type button{font-size:8px;padding:6px 9px}.instruction{font-size:12px;line-height:1.7;margin-bottom:17px}.meaning-flip{min-height:95px;padding:16px;border-radius:9px}.flip-prompt{font-size:17px}.flip-prompt small{font-size:6px;margin-bottom:7px;letter-spacing:1.3px}.flip-prompt>span:last-child{width:32px;height:32px;font-size:22px}.flip-result strong{font-size:23px}.flip-result>span{font-size:10px}.word-example{font-size:16px;margin:15px 0 7px;line-height:1.6}.small-copy{font-size:8px;margin:8px 0 15px}.controls{position:sticky;bottom:0;min-height:73px;padding:12px 6%;gap:10px;background:#0d1220f5;backdrop-filter:blur(15px)}.controls-note strong{font-size:9px}.controls-note>span{font-size:7px;display:block}.controls>button:first-child{width:27px;height:27px;font-size:14px}#next{font-size:10px;padding:13px 14px;min-width:125px;gap:17px}.infographic-preview{display:flex;align-items:center;gap:18px;width:auto;max-height:190px;margin-top:15px;animation-duration:.5s}.infographic-preview img{height:172px;width:auto;max-height:none;transform:rotate(-4deg)}.infographic-preview>span{max-width:103px;line-height:1.7;font-size:9px;padding:8px 11px;text-align:left;margin-top:0}.art.info-view .scene-word{display:none}.art.info-view .halo,.art.info-view .orbit-light{display:none}.word-connections>div{padding:12px 0 12px 17px}.word-connections>div:before{top:20px;width:4px;height:4px}.word-connections p{font-size:21px}.word-connections small{font-size:7px}.expand-info{font-size:10px;margin-bottom:15px}#info-title,#recall-title{font-size:32px;letter-spacing:-1px}.recall-art{padding:20px;width:78%;max-width:300px;display:grid;grid-template-columns:1fr 61px;gap:5px;transform:rotate(-3deg);margin-top:13px;text-align:left;border-radius:14px}.recall-art>span{font-size:6px;grid-column:1;letter-spacing:1.5px}.recall-art>strong{font-size:35px;letter-spacing:-1px;grid-column:1;margin:3px 0}.recall-art>p{font-size:8px;grid-column:1;margin:3px 0}.recall-symbol{width:61px;height:61px;margin:0;font-size:32px;grid-column:2;grid-row:1/4}.art.recall-view .scene-word{display:none}.recall-choices .choice{min-height:50px;padding:12px 15px;font-size:13px;border-radius:8px}.response{min-height:85px}.response strong{font-size:11px}.response p{font-size:10px}.finish-symbol{width:38px;height:38px;font-size:25px;margin-bottom:12px}#finish-title{font-size:32px}.finish-copy{font-size:12px}.store-links strong{font-size:15px}.app-benefits>span{font-size:8px}.try-web{font-size:11px}.pdf-link{font-size:9px;padding-bottom:14px}footer{height:36px;padding:0 5%;font-size:6px;gap:12px}.scene-progress{flex-shrink:0}.dust i:nth-child(n+9){display:none}}
@media(max-width:700px) and (max-height:850px){.art{height:185px}.paper,.paper-back{width:132px}.paper{transform:rotate(-7deg) translateY(13px)}.paper figcaption strong{font-size:20px}.paper figcaption div>span{font-size:4px}.work-inner{padding-top:18px}.lesson-label{margin-bottom:13px}#word-title{font-size:52px;margin-bottom:10px}.word-type{margin-bottom:14px}.meaning-flip{min-height:86px;padding:14px}.instruction{margin-bottom:15px}.word-example{font-size:15px;margin-top:12px}.small-copy{margin-bottom:11px}.controls-note>span{display:none}.infographic-preview{max-height:160px;margin-top:15px}.infographic-preview img{height:146px}.scene-marker{top:12px}.word-connections>div{padding-top:10px;padding-bottom:10px}.word-connections p{font-size:20px}.word-connections{margin-bottom:12px}.expand-info{margin-bottom:11px}.recall-art{padding:16px 19px}.response{min-height:78px}.scene-word{font-size:74px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.dust,.celebration{display:none}.paper{translate:0 0;opacity:1}}
@media(max-width:700px){.art:after{background:none}.art .scene-marker{z-index:4}.paper{animation-name:paper-arrives}}
@media(max-width:700px) and (max-height:850px){.paper,.paper-back{width:118px}.paper{transform:rotate(-7deg) translateY(7px)}.paper-back{transform:rotate(7deg) translate(11px,7px)}.art.meaning-open #picture,.art.solved #picture{transform:rotate(0) translateY(7px)}.paper figcaption strong{font-size:18px}.paper figcaption{padding-top:5px}.paper figcaption div>span{font-size:4px;margin-top:3px}}
@media(max-width:700px) and (max-height:850px){.paper{transform:rotate(-7deg) translateY(3px)}.paper-back{transform:rotate(7deg) translate(11px,3px)}.art.meaning-open #picture,.art.solved #picture{transform:rotate(0) translateY(3px)}}