@layer components{.tt-surface{--tt-hair: color-mix(in srgb, var(--color-text-heading) 8%, transparent);border-radius:28px;border:1px solid transparent;background:linear-gradient(var(--color-surface-card),var(--color-surface-card)) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--color-primary-400) 45%,transparent),var(--tt-hair) 38%,var(--tt-hair)) border-box;box-shadow:0 1px 1px #281c0c08,0 12px 24px -12px #3c230a1a,0 40px 80px -40px #3c230a38;transition:box-shadow .3s ease;isolation:isolate}.tt-surface:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(60% 45% at 50% 0%,color-mix(in srgb,var(--color-primary-400) 7%,transparent),transparent 70%)}.tt-surface.is-focused{box-shadow:0 0 0 5px color-mix(in srgb,var(--color-primary-500) 9%,transparent),0 12px 24px -12px #3c230a1a,0 40px 80px -40px #3c230a38}[data-theme=dark] .tt-surface{--tt-hair: rgba(255, 255, 255, .07);box-shadow:0 1px #ffffff0a inset,0 40px 80px -40px #000c}.tt-hairline{border-color:var(--tt-hair)}.tt-progress-track{position:absolute;inset:0 0 auto;height:2px;border-radius:28px 28px 0 0;overflow:hidden;z-index:1}.tt-progress-bar{height:100%;background:linear-gradient(90deg,transparent,var(--color-primary-500) 30%,var(--color-primary-400));transition:width .1s linear;box-shadow:0 0 10px #dd6b2c99}.tt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 14px 12px 12px;border-bottom:1px solid var(--tt-hair)}.tt-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--color-text-heading) 4.5%,transparent);overflow-x:auto;max-width:100%;scrollbar-width:none}.tt-seg::-webkit-scrollbar{display:none}.tt-seg>button{padding:6px 13px;font-size:13px;font-weight:600;border-radius:999px;letter-spacing:-.005em;color:var(--color-text-muted);white-space:nowrap;transition:color .15s,background .2s,box-shadow .2s;cursor:pointer;font-variant-numeric:tabular-nums}.tt-seg>button:hover{color:var(--color-text-heading)}.tt-seg>button.active{background:var(--color-text-heading);color:var(--color-surface-card);box-shadow:0 4px 12px -4px #17140f73}.tt-seg>button:disabled{opacity:.5;cursor:not-allowed}.tt-crumb{display:flex;align-items:center;gap:6px;min-width:0}.tt-crumb-select{appearance:none;background:transparent;border:0;padding:6px 22px 6px 8px;border-radius:10px;font-size:14px;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:color .15s,background .15s}.tt-crumb-select:hover{color:var(--color-text-heading);background:color-mix(in srgb,var(--color-text-heading) 4%,transparent)}.tt-crumb-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.tt-crumb-select option{background:var(--color-surface-card);color:var(--color-text-heading)}.tt-crumb-sep{color:var(--color-border-hover);font-weight:300;font-size:18px}.tt-passage-btn{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:6px 8px;border-radius:10px;font-size:14px;font-weight:650;color:var(--color-text-heading);transition:background .15s;cursor:pointer}.tt-passage-btn:hover,.tt-passage-btn[aria-expanded=true]{background:color-mix(in srgb,var(--color-text-heading) 5%,transparent)}.tt-passage-btn:disabled{cursor:default;background:none}.tt-passage-btn:disabled svg{display:none}.tt-ghost-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:var(--color-text-muted);transition:color .15s,background .15s,transform .2s;cursor:pointer}.tt-ghost-icon:hover,.tt-ghost-icon[aria-expanded=true]{color:var(--color-text-heading);background:color-mix(in srgb,var(--color-text-heading) 6%,transparent)}.tt-ghost-icon:disabled{opacity:.35;pointer-events:none}#tt-shuffle:hover{transform:rotate(-14deg);color:var(--color-primary-600)}.tt-btn-ghost{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--color-text-muted);transition:color .15s,background .15s;cursor:pointer}.tt-btn-ghost:hover{color:var(--color-text-heading);background:color-mix(in srgb,var(--color-text-heading) 6%,transparent)}#tt-pause:not(.hidden){color:var(--color-text-heading);background:color-mix(in srgb,var(--color-text-heading) 6%,transparent)}.tt-btn-ink{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--color-text-heading);color:var(--color-surface-card);font-size:14px;font-weight:600;box-shadow:0 8px 20px -8px #17140f8c;transition:transform .15s,box-shadow .15s;cursor:pointer}.tt-btn-ink:hover{transform:translateY(-1px);box-shadow:0 12px 24px -10px #17140f99}.tt-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-muted);transition:all .15s ease;cursor:pointer}.tt-icon-btn:hover{color:var(--color-text-heading);border-color:var(--color-border-hover);background:var(--color-surface-hover)}.tt-kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface-card);font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--color-text-muted)}.tt-popover{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:min(300px,calc(100vw - 32px));padding:6px;background:color-mix(in srgb,var(--color-surface-card) 92%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--tt-hair, var(--color-border));border-radius:18px;box-shadow:0 24px 48px -16px #281c0c47,0 4px 12px -4px #281c0c14;animation:tt-pop .16s ease-out}@keyframes tt-pop{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}.tt-popover.hidden{display:none}.tt-popover-left{left:0;right:auto;width:min(340px,calc(100vw - 40px));max-height:400px;overflow-y:auto}.tt-switch-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:12px;transition:background .15s;cursor:pointer}.tt-switch-row:hover{background:color-mix(in srgb,var(--color-text-heading) 4%,transparent)}.tt-switch-row[aria-disabled=true]{opacity:.45;pointer-events:none}.tt-switch-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:10px;background:color-mix(in srgb,var(--color-text-heading) 5%,transparent);color:var(--color-text-body);font-size:12px;font-weight:700}.tt-switch{position:relative;width:36px;height:21px;flex-shrink:0;border-radius:999px;background:var(--color-border-hover);transition:background .2s}.tt-switch:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s}.tt-switch-row[aria-pressed=true] .tt-switch{background:var(--color-text-heading)}.tt-switch-row[aria-pressed=true] .tt-switch:after{transform:translate(15px);background:var(--color-surface-card)}.tt-switch-row[aria-pressed=true] .tt-switch-icon{color:var(--color-primary-600);background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.tt-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:12px;text-align:left;transition:background .15s;cursor:pointer}.tt-menu-item:hover,.tt-menu-item:focus-visible{background:color-mix(in srgb,var(--color-text-heading) 4%,transparent);outline:none}.tt-menu-item[aria-checked=true]{background:color-mix(in srgb,var(--color-primary-500) 9%,transparent)}.tt-menu-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:8px;background:color-mix(in srgb,var(--color-text-heading) 5%,transparent);font-size:11px;font-weight:700;color:var(--color-text-muted)}.tt-menu-item[aria-checked=true] .tt-menu-num{background:var(--color-text-heading);color:var(--color-surface-card)}.tt-timer-num{font-family:var(--font-display);font-weight:600;font-size:56px;line-height:.9;letter-spacing:-.04em;color:var(--color-text-heading);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 144;transition:color .3s}@media(min-width:640px){.tt-timer-num{font-size:68px}}.tt-timer.is-urgent .tt-timer-num{color:var(--color-error);animation:tt-tick 1s ease-in-out infinite}.tt-timer.is-paused .tt-timer-num{color:var(--color-text-placeholder)}@keyframes tt-tick{0%,to{opacity:1}50%{opacity:.55}}.tt-live-dot{width:7px;height:7px;border-radius:50%;background:var(--color-border-hover);position:relative;flex-shrink:0}.tt-live-dot[data-state=running]{background:var(--color-correct)}.tt-live-dot[data-state=running]:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-correct);opacity:0;animation:tt-ping 1.4s cubic-bezier(0,0,.2,1) infinite}.tt-live-dot[data-state=paused]{background:var(--color-warning)}.tt-live-dot[data-state=countdown],.tt-live-dot[data-state=armed]{background:var(--color-primary-500)}.tt-live-dot[data-state=armed]:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary-500);opacity:0;animation:tt-ping 1.2s cubic-bezier(0,0,.2,1) infinite}.tt-seg>button.tt-dur-inf{font-size:17px;line-height:1;padding-top:4px;padding-bottom:6px}.tt-count{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--color-surface-card) 85%,transparent);border:1px solid var(--tt-hair);box-shadow:0 24px 50px -20px #281c0c59}.tt-count-ring{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);transform:rotate(-90deg)}.tt-count-ring circle{fill:none;stroke-width:4}.tt-count-ring circle:first-child{stroke:color-mix(in srgb,var(--color-text-heading) 7%,transparent)}#tt-count-arc{stroke:var(--color-primary-500);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}.tt-count-num{font-family:var(--font-display);font-weight:600;font-size:54px;line-height:1;letter-spacing:-.04em;color:var(--color-text-heading);font-variant-numeric:tabular-nums}@keyframes tt-ping{0%{transform:scale(.6);opacity:.8}to{transform:scale(1.6);opacity:0}}.tt-metrics{display:flex;align-items:flex-end;gap:clamp(18px,4vw,44px);padding-bottom:4px}.tt-metric{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}.tt-metric-val{display:inline-flex;align-items:center;gap:4px;font-size:26px;font-weight:650;letter-spacing:-.03em;line-height:1;color:var(--color-text-heading);font-variant-numeric:tabular-nums;transition:color .2s,transform .15s;transform-origin:right bottom}.tt-metric-label{font-size:11px;font-weight:500;color:var(--color-text-placeholder);letter-spacing:.02em}.tt-metric-err{color:var(--color-text-heading)}.tt-flame{width:16px;height:16px;color:var(--color-text-placeholder);transition:color .2s}#tt-streak-pill.is-hot .tt-metric-val{color:var(--color-primary-600)}#tt-streak-pill.is-hot .tt-flame{color:var(--color-primary-500);animation:tt-flicker .9s ease-in-out infinite}#tt-streak-pill.bump .tt-metric-val{transform:scale(1.15)}@keyframes tt-flicker{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(-8deg)}}@media(max-width:639px){.tt-timer-num{font-size:52px}.tt-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;padding:14px 0 0;border-top:1px solid var(--tt-hair)}.tt-metric{align-items:flex-start}.tt-metric-val{font-size:21px;transform-origin:left bottom}.tt-flame{width:14px;height:14px}.tt-bar{gap:8px;padding:10px}.tt-seg{width:100%}.tt-seg>button{flex:1;padding:7px 0}.tt-crumb{flex:1;min-width:0}.tt-crumb-select{padding-left:6px}}.tt-confetto{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:tt-fall linear forwards}@keyframes tt-fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot));opacity:.9}}.tt-chars{position:relative;padding:18px 16px 30px;min-height:250px;font-family:var(--font-mono);font-size:20px;line-height:2.1;letter-spacing:-.01em;word-break:normal;overflow-wrap:anywhere}@media(min-width:640px){.tt-chars{font-size:24px;padding:20px 24px 34px;min-height:290px}}.tt-chars.tt-page-in{animation:tt-page-in .28s cubic-bezier(.2,.8,.2,1)}@keyframes tt-page-in{0%{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}.char{position:relative;border-radius:3px;transition:color .1s ease,background-color .1s ease}.char.untyped{color:var(--color-untyped)}.char.current{color:var(--color-text-heading)}.char.correct{color:var(--color-correct)}.char.incorrect{color:var(--color-error);background-color:color-mix(in srgb,var(--color-error) 12%,transparent);text-decoration:underline 2px;text-decoration-color:color-mix(in srgb,var(--color-error) 70%,transparent);text-underline-offset:5px}.tt-caret{position:absolute;left:0;top:0;width:2.5px;height:1.2em;border-radius:2px;z-index:2;pointer-events:none;background:var(--color-primary-500);box-shadow:0 0 10px color-mix(in srgb,var(--color-primary-500) 60%,transparent);transition:transform .1s cubic-bezier(.2,.8,.2,1),height .1s;will-change:transform;animation:tt-blink 1.05s ease-in-out infinite}.tt-caret.is-typing{animation:none}.tt-caret.hidden{display:none}@keyframes tt-blink{0%,45%{opacity:1}55%,90%{opacity:0}to{opacity:1}}.tt-input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;resize:none;border:0;padding:0}.tt-overlay{position:absolute;inset:-6px 0 0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-surface-card) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;animation:tt-fade .25s ease-out}.tt-overlay.hidden{display:none}#tt-countdown{cursor:default;background:color-mix(in srgb,var(--color-surface-card) 70%,transparent)}@keyframes tt-fade{0%{opacity:0}to{opacity:1}}.tt-glass{display:flex;flex-direction:column;align-items:center;padding:18px 20px;border-radius:22px;margin:0 16px;background:color-mix(in srgb,var(--color-surface-card) 80%,transparent);border:1px solid var(--tt-hair);box-shadow:0 24px 50px -20px #281c0c4d,0 2px 6px -2px #281c0c0f;animation:tt-pop .25s ease-out}.tt-start{display:flex;align-items:center;gap:14px;padding:4px 6px 4px 4px;border-radius:16px;cursor:pointer}.tt-start-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:14px;background:var(--color-text-heading);color:var(--color-surface-card);box-shadow:0 10px 22px -10px #17140fb3;transition:transform .2s}.tt-start:hover .tt-start-icon{transform:translateY(-1px) rotate(-4deg);background:var(--color-primary-500)}[data-theme=dark] .tt-tint{background:#dd6b2c1f}.tt-result-hero{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--color-primary-50) 90%,transparent),transparent 60%),var(--color-surface-card)}[data-theme=dark] .tt-result-hero{background:radial-gradient(120% 90% at 0% 0%,rgba(221,107,44,.12),transparent 60%),var(--color-surface-card)}.tt-level{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;background:var(--color-primary-500);color:#fff}.tt-tile{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20px 22px;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);min-height:104px}.tt-tile-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}.tt-tile-val{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.15;color:var(--color-text-heading);font-variant-numeric:tabular-nums}.tt-tile-sub{font-size:12px;color:var(--color-text-placeholder)}.tt-mini-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px}.tt-keychip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px 0 4px;border-radius:9px;background:var(--color-surface-sunken);border:1px solid var(--color-border);font-size:12px;color:var(--color-text-muted)}.tt-keychip b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border-radius:6px;background:var(--color-surface-card);border:1px solid var(--color-border);border-bottom-width:2px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--color-text-heading)}.tt-anim{animation:slide-up .35s ease-out both}.tt-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:#0f0d0b8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:tt-fade .18s ease-out}.tt-modal.hidden{display:none}.tt-modal-panel{width:100%;max-height:calc(100vh - 32px);overflow-y:auto;padding:24px;border-radius:24px;background:var(--color-surface-card);border:1px solid var(--color-border);box-shadow:var(--shadow-elevated);animation:slide-up .25s ease-out}@media(min-width:640px){.tt-modal-panel{padding:28px}}.tt-share-preview{background:linear-gradient(135deg,#1c1915,#2a211a 60%,#3a2516);color:#fff;position:relative;overflow:hidden}.tt-share-preview:after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,138,74,.55),transparent)}.tt-social{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-body);font-size:11.5px;font-weight:600;transition:all .15s ease;cursor:pointer}.tt-social:hover{border-color:var(--color-primary-300);color:var(--color-primary-600);transform:translateY(-1px);box-shadow:var(--shadow-card-hover)}.tt-social-sm{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-muted);transition:all .15s;cursor:pointer}.tt-social-sm:hover{color:var(--color-primary-600);border-color:var(--color-primary-300)}.tt-toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 16px;border-radius:12px;background:#17140f;color:#fff;font-size:14px;font-weight:600;box-shadow:0 12px 30px -10px #00000073;transition:all .25s ease}.tt-toast.show{opacity:1;transform:translate(-50%)}.kb-key{display:flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .4rem;border-radius:.6rem;border:1px solid var(--color-border);border-bottom-width:3px;background:var(--color-surface-card);color:var(--color-text-muted);font-family:var(--font-mono);font-size:.75rem;font-weight:600;transition:all .1s}.kb-key.active{background:var(--color-primary-50);color:var(--color-primary-700);border-color:var(--color-primary-400)}[data-theme=dark] .kb-key.active{background:#dd6b2c2e;color:var(--color-primary-300)}.kb-key.correct-flash{background:var(--color-correct);color:#fff;border-color:var(--color-correct);transform:translateY(2px);border-bottom-width:1px}.kb-key.incorrect-flash{background:var(--color-error);color:#fff;border-color:var(--color-error);transform:translateY(2px);border-bottom-width:1px}@media(prefers-reduced-motion:reduce){.tt-anim,.tt-modal-panel,.tt-chars.tt-page-in,.tt-overlay,.tt-glass,.tt-popover,.tt-timer-num,.tt-flame,.tt-live-dot:after{animation:none!important}.tt-caret{transition:none}#tt-confetti{display:none}}}