.student-shell{--paper:#f7f5ef;--card:#fff;--cream:#fcf8ee;--ink:#1e343b;--ink2:#4e656d;--ink3:#82939a;--line:#e6e1d3;--line2:#d5cfbd;--amber:#e89b2c;--amber-d:#c67d10;--amber-t:#fbf0da;--amber-l:#efdcb6;--teal:#2e7e77;--teal-d:#22605b;--teal-t:#e2efed;--green:#2e8b62;--green-d:#226b4a;--green-t:#e5f2ea;--clay:#c05b45;--clay-d:#9e4634;--clay-t:#f9eae4;--r:18px;--rs:12px;--sh:0 1px 2px #1e343b0d, 0 16px 36px -20px #1e343b33;--sh-sm:0 1px 2px #1e343b0f, 0 8px 18px -12px #1e343b2e;--fd:"Fraunces", Georgia, serif;--fb:"Atkinson Hyperlegible", system-ui, sans-serif;--fm:"Spline Sans Mono", ui-monospace, monospace;--background:var(--paper);--foreground:var(--ink);--card-foreground:var(--ink);--muted:var(--line);--muted-foreground:var(--ink2);--border:var(--line);--primary:var(--amber);--primary-foreground:var(--ink);--ring:var(--amber);--radius:var(--rs);--success:var(--green);--success-foreground:var(--paper);--warning:var(--amber);--warning-foreground:var(--ink);--destructive:var(--clay);--destructive-foreground:#fff;--secondary:var(--line);--secondary-foreground:var(--ink);--accent:var(--amber-t);--accent-foreground:var(--amber-d);--popover:var(--card);--popover-foreground:var(--ink);font-family:var(--fb);color:var(--ink);background-color:var(--paper);-webkit-font-smoothing:antialiased;background-image:radial-gradient(#1e343b0d 1px,#0000 1.3px);background-size:24px 24px;background-attachment:fixed;font-size:16.5px;line-height:1.6}.student-shell ::selection{background:var(--amber-t);color:var(--ink)}.student-shell :focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}.student-shell h1,.student-shell h2,.student-shell h3{font-family:var(--fd);letter-spacing:-.01em;font-weight:600;line-height:1.15}.student-shell a{color:var(--teal-d)}.s-display{font-family:var(--fd);letter-spacing:-.02em;font-size:clamp(2.5rem,5.4vw,4rem);font-weight:700;line-height:1.08}.s-heading{font-family:var(--fd);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:600;line-height:1.15}.s-subheading{font-family:var(--fd);font-size:1.3rem;font-weight:600;line-height:1.2}.s-eyebrow,.s-kicker{font-family:var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--amber-d);font-size:.68rem;font-weight:700}.s-body{font-family:var(--fb);font-size:1rem;line-height:1.6}.s-mono{font-family:var(--fm)}.s-block{padding:30px 0 8px}.s-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:26px}.s-card-sm{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);box-shadow:var(--sh-sm);padding:20px}.s-callout{border-left:4px solid var(--amber);background:var(--amber-t);border-radius:0 var(--rs) var(--rs) 0;padding:16px 18px;font-size:.95rem}.s-notice{background:var(--teal-t);border-radius:var(--rs);border:1px solid #cbe0dd;padding:20px 22px}.s-step-head{align-items:flex-start;gap:18px;margin-bottom:22px;display:flex}.s-step-no{background:var(--ink);width:54px;height:54px;color:var(--paper);font-family:var(--fd);box-shadow:var(--sh-sm);border-radius:16px;flex:none;place-items:center;font-size:1.6rem;font-weight:700;display:grid}.s-step-no-amber{background:var(--amber);color:var(--ink)}.s-step-sub{color:var(--ink2);max-width:56ch;margin-top:4px}.s-btn{font-family:var(--fb);cursor:pointer;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:13px 22px;font-size:.95rem;font-weight:700;line-height:1;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;display:inline-flex}.s-btn-pri{background:var(--ink);color:var(--paper)}.s-btn-pri:hover{background:#14262b;transform:translateY(-1px);box-shadow:0 10px 20px -12px #1e343b99}.s-btn-amber{background:var(--amber);color:var(--ink)}.s-btn-amber:hover{background:#f0ac44;transform:translateY(-1px);box-shadow:0 10px 20px -12px #e89b2ccc}.s-btn-ghost{background:var(--card);border-color:var(--line2);color:var(--ink)}.s-btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}.s-btn-sm{border-radius:10px;min-height:40px;padding:9px 15px;font-size:.85rem}.s-opt{text-align:left;background:var(--paper);border:1.5px solid var(--line);font-family:var(--fb);cursor:pointer;border-radius:11px;align-items:center;gap:12px;width:100%;min-height:50px;padding:13px 16px;font-size:1rem;font-weight:700;transition:transform .18s,border-color .18s,background .18s;display:flex}.s-opt:hover{border-color:var(--ink);transform:translate(3px)}.s-opt-key{border:1.5px solid var(--line2);width:22px;height:22px;color:var(--ink3);font-size:.72rem;font-family:var(--fm);border-radius:50%;flex:none;place-items:center;display:grid}.s-opt.correct{background:var(--green-t);border-color:var(--green);color:var(--green-d)}.s-opt.correct .s-opt-key{background:var(--green);border-color:var(--green);color:#fff}.s-opt.wrong{background:var(--clay-t);border-color:#e0b3a6;animation:.4s s-shake}.s-tf-btns{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}@media(max-width:480px){.s-tf-btns{grid-template-columns:1fr}}.s-tfb{border:1.5px solid var(--line);background:var(--paper);font-family:var(--fb);cursor:pointer;border-radius:10px;min-height:48px;padding:12px;font-size:.9rem;font-weight:700;transition:transform .18s,border-color .18s,background .18s}.s-tfb:hover{border-color:var(--ink);transform:translateY(-1px)}.s-tfb.right{background:var(--green-t);border-color:var(--green);color:var(--green-d)}.s-tfb.miss{background:var(--clay-t);border-color:#e0b3a6;animation:.4s s-shake}.s-tin{border:1.5px solid var(--line2);background:var(--paper);font-size:1.05rem;font-weight:700;font-family:var(--fm);border-radius:11px;width:100%;padding:12px 16px;transition:border-color .2s,background .2s,box-shadow .2s}.s-tin:focus{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-t);background:#fff;outline:none}.s-tin.ok{border-color:var(--green);background:var(--green-t);color:var(--green-d)}.s-tin.err{border-color:#e0b3a6;animation:.4s s-shake}.s-warea{border:1.5px solid var(--line2);border-radius:var(--rs);width:100%;min-height:130px;font-family:var(--fb);background:var(--card);resize:vertical;padding:16px;font-size:1.05rem;line-height:1.8;transition:border-color .2s,box-shadow .2s}.s-warea:focus{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-t);outline:none}.s-fb{min-height:1.4em;color:var(--ink3);margin-top:10px;font-size:.9rem;font-weight:700}.s-fb.good{color:var(--green-d)}.s-fb.warn{color:var(--clay-d)}.s-done-note{border-radius:var(--rs);background:var(--green-t);color:var(--green-d);align-items:center;gap:9px;margin-top:14px;padding:12px 16px;font-size:.9rem;font-weight:700;display:none}.s-done-note.show{display:flex}.s-saybtn{border:1.5px solid var(--line2);background:var(--card);font-family:var(--fb);cursor:pointer;min-height:44px;color:var(--ink);border-radius:99px;align-items:center;gap:8px;padding:10px 18px;font-size:.88rem;font-weight:700;transition:border-color .2s,transform .2s,background .2s;display:inline-flex}.s-saybtn:hover{border-color:var(--clay);transform:translateY(-1px)}.s-saybtn.rec{background:var(--clay);border-color:var(--clay);color:#fff;animation:1.1s infinite s-recpulse}.s-saybtn.said{background:var(--green-t);color:var(--green-d);border-color:#bfdccb}.s-bar{background:var(--line);border-radius:99px;height:8px;overflow:hidden}.s-bar i{background:linear-gradient(90deg,var(--amber),#f2b653);border-radius:99px;width:0%;height:100%;transition:width .6s cubic-bezier(.2,.7,.2,1);display:block}.s-bar-thin{height:5px}.s-vcardf{perspective:1000px;text-align:left;cursor:pointer;background:0 0;border:0;height:196px;padding:0}.s-vcardf .inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.9,.4,1);position:relative}.s-vcardf.flip .inner{transform:rotateY(180deg)}.s-vface{backface-visibility:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm);border-radius:14px;flex-direction:column;padding:16px;display:flex;position:absolute;inset:0}.s-vfront{background:var(--card)}.s-vback{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotateY(180deg)}.s-vcardf.flip .s-vfront{visibility:hidden}.s-toast{background:var(--ink);color:var(--paper);font-family:var(--fb);pointer-events:none;border-radius:99px;align-items:center;gap:9px;padding:11px 22px;font-size:.88rem;font-weight:700;animation:.35s cubic-bezier(.3,1.4,.5,1) s-toastin;display:flex;box-shadow:0 14px 30px -10px #0a191e80}.s-score-card{background:var(--ink);color:var(--paper);border-radius:var(--r);text-align:center;padding:30px}.s-score-num{font-family:var(--fd);color:var(--amber);font-size:3.4rem;line-height:1}.s-score-msg{color:#cbd8d6;margin-top:8px}.s-complete-wrap{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);text-align:center;border-radius:24px;padding:clamp(28px,6vw,54px);position:relative;overflow:hidden}.s-complete-wrap:before{content:"";background:linear-gradient(90deg,var(--amber),var(--teal));height:6px;position:absolute;top:0;left:0;right:0}.s-stamp{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:88px;height:88px;margin:0 auto 18px;animation:.5s cubic-bezier(.3,1.7,.5,1) s-stamp;display:grid;box-shadow:0 14px 30px -12px #2e8b6299}.s-audio-card{background:var(--ink);color:var(--paper);border-radius:var(--r);box-shadow:var(--sh);padding:24px}.s-aplay{background:var(--amber);width:60px;height:60px;color:var(--ink);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;transition:transform .2s;display:grid}.s-aplay:hover{transform:scale(1.06)}.js .s-reveal{opacity:0;animation:.6s cubic-bezier(.2,.7,.2,1) forwards sRevealIn;transform:translateY(20px)}@keyframes sRevealIn{to{opacity:1;transform:none}}.js .s-reveal.in{opacity:1;transform:none}@keyframes s-shake{25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@keyframes s-pop{0%{opacity:0;transform:scale(.7)}}@keyframes s-stamp{0%{opacity:0;transform:scale(.3)rotate(-14deg)}}@keyframes s-toastin{0%{opacity:0;transform:translateY(16px)scale(.9)}}@keyframes s-blink{50%{opacity:.25}}@keyframes s-recpulse{0%{box-shadow:0 0 #c05b4573}to{box-shadow:0 0 0 12px #c05b4500}}@keyframes s-drift{0%{transform:translateY(-14px)rotate(-4deg)}to{transform:translateY(16px)rotate(5deg)}}@media(max-width:640px){.student-shell{font-size:16px}.s-card,.s-card-sm{padding:20px}.s-step-head{gap:13px}.s-step-no{border-radius:13px;width:46px;height:46px;font-size:1.35rem}.s-btn{width:100%}}@media(prefers-reduced-motion:reduce){.student-shell *,.student-shell :before,.student-shell :after{transition:none!important;animation:none!important}.js .s-reveal{opacity:1;transform:none}}
