:root{
  --body:#21403a; --body-hi:#2a4e46; --body-lo:#162c28; --well:#11221f;
  --silk:#eadfc6; --silk-dim:#a9b3a0; --ink:#231d13;
  --amber:#ffb65c; --amber-dim:#7a5426; --lcd:#0b0a08;
  --tonic:#f2ab62; --tonic-d:#b06c29;
  --sub:#efe2bf;   --sub-d:#ab9b70;
  --dom:#9ccbe2;   --dom-d:#568aa3;
  --rec:#e8553f;   --go:#79c58f;
  --sans:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gap:clamp(8px,1.4vmin,16px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0f1513;color:var(--silk);font-family:var(--sans);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
body{position:fixed;inset:0;display:grid;place-items:center;
  padding:max(env(safe-area-inset-top),8px) max(env(safe-area-inset-right),8px) max(env(safe-area-inset-bottom),8px) max(env(safe-area-inset-left),8px)}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:none}
#device *,#wake,#turn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---- enclosure ---- */
#device{position:relative;width:100%;height:100%;max-width:1240px;max-height:820px;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:calc(var(--gap)*1.6);
  padding:calc(var(--gap)*1.8);border-radius:clamp(18px,3vmin,34px);
  background:linear-gradient(160deg,var(--body-hi),var(--body) 40%,var(--body-lo));
  box-shadow:0 1px 0 #ffffff24 inset,0 -2px 0 #0006 inset,0 24px 60px #0009}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6c8579,#23372f 70%)}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:#0009;transform:rotate(35deg)}
.s1{top:9px;left:9px}.s2{top:9px;right:9px}.s3{bottom:9px;left:9px}.s4{bottom:9px;right:9px}

#left{display:flex;flex-direction:column;gap:var(--gap);min-height:0;min-width:0;align-items:center}
#right{display:flex;flex-direction:column;gap:var(--gap);min-height:0;min-width:0}

#brand{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
#brand>span{display:flex;flex-direction:column;gap:2px;min-width:0}
#manual{flex:none;font-size:clamp(9px,1.3vmin,11px);font-weight:700;letter-spacing:.12em;color:var(--silk);text-decoration:none;border:1.5px solid #eadfc655;border-radius:999px;padding:4px 10px;touch-action:manipulation}
#manual:active{background:#eadfc622}
#brand b{font-weight:800;letter-spacing:.2em;font-size:clamp(14px,2.3vmin,20px)}
#brand i{font-style:normal;font-size:clamp(8px,1.25vmin,11px);letter-spacing:.08em;color:var(--silk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#grille{flex:1 1 0;min-height:0;width:100%;display:block;border-radius:14px}

/* ---- stick ---- */
#stick{--size:min(100%,44vmin);flex:none;width:var(--size);aspect-ratio:1;position:relative;border-radius:50%;
  container-type:inline-size;cursor:grab;
  background:radial-gradient(circle,#0d1b18 0 47%,var(--well) 48% 100%);
  box-shadow:inset 0 3px 8px #000a,0 1px 0 #ffffff1c}
#stick .lb{position:absolute;left:50%;top:50%;font-size:clamp(9px,5.2cqw,14px);font-weight:700;color:var(--silk-dim);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-41cqw) rotate(calc(-1*var(--a)));
  pointer-events:none;transition:color .1s;white-space:nowrap}
#stick .lb.on{color:var(--amber)}
#cap{position:absolute;left:50%;top:50%;width:40cqw;height:40cqw;margin:-20cqw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 30%,#fff5e0,var(--sub) 45%,#c9b98f 100%);
  box-shadow:0 7px 14px #000a,inset 0 -3px 5px #0003;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
#cap::after{content:"";position:absolute;inset:22%;border-radius:50%;box-shadow:inset 0 2px 5px #0003}
#stick.drag #cap{transition:none}
#stick.drag{cursor:grabbing}

/* ---- transport ---- */
#transport{flex:none;align-self:stretch;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
#transport button{height:clamp(38px,6.6vmin,56px);border-radius:12px;background:var(--body-lo);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;box-shadow:0 3px 0 #0008,inset 0 1px 0 #ffffff14;
  font-size:clamp(8px,1.2vmin,10px);font-weight:700;letter-spacing:.1em;transition:transform .05s}
#transport button.down{transform:translateY(2px);box-shadow:0 1px 0 #0008}
#transport svg{width:clamp(12px,2vmin,16px);height:clamp(12px,2vmin,16px);fill:currentColor}
#rec svg{color:var(--rec)}
#rec.armed{animation:blink .7s steps(2) infinite}
#rec.live{background:var(--rec);color:#fff}#rec.live svg{color:#fff}
#rec.dub{background:var(--amber);color:var(--ink)}#rec.dub svg{color:var(--ink)}
#play.on{color:var(--go)}
@keyframes blink{50%{opacity:.45}}

/* ---- screen + dial ---- */
#top{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--gap)*1.4);align-items:center}
#screen{height:100%;min-height:0;background:var(--lcd);border-radius:12px;color:var(--amber);font-family:var(--mono);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr) auto auto;
  box-shadow:inset 0 0 0 2px #000,inset 0 0 24px #ffb65c12,0 1px 0 #ffffff24;padding:clamp(8px,1.5vmin,14px);gap:6px clamp(8px,1.6vmin,16px);overflow:hidden}
#lcd-main{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden;position:relative}
#scope{position:absolute;inset:0;width:100%;height:100%;display:none}
#lcd-main.scope #scope{display:block}#lcd-main.scope #name,#lcd-main.scope #roman{visibility:hidden}
#name{font-family:var(--sans);font-size:clamp(26px,8vmin,64px);font-weight:800;line-height:1.15;white-space:nowrap;letter-spacing:-.02em}
#name.idle{font-size:clamp(13px,2.4vmin,20px);font-weight:600;letter-spacing:0;line-height:1.25;white-space:normal;color:var(--amber-dim)}
#roman{font-size:clamp(10px,1.7vmin,14px);margin-top:4px;color:var(--amber-dim);white-space:nowrap}
#lcd-page{min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px;border-left:1px solid #ffb65c26;padding-left:clamp(8px,1.6vmin,16px)}
#ptitle{display:flex;justify-content:space-between;font-size:clamp(9px,1.45vmin,12px);letter-spacing:.1em;color:var(--amber-dim)}
#ptitle b{color:var(--amber);font-weight:600}
/* ---- menus on the screen ---- */
#pbody{flex:1;min-height:0}
#pbody.rows,#pbody.home{display:flex;flex-direction:column;gap:2px;overflow-y:auto;position:relative;scrollbar-width:none;touch-action:pan-y}
#pbody.rows::-webkit-scrollbar{display:none}
#pbody .row{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr) auto;align-items:center;
  min-height:clamp(20px,3.5vmin,30px);border-radius:4px;font-family:var(--mono);font-size:clamp(9px,1.45vmin,13px);color:var(--amber)}
#pbody .row button{touch-action:pan-y;font:inherit;color:inherit;height:100%;display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
#pbody .row .lab{padding-left:8px;letter-spacing:.06em;color:var(--amber-dim)}
#pbody .row .val{justify-content:center;font-weight:600;text-overflow:ellipsis}
#pbody .row .val.gauge{background:linear-gradient(90deg,#ffb65c2e var(--pct),transparent var(--pct));border-radius:3px}
#pbody .row .arrow{padding:0 9px;color:#ffb65c66;font-size:1.25em}
#pbody .row.on .lab{color:var(--amber)}
#pbody .row.sel{background:var(--amber);color:#1b1004}
#pbody .row.sel .lab,#pbody .row.sel .arrow{color:#1b1004}
#pbody .row.sel .val.gauge{background:linear-gradient(90deg,#1b100433 var(--pct),transparent var(--pct))}
#pbody .home-row{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border-radius:4px;padding:0 8px;
  font-family:var(--mono);font-size:clamp(9px,1.5vmin,13px);color:var(--amber);background:#ffb65c12;touch-action:pan-y;text-align:right}
#pbody .home-row span{color:var(--amber-dim);letter-spacing:.08em;text-align:left}
#pbody .home-row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lcd-foot{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:clamp(9px,1.4vmin,12px);min-width:0}
#ticks{grid-column:1/-1;display:grid;grid-template-columns:repeat(16,1fr);gap:2px;margin-top:-2px}
#ticks i{height:3px;background:#ffb65c1f;border-radius:1px}
#ticks i:nth-child(4n+1){background:#ffb65c47}
#ticks i.on{background:var(--amber)}
#status{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#status.alert{color:#ff8a70}
#trk{display:flex;gap:clamp(4px,.7vmin,6px);flex:none}
#trk button{--s:clamp(17px,2.9vmin,24px);width:var(--s);height:var(--s);border-radius:50%;border:1.5px solid #ffb65c4d;color:#ffb65c80;
  font:600 clamp(8px,1.3vmin,11px)/1 var(--mono);display:grid;place-items:center;padding:0}
#trk button.full{background:var(--amber);border-color:var(--amber);color:#1b1004}
#trk button.drum{border-radius:3px}
#trk button.muted{border-color:var(--amber);border-style:dashed;color:var(--amber)}
#trk button.rec{background:var(--rec);border-color:var(--rec);color:#fff;animation:blink .5s steps(2) infinite}
#trk button.wait{border-color:var(--rec);color:#ff8a70;font-weight:700}

#dial{--dial:clamp(78px,17vmin,136px);width:var(--dial);height:var(--dial);border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:conic-gradient(from 0deg,#d9cba7,#fff4dc,#cdbd95,#fff4dc,#d9cba7,#b8a881,#d9cba7);
  box-shadow:0 7px 14px #0009,0 0 0 4px #0003,inset 0 1px 1px #fff}
#dial::before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff8e8,#e7d9b6 60%,#cfbe94)}
#mark{position:absolute;left:50%;top:9%;width:5px;height:20%;margin-left:-2.5px;border-radius:3px;background:var(--rec);transform-origin:50% 205%}

/* ---- function keys ---- */
#fn{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
#fn button{height:clamp(32px,5.4vmin,46px);border-radius:9px;background:var(--body-lo);font-size:clamp(9px,1.4vmin,12px);font-weight:700;letter-spacing:.08em;
  box-shadow:0 3px 0 #0008,inset 0 1px 0 #ffffff14;color:var(--silk);transition:transform .05s}
#fn button.down{transform:translateY(2px);box-shadow:0 1px 0 #0008}
#fn button.on{color:var(--ink);background:var(--amber)}

/* ---- chord keys ---- */
#keys{flex:2.1 1 0;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap);padding-bottom:7px}
.key{--c:var(--tonic);--d:var(--tonic-d);position:relative;border-radius:clamp(10px,1.8vmin,16px);min-width:0;min-height:0;
  background:linear-gradient(180deg,#ffffff38,#fff0 30%),var(--c);color:var(--ink);
  box-shadow:0 7px 0 var(--d),0 10px 12px #0007;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(8px,1.6vmin,16px) 2px;transition:transform .04s,box-shadow .04s,filter .1s}
.key.sub{--c:var(--sub);--d:var(--sub-d)}.key.dom{--c:var(--dom);--d:var(--dom-d)}
.key.down{transform:translateY(5px);box-shadow:0 2px 0 var(--d),0 3px 5px #0007;filter:brightness(1.08)}
.key.lit::after{background:var(--rec);box-shadow:0 0 8px var(--rec)}
/* the rhythm game: a key glows a beat early, and flashes when it should be pressed */
.key.cue::after{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.key.cue>.layer.top{box-shadow:inset 0 0 0 4px var(--amber),0 0 20px var(--amber)}
.key.hit>.layer.top{box-shadow:inset 0 0 0 6px var(--rec),0 0 28px var(--rec)}
#name.game{font-size:clamp(20px,5.5vmin,44px)}
.key::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:#0002}
.key .num{font-size:clamp(9px,1.5vmin,13px);font-weight:700;opacity:.55}
.key .rn{font-size:clamp(20px,5vmin,40px);font-weight:800;line-height:1}
.key .nm{font-size:clamp(11px,1.9vmin,16px);font-weight:700;opacity:.8;white-space:nowrap}
.key kbd{font:inherit;font-size:9px;opacity:.45;display:none}
#keys.drums .key .rn{font-size:clamp(12px,2.6vmin,22px);letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){.key kbd{display:block}}

/* ---- wake overlay ---- */
#wake{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#0a100ecc;transition:opacity .35s;
  font-family:var(--sans);color:var(--silk);text-align:center;width:100%}
#wake.gone{opacity:0;pointer-events:none}
#wake span{display:block;font-size:clamp(20px,4vmin,30px);font-weight:800;letter-spacing:.14em}
#wake small{display:block;margin-top:8px;font-size:clamp(11px,1.8vmin,14px);color:var(--silk-dim)}

/* ---- portrait: tablet and phone ---- */
@media (orientation:portrait){
  #device{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);max-height:none}
  #right{display:contents}
  #left{order:2;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:calc(var(--gap)*1.6);align-items:stretch}
  #stick{--size:clamp(150px,40vmin,300px);grid-row:1/4;grid-column:1;align-self:center}
  #brand{grid-column:2}
  #transport{grid-column:2;grid-row:2}
  #grille{grid-column:2;grid-row:3;height:100%}
  #top{order:0;grid-template-columns:minmax(0,1fr) auto;height:clamp(130px,20vh,240px);flex:none}
  #fn{order:1}
  #keys{order:3;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);flex:1 1 0}
  .key:nth-child(-n+4){grid-column:span 3}
  .key:nth-child(n+5){grid-column:span 4}
  #device{display:flex;flex-direction:column}
}
/* ---- phones are played sideways; held upright they ask to be turned ---- */
#turn{display:none;position:fixed;inset:0;z-index:9;place-items:center;text-align:center;background:#0f1513;color:var(--silk);font-family:var(--sans);padding:24px}
#turn svg{width:76px;height:76px;margin-bottom:16px;animation:turn 2.6s ease-in-out infinite}
#turn b{display:block;font-size:20px;letter-spacing:.08em}
#turn small{display:block;margin-top:8px;color:var(--silk-dim);font-size:14px}
@keyframes turn{0%,25%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (orientation:portrait) and (max-width:600px){#turn{display:grid}}
/* ---- phone landscape: drop the grille and brand ---- */
@media (orientation:landscape) and (max-height:480px){
  #device{grid-template-columns:minmax(0,5fr) minmax(0,16fr);padding:10px 14px;gap:12px}
  #grille{display:none}
  #brand i{display:none}
  #brand b{font-size:13px}
  #manual{padding:3px 8px}
  #left{justify-content:center}
  #stick{--size:min(100%,56vh)}
  #dial{--dial:64px}
  #keys{flex:1.4 1 0}
  #fn button{height:26px}
  #transport button{height:32px}
  #name{font-size:30px}
  #pbody .row{min-height:19px;font-size:9px}
  #ptitle{font-size:8.5px}
}

/* ===== the case sits on a desk, seen from slightly in front: lit from the top left, about 1¼ in thick ===== */
:root{--tilt:14deg;--fit:.86;--edge:clamp(28px,6vmin,58px)}
html{background:#4a3020}
body{perspective:1700px;perspective-origin:50% 10%;overflow:hidden;
  background:radial-gradient(90% 70% at 18% 4%,#ffe4bd40,transparent 60%),
    radial-gradient(120% 90% at 50% 115%,#000a,transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0 0.02  1.6 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(176deg,#8a5f3b,#6a4429 55%,#4e311d);
  background-size:auto,auto,1200px 1200px,auto}
#device{transform-origin:50% 50%;
  transform:translateY(calc(var(--edge)*-.55)) rotateX(var(--tilt)) scale(var(--fit));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 80% at 15% 0%,#3a6a5f 0%,transparent 55%),linear-gradient(165deg,var(--body-hi),var(--body) 45%,var(--body-lo));
  box-shadow:inset 0 1px 0 #ffffff40,inset 1px 0 0 #ffffff14,inset 0 -2px 0 #0006,
    0 calc(var(--edge)*0.0333) 0 #2a4e46,
    0 calc(var(--edge)*0.0667) 0 #284c45,
    0 calc(var(--edge)*0.1000) 0 #274b43,
    0 calc(var(--edge)*0.1333) 0 #264942,
    0 calc(var(--edge)*0.1667) 0 #254740,
    0 calc(var(--edge)*0.2000) 0 #23453e,
    0 calc(var(--edge)*0.2333) 0 #22433d,
    0 calc(var(--edge)*0.2667) 0 #21423b,
    0 calc(var(--edge)*0.3000) 0 #20403a,
    0 calc(var(--edge)*0.3333) 0 #1e3e38,
    0 calc(var(--edge)*0.3667) 0 #1d3c36,
    0 calc(var(--edge)*0.4000) 0 #1c3a35,
    0 calc(var(--edge)*0.4333) 0 #1b3933,
    0 calc(var(--edge)*0.4667) 0 #193732,
    0 calc(var(--edge)*0.5000) 0 #183530,
    0 calc(var(--edge)*0.5333) 0 #07100e,
    0 calc(var(--edge)*0.5667) 0 #1c3933,
    0 calc(var(--edge)*0.6000) 0 #1b3731,
    0 calc(var(--edge)*0.6333) 0 #1a342f,
    0 calc(var(--edge)*0.6667) 0 #18322d,
    0 calc(var(--edge)*0.7000) 0 #172f2b,
    0 calc(var(--edge)*0.7333) 0 #162d28,
    0 calc(var(--edge)*0.7667) 0 #152a26,
    0 calc(var(--edge)*0.8000) 0 #132824,
    0 calc(var(--edge)*0.8333) 0 #122522,
    0 calc(var(--edge)*0.8667) 0 #112320,
    0 calc(var(--edge)*0.9000) 0 #10201e,
    0 calc(var(--edge)*0.9333) 0 #0e1e1b,
    0 calc(var(--edge)*0.9667) 0 #0d1b19,
    0 calc(var(--edge)*1.0000) 0 #0c1917,
    0 calc(var(--edge) + 14px) 22px -2px #000d,0 calc(var(--edge) + 50px) 90px -10px #0009,-30px calc(var(--edge) + 60px) 120px -20px #0006}
.screw{box-shadow:0 1px 0 #ffffff26,inset 0 1px 2px #000a}
#keys,#fn,#transport{border-radius:clamp(14px,2.2vmin,20px);padding:clamp(6px,1vmin,9px);background:#0e1d1a;
  box-shadow:inset 0 4px 9px #000d,inset 0 -1px 0 #ffffff10,0 1px 0 #ffffff1a}
#keys{padding-bottom:clamp(16px,2.4vmin,21px)}
#fn,#transport{padding-top:clamp(8px,1.2vmin,11px);padding-bottom:clamp(12px,1.8vmin,15px)}
.key{box-shadow:inset 0 1px 0 #ffffffc8,inset 0 -8px 14px #00000030,inset 0 0 0 1px #0000000f,0 5px 0 var(--d),0 10px 0 color-mix(in srgb,var(--d),#000 25%),0 11px 1px #0008,0 15px 13px #000b}
.key.down{transform:translateY(8px);box-shadow:inset 0 1px 0 #ffffff90,inset 0 -4px 8px #0003,0 2px 0 color-mix(in srgb,var(--d),#000 25%),0 3px 3px #000a}
.key::before{content:"";position:absolute;left:10%;right:10%;top:6%;height:38%;border-radius:12px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,#ffffff52,transparent 72%)}
.key>span,.key>kbd{position:relative}
#fn button,#transport button{transform:translateY(-2px);background:radial-gradient(ellipse 85% 70% at 50% 0%,#ffffff26,transparent 70%),linear-gradient(180deg,#2e524a,#1a352f);
  box-shadow:inset 0 1px 0 #ffffff3a,inset 0 -3px 5px #0006,0 3px 0 #132823,0 6px 0 #091512,0 7px 1px #0008,0 11px 10px #000b}
#fn button.on,#transport #drums.on{color:var(--ink);background:radial-gradient(ellipse 85% 70% at 50% 0%,#fff7,transparent 70%),linear-gradient(180deg,#ffc87c,#ee9f40);box-shadow:inset 0 1px 0 #fffb,inset 0 -3px 5px #0003,0 3px 0 #c07a2e,0 6px 0 #8a5218,0 7px 1px #0008,0 11px 10px #000b,0 0 18px #ffb65c55}
#fn button.down,#transport button.down{transform:translateY(4px);box-shadow:inset 0 1px 0 #ffffff2a,inset 0 -1px 3px #0006,0 1px 0 #091512,0 2px 3px #000a}
#rec.live{background:radial-gradient(ellipse 85% 70% at 50% 0%,#fff6,transparent 70%),linear-gradient(180deg,#ff7a63,#d8432d);box-shadow:inset 0 1px 0 #fffa,inset 0 -3px 5px #0003,0 3px 0 #b0331f,0 6px 0 #6e1a10,0 7px 1px #0008,0 11px 10px #000b,0 0 20px #e8553f88}
#screen{position:relative;box-shadow:inset 0 0 0 2px #000,inset 0 0 32px #ffb65c18,0 0 0 6px #0a1412,0 0 0 7px #ffffff16,0 3px 0 7px #0007}
#screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,#ffffff16 0 30%,#ffffff05 30.3% 52%,transparent 52.3%)}
#dial{background:repeating-conic-gradient(from 0deg,#f4ead0 0 2.4deg,#a08d63 2.4deg 4.8deg);
  box-shadow:inset 0 0 0 1px #0005,inset 0 3px 2px #fff6,inset 0 -3px 3px #0004,0 4px 0 #b6a273,0 8px 0 #8f7c52,0 11px 0 #6f5e39,0 12px 1px #0009,8px 20px 16px #000a,3px 30px 36px #0007,0 0 0 6px #0b1714,0 0 0 7px #ffffff16}
#dial::before{inset:13%;background:radial-gradient(circle at 34% 26%,#fffbf2 0,#fff6e3 13%,transparent 40%),repeating-radial-gradient(circle at 50% 50%,transparent 0 1.5px,#5a4a2a10 1.5px 2.5px),radial-gradient(circle at 50% 42%,#f3e8c8,#dccb9f 62%,#bfaa7a);box-shadow:inset 0 2px 2px #ffffffd8,inset 0 -5px 7px #0003,0 0 0 1px #8a774c,0 2px 3px #0007}
#dial::after{content:"";position:absolute;inset:-24%;border-radius:50%;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from -1deg,#eadfc6a0 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 87% 93%,transparent 94%);mask:radial-gradient(circle closest-side,transparent 86%,#000 87% 93%,transparent 94%)}
#mark{background:linear-gradient(180deg,#ff7a63,#c9351f);box-shadow:inset 0 1px 1px #0006,0 1px 0 #fffa}
#stick{perspective:380px;box-shadow:inset 0 7px 16px #000e,inset 0 -2px 0 #ffffff12,0 1px 0 #ffffff22;background:radial-gradient(circle,transparent 0 45.6%,#ffffff1c 46.2%,#000a 47.6%,transparent 48.6%),radial-gradient(circle,transparent 0 46.5%,var(--well) 47%),radial-gradient(circle,#0000 0 16%,#000b 47%),repeating-radial-gradient(circle,#28403a 0 1.3cqw,#0a1512 1.3cqw 2.8cqw)}
#stick::before{content:"";position:absolute;left:50%;top:50%;width:15cqw;height:15cqw;margin:-7.5cqw;border-radius:50%;background:radial-gradient(circle at 40% 34%,#55554d,#161613 70%);box-shadow:0 3px 5px #000c}
#cap{z-index:2;background:radial-gradient(circle at 35% 26%,#fffdf7 0,#fff7e6 11%,transparent 32%),radial-gradient(circle at 50% 40%,#f6ecd3,#e0d0a8 62%,#c4b286);box-shadow:inset 0 2px 2px #fff,inset 0 -5px 7px #0003,0 4px 0 #c0ad80,0 7px 0 #9a875a,0 8px 1px #0009,7px 17px 16px #000b,2px 26px 30px #0007}
#cap::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#0000 0 4deg,#0000001a 4deg 8deg);-webkit-mask:radial-gradient(circle closest-side,transparent 76%,#000 79%);mask:radial-gradient(circle closest-side,transparent 76%,#000 79%)}
#cap::after{inset:21%;background:radial-gradient(circle at 50% 72%,#fff9 0,transparent 55%),radial-gradient(circle,#e9dcb8,#d4c394);box-shadow:inset 0 4px 7px #0004,inset 0 -2px 2px #fff9,0 1px 0 #fff8}
#grille{filter:drop-shadow(0 1px 0 #ffffff14)}
#wake{background:#1a100acc}
@media (orientation:portrait){:root{--tilt:8deg;--fit:.9;--edge:clamp(24px,5vmin,46px)}}
@media (orientation:landscape) and (max-height:480px){:root{--tilt:6deg;--fit:.88;--edge:22px}}

/* ===== real depth =====
   Raised parts are built in 3D so their walls meet the case's vanishing point. Every surface is its own layer,
   placed deepest first, because Safari paints a part's own surface before its layers instead of sorting by depth. */
:root{--thick:clamp(140px,16vw,200px);--tilt:30deg;--fit:.86;--radius:16px}
/* a real camera in front of the desk: the case leans back and its front wall faces us */
body{perspective:1500px;perspective-origin:50% 35%}
@media (orientation:portrait){:root{--tilt:24deg;--fit:.8;--thick:clamp(120px,14vw,180px)}body{perspective-origin:50% 62%}}
@media (orientation:landscape) and (max-height:480px){:root{--tilt:26deg;--thick:110px;--fit:.86}}
#device,#left,#right,#top,#fn,#transport,#keys,#stick{transform-style:preserve-3d}
/* in 3D the empty layout boxes sit level with the controls and can win a touch; only the controls take touches */
#device>*,#left>*,#right>*,#top>*,#fn>*,#transport>*,#keys>*{pointer-events:auto}
#device,#left,#right,#top,#fn,#transport,#keys{pointer-events:none}
#device{transform:translateY(-6%) rotateX(var(--tilt)) scale(var(--fit));background:none;box-shadow:none;border-radius:var(--radius)}
.layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none!important}
#device>.ground{inset:3% 2% 0;border-radius:24px;transform:translateZ(calc(var(--thick)*-1));background:#000b;box-shadow:26px 44px 64px 16px #000b,8px 16px 22px 4px #000d}
#device>.front{top:100%;bottom:auto;height:var(--thick);transform-origin:50% 0;transform:rotateX(-90deg);
  border-radius:0 0 var(--radius) var(--radius);left:3px;right:3px;
  background:linear-gradient(180deg,#2f564d 0,#1d3d37 45%,#060e0c 46.5% 48%,#1b3833 49.5%,#0b1816 100%)}
#device>.face{background:radial-gradient(120% 80% at 15% 0%,#3a6a5f 0%,transparent 55%),linear-gradient(165deg,var(--body-hi),var(--body) 45%,var(--body-lo));
  box-shadow:inset 0 1px 0 #ffffff40,inset 1px 0 0 #ffffff14,inset 0 -2px 0 #0006}
#stick::before{display:none}
#stick{perspective:none}
.w{transform:translateZ(calc(var(--i)*var(--step)*-1))}
.key{background:none;box-shadow:none;filter:none;transform:translateZ(11px);transform-style:preserve-3d;transition:transform .05s}
.key.down{background:none;box-shadow:none;filter:none;transform:translateZ(3px)}
.key::before{display:none}
.key .w{--step:1.4px;background:color-mix(in srgb,var(--d),#000 calc(var(--i)*3.5%))}
.key .w.b{box-shadow:5px 9px 11px #000b}
.key>.top{background:radial-gradient(ellipse 80% 22% at 50% 4%,#ffffff55,transparent 72%),linear-gradient(180deg,#ffffff38,#fff0 30%),var(--c);
  box-shadow:inset 0 1px 0 #ffffffc8,inset 0 -8px 14px #00000026,inset 0 0 0 1px #0000000f}
.key.down>.top{box-shadow:inset 0 1px 0 #ffffff90,inset 0 -4px 8px #0003}
#fn button,#transport button{background:none;box-shadow:none;transform:translateZ(7px);transform-style:preserve-3d;--wall:#0f241f;
  --face:radial-gradient(ellipse 85% 70% at 50% 0%,#ffffff26,transparent 70%),linear-gradient(180deg,#2e524a,#1a352f);--rim:inset 0 1px 0 #ffffff3a,inset 0 -3px 5px #0006}
#fn button.on,#transport #drums.on{background:none;box-shadow:none;--wall:#9c5d1b;--face:radial-gradient(ellipse 85% 70% at 50% 0%,#fff7,transparent 70%),linear-gradient(180deg,#ffc87c,#ee9f40);
  --rim:inset 0 1px 0 #fffb,inset 0 -3px 5px #0003,0 0 18px #ffb65c55}
#rec.live{background:none;box-shadow:none;--wall:#8a2416;--face:radial-gradient(ellipse 85% 70% at 50% 0%,#fff6,transparent 70%),linear-gradient(180deg,#ff7a63,#d8432d);
  --rim:inset 0 1px 0 #fffa,inset 0 -3px 5px #0003,0 0 20px #e8553f88}
#fn button.down,#transport button.down{box-shadow:none;transform:translateZ(2px)}
#fn button>.top,#transport button>.top{background:var(--face);box-shadow:var(--rim)}
#fn .w,#transport .w{--step:1.4px;background:color-mix(in srgb,var(--wall),#000 calc(var(--i)*6%))}
#fn .w.b,#transport .w.b{box-shadow:3px 6px 7px #000b}
#fn button>span,#transport button>span,#transport button>svg{position:relative}
#dial{background:none;box-shadow:none;transform:translateZ(19px);transform-style:preserve-3d}
#dial::before,#dial::after{display:none}
#dial .w{--step:1.6px;background:repeating-conic-gradient(from var(--rot,0deg),color-mix(in srgb,#e6d8b4,#000 calc(var(--i)*3%)) 0 2.4deg,color-mix(in srgb,#8a774c,#000 calc(var(--i)*3%)) 2.4deg 4.8deg)}
#dial .w.b{box-shadow:8px 13px 15px #000b,0 0 0 6px #0b1714,0 0 0 7px #ffffff12}
#dial>.top{background:repeating-conic-gradient(from var(--rot,0deg),#f4ead0 0 2.4deg,#a08d63 2.4deg 4.8deg);box-shadow:inset 0 0 0 1px #0005,inset 0 3px 2px #fff6}
#dial>.cap{inset:13%;background:radial-gradient(circle at 34% 26%,#fffbf2 0,#fff6e3 13%,transparent 40%),
  repeating-radial-gradient(circle at 50% 50%,transparent 0 1.5px,#5a4a2a10 1.5px 2.5px),radial-gradient(circle at 50% 42%,#f3e8c8,#dccb9f 62%,#bfaa7a);
  box-shadow:inset 0 2px 2px #ffffffd8,inset 0 -5px 7px #0003,0 0 0 1px #8a774c,0 2px 3px #0007}
#mark{z-index:auto}
#stick .boot{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2);border-radius:50%;pointer-events:none;
  transform:translateZ(var(--z));background:radial-gradient(circle,#1e302b 52%,#0b1412 100%);box-shadow:0 0 0 1px #0009,inset 0 1px 1px #ffffff1a}
#capshadow{position:absolute;left:50%;top:50%;width:36cqw;height:36cqw;margin:-18cqw;border-radius:50%;background:radial-gradient(circle,#000c 30%,#0000 70%);
  pointer-events:none;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
#arm{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;pointer-events:none;transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
#stick.drag #arm,#stick.drag #capshadow{transition:none}
#arm .stem{position:absolute;width:12cqw;height:12cqw;margin:-6cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4a4a43,#141412);transform:translateZ(var(--z))}
#arm .capw{position:absolute;width:40cqw;height:40cqw;margin:-20cqw;border-radius:50%;transform:translateZ(var(--z));
  background:repeating-conic-gradient(color-mix(in srgb,#dccca4,#000 var(--k)) 0 4deg,color-mix(in srgb,#b29f74,#000 var(--k)) 4deg 8deg)}
#cap{left:0;top:0;z-index:auto;transition:none;transform:translateZ(var(--capz));box-shadow:inset 0 2px 2px #fff,inset 0 -5px 7px #0003}