@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/chakra-petch-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/chakra-petch-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/michroma-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Flow: gate -> first-person walk-in (beat drops on his key press) -> the camera dives into the monitor -> the store, which IS that screen.
   "Studio" in the store's bar zooms back out to the interactive room; tapping the monitor in the room dives back in. One player throughout,
   so the beat never restarts. Single dark look by design. */
:root{
  --night:#0a0908; --cream:#f3ece2; --dim:#b8ad9e; --faint:#8a8072; --amber:#ffb347; --tape:#ff6a3d;
  /* the session on the monitor, sampled from the clip */
  --daw:#1d2a33; --daw-panel:#24333d; --daw-bar:#2c3c47; --daw-line:#33444f; --daw-grid:#26353f;
  --ink:#d1d5db; --ink-dim:#8b9aa7; --hi:#ffffff; --heat:#ff6a3d;
  /* the rest of the store, the same glass a few steps darker */
  --page:#0a0908; --card:#1d2a33; --card-2:#22313b; --line:#2a3943; --edge:rgba(255,179,71,.22);
  --display:'Inter',system-ui,sans-serif; --label:'Inter',system-ui,sans-serif; --brand:'Michroma','Inter',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--night);color:var(--cream)}
body{font:15px/1.55 var(--display);overflow:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
#app{position:fixed;inset:0;overflow:hidden;--bass:0;--hi:0;--lvl:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =================== the room =================== */
.backdrop{position:absolute;inset:-40px;background:#000 url(room-blur.webp) center/cover;filter:blur(28px) brightness(.42);opacity:0;transition:opacity 1s}
#app.walking .backdrop,#app.inroom .backdrop{opacity:1}
.frame{position:absolute;left:50%;top:50%;width:var(--fw);height:calc(var(--fw) * 9 / 16);transform:translate(-50%,-50%) translate(var(--zx,0px),var(--zy,0px)) scale(var(--zs,1));transform-origin:50% 50%;
  transition:transform var(--dive,1.3s) cubic-bezier(.6,0,.22,1);will-change:transform}
.frame video,.frame .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo{opacity:0;transition:opacity .35s}
#app.inroom .photo{opacity:1}
#app.inroom video{visibility:hidden}

@keyframes kick{50%{translate:0 1px}}
.cone{position:absolute;border-radius:50%;background:url(room-c.webp) no-repeat;pointer-events:none;opacity:0;transition:opacity .4s}
#app.inroom .cone{opacity:1}
.cone.w{transform:scale(calc(1 + var(--bass) * .06 + var(--kick,0) * .06));filter:brightness(calc(1 + var(--kick,0) * .1))}.cone.c{transform:scale(calc(1 + var(--bass) * .1 + var(--kick,0) * .1));filter:brightness(calc(1 + var(--bass) * .15 + var(--kick,0) * .15))}.cone.t{transform:scale(calc(1 + var(--treb,0) * .07))}
.bz{position:absolute;background:url(room-c.webp) no-repeat;pointer-events:none;opacity:0;transition:opacity .4s;-webkit-mask:radial-gradient(closest-side,#000 78%,transparent);mask:radial-gradient(closest-side,#000 78%,transparent);will-change:transform}
#app.inroom:not(.walking) .bz{opacity:1}
.coffee{position:absolute;pointer-events:none;filter:blur(.3px)}
@media (prefers-reduced-motion:reduce){.bz{display:none}}
.glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,170,70,.5),rgba(255,120,30,0) 70%);opacity:0}
#app.inroom .glow{opacity:calc(var(--bass) * 1.1)}
.strip{position:absolute;left:0;right:0;top:73.5%;height:5%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(60% 100% at 50% 50%,rgba(255,160,60,.9),rgba(255,120,30,0) 70%);opacity:0}
.lamp{position:absolute;left:80.1%;top:37.2%;width:8%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,190,90,.5),transparent 70%);opacity:0}
#app.inroom .strip{opacity:calc(.15 + var(--bass) * .8)}#app.inroom .lamp{opacity:calc(.2 + var(--lvl) * .9)}
/* the session on the monitor in the room */
.mon{position:absolute;left:30.21%;top:20.74%;width:34.01%;height:28.61%;background:var(--daw);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .5s .15s;
  display:flex;flex-direction:column;font:400 calc(var(--fw) * .0058) var(--mono);color:var(--ink);box-shadow:0 0 calc(var(--fw) * .03) rgba(120,150,200,calc(.1 + var(--lvl) * .25))}
#app.inroom .mon{opacity:1}
.mon .mb{display:flex;gap:.8em;align-items:center;padding:.55em .9em;background:var(--daw-bar);white-space:nowrap}
.mon .mb b{font-weight:500;color:var(--hi)}.mon .mb .now{margin-left:auto;color:var(--amber);overflow:hidden;text-overflow:ellipsis}
.mon .ml{flex:1;position:relative;display:grid;grid-auto-rows:1fr}
.mon .lane{display:grid;grid-template-columns:24% 1fr;align-items:center;border:0;border-bottom:1px solid var(--daw-grid);background:none;padding:0;text-align:left;min-height:0;color:inherit;font:inherit;cursor:pointer}
.mon .lane span:first-child{padding-left:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon .lane.on span:first-child{color:var(--amber)}
.mon .lane:hover{background:rgba(255,255,255,.04)}
.mon svg{width:100%;height:70%;display:block}
.mon .ph{position:absolute;top:0;bottom:0;left:24%;width:2px;background:#fff;box-shadow:0 0 6px #fff;pointer-events:none}
.hot{position:absolute;border:0;background:none;padding:0;border-radius:12px;visibility:hidden;pointer-events:none}
#app.inroom:not(.walking):not(.diving) .hot{visibility:visible;pointer-events:auto}   /* speakers only work once the intro is over */
.hot .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  background:rgba(10,9,8,.62);border:1px solid rgba(255,179,71,.35);padding:6px 10px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;backdrop-filter:blur(8px)}
.hot:hover .tip,.hot:focus-visible .tip,#app.hints .hot .tip{opacity:1}
#hotM{z-index:1}
@media (pointer:fine){.mon{z-index:2}#hotM{display:none}}   /* mouse: lanes on the screen are playable; the bar on the screen opens the store */
.mon .open{margin-left:.6em;border:1px solid rgba(255,179,71,.5);background:rgba(255,179,71,.12);color:var(--amber);border-radius:999px;padding:.15em .8em;font:inherit;cursor:pointer}
/* room chrome */
.rtop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;z-index:4;background:linear-gradient(rgba(10,9,8,.7),transparent);
  opacity:0;pointer-events:none;transition:opacity .5s .2s}
.brand{font:700 19px var(--display);letter-spacing:-.02em;display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--cream);background:none;border:0;padding:0}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 calc(4px + var(--lvl) * 16px) var(--amber)}
.pill{border:1px solid rgba(255,179,71,.5);background:rgba(255,179,71,.1);color:var(--cream);border-radius:999px;padding:9px 16px;font:500 13px var(--display);white-space:nowrap;backdrop-filter:blur(8px)}
.pill:hover{background:rgba(255,179,71,.2)}
.rdock{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:4;display:flex;gap:8px;align-items:center;width:min(560px,calc(100vw - 24px));
  background:rgba(10,9,8,.62);border:1px solid rgba(243,236,226,.14);border-radius:18px;padding:8px;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .5s .3s}
#app.inroom:not(.insite) .rtop,#app.inroom:not(.insite) .rdock{opacity:1;pointer-events:auto}
.rdock img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.rdock .t{min-width:0;flex:1;font:500 14px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdock .t small{display:block;font:400 10.5px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.ib{width:40px;height:40px;border-radius:50%;border:0;background:rgba(243,236,226,.08);color:var(--cream);font-size:13px;flex:none;display:grid;place-items:center}
.ib:hover{background:rgba(243,236,226,.16)}
.ib.big{width:46px;height:46px;background:var(--amber);color:#1a120a}
.ib svg{width:16px;height:16px;fill:currentColor}
.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 50%,rgba(255,190,110,.32),rgba(29,42,51,0) 70%);opacity:0;z-index:3}
#app.diving .flash{animation:flash 1.3s ease forwards}
@keyframes flash{55%{opacity:0}80%{opacity:1}100%{opacity:0}}

/* =================== the tag splash, every time you go into the screen =================== */
#tag{position:absolute;inset:0;z-index:13;display:grid;place-items:center;pointer-events:none;perspective:900px;
  background:radial-gradient(70% 60% at 50% 50%,rgba(29,42,51,.94),rgba(10,9,8,.98));opacity:0;visibility:hidden}
#tag.on{opacity:1;visibility:visible}
#tag.out{opacity:0;visibility:visible;transition:opacity .55s ease}
#tag .w{--g1:#7d848c;--g2:#e9edf1;--g3:#ffffff;--glow:rgba(220,230,240,.22);
  position:relative;font-size:min(var(--max,90px),calc(86vw / var(--n,20)));line-height:1.4;padding:.1em .35em;white-space:nowrap;transform-style:preserve-3d;
  background:linear-gradient(100deg,var(--g1) 0%,var(--g2) 18%,var(--g1) 32%,var(--g3) 46%,var(--g1) 60%,var(--g2) 76%,var(--g1) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 22px var(--glow))}
#tag .u{position:absolute;left:50%;bottom:-.1em;width:0;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--g2),transparent);opacity:.8}
#tag.on .w{animation:var(--fx) both, shine 1.5s .5s ease forwards}
#tag.on .u{animation:uline .8s .55s ease forwards}
@keyframes shine{from{background-position:100% 0}to{background-position:-20% 0}}
@keyframes uline{to{width:70%}}
/* first time in: silver cursive spins a few times, lands, then the cartoon "ting" */
@keyframes tagspin{0%{transform:rotateY(0) scale(.6);filter:blur(6px)}35%{filter:blur(3px)}75%{filter:blur(0)}88%{transform:rotateY(1090deg) scale(1.04)}100%{transform:rotateY(1080deg) scale(1)}}
#tag.first.on .u{animation-delay:1s}
#tag.ting .w{animation:pop .42s cubic-bezier(.3,1.8,.5,1), shine 1.2s ease forwards}
@keyframes pop{0%{transform:rotateY(1080deg) scale(1)}40%{transform:rotateY(1080deg) scale(1.07)}100%{transform:rotateY(1080deg) scale(1)}}
.spark{position:absolute;right:.16em;top:.12em;width:.62em;height:.62em;background:#fff;opacity:0;transform:scale(0);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 6px #fff)}
.spark.s2{right:.62em;top:.5em;width:.32em;height:.32em}
#tag.ting .spark{animation:glint .7s cubic-bezier(.2,.9,.3,1) forwards}
#tag.ting .spark.s2{animation-delay:.12s}
@keyframes glint{0%{opacity:0;transform:scale(0) rotate(0)}35%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(0) rotate(120deg)}}
/* the random looks */
@keyframes fx-rise{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(10px)}to{opacity:1;transform:none}}
@keyframes fx-slam{0%{opacity:0;transform:scale(2.6)}55%{opacity:1;transform:scale(.94)}70%{transform:scale(1.03) translateX(-3px)}80%{transform:translateX(3px)}100%{transform:none}}
@keyframes fx-glitch{0%{opacity:0;clip-path:inset(40% 0 45% 0);transform:translateX(-14px)}10%{opacity:1;clip-path:inset(10% 0 70% 0);transform:translateX(10px)}20%{clip-path:inset(60% 0 5% 0);transform:translateX(-6px)}30%{clip-path:inset(0 0 0 0);transform:skewX(8deg)}40%{transform:skewX(-6deg) translateX(4px)}50%,100%{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
@keyframes fx-flicker{0%{opacity:0}8%{opacity:1}12%{opacity:.1}20%{opacity:1}26%{opacity:.3}34%,100%{opacity:1}}
@keyframes fx-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-drop{0%{opacity:0;transform:translateY(-80px)}55%{opacity:1;transform:translateY(8px)}72%{transform:translateY(-4px)}100%{transform:none}}
@keyframes fx-flip{from{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:none}}
@keyframes fx-stretch{0%{opacity:0;transform:scaleX(3) scaleY(.2);filter:blur(8px)}60%{opacity:1;transform:scaleX(.92) scaleY(1.08)}100%{transform:none}}

/* =================== gate =================== */
#gate{position:absolute;inset:0;display:grid;place-items:center;background:var(--night);z-index:20;transition:opacity .6s}
#gate.out{opacity:0;pointer-events:none}
.gate-in{display:grid;justify-items:center;gap:28px;padding-inline:16px}
#gate svg{width:min(88vw,860px);height:auto;overflow:visible}
#gate text{font:400 42px var(--brand);letter-spacing:.02em;fill:transparent;stroke:var(--amber);stroke-width:1.3;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s ease forwards}
#gate path{fill:none;stroke:var(--amber);stroke-width:2;opacity:.75;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.enter{border:1px solid rgba(255,179,71,.55);background:rgba(255,179,71,.08);color:var(--cream);font:500 13px var(--mono);letter-spacing:.24em;text-transform:uppercase;padding:14px 26px;border-radius:999px;
  opacity:.01;animation:fadein .8s 1.9s forwards, breathe 2.4s 2.7s ease-in-out infinite}
@keyframes fadein{to{opacity:1}}
@keyframes breathe{50%{box-shadow:0 0 0 8px rgba(255,179,71,.06)}}
.gate-note{font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);opacity:.01;animation:fadein .8s 2.2s forwards}
.skip{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:21;background:rgba(10,9,8,.45);border:1px solid rgba(243,236,226,.18);
  color:var(--dim);font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:7px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.skip:hover{color:var(--cream)}
.skip{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.skip.show{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease}
.unmute{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:21;border:1px solid rgba(255,179,71,.55);background:rgba(10,9,8,.55);color:var(--cream);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;border-radius:999px;backdrop-filter:blur(8px);animation:breathe 2.4s ease-in-out infinite}

/* =================== the store =================== */
#site{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;overflow-y:auto;overflow-x:hidden;background:var(--page);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;scroll-behavior:smooth;overscroll-behavior:contain}
#app.insite #site{opacity:1;visibility:visible;transition:opacity .6s ease}
#app.leaving #site{opacity:0;transition:opacity .45s ease}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.mono{font-family:var(--mono)}
/* window bar = site header */
.win{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top,0px)) 20px 10px;background:rgba(36,51,61,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--daw-line)}
.dots{display:flex;gap:7px;flex:none}
.win .brand{font-size:17px;margin-right:0;text-decoration:none}
.win nav{display:flex;gap:2px;margin-left:auto}
.win nav a{color:var(--ink);text-decoration:none;font:500 14px var(--display);padding:7px 11px;border-radius:7px}
.win nav a:hover{color:var(--hi);background:rgba(255,255,255,.05)}
.win nav a.cur{color:var(--hi);background:rgba(255,255,255,.07)}
.studio{display:flex;align-items:center;gap:7px;border:1px solid var(--daw-line);background:none;color:var(--hi);border-radius:8px;padding:7px 11px;font:500 13px var(--display)}
.studio:hover{border-color:var(--amber)}
.bag{font:400 12px var(--mono);border:1px solid var(--daw-line);border-radius:8px;padding:8px 11px;color:var(--hi);background:none;white-space:nowrap}
.bag b{color:var(--amber);font-weight:500}

/* --- 01 the session (the screen, blown up) --- */
.s1{padding:16px 20px 100px;min-height:calc(100svh - 58px);display:flex;flex-direction:column}
.daw{flex:1;display:flex;flex-direction:column;background:var(--daw);border:1px solid var(--daw-line);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 120px -40px rgba(255,170,90,calc(.15 + var(--lvl) * .35))}
.tb{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px;background:var(--daw-bar);border-bottom:1px solid var(--daw-line);font:400 12px var(--mono);white-space:nowrap}
.tb .file{color:var(--hi)}.tb .file span{color:var(--ink-dim)}
.lcd{margin-inline:auto;display:flex;align-items:stretch;border:1px solid #15202a;background:#141d24;border-radius:7px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.lcd div{padding:5px 14px;border-right:1px solid #22303a;display:flex;flex-direction:column;justify-content:center;min-width:76px}
.lcd div:last-child{border-right:0}
.lcd small{font-size:9px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;line-height:1.3}
.lcd b{font:500 15px var(--mono);color:var(--amber);line-height:1.25;font-variant-numeric:tabular-nums}
.lcd .vu{flex-direction:row;align-items:flex-end;gap:2px;min-width:0;padding:7px 12px;height:auto}
.lcd .vu i{width:4px;background:linear-gradient(var(--tape),var(--amber));border-radius:1px;height:10%}
.rec{display:flex;align-items:center;gap:7px;color:var(--ink-dim)}
.rec i{width:8px;height:8px;border-radius:50%;background:#3e4f5b}
.rec.on{color:var(--amber)}.rec.on i{background:var(--tape);box-shadow:0 0 10px var(--tape)}
.grid{flex:1;display:grid;grid-template-columns:var(--hw,300px) 1fr;grid-template-rows:auto 1fr;position:relative}
.rh{padding:9px 14px;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);background:var(--daw-panel);border-right:1px solid var(--daw-line);border-bottom:1px solid var(--daw-line)}
.ruler{position:relative;border-bottom:1px solid var(--daw-line);background:var(--daw-panel);font:400 10px var(--mono);color:var(--ink-dim);cursor:pointer}
.ruler span{position:absolute;top:8px;transform:translateX(5px)}
.ruler span::before{content:"";position:absolute;left:-5px;top:-8px;height:28px;width:1px;background:var(--daw-line)}
.heads{display:flex;flex-direction:column;background:var(--daw-panel);border-right:1px solid var(--daw-line)}
.tracks{position:relative;display:flex;flex-direction:column;background:
  repeating-linear-gradient(90deg,var(--daw-grid) 0 1px,transparent 1px calc(100% / 6))}
.hd,.tk{flex:1;min-height:56px;border-bottom:1px solid var(--daw-grid)}
.hd{display:grid;grid-template-columns:4px 50px 1fr auto;gap:12px;align-items:center;padding:0 12px 0 0;border:0;border-bottom:1px solid var(--daw-grid);background:none;text-align:left;color:inherit}
.hd .chip{align-self:stretch;background:var(--c)}
.hd img{width:50px;height:50px;border-radius:6px;object-fit:cover;display:block;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hd .nm{min-width:0}
.hd .nm b{display:block;font:500 15.5px/1.25 var(--display);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .nm small{display:block;font:400 11px var(--mono);color:var(--ink-dim);margin-top:2px}
.hd .nm small em{font-style:normal;color:var(--ink)}
.hd .st{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--daw-line);color:var(--ink)}
.hd .st svg{width:12px;height:12px;fill:currentColor}
.hd:hover{background:rgba(255,255,255,.03)}
.hd.on{background:rgba(255,179,71,.07)}
.hd.on .nm b{color:var(--amber)}
.hd.on .st{background:var(--amber);border-color:var(--amber);color:#1a120a}
.new{display:inline-block;font:500 9px var(--mono);letter-spacing:.16em;color:var(--amber);margin-left:7px;vertical-align:2px}
.tk{position:relative;cursor:pointer;padding:9px 0}
.tk svg{position:absolute;left:0;top:9px;width:100%;height:calc(100% - 18px);display:block;opacity:.6;transition:opacity .3s}
.tk.on svg{opacity:1;filter:drop-shadow(0 0 calc(var(--bass) * 14px) rgba(255,150,60,.55))}
.tk:hover svg{opacity:.95}
.playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--amber);box-shadow:0 0 calc(10px + var(--bass) * 18px) rgba(255,179,71,.9);pointer-events:none;z-index:2;left:0}
.playhead::before{content:"";position:absolute;top:-1px;left:-5px;border:6px solid transparent;border-top:8px solid var(--amber)}
.dfoot{display:flex;align-items:center;gap:16px;padding:12px 14px;background:var(--daw-panel);border-top:1px solid var(--daw-line);font:400 12px var(--mono);color:var(--ink-dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:12px 20px;font:500 14px var(--display);border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn.p{background:var(--amber);color:#1a120a;box-shadow:0 0 calc(4px + var(--bass) * 22px) rgba(255,179,71,calc(.12 + var(--bass) * .35));transition:background .35s ease,box-shadow .35s ease,transform .35s ease}
.btn.p:hover{background:var(--heat);box-shadow:0 0 28px rgba(255,106,61,.45)}
.btn.s{border-color:var(--daw-line);color:var(--hi);background:rgba(255,255,255,.02)}
.btn.s{transition:border-color .35s ease,color .35s ease,box-shadow .35s ease}
.btn.s:hover{border-color:var(--heat);color:var(--heat);box-shadow:0 0 18px rgba(255,106,61,.2)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.dfoot .btn{margin-left:auto}

/* --- section frame --- */
.sec{padding:clamp(72px,9vw,120px) 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec{background:radial-gradient(60% 40% at 50% 0%,rgba(255,179,71,.05),transparent 70%)}
/* fade + blur in as each piece scrolls into view */
.rv{opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.rv.in{opacity:1;transform:none;filter:none}
.kick{font:500 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);display:flex;gap:14px;align-items:center}
.kick::before{content:attr(data-n);color:var(--ink-dim)}
.h2{font:700 clamp(36px,5.4vw,68px)/1 var(--display);letter-spacing:-.045em;color:var(--hi);margin:16px 0 0;text-wrap:balance}
.h2 em{font-style:normal;color:var(--amber)}
.lede{max-width:54ch;color:var(--ink);margin:18px 0 0;font-size:16px}
.shead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:44px}

/* --- 02 licensing --- */
.for{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 6px 6px 6px;font:400 12px var(--mono);color:var(--ink)}
.for img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.for b{color:var(--hi);font:500 13px var(--display)}
.for button{border:0;background:rgba(255,255,255,.06);border-radius:999px;padding:5px 10px;font-size:11px;color:var(--ink)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.tier,.pack,.way,form.card{border-color:var(--edge)!important;transition:border-color .45s ease,box-shadow .45s ease}
.tier:hover,.pack:hover,.way:hover,form.card:focus-within{border-color:rgba(255,179,71,.7)!important;box-shadow:0 0 0 1px rgba(255,179,71,.12),0 18px 50px -20px rgba(255,150,60,.35)}
.tier{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px 26px;position:relative}
.tier.feat{background:linear-gradient(180deg,rgba(255,179,71,.09),rgba(255,179,71,0) 38%),var(--card-2);border-color:rgba(255,179,71,.5)!important;animation:breathe2 3.2s ease-in-out infinite}
@keyframes breathe2{50%{box-shadow:0 0 34px -6px rgba(255,179,71,.28)}}
.badge{position:absolute;top:-11px;left:26px;background:var(--amber);color:#1a120a;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.tier h3{margin:0;font:700 24px/1.15 var(--display);letter-spacing:-.025em;color:var(--hi)}
.tier .for-who{margin:6px 0 0;color:var(--ink-dim);font-size:14px;min-height:3.2em}
.price{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px;padding:16px 0;border-block:1px solid var(--line)}
.price b{font:700 30px var(--display);letter-spacing:-.03em;color:var(--hi)}
.price small{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.tier ul{list-style:none;margin:14px 0 26px;padding:0;display:grid;gap:11px;flex:1;align-content:start}
.tier li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink);font-size:15px;line-height:1.45}
.tier li svg{width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--amber);stroke-width:2.2}
.tier .btn{width:100%}
.fine{margin:26px 0 0;color:var(--ink-dim);font-size:13px;text-align:center}


/* =================== the rack (licensing + packs) =================== */
.rack{display:grid;gap:6px;padding:10px 0;position:relative}
.rack::before,.rack::after{content:"";position:absolute;top:0;bottom:0;width:10px;background:repeating-linear-gradient(#141c22 0 14px,#0a0908 14px 18px);border-radius:2px}
.rack::before{left:-14px}.rack::after{right:-14px}
.unit{position:relative;display:grid;grid-template-columns:22px 1fr 22px;background:linear-gradient(180deg,#22313b,#1d2a33 40%,#19252d);border:1px solid #33444f;border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 0 #050505;transition:border-color .5s ease,box-shadow .5s ease}
.ear{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0;background:linear-gradient(90deg,#1a252d,#22303a,#1a252d)}
.ear:first-child{grid-column:1;grid-row:1/span 2;border-right:1px solid #2b3a44}.ear:last-child{grid-column:3;grid-row:1/span 2;border-left:1px solid #2b3a44}
.unit .face{grid-column:2;grid-row:1}
.ear i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7b8893,#2b353d 70%);box-shadow:inset 0 0 0 1px #11181d}
.ear i::after{content:"";display:block;width:7px;height:1.5px;margin:3.7px auto 0;background:#151c21;transform:rotate(35deg)}
.face{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,2fr) auto auto;gap:22px;align-items:center;padding:14px 20px;min-height:96px}
.who{grid-column:2;grid-row:2;margin:0;padding:0 20px 12px;font:400 12px var(--mono);color:var(--ink-dim);letter-spacing:.02em}
.who.in{padding:6px 0 0;grid-column:auto;grid-row:auto}
/* digital readout */
.lcd2{display:flex;flex-direction:column;gap:2px;background:#0b1013;border:1px solid #05080a;border-radius:4px;padding:9px 12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.7);min-width:0;transition:opacity .2s}
.lcd2 small{font:500 9.5px var(--mono);letter-spacing:.2em;color:#5f7282;text-transform:uppercase}
.lcd2 b{font:500 19px/1.25 var(--mono);letter-spacing:.06em;color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd2 .src{font:400 11px var(--mono);letter-spacing:.08em;color:#c9a46a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.specs li{display:flex;align-items:center;gap:7px;font:400 11.5px var(--mono);letter-spacing:.04em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.led{width:6px;height:6px;border-radius:50%;background:#2c3a44;box-shadow:inset 0 0 0 1px #11181d;flex:none;transition:background .3s,box-shadow .3s}
.readout{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono)}
.readout small{font-size:9.5px;letter-spacing:.2em;color:#5f7282;text-transform:uppercase}
.readout b{font:500 16px var(--mono);color:var(--hi);letter-spacing:.08em}
.readout em{font:500 9px var(--mono);font-style:normal;letter-spacing:.16em;color:#1a120a;background:var(--amber);padding:2px 6px;border-radius:2px;text-transform:uppercase}
/* toggle switch */
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.track{width:26px;height:48px;border-radius:5px;background:#0b1013;border:1px solid #05080a;box-shadow:inset 0 2px 6px rgba(0,0,0,.8);position:relative;transition:box-shadow .3s}
.nub{position:absolute;left:3px;right:3px;bottom:3px;height:22px;border-radius:3px;background:linear-gradient(#6c7781,#3a444c);box-shadow:0 2px 3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .3s}
.sw-l{font:500 9.5px var(--mono);letter-spacing:.2em;color:#6f8090;transition:color .3s}
.sw input:checked + .track .nub{transform:translateY(-20px);background:linear-gradient(#ffd08a,var(--amber))}
.sw input:checked + .track{box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 16px rgba(255,179,71,.5)}
.sw input:checked ~ .sw-l{color:var(--amber);text-shadow:0 0 8px rgba(255,179,71,.6)}
.sw input:focus-visible + .track{outline:2px solid var(--amber);outline-offset:3px}
.sw:hover .nub{background:linear-gradient(#7d8892,#465059)}
.sw:hover input:checked + .track .nub{background:linear-gradient(#ffb48a,var(--heat))}
/* knob */
.knob{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0}
.knob .cap{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#56616a,#1f282e 62%,#141a1f);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 4px #121a1f,0 0 0 5px #2c3a44;position:relative;transition:transform .5s cubic-bezier(.3,1.3,.5,1),box-shadow .35s}
.knob .cap::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.knob .kl{font:500 9.5px var(--mono);letter-spacing:.2em;color:#6f8090}
.knob:hover .cap{transform:rotate(60deg);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 4px #121a1f,0 0 0 5px var(--heat),0 0 18px rgba(255,106,61,.35)}
.knob:hover .kl{color:var(--heat)}
.knob.on .cap{transform:rotate(140deg)}.knob.on .kl{color:var(--amber)}
.src-u .face{grid-template-columns:auto minmax(0,1fr) auto auto}
.src-u img{width:62px;height:62px;border-radius:3px;object-fit:cover;border:1px solid #05080a}
.vu2{display:flex;gap:3px;align-items:flex-end;height:30px}
.vu2 i{width:5px;border-radius:1px;background:#2c3a44;height:20%;transition:height .08s linear}
.pack-u .face{grid-template-columns:auto minmax(0,1fr) auto auto;min-height:150px}
.art2{width:130px;height:130px;border-radius:3px;object-fit:cover;border:1px solid #05080a;filter:brightness(.55) saturate(.6);transition:filter .6s ease}
.blank .face{grid-template-columns:1fr auto 1fr;min-height:46px;padding:8px 20px}
.vents{height:18px;background:repeating-linear-gradient(90deg,#0d1317 0 10px,transparent 10px 15px);border-radius:2px;opacity:.9}
.slot{font:500 10px var(--mono);letter-spacing:.22em;color:#58697a}
/* power-on: everything starts dark, then each unit lights up top to bottom */
.unit .lcd2,.unit .specs,.unit .readout,.unit .who{opacity:.12}
.unit.pw .lcd2{animation:flick .6s steps(1) forwards}
.unit.pw .specs,.unit.pw .readout,.unit.pw .who{opacity:1;transition:opacity .5s .25s ease}
.unit.pw .led{background:#4c5f6c}
.unit.pw .art2{filter:none}
@keyframes flick{0%{opacity:.12}12%{opacity:1}20%{opacity:.25}34%{opacity:1}42%{opacity:.5}55%,100%{opacity:1}}
.unit.pw::before{content:"";position:absolute;left:30px;top:8px;width:5px;height:5px;border-radius:50%;background:#59d18a;box-shadow:0 0 6px #59d18a}
/* the active unit throws light into the room */
.unit.live{border-color:rgba(255,179,71,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,179,71,.25),0 0 40px -6px rgba(255,170,70,.45),0 26px 60px -24px rgba(255,140,50,.5)}
.unit.live .led{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.unit.live::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.unit:not(.live):hover{border-color:rgba(255,179,71,.35)}
.tier-u.feat:not(.live){border-color:rgba(255,179,71,.4)}
@media (max-width:900px){
  .face{grid-template-columns:1fr auto;gap:14px;padding:14px}
  .face .specs{grid-column:1/-1;order:3}
  .tier-u .readout{grid-row:2;grid-column:1;align-items:flex-start;flex-direction:row;gap:10px;align-items:baseline}
  .tier-u .sw{grid-row:1/3;grid-column:2}
  .who{grid-column:2;padding:0 14px 12px}
  .src-u .face{grid-template-columns:auto 1fr auto}.src-u .vu2{display:none}
  .pack-u .face{grid-template-columns:1fr auto auto}.pack-u .art2{grid-column:1/-1;width:100%;height:auto;aspect-ratio:1}
  .unit{grid-template-columns:14px 1fr 14px}.ear i{width:7px;height:7px}.ear i::after{width:5px;margin-top:2.7px}
  .unit.pw::before{left:20px}
  .rack::before,.rack::after{display:none}
  .lcd2 b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.unit.pw .lcd2{animation:none;opacity:1}}

/* --- 03 packs --- */
.pack{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,32px)}
.pack .art{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.pack .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pack:hover .art img{transform:scale(1.03)}
.pack .lbl{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.pack h3{font:700 clamp(32px,4vw,52px)/1 var(--display);letter-spacing:-.04em;color:var(--hi);margin:10px 0 14px}
.pack p{margin:0;color:var(--ink);max-width:46ch}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.facts span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:400 12px var(--mono);color:var(--ink)}
.facts span b{color:var(--hi);font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.link{color:var(--hi);text-decoration:none;font:500 14px var(--display);display:inline-flex;gap:8px;align-items:center;padding:12px 6px}
.link:hover{color:var(--amber)}
.link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.soon{margin-top:16px;display:flex;align-items:center;gap:14px;border:1px dashed var(--line);border-radius:14px;padding:16px 20px;color:var(--ink-dim);font-size:14px}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--amber);opacity:.7;flex:none;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.2}}

/* --- 04 contact --- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.ways{display:grid;gap:12px}
.way{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.way .lbl{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.way .v{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.way .v b{font:500 18px var(--display);color:var(--hi);word-break:break-all}
.sm{border:1px solid var(--line);background:none;border-radius:999px;padding:7px 14px;font:500 13px var(--display);color:var(--hi)}
.sm:hover{border-color:var(--amber);color:var(--amber)}
.socials{display:flex;gap:8px;margin-top:10px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--hi)}
.socials a:hover{border-color:var(--amber);color:var(--amber)}
.socials svg{width:18px;height:18px;fill:currentColor}
form.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:grid;gap:7px}
.f.full{grid-column:1/-1}
.f label{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.f input,.f textarea{width:100%;background:#141e25;border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--hi);font-size:15px;transition:border-color .2s}
.f textarea{min-height:140px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,179,71,.12)}
.send{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;flex-wrap:wrap}
.send small{color:var(--ink-dim);font-size:13px;display:flex;gap:8px;align-items:center}
.send small svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* --- footer --- */
footer.foot{border-top:1px solid var(--line);padding:56px 0 calc(110px + env(safe-area-inset-bottom,0px));background:var(--page)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.fbrand .brand{font-size:22px}
.fbrand p{color:var(--ink-dim);font-size:14px;max-width:34ch;margin:12px 0 0}
.fcol h4{margin:0 0 12px;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.fcol a{display:block;color:var(--ink);text-decoration:none;padding:5px 0;font-size:15px}
.fcol a:hover{color:var(--amber)}
.fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-dim);font:400 12px var(--mono)}

/* --- player (store) --- */
.player{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,0);width:min(980px,calc(100vw - 24px));z-index:12;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.3fr) auto;gap:14px;align-items:center;
  background:rgba(29,42,51,.9);border:1px solid var(--daw-line);border-radius:16px;padding:8px 10px 8px 8px;backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transition:opacity .4s .25s}
#app.insite:not(.leaving) .player{opacity:1;visibility:visible}
.player img{width:46px;height:46px;border-radius:9px;object-fit:cover}
.player .t{min-width:0}
.player .t b{display:block;font:500 15px var(--display);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .t small{font:400 11px var(--mono);color:var(--ink-dim)}
.player .ctl{display:flex;gap:6px;align-items:center}
.player .ib{background:rgba(255,255,255,.06);color:var(--hi)}
.player .ib.big{background:var(--amber);color:#1a120a}
.scrub{display:flex;align-items:center;gap:10px;font:400 11px var(--mono);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.bar{position:relative;flex:1;height:22px;cursor:pointer;display:flex;align-items:center}
.bar::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:4px;background:#33444f}
.bar i{position:absolute;left:0;height:4px;border-radius:4px;background:var(--amber);width:0}
.bar b{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;margin-left:-6px;left:0;box-shadow:0 0 0 4px rgba(255,179,71,.25)}
.player .lease{padding:10px 16px}

/* player: full bar <-> minimized puck */
.player{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.3fr) auto auto}
.pcov{position:relative;display:block;border-radius:11px;padding:0;flex:none}
.psz{width:34px;height:34px}
.psz svg{width:14px;height:14px}
.player.morph{animation:morph .38s cubic-bezier(.2,.8,.2,1)}
@keyframes morph{from{opacity:.2;filter:blur(4px)}to{opacity:1;filter:none}}
.player.mini{left:auto;right:calc(14px + env(safe-area-inset-right,0px));transform:none;width:auto;grid-template-columns:auto auto auto;gap:10px;padding:6px 8px 6px 6px;border-radius:999px}
.player.mini .t,.player.mini .scrub,.player.mini .lease{display:none}
.player.mini .ctl .ib{display:grid!important}
.player.mini .pcov{cursor:pointer;border-radius:50%;padding:3px;background:conic-gradient(var(--amber) var(--p,0deg),#33444f 0)}
.player.mini .pcov img{width:40px;height:40px;border-radius:50%;display:block;border:2px solid #1d2a33}
.player.mini .ctl{display:flex}
#app.insite:not(.leaving) .player.mini ~ .toast{bottom:84px}
@media (max-width:760px){.player .psz{display:grid}.player{grid-template-columns:auto minmax(0,1fr) auto auto}}

/* --- browse all --- */
#browse{position:absolute;inset:0;z-index:15;display:flex;justify-content:flex-end;background:rgba(5,8,10,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
#browse.on{opacity:1;visibility:visible;transition:opacity .35s}
.sheet{width:min(760px,100%);height:100%;background:var(--page);border-left:1px solid var(--daw-line);display:flex;flex-direction:column;transform:translateX(30px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#browse.on .sheet{transform:none}
.sh-top{padding:calc(18px + env(safe-area-inset-top,0px)) 22px 16px;border-bottom:1px solid var(--line);display:grid;gap:14px}
.sh-top .r{display:flex;align-items:center;gap:12px}
.sh-top h2{margin:0;font:700 28px var(--display);letter-spacing:-.03em;color:var(--hi);margin-right:auto}
.search{display:flex;align-items:center;gap:10px;background:#141e25;border:1px solid var(--line);border-radius:12px;padding:0 14px}
.search svg{width:16px;height:16px;fill:none;stroke:var(--ink-dim);stroke-width:2}
.search input{flex:1;border:0;background:none;padding:12px 0;color:var(--hi);outline:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:none;border-radius:999px;padding:6px 12px;font:400 12px var(--mono);color:var(--ink)}
.chips button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber);background:rgba(255,179,71,.08)}
.list{flex:1;overflow:auto;padding:6px 10px 30px}
.row{display:grid;grid-template-columns:40px 52px minmax(0,1fr) 150px auto;gap:14px;align-items:center;padding:10px 12px;border-radius:12px}
.row:hover{background:rgba(255,255,255,.03)}
.row.on{background:rgba(255,179,71,.06)}
.row .pb{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;display:grid;place-items:center;color:var(--hi)}
.row.on .pb{background:var(--amber);border-color:var(--amber);color:#1a120a}
.row .pb svg{width:12px;height:12px;fill:currentColor}
.row img{width:52px;height:52px;border-radius:8px;object-fit:cover}
.row .nm b{display:block;font:500 15px var(--display);color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.on .nm b{color:var(--amber)}
.row .nm small{font:400 11px var(--mono);color:var(--ink-dim)}
.row .mini{height:30px}
.row .mini svg{width:100%;height:100%;display:block}
.empty{padding:40px 12px;color:var(--ink-dim);text-align:center}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);background:#0d1318;border:1px solid var(--daw-line);color:var(--hi);padding:10px 16px;border-radius:999px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:30;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  .tiers{grid-template-columns:1fr;max-width:560px}
  .pack{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .player{grid-template-columns:auto minmax(0,1fr) auto auto auto}.scrub{display:none}
}
@media (max-width:760px){
  .win{gap:10px;padding-inline:14px}.win nav,.dots{display:none}.win .brand{margin-right:auto}.studio span{display:none}
  .s1{padding:10px 10px 22px}
  .grid{--hw:minmax(0,1fr)}
  .tb .file span,.lcd .vu,.rec span{display:none}
  .lcd div{min-width:0;padding:4px 10px}
  .hd{grid-template-columns:4px 44px 1fr auto;gap:10px}.hd img{width:44px;height:44px}
  .grid{grid-template-columns:62% 38%}
  .hd,.tk{min-height:52px}.ruler span:nth-child(even){display:none}
  .s1{height:auto;min-height:calc(100svh - 54px);padding-bottom:96px}
  .dfoot span{display:none}.dfoot .btn{margin:0 auto 0 0}
  .shead{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}
  .player .lease,.player .ctl .ib:not(.big){display:none}
  .row{grid-template-columns:38px 46px minmax(0,1fr) auto}.row .mini{display:none}.row img{width:46px;height:46px}
  .rdock .pv{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}.tier.feat{animation:none}
  #tag .w{animation:none!important}
  #gate text,#gate path{animation:none;stroke-dashoffset:0}.enter,.gate-note{animation:none;opacity:1}.frame{transition:none}#app.diving .flash{animation:none}#site{scroll-behavior:auto}
}

/* =================== typography: brand / label / data =================== */
/* 1. BRAND: wide, engineered, all caps (section titles, logo) */
.h2,.sh-top h2,.brand,.win .brand{font-family:var(--brand)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.09em}
.h2{font-size:clamp(24px,3.9vw,50px);line-height:1.15;color:#f2efe9;margin-top:18px}
.h2 em{color:var(--amber);text-shadow:0 0 18px rgba(255,179,71,.25)}
.brand,.win .brand{font-size:14px!important}
.fbrand .brand{font-size:16px!important}
.sh-top h2{font-size:20px}
/* 2. LABEL: clean, dimmed, uppercase, tracked (names of things) */
.kick,.lbl,.lcd small,.lcd2 small,.readout small,.sw-l,.knob .kl,.rh,.way .lbl,.f label,.fcol h4,.specs li,.slot,.chips button,.filters button,.badge,.readout em,
.win nav a,.studio,.bag,.rec,.tb .file,.dfoot,.fbase,.ruler,.card .lbl,.pack .lbl,.player .t small{font-family:var(--label)!important;text-transform:uppercase;letter-spacing:.16em;font-weight:500}
.kick{font-size:11px;color:var(--ink-dim)}.kick::before{color:var(--amber)}
.win nav a{font-size:11.5px;color:#9fb0bd}
.win nav a.cur,.win nav a:hover{color:#fff}
.studio{font-size:11px}.bag{font-size:11px}
.lcd2 small,.readout small,.rh,.f label,.fcol h4,.way .lbl{font-size:10px;color:#7f93a3}
.specs li{font-size:11px;letter-spacing:.12em;color:#b9c3cb}
.sw-l,.knob .kl{font-size:9.5px;letter-spacing:.22em}
.lede,.who,.note,.fine,.fbrand p,.send small{font-family:var(--label);font-weight:400;color:#a9b4bd}
.btn{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600}
.fcol a{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;color:#a9b4bd}
/* 3. DATA: monospaced LED readout, amber, glowing (values only) */
.lcd b,.lcd2 b,.lcd2 .src,.readout b,.tb .lcd b,#time,.scrub span,.dur,.bag b,.ruler span,.way .v b,#phone,.f input,.f textarea,.search input,.slot b{
  font-family:var(--mono)!important;color:var(--amber);text-shadow:0 0 5px rgba(255,179,71,.75)}
.lcd2 .src{color:#e0a54f;text-shadow:0 0 4px rgba(255,179,71,.5)}
.ruler span{text-shadow:none;color:#c18a3e}
.way .v b{font-size:16px;letter-spacing:.04em}
.readout b{font-size:17px;letter-spacing:.1em}
.f input::placeholder,.f textarea::placeholder,.search input::placeholder{color:#55687a;text-shadow:none;font-family:var(--label)}
/* beat names read like a display on the gear */
.hd .nm b,.row .nm b{font-family:var(--mono)!important;font-weight:500;letter-spacing:0;font-size:14px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* units and separators dim, values amber: "130 BPM · B MIN" reads label/value like a mixer */
.hd .nm small,.row .nm small,.player .t small{font-family:var(--label)!important;color:#7f93a3;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;font-weight:500}
.hd .nm small em,.row .nm small em,.player .t small em{font-family:var(--mono);font-style:normal;color:var(--amber);text-shadow:0 0 5px rgba(255,179,71,.6);letter-spacing:.02em;font-size:11.5px;margin-right:2px}
.player .t b{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:0}
.lcd b{text-transform:uppercase}
.win nav a{font-size:12px}
.hd .nm small,.row .nm small{text-transform:uppercase;letter-spacing:.06em}
.hd.on .nm b,.row.on .nm b{text-shadow:0 0 6px rgba(255,179,71,.6)}
/* mixer alignment: label left, value right */
.way .v{justify-content:space-between}
.readout{text-align:right}

/* =================== each part gets its own voice =================== */
/* top bar: squared, hardware-panel lettering */
.win nav a,.studio,.bag,.tb .file,.rh,.dfoot,.rec{font-family:'Chakra Petch',var(--label)!important;font-weight:600;letter-spacing:.16em}
.win nav a{font-size:13px}
/* top readout: segment-style display digits */
.lcd b,#lTime{font-family:'Share Tech Mono',var(--mono)!important;font-size:19px;letter-spacing:.06em}
.lcd small{font-family:'Chakra Petch',var(--label)!important}
/* beat names: bold grotesk, like titles on a tracklist */
.hd .nm b,.row .nm b{font-family:'Space Grotesk',var(--label)!important;font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.hd .nm small,.row .nm small{font-family:'Chakra Petch',var(--label)!important}
/* player: the now-playing title is the loudest thing on the bar */
.player .t b{font-family:'Syne',var(--label)!important;font-weight:800;font-size:17px;letter-spacing:-.01em}
.player .t small{font-family:'Chakra Petch',var(--label)!important}
.scrub span{font-family:'Share Tech Mono',var(--mono)!important;font-size:13px}
.player .lease,#browseBtn{font-family:'Chakra Petch',var(--label)!important;font-weight:600;letter-spacing:.18em}

/* =================== live-site pieces: account, auth, contact states, cookie, documents =================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.login{display:flex;align-items:center;gap:7px;border:1px solid var(--daw-line);background:none;color:var(--hi);border-radius:8px;padding:7px 11px;font:600 11px 'Chakra Petch',var(--label);letter-spacing:.16em;text-transform:uppercase;max-width:170px}
.login span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login:hover{border-color:var(--amber)}
.login svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.acct{position:fixed;top:58px;right:16px;z-index:25;background:#141e25;border:1px solid var(--daw-line);border-radius:12px;padding:14px 16px;min-width:230px;box-shadow:0 20px 50px -20px #000}
.acct p{margin:0 0 10px;font:400 12px var(--label);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.12em}
.acct p b{display:block;margin-top:4px;font:500 14px var(--mono);color:var(--amber);text-transform:none;letter-spacing:0;word-break:break-all}
.acct button{width:100%}
/* auth dialog: a rack-style panel */
.auth{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(5,7,9,.72);backdrop-filter:blur(8px);overflow:auto}
.auth-box{position:relative;width:min(440px,100%);background:linear-gradient(180deg,#22313b,#1d2a33 30%,#19252d);border:1px solid rgba(255,179,71,.35);border-radius:10px;padding:26px 24px 20px;box-shadow:0 30px 80px -30px #000,0 0 40px -12px rgba(255,170,70,.35)}
.auth-mark{font:400 12px var(--brand);letter-spacing:.22em;color:var(--amber);text-transform:uppercase;margin-bottom:14px}
.auth h2{margin:0 0 6px;font:400 20px var(--brand);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.auth-sub{margin:0 0 14px;color:#a9b4bd;font-size:14px}
.auth-x{position:absolute;top:12px;right:12px}
.auth-field{display:grid;gap:7px;margin:14px 0}
.auth-field label,.auth-label-row label{font:600 10px 'Chakra Petch',var(--label);letter-spacing:.18em;text-transform:uppercase;color:#7f93a3}
.auth-label-row{display:flex;justify-content:space-between;align-items:center}
.auth input{width:100%;background:#0b1013;border:1px solid #05080a;border-radius:6px;padding:12px 13px;color:var(--amber);font:400 15px var(--mono);text-shadow:0 0 5px rgba(255,179,71,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.auth input::placeholder{color:#55687a;text-shadow:none;font-family:var(--label)}
.auth input:focus{outline:none;border-color:var(--amber)}
.auth .dob{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.auth select{width:100%;background:#0b1013;border:1px solid #05080a;border-radius:6px;padding:12px 13px;color:var(--amber);font:400 15px var(--mono);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7f93a3 50%),linear-gradient(135deg,#7f93a3 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.auth select:focus{outline:none;border-color:var(--amber)}
.auth select option{color:#e6e6e6;background:#0b1013}
.pass-wrap{position:relative}.pass-wrap input{padding-right:64px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:#9fb0bd;font:600 11px 'Chakra Petch',var(--label);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px}
.auth-hint{margin:0;font-size:12px;color:#7f93a3}
.auth-primary{width:100%;margin-top:10px;border:0;border-radius:999px;padding:13px;background:var(--amber);color:#1a120a;font:600 12px 'Chakra Petch',var(--label);letter-spacing:.18em;text-transform:uppercase;transition:background .3s}
.auth-primary:hover{background:var(--heat)}
.auth-primary:disabled{opacity:.45;cursor:not-allowed}
.auth-link,.auth-inline{background:none;border:0;color:#cfd8de;font:500 13px var(--label);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.auth-inline.small{font-size:12px}
.auth-link{display:block;margin:10px auto 0}
.auth-msg{min-height:1.2em;margin:12px 0 0;font-size:13px;color:#ff9c84}
.auth-msg.ok{color:var(--amber)}
.auth-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#6f8090;font:600 10px 'Chakra Petch',var(--label);letter-spacing:.2em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--daw-line)}
.auth-providers{display:grid;gap:8px}
.prov{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--daw-line);background:#141e25;border-radius:999px;padding:11px;color:#e8edf0;font:500 14px var(--label)}
.prov:hover{border-color:var(--amber)}
.prov svg{width:18px;height:18px}
.auth-switch{text-align:center;margin:14px 0 0;color:#a9b4bd;font-size:14px}
.auth-terms{margin:12px 0 0;text-align:center;font-size:11.5px;color:#6f8090}
.auth-terms a{color:#a9b4bd}
.auth-captcha{margin:12px 0 4px;min-height:65px}
/* contact states */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{min-height:1.2em;margin:12px 0 0;color:#ff9c84;font-size:13px}
#contactCaptcha{margin-top:14px}
.sent{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:26px}
.sent h3{margin:0 0 8px;font:400 18px var(--brand);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sent p{margin:0 0 16px;color:#a9b4bd}
.sent b{font-family:var(--mono);color:var(--amber)}
.gate2{margin-top:10px}
.gate2 p{margin:8px 0 0;font-size:13px;color:#a9b4bd}
#dPhone{font:500 16px var(--mono);color:var(--amber);text-shadow:0 0 5px rgba(255,179,71,.6);text-decoration:none}
/* cookie notice: a slim unit pinned to the bottom */
.cookie{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:26;width:min(760px,calc(100vw - 24px));background:linear-gradient(180deg,#22313b,#1d2a33);border:1px solid rgba(255,179,71,.3);border-radius:10px;padding:16px 18px;box-shadow:0 20px 50px -20px #000}
.cookie p{margin:0 32px 10px 0;font-size:13.5px;color:#cfd8de}
.cookie a{color:var(--amber)}
.cookie-x{position:absolute;top:8px;right:8px}
.cookie-set{display:grid;gap:8px;margin:6px 0 12px;font-size:13px;color:#cfd8de}
.cookie-set input{accent-color:#ffb347;margin-right:8px}
.cookie-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cookie-actions .grow{flex:1}
.cookie-settings{background:none;border:0;color:#a9b4bd;text-decoration:underline;font:500 13px var(--label);padding:6px 0}
.cookie-btn{border:1px solid var(--daw-line);background:none;color:#fff;border-radius:999px;padding:9px 16px;font:600 11px 'Chakra Petch',var(--label);letter-spacing:.16em;text-transform:uppercase}
.cookie-btn.p{background:var(--amber);border-color:var(--amber);color:#1a120a}
.icon-btn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:#dfe6ea;display:grid;place-items:center}
.icon-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
/* documents (privacy, credits) */
#doc{position:fixed;inset:0;z-index:28;display:flex;justify-content:center;align-items:flex-start;padding:5vh 16px;background:rgba(5,7,9,.75);backdrop-filter:blur(8px);overflow:auto}
#doc .paper{position:relative;width:min(760px,100%);background:#141e25;border:1px solid var(--daw-line);border-radius:12px;padding:34px 30px 30px;color:#cfd8de;line-height:1.65}
#doc h1{font:400 clamp(22px,4vw,34px)/1.2 var(--brand);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 18px}
#doc h2{font:600 12px 'Chakra Petch',var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:26px 0 8px}
#doc p{margin:0 0 12px}
#doc a{color:var(--amber)}
#doc .close{position:absolute;top:14px;right:14px}
/* rack: buy link when Stripe is switched on */
.buy{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.buy .cap{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 32%,#ffd08a,#ffb347 55%,#c9811f);color:#1a120a;font:700 10px 'Chakra Petch',var(--label);letter-spacing:.1em;box-shadow:0 0 18px rgba(255,179,71,.5)}
.buy .kl{font:600 9.5px 'Chakra Petch',var(--label);letter-spacing:.2em;color:var(--amber)}
.gate-watch{background:none;border:0;color:var(--faint);font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;opacity:0;animation:fadein .8s 2.2s forwards}
@media (max-width:760px){.login span{display:none}.login{padding:7px 9px}}
#app.insite .cookie{bottom:calc(92px + env(safe-area-inset-bottom,0px))}

.pill.ghost{background:none;border-color:rgba(243,236,226,.22);text-decoration:none;color:var(--dim)}
.pill.ghost:hover{color:var(--cream);background:rgba(243,236,226,.06)}

/* ---------- the session toolbar: the LCD never moves ---------- */
.tb .file{overflow:hidden;text-overflow:ellipsis}
.rec{justify-self:end;min-width:0;overflow:hidden}.rec span{overflow:hidden;text-overflow:ellipsis}
.lcd div:nth-child(1){width:74px}.lcd div:nth-child(2){width:104px}.lcd div:nth-child(3){width:96px}
.lcd div{min-width:0!important;flex:none}
.lcd .vu{width:100px;overflow:hidden}
@media (max-width:760px){.lcd div:nth-child(1){width:58px}.lcd div:nth-child(2){width:84px}.lcd div:nth-child(3){width:78px}}

/* ---------- window controls ---------- */
.wb{width:13px;height:13px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:#3e4f5b;color:rgba(20,12,6,.75);transition:background .15s,transform .15s}
.wb svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:0;transition:opacity .12s}
.wb.wc{background:var(--tape)}
.dots:hover .wb.wm,.dots:focus-within .wb.wm{background:var(--amber)}
.dots:hover .wb.wx,.dots:focus-within .wb.wx{background:#7cc47a}
.dots:hover .wb svg,.dots:focus-within .wb svg{opacity:1}
.wb:active{transform:scale(.9)}
.wb:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.wb .i-m{display:none}
#app.windowed .wb .i-r{display:none}#app.windowed .wb .i-m{display:block}

/* ---------- the desktop (behind the store window) ---------- */
#desk{position:absolute;inset:0;z-index:9;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;font-family:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
#app.insite.windowed:not(.leaving) #desk,#app.insite.min:not(.leaving) #desk{opacity:1;visibility:visible;transition:opacity .35s}
.wall{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 120%,#1b2f55 0%,#0d1a33 45%,#060b18 100%)}
.wall i{position:absolute;left:50%;top:52%;border-radius:50%;filter:blur(2px);mix-blend-mode:screen}
.wall .r1{width:78vmin;height:78vmin;margin:-39vmin 0 0 -39vmin;background:conic-gradient(from 200deg,transparent 0 12%,rgba(255,179,71,.85) 22%,rgba(255,106,61,.75) 32%,transparent 46%,rgba(120,170,255,.55) 64%,rgba(70,110,230,.7) 76%,transparent 90%);-webkit-mask:radial-gradient(circle,transparent 38%,#000 39%,#000 58%,transparent 72%);mask:radial-gradient(circle,transparent 38%,#000 39%,#000 58%,transparent 72%);transform:rotate(-14deg) scaleY(.82)}
.wall .r2{width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;background:conic-gradient(from 20deg,transparent 0 10%,rgba(255,206,140,.7) 20%,transparent 34%,rgba(150,195,255,.6) 58%,transparent 72%,rgba(255,140,90,.55) 86%,transparent);-webkit-mask:radial-gradient(circle,transparent 46%,#000 50%,#000 60%,transparent 70%);mask:radial-gradient(circle,transparent 46%,#000 50%,#000 60%,transparent 70%);transform:rotate(28deg) scaleX(.9);filter:blur(1px)}
.wall .r3{width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;background:radial-gradient(circle,rgba(255,170,90,.22),transparent 40%);filter:blur(30px)}
.dicons{position:absolute;left:10px;top:10px;display:grid;grid-auto-flow:row;gap:4px}
.di{width:84px;padding:6px 4px 7px;border:1px solid transparent;border-radius:4px;background:none;color:#fff;font:400 12px/1.25 inherit;font-family:inherit;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default;word-break:break-word}
.di:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.di.sel,.di:focus-visible{background:rgba(120,170,255,.28);border-color:rgba(160,200,255,.45);outline:0}
.ic{display:block;width:44px;height:38px;position:relative;flex:none}
.ic-app{position:relative;display:grid;place-items:center;line-height:1;letter-spacing:0;text-transform:none;width:42px;height:42px;border-radius:10px;background:linear-gradient(145deg,#2a3a46,#141d24);color:var(--amber);font:400 21px var(--brand);box-shadow:inset 0 0 0 1px rgba(255,179,71,.35),0 4px 10px rgba(0,0,0,.4);text-shadow:0 0 10px rgba(255,179,71,.5)}
.ic-app::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--amber);transform:translate(12px,11px)}
.ic-app.ics{width:24px;height:24px;border-radius:6px;font-size:12px}.ic-app.ics::after{width:3px;height:3px;transform:translate(7px,6px)}
.ic-folder::before{content:"";position:absolute;left:3px;top:4px;width:16px;height:7px;border-radius:2px 2px 0 0;background:#e0a93b}
.ic-folder::after{content:"";position:absolute;left:3px;top:8px;right:3px;bottom:2px;border-radius:2px 3px 3px 3px;background:linear-gradient(#ffd36e,#f2b53f);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.ic-alt::after{background:linear-gradient(#ffb06b,#ff7c45)}.ic-alt::before{background:#d96a35}
.ic.ics{width:44px;height:38px;transform:scale(.58);margin:-8px -10px}
.ic-video::before{content:"";position:absolute;left:8px;top:2px;width:28px;height:34px;border-radius:3px;background:linear-gradient(#f4f6f8,#cfd6dd);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.ic-video::after{content:"";position:absolute;left:19px;top:13px;border-left:10px solid var(--tape);border-top:6px solid transparent;border-bottom:6px solid transparent}
.ic-doc::before{content:"";position:absolute;left:8px;top:2px;width:28px;height:34px;border-radius:3px;background:linear-gradient(#f4f6f8,#cfd6dd)}
.ic-doc::after{content:"";position:absolute;left:13px;top:11px;width:18px;height:2px;background:#7b8a97;box-shadow:0 5px 0 #7b8a97,0 10px 0 #7b8a97,0 15px 0 #7b8a97}
.ic-mail::before{content:"";position:absolute;left:4px;top:7px;width:36px;height:25px;border-radius:3px;background:linear-gradient(#7fb2ff,#4f86e6)}
.ic-mail::after{content:"";position:absolute;left:10px;top:4px;width:24px;height:24px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:scaleY(.55) rotate(45deg)}
.ic-bin::before{content:"";position:absolute;left:10px;top:6px;width:24px;height:30px;border-radius:2px 2px 6px 6px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.12) 50%,rgba(255,255,255,.3));border:1px solid rgba(255,255,255,.5)}
.ic-bin::after{content:"";position:absolute;left:8px;top:3px;width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.55)}

/* taskbar */
.task{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(24,28,36,.82);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-top:1px solid rgba(255,255,255,.08);z-index:3}
.tc{display:flex;align-items:center;gap:4px}
.tb2{position:relative;width:40px;height:40px;border:0;border-radius:5px;background:none;display:grid;place-items:center;cursor:default;color:#fff}
.tb2:hover,.tb2[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.tb2:active{background:rgba(255,255,255,.05)}
.tapp::after{content:"";position:absolute;bottom:2px;left:50%;width:6px;height:3px;margin-left:-3px;border-radius:3px;background:#9aa4ad;transition:width .2s,margin .2s,background .2s}
#app:not(.min) .tapp{background:rgba(255,255,255,.07)}
#app:not(.min) .tapp::after{width:16px;margin-left:-8px;background:var(--amber)}
.tapp .eq{position:absolute;right:3px;top:4px;display:none;gap:1px;align-items:flex-end;height:8px}
.tapp .eq b{width:2px;background:var(--amber);border-radius:1px;animation:eq .8s ease-in-out infinite alternate}
.tapp .eq b:nth-child(2){animation-delay:-.3s}.tapp .eq b:nth-child(3){animation-delay:-.55s}
#app.playing .tapp .eq{display:flex}
@keyframes eq{from{height:2px}to{height:8px}}
.tsearch{height:32px;width:200px;margin:0 6px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.07);color:#c9ced4;font:400 13px inherit;font-family:inherit;display:flex;align-items:center;gap:8px;padding:0 12px;cursor:text}
.tsearch:hover{background:rgba(255,255,255,.1)}
.tsearch svg,.ssearch svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.tray{position:absolute;right:10px;top:0;bottom:0;display:flex;align-items:center;gap:10px;color:#e8ebee}
.tray svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tray svg .f{fill:currentColor;stroke:none}.tray circle{fill:currentColor;stroke:none}
.clock{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;line-height:1.35;padding:0 4px;margin-left:2px}
.clock b{font-weight:400}.clock small{font-size:12px}
@media (max-width:900px){.tsearch{width:40px;padding:0;justify-content:center;font-size:0}}

/* start menu */
.startm{position:absolute;left:50%;bottom:58px;width:min(560px,calc(100vw - 24px));margin-left:calc(min(560px,calc(100vw - 24px)) / -2);z-index:4;background:rgba(32,37,46,.9);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:22px 26px 0;animation:sm .22s cubic-bezier(.2,.8,.2,1)}
.startm[hidden]{display:none}
@keyframes sm{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ssearch{display:flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:17px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-bottom:2px solid var(--amber);color:#c9ced4}
.ssearch input{flex:1;background:none;border:0;outline:0;color:#fff;font:400 13px inherit;font-family:inherit}
.startm .sh{margin:20px 6px 10px;font-size:13px;font-weight:600}
.pins{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.pins button{border:0;background:none;color:#fff;font:400 12px inherit;font-family:inherit;border-radius:5px;padding:10px 2px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:default}
.pins button:hover,.pins button:focus-visible{background:rgba(255,255,255,.08);outline:0}
.pins .ic-app{width:36px;height:36px;font-size:17px}.pins .ic{transform:scale(.85)}
.sfoot{margin:22px -26px 0;padding:12px 26px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:space-between;border-radius:0 0 8px 8px;font-size:12px}
.me{display:flex;align-items:center;gap:10px}.me i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#3a4652;font-style:normal;font-weight:600}
.spw{width:34px;height:34px;border:0;border-radius:5px;background:none;color:#fff;display:grid;place-items:center}
.spw:hover{background:rgba(255,255,255,.08)}.spw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media (max-width:620px){.pins{grid-template-columns:repeat(3,1fr)}}

/* ---------- the store as a window ---------- */
#app.wanim #site{transition:left .26s cubic-bezier(.2,.8,.2,1),top .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1),border-radius .26s,opacity .6s ease}
#app.windowed #site{left:var(--wx);top:var(--wy);width:var(--ww);height:var(--wh);border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 32px 80px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4);scrollbar-width:thin}
#app.windowed .win{cursor:default;border-radius:9px 9px 0 0}
#app.windowed.dragging,#app.windowed.dragging *{user-select:none;-webkit-user-select:none}
#app.windowed.dragging #site{scroll-behavior:auto}
#app.windowed .s1{min-height:calc(var(--wh) - 58px)}
#app.windowed .player{left:calc(var(--wx) + var(--ww) / 2);bottom:calc(var(--wb) + 12px);width:min(980px,calc(var(--ww) - 24px))}
#app.windowed .player.mini{left:auto;right:calc(var(--wr) + 12px);width:auto}
#app.windowed #toast{bottom:calc(var(--wb) + 96px)}
#app.windowed.w-md .studio span,#app.windowed.w-md #loginLabel{display:none}
#app.windowed.w-md .player:not(.mini){grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.3fr) auto}
#app.windowed.w-md .player .lease{display:none}
#app.windowed.w-sm .win nav{display:none}
#app.windowed.w-sm .win .brand{margin-right:auto}
#app.windowed.w-sm .tb .file span,#app.windowed.w-sm .rec span,#app.windowed.w-sm .lcd .vu{display:none}
#app.windowed.w-sm .player:not(.mini){grid-template-columns:auto minmax(0,1fr) auto auto}
#app.windowed.w-sm .player .scrub{display:none}
#wres{position:absolute;z-index:11;left:var(--wx);top:var(--wy);width:var(--ww);height:var(--wh);pointer-events:none;display:none}
#app.insite.windowed:not(.min):not(.leaving) #wres{display:block}
#wres i{position:absolute;pointer-events:auto}
#wres [data-e=n]{top:-4px;left:8px;right:8px;height:8px;cursor:ns-resize}
#wres [data-e=s]{bottom:-4px;left:8px;right:8px;height:8px;cursor:ns-resize}
#wres [data-e=e]{right:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize}
#wres [data-e=w]{left:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize}
#wres [data-e=ne]{top:-5px;right:-5px;width:14px;height:14px;cursor:nesw-resize}
#wres [data-e=sw]{bottom:-5px;left:-5px;width:14px;height:14px;cursor:nesw-resize}
#wres [data-e=nw]{top:-5px;left:-5px;width:14px;height:14px;cursor:nwse-resize}
#wres [data-e=se]{bottom:-5px;right:-5px;width:14px;height:14px;cursor:nwse-resize}

/* minimized: the window drops into the taskbar, the beat keeps going */
#app.insite.min #site{opacity:0;visibility:hidden;transform:translateY(38vh) scale(.12);transition:transform .32s cubic-bezier(.5,0,.75,0),opacity .26s .06s,visibility 0s .32s;pointer-events:none}
#app.insite.min.unmin #site{transition:none}
#site{transform-origin:50% 100%}
#app.restoring #site{animation:unmin .34s cubic-bezier(.2,.8,.2,1)}
@keyframes unmin{from{transform:translateY(38vh) scale(.12);opacity:0}to{transform:none;opacity:1}}
#app.min .player,#app.min #browse{opacity:0!important;visibility:hidden!important;pointer-events:none}
@media (prefers-reduced-motion:reduce){#app.insite.min #site{transform:none}#app.restoring #site{animation:none}#app.wanim #site{transition:none}}
@media (max-width:520px){.rtop .pill.ghost span{display:none}.rtop{gap:8px;padding-inline:12px}.rtop .pill{padding:8px 12px;font-size:12px}.rtop .brand{font-size:12px!important;letter-spacing:.06em}}

/* the artist in the booth keeps recording while you're in the room (silent loop over the still) */
.frame video.booth{inset:auto;object-fit:fill;opacity:0;visibility:hidden;transition:opacity .5s;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(#000 78%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(#000 78%,transparent);mask-composite:intersect}
#app.inroom:not(.insite) .frame video.booth{opacity:1;visibility:visible}

/* the intro's dive: short, accelerating, motion-blurred, ends in an amber flash */
#app.fastdive .frame{transition-timing-function:cubic-bezier(.75,0,.95,.45);animation:warp var(--dive,.55s) cubic-bezier(.75,0,.95,.45) forwards}
@keyframes warp{0%{filter:none}60%{filter:blur(1px) brightness(1.1)}100%{filter:blur(7px) brightness(1.9) saturate(1.3)}}
#app.fastdive.diving .flash{animation:flashq .6s ease-out forwards;background:radial-gradient(70% 70% at 50% 50%,rgba(255,205,140,.85),rgba(255,150,60,.25) 60%,rgba(29,42,51,0))}
@keyframes flashq{0%{opacity:0}75%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#app.fastdive .frame{animation:none}}

/* the intro clip ends inside the screen: the store fades up out of the amber bloom */
#app.pushed #site{transition:opacity .45s ease}

/* lights: normal while it's quiet; when a beat plays the room glows a little brighter and pulses with that beat's bass */
#walk,.frame .photo{transition:filter .15s linear}
#app.playing #walk,#app.playing .frame .photo{filter:brightness(calc(1.03 + var(--bass,0) * .14 + var(--lvl,0) * .04)) saturate(calc(1.02 + var(--bass,0) * .1))}

/* diving into the screen from the studio: matches the intro's dive (hard ease-in, blur, peach flash) */
#app.suck .frame{transition-timing-function:cubic-bezier(.8,0,.95,.55);animation:suckblur var(--dive,1.25s) cubic-bezier(.8,0,.95,.55) forwards}
@keyframes suckblur{0%{filter:none}55%{filter:blur(.6px)}100%{filter:blur(7px) brightness(1.15)}}
#app.suck.diving .flash{position:fixed;opacity:1;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#fff 0,rgba(255,255,255,.92) calc(var(--r,0) * .3),rgba(255,255,255,.35) calc(var(--r,0) * .65),rgba(255,255,255,0) var(--r,0));animation:suckflash var(--dive,1.25s) cubic-bezier(.85,0,1,.6) forwards}
@keyframes suckflash{0%,60%{--r:0px}100%{--r:260vmax}}
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
@media (prefers-reduced-motion:reduce){#app.suck .frame{animation:none}#app.suck.diving .flash{animation:none}}

#whiteout{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:2147483000}

#walk{display:none}#app.walking #walk{display:block}
html.returning #gate,html.returning #skip{display:none}html.returning .mon{opacity:1;transition:none}