.ts-root{--ts-card:#12161f;--ts-border:#ffffff14;max-width:560px;margin:0 auto}.ts-hero{background:radial-gradient(120% 120% at 50% 0,#ffd16614,#0000 60%);border-radius:20px;margin-bottom:6px;overflow:hidden}.ts-bar{justify-content:space-between;align-items:center;gap:10px;margin:8px 0 14px;display:flex}.ts-seg{border:1px solid var(--ts-border);background:#ffffff0a;border-radius:12px;gap:4px;padding:4px;display:inline-flex}.ts-seg button{color:var(--muted,#98a1bb);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;transition:all .16s}.ts-seg button.on{color:#14100a;background:linear-gradient(135deg,#ff8a3d,#ffd166)}.ts-mute{border:1px solid var(--ts-border);cursor:pointer;background:#ffffff0a;border-radius:12px;width:40px;height:40px;font-size:17px}.ts-card{background:var(--ts-card);border:1px solid var(--ts-border);text-align:center;border-radius:22px;padding:22px 20px 24px;position:relative}.ts-tonebadge{color:#14100a;letter-spacing:.02em;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:900;display:inline-block}.ts-hz{color:#fff;margin:8px 0 2px;font-size:clamp(58px,15vw,88px);font-weight:900;line-height:1.05}.ts-py{letter-spacing:.01em;font-size:30px;font-weight:800}.ts-ko{color:var(--muted,#98a1bb);margin-top:3px;font-size:15px}.ts-hint{color:var(--faint,#6b748c);margin-top:8px;font-size:13.5px}.ts-listen{justify-content:center;gap:8px;margin:16px 0 4px;display:flex}.ts-listen button{border:1px solid var(--ts-border);color:#e8ecf5;cursor:pointer;background:#ffffff0d;border-radius:11px;padding:9px 15px;font-size:13.5px;font-weight:700;transition:background .16s}.ts-listen button:active{background:#ffffff1f}.ts-canvas-wrap{margin:14px 0 4px;position:relative}.ts-canvas{border:1px solid var(--ts-border);background:linear-gradient(#ffffff05,#00000026);border-radius:14px;width:100%;height:170px;display:block}.ts-axis-hi,.ts-axis-lo{color:var(--faint,#6b748c);pointer-events:none;font-size:10px;position:absolute;left:8px}.ts-axis-hi{top:8px}.ts-axis-lo{bottom:8px}.ts-rec{color:#ff6b6b;font-size:12px;font-weight:800;animation:1s infinite tsPulse;position:absolute;top:8px;right:10px}@keyframes tsPulse{50%{opacity:.4}}.ts-result{border:1px solid var(--ts-border);background:#ffffff08;border-radius:16px;margin-top:14px;padding:14px 16px}.ts-score{justify-content:center;align-items:baseline;gap:4px;font-weight:900;display:flex}.ts-score-num{font-size:46px;line-height:1}.ts-score-max{color:var(--faint,#6b748c);margin-right:8px;font-size:16px}.ts-band{border-radius:999px;align-self:center;padding:4px 11px;font-size:13px;font-weight:900}.band-완벽{color:#06231a;background:#34c98a}.band-좋음{color:#221a06;background:#ffd166}.band-아쉬움{color:#ffb37a;background:#ff8a3d33;border:1px solid #ff8a3d55}.band-다시{color:#ff9d9d;background:#ff6b6b22;border:1px solid #ff6b6b55}.ts-bars{gap:12px;margin:12px 0 6px;display:flex}.ts-mini{color:var(--muted,#98a1bb);flex:1;align-items:center;gap:8px;font-size:12px;display:flex}.ts-mini-track{background:#ffffff12;border-radius:99px;flex:1;height:7px;overflow:hidden}.ts-mini-fill{background:linear-gradient(90deg,#ff8a3d,#ffd166);border-radius:99px;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1)}.ts-tip{color:#e8ecf5;text-align:left;margin:8px 0 0;font-size:13.5px;line-height:1.6}.ts-actions{gap:10px;margin-top:18px;display:flex}.ts-rec-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff5f6d,#ff8a3d);border:0;border-radius:14px;flex:2;padding:15px;font-size:15.5px;font-weight:900;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 22px #ff5f6d47}.ts-rec-btn:active{transform:scale(.98)}.ts-rec-btn:disabled{opacity:.6;box-shadow:none;cursor:default}.ts-next{border:1px solid var(--ts-border);color:#e8ecf5;cursor:pointer;background:#ffffff0d;border-radius:14px;flex:1;font-size:14px;font-weight:800}.ts-next:disabled{opacity:.5}.ts-warn{color:#ffb37a;margin:12px 0 0;font-size:12.5px;line-height:1.6}.ts-stats{gap:12px;margin-top:16px;display:grid}.ts-streak{background:var(--ts-card);border:1px solid var(--ts-border);border-radius:16px;justify-content:space-around;padding:14px;display:flex}.ts-streak>div{text-align:center;flex-direction:column;display:flex}.ts-streak b{color:#ffd166;font-size:26px;font-weight:900}.ts-streak span{color:var(--muted,#98a1bb);margin-top:2px;font-size:11.5px}.ts-heat{background:var(--ts-card);border:1px solid var(--ts-border);border-radius:16px;padding:14px 14px 12px}.ts-heat-title{color:#e8ecf5;margin-bottom:10px;font-size:13px;font-weight:800}.ts-heat-row{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.ts-heat-cell{cursor:pointer;background:0 0;border:1.5px solid;border-radius:12px;flex-direction:column;gap:3px;padding:10px 4px;transition:transform .12s;display:flex}.ts-heat-cell:active{transform:scale(.95)}.ts-heat-lab{font-size:12px;font-weight:800}.ts-heat-val{color:#fff;font-size:19px;font-weight:900}.ts-heat-hint{color:var(--faint,#6b748c);text-align:center;margin:9px 0 0;font-size:11px}