:root{
  --bg:#0c0c0c; --ink:#f2efe9; --mute:#7a7770; --orange:#ff5a1f; --paper:#ecebe6;
  --grey:#d9d7d1; --char:#2a2a29; --black:#0a0a0a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em}
button{font:inherit;cursor:pointer;border:0;color:inherit}

/* Background cloud + grain (bg.js) */
.bg-cloud{position:fixed;inset:0;z-index:0;pointer-events:none;background:#000}
.bg-cloud canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:lighten}
.bg-blur{position:fixed;inset:0;z-index:0;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-grain{position:fixed;top:0;left:0;width:100%;height:100%}
.hero,.stage,.foot{position:relative;z-index:1}

/* Hero */
.hero{padding:48px 24px 24px;max-width:1080px;margin:0 auto}
.hero__meta{display:flex;gap:24px;font:12px "JetBrains Mono",monospace;color:var(--mute);text-transform:uppercase}
.hero__title{font-weight:900;font-size:clamp(64px,17vw,210px);line-height:.84;letter-spacing:-.05em;margin:24px 0 16px}
.hero__title::first-line{color:var(--orange)}
.hero__sub{color:var(--mute);font-size:18px}

/* Stage: current device left, playlist right */
.stage{max-width:1280px;margin:0 auto;padding:48px 24px 96px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center;min-height:80vh}
.stage__device{display:grid;place-items:center}
.stage__device > .device{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(40px) rotate(-2deg) scale(.96);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s .7s}
.stage__device > .device.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s .15s,transform .7s .15s cubic-bezier(.2,.8,.2,1)}
.device{position:relative;width:100%}

.list__head{display:flex;justify-content:space-between;color:var(--mute);text-transform:uppercase;margin-bottom:16px}
.list__items{list-style:none;display:grid;gap:6px}
.list__item{display:grid;grid-template-columns:28px 1fr;align-items:baseline;cursor:pointer;color:#3d3b38;transition:color .3s}
.list__item small{font:11px "JetBrains Mono",monospace;color:var(--mute)}
.list__item b{font-size:clamp(28px,3.6vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.list__item em{grid-column:2;font-style:normal;font:11px "JetBrains Mono",monospace;color:var(--mute);text-transform:uppercase;height:0;overflow:hidden;transition:height .3s}
.list__item:hover{color:#8a8780}
.list__item.is-next{color:var(--ink)}
.list__item.is-now{color:var(--orange)}
.list__item.is-now em,.list__item.is-next em{height:16px;margin:4px 0 10px}
.foot{text-align:center;color:var(--mute);font:12px "JetBrains Mono",monospace;padding:32px}
/* shared progress bar */
[data-seek]{cursor:pointer}
[data-seek] > i{display:block;height:100%;width:0;background:var(--orange)}

@media (max-width:960px){
  .stage{grid-template-columns:1fr;gap:48px;min-height:0}
}