@font-face{font-family:Miracle;src:url("assets/fonts/MiracleHistory.ttf") format("truetype");font-display:swap}
*{box-sizing:border-box}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
html,body{margin:0;min-height:100%;background:#f3efe5;color:#171a17;font-family:Inter,"Segoe UI",sans-serif}
body{min-height:100dvh;background:radial-gradient(circle at 50% 0%,#fffdf6 0,#f3efe5 55%,#e9e1d1 100%);padding-bottom:60px}
:root{--ink:#171a17;--muted:#726f63;--rule:#d7cebc;--gold:#d99517;--v1:#ff655d;--v2:#4fd0c1;--v3:#f1be43}

.ts-topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 22px 16px;max-width:820px;margin:0 auto}
.ts-back{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule);border-radius:50%;background:#faf7ef;color:var(--ink);text-decoration:none}
.ts-brand{text-align:center}
.ts-brand small{display:block;font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.ts-brand strong{display:block;margin-top:4px;font:500 26px/1 Miracle,Georgia,serif}
.ts-topbar-spacer{width:40px}

.ts-tabs{display:flex;gap:4px;max-width:820px;margin:0 auto;padding:0 16px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ts-tabs button{flex:0 0 auto;padding:10px 16px;border:1px solid var(--rule);border-radius:999px;background:#faf7ef;color:#6e7266;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s}
.ts-tabs button.active{background:var(--ink);border-color:var(--ink);color:#fff}

.ts-main{max-width:820px;margin:0 auto;padding:10px 22px 40px}
.ts-panel{display:none;animation:tsFadeIn .25s ease}
.ts-panel.active{display:block}
@keyframes tsFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ts-panel h2{margin:10px 0 16px;font:500 32px/1.1 Miracle,Georgia,serif}
.ts-panel h3{margin:30px 0 12px;font:500 22px/1.2 Miracle,Georgia,serif;color:var(--ink)}
.ts-panel p{margin:0 0 16px;color:#3c3f38;font-size:15px;line-height:1.65}
.ts-panel p strong{color:var(--ink)}
.ts-note{padding:14px 16px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:rgba(217,149,23,.08);color:#6b6455;font-size:13px;line-height:1.55}

.ts-fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.ts-fact{padding:16px 14px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,253,246,.7);text-align:center}
.ts-fact strong{display:block;font-size:19px}
.ts-fact span{display:block;margin-top:6px;color:var(--muted);font-size:11px}

.ts-gear-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.ts-gear-card{padding:18px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,253,246,.7)}
.ts-gear-card>strong{display:block;margin-bottom:8px;font-size:15px}
.ts-gear-card p{margin:0;color:#3c3f38;font-size:13px;line-height:1.55}

.ts-valve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.ts-valve-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;border:1px solid var(--rule);border-radius:18px;background:rgba(255,253,246,.7);text-align:center}
.ts-valve-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;font-weight:900;font-size:16px}
.ts-valve-dot.v1{background:var(--v1)}.ts-valve-dot.v2{background:var(--v2)}.ts-valve-dot.v3{background:var(--v3)}
.ts-valve-card strong{font-size:14px}
.ts-valve-card small{color:var(--muted);font-size:11px}

.ts-solfege-table{margin:16px 0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:rgba(255,253,246,.7)}
.ts-solfege-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.ts-solfege-row:last-child{border-bottom:0}
.ts-solfege-row>span{flex:1;font-size:13px}
.ts-solfege-head{font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:rgba(217,149,23,.06)}
.ts-solfege-table--icons .ts-solfege-row>span:first-child{flex:0 0 40px;display:flex;align-items:center;justify-content:center}
.ts-note-icon{display:flex;align-items:center;justify-content:center}

.ts-combo-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13px}
.ts-combo-table th{text-align:left;padding:8px 10px;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--rule)}
.ts-combo-table td{padding:10px;border-bottom:1px solid var(--rule)}
.ts-mini-dot{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50%;color:#fff;font-weight:800;font-size:10px}
.ts-mini-dot.v1{background:var(--v1)}.ts-mini-dot.v2{background:var(--v2)}.ts-mini-dot.v3{background:var(--v3)}.ts-mini-dot.v0{background:#9aa1b2}
.ts-hard-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#fff0c9;color:#8a5a06;font-size:10px;font-weight:800;letter-spacing:.04em}
.ts-drill-fingers{display:flex;justify-content:center;gap:4px;margin-top:8px;min-height:22px}
.ts-drill-ladder span.hard{border:2px dashed var(--gold);background:#fff3d6;color:#8a5a06}

.ts-harmonic-row,.ts-translate-grid,.ts-puzzle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:18px 0}
.ts-puzzle-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,253,246,.7)}
.ts-puzzle-cell strong{font-size:16px}
.ts-puzzle-cell input{width:100%;padding:8px 4px;border:1.5px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;text-align:center;text-transform:none;outline:none}
.ts-puzzle-cell input:focus{border-color:var(--gold)}
.ts-puzzle-cell.correct input{border-color:#3f9a5c;background:#e5f4ea;color:#215c34}
.ts-puzzle-cell.wrong input{border-color:#c65a4e;background:#fbe9e6;color:#7a2f27}
.ts-puzzle-score{margin-top:14px;font-weight:800;color:var(--ink)}
.ts-harmonic-note{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:78px;padding:16px 8px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,253,246,.7);cursor:pointer;transition:.15s}
.ts-harmonic-note:hover,.ts-harmonic-note:focus-visible{border-color:var(--gold);background:#fffaf0}
.ts-harmonic-note.sounding{border-color:var(--gold);background:#fff0c9;transform:translateY(-2px)}
.ts-harmonic-note strong{font-size:16px}
.ts-harmonic-note small{color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase}

.ts-chrom-controls{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.ts-chrom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;max-height:520px;overflow-y:auto;padding:4px 2px}
.ts-chrom-card{min-width:0;padding:12px 6px}
.ts-chrom-card small{text-transform:none}

.ts-note-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0}
.ts-note-picker button{padding:10px 4px;border:1px solid var(--rule);border-radius:12px;background:#faf7ef;font-weight:700;font-size:12px;cursor:pointer}
.ts-note-picker button.active{border-color:var(--ink);background:var(--ink);color:#fff}

.ts-level-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}
.ts-level-picker button{padding:12px 10px;border:1px solid var(--rule);border-radius:14px;background:#faf7ef;text-align:left;cursor:pointer}
.ts-level-picker button small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.ts-level-picker button.active{border-color:var(--ink);background:var(--ink);color:#fff}
.ts-level-picker button.active small{color:#c7cbc3}

.ts-drill-stage{margin:20px 0;padding:20px;border:1px solid var(--rule);border-radius:20px;background:rgba(255,253,246,.7)}
.ts-drill-now{text-align:center;margin-bottom:16px}
.ts-drill-now small{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.ts-drill-now strong{display:block;margin-top:4px;font:500 40px/1 Miracle,Georgia,serif;color:var(--gold)}
.ts-drill-ladder{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ts-drill-ladder span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7e1d2;color:#8b8879;font-weight:800;font-size:11px;transition:.15s}
.ts-drill-ladder span.on{background:var(--gold);color:#171a17;box-shadow:0 0 0 4px rgba(217,149,23,.22)}

.ts-drill-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ts-drill-btn{flex:1;min-width:150px;padding:14px;border:0;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer}
.ts-drill-btn.down{background:var(--ink);color:#fff}
.ts-drill-btn.up{background:var(--gold);color:#171a17}
.ts-drill-btn.stop{flex:0 0 auto;min-width:0;padding:14px 18px;background:transparent;border:1px solid var(--rule);color:var(--muted)}

.ts-flex-tempo{display:flex;gap:8px;margin:18px 0}
.ts-flex-tempo button{flex:1;padding:11px 12px;border:1px solid var(--rule);border-radius:14px;background:#faf7ef;text-align:left;font-size:12px;font-weight:800;cursor:pointer}
.ts-flex-tempo button small{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:500}
.ts-flex-tempo button.active{border-color:var(--ink);background:var(--ink);color:#fff}
.ts-flex-tempo button.active small{color:#c7cbc3}
.ts-flex-sequence{display:grid;grid-template-columns:repeat(7,minmax(94px,1fr));gap:7px;margin:18px 0;overflow-x:auto;padding:5px 2px 10px;scrollbar-width:thin}
.ts-flex-card{position:relative;min-height:116px;padding:14px 9px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,253,246,.75);cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.ts-flex-card:hover,.ts-flex-card:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.ts-flex-card.active{border-color:var(--gold);background:#fff4d9;box-shadow:0 0 0 3px rgba(217,149,23,.14)}
.ts-flex-card>small{position:absolute;top:9px;right:10px;color:#a39d8d;font-size:9px;font-weight:800}
.ts-flex-card strong{display:block;margin-top:13px;font-size:10px;line-height:1.45;white-space:nowrap}
.ts-flex-valves{display:flex;justify-content:center;min-height:26px}
.ts-flex-now{min-height:126px;padding:19px;border:1px solid var(--rule);border-radius:20px;background:var(--ink);color:#fff;text-align:center}
.ts-flex-now>small{display:block;color:#b9bdb5;font-size:9px;font-weight:800;letter-spacing:.15em}
.ts-flex-now>strong{display:block;margin:6px 0 4px;font:500 30px/1 Miracle,Georgia,serif;color:var(--gold)}
.ts-flex-now>span{color:#e8e5dc;font-size:13px;font-weight:700}
.ts-flex-now .ts-mini-dot.v0{border:1px solid #787d76;background:transparent}

.ts-quiz-hud{display:flex;justify-content:space-between;gap:12px;margin-top:20px;color:var(--muted);font-size:12px;font-weight:700}
.ts-quiz-progress{height:5px;margin:10px 0 18px;border-radius:999px;background:#ddd5c4;overflow:hidden}
.ts-quiz-progress i{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .25s ease}
.ts-quiz-q{margin-bottom:22px;padding:18px;border:1px solid var(--rule);border-radius:18px;background:rgba(255,253,246,.7)}
.ts-quiz-q--game{padding:24px}
.ts-quiz-q p{margin:0 0 18px;font-weight:750;color:var(--ink);font-size:18px;line-height:1.4}
.ts-quiz-options{display:grid;gap:8px}
.ts-quiz-options button{padding:14px 15px;border:1px solid var(--rule);border-radius:12px;background:#faf7ef;text-align:left;cursor:pointer;font-size:14px;transition:.15s}
.ts-quiz-options button:not(:disabled):hover,.ts-quiz-options button:not(:disabled):focus-visible{border-color:var(--gold);background:#fffaf0}
.ts-quiz-options button.correct{border-color:#3f9a5c;background:#e5f4ea;color:#215c34}
.ts-quiz-options button.wrong{border-color:#c65a4e;background:#fbe9e6;color:#7a2f27}
.ts-quiz-options button:disabled{cursor:default}
.ts-quiz-feedback{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.ts-quiz-feedback:not(:empty){display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px}
.ts-quiz-feedback strong{font-size:14px}
.ts-quiz-feedback span{grid-column:1;color:var(--muted);font-size:12px;line-height:1.45}
.ts-quiz-next{grid-column:2;grid-row:1/3;padding:11px 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.ts-quiz-score{padding:20px;border-radius:18px;background:var(--ink);color:#fff;text-align:center}
.ts-quiz-score small{display:block;margin-bottom:8px;color:#b9bdb5;font-size:9px;font-weight:800;letter-spacing:.15em}
.ts-quiz-score strong{display:block;font:500 34px/1 Miracle,Georgia,serif;color:var(--gold);margin-bottom:6px}
.ts-quiz-score button{margin-top:14px;padding:12px 22px;border:0;border-radius:999px;background:var(--gold);color:#171a17;font-weight:800;cursor:pointer}

@media(max-width:640px){
  .ts-fact-row,.ts-valve-grid{grid-template-columns:1fr 1fr}
  .ts-fact-row{grid-template-columns:repeat(3,1fr)}
  .ts-panel h2{font-size:26px}
  .ts-harmonic-note{min-width:64px}
  .ts-note-picker{grid-template-columns:repeat(4,1fr)}
  .ts-flex-tempo{display:grid;grid-template-columns:1fr}
  .ts-flex-sequence{grid-template-columns:repeat(7,106px);margin-right:-22px}
  .ts-quiz-q--game{padding:18px}
  .ts-quiz-feedback:not(:empty){grid-template-columns:1fr}
  .ts-quiz-next{grid-column:1;grid-row:auto;margin-top:8px}
  .ts-gear-grid{grid-template-columns:1fr}
  .ts-solfege-row{gap:6px;padding:9px 10px}
  .ts-solfege-row>span{font-size:11px}
  .ts-solfege-table--icons .ts-solfege-row>span:first-child{flex:0 0 28px}
}