/* V·SAG Synth — cyberpunk / dystopian sound lab. Self-contained theme. */
:root{
  --bg:#05060a;
  --bg2:#0a0e1a;
  --panel:rgba(10,16,30,.72);
  --ink:#dff7ff;
  --muted:#7184a6;
  --cyan:#05d9e8;
  --magenta:#ff2a6d;
  --yellow:#fee440;
  --green:#39ff14;
  --line:rgba(5,217,232,.28);
  --maxw:1180px;
  --wk:44px;   /* white-key width  — keep in sync with synth.js WK */
  --bk:28px;   /* black-key width  — keep in sync with synth.js BK */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
em{font-style:normal; color:var(--magenta); text-shadow:0 0 14px rgba(255,42,109,.55)}
b{color:var(--ink); font-weight:400}
a{color:var(--cyan); text-decoration:none}
a:hover{text-shadow:0 0 12px var(--cyan)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---- backdrop: perspective grid + scanlines ---- */
.grid-bg{position:fixed; inset:0; z-index:-2; background:
   radial-gradient(120% 80% at 50% -10%, #12122a 0%, var(--bg) 55%),
   radial-gradient(80% 60% at 90% 110%, rgba(255,42,109,.10), transparent 60%),
   radial-gradient(70% 60% at 10% 110%, rgba(5,217,232,.10), transparent 60%);}
.grid-bg::after{content:""; position:absolute; inset:-50% 0 0 0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(62deg); transform-origin:50% 0;
  opacity:.5; mask-image:linear-gradient(to top, #000 0%, transparent 70%);}
.scanlines{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply; opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .grid-bg::after{animation:drift 16s linear infinite}
  @keyframes drift{from{background-position:0 0,0 0}to{background-position:0 46px,46px 0}}
}

/* ---- nav ---- */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(9px);
  background:linear-gradient(180deg, rgba(5,6,10,.92), rgba(5,6,10,.6));
  border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; justify-content:space-between; height:60px; position:relative}
.brand{display:flex; align-items:baseline; gap:.5ch; font-family:"Orbitron",sans-serif; letter-spacing:.06em}
.brand b{font-weight:900; font-size:1.15rem; color:var(--ink); text-shadow:0 0 12px rgba(5,217,232,.5)}
.brand span{color:var(--magenta); font-size:.8rem; letter-spacing:.18em; text-shadow:0 0 10px rgba(255,42,109,.5)}
.nav__links{display:flex; align-items:center; gap:.85rem; font-size:.92rem}
.nav__links a{color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
.nav__links a.pill{border:1px solid var(--line); border-radius:2px; padding:.2rem .6rem; color:var(--cyan)}
.nav__links a.pill:hover{background:rgba(5,217,232,.1)}
.navtoggle,.navtoggle-cb{display:none}

/* ---- hero ---- */
.hero{padding:54px 0 14px; max-width:820px}
.eyebrow{color:var(--cyan); letter-spacing:.32em; font-size:.78rem; margin:0 0 .6rem; text-transform:uppercase}
h1{font-family:"Orbitron",sans-serif; font-weight:900; font-size:clamp(2.1rem,6vw,4rem);
  line-height:1.02; margin:0 0 .5rem; letter-spacing:.01em;
  text-shadow:0 0 22px rgba(5,217,232,.25)}
.lead{color:#b9c8e6; font-size:1.06rem; max-width:680px}
.warn{color:var(--yellow); font-size:.9rem; margin-top:1rem; text-shadow:0 0 10px rgba(254,228,64,.35)}
.warn.gone{display:none}

/* ---- oscilloscope ---- */
.scopebar{position:relative; margin:18px 0 8px; border:1px solid var(--line);
  background:rgba(2,4,10,.7); border-radius:4px; overflow:hidden;
  box-shadow:inset 0 0 40px rgba(5,217,232,.08)}
#scope{display:block; width:100%; height:120px}
.scope-tag{position:absolute; top:8px; left:12px; color:var(--cyan); font-size:.7rem;
  letter-spacing:.28em; opacity:.7}

/* ---- rack of modules ---- */
.rack{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:14px 0 26px}
.module{background:var(--panel); border:1px solid var(--line); border-radius:5px;
  padding:16px 16px 18px; position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 18px 40px -24px rgba(5,217,232,.5)}
.module::before{content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta)); opacity:.7;
  border-radius:5px 5px 0 0}
.mod-title{font-family:"Orbitron",sans-serif; font-size:.86rem; letter-spacing:.12em;
  margin:.2rem 0 .35rem; color:var(--ink)}
.mod-sub{color:var(--muted); font-size:.78rem; margin:0 0 .9rem; line-height:1.4}

/* waveform picker */
.wave-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wave{display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  background:rgba(5,217,232,.05); border:1px solid var(--line); color:var(--muted);
  border-radius:4px; padding:8px 4px; font:inherit; font-size:.75rem; transition:.15s}
.wave svg{width:40px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6}
.wave:hover{color:var(--ink); border-color:var(--cyan)}
.wave.on{color:var(--bg); background:var(--cyan); border-color:var(--cyan);
  box-shadow:0 0 18px rgba(5,217,232,.6)}

/* sliders */
.knob{display:block; margin:.55rem 0}
.knob span{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-bottom:.25rem}
.knob i{font-style:normal; color:var(--cyan)}
.knob.vol{margin-top:1rem}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px;
  background:linear-gradient(90deg,var(--cyan),rgba(5,217,232,.15)); border-radius:3px; outline:none; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--ink); border:2px solid var(--cyan); box-shadow:0 0 12px var(--cyan); cursor:pointer}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%;
  background:var(--ink); border:2px solid var(--cyan); box-shadow:0 0 12px var(--cyan); cursor:pointer}

/* segmented buttons */
.seg{display:flex; gap:6px; flex-wrap:wrap; margin:.2rem 0 .4rem}
.seg button{flex:1; min-width:0; cursor:pointer; font:inherit; font-size:.78rem; padding:7px 6px;
  background:rgba(255,42,109,.06); border:1px solid var(--line); color:var(--muted); border-radius:4px; transition:.15s}
.seg button:hover{color:var(--ink); border-color:var(--magenta)}
.seg button.on{color:var(--bg); background:var(--magenta); border-color:var(--magenta);
  box-shadow:0 0 16px rgba(255,42,109,.55)}

/* presets */
.presets{display:flex; flex-direction:column; gap:7px}
.preset{cursor:pointer; font:inherit; font-size:.82rem; text-align:left; padding:8px 11px;
  background:rgba(254,228,64,.05); border:1px solid var(--line); color:var(--ink);
  border-radius:4px; transition:.15s; display:flex; justify-content:space-between; align-items:center}
.preset:hover{border-color:var(--yellow); background:rgba(254,228,64,.12)}
.preset.on{border-color:var(--yellow); color:var(--yellow); box-shadow:0 0 14px rgba(254,228,64,.3)}
.preset small{color:var(--muted); font-size:.68rem}

/* ---- keyboard ---- */
.kbwrap{margin:8px 0 30px}
.kb-bar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:10px}
.kb-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.oct{cursor:pointer; font:inherit; font-size:.78rem; padding:6px 11px; color:var(--cyan);
  background:rgba(5,217,232,.07); border:1px solid var(--line); border-radius:4px}
.oct:hover{background:rgba(5,217,232,.16)}
.oct-read{color:var(--ink); font-size:.85rem; letter-spacing:.1em; min-width:74px; text-align:center}
.kb-hint{color:var(--muted); font-size:.78rem}
.toggle{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.78rem; cursor:pointer}
.toggle input{accent-color:var(--cyan); width:15px; height:15px}

.keyboard{position:relative; height:158px; overflow-x:auto; overflow-y:hidden;
  border:1px solid var(--line); border-radius:6px; background:#02040a;
  padding:0; box-shadow:inset 0 0 50px rgba(5,217,232,.07); -webkit-overflow-scrolling:touch}
.keys{position:relative; height:156px}
.key{position:absolute; top:0; cursor:pointer; user-select:none; -webkit-user-select:none}
.key.white{width:var(--wk); height:150px; background:linear-gradient(#e9f6ff,#bcd3e6);
  border:1px solid #02040a; border-radius:0 0 5px 5px; z-index:1}
.key.black{width:var(--bk); height:96px; background:linear-gradient(#1a2030,#05070d);
  border:1px solid #000; border-radius:0 0 4px 4px; z-index:2;
  box-shadow:0 4px 6px rgba(0,0,0,.6)}
.key .lbl{position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  font-size:.62rem; pointer-events:none}
.key.white .lbl{color:#33506b}
.key.black .lbl{color:#7c93b3; bottom:6px}
.keyboard.hide-names .lbl{display:none}
.key.white:active,.key.white.active{background:linear-gradient(var(--cyan),#03a7b3); box-shadow:0 0 20px var(--cyan)}
.key.black:active,.key.black.active{background:linear-gradient(#07e6f5,#048c97); box-shadow:0 0 18px var(--cyan)}
/* chord-role highlights */
.key.role1{background:linear-gradient(var(--cyan),#038);} .key.white.role1{background:linear-gradient(#7df3ff,#05c2d0)}
.key.role3{background:linear-gradient(var(--magenta),#7a0b34)!important; box-shadow:0 0 20px var(--magenta)!important}
.key.role5{background:linear-gradient(var(--yellow),#9c8a00)!important; box-shadow:0 0 20px rgba(254,228,64,.7)!important}
.key.role1{box-shadow:0 0 20px var(--cyan)!important}

/* ---- theory / chord teacher ---- */
.theory{background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:24px; margin-bottom:30px;
  box-shadow:0 24px 60px -36px rgba(255,42,109,.6)}
.theory-head h2{font-family:"Orbitron",sans-serif; font-size:1.15rem; letter-spacing:.1em; margin:0 0 .5rem}
.theory-head p{color:#b9c8e6; max-width:760px; margin:0 0 1.2rem; font-size:.95rem}
.c1{color:var(--cyan)} .c3{color:var(--magenta)} .c5{color:var(--yellow)}

.theory-ctrl{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
.tc-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tc-field{display:flex; flex-direction:column; gap:5px; font-size:.78rem; color:var(--muted)}
.tc-field select{font:inherit; font-size:.95rem; background:#04060d; color:var(--ink);
  border:1px solid var(--cyan); border-radius:4px; padding:8px 12px; cursor:pointer; min-width:120px}
.seg.quality{max-width:240px; flex:0 0 auto}
.seg.quality button{padding:9px 18px}
.tc-actions{gap:12px}
.btn{cursor:pointer; font:inherit; font-size:.86rem; padding:10px 18px; border-radius:4px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink); transition:.15s}
.btn:hover{border-color:var(--ink)}
.btn--cyan{background:var(--cyan); color:var(--bg); border-color:var(--cyan); font-weight:700;
  box-shadow:0 0 18px rgba(5,217,232,.5)}
.btn--cyan:hover{box-shadow:0 0 26px rgba(5,217,232,.8)}
.toggle.harm{font-size:.8rem; color:var(--muted)}

/* readout */
.readout{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 22px}
.ro-card{border:1px solid var(--line); border-radius:5px; padding:14px 16px; background:rgba(2,4,10,.55)}
.ro-card .role{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase}
.ro-card .note{font-family:"Orbitron",sans-serif; font-size:1.9rem; margin:.15rem 0; line-height:1}
.ro-card .desc{color:var(--muted); font-size:.78rem; line-height:1.4}
.ro-r1{border-color:rgba(5,217,232,.5)} .ro-r1 .role,.ro-r1 .note{color:var(--cyan)}
.ro-r3{border-color:rgba(255,42,109,.5)} .ro-r3 .role,.ro-r3 .note{color:var(--magenta)}
.ro-r5{border-color:rgba(254,228,64,.5)} .ro-r5 .role,.ro-r5 .note{color:var(--yellow)}
.ro-verdict{grid-column:1/-1; border:1px dashed var(--line); border-radius:5px; padding:13px 16px;
  background:rgba(255,255,255,.02); color:#b9c8e6; font-size:.9rem}
.ro-verdict b{color:var(--ink)}

/* lesson cards */
.lesson{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.lcard{border:1px solid var(--line); border-radius:5px; padding:14px 16px; background:rgba(2,4,10,.4)}
.lcard h3{font-family:"Orbitron",sans-serif; font-size:.86rem; letter-spacing:.06em; margin:0 0 .5rem}
.lcard p{color:#a9bbd8; font-size:.82rem; margin:0; line-height:1.5}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); padding:24px 0 60px; color:var(--muted); font-size:.82rem}

/* ---- responsive ---- */
@media (max-width:980px){
  .rack{grid-template-columns:1fr 1fr}
  .readout,.lesson{grid-template-columns:1fr}
  .ro-card .note{font-size:1.6rem}
}
@media (max-width:760px){
  .nav__links{position:absolute; top:60px; right:0; flex-direction:column; align-items:flex-start;
    gap:.4rem; background:#080c16; border:1px solid var(--line); border-radius:5px; padding:14px 18px;
    min-width:190px; display:none; box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .navtoggle-cb:checked ~ .nav__links{display:flex}
  .navtoggle{display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:6px}
  .navtoggle span{width:24px; height:2px; background:var(--cyan); transition:.2s}
  .navtoggle-cb:checked ~ .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle-cb:checked ~ .navtoggle span:nth-child(2){opacity:0}
  .navtoggle-cb:checked ~ .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:560px){
  .rack{grid-template-columns:1fr}
  .hero{padding-top:36px}
}

/* ---- book banner (sticky "New book" header, shared house element, neon skin) ---- */
.bookbanner{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4rem .8rem;
  padding:.5rem 1.2rem; text-align:center; border-bottom:1px solid var(--line); text-decoration:none;
  background:linear-gradient(90deg, rgba(255,42,109,.08), rgba(5,217,232,.12), rgba(255,42,109,.08)); transition:background .25s}
.bookbanner:hover{background:linear-gradient(90deg, rgba(255,42,109,.16), rgba(5,217,232,.22), rgba(255,42,109,.16))}
.bookbanner__tag{font-family:"Orbitron",sans-serif; font-size:.6rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--bg); background:var(--cyan); padding:.16rem .55rem; border-radius:2px; font-weight:700;
  box-shadow:0 0 12px rgba(5,217,232,.5)}
.bookbanner__title{color:var(--ink); font-size:.95rem; letter-spacing:.02em}
.bookbanner__note{font-size:.78rem; color:var(--muted); transition:color .2s}
.bookbanner:hover .bookbanner__note{color:var(--cyan)}
.nav__links a.pill.active{color:var(--magenta); border-color:var(--magenta); box-shadow:0 0 12px rgba(255,42,109,.3)}


/* book cross-link bridge (added 2026-05-31) */
.bookbridge{border-top:1px solid rgba(150,150,180,.18);margin-top:1.4rem;padding:2.6rem 0 1rem}
.bookbridge h2{font-size:clamp(1.4rem,3.5vw,2rem);line-height:1.1;margin:.5rem 0 .8rem}
.bookbridge p{opacity:.86;max-width:48rem;margin-bottom:1.2rem;line-height:1.65}
.bookbridge em{font-style:italic}
.bookbridge .bb-links{display:flex;flex-wrap:wrap;gap:.7rem}