:root{--bg:#0c0c14;--bg-grad-1:#10101c;--bg-grad-2:#0a0a12;--surface:#161d2c;--surface-2:#1b2436;--surface-3:#202b41;--outline:#2c3a52;--text:#ede8df;--muted:#ede8df99;--muted-2:#ede8df6b;--gold:#c9a86c;--gold-bright:#e0c184;--gold-dim:#c9a86c24;--teal:#6ec4d5;--coral:#e16d5a;--green:#64c48d;--radius-lg:24px;--radius-md:18px;--radius-sm:13px;--shadow:0 18px 40px #00000073;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:"SFMono-Regular", ui-monospace, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;padding:0}body{background:radial-gradient(1100px 600px at 50% -10%, #c9a86c14, transparent 60%), linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));min-height:100vh}#app{max-width:660px;min-height:100vh;margin:0 auto;padding:22px 16px 64px}.screen{flex-direction:column;gap:18px;display:flex}.display{letter-spacing:-.02em;text-align:center;background:linear-gradient(120deg, var(--gold-bright), var(--gold));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.9rem,6vw,2.5rem);font-weight:700}.headline{letter-spacing:-.01em;margin:0;font-size:1.5rem;font-weight:700}.lead{color:var(--muted);text-align:center;margin:0;font-size:1.02rem;line-height:1.5}.muted{color:var(--muted);margin:0;line-height:1.5}.muted.small{font-size:.85rem}.warn{color:var(--coral);margin:0;font-weight:500}.card{background:linear-gradient(160deg, var(--surface-2), var(--surface));border:1px solid var(--outline);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px}.card-inner{border-radius:var(--radius-md);background:#00000038;border:1px solid #ffffff0a;padding:14px 16px}.section-card{flex-direction:column;gap:0;display:flex}.section-title{margin:0 0 12px;font-size:1.12rem;font-weight:600}.section-body{flex-direction:column;gap:0;display:flex}.stack{flex-direction:column;gap:10px;display:flex}.intro{justify-content:center;min-height:calc(100vh - 90px)}.intro-card{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.logo-badge{background:var(--gold-dim);border:1px solid #c9a86c4d;border-radius:26px;place-items:center;width:96px;height:96px;display:grid}.logo-mark{color:var(--gold-bright);font-size:2.6rem}.credits{text-align:left;width:100%}.credits h4{color:var(--gold);margin:0 0 4px;font-size:.95rem}.credits p{color:var(--muted);margin:0;font-size:.92rem}.btn{font-family:var(--font);border-radius:var(--radius-md);cursor:pointer;color:var(--text);border:1px solid #0000;padding:13px 18px;font-size:.98rem;font-weight:600;transition:transform 60ms,background .15s,opacity .15s}.btn:active{transform:scale(.985)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.block{width:100%}.btn-primary{background:linear-gradient(120deg, var(--gold), #b9914f);color:#1a1407;box-shadow:0 8px 22px #c9a86c40}.btn-primary:hover:not(:disabled){background:linear-gradient(120deg, var(--gold-bright), var(--gold))}.btn-outline{border-color:var(--outline);color:var(--text);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--gold);background:var(--gold-dim)}.btn-outline.danger{color:var(--coral);border-color:#e16d5a66}.btn-outline.danger:hover:not(:disabled){border-color:var(--coral);background:#e16d5a1f}.btn-answer{background:var(--surface-3);border:1px solid var(--outline);font-weight:700;font-family:var(--mono);letter-spacing:.02em;min-width:58px;padding:12px 16px}.btn-answer:hover:not(:disabled){border-color:var(--gold);color:var(--gold-bright);background:var(--gold-dim)}.icon-btn{background:var(--surface-2);border:1px solid var(--outline);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:12px;flex-shrink:0;font-size:1.2rem}.icon-btn:hover{border-color:var(--gold);color:var(--gold-bright)}.topbar{align-items:center;gap:12px;display:flex}.topbar-title{font-size:1.05rem;font-weight:600}.summary-card{flex-direction:column;gap:14px;display:flex}.pill-row{flex-wrap:wrap;gap:10px;display:flex}.pill{border-radius:var(--radius-sm);background:#00000040;border:1px solid #ffffff0d;flex-direction:column;flex:1;gap:3px;min-width:96px;padding:11px 13px;display:flex}.pill-label{color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.pill-value{font-size:1.15rem;font-weight:700}.mode-card{flex-direction:column;gap:16px;display:flex}.mode-head{align-items:flex-start;gap:14px;display:flex}.mode-icon{background:var(--gold-dim);border-radius:16px;flex-shrink:0;place-items:center;width:50px;height:50px;font-size:1.5rem;display:grid}.mode-title{margin:0 0 4px;font-size:1.15rem;font-weight:600}.mode-sub{color:var(--muted);margin:0;font-size:.9rem;line-height:1.45}.summary-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.metric{border-radius:var(--radius-sm);background:#00000038;border:1px solid #ffffff0d;flex-direction:column;gap:4px;padding:13px 15px;display:flex}.metric-label{color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.metric-value{font-size:1.05rem;font-weight:700}.field{flex-direction:column;gap:7px;margin-bottom:14px;display:flex}.field:last-child{margin-bottom:0}.field label,.field-label{color:var(--muted);font-size:.9rem;font-weight:600}.select{background:var(--surface-3);width:100%;color:var(--text);border:1px solid var(--outline);border-radius:var(--radius-sm);font-size:.98rem;font-family:var(--font);cursor:pointer;appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);background-position:calc(100% - 18px),calc(100% - 13px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding:12px 14px}.select:focus{border-color:var(--gold);outline:none}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip-row.scroll-x{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:6px;overflow-x:auto}.chip{background:var(--surface-3);border:1px solid var(--outline);color:var(--text);font-size:.9rem;font-weight:600;font-family:var(--mono);cursor:pointer;white-space:nowrap;border-radius:999px;padding:8px 15px;transition:all .13s}.chip:hover{border-color:var(--gold)}.chip.selected{background:var(--gold);color:#1a1407;border-color:var(--gold)}.chip.chord-chip{font-family:var(--font)}.field-label{margin:10px 0 8px}.legend-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.legend-item{align-items:baseline;gap:8px;font-size:.85rem;display:flex}.legend-code{font-family:var(--mono);color:var(--gold);min-width:48px;font-weight:700}.legend-name{color:var(--muted)}.answers .btn-answer{flex:none}.feedback-card{flex-direction:column;gap:8px;display:flex}.feedback-title{margin:0;font-size:1.05rem;font-weight:600}.feedback-title.idle{color:var(--muted)}.feedback-title.success{color:var(--green)}.feedback-title.error{color:var(--coral)}.feedback-body{margin:0;font-size:1.02rem;line-height:1.45}.switch-row{justify-content:space-between;align-items:center;margin-top:12px;display:flex}.switch-row input{cursor:pointer;width:46px;height:26px;accent-color:var(--gold)}.survival-row{align-items:center;gap:16px;display:flex}.hearts{gap:6px;display:flex}.heart{color:var(--coral);font-size:1.35rem}.heart.lost{color:var(--outline)}.acc-item{flex-direction:column;gap:5px;margin-bottom:12px;font-size:.88rem;display:flex}.acc-item:last-child{margin-bottom:0}.bar{background:#00000059;border-radius:99px;width:100%;height:8px;overflow:hidden}.bar-fill{background:linear-gradient(90deg, var(--gold), var(--gold-bright));border-radius:99px;height:100%;transition:width .3s}.finished-card{flex-direction:column;gap:12px;animation:.3s rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.stat-card{flex-direction:column;gap:10px;display:flex}.stat-head{justify-content:space-between;align-items:baseline;display:flex}.stat-deg{font-size:1.02rem;font-weight:600}.stat-frac{font-family:var(--mono);color:var(--gold);font-weight:700}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:50;background:#0009;place-items:center;padding:20px;animation:.18s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.dialog{flex-direction:column;gap:12px;width:100%;max-width:380px;display:flex}.dialog h3{margin:0}.dialog-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;display:grid}.hidden{display:none!important}@media (max-width:420px){.legend-grid{grid-template-columns:1fr}#app{padding:18px 12px 56px}}.scroll-x::-webkit-scrollbar{height:6px}.scroll-x::-webkit-scrollbar-thumb{background:var(--outline);border-radius:99px}