:root{font-family:Avenir Next,Trebuchet MS,Verdana,sans-serif;color:#fff4dd;background:#091d32;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #8af8e5;outline-offset:4px}.hidden{display:none!important}.experience{position:relative;width:100%;min-height:100%;height:100dvh;overflow:hidden;isolation:isolate}.world{position:absolute;inset:0;z-index:-3}.world canvas{display:block;width:100%;height:100%}.experience:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(3,16,31,.88) 0%,rgba(5,22,37,.55) 29%,transparent 67%),linear-gradient(0deg,rgba(4,17,31,.8),transparent 41%)}.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:radial-gradient(#f6e1b9 .6px,transparent .6px);background-size:7px 7px;mix-blend-mode:soft-light}.topbar{display:flex;align-items:center;justify-content:space-between;padding:30px clamp(24px,4.4vw,74px);gap:20px;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:13px;font-weight:900;font-size:clamp(21px,2vw,29px);letter-spacing:-.055em;color:#fff5e3;text-shadow:0 3px 12px #06182a}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px 12px 10px 10px;background:#ff886c;color:#132d42;font-size:27px;line-height:1;box-shadow:0 6px 24px #ff886c44;transform:rotate(-8deg)}.brand-mark span{position:absolute;color:#fff1c5;font-size:13px;top:8px;right:2px}.topbar-right{display:flex;align-items:center;gap:19px}.chapter{color:#e8e9d9;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:11px 17px;border:1px solid #c4d6cc55;border-radius:999px;background:#0d2c45a8;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:41px;padding:0 12px;border:1px solid #c4d6cc66;border-radius:999px;color:#fff3dc;background:#0d2c45bc;font-size:22px;line-height:1;white-space:nowrap}.icon-button:hover{background:#224960}.audio-icon{position:relative;display:inline-grid;place-items:center;width:25px;height:25px}.icon-button.is-muted .audio-icon:after{content:"";position:absolute;top:50%;left:50%;width:31px;height:3px;border-radius:3px;background:#ff6868;box-shadow:0 0 0 1px #19354b,0 0 8px #ff686899;transform:translate(-50%,-50%) rotate(-45deg)}.icon-button:after{font-size:12px;font-weight:900}#music-button:after{content:"Muziek"}#sound-button:after{content:"Stemmen"}.menu-trigger{border:1px solid #c4d6cc66;border-radius:999px;padding:10px 15px;color:#fff3dc;background:#0d2c45bc;font-size:13px;font-weight:900;white-space:nowrap}.menu-trigger:hover{background:#224960}.scene-label{position:absolute;top:16%;right:clamp(26px,5vw,80px);display:flex;align-items:center;gap:11px;color:#d7efe7;font-size:11px;letter-spacing:.24em;font-weight:900;opacity:.85}.scene-label-line{width:29px;height:1px;background:#87e7ce}.welcome{position:absolute;top:50%;left:clamp(26px,5.6vw,90px);max-width:min(600px,51vw);transform:translateY(-43%);z-index:2}.eyebrow{display:flex;align-items:center;gap:9px;color:#94e7d6;font-size:12px;letter-spacing:.19em;font-weight:900;margin-bottom:23px}.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#85eed8;box-shadow:0 0 16px #85eed8}.welcome h1{font-family:Trebuchet MS,Avenir Next,sans-serif;margin:0;font-size:clamp(58px,6.4vw,105px);line-height:.98;letter-spacing:-.075em;font-weight:900;text-shadow:0 7px 25px #04162b99}.welcome h1 em{color:#ff947a;font-style:normal}.welcome p{max-width:500px;font-size:clamp(16px,1.4vw,21px);line-height:1.54;color:#e3e8e3;margin:24px 0 30px;text-shadow:0 2px 9px #071827}.welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px}.primary-button{display:inline-flex;gap:34px;align-items:center;justify-content:space-between;border:0;border-radius:18px;padding:19px 23px 19px 28px;color:#142e41;background:#ff9b77;font-weight:900;font-size:18px;box-shadow:0 10px 32px #e76d594a,inset 0 2px #ffd5ab77;transition:transform .18s,background .18s}.primary-button:hover{transform:translateY(-3px);background:#ffb289}.primary-button:disabled{cursor:wait;opacity:.75;transform:none}.primary-button span{font-size:24px;line-height:.7}.welcome-login-button{border:1px solid #a6e7dc;border-radius:18px;padding:19px 22px;color:#f2fff4;background:#0d3047d9;font-weight:900;font-size:16px;box-shadow:0 9px 30px #06172770;transition:transform .18s,background .18s}.welcome-login-button:hover{transform:translateY(-3px);background:#21516a}.welcome-note{margin-top:23px;color:#d6ddd8;font-size:13px;font-weight:700}.welcome-note span:first-child{color:#87e7ce;font-size:16px}.lesson{position:absolute;inset:0}.lesson-top{position:absolute;top:106px;left:clamp(24px,4.4vw,74px);right:clamp(24px,4.4vw,74px);display:flex;align-items:center;gap:17px;max-width:760px;color:#e4f6e8;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:11px}.lesson-step{min-width:170px;white-space:nowrap}.progress-track{flex:1;height:5px;border-radius:5px;overflow:hidden;background:#c9efe744}.progress-track>div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9a74,#7be9d6);box-shadow:0 0 12px #7be9d6;transition:width .25s ease-out}.lesson-count{color:#e2f0e8;min-width:48px;text-align:right}.bottom-area{position:absolute;left:clamp(24px,4.4vw,74px);right:clamp(24px,4.4vw,74px);bottom:clamp(22px,3vw,47px);display:grid;gap:14px;max-width:1020px}.typing-card{width:min(600px,100%);padding:16px 23px 13px;border:1px solid #a1d5da66;border-radius:19px;background:linear-gradient(110deg,#0b3049ef,#102b42e8);box-shadow:0 18px 50px #0416268a,inset 0 1px #ffffff24;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.name-card{width:min(510px,100%);margin-bottom:24px;padding:20px 24px 16px;border:1px solid #9ce4d899;border-radius:19px;background:linear-gradient(110deg,#0b3049f5,#102b42ef);box-shadow:0 18px 50px #0416268a,inset 0 1px #ffffff24;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.name-card label{display:block;margin-bottom:11px;color:#fff5dc;font-size:clamp(20px,2vw,27px);font-weight:900}.name-row{display:flex;gap:10px}.name-row input{min-width:0;flex:1;height:49px;padding:0 15px;border:2px solid #99d7d2;border-radius:11px;outline:none;color:#173244;background:#fff9ec;font:800 18px Avenir Next,Trebuchet MS,sans-serif}.name-row input:focus{border-color:#ffb27f;box-shadow:0 0 0 3px #ffb27f55}.name-row button{border:0;border-radius:11px;padding:0 20px;color:#173244;background:#ff9b77;font-weight:900;white-space:nowrap}.name-row button:hover{background:#ffb48b}.name-card p{margin:11px 0 0;color:#cce6df;font-size:12px;line-height:1.4}.name-card #name-error{min-height:16px;margin-top:3px;color:#ffb9a9;font-weight:800}.end-card{width:min(620px,100%);padding:20px 24px;border:1px solid #a1d5da88;border-radius:19px;color:#fff5df;background:#0b3049ef;box-shadow:0 18px 50px #0416268a}.end-card strong{font-size:23px}.end-card p{margin:7px 0 15px;color:#d2e7df;line-height:1.4}.end-card div{display:flex;gap:10px;flex-wrap:wrap}.end-card button{border:0;border-radius:11px;padding:11px 16px;color:#173244;background:#ff9b77;font-weight:900}.end-card button+button{color:#0d3642;background:#88e9d8}.menu-dialog{width:min(840px,calc(100vw - 32px));max-height:min(88dvh,900px);padding:0;border:2px solid #8adaca;border-radius:24px;color:#173447;background:#fff8e9;box-shadow:0 30px 90px #021222c9;overflow:hidden}.menu-dialog::backdrop{background:#041a30b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.menu-shell{max-height:min(88dvh,900px);overflow-y:auto;padding:clamp(18px,3vw,30px)}.menu-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.menu-kicker{color:#268c87;font-size:11px;font-weight:900;letter-spacing:.18em}.menu-header h2{margin:5px 0 0;font:900 clamp(27px,3.5vw,40px)/1.05 "Trebuchet MS",sans-serif;letter-spacing:-.05em}.menu-close{width:38px;height:38px;border:0;border-radius:50%;background:#e4eee5;color:#173447;font-size:27px;line-height:1}.menu-tabs,.auth-switch{display:flex;gap:8px;margin:18px 0 13px}.menu-tabs button,.auth-switch button{border:1px solid #a9c8be;border-radius:999px;padding:9px 16px;color:#285461;background:#f3f4e9;font-weight:900}.menu-tabs button.selected,.auth-switch button.selected{border-color:#54bcae;background:#a6eadb;color:#133f48}.menu-message{min-height:20px;margin:0 0 10px;color:#237976;font-weight:800;line-height:1.4}.menu-message.error{color:#b54741}.menu-intro{color:#3b6067;line-height:1.45;margin:0 0 15px}.route-summary{margin:0 0 14px;padding:14px 16px;border:1px solid #8bd4c3;border-radius:13px;background:#eaf8f0}.route-summary strong{display:block;color:#1d5555;font-size:16px}.route-summary p{margin:8px 0 0;color:#315c62;font-size:13px;font-weight:800}.route-progress{height:9px;margin-top:10px;overflow:hidden;border-radius:999px;background:#cee4dd}.route-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#39b9a1}.lesson-list{display:grid;gap:7px;max-height:46dvh;padding:0 6px 0 0;margin:0;list-style:none;overflow-y:auto}.lesson-chapter{margin:13px 2px 3px;color:#276d6d;font-size:13px;font-weight:900;letter-spacing:.05em}.lesson-chapter:first-child{margin-top:0}.lesson-item{border:1px solid #d5e0d8;border-radius:12px;background:#fffdf5;overflow:hidden}.lesson-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;width:100%;padding:11px 14px;border:0;color:#173447;background:transparent;text-align:left}.lesson-open:hover{background:#eaf7f2}.lesson-open:focus-visible{outline-offset:-4px}.lesson-item strong{min-width:0;font-size:15px}.lesson-item span{grid-column:1;color:#5c7477;font-size:12px}.lesson-item b{grid-column:2;grid-row:1 / span 2;border-radius:999px;padding:6px 10px;color:#587177;background:#e6eeeb;font-size:11px;white-space:nowrap}.lesson-item[data-status=available]{border-color:#e7ab85;background:#fff1df}.lesson-item[data-status=available] b{color:#633e2b;background:#ffc29a}.lesson-item[data-status=in-progress]{border-color:#e7ab85;background:#fff1df}.lesson-item[data-status=in-progress] b{color:#633e2b;background:#ffc29a}.lesson-item[data-status=completed]{border-color:#65c6b1;background:#e6f8ee}.lesson-item[data-status=completed] b{color:#185b51;background:#a1e8cd}.menu-actions{display:flex;gap:10px;margin-top:17px;flex-wrap:wrap}.menu-primary,.menu-secondary,.delete-button{border:0;border-radius:11px;padding:12px 16px;font-weight:900}.menu-primary{color:#173244;background:#ff9b77}.menu-secondary{color:#183c47;background:#a1e7d8}.menu-primary:hover,.menu-secondary:hover{filter:brightness(1.05)}.menu-primary:disabled{opacity:.55;cursor:wait}.auth-form,.code-panel,.verification-panel{display:grid;gap:13px;padding:18px;border:1px solid #c9ded2;border-radius:15px;background:#fbfcf4}.auth-form #signup-fields{display:grid;gap:10px;padding:15px;border:1px solid #d2e7db;border-radius:12px;background:#f0f8f0}.auth-form h3,.code-panel h3,.verification-panel h3{margin:0 0 5px;font-size:21px}.auth-form label,.code-panel label,.verification-panel label,.delete-panel label{font-size:14px;font-weight:800}.auth-form input[type=text],.auth-form input[type=email],.code-panel input,.delete-panel input{width:100%;min-height:43px;padding:8px 12px;border:1px solid #8aaea7;border-radius:9px;background:#fff;color:#173447;font:700 16px Avenir Next,sans-serif}.auth-form fieldset{display:grid;gap:7px;margin:4px 0 0;padding:12px;border:1px solid #c1d8cb;border-radius:9px}.auth-form legend{font-weight:900}.auth-form fieldset label{font-weight:700}.under13-note{padding:11px 13px;border-radius:9px;color:#244e5a;background:#e3f3ea;line-height:1.45}.code-panel .under13-note{display:grid;gap:8px}.code-panel .under13-note label{display:flex;align-items:flex-start;gap:8px}.code-panel .under13-note input{width:auto;min-height:0;margin-top:3px}.privacy-note{margin:4px 0 0;color:#5a7376;font-size:12px;line-height:1.45}.code-panel p,.verification-panel p{margin:0 0 5px;color:#3b6067;line-height:1.45}.code-panel form,.verification-panel form{display:grid;gap:9px}.verification-panel form label{display:flex;align-items:flex-start;gap:8px}.verification-panel input[type=checkbox]{margin-top:3px}.text-button{border:0;padding:6px;color:#226e70;background:transparent;font-weight:900;text-align:left}.account-greeting{font-size:18px}.delete-panel{margin-top:20px;padding:14px;border:1px solid #e3bab2;border-radius:12px;background:#fff6f1}.delete-panel summary{color:#a0453c;font-weight:900;cursor:pointer}.delete-panel p{line-height:1.45}.delete-panel form{display:grid;gap:9px;margin-top:12px}.delete-button{color:#fff;background:#af554b}.typing-head,.typing-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;font-weight:900;letter-spacing:.15em;color:#9fe9dc;text-transform:uppercase}.typing-head span:last-child{color:#e4eadf}.sequence{display:flex;align-items:center;gap:clamp(4px,.7vw,12px);min-height:84px;flex-wrap:wrap;padding:13px 0 8px}.letter{display:grid;place-items:center;width:clamp(42px,4vw,62px);height:clamp(50px,4.6vw,66px);border-radius:13px;color:#ebf1e8;background:#28435d;border:1px solid #99b3b766;box-shadow:inset 0 -4px #122d46;font-size:clamp(25px,2.45vw,36px);font-family:Trebuchet MS,sans-serif;font-weight:900;transition:transform .15s,opacity .15s}.letter.current{color:#102b3c;background:#80efda;border-color:#b9ffee;box-shadow:0 0 0 4px #80efda30,0 0 24px #80efdab0,inset 0 -4px #41bbab;transform:translateY(-3px)}.letter.done{color:#a7d6cb;background:#1d3f52;opacity:.65;border-color:transparent;box-shadow:none}.typing-foot{min-height:32px;border-top:1px solid #a4d5d62c;padding-top:10px;color:#bcd8d6;letter-spacing:.05em;text-transform:none;font-size:12px}.key-guide{display:flex;gap:5px}.keycap{display:grid;place-items:center;width:26px;height:25px;border:1px solid #829aa5;border-radius:5px;color:#dbede7;background:#19354b;font-weight:900}.keycap.active{background:#80efda;border-color:#b5fbea;color:#143142}.typing-hands{width:min(600px,100%);padding:12px 17px 11px;border:1px solid #9ee7d68c;border-radius:16px;color:#e9f6e8;background:linear-gradient(125deg,#0b3049f2,#163a50ed);box-shadow:0 13px 36px #06192d70}.hands-side-panel.typing-hands,.course-side-hands.typing-hands{position:fixed;top:clamp(155px,22vh,220px);right:clamp(24px,4.4vw,74px);z-index:4;width:clamp(370px,29vw,410px)}.th-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.th-heading strong{color:#fff0d2;font-weight:900}.th-heading span{color:#91e7d6;font-size:10px;font-weight:900;letter-spacing:.12em}.typing-hands svg{display:block;width:100%;height:auto;overflow:visible}.th-hand{fill:none;stroke:#dae8ea;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 1px 2px #0b2133)}.th-palm,.th-finger{fill:none;stroke:inherit;stroke-width:inherit;stroke-linecap:round;stroke-linejoin:round}.th-index{stroke-width:5.3}.th-finger.th-finger-active{stroke:#79cfff;stroke-width:7;filter:drop-shadow(0 0 5px #69c6ff)}.th-key-body{fill:#244257;stroke:#6b8f9b;stroke-width:1.5}.th-key-label{fill:#f3f5e9;font:900 23px Trebuchet MS,sans-serif}.th-space-label{fill:#dceee5;font:900 12px Trebuchet MS,sans-serif;letter-spacing:2px}.th-shift-label{fill:#dceee5;font:900 10px Trebuchet MS,sans-serif;letter-spacing:1px}.th-secondary-label{fill:#ffe2a8;font:900 12px Trebuchet MS,sans-serif}.th-key.th-rest .th-key-body{fill:#2b5c61;stroke:#93dfca}.th-key.th-anchor .th-key-body{fill:#4a7170;stroke:#ffc98e;stroke-width:2.5}.th-rest-dot{fill:#b7f4d5}.th-ridge{fill:#ffd78e}.th-key.th-active .th-key-body{fill:#78cfff;stroke:#b9edff;stroke-width:3;filter:drop-shadow(0 0 8px #74ceff)}.th-key.th-active .th-key-label,.th-key.th-active .th-space-label,.th-key.th-active .th-shift-label,.th-key.th-active .th-secondary-label{fill:#173648}.th-key.th-active .th-rest-dot{fill:#255a5c}.th-reach-line{fill:none;stroke:#79cfff;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 8;opacity:0;pointer-events:none}.th-reach-line.th-visible{opacity:.8}.th-finger-tip{fill:#79cfff;stroke:#d6f3ff;stroke-width:2;opacity:0}.th-finger-tip.th-tap{animation:finger-reach 1.05s ease-in-out infinite;opacity:1;filter:drop-shadow(0 0 6px #79cfff)}@keyframes finger-reach{45%,60%{transform:translate(var(--reach-x),var(--reach-y))}}.th-caption{margin:-1px 0 0;color:#d7e8de;font-size:12px;font-weight:700;line-height:1.35}.hands-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:0 0 9px;padding:7px 12px;border:1px solid #8ce4d2;border-radius:10px;color:#b9ffea;background:#174a55;font-size:12px;font-weight:900}.hands-toggle:before{content:"✋";margin-right:7px;font-size:14px}.hands-toggle:hover{background:#23696d}.hands-toggle[aria-expanded=true]{color:#173648;background:#9de9d7}.typing-card .hands-toggle{margin-top:1px}.course-task .hands-toggle{margin-top:2px}@media(min-width:1221px){.course-content:has(>.course-side-hands:not(.hidden)) .course-panel{max-width:760px}}@media(max-width:1220px){.hands-side-panel.typing-hands,.course-side-hands.typing-hands{position:static;width:min(600px,100%)}.bottom-area:has(>.hands-side-panel:not(.hidden)){top:138px;bottom:24px;overflow-y:auto;align-content:start;padding-bottom:4px}.course-content:has(>.course-side-hands:not(.hidden)){top:138px;bottom:24px;display:grid;gap:12px;overflow-y:auto;align-content:start}}.dialogue{--speaker-color: #ff9b77;position:relative;display:flex;align-items:center;min-height:155px;width:min(1020px,100%);padding:17px 21px;border:2px solid var(--speaker-color);border-radius:23px;background:linear-gradient(120deg,#fff7e8,#f1f2df);box-shadow:0 18px 60px #041626ad,0 0 24px color-mix(in srgb,var(--speaker-color) 24%,transparent),inset 0 2px #fff;color:#20374b}.dialogue:before{content:"";position:absolute;left:62px;top:-14px;width:22px;height:22px;background:#fff7e8;border-left:2px solid var(--speaker-color);border-top:2px solid var(--speaker-color);transform:rotate(45deg);border-radius:3px}.dialogue.speaker-jip{--speaker-color: #73dacc}.dialogue.speaker-brom{--speaker-color: #bba3ec}.portrait{flex:none;display:grid;place-items:center;width:116px;height:112px;border-radius:17px;margin-right:20px;overflow:hidden;background:#ffe1b3;border:3px solid var(--speaker-color);box-shadow:0 0 0 5px color-mix(in srgb,var(--speaker-color) 20%,transparent),0 7px 18px #1d39452a}.portrait.jip{background:#c4f2e9}.portrait.brom{background:#ded3f1}.portrait svg{width:108%;height:108%;filter:drop-shadow(0 5px 3px #18364b2c)}.dialogue-body{align-self:stretch;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}.speaker{align-self:flex-start;display:inline-flex;align-items:center;padding:3px 8px;margin-left:-8px;border-radius:7px;background:color-mix(in srgb,var(--speaker-color) 27%,white);font-size:16px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#96502f}.portrait.jip+.dialogue-body .speaker{color:#188784}.portrait.brom+.dialogue-body .speaker{color:#8262b1}.dialogue-body p{margin:6px 0;color:#183344;font-family:Trebuchet MS,Avenir Next,sans-serif;font-size:clamp(17px,1.5vw,22px);line-height:1.32;font-weight:800}.dialogue-status{font-size:12px;color:#486a74;font-weight:700;line-height:1.3}.dialogue-status.error{color:#c3524b}.success-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:#061b3180;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.audio-loading{position:absolute;inset:0;z-index:11;display:grid;place-items:center;padding:24px;color:#fff7df;background:#061b3199;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-size:clamp(18px,3vw,28px);font-weight:900;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.success-card{width:min(430px,100%);padding:34px 30px 31px;border:2px solid #a7f3df;border-radius:26px;color:#193647;background:#fff8e9;text-align:center;box-shadow:0 24px 80px #03182c99,0 0 48px #85ebd477;animation:success-pop .3s ease-out both}.success-check{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 18px;border:5px solid #fff8e9;border-radius:50%;color:#133e48;background:#83ead0;box-shadow:0 0 0 5px #2fae9f,0 11px 24px #3aa99255;font-size:66px;font-weight:900;line-height:1}.success-card strong{display:block;font-family:Trebuchet MS,Avenir Next,sans-serif;font-size:clamp(27px,4vw,37px);letter-spacing:-.04em}.success-card p{margin:9px 0 0;color:#365f69;font-size:17px;line-height:1.4;font-weight:800}@keyframes success-pop{0%{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.dialogue-actions{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:11px;margin-left:15px}.small-button{border:0;background:transparent;color:#42717d;font-size:20px;white-space:nowrap;padding:3px 4px}.small-button span{font-size:11px;font-weight:900;letter-spacing:.05em}.small-button:hover{color:#172f41}.continue-button{border:0;border-radius:12px;padding:13px 17px;min-width:115px;background:#1d4251;color:#f7f4e7;font-size:14px;font-weight:900;white-space:nowrap;transition:transform .17s,background .17s}.continue-button.ready{background:#f97;color:#173244;box-shadow:0 6px 16px #dd826553}.continue-button.ready:hover{transform:translateY(-2px);background:#ffaf8a}.continue-button:disabled{cursor:default;opacity:.45}.shake{animation:shake .22s ease-in-out}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.mobile-warning{display:none}@media(max-width:900px){.topbar{padding:20px 24px}.brand{font-size:22px}.chapter{display:none}.scene-label{top:92px;right:24px}.welcome{left:28px;max-width:60vw}.welcome h1{font-size:clamp(51px,7.5vw,72px)}.lesson-top{top:88px;left:24px;right:24px}.bottom-area{left:24px;right:24px;bottom:22px}.dialogue{min-height:130px}.portrait{width:84px;height:84px;margin-right:14px}.typing-card{width:min(610px,100%)}}@media(max-width:640px){.experience{min-height:720px;height:100dvh}.topbar{padding:15px 16px;gap:8px;flex-wrap:wrap}.topbar-right{width:100%;gap:7px}.icon-button{min-height:34px;padding:0 10px;font-size:18px;flex:none}.menu-trigger{padding:8px 10px;font-size:11px}.brand{font-size:19px;gap:9px}.brand-mark{width:31px;height:31px;font-size:23px}.chapter,.scene-label{display:none}.welcome{top:48%;left:22px;right:22px;max-width:none;transform:translateY(-50%)}.welcome h1{font-size:clamp(47px,12vw,75px)}.welcome p{max-width:360px}.welcome-actions{align-items:stretch;flex-direction:column;max-width:360px}.welcome-actions button{justify-content:center;width:100%}.lesson-top{top:112px;left:16px;right:16px;gap:10px}.lesson-step{min-width:130px;font-size:9px}.lesson-count{font-size:9px;min-width:40px}.bottom-area{left:12px;right:12px;bottom:66px;gap:8px}.typing-card{padding:12px 13px}.bottom-area:has(>.hands-side-panel:not(.hidden)){top:145px;bottom:66px}.course-content:has(>.course-side-hands:not(.hidden)){top:145px;bottom:68px}.typing-hands{padding:8px 10px}.th-caption{font-size:11px}.name-card{width:100%;margin-bottom:0;padding:15px}.end-card{padding:14px}.end-card strong{font-size:18px}.end-card p{font-size:13px}.menu-dialog{width:calc(100vw - 16px);max-height:94dvh;border-radius:17px}.menu-shell{max-height:94dvh;padding:17px}.lesson-list{max-height:40dvh}.lesson-open{grid-template-columns:1fr}.lesson-item b{grid-column:1;grid-row:auto;justify-self:start}.menu-actions>button{flex:1 1 100%}.name-row{flex-direction:column}.name-row button{min-height:45px}.sequence{min-height:66px}.letter{width:37px;height:45px;font-size:25px;border-radius:9px}.dialogue{align-items:flex-start;min-height:158px;padding:11px;border-radius:18px;flex-wrap:wrap}.portrait{width:58px;height:58px;margin-right:10px;border-radius:11px}.dialogue-body{min-height:58px}.dialogue-body p{font-size:15px}.dialogue-actions{flex-basis:100%;flex-direction:row;align-self:auto;align-items:center;margin:5px 0 0}.continue-button{padding:10px 12px;font-size:13px}.mobile-warning{display:block;position:absolute;bottom:0;left:0;right:0;padding:12px 17px;background:#f97;color:#173244;text-align:center;font-size:12px;font-weight:900;z-index:8}}@media(max-width:380px){.topbar{padding-inline:10px}.brand{font-size:16px;gap:5px}.brand-mark{width:28px;height:28px;font-size:21px}.menu-trigger{padding:7px 8px}.welcome h1{font-size:clamp(38px,11.3vw,47px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.course-screen{position:absolute;inset:0;z-index:2;pointer-events:none}.course-screen button{pointer-events:auto}.course-top{position:absolute;top:106px;left:clamp(24px,4.4vw,74px);right:clamp(24px,4.4vw,74px);display:flex;align-items:center;gap:16px;max-width:800px;color:#eefbf1;font-size:12px;font-weight:900;letter-spacing:.07em;text-shadow:0 2px 8px #071b2c}.course-top>span:first-child{max-width:340px}.course-top>span:last-child{min-width:44px;text-align:right}.course-progress{height:8px;flex:1;border-radius:999px;background:#d9f2e54d;overflow:hidden}.course-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9c76,#84f1d8);transition:width .2s ease}.course-content{position:absolute;left:clamp(24px,4.4vw,74px);right:clamp(24px,4.4vw,74px);bottom:clamp(24px,3vw,48px);max-width:790px}.course-panel{padding:clamp(22px,3vw,34px);border:1px solid #8ce9d5a8;border-radius:23px;color:#f9f3e2;background:linear-gradient(110deg,#0b3049f2,#102b42ec);box-shadow:0 20px 55px #04162699,inset 0 1px #ffffff2a;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);pointer-events:auto}.course-kicker{display:block;margin-bottom:10px;color:#91eed7;font-size:11px;font-weight:900;letter-spacing:.16em}.course-panel h1,.course-panel h2{margin:0 0 14px;font-family:Trebuchet MS,sans-serif;font-size:clamp(25px,3.4vw,38px);line-height:1.08}.course-panel p{margin:0 0 18px;color:#e3eee7;font-size:clamp(15px,1.5vw,18px);line-height:1.5}.course-layout-options,.course-story-actions,.course-finish-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.course-layout-options button,.course-primary,.course-secondary{min-height:46px;border:0;border-radius:12px;padding:11px 17px;color:#173447;background:#ff9b77;font-weight:900}.course-layout-options button{display:grid;gap:5px;min-width:150px;text-align:left;font-size:18px}.course-layout-options button span{font-size:11px;font-weight:700;letter-spacing:.13em}.course-layout-options button+button,.course-secondary{background:#9ce7d9}.course-layout-options button:hover,.course-primary:hover,.course-secondary:hover{filter:brightness(1.1)}.course-dialogue{display:flex;align-items:flex-end;gap:18px;margin:8px 0 18px}.course-portrait{display:grid;place-items:center;flex:0 0 112px;width:112px;height:94px;border:2px solid #f9dfaa;border-radius:18px;background:linear-gradient(145deg,#395775,#173c55);box-shadow:0 10px 24px #03182780,inset 0 1px #fff4}.course-portrait.jip{border-color:#9cf2e4}.course-portrait.brom{border-color:#d8bcf4}.course-portrait svg{display:block;width:102px;height:auto;filter:drop-shadow(0 4px 3px #051e2b88)}.course-dialogue-copy{position:relative;flex:1;min-width:0;padding:14px 18px 15px;border-radius:18px 18px 18px 5px;color:#173447;background:#fff9ec;box-shadow:0 10px 25px #04162663}.course-dialogue-copy:before{content:"";position:absolute;left:-9px;bottom:12px;width:18px;height:18px;background:#fff9ec;transform:rotate(45deg)}.course-dialogue-copy strong{display:inline-block;margin-bottom:6px;color:#8c4c28;font-size:13px;font-weight:900}.course-portrait.jip+.course-dialogue-copy strong{color:#19796e}.course-portrait.brom+.course-dialogue-copy strong{color:#725293}.course-dialogue-copy p{position:relative;margin:0;color:#173447}.course-dialogue.route-message .course-portrait{display:none}.course-dialogue.route-message .course-dialogue-copy{border-radius:15px;background:#d9f2e9}.course-dialogue.route-message .course-dialogue-copy:before{display:none}.course-dialogue.route-message .course-dialogue-copy strong{color:#276b68}.course-key-demo{display:inline-flex;align-items:center;min-height:30px;margin:0 0 14px!important;padding:5px 11px;border:1px solid #91eed7;border-radius:999px;color:#d8fff2!important;background:#256575;font-size:13px!important;font-weight:800}.course-story-actions{justify-content:flex-end}.course-task{max-width:790px}.course-task-head,.course-task-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#9ee8dc;font-size:12px;font-weight:900}.course-task-head{margin-bottom:10px;letter-spacing:.12em}.course-task h2{margin-bottom:9px;font-size:clamp(23px,3vw,34px)}.course-task p{margin-bottom:14px;font-size:15px}.course-target{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:68px;margin-bottom:15px}.course-character{display:grid;place-items:center;min-width:35px;height:43px;padding:0 4px;border:1px solid #99b3b766;border-radius:9px;color:#f4f7ec;background:#28435d;font:900 25px Trebuchet MS,sans-serif}.course-character.current{color:#102b3c;background:#80efda;border-color:#b9ffee;box-shadow:0 0 0 3px #80efda30,0 0 19px #80efdab0;transform:translateY(-2px)}.course-character.done{color:#a7d6cb;background:#1d3f52;opacity:.65;border-color:transparent}.course-task-foot{padding-top:12px;border-top:1px solid #a4d5d62c;font-weight:700}.course-task-foot>span:last-child{white-space:nowrap}.course-feedback{position:absolute;inset:-24px;display:grid;align-content:center;justify-items:center;gap:8px;border-radius:22px;color:#fff9ea;background:#061b3180;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-align:center;pointer-events:none}.course-feedback strong{font-size:28px}.course-feedback>span:last-child{max-width:360px;font-size:16px}.course-check{display:grid;place-items:center;width:74px;height:74px;border:4px solid #d4ffdf;border-radius:50%;color:#174b49;background:#8decbd;box-shadow:0 0 34px #91ffbf8c;font-size:47px;line-height:1}.course-finish-actions{margin-top:18px}@media(max-width:900px){.course-top{top:88px;left:24px;right:24px}.course-content{left:24px;right:24px;bottom:24px}}@media(max-width:640px){.course-top{top:112px;left:16px;right:16px;gap:8px;font-size:10px}.course-top>span:first-child{max-width:135px}.course-content{left:12px;right:12px;bottom:68px}.course-panel{max-height:calc(100dvh - 200px);overflow-y:auto;padding:16px}.course-panel h1,.course-panel h2{font-size:26px}.course-dialogue{align-items:flex-start;gap:9px}.course-portrait{flex-basis:72px;width:72px;height:67px;border-radius:12px}.course-portrait svg{width:70px}.course-dialogue-copy{padding:10px 12px;border-radius:12px 12px 12px 4px}.course-dialogue-copy p{font-size:14px}.course-character{min-width:29px;height:35px;font-size:19px}.course-task-foot{align-items:flex-start;flex-direction:column;gap:6px}.course-feedback{inset:-8px}}@media(prefers-reduced-motion:reduce){.course-progress span,.course-character{transition:none;transform:none}}