:root{--ink:#0a0913;--ink-2:#110f1e;--ink-3:#1a1729;--ink-4:#262139;--line:#ffffff14;--line-2:#ffffff26;--text:#f6f3ff;--muted:#aaa4c6;--faint:#6e6890;--pink:#ff2e88;--pink-deep:#b0125c;--cyan:#22e4f0;--amber:#ffb627;--jade:#2ee59d;--violet:#a98bff;--red:#ff5a5f;--t1:#ff5c7f;--t2:#ffb627;--t3:#2ee59d;--t4:#4cc9ff;--t5:#b794ff;--t6:#c3c6d8;--font-display:"Bungee", "Impact", system-ui, sans-serif;--font-shade:"Bungee Shade", "Bungee", system-ui, sans-serif;--font-body:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;--font-han:"Noto Serif TC", "PingFang HK", "Microsoft JhengHei", "Songti TC", serif;--r:16px;--gutter:16px;--bar-h:92px;--sat:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--ink);min-height:100dvh;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.5;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,p{margin:0}sup{vertical-align:.55em;margin-left:1px;font-size:.62em;line-height:0}.zh,[lang=yue-HK]{font-family:var(--font-han)}.bg{z-index:-1;background:radial-gradient(1200px 600px at 50% -10%, #1c1438 0%, transparent 60%), linear-gradient(180deg, #0c0a18 0%, var(--ink) 100%);position:fixed;inset:0;overflow:hidden}.bg-glow{filter:blur(90px);opacity:.22;border-radius:50%;width:60vmax;height:60vmax;position:absolute}.bg-glow--a{background:var(--pink);animation:26s ease-in-out infinite alternate drift;top:-30vmax;left:-25vmax}.bg-glow--b{background:var(--cyan);opacity:.14;animation:32s ease-in-out infinite alternate-reverse drift;bottom:-35vmax;right:-30vmax}.bg-grain{opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:-50%}@keyframes drift{to{transform:translate(8vmax,6vmax)scale(1.1)}}.screen{max-width:760px;padding:0 var(--gutter);min-height:100dvh;margin:0 auto}.neon-flicker{animation:7s infinite flicker}@keyframes flicker{0%,18%,22%,25%,53%,57%,to{opacity:1}20%,24%,55%{opacity:.45}}.eyebrow{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:11px}.tag{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;display:inline-flex}.tag--amber{color:var(--amber);box-shadow:0 0 16px -4px var(--amber)}.t1{--tc:var(--t1)}.t2{--tc:var(--t2)}.t3{--tc:var(--t3)}.t4{--tc:var(--t4)}.t5{--tc:var(--t5)}.t6{--tc:var(--t6)}.btn{min-height:52px;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-size:15px;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,opacity .2s;display:inline-flex}.btn:disabled{opacity:.45}.btn--primary{color:#fff;background:linear-gradient(180deg, #ff58a1 0%, var(--pink) 55%, #f01f78 100%);box-shadow:inset 0 1px 0 #ffffff59, 0 4px 0 var(--pink-deep), 0 10px 34px -8px #ff2e88bf;text-shadow:0 1px #78003259}.btn--primary:not(:disabled):hover{box-shadow:inset 0 1px 0 #ffffff59, 0 5px 0 var(--pink-deep), 0 14px 40px -8px #ff2e88e6;transform:translateY(-1px)}.btn--primary:not(:disabled):active{box-shadow:inset 0 1px 0 #ffffff59, 0 1px 0 var(--pink-deep), 0 6px 20px -8px #ff2e88cc;transform:translateY(3px)}.btn--ghost{border:1.5px solid var(--line-2);color:var(--text);background:#ffffff05}.btn--ghost:not(:disabled):hover{border-color:var(--cyan);box-shadow:0 0 20px -6px var(--cyan)}.btn--danger{color:#fff;background:var(--red);box-shadow:0 4px #9e2a2e}.btn--text-danger{font-family:var(--font-body);color:var(--red);padding:8px 0;font-weight:600}.btn--wide{width:100%}.btn--cta{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;min-height:66px;padding:10px 22px}.btn-cta-top{font-size:19px}.btn-cta-sub{font-family:var(--font-body);letter-spacing:0;text-transform:none;opacity:.92;font-size:13px;font-weight:600}.icon-btn{width:42px;height:42px;color:var(--muted);border-radius:12px;place-items:center;font-size:18px;transition:color .2s,background .2s;display:inline-grid}.icon-btn:hover{color:var(--text);background:var(--ink-3)}.play-btn{min-width:44px;height:44px;color:var(--cyan);background:#22e4f00f;border:1.5px solid #22e4f073;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:700;transition:box-shadow .2s,transform .12s,background .2s;display:inline-flex}.play-btn:hover{box-shadow:0 0 22px -6px var(--cyan);background:#22e4f01f}.play-btn:active{transform:scale(.94)}.play-btn.is-playing{box-shadow:0 0 0 4px #22e4f026, 0 0 26px -4px var(--cyan)}.play-btn--slow{color:var(--jade);background:#2ee59d0f;border-color:#2ee59d73}.play-btn--slow:hover{box-shadow:0 0 22px -6px var(--jade);background:#2ee59d1f}.play-btn--mini{flex:none;min-width:36px;height:36px;padding:0}.play-btn--big{width:128px;height:128px;box-shadow:0 0 40px -10px var(--cyan), inset 0 0 30px -10px var(--cyan);border-width:2px;position:relative}.play-btn--big:before,.play-btn--big:after{content:"";border:2px solid var(--cyan);opacity:0;border-radius:50%;animation:2.4s ease-out infinite ripple;position:absolute;inset:-2px}.play-btn--big:after{animation-delay:1.2s}@keyframes ripple{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}.topbar{z-index:20;height:calc(64px + var(--sat));margin:0 calc(-1 * var(--gutter));padding:var(--sat) var(--gutter) 0;isolation:isolate;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:0}.topbar:before{content:"";z-index:-1;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);background:linear-gradient(#0a0913eb,#0a091399);width:100vw;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.logo{align-items:center;gap:10px;display:inline-flex}.logo-mark{width:34px;height:34px;font-family:var(--font-han);color:var(--cyan);border:2px solid var(--pink);box-shadow:0 0 14px -2px var(--pink), inset 0 0 10px -4px var(--pink);text-shadow:0 0 10px var(--cyan);border-radius:9px;place-items:center;font-size:19px;font-weight:900;display:grid}.logo-word{font-family:var(--font-display);letter-spacing:.06em;font-size:15px}.logo-gai{color:var(--cyan);text-shadow:0 0 10px #22e4f080}.topbar-chips{align-items:center;gap:6px;display:flex}.chip{background:var(--ink-3);border:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:4px;height:32px;padding:0 10px;font-size:14px;font-weight:700;display:inline-flex}.chip--streak{filter:grayscale();opacity:.7}.chip--streak.is-lit{filter:none;opacity:1;color:var(--amber);box-shadow:0 0 14px -6px var(--amber);border-color:#ffb62766}.chip--xp{color:var(--cyan)}.chip--level{font-family:var(--font-display);letter-spacing:.06em;color:var(--pink);font-size:11px}.hero{padding:28px 0 8px;position:relative}.hero-sign{border:2px solid var(--cyan);font-family:var(--font-han);color:#eaffff;text-shadow:0 0 6px var(--cyan), 0 0 22px var(--cyan);box-shadow:0 0 24px -6px var(--cyan), inset 0 0 18px -8px var(--cyan);border-radius:10px;flex-direction:column;gap:2px;padding:10px 8px;font-size:30px;font-weight:900;line-height:1.1;animation:9s 2s infinite flicker;display:flex;position:absolute;top:26px;right:2px;transform:rotate(2deg)}.hero-main{flex-direction:column;gap:14px;display:flex}.hero-kicker{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 14px #ffb62799;font-size:12px}.hero-title{flex-direction:column;line-height:1;display:flex}.hero-title-zh{font-family:var(--font-han);letter-spacing:.04em;color:#ffe3f0;text-shadow:0 0 4px #fff, 0 0 12px var(--pink), 0 0 32px var(--pink), 0 0 70px #ff2e888c;font-size:clamp(58px,15vw,92px);font-weight:900}.hero-title-en{font-family:var(--font-display);color:var(--cyan);letter-spacing:.06em;text-shadow:0 0 16px #22e4f08c;margin-top:6px;font-size:clamp(22px,6vw,30px)}.hero-lede{max-width:34ch;color:var(--muted);font-size:17px}.hero-lede i{font-style:normal;font-family:var(--font-han);color:var(--text)}.hero-lede b{color:var(--text)}.hero-level{max-width:460px;margin-top:4px}.hero-level-row{justify-content:space-between;gap:12px;margin-bottom:6px;font-size:14px;display:flex}.hero-level-name{font-weight:700}.hero-level-name .zh{color:var(--pink);margin-left:4px}.hero-level-xp{color:var(--muted);font-variant-numeric:tabular-nums}.bar{background:var(--ink-3);border:1px solid var(--line);border-radius:999px;height:10px;overflow:hidden}.bar-fill{border-radius:inherit;background:linear-gradient(90deg, var(--pink), var(--amber));height:100%;box-shadow:0 0 14px var(--pink)}.hero-cta-row{align-items:center;gap:16px;margin-top:8px;display:flex}.hero-cta-row .btn--cta{flex:1;max-width:420px}.ring{flex:none;position:relative}.ring svg{transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--ink-3)}.ring-value{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s}.ring-label{flex-direction:column;justify-content:center;align-items:center;line-height:1.05;display:flex;position:absolute;inset:0}.ring-n{font-variant-numeric:tabular-nums;font-size:16px;font-weight:800}.ring-l{color:var(--muted);font-size:10px}.tiles{grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 8px;display:grid}.tile{--tile:var(--cyan);text-align:left;border-radius:var(--r);background:linear-gradient(160deg, color-mix(in srgb, var(--tile) 9%, var(--ink-2)), var(--ink-2) 70%);border:1.5px solid color-mix(in srgb, var(--tile) 28%, transparent);flex-direction:column;align-items:flex-start;gap:2px;min-height:112px;padding:14px 14px 16px;transition:transform .15s,box-shadow .25s,border-color .25s;display:flex;position:relative}.tile:not(:disabled):hover{border-color:var(--tile);box-shadow:0 0 28px -10px var(--tile);transform:translateY(-2px)}.tile:disabled{opacity:.5}.tile--pink{--tile:var(--pink)}.tile--amber{--tile:var(--amber)}.tile--jade{--tile:var(--jade)}.tile-icon{margin-bottom:6px;font-size:24px}.tile-title{font-family:var(--font-display);letter-spacing:.03em;color:var(--tile);font-size:14px}.tile-sub{color:var(--muted);font-size:13px}.tile-badge{background:var(--pink);color:#fff;min-width:26px;height:26px;box-shadow:0 0 14px var(--pink);border-radius:999px;place-items:center;padding:0 7px;font-size:13px;font-weight:800;display:grid;position:absolute;top:12px;right:12px}.line{--line-color:var(--amber);margin-top:40px}.line+.line{margin-top:26px}.line-head{margin-bottom:18px}.line-badge{border:1.5px solid var(--line-color);font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--line-color);box-shadow:0 0 16px -6px var(--line-color);border-radius:999px;align-items:center;gap:6px;margin-bottom:8px;padding:4px 12px 4px 8px;font-size:11px;display:inline-flex}.line-title{font-family:var(--font-display);letter-spacing:.03em;color:var(--line-color);text-shadow:0 0 18px color-mix(in srgb, var(--line-color) 45%, transparent);font-size:22px}.line-title .zh{color:var(--text);text-shadow:none;margin-left:6px;font-size:.85em}.line-sub{color:var(--muted);margin-top:4px;font-size:15px}.stops{position:relative}.stop{grid-template-columns:56px 1fr;gap:10px;padding-bottom:14px;display:grid;position:relative}.stop-rail{justify-content:center;display:flex;position:relative}.stop-rail:before{content:"";background:linear-gradient(90deg,#0000 2px,#3b3458 2px 4px,#0000 4px 16px,#3b3458 16px 18px,#0000 18px),repeating-linear-gradient(#0000 0 9px,#2a2540 9px 12px);width:20px;position:absolute;top:0;bottom:-14px;left:50%;transform:translate(-50%)}.stop:last-child .stop-rail:before{bottom:24px}.stop--done .stop-rail:before{background:linear-gradient(90deg, transparent 2px, var(--jade) 2px, var(--jade) 4px, transparent 4px, transparent 16px, var(--jade) 16px, var(--jade) 18px, transparent 18px), repeating-linear-gradient(180deg, transparent 0 9px, #1d4a3a 9px 12px);filter:drop-shadow(0 0 4px #2ee59d80)}.stop-node{z-index:1;background:var(--ink-2);border:2.5px solid var(--faint);width:44px;height:44px;font-family:var(--font-display);color:var(--muted);border-radius:50%;place-items:center;margin-top:18px;font-size:15px;display:grid;position:relative}.stop--open .stop-node{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 16px -4px var(--cyan)}.stop--current .stop-node{border-color:var(--pink);color:#fff;background:var(--pink);box-shadow:0 0 0 6px #ff2e882e, 0 0 26px var(--pink);animation:2s ease-in-out infinite pulse}.stop--done .stop-node{border-color:var(--jade);background:var(--jade);color:#062417;box-shadow:0 0 18px -2px var(--jade)}@keyframes pulse{50%{box-shadow:0 0 0 11px #ff2e8814, 0 0 34px var(--pink)}}.stop-tram{z-index:2;filter:drop-shadow(0 0 8px #ffb627cc);font-size:26px;animation:1.6s ease-in-out infinite bob;position:absolute;top:-6px;left:50%;transform:translate(-10%)}@keyframes bob{50%{transform:translate(-10%,-4px)}}.stop-card{text-align:left;background:var(--ink-2);border:1.5px solid var(--line);border-radius:18px;flex-direction:column;gap:4px;width:100%;padding:14px 16px;transition:transform .15s,border-color .25s,box-shadow .25s;display:flex}.stop--alt .stop-card{width:calc(100% - 14px);margin-left:14px}.stop-card:hover{border-color:var(--line-2);transform:translate(3px)}.stop--current .stop-card{background:linear-gradient(140deg, #ff2e881f, var(--ink-2) 60%);box-shadow:0 0 30px -12px var(--pink);border-color:#ff2e88b3}.stop--done .stop-card{border-color:#2ee59d59}.stop--locked .stop-card{opacity:.55}.stop-card-top{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.stop-num{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-size:11px}.stop-zh{font-family:var(--font-han);color:var(--muted);font-size:15px;font-weight:600}.stop-name{font-size:21px;font-weight:800;line-height:1.15}.stop-title{color:var(--muted);font-size:15px;font-weight:600}.stop-preview{color:var(--faint);flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:17px;display:flex}.stop--current .stop-preview,.stop--open .stop-preview{color:#8f88b5}.stop-foot{justify-content:space-between;align-items:center;margin-top:8px;display:flex}.stop-pips{gap:6px;display:flex}.pip{background:var(--ink-4);border-radius:999px;place-items:center;width:30px;height:8px;font-size:0;display:grid}.pip.is-open{background:#22e4f059}.pip.is-done{background:var(--jade);box-shadow:0 0 8px #2ee59d99}.pip--star.is-done{background:var(--amber);box-shadow:0 0 8px #ffb627b3}.stop-count{color:var(--muted);font-size:13px;font-weight:600}.line-end{padding:6px 0 0 66px}.home-foot{margin:30px calc(-1 * var(--gutter)) 0;position:relative}.skyline{width:100%;display:block}.sky-win{opacity:.85}.sky-win--blink{animation:6s step-end infinite winblink}@keyframes winblink{50%{opacity:.15}}.sky-beacon{filter:drop-shadow(0 0 3px var(--pink));animation:1.8s ease-in-out infinite beacon}@keyframes beacon{50%{opacity:.2}}.home-foot-note{text-align:center;color:var(--faint);padding:0 var(--gutter) 28px;font-size:12px}.sheet-scrim{z-index:50;-webkit-backdrop-filter:blur(4px);background:#05040cb8;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{overscroll-behavior:contain;width:100%;max-width:720px;max-height:90dvh;padding:22px var(--gutter) calc(24px + var(--sab));background:linear-gradient(180deg, var(--ink-3), var(--ink-2) 160px);border:1px solid var(--line-2);border-bottom:0;border-radius:26px 26px 0 0;position:relative;overflow-y:auto;box-shadow:0 -20px 60px -20px #ff2e8859}.sheet-close{position:absolute;top:12px;right:10px}.sheet-title{font-family:var(--font-display);margin-bottom:14px;font-size:22px}.stop-sheet-head{align-items:center;gap:16px;margin-bottom:18px;padding-right:36px;display:flex}.tram-sign{color:var(--amber);text-shadow:0 0 6px #ffb627e6;background:#050407;border:3px solid #2d2a3a;border-radius:10px;flex:none;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;column-gap:10px;padding:10px 14px;display:grid;box-shadow:inset 0 0 18px #000000e6,0 0 0 1px #000}.tram-sign-n{font-family:var(--font-display);grid-row:span 2;font-size:34px;line-height:1}.tram-sign-zh{font-family:var(--font-han);font-size:20px;font-weight:900;line-height:1.1}.tram-sign-en{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.stop-sheet-title{font-size:22px;font-weight:800;line-height:1.2}.stop-sheet-blurb{color:var(--muted);margin-top:2px;font-size:15px}.locked-box{border-radius:var(--r);border:1.5px dashed var(--line-2);color:var(--muted);flex-direction:column;align-items:flex-start;gap:12px;padding:16px;display:flex}.lesson-list{flex-direction:column;gap:10px;display:flex}.lesson-row{text-align:left;border-radius:var(--r);background:var(--ink-2);border:1.5px solid var(--line-2);align-items:center;gap:14px;width:100%;padding:14px;transition:border-color .2s,box-shadow .2s,transform .12s;display:flex}.lesson-row:not(:disabled):hover{border-color:var(--pink);box-shadow:0 0 24px -10px var(--pink)}.lesson-row:disabled{opacity:.45}.lesson-row.is-done{border-color:#2ee59d66}.lesson-row-icon{width:42px;height:42px;color:var(--cyan);font-family:var(--font-display);background:#22e4f01a;border-radius:12px;flex:none;place-items:center;font-size:18px;display:grid}.lesson-row-icon.is-star{color:var(--amber);background:#ffb6271f}.lesson-row-body{flex-direction:column;flex:1;min-width:0;display:flex}.lesson-row-title{font-size:17px;font-weight:800}.lesson-row-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.lesson-row-meta{flex:none;font-size:14px}.lesson-row-go{font-family:var(--font-display);color:var(--pink);font-size:12px}.mini-stars{color:var(--amber);letter-spacing:2px;text-shadow:0 0 8px #ffb62799}.stop-sheet-words-head{margin:24px 0 8px}.word-list{flex-direction:column;display:flex}.word-row{text-align:left;border-bottom:1px solid var(--line);grid-template-columns:auto 1fr;grid-template-areas:"ruby en""ruby hook";align-items:center;column-gap:14px;width:100%;padding:10px 4px;display:grid}.word-row .ruby{grid-area:ruby}.word-row-en{grid-area:en;font-weight:700}.word-row-hook{color:var(--muted);grid-area:hook;font-size:14px}.word-row.is-unknown .word-row-hook{color:var(--faint)}.ruby{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:0 .12em;display:inline-flex}.rb{color:var(--tc,var(--text));flex-direction:column;align-items:center;display:inline-flex}.rb-h{font-family:var(--font-han);font-weight:900;line-height:1.1}.rb-j{font-family:var(--font-body);letter-spacing:.01em;font-weight:700;line-height:1.3}.rb-punct{color:var(--faint);align-self:flex-start}.ruby--xl{gap:0 .18em}.ruby--xl .rb-h{text-shadow:0 0 6px color-mix(in srgb, var(--tc) 60%, transparent), 0 0 30px color-mix(in srgb, var(--tc) 45%, transparent);font-size:clamp(64px,19vw,104px)}.ruby--xl .rb-j{margin-top:4px;font-size:21px}.ruby--lg .rb-h{text-shadow:0 0 22px color-mix(in srgb, var(--tc) 40%, transparent);font-size:clamp(46px,13vw,66px)}.ruby--lg .rb-j{font-size:17px}.ruby--md .rb-h{font-size:36px}.ruby--md .rb-j{font-size:14px}.ruby--sm{justify-content:flex-start;gap:2px 5px}.ruby--sm .rb-h{font-size:24px}.ruby--sm .rb-j{font-size:12px}.ruby--sm .rb-punct{display:none}.ruby--romanized{gap:0 .4em}.ruby--romanized.ruby--xl .rb-j{font-size:44px}.ruby--romanized.ruby--lg .rb-j{font-size:32px}.ruby--romanized.ruby--md .rb-j{font-size:22px}.ruby--romanized.ruby--sm .rb-j{font-size:16px}.tone-glyph{margin-top:4px;overflow:visible}.tone-glyph-base{stroke:var(--line-2);stroke-width:1px}.tone-glyph-line{stroke:var(--tc);stroke-width:3px;stroke-linecap:round;fill:none}.tone-glyph-dot{fill:var(--tc)}.jp-inline>span{color:var(--tc);margin-right:.3em;font-weight:700}.session{flex-direction:column;min-height:100dvh;display:flex}.session-head{z-index:20;height:calc(64px + var(--sat));margin:0 calc(-1 * var(--gutter));padding:var(--sat) var(--gutter) 0;background:linear-gradient(#0a0913f2,#0a091300);align-items:center;gap:12px;display:flex;position:sticky;top:0}.progress-track{background:var(--ink-3);border:1px solid var(--line);border-radius:999px;flex:1;height:14px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--pink), var(--amber));height:100%;box-shadow:0 0 16px var(--pink);position:relative}.progress-fill:after{content:"";background:#fff6;border-radius:999px;height:3px;position:absolute;top:3px;left:8px;right:8px}.combo{font-family:var(--font-display);color:var(--amber);text-shadow:0 0 12px #ffb627b3;align-items:center;gap:2px;font-size:18px;display:inline-flex}.combo--hot{color:#ff7a3d;text-shadow:0 0 14px #ff5a1f}.exit-pop{z-index:40;top:calc(68px + var(--sat));border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);width:min(420px,100% - 32px);margin:0 auto;padding:16px;position:fixed;left:0;right:0;box-shadow:0 20px 50px -10px #000000b3}.exit-pop p{color:var(--muted);margin-bottom:12px}.exit-pop-actions{justify-content:flex-end;gap:10px;display:flex}.exit-pop .btn{min-height:44px;font-size:13px}.session-body{padding:8px 0 calc(var(--bar-h) + 40px);flex:1}.session-step{width:100%}.bottom-bar{z-index:30;width:100%;max-width:760px;padding:18px var(--gutter) calc(16px + var(--sab));background:linear-gradient(#0a091300,#0a0913eb 35%);position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-bar--static{padding:24px 0 calc(28px + var(--sab));background:0 0;gap:10px;display:flex;position:static;transform:none}.bottom-bar--static .btn{flex:1}.intro{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:560px;margin:0 auto;display:flex}.intro-top{margin-top:6px}.intro-block{flex-direction:column;align-items:center;width:100%;display:flex}.intro-word{margin-top:6px}.intro-audio{justify-content:center;gap:10px;display:flex}.intro-english{font-size:clamp(26px,7vw,34px);font-weight:800;line-height:1.15}.intro-literal{color:var(--muted);margin-top:4px;font-style:italic}.intro-note{max-width:44ch;color:var(--muted);background:var(--ink-2);border:1px solid var(--line);text-align:left;border-radius:12px;padding:10px 14px;font-size:15px}.sounds-like{border:2px solid var(--pink);width:100%;max-width:520px;box-shadow:0 0 0 1px #ff2e8840, 0 0 34px -8px var(--pink), inset 0 0 34px -14px var(--pink);text-align:left;background:radial-gradient(120% 140% at 0 0,#ff2e8829,#0000 55%),#110f1ed9;border-radius:20px;padding:18px 20px 20px;position:relative}.sounds-like-label{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--pink);text-shadow:0 0 10px #ff2e88b3;justify-content:space-between;align-items:flex-start;font-size:11px;display:flex}.sounds-like-emoji{filter:drop-shadow(0 6px 14px #0009);font-size:50px;line-height:1;animation:3.5s ease-in-out infinite sticker;position:absolute;top:-26px;right:14px;transform:rotate(8deg)}@keyframes sticker{50%{transform:rotate(-4deg)translateY(-3px)}}.sounds-like-spell{font-family:var(--font-display);color:#dcfdff;text-shadow:0 0 6px var(--cyan), 0 0 22px #22e4f0b3;word-break:break-word;margin-top:8px;font-size:clamp(24px,7.5vw,34px);line-height:1.1}.sounds-like-hook{color:var(--amber);margin-top:8px;font-size:clamp(20px,5.5vw,25px);font-weight:800;line-height:1.2}.sounds-like-story{color:#d9d4ef;margin-top:10px;font-size:16px}.sounds-like--compact{padding:14px 16px}.example{border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);text-align:left;width:100%;max-width:520px;padding:14px 16px}.example-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.example .ruby{justify-content:flex-start}.example-en{color:var(--muted);margin-top:6px}.choice{flex-direction:column;gap:18px;width:100%;max-width:600px;margin:0 auto;display:flex}.choice-prompt{text-align:center;margin-top:4px}.choice-prompt .eyebrow{color:var(--cyan);text-shadow:0 0 12px #22e4f080;font-size:13px}.choice-stage{justify-content:center;align-items:center;min-height:150px;display:flex}.choice--compact .choice-stage{min-height:110px}.stage-canto{flex-direction:column;align-items:center;gap:12px;display:flex}.stage-listen{align-items:center;gap:18px;padding:18px 0;display:flex}.stage-english{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.stage-english-text{font-size:clamp(30px,8vw,42px);font-weight:800;line-height:1.1}.stage-hint{color:var(--muted);font-size:14px}.options{grid-template-columns:1fr;gap:10px;display:grid}.options--say{grid-template-columns:1fr 1fr}.option{text-align:left;border-radius:var(--r);background:var(--ink-2);border:2px solid var(--line-2);min-height:62px;box-shadow:0 3px 0 var(--ink-4);align-items:center;gap:12px;padding:12px 16px;transition:border-color .18s,box-shadow .18s,background .18s,opacity .2s,transform .12s;display:flex;position:relative}.options--say .option{justify-content:center;min-height:88px}.option:not(:disabled):hover{border-color:var(--cyan);box-shadow:0 3px 0 var(--ink-4), 0 0 24px -10px var(--cyan)}.option:not(:disabled):active{box-shadow:0 1px 0 var(--ink-4);transform:translateY(2px)}.option.is-correct{border-color:var(--jade);box-shadow:0 0 26px -8px var(--jade);background:#2ee59d1f}.option.is-wrong{border-color:var(--pink);background:#ff2e881f}.option.is-dim{opacity:.4}.option-key{border:1.5px solid var(--line-2);width:26px;height:26px;color:var(--faint);border-radius:8px;flex:none;place-items:center;font-size:13px;font-weight:700;display:grid}.options--say .option-key{width:22px;height:22px;font-size:11px;position:absolute;top:8px;left:8px}.opt-en{font-size:17px;font-weight:700}.opt-hook{color:var(--amber);font-size:18px;font-weight:800}.option.is-dim .opt-hook{color:var(--muted)}.feedback{z-index:35;padding:18px var(--gutter) calc(18px + var(--sab));border-top:2px solid;position:fixed;bottom:0;left:0;right:0}.feedback--good{border-color:var(--jade);background:linear-gradient(#0c2a20,#08170f);box-shadow:0 -10px 50px -12px #2ee59d80}.feedback--bad{border-color:var(--pink);background:linear-gradient(#2b0c1b,#170710);box-shadow:0 -10px 50px -12px #ff2e8880}.feedback-inner{flex-direction:column;gap:10px;max-width:728px;margin:0 auto;display:flex}.feedback-title{font-family:var(--font-display);letter-spacing:.02em;font-size:19px}.feedback--good .feedback-title{color:var(--jade);text-shadow:0 0 14px #2ee59d99}.feedback--bad .feedback-title{color:#ff7eb3}.feedback-zh{font-family:var(--font-han);margin-right:4px;font-weight:900}.feedback-answer{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.feedback-eq{color:var(--faint)}.feedback-en{font-size:18px;font-weight:800}.feedback-hook{color:#ddd8f2;font-size:15px}.feedback-hook b{color:var(--amber)}.feedback-story{color:var(--muted);margin-top:4px}.feedback .btn{margin-top:4px}.match{flex-direction:column;gap:18px;max-width:600px;margin:0 auto;display:flex}.match-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.match-col{flex-direction:column;gap:10px;display:flex}.match-tile{text-align:center;border-radius:var(--r);background:var(--ink-2);border:2px solid var(--line-2);min-height:74px;box-shadow:0 3px 0 var(--ink-4);justify-content:center;align-items:center;padding:10px;transition:border-color .18s,box-shadow .18s,opacity .35s,transform .25s,background .2s;display:flex}.match-tile .ruby{justify-content:center}.match-tile:hover{border-color:#22e4f099}.match-tile.is-selected{border-color:var(--cyan);box-shadow:0 0 24px -6px var(--cyan);background:#22e4f01a}.match-tile.is-bad{border-color:var(--pink);background:#ff2e881f}.match-tile.is-matched{border-color:var(--jade);opacity:.32;pointer-events:none;background:#2ee59d14;transform:scale(.97)}.match-en{font-size:15px;font-weight:700;line-height:1.25}.results{text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:560px;margin:0 auto;padding-top:36px;display:flex}.results-zh{font-family:var(--font-han);color:#ffe3f0;text-shadow:0 0 6px #fff, 0 0 18px var(--pink), 0 0 48px var(--pink);font-size:clamp(56px,16vw,84px);font-weight:900;line-height:1}.results-title{font-family:var(--font-display);color:var(--cyan);text-shadow:0 0 16px #22e4f099;margin-top:10px;font-size:clamp(22px,6vw,30px)}.results-sub{color:var(--muted);margin-top:4px}.stars{gap:12px;display:flex}.star{color:var(--ink-4);font-size:54px;line-height:1}.star.is-on{color:var(--amber);text-shadow:0 0 10px var(--amber), 0 0 30px #ffb62799}.results-stats{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.stat{border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);padding:14px 8px}.stat-n{font-family:var(--font-display);font-size:26px;line-height:1.1}.stat-n--amber{color:var(--amber)}.stat-n--jade{color:var(--jade)}.stat-n--pink{color:var(--pink)}.stat-l{color:var(--muted);margin-top:2px;font-size:12px}.unlock-banner{text-align:left;border-radius:var(--r);border:2px solid var(--amber);width:100%;box-shadow:0 0 30px -10px var(--amber);background:#ffb62714;align-items:center;gap:16px;padding:14px 18px;display:flex}.unlock-tram{font-size:40px;animation:1.4s cubic-bezier(.2,.8,.2,1) .9s both rollin}@keyframes rollin{0%{opacity:0;transform:translate(-120px)}}.unlock-name{font-size:19px;font-weight:800}.unlock-name .zh{color:var(--amber);margin-left:4px}.unlock-title{color:var(--muted);font-size:14px}.results-words{text-align:left;width:100%}.results-words ul{flex-direction:column;gap:8px;margin-top:8px;display:flex}.results-word{text-align:left;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;grid-template-columns:auto 1fr;grid-template-areas:"ruby en""ruby hook";align-items:center;column-gap:14px;width:100%;padding:10px 14px;display:grid}.results-word .ruby{grid-area:ruby}.results-word-en{grid-area:en;font-weight:700}.results-word-hook{color:var(--amber);grid-area:hook;font-size:14px;font-weight:600}.levelup{z-index:90;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05040cd9;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.levelup-card{border:2px solid var(--amber);background:var(--ink-2);box-shadow:0 0 60px -10px var(--amber), inset 0 0 40px -20px var(--amber);text-align:center;border-radius:26px;flex-direction:column;align-items:center;gap:6px;padding:30px 40px 26px;display:flex}.levelup .eyebrow{color:var(--amber);font-size:14px}.levelup-num{font-family:var(--font-shade);color:var(--amber);font-size:110px;line-height:1}.levelup-zh{font-family:var(--font-han);color:var(--pink);text-shadow:0 0 16px var(--pink);font-size:34px;font-weight:900}.levelup-name{margin-bottom:14px;font-size:20px;font-weight:800}.rush{min-height:100dvh;transition:box-shadow .2s}.rush--good{box-shadow:inset 0 0 120px -40px var(--jade)}.rush--bad{box-shadow:inset 0 0 140px -30px var(--pink)}.rush-intro,.rush-over{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:480px;margin:0 auto;padding:40px 0 30px;display:flex}.rush-logo{font-family:var(--font-han);color:#fff4d6;text-shadow:0 0 6px #fff, 0 0 18px var(--amber), 0 0 50px var(--amber);font-size:84px;font-weight:900;line-height:1}.rush-title{font-family:var(--font-display);color:var(--pink);text-shadow:0 0 18px #ff2e8899;font-size:30px}.rush-rules{color:var(--muted);flex-direction:column;gap:6px;font-size:16px;display:flex}.rush-rules b{color:var(--text)}.rush-pool{color:var(--faint);font-size:14px}.rush-best{color:var(--amber);font-weight:700}.rush-intro .btn--cta{align-items:center;min-width:200px}.rush-count{min-height:60vh;font-family:var(--font-shade);color:var(--pink);place-items:center;font-size:150px;display:grid}.rush-play{flex-direction:column;gap:14px;padding:12px 0 40px;display:flex}.rush-hud{justify-content:space-between;align-items:center;gap:12px;display:flex}.rush-score{align-items:baseline;gap:6px;display:flex}.rush-score-n{font-family:var(--font-display);color:var(--text);font-variant-numeric:tabular-nums;font-size:32px}.rush-score-l{color:var(--muted);font-size:13px}.rush-mult{font-family:var(--font-display);border:2px solid var(--line-2);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:20px}.rush-mult--2{color:var(--amber);border-color:var(--amber);box-shadow:0 0 16px -4px var(--amber)}.rush-mult--3{color:#ff7a3d;border-color:#ff7a3d;animation:.8s ease-in-out infinite pulse-mult;box-shadow:0 0 22px -2px #ff5a1f}@keyframes pulse-mult{50%{transform:scale(1.08)}}.rush-time{font-family:var(--font-display);color:var(--cyan);font-variant-numeric:tabular-nums;font-size:22px}.rush-timer{background:var(--ink-3);border-radius:999px;height:10px;overflow:hidden}.rush-timer-fill{background:linear-gradient(90deg, var(--cyan), var(--jade));height:100%;box-shadow:0 0 14px var(--cyan)}.rush-timer-fill.is-low{background:linear-gradient(90deg, var(--pink), var(--amber));box-shadow:0 0 14px var(--pink)}.rush-final{font-family:var(--font-shade);color:var(--amber);font-size:120px;line-height:1}.rush-newbest{font-family:var(--font-display);color:var(--pink);text-shadow:0 0 16px var(--pink);font-size:18px}.page{padding-bottom:60px}.page-head{flex-direction:column;align-items:flex-start;gap:10px;padding:26px 0 18px;display:flex}.page-title{font-family:var(--font-display);color:var(--text);font-size:clamp(28px,8vw,38px);line-height:1.1}.page-title .zh{color:var(--pink);text-shadow:0 0 18px #ff2e8899;margin-left:6px;font-weight:900}.page-lede{max-width:60ch;color:var(--muted)}.page-lede b,.page-lede i{color:var(--text)}.section-title{font-family:var(--font-display);color:var(--amber);margin-bottom:6px;font-size:20px}.empty{color:var(--muted);text-align:center;padding:30px 0}.empty-state{text-align:center;flex-direction:column;align-items:center;gap:14px;padding:60px 0;display:flex}.empty-emoji{font-size:64px}.pb-controls{top:calc(64px + var(--sat));z-index:10;margin:0 calc(-1 * var(--gutter));padding:8px var(--gutter) 12px;background:linear-gradient(180deg, var(--ink) 75%, #0a091300);flex-direction:column;gap:10px;display:flex;position:sticky}.search{border:1.5px solid var(--line-2);background:var(--ink-2);width:100%;height:50px;color:var(--text);font:inherit;border-radius:14px;outline:none;padding:0 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}.search::placeholder{color:var(--faint)}.search:focus{border-color:var(--cyan);box-shadow:0 0 22px -8px var(--cyan)}.chips-scroll{scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);gap:8px;display:flex;overflow-x:auto}.chips-scroll::-webkit-scrollbar{display:none}.filter-chip{border:1.5px solid var(--line-2);height:36px;color:var(--muted);white-space:nowrap;border-radius:999px;flex:none;padding:0 14px;font-size:14px;font-weight:600}.filter-chip.is-on{color:var(--ink);background:var(--amber);border-color:var(--amber);box-shadow:0 0 16px -4px var(--amber)}.pb-group{margin-top:18px}.pb-group-title{align-items:baseline;gap:10px;padding:6px 0;font-size:17px;font-weight:800;display:flex}.pb-row{border-bottom:1px solid var(--line)}.pb-row-main{cursor:pointer;align-items:center;gap:14px;padding:12px 2px;display:flex}.pb-row-main>.ruby{flex:none;min-width:64px}.pb-row-text{flex-direction:column;flex:1;min-width:0;display:flex}.pb-row-en{font-weight:700}.pb-row-hook{color:var(--amber);font-size:14px}.badge{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;flex:none;padding:3px 8px;font-size:9px}.badge--learned{color:var(--cyan);border:1px solid #22e4f080}.badge--mastered{color:var(--ink);background:var(--jade)}.pb-row-more{overflow:hidden}.pb-row-more-inner{flex-direction:column;align-items:flex-start;gap:14px;padding:4px 0 22px;display:flex}.pb-row-more .sounds-like{margin-top:18px}.pb-row-more .intro-audio{justify-content:flex-start}.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}@media (width>=640px){.tone-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}@media (width<=639px){.tone-card{padding:12px}.tone-card-name{font-size:15px}.tone-card-char{font-size:28px}.tone-card-tip{font-size:13px}.tone-card-mean{font-size:14px}}.tone-card{text-align:left;background:var(--ink-2);border:1.5px solid color-mix(in srgb, var(--tc) 35%, transparent);border-radius:18px;flex-direction:column;gap:8px;padding:14px;transition:border-color .2s,box-shadow .25s,transform .15s;display:flex}.tone-card:hover,.tone-card.is-active{border-color:var(--tc);box-shadow:0 0 30px -10px var(--tc);transform:translateY(-2px)}.tone-card-head{align-items:center;gap:10px;display:flex}.tone-card-n{background:var(--tc);width:32px;height:32px;color:var(--ink);font-family:var(--font-display);border-radius:10px;place-items:center;font-size:16px;display:grid}.tone-card-name{flex:1;font-size:17px;font-weight:800}.tone-card-play{color:var(--tc)}.tone-chart{width:100%;height:auto}.tone-chart-grid{stroke:var(--line);stroke-width:1px}.tone-chart-n{fill:var(--faint);font-size:10px;font-family:var(--font-body)}.tone-chart-line{stroke:var(--tc);stroke-width:6px;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 6px var(--tc))}.tone-chart.is-active .tone-chart-line{stroke-dasharray:1;animation:.7s ease-out draw}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.tone-chart-dot{fill:var(--tc)}.tone-card-demo{align-items:baseline;gap:10px;display:flex}.tone-card-char{font-family:var(--font-han);color:var(--tc);font-size:34px;font-weight:900;line-height:1}.tone-card-jp{color:var(--tc);font-weight:800}.tone-card-mean{color:var(--muted)}.tone-card-tip{color:var(--muted);font-size:14px}.jp-key{margin-top:36px}.jp-table{border-radius:var(--r);border:1px solid var(--line);margin-top:12px;overflow:hidden}.jp-row{border-bottom:1px solid var(--line);background:var(--ink-2);grid-template-columns:84px 1fr auto;align-items:center;gap:12px;padding:11px 14px;display:grid}.jp-row:nth-child(odd){background:var(--ink-3)}.jp-row:last-child{border-bottom:0}.jp-k{font-family:var(--font-display);color:var(--cyan);font-size:14px}.jp-how{font-size:15px}.jp-ex{color:var(--amber);white-space:nowrap;font-size:14px}.settings{flex-direction:column;display:flex}.toggle-row{border-bottom:1px solid var(--line);cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;display:flex}.toggle-label{font-weight:700;display:block}.toggle-sub{color:var(--muted);font-size:14px;display:block}.toggle{appearance:none;background:var(--ink-4);border:1px solid var(--line-2);cursor:pointer;border-radius:999px;flex:none;width:52px;height:30px;transition:background .2s,box-shadow .2s;position:relative}.toggle:after{content:"";background:var(--muted);border-radius:50%;width:22px;height:22px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle:checked{background:var(--pink);box-shadow:0 0 16px -4px var(--pink)}.toggle:checked:after{background:#fff;transform:translate(22px)}.seg{border:1px solid var(--line-2);border-radius:12px;flex:none;display:inline-flex;overflow:hidden}.seg-btn{color:var(--muted);padding:8px 12px;font-size:14px;font-weight:700}.seg-btn.is-on{background:var(--amber);color:var(--ink)}.settings-section{flex-direction:column;gap:10px;padding-top:18px;display:flex}.settings-note,.settings-msg{color:var(--muted);font-size:14px}.settings-msg{color:var(--jade)}.settings-actions{flex-wrap:wrap;gap:10px;display:flex}.settings-actions .btn{min-height:44px;font-size:13px}a.btn{text-decoration:none}.link-btn{color:var(--cyan);text-underline-offset:3px;font-weight:700;-webkit-text-decoration:underline #22e4f066;text-decoration:underline #22e4f066}.link-btn:hover{-webkit-text-decoration-color:var(--cyan);text-decoration-color:var(--cyan)}.inline-icon{vertical-align:-2px;color:var(--cyan);display:inline-block}.hero-login{color:var(--muted);margin-top:14px;font-size:14px}.avatar{width:34px;height:34px;font-family:var(--font-display);color:var(--ink);background:linear-gradient(140deg, var(--cyan), var(--jade));box-shadow:0 0 16px -4px var(--cyan);border-radius:50%;place-items:center;font-size:15px;display:inline-grid}.avatar--lg{flex:none;width:48px;height:48px;font-size:21px}.avatar-btn{border-radius:50%;place-items:center;width:42px;height:42px;display:inline-grid;position:relative}.avatar-btn:after{content:"";border:2px solid #0000;border-radius:50%;transition:border-color .3s;position:absolute;inset:2px}.avatar-btn.sync--syncing:after{border-color:#22e4f059;border-top-color:var(--cyan);animation:.9s linear infinite spin}.avatar-btn.sync--offline:after,.avatar-btn.sync--error:after{border-color:var(--amber)}@keyframes spin{to{transform:rotate(360deg)}}.icon-btn--badge{position:relative}.badge-dot{background:var(--pink);width:9px;height:9px;box-shadow:0 0 0 2px var(--ink), 0 0 10px var(--pink);border-radius:50%;position:absolute;top:8px;right:8px}.nudge{border-radius:var(--r);background:linear-gradient(100deg, #ff2e8829, #ff2e8805 60%), var(--ink-2);box-shadow:0 0 30px -14px var(--pink);border:1.5px solid #ff2e8873;align-items:center;gap:12px;margin-top:18px;padding:12px 8px 12px 14px;display:flex;overflow:hidden}.nudge-icon{flex:none;font-size:24px}.nudge-body{min-width:0;color:var(--muted);flex-direction:column;flex:1;font-size:13px;line-height:1.35;display:flex}.nudge-body b{color:var(--text);font-size:15px}.nudge-actions{flex:none;align-items:center;gap:2px;display:flex}.nudge-btn{min-height:40px;padding:0 16px;font-size:13px}.account-card{border-radius:var(--r);border:1px solid var(--line-2);background:var(--ink-2);flex-direction:column;gap:12px;margin-bottom:6px;padding:16px;display:flex}.account-card--guest{background:linear-gradient(120deg, #ff2e8824, #22e4f00d), var(--ink-2);border-color:#ff2e8873}.account-card-body{flex-direction:column;min-width:0;display:flex}.account-card-body .toggle-sub{overflow-wrap:anywhere}.account-who{align-items:center;gap:12px;display:flex}.account-card .settings-actions .btn{min-height:44px;font-size:13px}.sync-line{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:flex}.sync-dot{background:var(--faint);border-radius:50%;flex:none;width:8px;height:8px}.sync-line--saved .sync-dot{background:var(--jade);box-shadow:0 0 8px var(--jade)}.sync-line--syncing .sync-dot{background:var(--cyan);animation:1.4s infinite flicker}.sync-line--offline .sync-dot,.sync-line--error .sync-dot{background:var(--amber)}.legal-links{flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:26px;font-size:14px;display:flex}.toggle-row--card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}.delete-box{flex-direction:column;gap:10px;display:flex}.auth-head{align-items:flex-start;gap:14px;margin-bottom:18px;padding-right:40px;display:flex}.auth-head .sheet-title{margin-bottom:4px}.auth-badge{border:2px solid var(--pink);width:54px;height:54px;box-shadow:0 0 22px -6px var(--pink), inset 0 0 14px -6px var(--pink);border-radius:16px;flex:none;place-items:center;font-size:26px;display:grid}.auth-lede{color:var(--muted);font-size:15px}.auth-tabs{width:100%;margin-bottom:18px;display:flex}.auth-tabs .seg-btn{flex:1;padding:11px 12px}.auth-form{flex-direction:column;gap:14px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field-label{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:11px}.field-hint{color:var(--faint);font-size:13px}.field-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.field-link{font-size:13px}.input--code{text-align:center;height:60px;font-family:var(--font-display);letter-spacing:.35em;color:var(--amber);padding-left:calc(16px + .35em);font-size:28px}.input--code::placeholder{color:var(--ink-4);letter-spacing:.35em}.link-btn:disabled{color:var(--faint);cursor:default;text-decoration:none}.auth-foot--links{flex-wrap:wrap;justify-content:center;gap:6px 10px;font-size:14px;display:flex}.input{border:1.5px solid var(--line-2);background:var(--ink);width:100%;height:52px;color:var(--text);font:inherit;border-radius:14px;outline:none;padding:0 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}.input::placeholder{color:var(--faint)}.input:focus{border-color:var(--cyan);box-shadow:0 0 22px -8px var(--cyan)}.input-wrap{display:block;position:relative}.input-wrap .input{padding-right:76px}.input-peek{color:var(--cyan);border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.auth-error{color:#ffd9da;background:#ff5a5f1f;border:1px solid #ff5a5f73;border-radius:12px;padding:10px 14px;font-size:14px}.auth-form .btn--primary{margin-top:4px}.auth-foot{text-align:center;color:var(--faint);margin-top:14px;font-size:13px}.auth-done{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:18px 0 6px;display:flex}.auth-done .sheet-title{margin-bottom:0}.auth-done .auth-lede{max-width:400px;margin-bottom:10px}.auth-done-zh{font-family:var(--font-han);color:var(--amber);text-shadow:0 0 18px #ffb627cc,0 0 40px #ffb62766;font-size:54px;font-weight:900;line-height:1.1}.plus-chip{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:linear-gradient(120deg, var(--amber), #ffd77a);box-shadow:0 0 16px -4px var(--amber);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;display:inline-flex}.page-head .plus-chip{margin-bottom:10px}.maker-promo{text-align:left;border-radius:var(--r);background:radial-gradient(120% 140% at 0% 0%, #ffb62729, transparent 60%), var(--ink-2);width:100%;box-shadow:0 0 34px -18px var(--amber);border:1.5px solid #ffb62780;align-items:center;gap:14px;margin-top:14px;padding:16px;transition:transform .15s,box-shadow .25s;display:flex}.maker-promo:hover{box-shadow:0 0 40px -14px var(--amber);transform:translateY(-2px)}.maker-promo-icon{filter:drop-shadow(0 0 10px #ffb627b3);flex:none;font-size:30px}.maker-promo-body{min-width:0;color:var(--muted);flex-direction:column;flex:1;font-size:14px;line-height:1.35;display:flex}.maker-promo-body b{font-family:var(--font-display);letter-spacing:.03em;color:var(--amber);font-size:16px;font-weight:400}.maker,.maker-gate{margin-bottom:18px}.maker-row{gap:10px;display:flex}.maker-input{flex:1;min-width:0;height:56px;font-size:17px}.maker-go{flex:none;min-height:56px;padding:0 20px}.maker-ideas{margin-top:10px}.maker-quota{color:var(--muted);margin-top:8px;font-size:14px}.maker-error{margin-bottom:18px}.making{border-radius:var(--r);border:1px dashed var(--line-2);text-align:center;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px;padding:34px 16px;display:flex}.making-sign{font-family:var(--font-han);color:var(--cyan);text-shadow:0 0 14px var(--cyan), 0 0 36px #22e4f080;font-size:46px;font-weight:900}.making-step{color:var(--text);font-weight:700}.making-bar{background:var(--ink-3);border-radius:999px;width:min(240px,70%);height:6px;overflow:hidden}.making-bar span{border-radius:inherit;background:linear-gradient(90deg, var(--pink), var(--amber));width:40%;height:100%;animation:1.3s ease-in-out infinite making-slide;display:block}@keyframes making-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.made-card{background:linear-gradient(180deg, var(--ink-3), var(--ink-2) 220px);box-shadow:0 20px 60px -30px var(--pink);border:1.5px solid #ff2e8880;border-radius:22px;flex-direction:column;gap:14px;margin-bottom:22px;padding:22px 18px;display:flex}.made-word{justify-content:center;padding-top:6px;display:flex}.made-card .intro-audio,.made-card .intro-meaning{text-align:center;justify-content:center}.made-notice{color:var(--text);background:#2ee59d1a;border:1px solid #2ee59d66;border-radius:12px;padding:10px 14px;font-size:14px}.made-actions{justify-content:center}.unconfirmed{color:#ffe2a8;background:#ffb62714;border:1px solid #ffb62759;border-radius:12px;padding:10px 14px;font-size:13px}.my-words-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.my-words-head .pb-group-title{margin:0}.my-words-count{font-family:var(--font-body);color:var(--muted);margin-left:6px;font-size:14px}.my-words-practise{min-height:40px;font-size:12px}.word-actions{flex-direction:column;align-items:flex-start;gap:8px;padding-top:6px;display:flex}.word-actions-meta{color:var(--faint);font-size:13px}.word-actions .settings-actions .btn{min-height:40px;font-size:12px}.my-words-empty{margin-top:8px}@media (width>=640px){:root{--gutter:24px}.tiles{grid-template-columns:repeat(4,1fr)}.hero-sign{padding:14px 12px;font-size:44px;top:34px;right:8px}.options--meaning,.options--listen,.options--hook{grid-template-columns:1fr 1fr}.stop{grid-template-columns:72px 1fr}.stop--alt .stop-card{width:calc(100% - 40px);margin-left:40px}.line-end{padding-left:82px}.ruby--sm .rb-h{font-size:26px}}@media (width<=479px){.logo-word{display:none}}@media (width<=359px){.chip--level{display:none}}@media (width<=380px){.options--say .option{min-height:78px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}