@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--ds-bg: #0a0610;--ds-bg-2: #170a18;--ds-walnut: #5a3422;--ds-flame: #f6c15e;--ds-cream: #f4e7c8;--ds-velvet: #1a0820;--ds-glass: rgba(244,231,200,.04);--ds-line: rgba(244,231,200,.1);--ds-text: #f4e7c8;--ds-text-mute: rgba(244,231,200,.62);--ds-text-quiet: rgba(244,231,200,.38);--ds-display: "Inter Tight", system-ui, sans-serif;--ds-body: "Inter", system-ui, sans-serif;--ds-mono: "JetBrains Mono", ui-monospace, monospace;--ds-good: #a8ff3a;--ds-bad: #ff5f7a}body{background:var(--ds-bg);color:var(--ds-text);font-family:var(--ds-body)}.ds{max-width:920px;margin:0 auto;padding:32px 22px 80px}.ds__top{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;padding:24px 0 36px;border-bottom:1px solid var(--ds-line);margin-bottom:28px}@media(max-width:640px){.ds__top{grid-template-columns:1fr}}.ds__kicker{font-family:var(--ds-mono);font-size:11px;letter-spacing:.6px;color:var(--ds-flame);text-transform:uppercase;margin:0 0 12px}.ds__title{font-family:var(--ds-display);font-weight:800;font-size:clamp(36px,5.5vw,60px);line-height:1;letter-spacing:-.02em;margin:0 0 14px;color:var(--ds-text)}.ds__sub{font-family:var(--ds-body);font-size:15px;color:var(--ds-text-mute);max-width:660px;line-height:1.6;margin:0}.ds__wallet{background:linear-gradient(135deg,#f6c15e1a,#a8ff3a0a);border:1px solid rgba(246,193,94,.3);border-radius:14px;padding:20px 24px;text-align:center;min-width:180px}.ds__wallet-num{font-family:var(--ds-display);font-weight:800;font-size:42px;line-height:1;color:var(--ds-flame);letter-spacing:-.02em;margin-bottom:8px}.ds__wallet-num-of{color:var(--ds-text-quiet);font-size:18px;font-weight:500}.ds__wallet-stars{font-family:var(--ds-mono);font-size:11px;color:var(--ds-text-mute);letter-spacing:.5px;margin-bottom:6px}.ds__wallet-label{font-family:var(--ds-mono);font-size:9.5px;color:var(--ds-text-quiet);letter-spacing:.6px;text-transform:uppercase;margin:0}.ds__roster{padding:0 0 28px;border-bottom:1px solid var(--ds-line);margin-bottom:28px}.ds__section-label{font-family:var(--ds-mono);font-size:10px;letter-spacing:.6px;color:var(--ds-text-quiet);text-transform:uppercase;margin:0 0 14px}.ds__roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:640px){.ds__roster-grid{grid-template-columns:repeat(2,1fr)}}.ds__roster-card{background:linear-gradient(135deg,var(--rc, var(--ds-walnut)) 0%,var(--ds-velvet) 100%);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 4px 12px #0000004d;text-decoration:none;color:inherit;display:block}.ds__roster-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0000006b}.ds__roster-card--star{outline:2px solid var(--ds-flame);outline-offset:-2px}.ds__roster-portrait{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;background:#0000004d;display:grid;place-items:center}.ds__roster-portrait img{width:80%;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.ds__roster-name{font-family:var(--ds-display);font-weight:700;font-size:13px;color:#fff;margin:0 0 4px;line-height:1.2}.ds__roster-skill{font-family:var(--ds-mono);font-size:9.5px;color:#ffffff9e;margin:0 0 6px;letter-spacing:.4px;text-transform:uppercase}.ds__roster-stars{font-family:var(--ds-mono);font-size:13px;color:var(--ds-flame);letter-spacing:.5px}.ds__roster-stars span{color:#f4e7c82e}.ds__lesson{padding:36px 0 44px;border-bottom:1px solid var(--ds-line);scroll-margin-top:16px}.ds__lesson:last-of-type{border-bottom:0}.ds__lesson-head{display:flex;gap:18px;align-items:center;margin-bottom:22px}.ds__lesson-noun{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--nc, var(--ds-walnut)) 0%,var(--ds-velvet) 100%);display:grid;place-items:center;flex-shrink:0;box-shadow:0 8px 24px #0000006b;position:relative}.ds__lesson-noun img{width:80%;image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.ds__lesson-stars{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);background:var(--ds-velvet);padding:3px 10px;border-radius:999px;font-family:var(--ds-mono);font-size:12px;color:var(--ds-flame);letter-spacing:.5px;box-shadow:0 2px 6px #0006;border:1px solid rgba(244,231,200,.1)}.ds__lesson-num{font-family:var(--ds-mono);font-size:10px;letter-spacing:.6px;color:var(--ds-text-quiet);text-transform:uppercase;margin:0 0 4px}.ds__lesson-title{font-family:var(--ds-display);font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.1;letter-spacing:-.015em;margin:0 0 8px;color:var(--ds-text)}.ds__lesson-desc{font-family:var(--ds-body);font-size:13.5px;color:var(--ds-text-mute);line-height:1.55;margin:0}.ds__lesson-desc strong{color:var(--ds-flame);font-weight:600}.ds__game{background:linear-gradient(180deg,var(--ds-glass),transparent);border:1px solid var(--ds-line);border-radius:12px;padding:22px}.ds__game-stage{min-height:160px;padding:14px;background:#0003;border-radius:8px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.ds__game-status{font-family:var(--ds-body);font-size:14px;color:var(--ds-text-mute);margin:0;line-height:1.5}.ds__game-status kbd{font-family:var(--ds-mono);background:var(--ds-velvet);border:1px solid var(--ds-line);padding:2px 8px;border-radius:4px;font-size:11px;color:var(--ds-text)}.ds__game-status strong{color:var(--ds-text);font-weight:600}.ds__game-status--success{color:var(--ds-good);font-weight:600}.ds__game-status--fail{color:var(--ds-bad);font-weight:600}.ds__game-controls{display:flex;align-items:center;gap:12px;padding-top:6px;flex-wrap:wrap}.ds__btn{background:var(--ds-flame);color:var(--ds-velvet);border:0;padding:11px 18px;border-radius:8px;font-family:var(--ds-display);font-weight:700;font-size:13.5px;cursor:pointer;transition:transform .15s ease,background .15s ease}.ds__btn:hover:not(:disabled){transform:scale(1.04);background:#ffd58a}.ds__btn:disabled{opacity:.45;cursor:not-allowed}.ds__btn--ghost{background:transparent;color:var(--ds-text-mute);border:1px solid var(--ds-line)}.ds__btn--ghost:hover:not(:disabled){background:var(--ds-glass);color:var(--ds-text)}.ds__game-score{margin-left:auto;font-family:var(--ds-mono);font-size:12px;color:var(--ds-text-mute);letter-spacing:.4px}.ds__beat-row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;width:100%;max-width:520px}.ds__beat-dot{aspect-ratio:1;border-radius:50%;background:#f4e7c81f;transition:background .1s ease,transform .1s ease}.ds__beat-dot--cur{background:var(--ds-flame);transform:scale(1.18)}.ds__beat-dot--hit{background:var(--ds-good)}.ds__beat-dot--miss{background:var(--ds-bad);opacity:.6}.ds__big-tap{width:100%;height:96px;border-radius:12px;background:linear-gradient(180deg,#5a3422,#3a2418);border:2px solid rgba(244,231,200,.16);color:var(--ds-cream);font-family:var(--ds-display);font-weight:800;font-size:24px;letter-spacing:.05em;cursor:pointer;margin-bottom:14px;transition:transform .06s ease,background .06s ease}.ds__big-tap:active,.ds__big-tap--press{transform:scale(.98);background:linear-gradient(180deg,#3a2418,#5a3422);border-color:var(--ds-flame)}.ds__chord-q{font-family:var(--ds-display);font-weight:700;font-size:26px;color:var(--ds-text);margin:0;letter-spacing:-.01em}.ds__choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}@media(max-width:480px){.ds__choice-grid{grid-template-columns:1fr}}.ds__choice{background:#f4e7c80a;border:1px solid var(--ds-line);color:var(--ds-text);padding:18px 16px;border-radius:8px;font-family:var(--ds-display);font-weight:600;font-size:15px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;text-align:left}.ds__choice span{display:block;margin-top:4px;font-family:var(--ds-mono);font-size:10.5px;color:var(--ds-text-quiet);font-weight:400;letter-spacing:.3px}.ds__choice:hover:not(:disabled){background:#f4e7c81a;border-color:var(--ds-flame);transform:translateY(-2px)}.ds__choice:disabled{opacity:.5;cursor:not-allowed}.ds__choice--correct{background:#a8ff3a2e;border-color:var(--ds-good);color:var(--ds-good)}.ds__choice--wrong{background:#ff5f7a2e;border-color:var(--ds-bad);color:var(--ds-bad)}.ds__rhythm-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;width:100%;max-width:520px}.ds__rhythm-step{aspect-ratio:1;border-radius:4px;background:#f4e7c81a;transition:background .1s ease;position:relative}.ds__rhythm-step--cue{background:var(--ds-flame)}.ds__rhythm-step--player{background:var(--ds-good)}.ds__rhythm-step--cue.ds__rhythm-step--player{background:linear-gradient(135deg,var(--ds-flame),var(--ds-good))}.ds__rhythm-step--miss{background:var(--ds-bad);opacity:.5}.ds__rhythm-step:after{content:attr(data-step);position:absolute;bottom:-16px;left:50%;transform:translate(-50%);font-family:var(--ds-mono);font-size:9px;color:var(--ds-text-quiet)}.ds__pad-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.ds__pad{aspect-ratio:1.4;border-radius:10px;background:linear-gradient(180deg,var(--pc, var(--ds-flame)) 0%,color-mix(in srgb,var(--pc) 40%,#1a0820) 100%);border:2px solid rgba(0,0,0,.3);color:#000000c7;font-family:var(--ds-display);font-weight:800;font-size:22px;letter-spacing:.05em;cursor:pointer;transition:transform .06s ease,filter .06s ease}.ds__pad:active,.ds__pad--press{transform:scale(.96);filter:brightness(1.18)}.ds__piano-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:14px;max-width:520px;width:100%;margin-left:auto;margin-right:auto}.ds__piano-key{aspect-ratio:.42;background:linear-gradient(180deg,#f4e7c8,#d8c79f);border:1px solid rgba(0,0,0,.3);border-radius:0 0 6px 6px;color:#0000009e;font-family:var(--ds-display);font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer;transition:transform .06s ease,filter .06s ease,background .06s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;box-shadow:0 2px #0000002e,inset 0 -4px #0000001a}.ds__piano-key:hover:not(:disabled){filter:brightness(1.04)}.ds__piano-key:active,.ds__piano-key--press{transform:translateY(2px);background:linear-gradient(180deg,var(--ds-flame),#d49b3a);box-shadow:0 0 #0000}.ds__piano-key--cue{background:linear-gradient(180deg,var(--ds-flame),#d49b3a)}.ds__piano-key:disabled{opacity:.55;cursor:not-allowed}.ds__celebrate{position:fixed;inset:0;z-index:9999;background:#000000c7;backdrop-filter:blur(20px);display:grid;place-items:center;padding:22px;animation:ds-fade-in .42s ease}@keyframes ds-fade-in{0%{opacity:0}to{opacity:1}}.ds__celebrate-card{background:linear-gradient(180deg,#1a0a14,#0d0610);border:1px solid var(--ds-line);border-radius:18px;padding:36px 32px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 60px #0000008c;animation:ds-pop-in .5s cubic-bezier(.2,.8,.2,1)}@keyframes ds-pop-in{0%{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ds__celebrate-stars{font-family:var(--ds-display);font-weight:800;font-size:56px;color:var(--ds-flame);letter-spacing:.05em;margin-bottom:12px;line-height:1;animation:ds-star-pulse 1.2s ease-in-out infinite alternate}@keyframes ds-star-pulse{0%{transform:scale(1)}to{transform:scale(1.06)}}.ds__celebrate-noun-label{font-family:var(--ds-mono);font-size:10px;color:var(--ds-flame);letter-spacing:.6px;margin:0 0 14px;text-transform:uppercase}.ds__celebrate-noun{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,var(--ds-walnut),var(--ds-velvet));display:grid;place-items:center}.ds__celebrate-noun img{width:80%;image-rendering:pixelated}.ds__celebrate-name{font-family:var(--ds-display);font-weight:800;font-size:26px;margin:0 0 6px;letter-spacing:-.015em}.ds__celebrate-msg{font-family:var(--ds-body);font-size:14px;color:var(--ds-text-mute);line-height:1.5;margin:0 0 22px}.ds__foot{padding:36px 0 0;border-top:1px solid var(--ds-line);margin-top:36px;font-family:var(--ds-mono);font-size:11px;color:var(--ds-text-quiet);line-height:1.7;text-align:center}.ds__foot a{color:var(--ds-flame);text-decoration:none}.ds__foot a:hover{text-decoration:underline}.ds__foot-credit{margin-top:14px;font-size:10.5px}.ds__foot-credit code{font-family:var(--ds-mono);background:var(--ds-velvet);padding:1px 5px;border-radius:3px;color:var(--ds-flame)}
