/* Layout: a concert hall after dark. One 1120px column of glass panels on deep navy; brass for what you touch, claret for what's playing.
   Views: #home (the site), #studio (the music room), and an edit mode over #home for the owner. */
:root{
  --bg-0:#04070f; --bg-1:#0a1124; --bg-2:#131d3d;
  --panel:rgba(14,22,46,.72); --panel-solid:#0c1430; --panel-2:#101a3a;
  --line:rgba(170,188,255,.12); --line-strong:rgba(226,178,90,.34);
  --text:#efe8d8; --muted:#a1a9c4; --dim:#69729a;
  --accent:#e2b25a; --accent-2:#d9607f; --cool:#93b6ff;
  --on-accent:#170f02;
  --paper:#f4eddd; --paper-2:#ebe2cd; --ink:#1a1f36; --ink-soft:#6b6a7a;
  --ok:#7fd6a4; --warn:#f0c264; --bad:#ff7a8a;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"IBM Plex Mono","JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --music:"Noto Music","Bravura Text","Segoe UI Symbol","Apple Symbols",serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --sunk:rgba(0,0,0,.28); --sunk-2:rgba(0,0,0,.2); --hover-wash:rgba(255,255,255,.06); --chip-bg:rgba(255,255,255,.03);
  color-scheme:dark;
}
:root[data-palette="burgundy"]{
  --bg-0:#0b0306; --bg-1:#1a0810; --bg-2:#2e0f1d;
  --panel:rgba(40,12,24,.72); --panel-solid:#1d0911; --panel-2:#2a0f1b;
  --line:rgba(255,196,206,.12); --line-strong:rgba(240,184,130,.36);
  --text:#f6ebe4; --muted:#c9a8b1; --dim:#8c6672;
  --accent:#f0b882; --accent-2:#ff7d98; --cool:#ffc6b3; --on-accent:#1d0a03;
}
:root[data-palette="terminal"]{
  --bg-0:#05080b; --bg-1:#0c1218; --bg-2:#0f1922;
  --panel:rgba(12,19,25,.74); --panel-solid:#0b1117; --panel-2:#0f1820;
  --line:rgba(120,255,200,.11); --line-strong:rgba(120,255,200,.28);
  --text:#d7fbe8; --muted:#8aa79b; --dim:#5b6f66;
  --accent:#3ef5b8; --accent-2:#6cc8ff; --cool:#6cc8ff; --on-accent:#04110c;
}
:root[data-palette="light"]{
  --bg-0:#dde3ee; --bg-1:#eceff6; --bg-2:#fbfcfe;
  --panel:rgba(255,255,255,.76); --panel-solid:#ffffff; --panel-2:#f3f5fa;
  --line:rgba(26,38,82,.13); --line-strong:rgba(155,100,22,.42);
  --text:#151a31; --muted:#4b5371; --dim:#767d99;
  --accent:#9b6416; --accent-2:#b2385d; --cool:#2d57c8; --on-accent:#fffaf1;
  --ok:#24935a; --warn:#a8730e; --bad:#c23a4e;
  --sunk:rgba(26,38,82,.05); --sunk-2:rgba(26,38,82,.035); --hover-wash:rgba(26,38,82,.06); --chip-bg:rgba(26,38,82,.04);
  color-scheme:light;
}
/* Liquid glass: clear, heavily blurred panels with a bright rim over a colourful wallpaper */
:root[data-palette="glass"]{
  --bg-0:#0d1238; --bg-1:#1a1d52; --bg-2:#2b2f78;
  --panel:rgba(255,255,255,.10); --panel-solid:#262a63; --panel-2:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.2); --line-strong:rgba(255,255,255,.4);
  --text:#ffffff; --muted:#dfe3f6; --dim:#aab1d6;
  --accent:#6cc4ff; --accent-2:#ff7db6; --cool:#8ce8ff; --on-accent:#0b1240;
  --ok:#5ee6a0; --warn:#ffd166; --bad:#ff7a8a;
  --sunk:rgba(255,255,255,.07); --sunk-2:rgba(255,255,255,.05); --hover-wash:rgba(255,255,255,.1); --chip-bg:rgba(255,255,255,.08);
  --rim:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), inset 1px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(255,255,255,.14);
  --lift:0 24px 60px -24px rgba(6,8,40,.55);
  color-scheme:dark;
}
:root[data-palette="glass"] body{
  background:
    radial-gradient(42% 38% at 12% 8%, #ff7ab8 0%, transparent 70%),
    radial-gradient(40% 40% at 88% 14%, #6f7bff 0%, transparent 70%),
    radial-gradient(46% 42% at 76% 78%, #1fc8c0 0%, transparent 70%),
    radial-gradient(38% 36% at 8% 82%, #ffae57 0%, transparent 70%),
    radial-gradient(60% 50% at 46% 46%, #7a4dff 0%, transparent 72%),
    linear-gradient(165deg, #1c1656, #10204f 55%, #0b2a52) fixed;
  background-attachment:fixed;
}
:root[data-palette="glass"] .glass,
:root[data-palette="glass"] .tty-btn,
:root[data-palette="glass"] .btn:not(.primary),
:root[data-palette="glass"] .theme-menu,
:root[data-palette="glass"] .tty-win,
:root[data-palette="glass"] .adm-panel,
:root[data-palette="glass"] .adm-bar{
  background:linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 42%, rgba(255,255,255,.1)), rgba(22,26,74,.22);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%);
  box-shadow:var(--rim), var(--lift);
}
:root[data-palette="glass"] .tty-win, :root[data-palette="glass"] .theme-menu, :root[data-palette="glass"] .adm-panel{background-color:rgba(22,26,74,.5)}
:root[data-palette="glass"] .btn:not(.primary):hover, :root[data-palette="glass"] .tty-btn:hover{background:linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,.1) 45%, rgba(255,255,255,.16)), rgba(22,26,74,.18); border-color:rgba(255,255,255,.5)}
:root[data-palette="glass"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -10px rgba(108,196,255,.7)}
:root[data-palette="glass"] .tty-btn, :root[data-palette="glass"] .btn{border-radius:999px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:radial-gradient(120% 70% at 50% 0%, var(--bg-2), var(--bg-1) 45%, var(--bg-0)) fixed, var(--bg-0);
  color:var(--text); font:400 15px/1.7 var(--mono);
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:20px 48px; overflow-x:hidden;
}
body.editing{padding-block-end:120px}
/* five faint staff lines across the top of the hall, opened by a treble clef in the left gutter */
:root{--clef-x:calc(50vw - 560px - 44px)}   /* the clef ends 14px before the content column */
body::after{
  content:""; position:fixed; left:0; right:0; top:84px; height:60px; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 12px);
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg, transparent calc(var(--clef-x) - 16px), #000 calc(var(--clef-x) - 6px), #000 80%, transparent);
          mask-image:linear-gradient(90deg, transparent calc(var(--clef-x) - 16px), #000 calc(var(--clef-x) - 6px), #000 80%, transparent);
}
body::before{ /* treble clef from Noto Music (SIL OFL), scaled so its curl wraps the G line (12px staff spaces) */
  content:""; position:fixed; left:var(--clef-x); top:67.5px; width:30px; height:85.2px; pointer-events:none; z-index:0;
  background:var(--line); opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 611 1732'%3E%3Cpath d='M264 533Q250 480 241.0 428.0Q232 376 232 322Q232 275 238.5 233.5Q245 192 257 157Q270 117 291.0 81.5Q312 46 335.5 23.0Q359 0 377 0Q401 0 443 85Q464 128 474.0 178.0Q484 228 484 285Q484 356 465.0 426.5Q446 497 409.5 559.0Q373 621 322 668L357 836Q372 834 382.0 833.0Q392 832 397 832Q458 832 506.0 866.5Q554 901 582.5 957.0Q611 1013 611 1080Q611 1157 571.5 1218.5Q532 1280 453 1309Q458 1326 482 1451Q488 1481 491.0 1498.5Q494 1516 495.0 1529.0Q496 1542 496 1559Q496 1609 471.5 1648.5Q447 1688 405.5 1710.0Q364 1732 313 1732Q261 1732 221.0 1712.5Q181 1693 158.0 1658.5Q135 1624 135 1579Q135 1531 161.5 1499.0Q188 1467 237 1467Q279 1467 305.5 1497.5Q332 1528 332 1570Q332 1606 307.0 1633.0Q282 1660 242 1660H232Q258 1699 314 1699Q383 1699 422.0 1654.0Q461 1609 461 1539Q461 1522 457.0 1493.5Q453 1465 443 1425Q433 1385 427.5 1359.0Q422 1333 420 1322Q386 1332 340 1332Q254 1332 172 1282Q92 1232 46.0 1150.0Q0 1068 0 973Q0 883 41 804Q82 725 142.5 659.0Q203 593 264 533ZM291 508Q314 496 340.0 463.5Q366 431 390.0 389.0Q414 347 429.0 304.5Q444 262 444 228Q444 192 433.0 171.0Q422 150 395 150Q371 150 348.5 172.0Q326 194 308.5 230.5Q291 267 281.0 312.0Q271 357 271 404Q271 436 277.5 462.0Q284 488 291 508ZM348 955Q321 961 297.0 980.5Q273 1000 258.5 1027.5Q244 1055 244 1086Q244 1111 257.0 1137.5Q270 1164 289 1180Q302 1192 315 1198Q330 1205 330 1211Q330 1214 320 1217Q282 1208 251.5 1183.0Q221 1158 203.5 1122.5Q186 1087 186 1047Q186 1004 203.5 964.0Q221 924 252.5 892.0Q284 860 324 844L295 693Q179 787 124.5 877.5Q70 968 70 1057Q70 1122 104.0 1178.0Q138 1234 197.0 1268.5Q256 1303 330 1303Q350 1303 370.5 1299.0Q391 1295 414 1289ZM445 1279Q543 1237 543 1107Q543 1064 521.0 1028.5Q499 993 462.0 972.0Q425 951 379 951Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 611 1732'%3E%3Cpath d='M264 533Q250 480 241.0 428.0Q232 376 232 322Q232 275 238.5 233.5Q245 192 257 157Q270 117 291.0 81.5Q312 46 335.5 23.0Q359 0 377 0Q401 0 443 85Q464 128 474.0 178.0Q484 228 484 285Q484 356 465.0 426.5Q446 497 409.5 559.0Q373 621 322 668L357 836Q372 834 382.0 833.0Q392 832 397 832Q458 832 506.0 866.5Q554 901 582.5 957.0Q611 1013 611 1080Q611 1157 571.5 1218.5Q532 1280 453 1309Q458 1326 482 1451Q488 1481 491.0 1498.5Q494 1516 495.0 1529.0Q496 1542 496 1559Q496 1609 471.5 1648.5Q447 1688 405.5 1710.0Q364 1732 313 1732Q261 1732 221.0 1712.5Q181 1693 158.0 1658.5Q135 1624 135 1579Q135 1531 161.5 1499.0Q188 1467 237 1467Q279 1467 305.5 1497.5Q332 1528 332 1570Q332 1606 307.0 1633.0Q282 1660 242 1660H232Q258 1699 314 1699Q383 1699 422.0 1654.0Q461 1609 461 1539Q461 1522 457.0 1493.5Q453 1465 443 1425Q433 1385 427.5 1359.0Q422 1333 420 1322Q386 1332 340 1332Q254 1332 172 1282Q92 1232 46.0 1150.0Q0 1068 0 973Q0 883 41 804Q82 725 142.5 659.0Q203 593 264 533ZM291 508Q314 496 340.0 463.5Q366 431 390.0 389.0Q414 347 429.0 304.5Q444 262 444 228Q444 192 433.0 171.0Q422 150 395 150Q371 150 348.5 172.0Q326 194 308.5 230.5Q291 267 281.0 312.0Q271 357 271 404Q271 436 277.5 462.0Q284 488 291 508ZM348 955Q321 961 297.0 980.5Q273 1000 258.5 1027.5Q244 1055 244 1086Q244 1111 257.0 1137.5Q270 1164 289 1180Q302 1192 315 1198Q330 1205 330 1211Q330 1214 320 1217Q282 1208 251.5 1183.0Q221 1158 203.5 1122.5Q186 1087 186 1047Q186 1004 203.5 964.0Q221 924 252.5 892.0Q284 860 324 844L295 693Q179 787 124.5 877.5Q70 968 70 1057Q70 1122 104.0 1178.0Q138 1234 197.0 1268.5Q256 1303 330 1303Q350 1303 370.5 1299.0Q391 1295 414 1289ZM445 1279Q543 1237 543 1107Q543 1064 521.0 1028.5Q499 993 462.0 972.0Q425 951 379 951Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
@media (max-width:1229px){ /* below this the gutter is thinner than the clef, and the cards would cut it in half */
  body::before{display:none}
  body::after{-webkit-mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent)}
}
.wrap{max-width:1120px; margin:0 auto; position:relative; z-index:1; display:grid; gap:28px}
a{color:var(--cool); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}
::selection{background:color-mix(in srgb, var(--accent) 35%, transparent)}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
button{font-family:inherit}

/* ---------- shared surfaces ---------- */
.glass{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.glow{--mx:50%; --my:-300px}
.glow::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%); opacity:0; transition:opacity .3s}
.glow::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:1px;
  background:radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 75%, transparent), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s}
.glow:hover::before,.glow:hover::after{opacity:1}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.eyebrow b{color:var(--accent); font-weight:500}
.sec{display:grid; gap:18px; position:relative}
.sec-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 24px; padding:0 4px}
.sec-head h2{font-family:var(--display); font-size:clamp(30px,4.6vw,46px); font-weight:600; letter-spacing:-.02em; line-height:1.05; font-variation-settings:"opsz" 96}
.sec-head > p{color:var(--muted); max-width:48ch}
.prompt{color:var(--muted)}
.prompt .u{color:var(--accent)} .prompt .p{color:var(--cool)}

/* ---------- top bar ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pill{display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:16px}
.brand{color:inherit} .brand:hover{text-decoration:none}
.brand-mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font:700 14px var(--display); font-style:italic;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--on-accent)}
.brand b{display:block; font-size:15px; line-height:1.2} .brand b .sl{color:var(--dim); font-weight:400}
.brand small{font-size:11px; color:var(--muted)}
.top-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.status{font-size:12px; color:var(--muted); padding:10px 14px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tty-btn{font:500 13px var(--mono); color:var(--text); background:var(--panel); border:1px solid var(--line-strong); border-radius:999px;
  padding:10px 16px; cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s; text-decoration:none!important; display:inline-flex; gap:6px; align-items:center}
.tty-btn:hover{border-color:var(--accent); box-shadow:0 0 22px color-mix(in srgb, var(--accent) 25%, transparent); transform:translateY(-1px)}
.tty-btn kbd{font:inherit; color:var(--dim)}
.edit-btn{border-color:var(--accent-2)}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:20px}
.term-chrome{display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line)}
.lights{display:flex; gap:8px}
.lights i{width:12px; height:12px; border-radius:50%; display:block}
.lights i:nth-child(1){background:#ff6b6b} .lights i:nth-child(2){background:#ffcf6b} .lights i:nth-child(3){background:#5fd47a}
.term-chrome .title{font-size:13px; color:var(--dim); margin-left:8px}
.term-body{padding:28px clamp(20px,4vw,40px) 32px; display:grid; gap:22px}
.caret{display:inline-block; width:.6em; height:1.15em; vertical-align:-.2em; background:var(--accent); margin-left:2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero h1{font-family:var(--display); font-size:clamp(48px,8.4vw,92px); font-weight:700; line-height:.95; letter-spacing:-.03em; font-variation-settings:"opsz" 144; color:var(--text)}
.hero h1 em{font-style:italic; font-weight:500; color:var(--accent)}
.hero .bio{color:var(--muted); font-size:clamp(15px,1.6vw,16.5px); max-width:58ch}
.hero .bio em{font-style:normal; color:var(--text); border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.actions{display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:10px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; font:500 14px var(--mono); color:var(--text);
  padding:13px 16px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--sunk);
  cursor:pointer; text-decoration:none!important; transition:transform .2s, border-color .2s, background .2s}
.btn:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--sunk)); transform:translateY(-2px)}
.btn:disabled{opacity:.5; cursor:default; transform:none}
.btn.primary{color:var(--on-accent); font-weight:600; border:0; background:linear-gradient(100deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 30px -8px color-mix(in srgb, var(--accent) 55%, transparent); position:relative; overflow:hidden}
.actions .btn.primary{grid-column:1/-1}
.btn.primary::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s}
.btn.primary:hover::after{transform:translateX(120%)}
.btn .arrow{transition:transform .2s} .btn:hover .arrow{transform:translateX(3px)}
.term-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px; padding-top:4px}
.signal{display:flex; flex-direction:column; overflow:hidden; min-height:420px}
.signal .term-chrome .title{margin-left:0}
.signal canvas{flex:1; width:100%; min-height:300px; display:block; cursor:grab; touch-action:pan-y}
.signal canvas:active{cursor:grabbing}
.signal-foot{display:flex; justify-content:space-between; gap:10px; padding:12px 20px; border-top:1px solid var(--line); font-size:12px; color:var(--dim)}
.signal-foot b{color:var(--accent); font-weight:500}

/* ---------- projects ---------- */
.grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.card{padding:24px; display:flex; flex-direction:column; gap:14px; transition:transform .25s, border-color .25s}
.card:hover{transform:translateY(-4px); border-color:var(--line-strong)}
.card.span-3{grid-column:span 3} .card.span-2{grid-column:span 2}
.card-top{display:flex; justify-content:space-between; align-items:start; gap:12px}
.card h3{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.01em; line-height:1.1}
.card .sub{font-size:12px; color:var(--dim); margin-top:4px}
.card p{color:var(--muted); font-size:14px}
.chip{font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; padding:5px 10px; border-radius:999px; border:1px solid currentColor; display:inline-flex; align-items:center; gap:6px}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.live{color:var(--ok)} .chip.build{color:var(--warn)} .chip.plan{color:var(--cool)} .chip.paused{color:var(--dim)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.tags > span{font-size:12px; color:var(--muted); padding:4px 10px; border-radius:8px; background:var(--chip-bg); border:1px solid var(--line); transition:color .2s, border-color .2s}
.card:hover .tags > span{color:var(--text); border-color:var(--line-strong)}
.flow{font-size:12px; color:var(--muted); background:var(--sunk); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; overflow-x:auto; white-space:nowrap}
.flow b{color:var(--accent); font-weight:500} .flow i{font-style:normal; color:var(--dim)}
.ledger-wrap{background:var(--sunk); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; overflow-x:auto}
.ledger{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums}
.ledger th{color:var(--dim); font-weight:400; text-align:left; padding:4px 6px}
.ledger td{padding:4px 6px; color:var(--muted)} .ledger .n{text-align:right}
.ledger tr.sum td{color:var(--accent); border-top:1px dashed var(--line-strong)}
.ledger tr.sum.off td{color:var(--bad)}
.card a.more{font-size:13px; align-self:flex-start}

/* ---------- experience ---------- */
.timeline{display:grid; position:relative; padding-left:34px}
.timeline::before{content:""; position:absolute; left:11px; top:18px; bottom:18px; width:2px; background:repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px)}
.t-item{position:relative; padding-bottom:18px}
.t-item:last-child{padding-bottom:0}
.t-node{position:absolute; left:-34px; top:22px; width:24px; height:24px; border-radius:50%; background:var(--panel-solid); border:1px solid var(--line-strong); display:grid; place-items:center}
.t-node::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.t-card{padding:22px 24px; display:grid; gap:8px; transition:transform .25s, border-color .25s}
.t-card:hover{transform:translateX(4px); border-color:var(--line-strong)}
.t-card h3{font-size:16px; font-weight:600}
.t-card h3 .org{color:var(--dim); font-weight:400}
.t-card .when{font-size:12px; color:var(--accent)}
.t-card p{color:var(--muted); font-size:14px; max-width:70ch}
.certs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cert{padding:22px; display:flex; gap:16px; align-items:flex-start; transition:transform .25s, border-color .25s}
.cert:hover{transform:translateY(-3px); border-color:var(--line-strong)}
.cert .badge svg{display:block}
.cert .badge{line-height:1; flex:none; min-width:54px; height:54px; padding:0 6px; border-radius:50%; display:grid; place-items:center; font:700 18px var(--display); color:var(--accent);
  border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent)}
.cert-body{display:grid; gap:4px; min-width:0}
.cert h3{font:600 19px/1.2 var(--display)}
.cert .issuer{font-size:12px; color:var(--dim)}
.cert-body > p:not(.issuer){font-size:13.5px; color:var(--muted)}
.certs .add-item{grid-column:auto; min-height:0}
@media (max-width:960px){ .certs{grid-template-columns:1fr} }
.courses{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 22px}
.courses li{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:10px; font-size:13.5px; padding:6px 0; border-bottom:1px dashed var(--line)}
.courses .code{font-size:11.5px; color:var(--dim); letter-spacing:.04em; white-space:nowrap}
.courses .cname{color:var(--text); min-width:0}
.courses .grade{font:600 13px var(--display); color:var(--muted); min-width:2.4ch; text-align:center; padding:1px 7px; border-radius:6px; border:1px solid var(--line)}
.courses .grade.top{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
@media (max-width:760px){ .courses{grid-template-columns:1fr} }
.t-points{margin:2px 0 0; padding:0; list-style:none; display:grid; gap:7px; max-width:80ch}
.t-points li{position:relative; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.6}
.t-points li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--accent); opacity:.75; transform:rotate(45deg)}

/* ---------- stack ---------- */
.stack{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.stack .glass{padding:20px 22px; display:grid; gap:12px; align-content:start}
.stack h3{font-size:13px; font-weight:500; color:var(--accent); letter-spacing:.08em; text-transform:uppercase}
.stack ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px}
@media (max-width:640px){ .stack ul{grid-template-columns:1fr} }
.stack li{font-size:14px; display:flex; align-items:baseline; gap:6px; min-width:0; overflow-wrap:anywhere}
.stack li small{color:var(--dim); font-size:12px}

/* ---------- music ---------- */
.music{padding:clamp(22px,4vw,40px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(22px,4vw,48px); align-items:center;
  border-color:color-mix(in srgb, var(--accent-2) 26%, transparent); --accent:var(--accent-2)}
.music h2{font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(42px,6vw,66px); line-height:1; letter-spacing:-.015em}
.music h2 em{color:var(--accent-2)}
.music .copy{display:grid; gap:16px; align-content:start}
.music .copy p{color:var(--muted); font-size:14px}
.instruments{display:flex; flex-wrap:wrap; gap:8px}
.instruments > span{font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); color:var(--accent-2)}
.piano-box{display:grid; gap:12px; min-width:0}
.piano-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--dim)}
.note-read{font:600 24px var(--display); color:var(--accent-2); min-width:3ch; text-align:right}
.piano{position:relative; display:flex; height:180px; user-select:none; -webkit-user-select:none; touch-action:none; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent-2) 28%, transparent); background:#000}
.wk{flex:1; position:relative; background:linear-gradient(#fbf6ea, #e4dac3); border-right:1px solid #b9ad93; cursor:pointer; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:8px; font-size:10px; color:#7a6f58; transition:background .08s}
.wk:last-child{border-right:0}
.wk.on{background:linear-gradient(#fff, var(--accent-2)); color:#2a0812}
.bk{position:absolute; top:0; height:60%; background:linear-gradient(#232a44, #06080f); border-radius:0 0 6px 6px; z-index:2; cursor:pointer; border:1px solid #000;
  box-shadow:inset 0 -6px 0 rgba(255,255,255,.06); transition:background .08s}
.bk.on{background:linear-gradient(#5a1b2c, var(--accent-2))}
.piano-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn.claret{border-color:color-mix(in srgb, var(--accent-2) 45%, transparent)}
.btn.claret:hover{border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 10%, var(--sunk))}
.hint{font-size:12px; color:var(--dim)}
.hint kbd{font:inherit; color:var(--muted); border:1px solid var(--line-strong); border-radius:4px; padding:0 4px}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden}
.contact .left{padding:clamp(22px,4vw,40px); display:grid; gap:16px; align-content:start; border-right:1px solid var(--line)}
.contact h2{font-family:var(--display); font-size:clamp(32px,4.8vw,50px); font-weight:600; letter-spacing:-.02em; line-height:1.02}
.contact .left > p{color:var(--muted)}
.mailrow{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap}
.mail{flex:1 1 220px; min-width:0; padding:13px 14px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--sunk); color:var(--text); font-size:14px; overflow-wrap:anywhere; user-select:all}
.links{display:flex; flex-wrap:wrap; gap:8px}
.links .btn{padding:10px 14px; font-size:13px}
.link-wrap{position:relative; display:inline-flex}
.contact .right{padding:clamp(22px,4vw,40px); display:grid; gap:10px; align-content:start; font-size:13px; color:var(--muted); background:var(--sunk-2)}
.contact .right .ok{color:var(--accent)} .contact .right .k{color:var(--cool)}
footer.foot{text-align:center; color:var(--dim); font-size:13px; display:grid; gap:10px; justify-items:center; padding-top:8px}

/* ---------- terminal overlay ---------- */
.tty{position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  background:rgba(2,3,8,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.tty-win{width:min(780px,100%); height:min(560px,82vh); display:flex; flex-direction:column; background:var(--panel-solid); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:0 30px 80px -20px #000, 0 0 60px -30px var(--accent); overflow:hidden; animation:pop .22s ease-out}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:.6}}
.tty-win .term-chrome{padding:12px 16px}
.tty-close{margin-left:auto; background:none; border:1px solid var(--line-strong); color:var(--muted); border-radius:8px; font:12px var(--mono); padding:4px 10px; cursor:pointer}
.tty-close:hover{color:var(--text); border-color:var(--accent)}
.tty-out{flex:1; overflow-y:auto; padding:16px 18px; font-size:13.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere}
.tty-out .c{color:var(--accent)} .tty-out .b{color:var(--cool)} .tty-out .d{color:var(--dim)} .tty-out .a{color:var(--accent-2)} .tty-out .e{color:var(--bad)}
.tty-in{display:flex; gap:8px; align-items:center; padding:12px 18px; border-top:1px solid var(--line); font-size:13.5px}
.tty-in input{flex:1; min-width:0; background:none; border:0; outline:none; color:var(--text); font:inherit; caret-color:var(--accent)}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:90; background:var(--panel-solid);
  border:1px solid var(--accent); color:var(--text); font-size:13px; padding:10px 16px; border-radius:999px; box-shadow:0 10px 30px -10px #000; display:flex; gap:12px; align-items:center; max-width:calc(100vw - 32px)}
.toast button{background:none; border:0; color:var(--accent); font:600 13px var(--mono); cursor:pointer; padding:0}
body.editing .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}

/* ============ STUDIO ============ */
.studio-hero{display:grid; gap:10px; padding:8px 4px 0}
.studio-hero h1{font-family:var(--display); font-size:clamp(46px,8vw,88px); font-weight:400; font-style:italic; line-height:.95; letter-spacing:-.025em}
.studio-hero h1 em{font-style:normal; font-weight:700; color:var(--accent)}
.studio-hero p{color:var(--muted); max-width:62ch}
.ex-tools{gap:8px; flex-wrap:wrap; margin-top:6px}
.studio-links{display:grid; gap:10px; margin-top:6px}
.studio-links .links .btn{padding:10px 16px; font-size:13px}
.studio-links .eyebrow b{color:var(--accent-2)}
.lib-list li{position:relative}
.lib-list .meta small [data-edit]{font-size:inherit}
#sheetSvg .ring{fill:none; stroke:#b26a10; stroke-width:1.5}
#sheetSvg .n.playing .ring{stroke:#b8264d}
main{transition:filter .9s ease}
body.rebooting main{filter:brightness(.1) saturate(.3); transition:filter .6s ease}
.cmd-card{border:1px solid var(--line); border-radius:12px; padding:12px; display:grid; gap:10px; background:var(--sunk-2)}
.cmd-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.cmd-head b{font-size:13px; color:var(--cool)}
.ex-tools .btn{padding:9px 14px; font-size:12.5px}
.inst-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.inst{all:unset; box-sizing:border-box; cursor:pointer; padding:16px 16px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel);
  display:grid; gap:6px; transition:transform .2s, border-color .2s, background .2s; position:relative}
.inst:hover{transform:translateY(-3px); border-color:var(--line-strong)}
.inst:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.inst[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--panel))}
.inst .ic{font:28px/1 var(--music); color:var(--accent); height:32px}
.inst b{font:600 18px var(--display)}
.inst small{font-size:11.5px; color:var(--dim); line-height:1.45}
.inst .try{position:absolute; top:12px; right:12px; font-size:11px; color:var(--muted); border:1px solid var(--line-strong); border-radius:999px; padding:2px 8px}
.sheet-card{padding:clamp(14px,2.4vw,22px); display:grid; gap:14px}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.tgroup{display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--sunk); border:1px solid var(--line); align-items:center; flex-wrap:wrap}
.tb{all:unset; box-sizing:border-box; cursor:pointer; min-width:36px; height:34px; padding:0 9px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  color:var(--text); font:500 13px var(--mono); transition:background .15s, color .15s}
.tb:hover{background:var(--hover-wash)}
.tb:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.tb[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent)}
.tb:disabled{opacity:.4; cursor:default}
.tb svg{width:18px; height:22px; overflow:visible}
.tb .mus{font:19px/1 var(--music)}
.tb.play{background:linear-gradient(100deg, var(--accent), var(--accent-2)); color:var(--on-accent); font-weight:600; padding:0 16px}
.tb.play:hover{filter:brightness(1.08)}
.tgroup label{font-size:12px; color:var(--dim); padding:0 6px; display:flex; gap:6px; align-items:center}
.tgroup select,.tgroup input[type=range]{accent-color:var(--accent); font:13px var(--mono); color:var(--text); background:var(--panel-solid); border:1px solid var(--line); border-radius:6px; padding:4px 6px}
.tgroup input[type=range]{width:96px; padding:0; border:0; background:none}
.tempo-read{font-variant-numeric:tabular-nums; color:var(--text); min-width:3ch}
.paper{background:linear-gradient(180deg, var(--paper), var(--paper-2)); color:var(--ink); border-radius:12px; padding:22px clamp(10px,2.2vw,28px) 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 20px 50px -24px #000; position:relative; overflow:hidden}
.paper::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:radial-gradient(1200px 300px at 50% -100px, rgba(255,255,255,.6), transparent), repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0 2px, transparent 2px 5px)}
.s-title{all:unset; box-sizing:border-box; display:block; width:100%; text-align:center; font:600 clamp(26px,4vw,38px)/1.15 var(--display); color:var(--ink); padding:4px 8px; border-radius:8px; position:relative}
.s-title::placeholder{color:#a9a395}
.s-meta{display:flex; justify-content:space-between; align-items:end; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); padding:4px 8px 0; position:relative}
.s-meta .tm{font-family:var(--music)} .s-meta .tm b{font-family:var(--mono); font-weight:500; color:var(--ink)}
.s-by{display:flex; align-items:baseline; gap:6px; font-style:italic; font-family:var(--display); font-size:16px}
.s-by input{all:unset; box-sizing:border-box; font:italic 500 17px var(--display); color:var(--ink); border-bottom:1px dashed #b7ae98; min-width:0; width:clamp(140px,26vw,240px); text-align:right; padding:2px 4px}
.s-by input::placeholder{color:#a9a395}
.s-title:focus-visible,.s-by input:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.svg-wrap{position:relative; margin-top:8px}
#sheetSvg{display:block; width:100%; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:crosshair}
#sheetSvg .staff line{stroke:#2a2e45; stroke-width:1}
#sheetSvg .bar{stroke:#2a2e45; stroke-width:1.3}
#sheetSvg .bar.end{stroke-width:3.6}
#sheetSvg .clef{font-family:var(--music); fill:var(--ink)}
#sheetSvg .ts{font:700 22px var(--display); fill:var(--ink)}
#sheetSvg .n{cursor:pointer}
#sheetSvg .n .ink{fill:var(--ink); stroke:var(--ink)}
#sheetSvg .n .hollow{fill:none; stroke:var(--ink); stroke-width:1.6}
#sheetSvg .n .stem,#sheetSvg .n .ledger{stroke:var(--ink); stroke-width:1.3}
#sheetSvg .n .acc{font:20px var(--music); fill:var(--ink); stroke:none}
#sheetSvg .n.sel .ink,#sheetSvg .n.sel .acc{fill:#b26a10; stroke:#b26a10}
#sheetSvg .n.sel .hollow,#sheetSvg .n.sel .stem{stroke:#b26a10}
#sheetSvg .n.sel .hit{fill:rgba(226,178,90,.18)}
#sheetSvg .n.playing .ink,#sheetSvg .n.playing .acc{fill:#b8264d; stroke:#b8264d}
#sheetSvg .n.playing .hollow,#sheetSvg .n.playing .stem{stroke:#b8264d}
#sheetSvg .n.playing .hit{fill:rgba(216,64,110,.16)}
#sheetSvg .hit{fill:transparent; stroke:none}
#sheetSvg .caretline{stroke:var(--accent-2); stroke-width:2; animation:blink 1.1s steps(1) infinite}
#sheetSvg .ghost{fill:rgba(26,31,54,.25)}
#sheetSvg .ghost-lbl{font:600 11px var(--mono); fill:#8a5a10}
#sheetSvg .empty{font:italic 15px var(--display); fill:#8e887a}
.example-tag{font-size:12px; color:var(--ink-soft); text-align:center; padding-top:6px; position:relative}
.example-tag button{all:unset; cursor:pointer; color:#9a3150; text-decoration:underline; text-underline-offset:3px}
.s-status{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
.s-status b{color:var(--accent); font-weight:500}
.s-keys-wrap{overflow-x:auto; border-radius:var(--r-sm); border:1px solid var(--line-strong)}
.s-keys{position:relative; display:flex; height:130px; min-width:520px; user-select:none; -webkit-user-select:none; touch-action:none; background:#000}
.s-keys .wk{font-size:10px}
.s-keys .wk.on{background:linear-gradient(#fff, var(--accent)); color:#2a1a02}
.s-keys .bk.on{background:linear-gradient(#5a3b0a, var(--accent))}
.sheets{padding:clamp(18px,3vw,26px); display:grid; gap:14px}
.sheets-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.sheets-head h2{font:600 24px var(--display)}
.sheets-head p{font-size:12px; color:var(--dim)}
.sheet-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.sheet-list li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--sunk-2); flex-wrap:wrap}
.sheet-list li.cur{border-color:var(--line-strong)}
.sheet-list .meta{flex:1; min-width:160px; display:grid}
.sheet-list .meta b{font:600 16px var(--display)}
.sheet-list .meta small{color:var(--dim); font-size:12px}
.sheet-list .acts{display:flex; gap:6px}
.sheet-list .btn{padding:8px 12px; font-size:12px}
.empty-note{font-size:13px; color:var(--dim)}

/* ============ ADMIN ============ */
.adm{display:none!important}
body.editing .adm{display:flex!important}
body.editing [data-edit]{outline:1px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:3px; border-radius:4px; cursor:text; transition:background .15s}
body.editing [data-edit]:hover{background:color-mix(in srgb, var(--accent) 9%, transparent)}
body.editing [data-edit]:focus{outline:2px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent)}
body.editing [data-edit]:empty::before{content:"empty"; color:var(--dim); font-style:italic}
.item-tools{position:absolute; top:-15px; right:12px; z-index:6; gap:2px; padding:3px; border-radius:999px; background:var(--panel-solid); border:1px solid var(--accent); box-shadow:0 6px 18px -6px #000}
.item-tools button,.sec-tools button{all:unset; cursor:pointer; min-width:26px; height:24px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font:12px var(--mono); color:var(--text)}
.item-tools button:hover,.sec-tools button:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}
.item-tools button:focus-visible,.sec-tools button:focus-visible{outline:2px solid var(--accent)}
.item-tools button.del:hover{background:color-mix(in srgb, var(--bad) 25%, transparent); color:var(--bad)}
.sec-tools{align-items:center; gap:4px; flex-wrap:wrap; padding:6px 8px 6px 14px; border-radius:999px; border:1px dashed var(--accent); width:max-content; max-width:100%; font-size:12px; color:var(--accent)}
.sec-tools span{margin-right:6px; letter-spacing:.1em; text-transform:uppercase}
.sec.is-off > :not(.sec-tools){opacity:.38; filter:saturate(.4)}
.add-item{all:unset; box-sizing:border-box; cursor:pointer; border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); color:var(--accent); font:500 14px var(--mono);
  align-items:center; justify-content:center; padding:22px; min-height:90px; grid-column:span 2}
.add-item:hover{background:color-mix(in srgb, var(--accent) 6%, transparent)}
.tag-ed{display:inline-flex; align-items:center; gap:4px}
.tag-x{all:unset; cursor:pointer; width:16px; height:16px; border-radius:50%; align-items:center; justify-content:center; font-size:12px; line-height:1; color:var(--dim)}
.tag-x:hover{background:color-mix(in srgb, var(--bad) 25%, transparent); color:var(--bad)}
.tag-x:focus-visible,.tag-add:focus-visible{outline:2px solid var(--accent)}
.tag-add{all:unset; cursor:pointer; font:500 12px var(--mono); color:var(--accent); padding:4px 10px; border-radius:8px; border:1px dashed var(--line-strong); align-items:center}
.tag-add:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.stack li .tag-x{margin-left:auto}
.flow [data-edit]{display:inline-block}
.timeline .add-item,.links .add-item{min-height:0; padding:10px 14px; border-radius:var(--r-md)}
.stack .add-item{grid-column:auto}
/* small link buttons: one toolbar at a time, centred above the link you're on */
.link-wrap .item-tools{top:auto; right:auto; bottom:calc(100% - 4px); left:50%; transform:translateX(-50%); opacity:0; pointer-events:none; transition:opacity .15s}
.link-wrap .item-tools::after{content:""; position:absolute; left:0; right:0; top:100%; height:8px}
body.editing .link-wrap:hover,body.editing .link-wrap:focus-within{z-index:20}
body.editing .link-wrap:hover .item-tools,body.editing .link-wrap:focus-within .item-tools{opacity:1; pointer-events:auto}
@media (hover:none){ body.editing .links{row-gap:44px; padding-top:38px} body.editing .link-wrap .item-tools{opacity:1; pointer-events:auto; transform:translateX(-50%) scale(.86)} }
.adm-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:60; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px 10px 16px; border-radius:18px; background:var(--panel-solid); border:1px solid var(--accent); box-shadow:0 18px 50px -12px #000; width:max-content; max-width:calc(100vw - 24px)}
.adm-bar .rec{width:9px; height:9px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px var(--accent-2)}
.adm-bar b{font-weight:600}
.adm-bar .state{font-size:12px; color:var(--dim); min-width:12ch}
.adm-bar .state.dirty{color:var(--warn)}
.adm-bar .sp{flex:1}
.adm-bar .btn{padding:8px 12px; font-size:12.5px; border-radius:10px}
.adm-confirm{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:61; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:12px 14px; border-radius:14px; background:var(--panel-solid); border:1px solid var(--warn); font-size:13px; max-width:calc(100vw - 24px)}
.adm-confirm .btn{padding:7px 12px; font-size:12.5px}
.adm-panel{position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:max(12px, env(safe-area-inset-right,0px)); bottom:calc(84px + env(safe-area-inset-bottom,0px)); width:min(380px, calc(100vw - 24px));
  z-index:59; display:flex; flex-direction:column; background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:18px; box-shadow:0 20px 60px -16px #000; overflow:hidden}
.panel-head{display:flex; align-items:center; gap:8px; padding:10px 10px 10px 12px; border-bottom:1px solid var(--line)}
.tabs{display:flex; gap:4px; flex:1}
.tabs button{all:unset; cursor:pointer; padding:6px 12px; border-radius:999px; font:500 13px var(--mono); color:var(--muted)}
.tabs button[aria-selected="true"]{background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent)}
.panel-x{all:unset; cursor:pointer; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--muted)}
.panel-x:hover{background:var(--hover-wash); color:var(--text)}
.panel-body{flex:1; overflow-y:auto; padding:14px 16px 20px; display:grid; gap:14px; align-content:start}
.panel-body h4{margin:6px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
.panel-body .note{font-size:12px; color:var(--dim)}
.fld{display:grid; gap:5px}
.fld > span{font-size:12px; color:var(--muted)}
.fld input,.fld textarea,.fld select{width:100%; font:13px/1.5 var(--mono); color:var(--text); background:var(--sunk); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.fld textarea{resize:vertical; min-height:72px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none; border-color:var(--accent)}
.themes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.theme-opt{all:unset; box-sizing:border-box; cursor:pointer; border-radius:12px; border:1px solid var(--line); padding:10px; display:grid; gap:8px; font-size:12px; color:var(--muted)}
.theme-opt[aria-pressed="true"]{border-color:var(--accent); color:var(--text)}
.theme-opt:focus-visible{outline:2px solid var(--accent)}
.fav-opt{justify-items:center; text-align:center}
.fav-opt img{border-radius:12px; display:block}
.theme-btn{gap:8px}
.tdot{width:16px; height:16px; flex:none; display:block; overflow:visible}
.tdot .t-bg{fill:var(--bg-2)} .tdot .t-fill{fill:var(--accent)} .tdot .t-ring{fill:none; stroke:var(--accent); stroke-width:1.3}
.theme-btn:hover .tdot{transform:rotate(180deg); transition:transform .4s ease}
.theme-menu{position:fixed; z-index:85; min-width:210px; padding:6px; border-radius:14px; background:var(--panel-solid); border:1px solid var(--line-strong); box-shadow:0 18px 44px -14px rgba(0,0,0,.55); display:grid; gap:2px}
.theme-menu button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font:500 13px var(--mono); color:var(--text)}
.theme-menu button:hover{background:var(--hover-wash)}
.theme-menu button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.theme-menu button[aria-checked="true"]{color:var(--accent)}
.theme-menu button[aria-checked="true"]::after{content:"✓"; margin-left:auto}
.theme-menu .sw{display:flex; width:36px; height:16px; border-radius:5px; overflow:hidden; border:1px solid rgba(127,127,127,.35); flex:none}
.theme-menu .sw i{flex:1}
.swatch{height:34px; border-radius:8px; display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.swatch i{flex:1}
.sec-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.sec-list li{display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--sunk-2); font-size:13px}
.sec-list li.off{opacity:.5}
.sec-list li span{flex:1}
.mini{all:unset; cursor:pointer; min-width:28px; height:28px; padding:0 6px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--text); font:12px var(--mono); border:1px solid var(--line)}
.mini:hover{border-color:var(--accent)}
.mini:focus-visible{outline:2px solid var(--accent)}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row .btn{padding:8px 12px; font-size:12.5px}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .signal{min-height:0} .signal canvas{height:320px; flex:none}
  .card.span-3,.card.span-2,.add-item{grid-column:span 6}
  .stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .music{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr} .contact .left{border-right:0; border-bottom:1px solid var(--line)}
  .inst-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:14px; padding-block:14px 36px}
  .status .long{display:none}
  .theme-btn .tlbl{display:none}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack{grid-template-columns:1fr}
  .piano{height:150px}
  .timeline{padding-left:28px} .t-node{left:-28px; width:20px; height:20px} .timeline::before{left:9px}
  .signal canvas{height:280px}
  .inst-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inst:last-child{grid-column:span 2}
  .adm-panel{top:auto; left:max(8px, env(safe-area-inset-left,0px)); right:max(8px, env(safe-area-inset-right,0px)); width:auto; height:62vh}
  .adm-bar .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ---------- background: musical notes built from 0s and 1s (js/bitnotes.js) ---------- */
#bitNotes{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none}