:root {
  --ink: #121722;
  --muted: #6e7582;
  --line: #d9dde5;
  --paper: #f2f4f7;
  --white: #fbfcfe;
  --lavender: #7474ad;
  --teal: #54cbb7;
  --dark: #080d15;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 10%, rgb(174 225 233 / 28%), transparent 31rem),
    radial-gradient(circle at 9% 58%, rgb(126 118 177 / 8%), transparent 29rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(1220px, calc(100% - 44px)); margin: 0 auto; }

.masthead { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { color: var(--ink); text-decoration: none; font-family: Georgia, serif; font-size: 23px; letter-spacing: .18em; }
.masthead-meta { display: flex; gap: 34px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.status i { width: 6px; height: 6px; margin-right: 7px; display: inline-block; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

.intro { padding: 74px 0 58px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.eyebrow { margin: 0; color: var(--lavender); font-size: 10px; font-weight: 820; letter-spacing: .17em; text-transform: uppercase; }
.intro h1 { margin: 17px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(55px, 7vw, 90px); font-weight: 400; line-height: .94; letter-spacing: -.055em; }
.intro h1 em { color: #8080aa; font-weight: 400; }
.lede { margin: 0 0 7px; max-width: 475px; color: #606978; font-size: 16px; line-height: 1.7; }

.lab { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); background: rgb(251 252 254 / 88%); box-shadow: 0 28px 80px rgb(31 40 57 / 8%); }
.collection-bar { grid-column: 1 / -1; min-height: 116px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 34px; border-bottom: 1px solid var(--line); background: rgb(250 251 253 / 94%); }
.collection-bar > div:first-child { min-width: 220px; }
.collection-bar > div:first-child > p:last-child { max-width: 390px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.collection-switcher { width: min(560px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cfd4dd; }
.collection-button { min-height: 67px; padding: 13px 18px; display: flex; align-items: center; gap: 12px; border: 0; border-right: 1px solid #cfd4dd; background: transparent; cursor: pointer; text-align: left; transition: background .18s, color .18s; }
.collection-button:last-child { border-right: 0; }
.collection-button span { color: #9ba1ac; font-size: 9px; font-weight: 800; }
.collection-button b { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.collection-button:hover { background: #f0f2f6; }
.collection-button.is-active { background: var(--ink); color: #fff; }
.collection-button.is-active span { color: #9be4d7; }

.audio-panel { min-height: 106px; padding: 20px 28px; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(420px, .9fr); grid-template-rows: auto auto; align-items: center; gap: 7px 34px; border-bottom: 1px solid var(--line); background: var(--white); }
.audio-copy { align-self: center; }
.audio-copy .source-note { max-width: 560px; }
.audio-panel .source-actions { grid-column: 2; grid-row: 1 / 3; margin: 0; grid-template-columns: 1.25fr 1fr .55fr; }
.audio-panel .source-actions .source-stop { grid-column: auto; min-height: 42px; }
.audio-panel .emulator-status { grid-column: 1; margin: 0; min-height: 15px; }

.stage-column { min-width: 0; display: flex; flex-direction: column; }
.device-stage { min-height: 610px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #e7eaf0, #f9fafc 63%, #edf4f5); isolation: isolate; }
.device-stage::before { content: ""; position: absolute; width: 490px; height: 490px; border-radius: 50%; background: radial-gradient(circle, rgb(160 222 229 / 28%), rgb(133 123 190 / 8%) 48%, transparent 72%); filter: blur(15px); z-index: -2; }
.orbit { position: absolute; border: 1px solid rgb(110 117 148 / 19%); border-radius: 50%; }
.orbit-a { width: 490px; height: 490px; }
.orbit-b { width: 560px; height: 560px; border-style: dashed; opacity: .65; animation: orbit 80s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.chain { position: absolute; top: -120px; width: 2px; height: 350px; background: linear-gradient(#717987, #d4d8df 65%, transparent); transform-origin: bottom; z-index: -1; }
.chain-left { left: 43%; transform: rotate(-22deg); }
.chain-right { right: 43%; transform: rotate(22deg); }
.device { width: 390px; height: 390px; position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 37% 25%, #fff 0, #dce2ea 24%, #707b89 57%, #29313c 75%, #090e16 100%); box-shadow: inset 0 0 0 5px rgb(255 255 255 / 64%), inset 0 0 0 13px rgb(15 21 31 / 55%), 0 42px 76px rgb(25 34 50 / 28%); }
.device::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 30%); pointer-events: none; }
.device-rim { width: 360px; height: 360px; position: relative; overflow: hidden; border-radius: 50%; background: #02040d; box-shadow: inset 0 0 28px #000, 0 0 0 1px rgb(255 255 255 / 23%); }
#screen { width: 360px; height: 360px; display: block; border-radius: 50%; image-rendering: auto; }
.screen-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(135deg, rgb(255 255 255 / 5%), transparent 35% 80%, rgb(64 115 143 / 5%)); }
.idle-cue { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 50%; background: rgb(2 5 13 / 30%); color: rgb(230 238 246 / 76%); font-size: 9px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; transition: opacity .25s; }
.idle-cue i { width: 8px; height: 8px; border-radius: 50%; background: #71d6c5; box-shadow: 0 0 14px #71d6c5; }
.idle-cue.is-hidden { opacity: 0; }
.stage-label { position: absolute; bottom: 25px; color: #7b8390; font-size: 9px; font-weight: 790; letter-spacing: .16em; text-transform: uppercase; }

.design-tabs { min-height: 98px; display: grid; grid-template-columns: repeat(var(--design-count, 3), 1fr); border-top: 1px solid var(--line); }
.design-tab { min-width: 0; padding: 21px 20px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: background .18s; }
.design-tab:last-child { border-right: 0; }
.design-tab:hover { background: #f3f5f8; }
.design-tab span { display: block; margin-bottom: 9px; color: #9aa0ac; font-size: 9px; font-weight: 800; }
.design-tab b { display: block; overflow: hidden; font-family: Georgia, serif; font-size: 16px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.design-tab.is-active { box-shadow: inset 0 3px 0 var(--lavender); background: var(--white); }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.panel-head > span { color: var(--muted); font-size: 10px; text-align: right; }
.source-actions { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.source-actions button { min-height: 42px; padding: 0 12px; border: 1px solid #cfd4dd; background: transparent; color: #67707d; font-size: 10px; font-weight: 760; cursor: pointer; }
.source-actions .source-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.source-actions .source-stop { grid-column: 1 / -1; min-height: 34px; }
.source-actions button.is-active { border-color: var(--lavender); box-shadow: inset 0 -2px 0 var(--lavender); color: var(--ink); }
.source-actions .source-primary.is-active { border-color: var(--ink); box-shadow: inset 0 -2px 0 #92e4d5; color: #fff; }
.source-actions button:disabled { opacity: .38; cursor: default; }
.source-note { margin: 11px 0 0; color: #858d99; font-size: 9px; line-height: 1.55; }
.emulator-status { min-height: 35px; margin: 16px 0 0; color: #7d8592; font-size: 9px; line-height: 1.55; }
.emulator-status.is-error { color: #a74555; }

.collections { padding: 100px 0 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.collections article { border-top: 1px solid var(--line); padding-top: 24px; }
.collections span { color: var(--lavender); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.collections h2 { margin: 36px 0 13px; font-family: Georgia, serif; font-size: 29px; font-weight: 400; letter-spacing: -.025em; }
.collections p { margin: 0; color: #68717f; font-size: 13px; line-height: 1.7; }
button:focus-visible, input:focus-visible { outline: 3px solid rgb(116 116 173 / 42%); outline-offset: 3px; }

@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; gap: 28px; }
  .collection-bar { align-items: flex-start; }
  .audio-panel { grid-template-columns: 1fr; gap: 16px; }
  .audio-panel .source-actions { grid-column: 1; grid-row: auto; }
  .audio-panel .emulator-status { grid-column: 1; }
  .collections { gap: 25px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 1220px); }
  .masthead { height: 72px; }
  .masthead-meta > span:first-child { display: none; }
  .intro { padding: 54px 0 42px; }
  .intro h1 { font-size: 50px; }
  .collection-bar { padding: 22px; flex-direction: column; gap: 18px; }
  .collection-switcher { width: 100%; }
  .collection-button { min-height: 60px; padding: 11px; justify-content: center; }
  .collection-button span { display: none; }
  .audio-panel { padding: 22px; }
  .audio-panel .source-actions { grid-template-columns: 1fr 1fr; }
  .audio-panel .source-actions .source-stop { grid-column: 1 / -1; min-height: 34px; }
  .device-stage { min-height: 460px; }
  .device { width: 298px; height: 298px; }
  .device-rim { width: 274px; height: 274px; }
  #screen { width: 274px; height: 274px; }
  .orbit-a { width: 355px; height: 355px; }
  .orbit-b { width: 415px; height: 415px; }
  .chain-left { left: 41%; }.chain-right { right: 41%; }
  .design-tabs { grid-template-columns: 1fr 1fr; }
  .design-tab { min-height: 74px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
  .design-tab:nth-child(even) { border-right: 0; }
  .collections { padding: 74px 0 84px; grid-template-columns: 1fr; }
  .collections h2 { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit-b { animation: none; }
}