:root{--bg:#0b0f1a;--card:#121829;--card-edge:#232c45;--inset:#0d1322;--chip:#1a2138;--chip-edge:#26304e;--text:#edf1fa;--soft:#b9c4dd;--muted:#9fb0d6;--faint:#8fa0c4;--amber:#ffc861;--blue:#6ea8ff;--blue-deep:#3f6fe8}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}.glow{filter:blur(70px);opacity:.32;pointer-events:none;z-index:0;border-radius:50%;position:fixed}.glow-a{background:radial-gradient(circle,#274690,#0000 70%);width:480px;height:480px;top:-180px;left:-160px}.glow-b{background:radial-gradient(circle,#6b4b16,#0000 70%);width:520px;height:520px;top:220px;right:-200px}.wrap{z-index:1;max-width:780px;margin:0 auto;padding:28px 20px 56px;position:relative}.hero{padding:6px 2px 4px;animation:.55s both rise}.kicker{text-transform:uppercase;letter-spacing:.14em;color:var(--amber);align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:700;display:flex}.spark{flex:none;animation:14s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}h1{letter-spacing:-.02em;color:#f2f5fc;margin:0 0 12px;font-size:clamp(26px,4.6vw,40px);font-weight:800;line-height:1.14}.accent{color:var(--amber)}.sub{color:var(--soft);max-width:62ch;margin:0;font-size:16.5px}.loop{flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;display:flex}.loop-step{color:var(--soft);background:var(--chip);border:1px solid var(--chip-edge);border-radius:999px;align-items:center;gap:8px;padding:6px 14px 6px 6px;font-size:13.5px;font-weight:600;display:inline-flex}.loop-step i{background:var(--amber);color:#201403;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12.5px;font-style:normal;font-weight:800;display:inline-flex}.loop-arrow{color:var(--muted);font-weight:700}.card{background:var(--card);border:1px solid var(--card-edge);border-radius:16px;margin-top:16px;padding:18px 20px;animation:.55s both rise;box-shadow:0 10px 30px #00000059}.sentence-card{animation-delay:50ms}.bars-card{animation-delay:.12s}.temp-card{animation-delay:.19s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.card-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.label{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:11.5px;font-weight:700}.chip-label{color:var(--muted);background:var(--inset);border:1px solid var(--card-edge);white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:999px;padding:3px 10px;font-size:12.5px}.sentence{min-height:84px;font-size:18px;line-height:2.05}.chip{background:var(--chip);border:1px solid var(--chip-edge);color:var(--text);border-radius:9px;padding:2px 9px;font-weight:600;display:inline-block}.chip.pop{animation:.55s cubic-bezier(.34,1.56,.64,1) both pop,1.4s both flash}@keyframes pop{0%{opacity:0;transform:translateY(16px)scale(.7)}60%{opacity:1;transform:translateY(-3px)scale(1.06)}to{opacity:1;transform:none}}@keyframes flash{0%{border-color:var(--amber);background:#ffc86173}to{background:var(--chip);border-color:var(--chip-edge)}}.caret{vertical-align:-4px;background:var(--amber);border-radius:3px;width:11px;height:22px;margin-left:4px;animation:1.05s steps(2,start) infinite blink;display:inline-block}@keyframes blink{to{visibility:hidden}}.sentence.done .chip{animation:1s both doneFlash;animation-delay:calc(var(--i) * 70ms)}@keyframes doneFlash{0%{background:var(--chip);border-color:var(--chip-edge)}40%{border-color:var(--amber);background:#ffc8616b}to{background:var(--chip);border-color:var(--chip-edge)}}.progress{background:var(--inset);border:1px solid var(--card-edge);border-radius:999px;height:6px;margin:12px 0 4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--blue-deep), var(--amber));border-radius:999px;width:0%;height:100%;transition:width .45s}.caption{min-height:50px;color:var(--soft);margin:10px 0 0;font-size:15.5px}.caption.anim{animation:.45s both capIn}@keyframes capIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.bars{min-height:208px}.row{border-radius:10px;align-items:center;gap:10px;padding:6px 0;transition:background .2s;display:flex}.row:hover{background:#6ea8ff0f}.tok{color:#e9eefb;white-space:nowrap;text-overflow:ellipsis;flex:0 0 96px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:15.5px;font-weight:700;overflow:hidden}.row.lead .tok{color:var(--amber)}.track{background-color:var(--inset);background-image:repeating-linear-gradient(90deg,#0000 0 calc(25% - 1px),#9fb0d624 calc(25% - 1px) 25%);border:1px solid #202a44;border-radius:8px;flex:1;min-width:0;height:26px;position:relative;overflow:hidden}.fill{background:linear-gradient(90deg, var(--blue-deep), var(--blue));will-change:width;border-radius:8px;width:0%;transition:width .55s cubic-bezier(.22,.9,.32,1);position:absolute;top:0;bottom:0;left:0}.row.lead .fill{background:linear-gradient(90deg, #d98f1a, var(--amber))}.pct{text-align:right;color:#cfe0ff;font-variant-numeric:tabular-nums;flex:0 0 64px;font-size:14.5px}.temp-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.temp-label{color:var(--text);font-size:15px;font-weight:700}.temp-out{color:var(--amber);font-variant-numeric:tabular-nums;background:var(--inset);border:1px solid var(--card-edge);border-radius:8px;padding:2px 10px;font-size:16px;font-weight:800}input[type=range]{width:100%;height:32px;accent-color:var(--amber);cursor:pointer;background:0 0;margin:6px 0 0}.temp-scale{color:var(--muted);justify-content:space-between;margin-top:2px;font-size:12.5px;display:flex}.temp-hint{min-height:24px;color:var(--soft);margin:10px 0 0;font-size:14.5px}.controls{flex-wrap:wrap;gap:10px;margin-top:16px;animation:.55s .24s both rise;display:flex}.btn{background:var(--chip);min-width:46px;min-height:46px;color:var(--text);cursor:pointer;border:1px solid #2a3552;border-radius:12px;padding:0 18px;font-family:inherit;font-size:15px;font-weight:700;transition:transform .12s,background .2s,border-color .2s}.btn:hover:not(:disabled){background:#222a46;border-color:#3a466e}.btn:active:not(:disabled){transform:translateY(1px)}.btn.primary{background:var(--amber);color:#201403;border-color:#0000}.btn.primary:hover:not(:disabled){background:#ffd07e}.btn.ghost{background:0 0}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.expert{margin-top:18px;animation:.55s .3s both rise}.expert-btn{border-style:dashed}.expert-panel{color:var(--soft);border-top:1px dashed #2a3552;margin-top:12px;padding-top:14px;font-size:14.5px;animation:.4s both capIn}.expert-panel p{margin:0 0 10px}.expert-panel b{color:var(--text)}.formula{background:var(--inset);border:1px solid var(--card-edge);color:#cfe0ff;border-radius:10px;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;overflow-x:auto}.ztable{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:14px}.ztable th{text-align:right;color:var(--muted);border-bottom:1px solid var(--card-edge);padding:6px 8px;font-weight:700}.ztable th:first-child{text-align:left}.ztable td{text-align:right;color:#cfe0ff;border-bottom:1px solid #1d2740;padding:6px 8px}.ztable td:first-child{text-align:left;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-weight:700}.foot{text-align:center;color:var(--faint);margin-top:30px;font-size:13px}.kbd-hint{color:var(--faint);margin:10px 2px 0;font-size:13px}@media (width>=1020px){.grid{grid-template-columns:1.06fr .94fr;align-items:start;gap:0 16px;display:grid}.sentence{min-height:172px}.caption{min-height:96px}h1{font-size:clamp(26px,3.4vw,36px)}}@media (width<=560px){.wrap{padding:16px 14px 44px}.hero{margin-bottom:-4px}h1{font-size:24px}.sub{font-size:15px}.loop{margin-top:12px}.card{border-radius:14px;padding:14px}.sentence{min-height:122px;font-size:15.5px;line-height:2.1}.caption{min-height:90px;font-size:14.5px}.tok{flex-basis:72px;font-size:13.5px}.pct{flex-basis:56px;font-size:13.5px}.bars{min-height:190px}.btn{padding:0 14px;font-size:14px}.controls .btn{flex:auto}.controls .btn.ghost{flex:0 0 46px;padding:0}.temp-scale span:nth-child(2){display:none}.loop-step{padding:5px 11px 5px 5px;font-size:12.5px}.kbd-hint{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}