:root{--brand: #bb2649;--brand-press: #9e1f3d;--purple: #9b56da;--blue: #3882f6;--blue-deep: #2350c4;--coral: #ff6b4a;--lime: #d7f23f;--green: #17804f;--butter: #ffc93c;--cream: #f7e2aa;--lilac: #cdb0f3;--brand-tint: #f9e3e8;--purple-tint: #efe5fa;--blue-tint: #e2ecfe;--coral-tint: #ffe7e0;--lime-tint: #f3fbcf;--green-tint: #dcf0e3;--lilac-tint: #ece0fb;--cream-tint: #fbf1d6;--butter-tint: #fff3cc;--bg: #fafaf8;--surface: #ffffff;--surface-2: #f0efec;--muted: #e2e0dc;--ink: #1f1b1a;--ink-2: #6b6763;--focus: #1f1b1a;--shadow: 0 1px 2px rgba(31, 27, 26, .05), 0 8px 24px rgba(31, 27, 26, .06);--shadow-lg: 0 2px 4px rgba(31, 27, 26, .06), 0 18px 40px rgba(31, 27, 26, .1);--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--r-xl: 18px;--r-lg: 14px;--r-md: 12px;--r-sm: 10px;--gutter: 20px;--nav-h: 76px;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px);--ease-out: cubic-bezier(.2, .8, .2, 1);--spring: cubic-bezier(.3, 1.5, .5, 1);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}img,svg{display:block}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}html,body,#root{height:100%;overflow:hidden}.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}.scroller{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.page{min-height:100%;display:flex;flex-direction:column}.page>.screen{flex:1}.screen.fill{display:flex;flex-direction:column}.screen{padding:calc(var(--safe-t) + 12px) var(--gutter) calc(var(--nav-h) + var(--safe-b) + 36px)}.screen.no-nav{padding-bottom:calc(var(--safe-b) + 32px)}.stack{display:flex;flex-direction:column;gap:var(--gap, 16px)}.row{display:flex;align-items:center;gap:12px}.spacer{flex:1}.bleed{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}.h1{font-size:36px}.h2{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin:0}.h3{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-.01em;margin:0}.eyebrow{font-size:13px;font-weight:600;color:var(--ink-2);margin:0}.body-s{font-size:14px;color:var(--ink-2);margin:0}.body{margin:0}.num{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.section-head{display:flex;align-items:baseline;gap:12px;margin:28px 0 12px}.section-head .h2{flex:1}.link-more{font-size:14px;font-weight:600;text-decoration:none;color:var(--brand)}.topbar{display:flex;align-items:center;gap:8px;min-height:52px;margin-bottom:8px}.topbar .title{font-weight:600;font-size:15px;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{width:44px;height:44px;border-radius:999px;border:0;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink)}.icon-btn.flat{background:transparent;box-shadow:none}.icon-btn:active{transform:scale(.96)}.bottom-nav{position:absolute;left:14px;right:14px;bottom:calc(10px + var(--safe-b));padding:6px;background:var(--surface);border-radius:999px;box-shadow:var(--shadow-lg);display:flex;gap:4px;z-index:20}.bottom-nav a{flex:1;transition:flex-grow .32s var(--ease-out),background-color .26s,color .26s,transform .16s var(--spring);min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-2);border-radius:999px}.bottom-nav a[aria-current=page]{color:#fff;background:var(--brand);flex:1.35}.bottom-nav a:not([aria-current=page]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:55px;padding:0 24px;border-radius:8px;border:0;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .12s var(--ease-out),background .12s;white-space:nowrap}.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--brand);color:#fff}.btn-primary:active{background:var(--brand-press)}.btn-secondary{background:var(--surface-2);color:var(--ink)}.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--muted)}.btn-dark{background:var(--ink);color:#fff}.btn-block{width:100%}.btn .btn-dot{width:34px;height:34px;border-radius:999px;background:#fff;color:var(--brand);display:grid;place-items:center;margin-right:-14px;flex:none}.btn-secondary .btn-dot{background:var(--surface);color:var(--ink)}.btn-row{display:flex;gap:10px}.btn-row>*{flex:1;min-width:0}.btn-small{min-height:44px;padding:0 16px;font-size:14px}.card{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}.card-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-height:72px}.card-link:active{transform:scale(.99)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.tile{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none}.connected{position:relative;display:flex;flex-direction:column;gap:6px}.connected .joint{position:absolute;left:50%;width:36px;height:18px;transform:translate(-50%,-12px);z-index:2}.progress{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}.progress>span{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .4s var(--ease-out)}.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}.status svg{flex:none}.chip-stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}.control{display:block}.control+.control{margin-top:18px}.control-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;font-weight:600;margin-bottom:6px}.control-head output{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:500}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--track, var(--surface-2))}input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--track, var(--surface-2))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:999px;background:var(--accent, var(--brand));border:5px solid #fff;box-shadow:0 1px 4px #1f1b1a40}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:999px;background:var(--accent, var(--brand));border:5px solid #fff}.segmented{display:flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px}.segmented button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink-2);min-width:0;padding:0 6px}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #1f1b1a1f}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:44px;padding:0 16px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1.5px var(--muted);background:var(--surface);font-weight:600;font-size:14px;cursor:pointer}.chip[aria-pressed=true]{box-shadow:none;background:var(--ink);color:#fff}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatch{width:44px;height:44px;border-radius:14px;border:1.5px solid rgba(31,27,26,.14);cursor:pointer;position:relative;padding:0}.swatch[aria-pressed=true]:after{content:"";position:absolute;inset:-6px;border-radius:18px;border:2.5px solid var(--ink)}.swatch-tag{position:absolute;bottom:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}.option{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border-radius:var(--r-md);border:0;box-shadow:inset 0 0 0 1.5px var(--surface-2);background:var(--surface);text-align:left;font-weight:500;cursor:pointer}.option[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}.option .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--muted);flex:none;display:grid;place-items:center;font-size:13px}.option[aria-pressed=true] .box{background:var(--ink);border-color:var(--ink);color:#fff}.workspace{display:flex;flex-direction:column;gap:16px}.stage-wrap{position:sticky;top:calc(var(--safe-t) + 4px);z-index:5}.stage{position:relative;border-radius:var(--r-xl);padding:28px 22px;overflow:hidden;isolation:isolate}.stage-deco{position:absolute;z-index:-1;pointer-events:none}.stage-label{position:absolute;top:12px;left:14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#fffdfbeb;padding:4px 10px;border-radius:999px;z-index:3}.artboard{position:relative;background:#fffdf8;border-radius:10px;box-shadow:0 2px 4px #1f1b1a14,0 14px 30px #1f1b1a24;overflow:hidden}.preview{border-radius:var(--r-lg);background:var(--surface);overflow:hidden;position:relative;box-shadow:var(--shadow)}.preview-wrap{position:sticky;top:calc(var(--safe-t) + 4px);z-index:5}.preview-label{position:absolute;top:12px;left:14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#fffdfbeb;padding:4px 10px;border-radius:999px;z-index:3}.hl{outline:2.5px dashed var(--ink);outline-offset:4px;border-radius:6px}.panel{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}.brief{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);padding:4px 16px}.brief summary{min-height:48px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;cursor:pointer;list-style:none}.brief summary::-webkit-details-marker{display:none}.brief p{margin:0 0 12px;font-size:14px}.steps{display:flex;gap:4px;flex:1}.steps span{flex:1;height:5px;border-radius:999px;background:var(--surface-2)}.steps span[data-on=true]{background:var(--accent, var(--ink))}.concept{border-left:4px solid var(--accent, var(--brand));padding:4px 0 4px 14px}.source{font-size:12px;color:var(--ink-2);font-style:italic}.task-card{border-radius:var(--r-lg);padding:20px;background:var(--tint, var(--surface-2))}.fb-item{padding:14px 0;border-top:1px solid var(--surface-2);cursor:pointer}.fb-item:first-child{border-top:0;padding-top:0}.fb-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:6px}.fb-level{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}.fb-line{display:grid;grid-template-columns:78px 1fr;gap:8px;font-size:14px;margin-top:4px}.fb-line b{font-weight:600;color:var(--ink-2);font-size:13px}.disclaimer{font-size:12px;color:var(--ink-2);margin:12px 0 0}.symbol-slot{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:6 5}.hero{position:relative;border-radius:0 0 var(--r-xl) var(--r-xl);padding:calc(var(--safe-t) + 12px) var(--gutter) 24px;margin:calc((var(--safe-t) + 12px) * -1) calc(var(--gutter) * -1) 20px;overflow:hidden;isolation:isolate}.hero .topbar{position:relative;z-index:2}.topic-hero{padding-top:calc(var(--safe-t) + 8px)}.topic-hero .topbar{position:absolute;top:calc(var(--safe-t) + 8px);left:var(--gutter);right:var(--gutter);margin:0}.topic-banner{margin:0 calc(var(--gutter) * -1) 16px}.topic-banner .art svg{width:100%;height:auto}.assembly-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--ink);color:#fff;font-size:14px}.assembly-bar .btn{min-height:40px;background:#fff;color:var(--ink);font-size:14px;padding:0 14px}.journey{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.journey-node{position:relative;display:flex;gap:12px;align-items:stretch}.journey-rail{width:32px;flex:none;display:flex;flex-direction:column;align-items:center}.journey-dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:14px;font-family:var(--font-display);color:#fff;flex:none}.journey-line{flex:1;width:2px;margin-top:4px;border-radius:2px}.lesson-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.lesson-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 6px;border-radius:999px;background:#fffdfbd9;font-size:12px;font-weight:600;text-decoration:none}.stage-grid{display:grid;grid-template-columns:repeat(5,76px);grid-auto-rows:76px;gap:8px;width:max-content}.stage-viewport{overflow:hidden;margin-right:-18px}.stage-cell{border-radius:18px;border:2px dashed rgba(31,27,26,.16);display:grid;place-items:center;position:relative;text-decoration:none;color:inherit}.stage-cell.area{border:0;background:var(--surface);box-shadow:var(--shadow)}textarea.code{width:100%;min-height:96px;border-radius:var(--r-sm);border:1.5px solid var(--muted);background:var(--surface);padding:10px;font-family:ui-monospace,Menlo,monospace;font-size:12px}.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 20px);transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;z-index:50;white-space:nowrap}.setting-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 18px;width:100%;border:0;background:transparent;text-align:left;text-decoration:none;color:inherit;cursor:pointer;font-size:15px;font-weight:500}.setting-row+.setting-row{border-top:1px solid var(--surface-2)}.switch{width:50px;height:30px;border-radius:999px;background:var(--muted);position:relative;flex:none;transition:background .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 3px #1f1b1a4d;transition:transform .15s var(--ease-out)}[aria-checked=true]>.switch{background:var(--green)}[aria-checked=true]>.switch:after{transform:translate(20px)}g[role=button]:focus{outline:none}g[role=button]:focus-visible rect,g[role=button]:focus-visible circle{stroke:var(--ink);stroke-width:3}@keyframes pop-in{0%{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}.pop-in{animation:pop-in .52s var(--ease-out) both}.btn,.card-link,.icon-btn,.option,.chip,.segmented button,.swatch,.setting-row,.press,.acc-head,.area-tile,.hero-card,.stage-tile,.lesson-pill,.extra-row,.btn-link,.topic-card{transition:transform .18s var(--spring),box-shadow .2s,background-color .2s,color .2s,opacity .2s;-webkit-user-select:none;user-select:none}.btn:active:not([disabled]),.icon-btn:active,.chip:active,.segmented button:active,.swatch:active,.btn-link:active,.stage-tile:active,.press:active{transform:scale(.94)}.card-link:active,.option:active,.setting-row:active,.acc-head:active,.area-tile:active,.extra-row:active,.topic-card:active{transform:scale(.975)}.hero-card:active{transform:scale(.985) rotate(-.4deg)}.btn .btn-dot{transition:transform .22s var(--spring)}.btn:active .btn-dot,.btn:hover .btn-dot{transform:translate(4px)}.setting-row:active{background:var(--surface-2)}.option[aria-pressed=true] .box{animation:tick .32s var(--spring)}.chip[aria-pressed=true],.segmented button[aria-pressed=true],.swatch[aria-pressed=true]{animation:tick .3s var(--spring)}@keyframes tick{0%{transform:scale(.85)}60%{transform:scale(1.08)}to{transform:scale(1)}}.btn-link{background:none;border:0;min-height:44px;padding:0 6px;font-weight:600;font-size:14px;color:var(--brand);cursor:pointer}.btn-link.btn{min-height:44px}.page-fwd{animation:page-fwd .34s var(--ease-out) both}.page-back{animation:page-back .34s var(--ease-out) both}.page-tab{animation:page-tab .3s var(--ease-out) both}@keyframes page-fwd{0%{opacity:0;transform:translate(36px)}to{opacity:1;transform:none}}@keyframes page-back{0%{opacity:0;transform:translate(-36px)}to{opacity:1;transform:none}}@keyframes page-tab{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.view-in{animation:page-tab .3s var(--ease-out) both}.workspace>*{animation:page-tab .28s var(--ease-out) both}.bottom-nav{animation:nav-in .42s var(--spring) both}@keyframes nav-in{0%{transform:translateY(120%)}to{transform:none}}.bottom-nav a:active{transform:scale(.92)}.bottom-nav a[aria-current=page] svg{animation:tick .36s var(--spring)}.splash{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);overflow:hidden;cursor:pointer}.splash:not(.go) .splash-logo *,.splash:not(.go) .splash-burst *{opacity:0}.splash.go{animation:splash-out .38s ease-in 2.95s forwards}.splash.go.reduce{animation:splash-out .22s ease-in .6s forwards}.splash-logo{width:min(74vw,330px);height:auto;overflow:visible;position:relative}.splash-burst{position:absolute;width:min(120vw,560px);height:auto}.splash-logo *,.splash-burst *{transform-box:fill-box;transform-origin:center}.splash.go .lg-y{animation:lg-drop calc(.76s * var(--ls, 1)) var(--spring) calc(.1s * var(--ls, 1)) both}.splash.go .lg-o{animation:lg-roll calc(.82s * var(--ls, 1)) var(--ease-out) calc(.38s * var(--ls, 1)) both}.splash.go .lg-rest{animation:lg-wipe calc(.78s * var(--ls, 1)) var(--ease-out) calc(.78s * var(--ls, 1)) both}.splash.go .lg-dot{animation:lg-pop calc(.64s * var(--ls, 1)) var(--spring) calc(1.5s * var(--ls, 1)) both}.splash.go .lg-tag{animation:lg-fade calc(.52s * var(--ls, 1)) var(--ease-out) calc(1.85s * var(--ls, 1)) both}.splash.go .splash-burst .b{animation:burst calc(1s * var(--ls, 1)) var(--spring) both}.splash.go .b1{animation-delay:calc(1.6s * var(--ls, 1))!important}.splash.go .b2{animation-delay:calc(1.68s * var(--ls, 1))!important}.splash.go .b3{animation-delay:calc(1.76s * var(--ls, 1))!important}.splash.go .b4{animation-delay:calc(1.84s * var(--ls, 1))!important}.splash.go .b5{animation-delay:calc(1.92s * var(--ls, 1))!important}@keyframes lg-drop{0%{transform:translateY(-260%);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}@keyframes lg-roll{0%{transform:translate(-280%) rotate(-300deg);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}@keyframes lg-wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes lg-pop{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.35) rotate(10deg)}to{transform:none}}@keyframes lg-fade{0%{opacity:0;transform:translateY(30%)}to{opacity:1;transform:none}}@keyframes burst{0%{transform:scale(0);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}@keyframes splash-out{to{opacity:0;visibility:hidden}}.illo-anim>g{animation:illo-pop .62s var(--spring) both;animation-delay:calc(var(--i) * 80ms + .12s);transform-box:fill-box;transform-origin:center bottom}@keyframes illo-pop{0%{transform:translateY(18px) scale(.6);opacity:0}to{transform:none;opacity:1}}.ob-hero{border-radius:var(--r-xl);display:grid;place-items:end center;padding:26px 0 0;overflow:hidden;min-height:200px}.ob-title{font-size:31px;line-height:1.08}.ob-lead{font-size:17px;color:var(--ink-2)}.ob-step.from-right{animation:page-fwd .36s var(--ease-out) both}.ob-step.from-left{animation:page-back .36s var(--ease-out) both}.ob-cta{margin-top:auto;padding-top:22px}.ob-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.ob-points li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px}.ob-points li span{width:14px;height:14px;border-radius:5px;flex:none;transform:rotate(45deg)}.input{width:100%;min-height:56px;border-radius:18px;border:0;box-shadow:inset 0 0 0 1.5px var(--muted);padding:0 18px;font-size:17px;background:var(--surface);transition:box-shadow .2s}.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}.ob-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:18vh}.loader{display:flex;gap:14px;margin-bottom:18px}.loader>span{display:inline-block;animation:hop 1.6s var(--ease-out) infinite;animation-delay:calc(var(--i) * .2s)}@keyframes hop{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-8px) scale(1.03)}55%{transform:translateY(0) scale(.98)}}.suggest-card{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:22px 20px 18px;isolation:isolate;animation:pop-in .52s var(--spring) both}.suggest-first{position:relative;margin-top:18px;padding:14px 16px;border-radius:18px;background:#fffdfbeb}.avatar{text-decoration:none;background:var(--purple);color:#fff;box-shadow:none}.greet{margin:16px 0 18px}.greet-hi{margin:0;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--brand)}.greet-title{font-size:33px;line-height:1.04;margin-top:6px;max-width:330px}.hero-card{position:relative;display:flex;flex-direction:column;min-height:230px;padding:18px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;text-decoration:none;color:var(--ink)}.hero-card-illo{position:absolute;right:-44px;top:-6px;z-index:-1;width:168px}.hero-card-body{display:block;max-width:64%;position:relative}.hero-card-body .display{font-size:23px!important}.hero-card-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between}.play-btn{width:52px;height:52px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 6px 16px #bb264959}.play-btn.small{width:38px;height:38px;box-shadow:none}.pill-now{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12.5px;font-weight:700}.pill-now:before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ink);animation:blink 1.4s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}.hscroll{overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}.hscroll-row{display:flex;gap:10px;padding:2px var(--gutter);width:max-content}.area-tile{width:148px;border-radius:24px;padding:14px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px}.area-tile.soon{width:120px;background:transparent;border:2px dashed var(--muted);justify-content:center;align-items:flex-start;gap:6px}.soon-card{position:relative;display:flex;align-items:center;gap:14px;border-radius:var(--r-lg);padding:14px 16px;overflow:hidden}.stage-card{position:relative;border-radius:var(--r-xl);padding:20px 18px 18px;overflow:hidden;isolation:isolate}.stage-card.active{background:var(--ink);color:#fffdfb}.stage-card.locked{margin-top:14px;background:transparent;border:2px dashed var(--muted);color:var(--ink)}.stage-card.locked .display{color:var(--ink-2)}.lock-pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:700;color:var(--ink-2);position:relative}.stage-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.stage-tile{aspect-ratio:1 / 1.15;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none}.stage-tile.soon{border:1.5px dashed rgba(255,253,251,.3);color:#fffdfbb3}.acc{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .25s}.acc.is-now{box-shadow:inset 0 0 0 2.5px var(--hl),var(--shadow-lg)}.acc-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;background:transparent;cursor:pointer;text-align:left}.acc-symbol{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;flex:none}.acc-chev{width:36px;height:36px;border-radius:99px;background:var(--surface-2);display:grid;place-items:center;flex:none;transition:transform .32s var(--spring)}.acc.open .acc-chev{transform:rotate(180deg)}.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease-out)}.acc.open .acc-body{grid-template-rows:1fr}.acc-inner{overflow:hidden;min-height:0}.acc-inner>div{opacity:0;transform:translateY(-6px);transition:opacity .26s,transform .32s var(--ease-out)}.acc.open .acc-inner>div{opacity:1;transform:none;transition-delay:80ms}.acc-badge{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:99px}.acc-badge.todo{background:var(--surface-2);color:var(--ink-2)}.acc-badge.mid{background:var(--butter-tint);color:#8a5a00}.acc-badge.done{background:var(--green-tint);color:var(--green)}.pulse{width:7px;height:7px;border-radius:99px;background:var(--coral);box-shadow:0 0 #ff6b4a99;animation:pulse 1.6s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px #ff6b4a00}to{box-shadow:0 0 #ff6b4a00}}.topic-card{display:block;text-decoration:none;color:inherit;padding:14px 16px}.is-now{box-shadow:inset 0 0 0 2.5px var(--hl, var(--ink)),var(--shadow)!important}.journey-dot.now{box-shadow:0 0 0 4px #d7f23f73}.lesson-pill.now{font-weight:700}.extra-row{margin-top:8px;padding:9px 12px;border-radius:999px;border:1.5px dashed var(--muted);text-decoration:none;color:inherit;font-size:13px;font-weight:600}.locked-row{flex:1;padding:12px 16px;border-radius:18px;border:1.5px dashed var(--muted)}.status-dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;flex:none}.flourish{animation:lg-pop .6s var(--spring) both;transform-box:fill-box;transform-origin:center}.intro-hero{min-height:290px;padding-bottom:24px}.intro-illo{position:absolute;right:-30px;bottom:-6px;z-index:-1}.done-art{margin-top:6px;border-radius:var(--r-xl);min-height:230px;display:grid;place-items:center;overflow:hidden;padding-top:20px}.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.confetti span{position:absolute;top:-20px;left:50%;width:10px;height:14px;animation:fall 1.6s cubic-bezier(.2,.6,.4,1) both;animation-delay:calc(var(--i) * 45ms)}@keyframes fall{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--x),105vh) rotate(540deg);opacity:.9}}.profile-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);padding:20px;background:var(--butter-tint)}.avatar-lg{width:64px;height:64px;border-radius:22px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:28px;position:relative}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.stat{border-radius:20px;padding:14px 12px}.btn-primary:not(.btn-small):not(:has(.btn-dot)):after{content:"";width:34px;height:34px;border-radius:999px;margin-right:-14px;flex:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%23bb2649' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;transition:transform .22s var(--spring)}.btn-primary:active:after{transform:translate(4px)}.sheet .btn-primary:after{display:none}.steps-wrap{display:flex;flex-direction:column;gap:6px;flex:1}.steps-labels{display:flex;gap:4px}.steps-labels span{flex:1;font-size:11.5px;font-weight:600;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.steps-labels span[data-now=true]{color:var(--ink);font-weight:800}.steps-labels span[data-done=true]{color:var(--green)}.warmup-note{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:16px;background:var(--butter-tint);border:1.5px dashed #e3b53a;font-size:14px}.warmup-tag{align-self:flex-start;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--butter);color:var(--ink)}.brief{padding:0}.brief-head{width:100%;min-height:52px;display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;border:0;background:transparent;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}.brief-toggle{display:inline-flex;padding:3px;border-radius:99px;background:var(--surface-2)}.brief-toggle span{min-width:44px;text-align:center;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--ink-2);opacity:.55;transition:background .2s,color .2s,opacity .2s}.brief-toggle span[data-on=true]{background:var(--ink);color:#fff;opacity:1}.brief-body{padding:0 16px 6px;animation:page-tab .26s var(--ease-out)}.brief.open{box-shadow:inset 0 0 0 2px var(--ink),var(--shadow)}.fb-item{border-radius:16px;padding:14px!important;border:0!important;margin-top:10px;background:var(--bg)}.fb-item:first-child{margin-top:0}.fb-item.lv-clear{background:var(--green-tint)}.fb-item.lv-try{background:var(--butter-tint)}.fb-item.lv-review{background:#ffe4dc;box-shadow:inset 0 0 0 2px var(--coral)}.fb-item.lv-review .fb-level{background:var(--coral);color:#fff;padding:3px 9px;border-radius:99px;font-weight:800}.fb-item.lv-clear .fb-level{color:var(--green);font-weight:800}.fb-line{grid-template-columns:1fr;gap:2px;margin-top:8px}.fb-line b{font-size:12.5px}.fb-try{padding:8px 10px;border-radius:10px;background:#fffdfbbf}.gate-note{padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;margin-bottom:12px}.btn[disabled]{opacity:.35;filter:grayscale(.6)}.g-round{display:flex;flex-direction:column;gap:4px}.g-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.g-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800}.g-badge:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lime);transform:rotate(45deg)}.g-dots{display:flex;gap:5px;margin-left:auto}.g-dots span{width:22px;height:6px;border-radius:99px;background:var(--surface-2)}.g-dots span[data-s=done]{background:var(--green)}.g-dots span[data-s=now]{background:var(--ink)}.g-type{font-weight:700;color:var(--purple)}.g-q{margin-top:4px;font-size:21px}.g-mini{border-radius:12px;overflow:hidden;text-align:left;color:#22303c}.g-statement{background:var(--surface);border-radius:18px;padding:18px}.g-say{margin:0;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;text-align:center}.g-swipe{position:relative}.g-card-stack{position:relative;padding:6px 4px 0}.g-card{position:relative;z-index:2;background:var(--lilac-tint);border-radius:24px;padding:14px;box-shadow:var(--shadow-lg);cursor:grab;user-select:none;-webkit-user-select:none}.g-card.ghost{position:absolute;inset:14px 14px -8px;z-index:1;background:var(--surface-2);box-shadow:none;transform:rotate(-3deg)}.g-stamp{position:absolute;top:-20px;z-index:3;padding:4px 12px;border-radius:10px;font-weight:900;font-size:20px;border:3px solid;transform:rotate(-12deg);background:#fffdfbe6}.g-stamp.yes{left:18px;color:var(--green)}.g-stamp.no{right:18px;color:var(--coral);transform:rotate(12deg)}.g-swipe-side{position:absolute;top:40%;z-index:0;width:46px;height:64px;border-radius:14px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);transition:opacity .2s}.g-swipe-side.left{left:-6px;color:var(--coral)}.g-swipe-side.right{right:-6px;color:var(--green)}.g-no{color:var(--coral)}.g-yes{color:var(--green)}.g-pick{display:grid;gap:10px}.g-opt{border:0;padding:8px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--surface-2);display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;color:var(--ink)}.g-opt-art{display:block}.g-opt-art .g-mini{box-shadow:inset 0 0 0 1px #1f1b1a14}.g-opt-label{font-size:13px;color:var(--ink-2);padding:0 4px}.g-opt-label b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;margin-right:4px}.g-opt.right{box-shadow:inset 0 0 0 3px var(--green);background:var(--green-tint);animation:tick .36s var(--spring)}.g-opt.wrong{box-shadow:inset 0 0 0 3px var(--coral);background:#ffe4dc;animation:shake .38s}.g-opt.dim{opacity:.5}.g-opt[disabled]{cursor:default}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.g-scene{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#fffdf8;box-shadow:var(--shadow)}.g-slot{position:absolute;border:2.5px dashed var(--purple);border-radius:12px;display:grid;place-items:center;background:#cdb0f32e;transition:background .2s,transform .2s;padding:4px 8px}.g-slot.over{background:#d7f23f66;transform:scale(1.04)}.g-slot.right{border-style:solid;border-color:var(--green);background:#17804f14}.g-slot.wrong{border-style:solid;border-color:var(--coral);background:#ff6b4a1a;animation:shake .38s}.g-slot-hint{font-size:12px;font-weight:700;color:var(--purple)}.g-placed{width:100%;animation:pop-in .36s var(--spring);color:#22303c}.g-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.g-piece{position:relative;border:0;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--surface-2);border-radius:14px;padding:10px 12px;min-width:64px;max-width:100%;cursor:grab;touch-action:none;color:#22303c;display:grid;place-items:center;transition:transform .25s var(--spring)}.g-piece.used{opacity:.3}.g-piece.hint{box-shadow:inset 0 0 0 3px var(--green)}.g-spot{position:absolute;border:0;background:transparent;border-radius:12px;cursor:pointer}.g-spot.right{box-shadow:0 0 0 3px var(--green);background:#17804f1f;animation:tick .36s var(--spring)}.g-spot.wrong{box-shadow:0 0 0 3px var(--coral);background:#ff6b4a24;animation:shake .38s}.g-result{margin-top:16px;padding:14px 16px;border-radius:18px;animation:pop-in .36s var(--spring) both}.g-result.ok{background:var(--green-tint)}.g-result.no{background:#ffe4dc}.g-result-title{margin:0 0 4px;font-family:var(--font-display);font-weight:800;font-size:18px}.g-end{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:24px}.g-score{font-size:72px;line-height:1;color:var(--brand)}.g-score span{font-size:32px;color:var(--ink-2)}.g-cal{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.g-cal span{height:14px;border-radius:4px}.g-row{display:flex;align-items:center;gap:6px;justify-content:center;min-height:26px}.g-row span{border-radius:99px;background:#9b56da;flex:none}.g-dot{display:block;border-radius:99px;background:#9b56da}.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.g-grid span,.g-blk{display:block;height:14px;border-radius:3px;background:#cdb0f3}.g-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.g-menu span{height:18px;border-radius:5px}.g-btn{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:99px;color:#fff;font-size:10px;font-weight:700;font-family:Be Vietnam Pro,sans-serif}.g-market{position:relative;background:linear-gradient(#f7e2aa 0 62%,#c98a5a 62%)}.g-person{position:absolute;width:30%;height:70%;transform-origin:top center}.g-person:before{content:"";position:absolute;left:32%;top:0;width:36%;aspect-ratio:1;border-radius:99px;background:#8a5a3c}.g-person:after{content:"";position:absolute;left:14%;top:30%;width:72%;height:60%;border-radius:40% 40% 8px 8px;background:#bb2649}.g-stall{position:absolute;bottom:8%;width:26%;height:34%;background:#17804f;border-radius:6px 6px 0 0}::highlight(yf-term){text-decoration:underline dotted 2px;text-decoration-color:var(--purple);text-underline-offset:3px;background-color:#9b56da1a}.term-pop{position:fixed;z-index:90;width:220px;padding:10px 14px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;animation:pop-in .22s var(--spring);pointer-events:none}.term-en{font-size:12px;font-weight:700;color:var(--lime);text-transform:lowercase}.term-vi{font-size:15px;font-weight:700}.sign-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sign-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:0;border-radius:16px;background:var(--surface-2);font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:transform .18s var(--spring),background .2s}.sign-tab[aria-selected=true]{background:var(--ink);color:#fff}.sign-tab:active{transform:scale(.95)}.sign-num{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:var(--surface);color:var(--ink);font-weight:800}.sign-tab[aria-selected=true] .sign-num{background:var(--lime)}.opt-tag{flex:none;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--lilac-tint);color:var(--purple)}.future-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--lilac-tint);font-size:14px}.future-note svg{flex:none;margin-top:2px;color:var(--purple)}.hint-chip{margin:14px auto 0;max-width:320px;text-align:center;font-size:13.5px;padding:10px 14px;border-radius:14px;background:var(--butter-tint)}.avatar-chip{position:relative;width:44px;height:44px;border-radius:14px;background:var(--purple);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:18px;transform:rotate(-6deg);transition:transform .2s var(--spring)}.avatar-chip .num{transform:rotate(6deg)}.avatar-chip i{position:absolute;right:-5px;top:-5px;width:14px;height:14px;background:var(--lime);border-radius:3px;transform:rotate(45deg);box-shadow:0 0 0 2px var(--bg)}.avatar-chip:active{transform:rotate(-6deg) scale(.92)}.goal-card{background:var(--green-tint);box-shadow:none}.set-group{margin:22px 4px 8px;font-size:13px;font-weight:700;color:var(--ink-2)}.sheet-backdrop{position:absolute;inset:0;z-index:80;background:#1f1b1a66;display:flex;align-items:flex-end;justify-content:center;animation:page-tab .2s}.sheet{width:100%;max-width:480px;max-height:82vh;overflow-y:auto;background:var(--bg);border-radius:28px 28px 0 0;padding:12px 20px calc(24px + var(--safe-b));animation:sheet-up .32s var(--ease-out)}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}.sheet-grab{display:block;width:44px;height:5px;border-radius:99px;background:var(--muted);margin:0 auto 14px}.plan-card{padding:16px;border-radius:18px;background:var(--green-tint);margin-bottom:10px}.plan-card.alt{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--surface-2)}.faq details{background:var(--surface);border-radius:14px;padding:12px 14px}.faq summary{font-weight:700;cursor:pointer}.faq p{margin:8px 0 0}.legal p{margin:0;font-size:14.5px}.display,.h1,.h2,.h3,.g-q,.ob-title{text-wrap:balance}p,li,.body,.body-s,.sub-vi{text-wrap:pretty}.hero-burst{position:relative;overflow:hidden}.hero-burst svg{display:block}.hero-burst .bp,.band .bp{transform-box:fill-box;transform-origin:center;animation:bp-in .7s var(--spring) both;animation-delay:calc(var(--i) * 60ms)}@keyframes bp-in{0%{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}.ob-burst{position:relative;margin:-56px calc(var(--gutter) * -1) 4px}.ob-burst .hero-burst{border-radius:0 0 40px 40px}.ob-burst-logo{position:absolute;left:var(--gutter);top:calc(var(--safe-t) + 60px);background:#fffdfb;padding:8px 14px 6px;border-radius:14px;box-shadow:var(--shadow)}.band{overflow:hidden}.band svg{display:block}.home-top{margin-top:-12px;margin-bottom:0;border-radius:0 0 28px 28px;overflow:hidden}.joint{position:relative;height:0;z-index:4;pointer-events:none}.joint svg{position:absolute;top:-3px}.joint-center svg{left:50%;transform:translate(-50%)}.joint-left svg{left:30px}.joint-right svg{right:30px}.g-tf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.g-tf-btn{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;font-weight:800;font-size:15px;cursor:pointer;color:var(--ink);transition:transform .18s var(--spring)}.g-tf-btn:active{transform:scale(.9)}.g-tf-btn[disabled]{opacity:.35}.g-tf-ic{width:72px;height:72px;border-radius:999px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg)}.g-tf-btn.no .g-tf-ic{background:var(--coral)}.g-tf-btn.yes .g-tf-ic{background:var(--green)}.g-tf-hint{font-size:12px;color:var(--ink-2);text-align:center;line-height:1.3}.g-swipe-side{display:none}.g-stamp{font-size:22px}.g-stamp.yes{background:var(--lime);color:var(--ink);border-color:var(--ink)}.g-stamp.no{background:#ffe4dc;color:#c2401f;border-color:#c2401f}.g-result.no .g-result-title{color:#c2401f}.g-result.ok .g-result-title{color:var(--green)}.g-pick.poster{gap:12px}.g-pick.poster .g-opt-art .g-mini{aspect-ratio:3 / 4;display:flex;flex-direction:column;justify-content:center;padding:14px!important}.g-pick.poster .g-opt-art .g-mini>*{zoom:1.25}.g-piece{padding-left:22px}.g-grip{position:absolute;left:8px;top:50%;width:6px;height:14px;transform:translateY(-50%);background:radial-gradient(circle,var(--muted) 1.4px,transparent 1.6px) 0 0 / 3px 3.5px}.g-tray .g-piece:not([disabled]){animation:nudge 1.8s ease-in-out .6s 2}@keyframes nudge{0%,to{transform:none}30%{transform:translateY(-8px)}50%{transform:translateY(0)}}.g-drag-hint{display:flex;gap:6px;align-items:flex-start;justify-content:center;text-align:center;font-size:13px;color:var(--ink-2);margin-top:10px}.g-spot.shown{border:2px dashed rgba(155,86,218,.7);background:#cdb0f31f;animation:spot-pulse 1.6s ease-in-out infinite}.g-spot.shown.right,.g-spot.shown.wrong{animation:none;border-style:solid}@keyframes spot-pulse{50%{background:#cdb0f352}}.back-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);font-weight:700;font-size:14px;cursor:pointer;color:var(--ink);transition:transform .18s var(--spring)}.back-pill:active{transform:scale(.95)}.sub-vi{display:block;font-size:12.5px;color:var(--ink-2);font-weight:500;line-height:1.3}.stage-tile{aspect-ratio:auto;min-height:92px;padding:8px 4px}.stage-tile-name{font-size:10.5px;font-weight:700;line-height:1.15;text-align:center}.stage-tile.soon{color:#fffdfbbf}.acc.future{background:transparent;box-shadow:inset 0 0 0 1.5px var(--surface-2)}.coming-box{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--bg);border:1.5px dashed var(--muted)}.coming-row{width:100%;border:0;background:var(--surface);text-align:left;opacity:.85;cursor:pointer}.lib-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lib-tab{border:0;border-radius:18px;padding:10px 8px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--surface-2);display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;transition:transform .18s var(--spring),background .2s}.lib-tab[aria-selected=true]{background:var(--c);box-shadow:none}.lib-tab[aria-selected=true] .lib-tab-en,.lib-tab[aria-selected=true] .lib-tab-vi{color:#fff}.lib-tab:active{transform:scale(.95)}.lib-tab-en{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);line-height:1.15}.lib-tab-vi{font-size:11.5px;color:var(--ink-2)}.lib-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:12px}.lib-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lib-visual{margin-top:16px;padding:14px;border-radius:20px;background:#fffdfbbf}.lib-points{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.lib-dot{width:14px;height:14px;border-radius:4px;transform:rotate(45deg);flex:none;margin:0 6px}.bottom-nav a{font-size:12.5px;gap:6px}.bottom-nav a[aria-current=page]{flex:1.6}.lib-card{padding:10px 12px 10px 10px}.lib-card.is-locked{opacity:.92;box-shadow:inset 0 0 0 1.5px var(--surface-2);background:transparent}.lib-thumb{position:relative;width:108px;height:78px;flex:none;border-radius:14px;overflow:hidden;display:block}.lib-thumb svg{width:100%;height:100%;display:block}.lib-thumb.locked svg{filter:grayscale(1) contrast(.8);opacity:.35}.lib-lock{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink)}.lib-lock svg{width:30px!important;height:30px!important;padding:6px;border-radius:99px;background:var(--surface);filter:none!important;opacity:1!important;box-shadow:var(--shadow)}.lib-empty{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--butter-tint);margin-bottom:16px}.lib-hero{padding-bottom:22px}.lib-art{margin-top:6px;border-radius:22px;overflow:hidden;aspect-ratio:200 / 140;box-shadow:var(--shadow)}.lib-art svg{display:block;width:100%;height:100%}.lib-article{display:flex;flex-direction:column;gap:12px}.lib-article .body{font-size:16px;line-height:1.6}.lib-lead{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.35}.lib-keys{padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.lib-keys .lib-points{margin-top:8px}.g-zones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.g-zone{min-height:96px;border-radius:22px;border:2.5px dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:16px;cursor:pointer;transition:transform .22s var(--spring),background .2s,border-color .2s}.g-zone.no{color:#c2401f;border-color:#ff6b4a99;background:#ff6b4a14}.g-zone.yes{color:var(--green);border-color:#17804f80;background:#17804f12}.g-zone.hot{transform:scale(1.04);border-style:solid}.g-zone.no.hot{background:#ff6b4a33}.g-zone.yes.hot{background:#17804f2e}.g-zone.right{border-style:solid;background:var(--green);color:#fff;border-color:var(--green)}.g-zone.wrong{border-style:solid;background:var(--coral);color:#fff;border-color:var(--coral);animation:shake .38s}.g-zone[disabled]:not(.right):not(.wrong){opacity:.4}.g-zone-hint{text-align:center;font-size:12.5px;color:var(--ink-2);margin:8px 0 0;min-height:18px}.g-tf{display:none}.ob-logo{display:flex;justify-content:center;padding:18px 0 10px}.ob-burst-plain{margin:0 calc(var(--gutter) * -1)}.ob-burst-plain .hero-burst{border-radius:32px;margin:0 var(--gutter)}.subject-cta{color:#fff;min-height:54px;font-size:15px}.subject-cta .btn-dot{background:#fff}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}}html[data-motion=reduce] *,html[data-motion=reduce] *:before,html[data-motion=reduce] *:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}.screen.no-nav.fill>.row:first-child{position:relative;z-index:6}.gal-filter{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0;margin:0 -2px 4px;overflow-x:auto;flex-wrap:nowrap}.gal-filter .chip{flex:none}.gal-group{font-family:var(--font-display);font-size:22px;margin:26px 0 10px}.gal-item{margin-bottom:18px}.gal-head{margin-bottom:8px}.gal-name{font-size:15px;font-weight:700}.gal-file{display:block;font-family:Roboto Mono,monospace;font-size:11px;color:var(--ink-2);margin-top:2px}.gal-note{font-size:12px;color:var(--ink-2);margin-top:4px}.gal-stage{background:var(--surface);border:1px dashed var(--muted);border-radius:18px;padding:14px;overflow:hidden}.gal-cap,.gal-grid figcaption{font-size:11px;color:var(--ink-2);margin:4px 0}.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gal-grid figure{margin:0;text-align:center;min-width:0}.gal-grid.icons{grid-template-columns:repeat(4,1fr)}.gal-grid.thumbs{grid-template-columns:repeat(2,1fr)}.gal-grid.tokens{grid-template-columns:repeat(4,1fr)}.gal-grid.thumbs .lib-thumb{width:100%;height:96px;display:block}.gal-sw{display:block;width:100%;aspect-ratio:1;min-width:44px;border-radius:12px;border:1px solid rgba(0,0,0,.08);margin:0 auto}.tune .btn{border-radius:var(--t-radius, 8px)}.tune .btn:not(.btn-small){min-height:var(--t-h, 55px);font-size:var(--t-fs, 16px);padding:0 var(--t-pad, 24px);transition-duration:var(--t-dur, .18s);transition-timing-function:var(--t-ease, cubic-bezier(.3, 1.5, .5, 1))}.tune .btn:active:not([disabled]){transform:scale(var(--t-press, .94))}.tune .btn:active .btn-dot,.tune .btn:hover .btn-dot{transform:translate(var(--t-dot, 4px))}.tune .btn-dot{transition-duration:var(--t-dur, .18s);transition-timing-function:var(--t-ease, cubic-bezier(.3, 1.5, .5, 1))}.tune .chip{min-height:var(--t-h, 44px);border-radius:var(--t-radius, 999px);font-size:var(--t-fs, 14px);padding:0 var(--t-pad, 16px);transition-duration:var(--t-dur, .18s);transition-timing-function:var(--t-ease, cubic-bezier(.3, 1.5, .5, 1))}.tune .chip:active{transform:scale(var(--t-press, .94))}.tune-panel{margin-top:14px;border-top:1px dashed var(--muted);padding-top:10px}.tune-toggle{border:0;background:var(--ink);color:#fff;border-radius:999px;min-height:40px;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer}.tune-body{margin-top:12px;display:grid;gap:10px}.tune-row{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:8px;font-size:13px}.tune-row b{text-align:right;font-variant-numeric:tabular-nums}.tune-row input[type=range]{width:100%;accent-color:var(--brand)}.tune-eases{grid-column:2 / 4;display:flex;gap:6px;flex-wrap:wrap}.tune-eases .chip{min-height:34px;padding:0 12px;font-size:13px}.tune-note{width:100%;border:1.5px solid var(--muted);border-radius:14px;padding:10px 12px;font:inherit;font-size:14px;background:var(--surface);resize:vertical}.tune-msg{font-size:13px}.tune-msg.ok{color:var(--green)}.tune-msg.err{color:var(--brand)}.logo-demo svg{height:var(--t-size, 64px)!important}.logo-demo{--logo-c: var(--t-c, var(--brand));--logo-tag: var(--t-tag, var(--ink))}.fit-demo{width:var(--t-w, 160px);background:var(--surface-2);padding:6px;border-radius:8px;max-width:100%}.splash-demo{position:relative;height:280px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:var(--bg)}.splash-demo .splash-logo{width:min(70%,280px)}.splash-demo .splash-burst{width:100%;max-width:420px}.splash-demo:not(.go) *{opacity:0}.tune-choice{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;font-size:13px}.tune-choice .swatches{display:flex;gap:8px;flex-wrap:wrap}.tune-sw{width:30px;height:30px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1.5px #0000002e;cursor:pointer}.tune-sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}.tune-attach{display:grid;gap:8px}.tune-files{display:flex;flex-wrap:wrap;gap:8px}.tune-file{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:10px;padding:4px 8px;font-size:12px;max-width:100%}.tune-file img{width:36px;height:36px;object-fit:cover;border-radius:6px}.tune-file button{border:0;background:none;cursor:pointer;font-size:14px}.refbox{background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:14px;margin-bottom:14px}.refbox h2{font-family:var(--font-display);font-size:18px}.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.ref-card{background:var(--surface-2);border-radius:14px;padding:8px;font-size:12px;overflow:hidden}.ref-card img{width:100%;height:110px;object-fit:cover;border-radius:10px;display:block;margin-bottom:6px}.ref-card .ref-doc{height:110px;display:grid;place-items:center;background:var(--surface);border-radius:10px;margin-bottom:6px;font-weight:700}.ref-card a{color:var(--ink);word-break:break-all}.splash.splash-demo.go{animation:none}.splash.splash-demo{cursor:default}.art{display:block;line-height:0}.art svg{display:block;width:100%;height:auto;overflow:visible}.hero-burst .art svg,.band .art svg{height:100%}.art-anim svg>:not(defs){animation:art-pop .62s var(--spring) both;transform-box:fill-box;transform-origin:center bottom}.art-anim svg>:nth-child(2){animation-delay:60ms}.art-anim svg>:nth-child(3){animation-delay:.12s}.art-anim svg>:nth-child(4){animation-delay:.18s}.art-anim svg>:nth-child(5){animation-delay:.24s}.art-anim svg>:nth-child(6){animation-delay:.3s}.art-anim svg>:nth-child(7){animation-delay:.36s}.art-anim svg>:nth-child(8){animation-delay:.42s}.art-anim svg>:nth-child(9){animation-delay:.48s}.art-anim svg>:nth-child(10){animation-delay:.54s}.art-anim svg>:nth-child(n+11){animation-delay:.6s}@keyframes art-pop{0%{opacity:0;translate:0 10px;scale:.86}to{opacity:1;translate:0 0;scale:1}}html[data-motion=reduce] .art-anim svg>*{animation:none}.hero-card-illo{position:absolute;right:14px;top:14px;z-index:-1;width:128px}.intro-illo{position:absolute;right:14px;bottom:14px;z-index:-1}.intro-hero .intro-illo{top:calc(var(--safe-t) + 4px);bottom:auto}.profile-card{position:relative;overflow:hidden}.profile-illo{position:absolute;right:14px;bottom:14px}.locked-illo{position:absolute;right:16px;bottom:16px;opacity:.5;filter:grayscale(.6)}.suggest-illo{position:absolute;right:14px;top:14px}.lib-thumb:after,.lib-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff57,#fff0 46%,#1f1b1a12)}.lib-art{position:relative}.kind-tag{display:inline-flex;align-items:center;gap:6px}.done-badge{display:grid;place-items:center;width:44px;height:44px;margin:18px auto 0;border-radius:50%;background:var(--butter);color:var(--ink)}.hint-chip{display:flex;gap:8px;align-items:flex-start}.hint-chip svg{flex:none;margin-top:1px}.setting-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface-2);flex:none}.setting-row{gap:12px}.pill-now,.g-badge{display:inline-flex;align-items:center;gap:6px}.stat-ico{display:block;margin-bottom:6px}.subject-cta{background:var(--ink);color:#fff}.subject-cta .btn-dot{background:var(--c, #fff);color:#fff}.lib-tab[aria-selected=true]{background:var(--ink);box-shadow:inset 0 -4px 0 var(--c)}.ob-burst{margin:6px calc(var(--gutter) * -1) 4px}.intro-illo{top:58px;bottom:auto;right:14px}.home-top{margin-top:0;overflow:visible;border-radius:0}.pill-now:has(svg):before{display:none}.btn,.btn-small,.chip,.icon-btn,.play-btn,.back-pill,.tune-toggle,.lesson-pill,.setting-row,.option,.g-opt{border-radius:10px}.btn .btn-dot{border-radius:8px}.segmented{border-radius:12px}.segmented button{border-radius:8px}.lib-tab{border-radius:10px}.bottom-nav a{border-radius:12px}.play-btn.small{border-radius:8px}.tune .chip{border-radius:var(--t-radius, 10px)}.g-zone{border-radius:14px}.done-badge{width:48px;height:48px;margin-top:-24px;position:relative;z-index:2;border-radius:14px;box-shadow:0 6px 16px #fdb10a59}.done-art .done-full{width:100%;align-self:end}.done-art .done-full svg{width:100%;height:auto;display:block}.ob-burst{margin-top:44px}.g-badge:has(svg):before{display:none}.tile,.stage-cell,.stage-tile,.acc-symbol,.locked-row,.suggest-first,.input,.coming-box,.future-note,.plan-card,.lib-keys,.lib-visual,.fb-item,.g-statement,.g-opt,.g-scene,.g-result,.sign-tab,.warmup-note,.stat,.lib-art,.area-tile{border-radius:14px}.g-card{border-radius:18px}.avatar-lg{border-radius:14px}.sheet{border-radius:18px 18px 0 0}.ob-burst .hero-burst,.ob-burst-plain .hero-burst{border-radius:0}.acc-chev,.brief-toggle,.warmup-tag,.acc-badge,.g-badge,.g-btn,.opt-tag,.pill-now,.lib-tab,.chip,.chip-stat,.g-zone,.lesson-pill,.g-row span,.g-opt-label b,.sign-num,.btn,.btn-small,.icon-btn,.play-btn,.back-pill,.option,.segmented,.setting-row{border-radius:8px}.btn .btn-dot,.segmented button{border-radius:6px}.bottom-nav{border-radius:14px}.bottom-nav a{border-radius:10px}.band{overflow:hidden;position:relative}.band-track{display:flex;height:100%;width:max-content;animation:band-drift 48s linear infinite}.band-track .art{height:100%;flex:none}.band-track .art svg{height:100%;width:auto}@keyframes band-drift{0%{transform:translate(0)}to{transform:translate(-33.333%)}}html[data-motion=reduce] .band-track{animation:none}.top-band{margin:calc((var(--safe-t) + 12px) * -1) calc(var(--gutter) * -1) 0}.ob-art{margin:52px calc(var(--gutter) * -.5) 6px}.ob-art .hero-burst{overflow:visible}.ob-logo+.ob-art{margin-top:18px}.splash{background:var(--brand)}.splash-art{position:absolute;left:0;right:0;bottom:0}.splash-art .art svg{width:100%;height:auto;display:block}.splash:not(.go) .splash-art svg>:not(defs){opacity:0}.splash.go .splash-art svg>:not(defs){animation:splash-rise .76s cubic-bezier(.3,1.35,.5,1) both;transform-box:fill-box;transform-origin:center bottom}.splash.go .splash-art svg>:nth-child(2){animation-delay:1.55s}.splash.go .splash-art svg>:nth-child(3){animation-delay:1.61s}.splash.go .splash-art svg>:nth-child(4){animation-delay:1.67s}.splash.go .splash-art svg>:nth-child(5){animation-delay:1.73s}.splash.go .splash-art svg>:nth-child(6){animation-delay:1.79s}.splash.go .splash-art svg>:nth-child(7){animation-delay:1.85s}.splash.go .splash-art svg>:nth-child(8){animation-delay:1.91s}.splash.go .splash-art svg>:nth-child(9){animation-delay:1.97s}.splash.go .splash-art svg>:nth-child(10){animation-delay:2.03s}.splash.go .splash-art svg>:nth-child(11){animation-delay:2.09s}.splash.go .splash-art svg>:nth-child(12){animation-delay:2.15s}.splash.go .splash-art svg>:nth-child(13){animation-delay:2.21s}.splash.go .splash-art svg>:nth-child(14){animation-delay:2.27s}.splash.go .splash-art svg>:nth-child(15){animation-delay:2.33s}.splash.go .splash-art svg>:nth-child(16){animation-delay:2.39s}.splash.go .splash-art svg>:nth-child(17){animation-delay:2.45s}.splash.go .splash-art svg>:nth-child(18){animation-delay:2.51s}.splash.go .splash-art svg>:nth-child(19){animation-delay:2.57s}@keyframes splash-rise{0%{opacity:0;translate:0 36px;scale:1 .6}to{opacity:1;translate:0 0;scale:1 1}}.splash.reduce .splash-art svg>:not(defs){animation:none;opacity:1}.seg-tabs{display:flex;gap:6px;background:var(--surface-2);border-radius:10px;padding:4px}.seg-tab{flex:1;border:0;background:transparent;border-radius:8px;min-height:40px;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}.seg-tab[aria-selected=true]{background:var(--ink);color:#fff}.subj-card{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:12px 14px}.subj-card.soon{opacity:.75}.subj-sym{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;flex:none}.subj-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.subj-progress b{font-size:12px;white-space:nowrap}.subj-now{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-2);margin-top:4px}.steps-bar{display:flex;gap:3px;flex:1;min-width:0}.steps-bar i{flex:1;height:7px;border-radius:2px;background:var(--surface-2);transition:background .3s}.stage-locked{padding-top:18px}.stage-locked-art .art svg{width:100%;height:auto}.stage-locked-art{margin:0 calc(var(--gutter) * -.5)}.lock-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;min-height:52px;border-radius:10px;background:var(--surface-2)}.stage-tiles{grid-template-columns:repeat(4,1fr)}.area-page{padding-bottom:calc(var(--safe-b) + 110px)}.area-hero{margin:calc((var(--safe-t) + 12px) * -1) calc(var(--gutter) * -1) 0;padding:calc(var(--safe-t) + 8px) var(--gutter) 18px}.area-hero{position:relative;padding:calc(var(--safe-t) + 8px) 0 0}.area-hero .topbar{position:absolute;top:calc(var(--safe-t) + 8px);left:var(--gutter);right:var(--gutter);z-index:2;margin:0}.area-hero .art svg{width:100%;height:auto}.area-meta{font-weight:700;font-size:14px;margin-top:4px}.area-puzzle{display:flex;gap:14px;align-items:center;margin-top:14px}.area-topic{margin-top:22px}.area-topic.soon{margin-top:14px;opacity:.7}.lesson-rail{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;position:relative}.lesson-rail:before{content:"";position:absolute;left:11px;top:12px;bottom:12px;border-left:2px dotted var(--muted)}.lesson-rail li{display:flex;gap:12px;align-items:center;position:relative}.rail-dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--bg);box-shadow:inset 0 0 0 2.5px var(--muted);color:#fff;z-index:1}.rail-dot.done{box-shadow:none}.rail-dot.now{box-shadow:inset 0 0 0 3px var(--brand);background:#fff}.rail-dot.extra{box-shadow:none;background:var(--bg)}.lesson-row{flex:1;min-width:0;display:block;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}.lesson-row.now{background:var(--brand-tint);box-shadow:inset 0 0 0 2px var(--brand)}.lesson-row.extra{background:transparent;box-shadow:inset 0 0 0 1.5px var(--surface-2)}.lesson-row.locked{opacity:.7;box-shadow:none;background:var(--surface-2)}.lesson-row-title{display:block;font-weight:600;font-size:15px}.sticky-cta{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b) + 18px);padding:0 var(--gutter);z-index:20;max-width:520px;margin:0 auto}.profile-card.v2{padding:14px 14px 16px}.profile-art{width:100%}.profile-art svg{max-height:190px;margin:0 auto}.profile-id{display:flex;align-items:center;gap:12px;margin-top:10px}.profile-id .avatar-lg{width:52px;height:52px;font-size:22px;flex:none}.stat-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;margin-bottom:10px}.stat-ico svg{display:block}.lib-group{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-size:20px;font-weight:700}.lib-group:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);align-self:center}.lib-group span{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-2)}.term-search{display:flex;align-items:center;gap:10px;margin-top:14px;min-height:48px;padding:0 14px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}.term-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}.term-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:10px}.term-card{padding:14px}.term-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.term-en{font-size:20px}.term-area{font-size:11px;font-weight:800;border-radius:6px;padding:3px 7px;white-space:nowrap}.term-vi{color:var(--brand);font-weight:700;font-size:14px;margin-top:2px}.term-def{font-size:14px;color:var(--ink);margin-top:6px;line-height:1.5}.btn-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:0;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:14px;border-radius:8px;min-height:40px;padding:0 14px;cursor:pointer}.reveal-in{animation:reveal-in .42s var(--ease-out) both}@keyframes reveal-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}html[data-motion=reduce] .reveal-in{animation:none}.lesson-bar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;margin:calc((var(--safe-t) + 12px) * -1) calc(var(--gutter) * -1) 12px;padding:calc(var(--safe-t) + 10px) var(--gutter) 10px;background:var(--bg)}.lesson-bar-btn{width:40px;height:40px;flex:none;border:0;border-radius:8px;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;cursor:pointer}.lesson-bar-mid{flex:1;min-width:0}.lesson-bar-steps{display:flex;gap:4px}.lesson-bar-steps i{flex:1;height:6px;border-radius:2px;background:var(--surface-2);transition:background .3s}.lesson-bar-steps i[data-on=true]{background:var(--brand)}.lesson-bar-label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-top:4px}.exit-sheet{padding-top:22px}.exit-art{width:150px;margin:0 auto}.btn-plain:after{display:none!important}.btn-plain{justify-content:center}.g-card{background:var(--surface);border-radius:18px;padding:16px;box-shadow:var(--shadow-lg)}.g-card-lead{font-size:13px;font-weight:700;color:var(--purple);margin:0 0 8px}.g-card-body .g-statement{background:transparent;padding:0}.g-card-body .g-say{font-size:21px}.g-stamp{top:-14px;right:14px;left:auto!important;transform:rotate(6deg)!important;background:var(--surface)}.g-zone{display:grid;place-items:center;padding:0}.g-zone-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%}.g-zone-in svg{display:block}.g-zone-in span{line-height:1}.g-check{margin-top:12px}.g-slot.filled{border-color:transparent;background:transparent;padding:0}.g-slot.filled .g-placed{width:100%;height:100%;display:grid;place-items:center}.g-piece .g-grip,.g-drag-hint{display:none}.g-intro{margin-bottom:12px}.g-piece-scene.right{box-shadow:inset 0 0 0 3px var(--green)}.g-piece-scene.wrong{box-shadow:inset 0 0 0 3px var(--coral)}.g-piece-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.g-piece-art{display:grid;place-items:center;min-height:64px}.g-sort-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}.g-sort-col{border:0;border-radius:14px;background:var(--surface-2);padding:10px;min-height:92px;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left}.g-sort-col[disabled]{cursor:default}.g-sort-name{font-weight:800;font-size:14px}.g-sort-col.right .g-sort-name{text-align:right}.g-sort-pile{display:flex;flex-wrap:wrap;gap:4px}.g-sort-chip{width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--surface);display:grid;place-items:center}.g-sort-chip>*{transform:scale(.42);transform-origin:center}.g-sort-chip.right{box-shadow:inset 0 0 0 2.5px var(--green)}.g-sort-chip.wrong{box-shadow:inset 0 0 0 2.5px var(--coral)}.g-sort-card{position:relative;margin:14px auto 0;width:78%;min-height:190px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg);display:grid;place-items:center;padding:14px;cursor:grab;user-select:none;-webkit-user-select:none}.g-sort-count{position:absolute;right:10px;top:8px;font-size:11px;font-weight:800;color:var(--ink-2)}.g-match{display:grid;grid-template-columns:1fr 1fr;gap:8px}.g-match-col{display:flex;flex-direction:column;gap:8px}.g-match-cell{min-height:66px;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--surface-2);font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:6px}.g-match-cell.sel{box-shadow:inset 0 0 0 2.5px var(--ink)}.g-match-cell.done{background:var(--green-tint);box-shadow:inset 0 0 0 2px var(--green)}.g-match-cell.bad{animation:shake .38s;box-shadow:inset 0 0 0 2.5px var(--coral)}.g-kern-stage{position:relative;height:150px;border-radius:14px;background:#22303c;display:grid;place-items:center;overflow:hidden}.g-kern-word{font-weight:700;font-size:60px;line-height:1;white-space:nowrap;letter-spacing:0}.g-kern-ghost{position:absolute;inset:0;display:grid;place-items:center;opacity:.85;mix-blend-mode:screen}.g-kern-range{width:100%;margin-top:16px;accent-color:var(--brand)}.g-kern-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2)}.g-kern-score{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.g-kern-score .num{font-size:34px}.g-kern-score small{font-size:16px;color:var(--ink-2)}.g-wheel-context{margin-bottom:12px}.g-wheel{position:relative;width:min(78vw,260px);aspect-ratio:1;margin:6px auto 0;touch-action:none;cursor:pointer}.g-wheel-ring{position:absolute;inset:0;border-radius:50%}.g-wheel-hole{position:absolute;inset:14%;border-radius:50%;background:var(--bg)}.g-wheel-mid{position:absolute;inset:30%;border-radius:50%;overflow:hidden;display:flex;box-shadow:var(--shadow)}.g-wheel-mid span{flex:1}.g-wheel-knob{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--ink);pointer-events:none}.g-rotate{display:flex;flex-direction:column;gap:12px;align-items:center}.g-rotate-goal{display:flex;align-items:center;gap:10px;align-self:flex-end}.g-rotate-grid{display:grid;gap:4px;width:min(78vw,270px)}.g-rotate-grid.small{width:66px;gap:2px}.g-rotate-grid.small span{aspect-ratio:1;border-radius:2px;overflow:hidden;display:block}.g-rotate-tile{aspect-ratio:1;border:0;border-radius:8px;overflow:hidden;padding:0;cursor:pointer}.g-rotate-tile>span{display:block;width:100%;height:100%;transition:transform .26s var(--spring)}.warmup-card{display:flex;gap:12px;align-items:center;background:#2b2f6b;color:#fff;border-radius:14px;padding:14px}.warmup-art{width:56px;height:56px;flex:none}.warmup-title{display:block;font-family:var(--font-display);font-size:19px;color:#fff}.warmup-text{display:block;font-size:14px;line-height:1.45;opacity:.92;margin-top:2px}.concept2-wrap{display:flex;flex-direction:column;gap:12px}.concept2{position:relative;overflow:hidden;border-radius:14px;background:var(--accent, var(--green));color:#fff;padding:16px 16px 18px}.concept2-motif{position:absolute;right:-14px;bottom:-16px;width:110px;opacity:.9}.concept2-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8}.concept2-title{font-family:var(--font-display);font-size:24px;line-height:1.15;margin-top:4px;max-width:80%}.concept2-def{font-size:15px;line-height:1.5;margin-top:8px;max-width:74%;position:relative}.concept2-def p{margin:0}.concept2-example{border-radius:14px;background:var(--surface);box-shadow:var(--shadow);padding:12px}.concept2-more p{margin:0}.g-spot-scene{cursor:pointer}.g-spot-scene .g-spot{pointer-events:none}.g-spot:focus-visible{box-shadow:0 0 0 3px var(--ink)}.g-spot.is-shape.right,.g-spot.is-shape.wrong{box-shadow:none;background:transparent}.g-spot-scene [data-spot][data-state=right]:not(text){stroke:var(--green);stroke-width:5px;paint-order:stroke}.g-spot-scene [data-spot][data-state=wrong]:not(text){stroke:var(--coral);stroke-width:5px;paint-order:stroke}.g-spot-scene [data-spot][data-state=dim]{opacity:.55;transition:opacity .24s}.stage-tools{position:absolute;top:9px;right:10px;z-index:6;display:flex;gap:6px}.stage-tool{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:8px;background:#fffdfbf0;color:var(--ink);font:700 12px/1 var(--font-body);cursor:pointer}.stage-tool[aria-pressed=true]{background:var(--ink);color:#fffdfb}.inspect{position:absolute;inset:0;pointer-events:none;z-index:4}.inspect-grid{position:absolute;overflow:hidden;border-radius:10px}.inspect-grid span{position:absolute;top:0;bottom:0;background:#9b56da1a;border-left:1px solid rgba(155,86,218,.55);border-right:1px solid rgba(155,86,218,.55)}.inspect-mark{position:absolute;border:1.5px dashed rgba(187,38,73,.75);border-radius:4px}.inspect-rank{position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fffdfb;font:700 10px/18px var(--font-body);text-align:center;font-style:normal}.inspect-size{position:absolute;right:-6px;top:-9px;background:#fffdfb;color:var(--brand);border:1.5px solid var(--brand);border-radius:4px;font:700 10px/1 var(--font-body);padding:2px 4px;font-style:normal}.yf-poster{position:relative;aspect-ratio:2 / 3;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:inset 0 0 0 1px #1f1b1a14}.yf-poster-deco{display:block;width:100%;flex:none}.yf-poster-text{flex:1;display:flex;flex-direction:column;padding:8px 10px 10px;min-height:0}.g-pick .g-opt-art .yf-poster{width:100%}.g-hole{position:relative;width:100%;height:100%;min-height:34px;margin:6px 0;display:flex;align-items:center}.g-hole.empty{border:2px dashed var(--brand);border-radius:8px;background:repeating-linear-gradient(135deg,rgba(187,38,73,.06) 0 8px,transparent 8px 16px)}.g-hole.empty:after{content:"?";margin:auto;font:800 18px/1 var(--font-display);color:var(--brand)}.g-hole:not(.empty){animation:pop-in .38s var(--spring)}.g-sort-text{display:inline-block;padding:14px 18px;font:700 16px/1.2 var(--font-body);color:var(--ink)}.g-piece-art>svg{height:80px;width:auto}.g-hole>svg{height:100%;width:100%}.g-opt,.g-opt-art{min-width:0}.g-pick{grid-auto-columns:minmax(0,1fr)}.fb-obs{font-size:14.5px;line-height:1.45;color:var(--ink);margin-top:6px}.fb-tip{font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:4px;padding-left:10px;border-left:3px solid var(--brand)}.fb-why{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:6px}.fb-more{margin-top:6px;border:0;background:none;padding:0;font:600 13px/1.3 var(--font-body);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.ex-pair,.ex-three{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ex-three{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-pair figure,.ex-three figure{margin:0;min-width:0}.ex-frame{border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px #1f1b1a1a}.ex-box{padding:12px;overflow:hidden}.ex-pair figcaption,.ex-three figcaption{margin-top:6px;font:600 12.5px/1.3 var(--font-body);color:var(--ink-2);text-align:center}.ex-pair figcaption.good{color:var(--ink)}.ex-pair figcaption.good:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:6px;vertical-align:1px}.ex-sw{display:flex;flex-wrap:wrap;gap:5px;padding:12px;background:#fffdf8;min-height:64px;align-content:center;justify-content:center}.ex-sw i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1px #1f1b1a1f}.ex-strips{display:grid;gap:10px}.ex-strips p{font:600 12.5px/1.3 var(--font-body);color:var(--ink-2);margin-bottom:4px}.ex-strips span{display:flex;gap:4px}.ex-strips i{flex:1;height:26px;border-radius:6px}.ex-6030{display:flex;height:54px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px #1f1b1a1a}.ex-6030 span{display:grid;place-items:center;font:700 12px/1 var(--font-body);color:var(--ink)}.lib-books{margin-top:18px;display:grid;gap:10px}.lib-book{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--surface-2)}.lib-book img{width:52px;height:66px;object-fit:cover;border-radius:4px;box-shadow:0 2px 6px #1f1b1a2e;flex:none}.lib-book b{display:block;font-size:14.5px;line-height:1.3}.lib-book span span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}.ob-logo+.ob-art.ob-art-bleed,.ob-art.ob-art-bleed{margin:6px calc(var(--gutter) * -1) 4px}.name-slide svg{display:block;width:100%;height:auto;overflow:visible}.name-slide svg *{transform-box:view-box}.ob-piece-line{color:var(--brand);text-align:center;font-size:28px;line-height:1.15;max-width:22ch;margin:8px auto 0;animation:fade-up .6s var(--ease-out) both .2s}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.ob-piece-line{animation:fade-in .6s both}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.g-opt.sel{box-shadow:inset 0 0 0 3px var(--ink);background:var(--surface)}.g-spot.sel{box-shadow:0 0 0 3px var(--ink);background:#1f1b1a0f}.g-spot.is-shape.sel{box-shadow:none;background:transparent}.g-spot-scene [data-spot][data-state=sel]:not(text){stroke:var(--ink);stroke-width:5px;paint-order:stroke}.g-pick+.g-check,.g-piece-opts+.g-check,.g-spot-scene+.g-check{margin-top:12px}.g-answer{margin:-2px 0 6px;color:var(--ink)}.g-zone.hot{border-style:solid}.g-zone.no.hot{background:var(--coral-tint);border-color:var(--coral)}.g-zone.yes.hot{background:var(--green-tint);border-color:var(--green)}.g-zone.right{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;opacity:1!important}.g-zone.wrong{background:var(--coral)!important;border-color:var(--coral)!important;color:#fff!important;opacity:1!important}.g-zone.right svg *,.g-zone.wrong svg *{fill:#fff}.g-sort-col{transition:transform .16s var(--ease-out),box-shadow .16s,background .16s;box-shadow:inset 0 0 0 calc(var(--lean, 0) * 3px) var(--ink);transform:scale(calc(1 + var(--lean, 0) * .03))}.g-sort-col.hot{background:var(--surface)}@media(prefers-reduced-motion:reduce){.g-sort-col{transform:none}}.g-sort-pile{display:flex;flex-wrap:wrap;gap:6px}.g-sort-chip{width:56px;height:72px;padding:0;border:0;position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px var(--muted)}.g-sort-chip>*{transform:none}.g-sort-thumb{position:absolute;left:0;top:0;width:280px;transform:scale(.2);transform-origin:0 0;pointer-events:none}.g-match-cell{position:relative}.g-match-cell.linked{box-shadow:inset 0 0 0 3px var(--pair);background:color-mix(in srgb,var(--pair) 10%,var(--surface))}.g-match-num{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:6px;background:var(--pair);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}.g-match-cell.right{box-shadow:inset 0 0 0 3px var(--green)}.g-match-cell.wrong{box-shadow:inset 0 0 0 3px var(--coral)}.btn-more.btn-less{position:sticky;top:calc(var(--safe-t) + 8px);z-index:3;align-self:flex-start;background:var(--surface);box-shadow:var(--shadow)}.splash.splash-v3,.splash.splash-v3.go{animation:none}.splash-v3 .splash-logo{width:min(74vw,330px)}.splash-v3 .splash-logo *{transform-box:view-box;transform-origin:0 0}.flowers{margin:10px calc(var(--gutter) * -1) 0;height:190px;position:relative}.flowers svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.flowers svg *{transform-box:view-box;transform-origin:0 0}.profile-card.v3{position:relative;overflow:visible;display:flow-root;border-radius:var(--r-xl);background:var(--butter-tint);padding:0 16px 16px;margin-top:70px}.profile-card.v3 .profile-art{display:block;margin-top:-62px}.profile-card.v3 .profile-art svg{max-height:220px;width:100%;margin:0 auto;display:block}.profile-card.v3 .profile-id{display:flex;align-items:flex-start;gap:12px;margin-top:4px;position:relative;z-index:2}.profile-card.v3 .avatar-lg i svg path{stroke:var(--ink);stroke-width:4;paint-order:stroke}.profile-card.v3 .profile-id .avatar-lg{margin-top:-40px}.profile-card.v3 .avatar-lg{width:68px;height:68px;font-size:26px;flex:none;background:var(--purple);border-radius:18px;box-shadow:0 0 0 4px var(--butter-tint);transform:rotate(-6deg)}.profile-card.v3 .avatar-lg>:not(i){transform:rotate(6deg)}.profile-card.v3 .avatar-lg i{position:absolute;right:-7px;top:-9px;display:block;line-height:0}.profile-name{flex:1;min-width:0;padding-top:2px}.profile-name .display{font-size:24px;line-height:1.15;overflow-wrap:anywhere}.profile-name-form{display:flex;gap:8px;flex:1;min-width:0}.stat-n{font-size:30px;margin:0}.stat-n span{font-size:16px;color:var(--ink-2);font-weight:600}.login-card{margin-top:12px}.login-stack{display:grid;gap:8px;margin-top:12px}.login-btn{width:100%;justify-content:center;gap:10px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);min-height:48px;font-weight:700}.login-btn svg{flex:none}.skill-strips{display:grid;gap:10px}.skill-strip{border:0;border-radius:16px;padding:14px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"head count" "cells cells";gap:10px 8px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}.skill-strip-head{grid-area:head;display:flex;flex-direction:column;gap:2px}.skill-strip-count{grid-area:count;font-size:13px;font-weight:700;align-self:start}.skill-strip-cells{grid-area:cells;display:flex;gap:6px}.skill-strip-cells i{flex:1;height:12px;border-radius:4px;background:#0000001a}.soon-tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--ink);color:#fff}.plan-list{margin:10px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px}.plan-card .pill-now,.term-card .term-en{color:var(--ink)}.greet-line{margin:12px 0;font-size:16px;font-weight:600;color:var(--ink-2)}.hero2{display:flex;flex-direction:column;border-radius:var(--r-xl);padding:16px;overflow:hidden}.hero2-art{display:block;width:100%}.hero2-art>*{width:100%;height:auto;display:block}.hero2-art svg{width:100%;height:auto;display:block}.hero2-body{display:flex;flex-direction:column;min-width:0;margin-top:16px}.hero2-meta{margin:0;font-size:14px;color:var(--ink-2)}.hero2-title{margin:4px 0 0;font-size:28px;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}.hero2-cta{margin-top:20px;width:100%;text-decoration:none}.stage-line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-top:12px;padding:14px 16px;min-height:44px;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);text-decoration:none}.stage-line-txt{font-size:15px;font-variant-numeric:tabular-nums}.stage-line-txt b{font-weight:700}.stage-line .link-more{justify-self:end}.stage-line-bar{grid-column:1 / -1;display:block}.stage-line:focus-visible,.hero2-cta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.stage-line:active{transform:scale(.99)}.avatar-chip i{width:auto;height:auto;background:none;border-radius:0;transform:none;box-shadow:none;right:-6px;top:-8px;line-height:0}.avatar-chip i svg path{stroke:var(--bg);stroke-width:6;paint-order:stroke}.bottom-nav a:not([aria-current=page]){flex-direction:column;gap:2px;padding:4px 2px}.bottom-nav a:not([aria-current=page]) span{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:nowrap;margin:0;font-size:10.5px;font-weight:600;line-height:1.1}.hero2-art svg{max-height:220px}.stage-line .stage-line-txt{grid-row:1;grid-column:1}.stage-line .link-more{grid-row:1;grid-column:2}.stage-line .stage-line-bar{grid-row:2}.bottom-nav a[aria-current=page]{white-space:nowrap;padding:0 12px;flex:1.7}.bottom-nav a[aria-current=page] span{white-space:nowrap}.bottom-nav a{min-width:0}@media(max-width:360px){.bottom-nav a[aria-current=page]{flex:1.5;padding:0 8px;gap:6px;font-size:12px}.bottom-nav a:not([aria-current=page]) span{font-size:9.5px}}.bottom-nav a svg{flex:none}@media(max-width:360px){.bottom-nav a[aria-current=page]{flex:1.8;padding:0 6px}}@media(max-width:360px){.bottom-nav a[aria-current=page]{flex:1.25;flex-direction:column;gap:2px;padding:4px}.bottom-nav a[aria-current=page] span{font-size:10.5px}}.skill-strip-cells i{background:transparent;border:1.5px dashed rgba(26,26,26,.45)}.skill-strip-cells i[style]{border-color:transparent}.soon-tag{white-space:nowrap}@media(max-height:600px){.ob-art{margin-top:12px}.ob-points{margin-top:10px}}@media(max-height:600px){.ob-cta{position:sticky;bottom:0;z-index:2;padding-bottom:12px;background:linear-gradient(to bottom,transparent,var(--bg) 22px)}}.ob-cta{position:sticky;bottom:0;z-index:2;padding-bottom:12px;background:linear-gradient(to bottom,transparent,var(--bg) 22px)}.lib-more{margin-top:14px}.area-hero .art svg,.topic-banner .art svg{overflow:hidden}.login-card{padding:0;overflow:hidden}.login-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer;font:inherit}.login-toggle-txt{flex:1;display:grid;gap:2px}.login-toggle-txt b{font-size:16px}.login-toggle svg{transform:rotate(90deg);transition:transform .2s ease}.login-card.open .login-toggle svg{transform:rotate(-90deg)}.login-card .login-stack{padding:0 16px 16px;margin-top:0}.skill-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.skill-badge{display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;border:0;border-radius:var(--r-lg, 16px);color:var(--ink);cursor:pointer;font:inherit}.skill-badge-name{font-weight:700;font-size:13.5px;text-align:center;line-height:1.2}.skill-badge-count{font-size:13px;color:var(--ink-2)}.profile-card.v4{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--butter-tint);padding:0;margin-top:8px}.profile-card.v4 .profile-cover{line-height:0}.profile-card.v4 .profile-cover .art svg{width:100%;height:auto;display:block;overflow:hidden}.profile-card.v4 .profile-id{display:flex;align-items:flex-start;gap:12px;padding:0 16px 16px;position:relative;z-index:2}.profile-card.v4 .avatar-lg{width:72px;height:72px;font-size:26px;margin-top:-36px;flex:none;box-shadow:0 0 0 4px var(--butter-tint);border-radius:18px}.profile-card.v4 .avatar-lg i svg path{stroke:var(--ink);stroke-width:4;paint-order:stroke}.profile-card.v4 .profile-name,.profile-card.v4 .profile-name-form{padding-top:12px}.ob-title-3l{font-size:min(32px,8vw)!important}.option[aria-pressed=true] .box.has-flower{background:none;border-color:transparent;animation:none;overflow:visible;position:relative}.tick-flower{overflow:visible;display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.tick-flower-g{transform-box:fill-box;transform-origin:center;animation:tick-bloom .38s cubic-bezier(.3,1.5,.5,1) both}@keyframes tick-bloom{0%{transform:scale(.2) rotate(-60deg);opacity:0}60%{transform:scale(1.15) rotate(6deg);opacity:1}to{transform:scale(1) rotate(0)}}html[data-motion=reduce] .tick-flower-g{animation:none}@media(prefers-reduced-motion:reduce){.tick-flower-g{animation:none}}.role-count{font-size:13px;color:var(--ink-2);font-weight:600}.role-tabs{display:grid;gap:8px}.role-tab{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:10px;border:0;border-radius:14px;cursor:pointer;text-align:left;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--muted);transition:box-shadow .15s ease,transform .15s ease}.role-tab[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--ink)}.role-tab:active{transform:scale(.97)}.role-chip{width:100%;height:22px;border-radius:7px;background:repeating-linear-gradient(-45deg,var(--surface-2) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1px #1f1b1a24}.role-name{font-size:13px;font-weight:700;line-height:1.2;color:var(--ink)}.role-tabs .role-val{font-size:11px;white-space:normal;overflow:visible}.role-val{font-size:12px;line-height:1.2;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.role-tab:not(.has) .role-val{font-style:italic}.role-panel{margin-top:12px;padding:12px;border-radius:16px;background:var(--surface-2)}.role-hint{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ink-2)}.role-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.role-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;min-width:0}.role-swatch-fill{width:100%;aspect-ratio:1;border-radius:14px;box-shadow:inset 0 0 0 1px #1f1b1a24;transition:transform .15s ease}.role-swatch[aria-pressed=true] .role-swatch-fill{box-shadow:inset 0 0 0 1px #1f1b1a24,0 0 0 2px var(--surface-2),0 0 0 3.5px var(--ink)}.role-swatch:active .role-swatch-fill{transform:scale(.94)}.role-swatch-name{font-size:12px;line-height:1.2;color:var(--ink-2);text-align:center;max-width:100%}.role-swatch[aria-pressed=true] .role-swatch-name{color:var(--ink);font-weight:700}.g-ab-crit{display:flex;gap:8px;align-items:baseline;margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--ink)}.g-ab-crit span{flex:none;padding:2px 8px;border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:700;color:var(--ink-2)}.g-ab-var{margin:2px 0 8px;color:var(--ink-2)}.g-ab-frame{width:100%;display:flex;overflow:hidden;border-radius:10px}.g-ab-frame>*{flex:1;min-width:0}.teach-card{background:var(--surface);border-radius:22px;padding:18px;box-shadow:var(--shadow)}.teach-eyebrow{margin:0;font:700 11.5px/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}.teach-head{display:flex;gap:14px;align-items:center;margin:10px 0 14px}.teach-title{margin:0;font:800 22px/1.15 var(--font-body);color:var(--ink)}.teach-sub{margin:2px 0 0;font:600 13.5px/1.3 var(--font-body);color:var(--ink-2)}.teach-lead{margin:6px 0 0;font:400 15px/1.45 var(--font-body);color:var(--ink)}.teach-visual{border-radius:12px;overflow:hidden}.teach-plus-h{margin:14px 0 4px;font:700 14px var(--font-body)}.teach-plus{margin:0;padding-left:20px;font:400 15px/1.5 var(--font-body);color:var(--ink)}.teach-src{margin:10px 0 0;font:400 12px/1.4 var(--font-body);color:var(--ink-2)}.teach-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}.teach-dots span{width:7px;height:7px;border-radius:4px;background:var(--muted);transition:width .2s}.teach-dots span[data-on]{width:18px;background:var(--ink)}.rel4-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rel4-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--muted);cursor:pointer;text-align:left;min-width:0}.rel4-card[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}.rel4-card span:last-child{display:flex;flex-direction:column;min-width:0}.rel4-card b{font:700 12.5px/1.2 var(--font-body);overflow-wrap:normal;word-break:keep-all;letter-spacing:-.01em}.rel4-card small{font:500 12px/1.2 var(--font-body);color:var(--ink-2)}.msg-state{font:600 11.5px var(--font-body);color:var(--ink-2);background:var(--surface-2);padding:3px 8px;border-radius:999px}.msg-state.done{color:var(--ink);background:#e5f4e4}.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pal-opt{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:8px;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--muted);cursor:pointer;font:600 12.5px/1.2 var(--font-body);text-align:left}.pal-opt[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}.pal-strip{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f}.pal-strip span{flex:1}.xem-them-list{margin:0;padding-left:20px;display:grid;gap:8px;font:400 15px/1.55 var(--font-body);color:var(--ink)}.lib-example{margin:20px 0 0}.lib-example-art{margin-top:8px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:200 / 140;background:var(--surface);box-shadow:inset 0 0 0 1px var(--surface-2)}.lib-example-art svg{display:block;width:100%;height:100%}.lib-example figcaption{margin-top:8px;color:var(--ink-2)}.lib-tips{display:grid;gap:10px;margin-top:20px}.lib-tip{padding:12px 14px;border-radius:var(--r-md)}.lib-tip p:last-child{margin-top:4px;line-height:1.5}.lib-tip-bad{background:var(--coral-tint, #FDE6DF)}.lib-tip-good{background:var(--green-tint)}.lib-more{margin-top:20px}.rv-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rv-pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--surface-2);font:600 13px var(--font-body);color:var(--ink);cursor:pointer}.rv-pick[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}.rv-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rv-thumbs>div{background:#fff;border-radius:10px;height:78px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px var(--surface-2)}.rv-thumbs>div>*{max-width:100%}.rv-skill{border-radius:14px;padding:10px 12px}.rv-skill-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.rv-skill-head span{font-size:12px;font-weight:700;white-space:nowrap}.rv-skill p{font-size:13px;line-height:1.5;margin-top:4px}.rv-relearn{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--ink)}.cm-hsb{display:flex;gap:16px;align-items:center;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}.cm-swatch{width:84px;height:84px;border-radius:16px;flex:none;box-shadow:inset 0 0 0 1px #0000000f}.cm-rows{flex:1;display:grid;gap:10px;min-width:0}.cm-row{display:grid;gap:5px;opacity:.5;transition:opacity .5s}.cm-row[data-on="1"]{opacity:1}.cm-label{font-size:12px;font-weight:700;color:var(--ink)}.cm-track{position:relative;height:8px;border-radius:99px;display:block}.cm-track i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px #00000040}.cm-lemon{margin:0;background:var(--surface);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow)}.cm-lemon figcaption{font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:10px}.co-slot .co-slot-text{opacity:0;transition:opacity .25s}.co-slot[data-state] .co-slot-text{opacity:1}.co-slot[data-state] .co-slot-tag{opacity:0}.co-slot[data-state=dim] .co-slot-text{opacity:.7}.co-toggles{display:grid;gap:6px;margin-top:12px}.co-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:var(--surface-2);border-radius:12px;padding:10px 12px;font:600 14px var(--font-body);color:var(--ink);cursor:pointer}.co-toggle-ui{width:40px;height:24px;border-radius:12px;background:#d9d2ca;position:relative;transition:background .2s;flex:none}.co-toggle-ui i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.co-toggle-ui[data-on]{background:var(--ink)}.co-toggle-ui[data-on] i{transform:translate(16px)}.co-ticks{margin:8px 0 0;padding-left:0;list-style:none;display:grid;gap:4px}.co-ticks li{position:relative;padding-left:24px}.co-ticks li:before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border:1.5px solid var(--ink-2);border-radius:4px}.g-spot-scene g[data-spot][data-state]{stroke:none}.g-spot-scene g[data-spot][data-state]>rect:first-child{stroke-width:2.5px;stroke-dasharray:none}.g-spot-scene g[data-spot][data-state=sel]>rect:first-child{stroke:var(--ink)}.g-spot-scene g[data-spot][data-state=right]>rect:first-child{stroke:var(--green)}.g-spot-scene g[data-spot][data-state=wrong]>rect:first-child{stroke:var(--coral)}.g-spot-scene g.co-slot[data-state=dim]{opacity:1}.cm-comp{margin:0;background:var(--surface);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow)}.cm-comp-art{border-radius:10px;overflow:hidden;max-width:320px;margin:0 auto}.cm-comp figcaption{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:13px;line-height:1.4;color:var(--ink-3, #8A8F98)}.cm-comp figcaption span{transition:color .3s,font-weight .3s}.cm-comp figcaption span[data-on]{color:var(--ink);font-weight:700}.cm-comp figcaption span.good[data-on]{color:#17804f}.cm-comp figcaption i{font-style:normal}.control-head output{display:inline-block;transition:transform .16s var(--spring, ease),font-weight .16s;transform-origin:right center}.control:has(input[type=range]:active) .control-head output{font-weight:800;transform:scale(1.18)}.ctl-actions{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-top:16px}.ctl-actions .btn{margin:0}.g-review{margin-top:16px;background:var(--surface);border-radius:14px;padding:12px 14px}.g-review-grid{display:grid;gap:8px;margin-top:8px}.g-review-row{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line, #ECE7E1)}.g-review-row:first-child{border-top:0}.g-review-row span{text-align:right}.g-review-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;color:var(--blue, #2F5BD6)}.lib-example-art.free{aspect-ratio:auto;overflow:visible;background:transparent;box-shadow:none}.hero2-topic{border-radius:18px;overflow:hidden}.hero2-topic .art svg{width:100%;height:auto;display:block;max-height:none}.profile-card.v4 .avatar-lg{background:linear-gradient(135deg,#4c8ef7,#7e6deb);font:700 34px/1 var(--font-display);letter-spacing:-.02em;color:#fff;border-radius:20px}.profile-card.v4 .profile-id{align-items:flex-end;padding:0 16px 18px}.profile-card.v4 .profile-name{padding:0 0 2px;display:flex;flex-direction:column;gap:2px}.profile-card.v4 .profile-name .display{line-height:1.05;margin:0}.profile-card.v4 .profile-name .btn-link{min-height:24px!important;line-height:24px;text-align:left}.avatar-chip{background:linear-gradient(135deg,#4c8ef7,#7e6deb);transform:none;font:700 20px/1 var(--font-display);letter-spacing:-.02em}.avatar-chip .num{transform:none;font:inherit}.avatar-chip:active{transform:scale(.92)}.g-opt{position:relative}.g-opt.right{animation:ok-glow .52s ease-out both}@keyframes ok-glow{0%{box-shadow:inset 0 0 0 3px var(--green),0 0 #17804f47}to{box-shadow:inset 0 0 0 3px var(--green),0 0 0 6px #17804f00}}.g-opt.right:after{content:"";position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;z-index:3;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;animation:ok-tick .42s .12s cubic-bezier(.3,1.6,.5,1) both}@keyframes ok-tick{0%{transform:scale(0) rotate(-30deg)}to{transform:none}}.g-opt.right:before{content:"";position:absolute;right:19px;top:19px;width:6px;height:6px;border-radius:50%;z-index:2;animation:ok-bits .62s .22s ease-out both}@keyframes ok-bits{0%{box-shadow:0 0 #ffc93c,0 0 #3882f6,0 0 #9b56da,0 0 #ff6b4a;opacity:1}to{box-shadow:16px -22px 0 -1px #ffc93c,26px 4px 0 -1px #3882f6,-6px -28px 0 -1px #9b56da,-24px -10px 0 -1px #ff6b4a;opacity:0}}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}50%{transform:rotate(2.5deg)}75%{transform:rotate(-1deg)}}.g-opt.wrong{animation:shake .48s ease-in-out}.progress>span{position:relative;overflow:hidden;transition:width 1s cubic-bezier(.2,.8,.2,1)}.progress>span.grow:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translate(-100%);animation:pb-sweep .7s .35s ease-out both}@keyframes pb-sweep{to{transform:translate(100%)}}.btn{transition:transform .32s cubic-bezier(.3,1.6,.5,1)}.btn:active:not(:disabled){transform:scale(.95);transition-duration:80ms}.btn-halo{animation:btn-halo .52s ease-out}@keyframes btn-halo{0%{box-shadow:0 0 #bb264973}to{box-shadow:0 0 0 9px #bb264900}}.workspace>*{animation:step-in .38s cubic-bezier(.2,.8,.2,1) both}@keyframes step-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}.lesson-bar-steps i{background:linear-gradient(var(--brand),var(--brand)) left / 0% 100% no-repeat var(--surface-2);transition:background-size .45s cubic-bezier(.2,.8,.2,1)}.lesson-bar-steps i[data-on=true]{background:linear-gradient(var(--brand),var(--brand)) left / 100% 100% no-repeat var(--surface-2)}::view-transition-group(lib-hero){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}.lib-thumb.just-open:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,var(--blue),var(--purple));opacity:0;animation:unlock-flash .9s .35s both}@keyframes unlock-flash{0%{opacity:0}12%,70%{opacity:1}to{opacity:0}}.lib-thumb.just-open{animation:unlock-pop .9s .35s both}@keyframes unlock-pop{0%,to{transform:none}30%{transform:scale(1.05)}}.lib-thumb.just-open .lib-lock{z-index:2;animation:lock-out .9s .35s both}@keyframes lock-out{0%{transform:none;opacity:1}10%{transform:rotate(-9deg)}22%{transform:rotate(9deg)}33%{transform:none;opacity:1}70%{transform:translateY(-6px) rotate(-14deg);opacity:1}to{transform:translateY(-14px) scale(.6);opacity:0}}.bottom-nav a{position:relative;z-index:1}.bottom-nav a[aria-current=page]{background:transparent!important}.nav-pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:10px;background:var(--brand);z-index:0;opacity:0;pointer-events:none}.nav-pill.ready{transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}.toast{animation:toast-in .5s cubic-bezier(.3,1.5,.5,1) both}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.g-opt.right,.g-opt.right:after,.g-opt.right:before,.g-opt.wrong,.btn-halo,.workspace>*,.lib-thumb.just-open,.lib-thumb.just-open:before,.lib-thumb.just-open .lib-lock,.toast,.progress>span.grow:after{animation-duration:1ms!important;animation-delay:0ms!important}.progress>span,.nav-pill.ready,.btn,.lesson-bar-steps i{transition:none!important}}.lh-wrap svg{width:100%;height:auto;display:block;overflow:hidden}.lh .lh-beam{animation:lh-front 6s infinite}.lh .lh-beam-b{animation:lh-back 6s infinite}@keyframes lh-front{0%{transform:scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.45,0,1,1)}25%{transform:scaleX(0);opacity:1}75%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(0,0,.55,1)}to{transform:scaleX(1);opacity:1}}@keyframes lh-back{0%,25%{transform:scaleX(0);animation-timing-function:cubic-bezier(0,0,.55,1)}50%{transform:scaleX(1);animation-timing-function:cubic-bezier(.45,0,1,1)}75%,to{transform:scaleX(0)}}.lh .lh-halo{opacity:.3}.lh .lh-rays{animation:lh-rays 6s infinite}@keyframes lh-rays{0%,17%,33%,to{opacity:0;transform:scale(.6) rotate(0)}22%{opacity:1;transform:scale(1) rotate(10deg)}28%{opacity:.9;transform:scale(1.15) rotate(18deg)}}.lh .lh-flower{animation:lh-turn 10s linear infinite}@keyframes lh-turn{to{transform:rotate(360deg)}}.lh .lh-spark{animation:lh-bob 3s ease-in-out infinite}@keyframes lh-bob{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.08)}}.lh .lh-dia{animation:lh-dia 6s infinite}@keyframes lh-halo{0%,15%,35%,to{transform:scale(1);opacity:.35}25%{transform:scale(2.2);opacity:.75}}@keyframes lh-dia{0%,15%,35%,to{transform:scale(1)}25%{transform:scale(1.35)}}@media(prefers-reduced-motion:reduce){.lh .lh-beam,.lh .lh-beam-b,.lh .lh-halo,.lh .lh-dia,.lh .lh-rays,.lh .lh-flower,.lh .lh-spark{animation:none}.lh .lh-beam-b{transform:scaleX(0)}}