:root{
  --C:#FFD60A; --A:#FF8A3D; --G:#3AB8FF; --E:#39E991; --D:#B47CFF; --root:#FF3B4E;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  font-family:"Segoe UI Variable Display","Segoe UI","Yu Gothic UI","Meiryo",sans-serif;
  color:#e9ecf5;background:#06070c;overflow-x:hidden;
}
.aurora{position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(40% 35% at 20% 20%, rgba(255,59,78,.20), transparent 70%),
   radial-gradient(35% 30% at 80% 20%, rgba(58,184,255,.17), transparent 70%),
   radial-gradient(40% 40% at 60% 90%, rgba(57,233,145,.12), transparent 70%),
   radial-gradient(30% 30% at 12% 85%, rgba(180,124,255,.16), transparent 70%),
   radial-gradient(25% 25% at 90% 75%, rgba(255,214,10,.10), transparent 70%);
  filter:blur(30px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-3%) rotate(7deg) scale(1.05)}}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 30%,#fff,transparent),
  radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),
  radial-gradient(1px 1px at 25% 55%,#fff,transparent),radial-gradient(1px 1px at 55% 12%,#fff,transparent);}
.wrap{max-width:1800px;margin:0 auto;padding:22px 26px 30px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:26px;font-weight:800;
  background:conic-gradient(from 200deg,var(--C),var(--A),var(--root),var(--D),var(--G),var(--E),var(--C));
  color:#0b0c12;box-shadow:0 0 30px rgba(255,140,80,.35)}
h1{margin:0;font-size:26px;letter-spacing:.5px;font-weight:800;
  background:linear-gradient(90deg,#fff,#ffd9a0 40%,#9fdcff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand p{margin:2px 0 0;font-size:13px;color:#9aa3b8}
.hright{text-align:right}
.chordname{font-size:58px;font-weight:900;line-height:1;letter-spacing:1px;
  background:linear-gradient(180deg,#fff 20%,#ff8f9b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,59,78,.45))}
.chordname.pulse,.pump{animation:pulse .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes pulse{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.scalename{font-size:14px;color:#9fdcff;font-weight:700;margin-top:6px;letter-spacing:.5px;min-height:18px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;padding:14px 18px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:11px;letter-spacing:1.5px;color:#8f98ad;text-transform:uppercase}
.field>label b{color:#fff;font-size:13px;margin-left:4px}
.field>label.switch{font-size:13px;letter-spacing:0;text-transform:none;color:#c9cfdd}
select{appearance:none;background:#121522 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bbb' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 36px 9px 14px;font-size:16px;font-weight:700;
  min-width:130px;cursor:pointer;font-family:inherit;transition:.2s}
select:hover{border-color:rgba(255,255,255,.35)}
select:focus{outline:none;border-color:#ff8f9b;box-shadow:0 0 0 3px rgba(255,59,78,.25)}
select:disabled{opacity:.45;cursor:not-allowed}
option{background:#121522;color:#fff}
input[type=range]{accent-color:#ff3b4e;width:170px;height:38px;cursor:pointer}
.seg{display:flex;background:#10131e;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:3px}
.seg button{background:none;border:0;color:#aab2c5;padding:7px 14px;border-radius:9px;cursor:pointer;font-weight:700;font-family:inherit;font-size:14px;white-space:nowrap}
.seg button.on{background:linear-gradient(180deg,#2a3048,#1d2235);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.forms{display:flex;gap:6px}
.ft{--c:#fff;display:flex;align-items:center;gap:7px;background:#10131e;border:1.5px solid var(--c);color:#fff;
  padding:6px 11px;border-radius:11px;cursor:pointer;font-weight:800;font-family:inherit;font-size:14px;
  box-shadow:0 0 14px color-mix(in srgb,var(--c) 35%,transparent);transition:.2s}
.ft i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ft.off{opacity:.3;box-shadow:none;border-color:rgba(255,255,255,.15)}
.switch{display:flex;align-items:center;gap:8px;font-size:13px;color:#c9cfdd;cursor:pointer;user-select:none;height:38px}
.switch input{display:none}
.switch span{width:38px;height:22px;border-radius:20px;background:#2a2f40;position:relative;transition:.2s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:#ff3b4e}
.switch input:checked+span::after{left:19px}
.switch.off{opacity:.4}
.mixer{position:fixed;top:84px;right:26px;z-index:60;min-width:320px;max-width:400px;padding:14px 18px}
.mrow{display:flex;align-items:center;gap:10px;margin:7px 0}
.mrow span{width:120px;font-size:12px;color:#c9cfdd;flex:none}
.mrow input{flex:1;accent-color:#ff8f9b}
.spacer{flex:1}
.actions{display:flex;gap:10px}
.btn{font-family:inherit;font-size:15px;font-weight:800;padding:10px 18px;border-radius:12px;cursor:pointer;color:#fff;
  background:#1a1e2e;border:1px solid rgba(255,255,255,.15);transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.35)}
.btn.primary{background:linear-gradient(135deg,#ff3b4e,#ff8a3d);border:0;box-shadow:0 6px 24px rgba(255,80,70,.4)}
.btn.primary.running{background:linear-gradient(135deg,#3ab8ff,#b47cff);box-shadow:0 6px 24px rgba(90,140,255,.45)}
.btn.big{font-size:17px;padding:12px 26px}
.btn.small{font-size:12px;padding:6px 12px}
.boardwrap{padding:10px 10px 4px;margin-bottom:16px;position:relative;overflow:hidden}
.scroller{overflow-x:auto}
#board{display:block;width:100%;min-width:1150px;height:auto;user-select:none}
.info{display:flex;gap:16px;flex-wrap:wrap}
.card{padding:14px 18px}
.card.grow{flex:1;min-width:420px}
.card h3{margin:0 0 10px;font-size:12px;letter-spacing:1.5px;color:#8f98ad;font-weight:700}
.card h3 em{font-style:normal;color:#fff;margin-left:8px;letter-spacing:0;font-size:13px}
.tones{display:flex;gap:8px;flex-wrap:wrap}
.tone{--c:#fff;display:flex;flex-direction:column;align-items:center;min-width:56px;padding:8px 10px;border-radius:12px;
  background:#0f121c;border:1.5px solid var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 30%,transparent)}
.tone b{font-size:12px;color:var(--c)}
.tone span{font-size:20px;font-weight:800}
.tone.muted{box-shadow:none;border-color:color-mix(in srgb,var(--c) 45%,transparent);min-width:48px}
.tone.muted span{font-size:17px;color:#c4cbe0}
.scnote{font-size:12px;color:#ffb3bb;margin-top:8px;min-height:14px}
.legend{display:flex;gap:14px;margin-top:12px;font-size:12px;color:#9aa3b8;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.timeline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tl{--c:#fff;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:#0f121c;border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:12px;padding:6px 12px;color:#fff;transition:.2s}
.tl b{font-size:18px;color:var(--c)}
.tl span{font-size:11px;color:#9aa3b8}
.tl:hover{transform:translateY(-2px)}
.tl.on{background:color-mix(in srgb,var(--c) 22%,#0f121c);border-color:var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.arrow{color:#566;font-size:14px}
footer{margin-top:16px;font-size:12px;color:#7d869b;text-align:center;line-height:2}
kbd{background:#1a1e2e;border:1px solid #333a50;border-radius:5px;padding:1px 6px;font-family:inherit;color:#cfd5e3}

/* ===== Exercise ===== */
.ex{padding:14px 18px;margin-bottom:16px}
.exhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.exbody{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;align-items:stretch}
.stats{display:grid;grid-template-columns:repeat(5,minmax(86px,1fr));gap:8px}
.stat{background:#0f121c;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.stat b{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;display:inline-block}
.stat span{font-size:10px;letter-spacing:1.5px;color:#8f98ad}
#stScore{background:linear-gradient(180deg,#fff,#ffb36b);-webkit-background-clip:text;background-clip:text;color:transparent}
#stCombo{color:#ff8f9b}
.stat.bump b{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.28)}}
.qarea,.pgarea{flex:1;min-width:400px;position:relative;border-radius:16px;padding:16px 20px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,59,78,.13),transparent 60%),radial-gradient(100% 120% at 100% 100%,rgba(58,184,255,.10),transparent 60%),#0d1019;
  border:1px solid rgba(255,255,255,.08)}
.qarea{display:flex;flex-direction:column;justify-content:center;gap:14px}
.prompt{font-size:21px;font-weight:800;line-height:1.7;padding-right:90px}
.prompt .tag{--c:#fff;display:inline-block;padding:0 10px;border-radius:10px;border:1.5px solid var(--c);color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);margin:0 2px;line-height:1.5}
.prompt small{font-size:14px;color:#9aa3b8;margin-left:10px;font-weight:700}
.prompt b{color:#ffd36b}
.prompt.good{animation:good .5s}
@keyframes good{30%{transform:scale(1.03);text-shadow:0 0 18px #39e991}}
.answers{display:flex;gap:10px;flex-wrap:wrap}
.ans{--c:#fff;font-family:inherit;font-size:21px;font-weight:900;min-width:76px;padding:9px 16px;border-radius:14px;cursor:pointer;color:var(--c);
  background:#0f121c;border:2px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--c) 25%,transparent);transition:.15s}
.ans small{display:block;font-size:10px;color:#8f98ad;font-weight:700}
.ans:hover{transform:translateY(-2px)}
.ans.ok{background:#39e991;color:#06120b;border-color:#39e991;box-shadow:0 0 26px #39e991}
.ans.ok small{color:#06120b}
.ans.ng{animation:shake .4s;background:#3a0f16;border-color:#ff3b4e;color:#ff8f9b}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.skip{position:absolute;right:14px;top:12px}
.pgarea{display:grid;grid-template-columns:auto auto 1fr;gap:10px 28px;align-items:center}
.pgnow,.pgnext{display:flex;flex-direction:column}
.pgnow span,.pgnext span{font-size:11px;letter-spacing:2px;color:#8f98ad;font-weight:700}
.pgnow b{font-size:46px;font-weight:900;line-height:1.1;display:inline-block;
  background:linear-gradient(180deg,#fff 20%,#ff8f9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.pgnext b{font-size:26px;color:#9fdcff;font-weight:800}
.beats{display:flex;gap:10px;justify-self:end}
.beats i{width:20px;height:20px;border-radius:50%;background:#1d2233;border:1px solid rgba(255,255,255,.12);transition:.06s}
.beats i.on{background:#ff3b4e;box-shadow:0 0 16px #ff3b4e;transform:scale(1.15)}
.beats i:first-child.on{background:#ffd60a;box-shadow:0 0 18px #ffd60a}
.pgprompt{grid-column:1/-1;font-size:18px;padding-right:0}
.chips{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{padding:5px 12px;border-radius:10px;background:#0f121c;border:1px solid rgba(255,255,255,.1);font-weight:800;color:#aab2c5;font-size:14px;transition:.2s}
.chip.on{color:#fff;border-color:#ff8f9b;background:rgba(255,59,78,.2);box-shadow:0 0 14px rgba(255,59,78,.45)}
.result{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,6,10,.62);backdrop-filter:blur(6px);z-index:5;animation:pulse .4s}
.rcard{text-align:center;padding:26px 46px;border-radius:22px;background:linear-gradient(180deg,#1d2234,#0f121c);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(255,59,78,.2)}
.rt{font-size:14px;letter-spacing:5px;color:#9aa3b8;font-weight:800}
.rs{font-size:76px;font-weight:900;line-height:1.1;background:linear-gradient(180deg,#fff,#ffb36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.rd{color:#c9cfdd;margin:4px 0 12px}
.rnew{display:inline-block;padding:4px 16px;border-radius:20px;background:linear-gradient(90deg,#ffd60a,#ff8a3d);color:#111;font-weight:900;margin-bottom:14px;animation:pulse .6s}
.ra{display:flex;gap:10px;justify-content:center}

/* SVG anim */
.pop{transform-box:fill-box;transform-origin:center;animation:pop .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.ni{transition:opacity .35s, filter .35s}
.ni.semi{opacity:.4}
.ni.dim{opacity:.12;filter:grayscale(1)}
.note{cursor:pointer}
.note:hover .ni:not(.dim){filter:brightness(1.35)}
.ping{fill:none;stroke:#fff;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.ping.go{animation:ping .75s ease-out}
@keyframes ping{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.vring{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:3 4;opacity:0;transition:opacity .3s;transform-box:fill-box;transform-origin:center}
.vring.on{opacity:.9;animation:spin 7s linear infinite}
.nring{fill:none;stroke-width:2.2;stroke-dasharray:4 4;transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite}
.demo{transform-box:fill-box;transform-origin:center;animation:demoIn .45s cubic-bezier(.2,1.6,.4,1) both}
.demo.ghostDot{animation:none}
@keyframes demoIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.demo .dp{fill:#39E991;stroke:#0a2417;stroke-width:1.5;filter:drop-shadow(0 0 5px #39E991)}
.demo .gring{fill:none;stroke:#39E991;stroke-width:3;stroke-linecap:round;transform-box:fill-box}
.demo .gtrack{fill:none;stroke:#39E991;stroke-opacity:.25;stroke-width:3}
.demo text{fill:#062b16;font-weight:900}
@keyframes spin{to{transform:rotate(360deg)}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.box{cursor:pointer;transition:opacity .4s}
.box.faded{opacity:.13}
.box.focused .main{stroke-width:4}
.box.focused .fillp{fill-opacity:.16}
.box .fillp{transition:fill-opacity .3s}
.box:hover .fillp{fill-opacity:.14}
.sweep{animation:sweep 1.2s cubic-bezier(.5,0,.3,1) forwards}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(1900px)}}
.str.vib{animation:vib .07s linear 9}
@keyframes vib{0%,100%{transform:translateY(0)}25%{transform:translateY(1.3px)}75%{transform:translateY(-1.3px)}}
.hit{fill:#fff;fill-opacity:0;cursor:crosshair}
.hit:hover{fill-opacity:.07}
.xmark{transform-box:fill-box;transform-origin:center;animation:xfade 1.1s ease-out forwards}
@keyframes xfade{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.12)}70%{opacity:1;transform:scale(1)}100%{opacity:0}}
.qring{fill:none;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:qring 1.2s ease-out infinite}
@keyframes qring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.floatup{animation:floatup 1.2s ease-out forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(12px)}20%{opacity:1}100%{opacity:0;transform:translateY(-36px)}}
#board.fast .pop{animation-duration:.28s;animation-delay:0s!important}
#board.fast .draw{animation-duration:.35s;animation-delay:0s!important}