:root {
    --bg: #050507;
    --fg: #f5f5f7;
    --muted: #8e8e96;
    --line: rgba(255,255,255,.08);
    --chrome: linear-gradient(180deg, #ffffff 0%, #c7c9d1 28%, #6e717c 50%, #e9eaee 68%, #8a8d97 100%);
    --hue-a: #7b5cff;
    --hue-b: #ff4ecd;
    --hue-c: #2fd6ff;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--bg); }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: "Inter Tight", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--hue-a); color: #fff; }
  a { color: inherit; }

  /* Fixed 3D stage (shader background + chrome objects) */
  #stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .grain {
    position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  main { position: relative; z-index: 1; }
  main > section { position: relative; z-index: 1; }

  /* Nav */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px clamp(16px, 4vw, 48px);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    background: rgba(5,5,7,.45);
    border-bottom: 1px solid var(--line);
  }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .22em; font-size: 14px; text-decoration: none; }
  .logo svg { width: 22px; height: 22px; animation: spin 14s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  nav ul { display: flex; gap: 32px; list-style: none; font-size: 13px; color: var(--muted); }
  nav ul a { text-decoration: none; transition: color .3s; }
  nav ul a:hover { color: var(--fg); }
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
    background: var(--fg); color: #000; text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  }
  .pill:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,255,255,.35); }
  .ghost {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); transition: background .3s, border-color .3s;
  }
  .ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.5); }
  @media (max-width: 760px) { nav ul { display: none; } }

  /* Type utilities */
  .chrome {
    background: var(--chrome);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .shine {
    background: linear-gradient(110deg, #8a8d97 0%, #fff 20%, #8a8d97 40%, #e9eaee 60%, #6e717c 80%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 6s linear infinite;
  }
  @keyframes shine { to { background-position: -250% 0; } }
  .grad {
    background: linear-gradient(90deg, var(--hue-c), var(--hue-a), var(--hue-b), var(--hue-c));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 8s linear infinite;
  }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .split .ch { display: inline-block; will-change: transform; }
  .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }

  /* Hero */
  .hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 16px 90px; }
  .boot-line { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #9fe8c4; }
  .boot-line .caret { display: inline-block; width: .6em; height: 1.1em; background: currentColor; vertical-align: -2px; margin-left: 4px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .hero h1 { font-size: clamp(54px, 14.5vw, 250px); line-height: .88; font-weight: 900; letter-spacing: -.06em; margin-top: 22px; }
  .hero h1 .ch { cursor: default; }
  .hero p { margin: 26px auto 0; max-width: 560px; font-size: clamp(16px, 1.6vw, 21px); color: var(--muted); line-height: 1.5; }
  .hero p b { color: var(--fg); font-weight: 600; }
  .cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .cta-row .pill { font-size: 15px; padding: 14px 26px; }
  .scroll-hint {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--fg), transparent); animation: drop 2s ease-in-out infinite; transform-origin: top; }
  @keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

  /* Statement */
  .statement { min-height: 100vh; display: grid; place-items: center; padding: 0 clamp(16px, 8vw, 140px); }
  .statement p { font-size: clamp(30px, 5vw, 76px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; max-width: 1200px; }
  .statement .rw { opacity: .12; }

  /* Marquee */
  .marquee { padding: 9vh 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .mq-row { display: flex; white-space: nowrap; will-change: transform; }
  .mq-row span { font-size: clamp(60px, 11vw, 180px); font-weight: 900; letter-spacing: -.05em; line-height: 1.02; padding-right: .35em; }
  .mq-row .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }

  /* Product sections */
  .product {
    min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center;
    padding: 14vh clamp(16px, 6vw, 96px);
  }
  .product.flip { grid-template-columns: .85fr 1.15fr; }
  .product.flip .demo { order: 2; }
  .demo { perspective: 1400px; }
  .demo-inner { transform-style: preserve-3d; will-change: transform; }
  .copy .tag { display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #cfd2da; }
  .copy .tag i { width: 6px; height: 6px; border-radius: 50%; background: #6dffb0; box-shadow: 0 0 10px #6dffb0; }
  .copy .tag.soon i { background: #ffb347; box-shadow: 0 0 10px #ffb347; }
  .copy h2 { font-size: clamp(52px, 7vw, 120px); font-weight: 900; letter-spacing: -.055em; line-height: .9; margin: 18px 0 16px; }
  .copy .lede { font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
  .copy p.body { color: var(--muted); line-height: 1.6; margin-top: 14px; font-size: 16px; max-width: 520px; }
  .copy ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
  .copy li { font-size: 13px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #d4d6dd; }
  .buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
  .price small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
  .buy .pill { font-size: 15px; padding: 13px 24px; }
  @media (max-width: 900px) {
    .product, .product.flip { grid-template-columns: 1fr; padding: 12vh 16px; }
    .product.flip .demo { order: 0; }
  }

  /* CRT */
  .crt {
    position: relative; aspect-ratio: 4 / 3; border-radius: 36px; padding: clamp(14px, 2.2vw, 26px);
    background: linear-gradient(145deg, #2c2d33, #0c0c0f 60%, #1a1b20);
    box-shadow: inset 0 2px 1px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.6), 0 50px 100px rgba(0,0,0,.6);
  }
  .crt.wood { background: linear-gradient(145deg, #6b4423, #3a2412 55%, #57361b); }
  .screen { position: relative; height: 100%; border-radius: 26px / 36px; overflow: hidden; background: #000; box-shadow: inset 0 0 40px rgba(0,0,0,.9); animation: flick 3s infinite steps(1); }
  @keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: .96; } 48% { opacity: 1; } 82% { opacity: .98; } }
  .screen .img {
    position: absolute; inset: -2%; filter: var(--f, none); transition: filter .5s;
    background:
      linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.42%,#c00000 0 85.71%,#0000c0 0) top / 100% 66% no-repeat,
      linear-gradient(90deg,#0000c0 0 14.28%,#131313 0 28.57%,#c000c0 0 42.85%,#131313 0 57.14%,#00c0c0 0 71.42%,#131313 0 85.71%,#c0c0c0 0) 0 66% / 100% 9% no-repeat,
      linear-gradient(90deg,#00214c 0 18%,#fff 0 36%,#32006a 0 54%,#131313 0 72%,#090909 0 78%,#131313 0 84%,#1d1d1d 0) bottom / 100% 25% no-repeat;
    animation: breathe 5s ease-in-out infinite;
  }
  @keyframes breathe { 50% { transform: scale(1.012); } }
  .screen .label {
    position: absolute; inset: 0; display: grid; place-items: center; filter: var(--f, none);
    font-weight: 900; font-size: clamp(40px, 7vw, 110px); letter-spacing: -.05em; color: #fff;
    text-shadow: -2px 0 rgba(255,0,60,.6), 2px 0 rgba(0,220,255,.6), 0 0 30px rgba(255,255,255,.55);
  }
  .screen.vhs .label, .screen.vhs .img { animation: vhs 2.4s infinite steps(1); }
  @keyframes vhs { 0%,100% { transform: none; } 30% { transform: translateX(3px) skewX(-2deg); } 31% { transform: none; } 70% { transform: translateX(-4px); } 71% { transform: none; } }
  .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0 2px, transparent 2px 4px); }
  .scan::after { content: ""; position: absolute; left: 0; right: 0; height: 26%; background: linear-gradient(transparent, rgba(255,255,255,.09), transparent); animation: roll 5s linear infinite; }
  @keyframes roll { from { transform: translateY(-100%); } to { transform: translateY(420%); } }
  .noise {
    position: absolute; inset: -50%; opacity: var(--noise, .06); pointer-events: none; mix-blend-mode: screen; transition: opacity .5s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: static .25s steps(4) infinite;
  }
  @keyframes static { 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, -2%); } }
  .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(125deg, rgba(255,255,255,.16), transparent 32%); }
  .osd { position: absolute; left: 6%; bottom: 7%; font-family: var(--mono); font-size: clamp(9px, 1vw, 13px); color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.8); letter-spacing: .08em; z-index: 2; }
  .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; justify-content: center; }
  .presets button {
    font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: #b9bcc6; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; transition: all .25s;
  }
  .presets button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
  .presets button.on { background: #fff; color: #000; border-color: #fff; }

  /* Flash Flicker */
  .ff {
    position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; isolation: isolate;
    background: radial-gradient(circle at 25% 20%, #3b1763, transparent 45%), radial-gradient(circle at 80% 75%, #64163f, transparent 50%), #07060a;
    box-shadow: 0 50px 100px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .ff .beam { position: absolute; width: 140%; height: 140%; left: -20%; top: -20%; background: conic-gradient(from 0deg at 50% 0%, transparent 0 40%, rgba(255,255,255,.08) 45%, transparent 50% 100%); animation: sweep 7s ease-in-out infinite alternate; }
  .ff .beam.b2 { animation-duration: 9s; animation-direction: alternate-reverse; background: conic-gradient(from 0deg at 50% 0%, transparent 0 55%, rgba(255,78,205,.12) 58%, transparent 62% 100%); }
  @keyframes sweep { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
  .ff .word {
    --ca: 2px; position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 900; font-size: clamp(54px, 9vw, 150px); letter-spacing: -.05em; line-height: .85; text-align: center; color: #fff;
    text-shadow: calc(var(--ca) * -1) 0 rgba(255,0,60,.85), var(--ca) 0 rgba(0,220,255,.85);
  }
  .ff .flash { position: absolute; inset: 0; background: var(--flash, #fff); opacity: 0; mix-blend-mode: screen; z-index: 3; }
  .ff .edge { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.85); }
  .ff .osd { color: #fff; }
  .ff-ctrl { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
  .seg { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
  .seg button { font-family: var(--mono); font-size: 11px; color: #b9bcc6; background: none; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
  .seg button.on { background: #fff; color: #000; }
  .swatches { display: flex; gap: 8px; }
  .swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--c); box-shadow: 0 0 12px var(--c); transition: transform .2s; }
  .swatches button.on { border-color: #fff; transform: scale(1.15); }

  /* Sample Dock (Ableton sidebar) */
  .dock {
    position: relative; display: grid; grid-template-columns: 42% 1fr; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden;
    background: #1b1b1b; box-shadow: 0 50px 100px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); font-family: var(--mono);
  }
  .dock-side { background: #242424; border-right: 1px solid #111; display: flex; flex-direction: column; min-width: 0; }
  .dock-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #eee; border-bottom: 1px solid #151515; }
  .dock-h svg { width: 12px; height: 12px; }
  .dock-search { margin: 10px 12px; padding: 7px 10px; border-radius: 4px; background: #161616; color: #777; font-size: 10px; }
  .dock-tabs { display: flex; gap: 4px; padding: 0 12px 8px; font-size: 9px; }
  .dock-tabs span { padding: 4px 7px; border-radius: 3px; color: #999; background: #2e2e2e; }
  .dock-tabs span.on { background: #ffb13b; color: #111; }
  .dock-list { list-style: none; flex: 1; overflow: hidden; }
  .dock-list li { display: grid; grid-template-columns: 8px 1fr 46px; gap: 8px; align-items: center; padding: 7px 12px; font-size: 10px; color: #cfcfcf; border-bottom: 1px solid #1e1e1e; position: relative; }
  .dock-list li i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
  .dock-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-list li svg { width: 46px; height: 14px; }
  .dock-list li.on { background: #3a3a3a; color: #fff; }
  .dock-list li.on::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #ffb13b; }
  .dock-main { padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; }
  .slot { border-radius: 3px; background: #2b2b2b; border: 1px solid #222; position: relative; display: flex; align-items: flex-end; padding: 5px; font-size: 8px; color: rgba(0,0,0,.75); overflow: hidden; }
  .slot::before { content: ""; position: absolute; left: 6px; top: 6px; border-left: 6px solid #555; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
  .slot.full { background: var(--c); border-color: transparent; }
  .slot.full::before { border-left-color: rgba(0,0,0,.6); }
  .slot.pop { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes pop { from { transform: scale(.6); } }
  .ghost-clip { position: absolute; left: 0; top: 0; z-index: 5; padding: 5px 8px; border-radius: 3px; font-size: 9px; color: #111; background: var(--c, #ffb13b); box-shadow: 0 10px 24px rgba(0,0,0,.5); pointer-events: none; opacity: 0; white-space: nowrap; }

  /* Preset wall (horizontal) */
  .hscroll { height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
  .hscroll header { padding: 0 clamp(16px, 6vw, 96px); margin-bottom: 36px; }
  .hscroll header h2 { font-size: clamp(40px, 6vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-top: 10px; }
  .track { display: flex; gap: 22px; padding: 0 clamp(16px, 6vw, 96px); width: max-content; will-change: transform; }
  .pcard { width: min(70vw, 360px); flex-shrink: 0; }
  .pcard .crt { border-radius: 26px; padding: 14px; }
  .pcard .screen { border-radius: 18px / 24px; }
  .pcard .label { font-size: clamp(28px, 3vw, 44px); }
  .pcard h4 { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
  .pcard .n { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .14em; }

  /* Stats + features */
  .stats { padding: 18vh clamp(16px, 6vw, 96px) 12vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; }
  .stat .val { font-size: clamp(64px, 9vw, 140px); font-weight: 900; letter-spacing: -.06em; line-height: .9; }
  .stat .lbl { margin-top: 12px; color: var(--muted); font-size: 16px; max-width: 260px; line-height: 1.45; }
  .features { padding: 0 clamp(16px, 6vw, 96px) 18vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; perspective: 1200px; }
  .feat {
    border-radius: 22px; padding: 30px; min-height: 250px; position: relative;
    background: rgba(255,255,255,.035); border: 1px solid var(--line); backdrop-filter: blur(6px);
    transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s;
    display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  }
  .feat:hover { border-color: rgba(255,255,255,.22); }
  .feat .glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 40%); }
  .feat:hover .glow { opacity: 1; }
  .feat .ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--chrome); transform: translateZ(40px); }
  .feat .ico svg { width: 24px; height: 24px; }
  .feat h5 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; transform: translateZ(30px); }
  .feat p { color: var(--muted); line-height: 1.55; transform: translateZ(20px); }

  /* Finale */
  .finale { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 14vh 16px; overflow: hidden; }
  .finale .star3 { width: clamp(70px, 9vw, 120px); height: clamp(70px, 9vw, 120px); margin: 0 auto 26px; display: block; filter: drop-shadow(0 0 30px rgba(255,255,255,.35)); animation: spin 18s linear infinite; }
  .finale .big { font-size: clamp(56px, 15vw, 280px); font-weight: 900; letter-spacing: -.065em; line-height: .82; }
  .finale p { color: var(--muted); font-size: clamp(16px, 1.6vw, 21px); margin: 22px 0 32px; }
  .socials { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
  .socials a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); font-size: 14px; transition: border-color .3s, background .3s; }
  .socials a:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
  .socials svg { width: 18px; height: 18px; }
  .socials span { color: var(--muted); font-family: var(--mono); font-size: 12px; }
  footer { border-top: 1px solid var(--line); padding: 26px clamp(16px, 4vw, 48px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; position: relative; z-index: 1; background: rgba(5,5,7,.6); }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--fg); }

  /* Floating editor artifacts */
  #artifacts { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .af-wrap { position: absolute; will-change: transform; }
  .af { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.75); }
  .panel { background: rgba(18,18,24,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
  .af-render .tiles { display: grid; grid-template-columns: repeat(5, 26px); grid-auto-rows: 26px; gap: 2px; background: #111; padding: 2px; }
  .af-render .tiles div { background: #1a1a1a; position: relative; }
  .af-render .tiles div.done { background: var(--tile); }
  .af-render .tiles div.cur { background: #202020; }
  .af-render .tiles div.cur::before { content: ""; position: absolute; inset: 0; border: 2px solid #ff9a1f; clip-path: polygon(0 0,35% 0,35% 2px,2px 2px,2px 35%,0 35%,0 65%,2px 65%,2px calc(100% - 2px),35% calc(100% - 2px),35% 100%,65% 100%,65% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 65%,100% 65%,100% 35%,calc(100% - 2px) 35%,calc(100% - 2px) 2px,65% 2px,65% 0,100% 0,100% 100%,0 100%); }
  .af-meta { margin-top: 6px; font-size: 9px; color: rgba(255,255,255,.55); white-space: nowrap; }
  .af-clip { width: 220px; border-radius: 4px; overflow: hidden; }
  .af-clip .h { padding: 3px 6px; font-size: 9px; color: rgba(255,255,255,.9); white-space: nowrap; }
  .af-clip.audio { background: #1d4a3c; border: 1px solid #3c8f73; }
  .af-clip.audio .h { background: #2a6a55; }
  .af-clip.audio svg { display: block; width: 100%; height: 38px; }
  .af-clip.video { background: #22324d; border: 1px solid #4a6aa8; }
  .af-clip.video .h { background: #31497a; }
  .af-clip.video .thumbs { display: flex; gap: 1px; height: 34px; }
  .af-clip.video .thumbs i { flex: 1; background: var(--t); }
  .af-tc { font-size: 22px; letter-spacing: .04em; color: #f0f0f0; }
  .af-tc small { display: block; font-size: 9px; color: rgba(255,255,255,.45); letter-spacing: .14em; margin-bottom: 2px; }
  .af-meter { display: flex; gap: 4px; height: 90px; align-items: flex-end; }
  .af-meter i { width: 8px; height: 100%; background: linear-gradient(0deg, #2fe07a 0 65%, #f4d03f 0 85%, #ff4b4b 0); border-radius: 1px; transform-origin: bottom; }
  .af-nodes svg { display: block; }
  .af-live { display: grid; grid-template-columns: repeat(3, 54px); gap: 3px; }
  .af-live i { height: 18px; border-radius: 2px; background: var(--c, #333); position: relative; }
  .af-live i.e { background: #2a2a2a; }
  .af-gizmo svg, .af-curve svg { display: block; }
  .af-progress { width: 200px; }
  .af-progress .bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin-top: 6px; }
  .af-progress .bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #ff9a1f, #ffd27a); }
  .af-key { display: flex; align-items: center; gap: 22px; padding: 10px 14px; position: relative; }
  .af-key::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(255,255,255,.2); }
  .af-key b { width: 10px; height: 10px; transform: rotate(45deg); background: #e8c547; position: relative; }
  .af-key b.s { background: #fff; box-shadow: 0 0 8px #fff; }

  .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 45; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--hue-c), var(--hue-a), var(--hue-b)); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    .statement .rw { opacity: 1; }
  }

  /* ---------- Multi-page additions ---------- */
  .logo small { font-family: var(--mono); font-weight: 400; letter-spacing: .12em; font-size: 10px; color: var(--muted); margin-left: 2px; }
  nav ul a.active { color: var(--fg); }
  nav ul a.active::after { content: ""; display: block; height: 1px; margin-top: 4px; background: linear-gradient(90deg, var(--hue-c), var(--hue-b)); }
  .byline { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .byline b { color: var(--fg); font-weight: 600; }

  /* Hero product strip on the homepage */
  .strip { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
  .strip a {
    display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; min-width: 220px;
    padding: 12px 18px 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,10,14,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1), background .3s;
  }
  .strip a:hover { border-color: rgba(255,255,255,.4); transform: translateY(-3px); background: rgba(20,20,28,.6); }
  .strip .thumb { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 13px; letter-spacing: -.03em; flex-shrink: 0; }
  .strip .t1 { background: linear-gradient(90deg,#c0c0c0 0 14%,#c0c000 0 28%,#00c0c0 0 42%,#00c000 0 57%,#c000c0 0 71%,#c00000 0 85%,#0000c0 0); color: #fff; text-shadow: 0 0 6px #000; }
  .strip .t2 { background: radial-gradient(circle at 30% 30%, #fff, #ff3fd2 40%, #3b1763 80%); color: #fff; }
  .strip .t3 { background: #242424; color: #ffb13b; border: 1px solid #3a3a3a; }
  .strip strong { display: block; font-size: 15px; letter-spacing: -.01em; }
  .strip span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .more { font-size: 15px; color: var(--fg); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: border-color .3s; }
  .more:hover { border-color: #fff; }

  /* Product page hero */
  .phero { min-height: 100svh; padding: 130px clamp(16px, 6vw, 96px) 70px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .phero h1 { font-size: clamp(64px, 15vw, 250px); font-weight: 900; letter-spacing: -.06em; line-height: .88; margin-top: 18px; }
  .phero .lede { font-size: clamp(20px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.025em; margin-top: 18px; max-width: 760px; line-height: 1.2; }
  .phero .sub { color: var(--muted); margin-top: 14px; max-width: 620px; line-height: 1.6; font-size: clamp(15px, 1.3vw, 18px); }
  .phero .buy { justify-content: center; margin-top: 28px; }
  .phero .demo { width: min(940px, 100%); margin-top: 60px; }
  .phero.short { min-height: 70vh; justify-content: center; }

  /* Section headings */
  .shead { padding: 14vh clamp(16px, 6vw, 96px) 5vh; }
  .shead h2 { font-size: clamp(42px, 6.5vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: .95; margin-top: 12px; }
  .shead p { color: var(--muted); max-width: 620px; margin-top: 16px; line-height: 1.6; font-size: 17px; }

  /* Preset grid */
  .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; padding: 0 clamp(16px, 6vw, 96px) 6vh; }
  .pgrid .pcard { width: auto; cursor: pointer; }
  .pgrid .pcard .crt { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .pgrid .pcard:hover .crt { transform: translateY(-6px) rotateX(6deg); }

  .mq-sm span { font-size: clamp(34px, 5vw, 76px); }

  /* Specs */
  .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding: 0 clamp(16px, 6vw, 96px) 10vh; }
  .spec { border-radius: 22px; padding: 30px; background: rgba(10,10,14,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .spec h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 14px; }
  .spec ul { list-style: none; }
  .spec li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); line-height: 1.45; font-size: 15px; }
  .spec li:first-child { border-top: 0; }
  .spec li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--chrome); }
  .spec p { color: #b8bac3; line-height: 1.6; font-size: 15px; }
  .spec p + p { margin-top: 12px; }

  /* Buy bar */
  .buybar { margin: 4vh clamp(16px, 6vw, 96px) 16vh; border-radius: 32px; padding: clamp(32px, 6vw, 80px); text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,14,.5); }
  .buybar::before { content: ""; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, var(--hue-a), var(--hue-b), var(--hue-c), var(--hue-a)); filter: blur(100px); opacity: .25; animation: spin 20s linear infinite; }
  .buybar h2 { font-size: clamp(48px, 8vw, 130px); font-weight: 900; letter-spacing: -.055em; line-height: .9; }
  .buybar .price { display: block; margin: 18px 0 26px; font-size: clamp(28px, 3vw, 40px); }
  .buybar .buy { justify-content: center; }
  .buybar .fine { margin-top: 22px; color: var(--muted); font-size: 14px; }
  .buybar .fine a { color: var(--fg); }

  /* CRT power-off & degauss */
  .screen.off .img, .screen.off .label { animation: poweroff 1.1s cubic-bezier(.6,0,.4,1) forwards; }
  @keyframes poweroff {
    0% { transform: scale(1, 1); }
    45% { transform: scale(1, .006); filter: var(--f) brightness(4); }
    80% { transform: scale(.004, .006); filter: brightness(6); }
    100% { transform: scale(0, 0); }
  }
  .screen.on-anim .img, .screen.on-anim .label { animation: poweron .7s cubic-bezier(.2,.8,.2,1); }
  @keyframes poweron { 0% { transform: scale(.004, .006); filter: brightness(6); } 40% { transform: scale(1, .01); } 100% { transform: none; } }
  .screen.degauss .img, .screen.degauss .label { animation: degauss 1.2s ease-out; }
  @keyframes degauss {
    0% { filter: var(--f) hue-rotate(0deg) saturate(3); transform: skewX(5deg) scale(1.06); }
    25% { filter: var(--f) hue-rotate(140deg) saturate(3); transform: skewX(-4deg) scale(1.03); }
    55% { filter: var(--f) hue-rotate(280deg) saturate(2); transform: skewX(2deg); }
    100% { filter: var(--f); transform: none; }
  }

  /* Flash Flicker luma overlay */
  .ff .luma { --l: -30%; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #000 var(--l), transparent calc(var(--l) + 35%)); }

  /* Contact */
  .cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 0 clamp(16px, 6vw, 96px) 8vh; }
  .ccard { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: 28px; border-radius: 22px; text-decoration: none; background: rgba(10,10,14,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
  .ccard:hover { border-color: rgba(255,255,255,.35); transform: translateY(-4px); }
  .ccard svg { width: 28px; height: 28px; }
  .ccard h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
  .ccard span { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .ccard.big { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; padding: clamp(28px, 4vw, 48px); }
  .ccard.big h3 { font-size: clamp(30px, 5vw, 72px); letter-spacing: -.045em; word-break: break-all; }
  .faq { padding: 0 clamp(16px, 6vw, 96px) 14vh; max-width: 1100px; }
  .faq details { border-top: 1px solid var(--line); padding: 22px 0; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.02em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-weight: 300; font-size: 1.3em; line-height: .8; transition: transform .3s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { color: #b8bac3; line-height: 1.65; margin-top: 12px; max-width: 760px; }
  .faq details a { color: var(--fg); }

  footer .links { display: flex; gap: 18px; flex-wrap: wrap; }

  /* Mobile menu */
  .nav-r { display: flex; align-items: center; gap: 10px; }
  .menu-btn { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .menu-btn i { width: 16px; height: 1.5px; background: var(--fg); transition: transform .3s; }
  nav.open .menu-btn i:first-child { transform: translateY(3.25px) rotate(45deg); }
  nav.open .menu-btn i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  @media (max-width: 760px) {
    .menu-btn { display: flex; }
    .logo small { display: none; }
    nav.open ul { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 8px 16px 20px; background: rgba(5,5,7,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
    nav.open ul a { display: block; padding: 14px 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); border-bottom: 1px solid var(--line); }
    nav.open ul a.active::after { display: none; }
  }

  /* Feature rows: each feature gets its own live demo */
  .frows { display: flex; flex-direction: column; gap: 14vh; padding: 8vh clamp(16px, 6vw, 96px) 12vh; }
  .frow { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
  .frow:nth-child(even) .fdemo { order: 2; }
  .frow .fdemo { perspective: 1200px; }
  .frow .num { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
  .frow h3 { font-size: clamp(36px, 4.4vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 12px 0 16px; }
  .frow p { color: #b8bac3; line-height: 1.65; font-size: 17px; max-width: 520px; }
  .frow ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .frow li { font-size: 13px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #d4d6dd; }
  .frow .act { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
  .chipbtn { font-family: var(--mono); font-size: 12px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: background .25s, border-color .25s; }
  .chipbtn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
  @media (max-width: 900px) {
    .frow { grid-template-columns: 1fr; gap: 28px; }
    .frow:nth-child(even) .fdemo { order: 0; }
  }

  /* SampleDock app mock (matches the real app's dark theme) */
  .sd {
    --acc: #4a5cff; position: relative; display: grid; grid-template-rows: 50px 1fr 26px; aspect-ratio: 16 / 11.5;
    border-radius: 14px; overflow: hidden; background: #111113; color: #ededf0; text-align: left;
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 60px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6);
    font-family: -apple-system, BlinkMacSystemFont, "Inter Tight", system-ui, sans-serif; font-size: 12px;
  }
  .sd svg { display: block; }
  .sd-top { display: flex; align-items: center; gap: 9px; padding: 0 12px; background: #0e0e10; border-bottom: 1px solid rgba(255,255,255,.06); }
  .sd-lights { display: flex; gap: 6px; margin-right: 6px; }
  .sd-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
  .sd-lights i:nth-child(2) { background: #febc2e; } .sd-lights i:nth-child(3) { background: #28c840; }
  .sd-btn { width: 30px; height: 30px; border-radius: 8px; background: var(--acc); display: grid; place-items: center; flex-shrink: 0; }
  .sd-btn svg { width: 16px; height: 16px; }
  .sd-search { flex: 1; min-width: 0; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); display: flex; align-items: center; gap: 8px; padding: 0 11px; color: rgba(255,255,255,.42); font-size: 13px; white-space: nowrap; overflow: hidden; }
  .sd-search .sd-q { color: #fff; font-family: var(--mono); font-size: 12px; }
  .sd-search .sd-q:empty::before { content: "search everything"; color: rgba(255,255,255,.42); font-family: -apple-system, BlinkMacSystemFont, "Inter Tight", sans-serif; font-size: 13px; }
  .sd-search .cur { width: 1px; height: 15px; background: #fff; animation: blink 1s steps(1) infinite; }
  .sd-knob { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(from 220deg, var(--acc) 0 200deg, rgba(255,255,255,.12) 200deg 280deg, transparent 280deg); display: grid; place-items: center; }
  .sd-knob::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #050506 linear-gradient(#fff, #fff) 50% 3px / 7px 2px no-repeat; transform: rotate(40deg); }
  .sd-body { display: grid; grid-template-columns: 56px 1fr; min-height: 0; }
  .sd-rail { background: #0b0b0d; border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; overflow: hidden; }
  .sd-rail b { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--a), var(--b)); }
  .sd-rail b svg { width: 18px; height: 18px; }
  .sd-rail b.on { outline: 2px solid var(--acc); outline-offset: 2px; box-shadow: 0 -4px 0 -1px #f07a1e; }
  .sd-rail hr { width: 34px; border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 2px 0; }
  .sd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .sd-chips { display: flex; gap: 6px; padding: 9px 12px; align-items: center; }
  .sd-chips span { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); font-weight: 600; font-size: 11.5px; white-space: nowrap; transition: background .3s, color .3s; }
  .sd-chips span.on { background: var(--acc); color: #fff; }
  .sd-chips span::after { content: " ▾"; font-size: 8px; opacity: .7; }
  .sd-chips .count { margin-left: auto; }
  .sd-chips .count::after { content: none; }
  .sd-head { display: flex; justify-content: space-between; padding: 6px 14px; color: rgba(255,255,255,.45); background: #161618; font-size: 11px; font-weight: 600; }
  .sd-rows { flex: 1; overflow: hidden; min-height: 0; }
  .sd-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 0 14px; height: 29px; font-weight: 600; font-size: 12px; white-space: nowrap; }
  .sd-row span { overflow: hidden; text-overflow: ellipsis; }
  .sd-row em { font-style: normal; color: rgba(255,255,255,.45); font-weight: 500; }
  .sd-row svg { width: 84px; height: 20px; }
  .sd-row.on { background: #2b37b8; border-radius: 6px; margin: 0 6px; padding: 0 8px; }
  .sd-row.on em { color: rgba(255,255,255,.8); }
  .sd-preview { border-top: 1px solid rgba(255,255,255,.06); background: #161618; padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; }
  .sd-pname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-pname small { display: block; font-weight: 500; font-size: 10.5px; color: rgba(255,255,255,.45); margin-top: 2px; }
  .sd-tabs { display: flex; gap: 3px; align-self: start; background: rgba(255,255,255,.06); border-radius: 8px; padding: 3px; }
  .sd-tabs span { padding: 4px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.55); }
  .sd-tabs span.on { background: var(--acc); color: #fff; }
  .sd-wave { grid-column: 1 / -1; height: 56px; border-radius: 8px; background: #050506; position: relative; overflow: hidden; }
  .sd-wave svg { width: 100%; height: 100%; }
  .sd-wave .ph { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: #f07a1e; box-shadow: 0 0 8px #f07a1e; }
  .sd-wave .played { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(74,92,255,.18); }
  .sd-status { display: flex; align-items: center; gap: 9px; padding: 0 12px; background: #0e0e10; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; font-weight: 600; white-space: nowrap; }
  .sd-status i { width: 7px; height: 7px; border-radius: 50%; background: #ff453a; }
  .sd-status i.g { background: #8e8e93; }
  .sd-status .bpm { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.08); }
  .sd-status .tot { margin-left: auto; color: rgba(255,255,255,.45); }
  .sd-ghost { position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; background: rgba(43,55,184,.95); color: #fff; font: 600 11px -apple-system, "Inter Tight", sans-serif; box-shadow: 0 16px 30px rgba(0,0,0,.5); pointer-events: none; opacity: 0; white-space: nowrap; }
  .sd-ghost svg { width: 40px; height: 14px; }
  /* Ableton arrangement lane that receives dragged samples */
  .sd-live { margin-top: 16px; display: grid; grid-template-columns: 96px 1fr; border-radius: 10px; overflow: hidden; background: #1e1e1e; border: 1px solid rgba(255,255,255,.1); font-family: var(--mono); font-size: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
  .sd-live .trk { background: #ff9a3c; color: #111; padding: 8px; font-weight: 600; display: flex; flex-direction: column; justify-content: space-between; height: 54px; }
  .sd-live .lane { position: relative; background: repeating-linear-gradient(90deg, #262626 0 24.8%, #2e2e2e 24.8% 25%); }
  .sd-live .lane .clip { position: absolute; top: 6px; bottom: 6px; border-radius: 3px; background: #4a5cff; color: #fff; padding: 2px 5px; overflow: hidden; white-space: nowrap; font-size: 9px; }
  .sd-live .lane .clip svg { position: absolute; left: 0; right: 0; bottom: 2px; width: 100%; height: 22px; opacity: .8; }
  .sd-live .lane .phd { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; opacity: .7; }
  @media (max-width: 700px) {
    .sd { aspect-ratio: auto; height: 520px; grid-template-rows: 46px 1fr 24px; }
    .sd-body { grid-template-columns: 46px 1fr; }
    .sd-rail b { width: 32px; height: 32px; }
    .sd-chips span:nth-child(n+3):not(.count) { display: none; }
    .sd-btn:nth-of-type(2), .sd-knob { display: none; }
  }

  /* Pitch Tape plug-in */
  .ptape { display: grid; place-items: center; }
  .ptape-win { width: min(440px, 100%); border-radius: 18px; padding: 18px; background: #0c0c0f; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 100px rgba(0,0,0,.6); }
  .ptape-win header { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .12em; margin-bottom: 10px; }
  .ptape canvas { width: 100%; aspect-ratio: 1; display: block; cursor: ns-resize; touch-action: none; }
  .ptape-win footer { display: flex; justify-content: space-around; margin-top: 10px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .12em; }
  .ptape-win footer b { display: block; color: #fff; font-size: 13px; margin-top: 3px; text-align: center; font-weight: 600; }

  /* Search syntax showcase */
  .tokens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .tokens code { font-family: var(--mono); font-size: 14px; padding: 9px 14px; border-radius: 10px; background: rgba(74,92,255,.14); border: 1px solid rgba(74,92,255,.4); color: #c9cfff; }

  /* Source cards */
  .srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 0 clamp(16px, 6vw, 96px) 6vh; }
  .src { border-radius: 20px; padding: 24px; background: rgba(10,10,14,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .src .tl { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--a), var(--b)); margin-bottom: 22px; }
  .src .tl svg { width: 22px; height: 22px; }
  .src h4 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
  .src p { color: var(--muted); line-height: 1.55; font-size: 14.5px; }

  /* Coming soon: MAINFRAME Hub */
  .hub { margin: 0 clamp(16px, 6vw, 96px); display: grid; grid-template-rows: 46px 1fr; border-radius: 16px; overflow: hidden; background: #0f0f12; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 60px 120px rgba(0,0,0,.6); min-height: 520px; }
  .hub-top { display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #0a0a0c; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 700; font-size: 13px; }
  .hub-top svg { width: 16px; height: 16px; }
  .hub-top .srch { margin-left: auto; width: min(320px, 40%); height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); font-weight: 500; font-size: 12px; display: flex; align-items: center; padding: 0 10px; }
  .hub-body { display: grid; grid-template-columns: 190px 1fr; min-height: 0; }
  .hub-side { background: #0b0b0e; border-right: 1px solid rgba(255,255,255,.06); padding: 14px 10px; font-size: 13px; }
  .hub-side h6 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); font-weight: 400; margin: 14px 8px 8px; }
  .hub-side h6:first-child { margin-top: 0; }
  .hub-side a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: #d6d7de; text-decoration: none; }
  .hub-side a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
  .hub-side a.on { background: rgba(255,255,255,.08); color: #fff; }
  .hub-main { padding: 18px; overflow: hidden; }
  .hub-main h5 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
  .hub-main > p { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
  .vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .asset { border-radius: 12px; overflow: hidden; background: #16161b; border: 1px solid rgba(255,255,255,.07); }
  .asset .pv { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
  .asset .meta { padding: 8px 10px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
  .asset .meta span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); font-weight: 400; align-self: center; }
  .asset .pro { position: absolute; top: 7px; right: 7px; font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.6); color: #ffd27a; border: 1px solid rgba(255,210,122,.4); }
  .pv.lut { background: linear-gradient(120deg, #2b3b55, #c08a5a 60%, #f3d2a2); }
  .pv.lut::after { content: ""; position: absolute; inset: 0; width: 50%; background: linear-gradient(120deg, #4a4a4a, #8a8a8a 60%, #c9c9c9); border-right: 1.5px solid #fff; animation: lutwipe 4s ease-in-out infinite alternate; }
  @keyframes lutwipe { from { width: 20%; } to { width: 80%; } }
  .pv.leak { background: #120a06; }
  .pv.leak::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 50%, rgba(255,140,40,.9), transparent 40%), radial-gradient(circle at 70% 40%, rgba(255,60,90,.7), transparent 35%); filter: blur(14px); animation: leak 5s ease-in-out infinite alternate; }
  @keyframes leak { from { transform: translateX(-20%) rotate(-8deg); } to { transform: translateX(20%) rotate(8deg); } }
  .pv.sfx { background: #0b1712; display: grid; place-items: center; }
  .pv.sfx svg { width: 86%; height: 60%; }
  .pv.wipe { background: linear-gradient(90deg, #3b1763, #64163f); }
  .pv.wipe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d4a7a, #2fd6ff); clip-path: polygon(0 0, var(--w) 0, calc(var(--w) - 20%) 100%, 0 100%); animation: wipe 3s cubic-bezier(.7,0,.3,1) infinite; }
  @property --w { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
  @keyframes wipe { 0% { --w: 0%; } 60%, 100% { --w: 130%; } }
  .pv.title { background: #050507; display: grid; place-items: center; font-weight: 900; letter-spacing: -.04em; font-size: 22px; }
  .pv.grain { background: #777 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: static .3s steps(3) infinite; }
  .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 6vh clamp(16px, 6vw, 96px) 4vh; }
  .tier { border-radius: 22px; padding: 28px; background: rgba(10,10,14,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 14px; }
  .tier.hl { border-color: rgba(255,255,255,.3); background: linear-gradient(160deg, rgba(123,92,255,.18), rgba(10,10,14,.6)); }
  .tier h4 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
  .tier .pr { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .tier ul { list-style: none; flex: 1; }
  .tier li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: #cfd1d8; }
  .soon-note { text-align: center; color: var(--muted); font-size: 13px; padding: 0 16px 14vh; }
  @media (max-width: 760px) { .hub-body { grid-template-columns: 1fr; } .hub-side { display: none; } }

  /* Instagram reels */
  .reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; gap: 22px; padding: 0 16px 10vh; }
  .reel .frame { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px rgba(0,0,0,.5); height: 478px; }
  .reel iframe { width: 100%; height: 100%; border: 0; display: block; }
  .reel figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; }
  .reel figcaption strong { font-size: 17px; letter-spacing: -.02em; }
  .reel figcaption a { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; }
  .reel figcaption a:hover { color: #fff; }

  /* More floating artifacts */
  .af-wheels { display: flex; gap: 10px; }
  .af-wheels div { text-align: center; font-size: 8px; color: rgba(255,255,255,.5); }
  .af-wheels i { display: block; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 4px; background: radial-gradient(circle, rgba(0,0,0,.0) 0 30%, rgba(0,0,0,.35) 70%), conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; }
  .af-wheels i::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; border: 1px solid #000; left: calc(50% - 3px + var(--x)); top: calc(50% - 3px + var(--y)); }
  .af-scope svg, .af-roll svg, .af-eq svg, .af-hist svg { display: block; }
  .af-rec { width: 190px; height: 112px; position: relative; border-radius: 6px; background: linear-gradient(135deg, rgba(40,60,90,.35), rgba(20,20,30,.35)); }
  .af-rec::before { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(255,255,255,.35); }
  .af-rec span { position: absolute; font-size: 9px; color: #fff; }
  .af-rec .r { top: 6px; left: 8px; display: flex; align-items: center; gap: 4px; }
  .af-rec .r::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: blink 1s steps(1) infinite; }
  .af-rec .f { top: 6px; right: 8px; }
  .af-rec .b { bottom: 6px; left: 8px; }
  .af-rec .c { left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border: 1px solid rgba(255,255,255,.6); border-radius: 2px; }
  .af-lr { width: 170px; }
  .af-lr div { display: grid; grid-template-columns: 58px 1fr 26px; gap: 6px; align-items: center; font-size: 9px; padding: 3px 0; color: rgba(255,255,255,.7); }
  .af-lr div i { height: 2px; background: linear-gradient(90deg, var(--l, #333), var(--r, #ddd)); position: relative; }
  .af-lr div i::after { content: ""; position: absolute; top: -4px; left: var(--p); width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #ddd; }
  .af-film { display: flex; gap: 0; background: #0b0b0b; padding: 9px 4px; position: relative; border-radius: 3px; }
  .af-film::before, .af-film::after { content: ""; position: absolute; left: 4px; right: 4px; height: 4px; background: repeating-linear-gradient(90deg, #ddd 0 5px, transparent 5px 11px); opacity: .6; }
  .af-film::before { top: 2px; } .af-film::after { bottom: 2px; }
  .af-film i { width: 46px; height: 32px; margin: 0 2px; background: var(--t); }

  /* SampleDock page demos */
  .appicon { width: clamp(84px, 9vw, 120px); height: auto; filter: drop-shadow(0 20px 40px rgba(74,92,255,.45)); margin-bottom: 4px; }
  .mini { border-radius: 16px; background: #111113; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 100px rgba(0,0,0,.6); padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Inter Tight", sans-serif; color: #ededf0; }
  .typer .bar { display: flex; align-items: center; gap: 10px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.07); padding: 0 14px; color: rgba(255,255,255,.45); }
  .typer .bar svg { width: 16px; height: 16px; flex-shrink: 0; }
  .typer .tq { font-family: var(--mono); color: #fff; font-size: 15px; }
  .typer .bar .cur { width: 1.5px; height: 18px; background: #fff; animation: blink 1s steps(1) infinite; }
  .typer .tc { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .typer .tr { margin-top: 10px; min-height: 160px; }
  .typer .sd-row { height: 32px; }
  .fxp .tabs { display: flex; gap: 4px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 4px; }
  .fxp .tabs span { flex: 1; text-align: center; padding: 7px 0; border-radius: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); transition: background .3s, color .3s; }
  .fxp .tabs span.on { background: #4a5cff; color: #fff; }
  .fxp .knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 18px; }
  .fxp .kn { text-align: center; font-size: 12px; color: rgba(255,255,255,.55); }
  .fxp .kn i { display: block; width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; background: conic-gradient(from 225deg, #4a5cff 0 var(--v), rgba(255,255,255,.12) var(--v) 270deg, transparent 270deg); position: relative; transition: --v .6s; }
  @property --v { syntax: "<angle>"; inherits: false; initial-value: 90deg; }
  .fxp .kn i::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #050506; }
  .fxp .kn i::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 12px; width: 2px; height: 16px; margin-left: -1px; background: #fff; border-radius: 1px; transform-origin: 50% 26px; transform: rotate(calc(var(--v) - 135deg)); transition: transform .6s; }
  .fxp .kn b { display: block; color: #fff; font-size: 14px; margin-top: 2px; }
  .fxp .modes { display: flex; gap: 6px; justify-content: center; }
  .fxp .modes span { font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
  .fxp .modes span.on { background: #fff; color: #000; border-color: #fff; }
  .fxp .apply { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.55); }
  .fxp .apply b { background: #4a5cff; color: #fff; padding: 7px 14px; border-radius: 8px; font-size: 12px; }
  .livelink { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 0; }
  .livelink .win { border-radius: 12px; padding: 14px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--mono); font-size: 11px; }
  .livelink .live { background: #1e1e1e; border: 1px solid #333; color: #ddd; }
  .livelink .live .tempo { font-size: 26px; color: #ffb13b; font-weight: 600; }
  .livelink .dock2 { background: #111113; border: 1px solid rgba(74,92,255,.5); color: #ddd; box-shadow: 0 0 40px rgba(74,92,255,.25); }
  .livelink .dock2 .tempo { font-size: 26px; color: #8b97ff; font-weight: 600; }
  .livelink .wire { height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); position: relative; }
  .livelink .wire i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; animation: wire 1.6s ease-in-out infinite; }
  .livelink .wire i:nth-child(2) { animation-direction: reverse; animation-delay: .8s; background: #8b97ff; box-shadow: 0 0 12px #8b97ff; }
  @keyframes wire { from { left: 0; } to { left: calc(100% - 10px); } }
  .livelink-caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
  .livelink-caps span { font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #cfd1d8; }
  .reel .frame.vid { height: auto; aspect-ratio: 9 / 16; background: #000; }
  .reel video { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Bobber mini-game */
  .game { display: grid; grid-template-columns: 1fr 340px; gap: 18px; padding: 0 clamp(16px, 4vw, 64px) 8vh; }
  .g-stage { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 100px rgba(0,0,0,.6); height: min(72vh, 640px); min-height: 420px; background: #07051a; user-select: none; -webkit-user-select: none; }
  .g-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
  .g-hud { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-family: var(--mono); font-size: 12px; }
  .g-hud .chip { display: inline-flex; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 999px; background: rgba(8,8,12,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .g-hud b { color: #fff; }
  .g-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.8); pointer-events: none; }
  .g-hint:empty { display: none; }
  .g-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, 86%); padding: 24px; border-radius: 22px; text-align: center; background: rgba(10,10,16,.86); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .g-card .rar { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
  .g-card svg { width: 140px; margin: 12px auto 4px; display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
  .g-card h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
  .g-card .wt { color: var(--muted); margin-top: 4px; }
  .g-card .gain { display: flex; justify-content: center; gap: 16px; margin: 16px 0; font-family: var(--mono); font-size: 14px; font-weight: 600; }
  .g-card .lvlup { margin: -4px 0 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .2em; background: linear-gradient(90deg, var(--hue-c), var(--hue-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .g-card .pill { font-size: 14px; padding: 11px 22px; }
  .g-side { display: flex; flex-direction: column; gap: 18px; }
  .g-panel { border-radius: 20px; padding: 20px; background: rgba(10,10,14,.6); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .g-panel h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 12px; display: flex; justify-content: space-between; }
  .g-panel label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .g-panel input { display: block; width: 100%; margin-top: 8px; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 600 15px "Inter Tight", sans-serif; outline: none; }
  .g-panel input:focus { border-color: rgba(255,255,255,.4); }
  .g-rank { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 14px; }
  .g-rank span { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
  .g-rank b { font-size: 44px; font-weight: 900; letter-spacing: -.05em; margin-left: auto; }
  .g-rank small { font-family: var(--mono); color: var(--muted); }
  .g-lvl { font-size: 14px; }
  .g-lvl .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 5px; }
  .g-lvl .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hue-c), var(--hue-a), var(--hue-b)); transition: width .6s; }
  .g-lvl small { font-family: var(--mono); color: var(--muted); font-size: 11px; }
  .g-stats { list-style: none; margin-top: 14px; }
  .g-stats li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: #cfd1d8; }
  .g-stats li span:first-child { color: var(--muted); }
  .g-btns { display: flex; gap: 8px; margin-top: 14px; }
  .g-btns button { flex: 1; }
  #gBoard { list-style: none; max-height: 330px; overflow: auto; }
  #gBoard li { display: grid; grid-template-columns: 26px 1fr auto 46px; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 8px; font-size: 13px; }
  #gBoard li:nth-child(odd) { background: rgba(255,255,255,.03); }
  #gBoard li.me { background: rgba(123,92,255,.2); }
  #gBoard .pos { font-family: var(--mono); color: var(--muted); }
  #gBoard .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #gBoard .tr { font-size: 11px; font-weight: 700; }
  #gBoard b { text-align: right; font-family: var(--mono); }
  #gBoard .empty { display: block; color: var(--muted); }
  .g-note { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .g-note:empty { display: none; }
  .dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0 clamp(16px, 6vw, 96px) 14vh; }
  .dex { border-radius: 16px; padding: 14px; text-align: center; background: rgba(10,10,14,.55); border: 1px solid var(--line); }
  .dex.got { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: inset 0 0 30px color-mix(in srgb, var(--c) 12%, transparent); }
  .dex svg { width: 90px; display: block; margin: 0 auto 8px; }
  .dex b { display: block; font-size: 14px; }
  .dex span { font-family: var(--mono); font-size: 10px; color: var(--muted); }
  .howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 0 clamp(16px, 6vw, 96px) 6vh; }
  .howto div { border-radius: 18px; padding: 22px; background: rgba(10,10,14,.55); border: 1px solid var(--line); }
  .howto b { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .2em; margin-bottom: 10px; }
  .howto h4 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
  .howto p { color: #b8bac3; font-size: 14.5px; line-height: 1.55; }
  @media (max-width: 960px) { .game { grid-template-columns: 1fr; } .g-stage { height: 70vh; } }

  /* Mainframe app mock (mirrors the real app: sidebar, grid, preview pane) */
  .hub3 { min-height: 600px; }
  .hub3 .hub-body { grid-template-columns: 210px 1fr 270px; }
  .hub-top .by { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--muted); letter-spacing: .1em; margin-left: -4px; }
  .hub3 .hub-top { letter-spacing: .2em; font-weight: 800; font-size: 12px; }
  .hub3 .hub-side { font-size: 12px; }
  .hub3 .hub-side a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hub3 .hub-side a { padding: 5px 8px; }
  .hub3 .hub-side a em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }
  .hub3 .hub-main { position: relative; }
  .asset.sel { outline: 2px solid var(--hue-a); outline-offset: -1px; box-shadow: 0 0 20px rgba(123,92,255,.4); }
  .asset .chk { position: absolute; right: 7px; bottom: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--hue-a); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 800; }
  .hub-selbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: rgba(20,20,28,.92); border: 1px solid rgba(123,92,255,.5); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 12px; color: #d4d6dd; }
  .hub-selbar .del { color: #ff6b6b; }
  .hub-pv { border-left: 1px solid rgba(255,255,255,.06); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,.015); }
  .hub-pvname { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
  .hub-pvname small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--muted); margin-top: 3px; }
  .hub-player { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(#2a2250, #c0607a 60%, #ffb27a); }
  .hub-player .pv { position: absolute; inset: 0; mix-blend-mode: screen; }
  .hub-player .tag { position: absolute; left: 8px; bottom: 8px; font-family: var(--mono); font-size: 9px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.6); }
  .hub-strip { position: relative; display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
  .hub-strip i { flex: 1; background: linear-gradient(90deg, #3a1d10, #ff8c3a, #3a1020); opacity: .8; }
  .hub-strip i:nth-child(even) { filter: hue-rotate(20deg); }
  .hub-strip b { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; animation: strip 4s linear infinite; }
  @keyframes strip { from { left: 0; } to { left: 100%; } }
  .hub-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .hub-chips span { font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.07); }
  .hub-chips span.on { background: var(--hue-a); color: #fff; }
  .hub-seg { display: flex; background: rgba(255,255,255,.06); border-radius: 8px; padding: 3px; margin-top: auto; }
  .hub-seg span { flex: 1; text-align: center; font-size: 11px; padding: 5px 0; border-radius: 6px; color: #b9bcc6; }
  .hub-seg span.on { background: var(--hue-a); color: #fff; }
  .hub-insert { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(90deg, var(--hue-a), rgba(123,92,255,.75)); box-shadow: 0 10px 30px rgba(123,92,255,.45); }
  .hub-insert em { font-style: normal; font-family: var(--mono); font-size: 10px; opacity: .7; }
  .hub-note { font-size: 10px; color: var(--muted); }
  @media (max-width: 1100px) { .hub3 .hub-body { grid-template-columns: 190px 1fr; } .hub-pv { display: none; } }
  @media (max-width: 760px) { .hub3 .hub-body { grid-template-columns: 1fr; } .hub-selbar { display: none; } }

  /* Bobber: accounts, creel, vault, why */
  .g-panel form input { margin-top: 8px; }
  .g-panel .g-btns .pill { flex: 1; justify-content: center; font-size: 13px; padding: 10px; }
  .g-panel .pill[disabled] { opacity: .45; pointer-events: none; }
  .linkbtn { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
  .g-coins { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; margin: 14px 0 4px; border-radius: 12px; background: rgba(255,210,122,.08); border: 1px solid rgba(255,210,122,.25); }
  .g-coins b { font-size: 22px; color: #ffd27a; }
  .g-today { margin-top: 14px; display: grid; gap: 6px; }
  .g-today small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
  .g-today div { display: grid; grid-template-columns: 44px 1fr 70px; gap: 8px; align-items: center; font-size: 11px; }
  .g-today .bar, .g-lvl .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
  .g-today .bar i, .g-lvl .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hue-c), var(--hue-a), var(--hue-b)); }
  .g-today em { font-style: normal; font-family: var(--mono); color: var(--muted); text-align: right; }
  .game2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 clamp(16px, 4vw, 64px) 6vh; }
  .creel-list { max-height: 280px; overflow: auto; margin-bottom: 12px; }
  .creel-list div { display: grid; grid-template-columns: 10px 1fr auto 60px; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .creel-list i { width: 8px; height: 8px; border-radius: 50%; }
  .creel-list em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .creel-list b { text-align: right; color: #ffd27a; font-size: 12px; }
  .vgroup { display: grid; gap: 8px; margin-bottom: 16px; }
  .vgroup > small, .vmine > small { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
  .vitem { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
  .vitem b { display: block; font-size: 14px; }
  .vitem small { color: var(--muted); font-size: 11.5px; }
  .vitem .vcost { font-family: var(--mono); font-size: 12px; color: #ffd27a; }
  .vitem .pill { font-size: 12px; padding: 8px 14px; }
  .vitem .soon { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); white-space: nowrap; }
  .vitem.pack { opacity: .7; }
  .vitem.pack.open { opacity: 1; border-color: rgba(109,255,176,.4); }
  .vmine { display: grid; gap: 6px; }
  .vmine div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--line); }
  .vmine code { font-family: var(--mono); color: #6dffb0; }
  .vmine em { font-style: normal; color: var(--muted); font-size: 12px; }
  .why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 0 clamp(16px, 6vw, 96px) 4vh; }
  .why div { border-radius: 18px; padding: 22px; background: rgba(10,10,14,.55); border: 1px solid var(--line); }
  .why b { display: block; font-family: var(--mono); font-size: 12px; color: #ffd27a; letter-spacing: .2em; margin-bottom: 10px; }
  .why h4 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
  .why p { color: #b8bac3; font-size: 14.5px; line-height: 1.55; }
  .fair { margin: 0 clamp(16px, 6vw, 96px) 12vh; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(123,92,255,.35); background: linear-gradient(120deg, rgba(123,92,255,.12), rgba(10,10,14,.5)); }
  .fair h4 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
  .fair p { color: #c8cad2; line-height: 1.6; font-size: 14.5px; max-width: 900px; }
  @media (max-width: 900px) { .game2 { grid-template-columns: 1fr; } }

  /* Nav dropdowns */
  nav ul { align-items: center; }
  .dd { position: relative; }
  .ddbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 0; }
  .ddbtn svg { width: 9px; height: 6px; transition: transform .25s; }
  .ddbtn:hover, .dd.active .ddbtn { color: var(--fg); }
  .ddmenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); display: flex; gap: 6px; padding: 10px; min-width: 260px;
    border-radius: 16px; background: rgba(12,12,18,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px rgba(0,0,0,.55);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
  .ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .dd:hover .ddmenu, .dd:focus-within .ddmenu, .dd.open .ddmenu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .dd:hover .ddbtn svg, .dd.open .ddbtn svg { transform: rotate(180deg); }
  .ddcol { display: flex; flex-direction: column; gap: 2px; min-width: 210px; }
  .ddcol h6 { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em; color: var(--muted); padding: 6px 10px; }
  .ddcol a, .ddsoon { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; color: var(--fg) !important; text-decoration: none; }
  .ddcol a:hover { background: rgba(255,255,255,.07); }
  .ddcol a::after { display: none !important; }
  .ddcol b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  .ddcol span span, .ddcol a > span, .ddsoon > span { font-size: 12px; color: var(--muted); }
  .ddsoon { opacity: .6; }
  .ddapp { flex-direction: row !important; align-items: center; gap: 12px !important; }
  .ddapp img { border-radius: 9px; }
  .ddapp > span { display: flex; flex-direction: column; color: var(--fg) !important; }
  @media (max-width: 760px) {
    nav.open .dd .ddbtn { display: flex; width: 100%; padding: 14px 0; font-size: 22px; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--line); justify-content: space-between; }
    nav.open .ddmenu { position: static; transform: none; opacity: 1; pointer-events: auto; display: none; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 4px 0 8px; min-width: 0; }
    nav.open .dd.open .ddmenu { display: flex; }
    nav.open .ddcol a, nav.open .ddsoon { font-size: 16px; padding: 10px 6px; border-bottom: 0; }
  }

  /* Mainframe chip under the hero, glow sections, screenshots */
  .appchip { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 10px 18px 10px 10px; border-radius: 18px; text-decoration: none; text-align: left;
    background: rgba(123,92,255,.12); border: 1px solid rgba(123,92,255,.5); box-shadow: 0 0 40px rgba(123,92,255,.35), inset 0 0 20px rgba(123,92,255,.15);
    animation: chipglow 3.5s ease-in-out infinite; transition: transform .3s; }
  .appchip:hover { transform: translateY(-2px); }
  .appchip img { border-radius: 12px; filter: drop-shadow(0 0 12px rgba(123,92,255,.8)); }
  .appchip > span { display: flex; flex-direction: column; }
  .appchip b { font-size: 16px; }
  .appchip span span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .appchip em { font-style: normal; margin-left: 6px; opacity: .7; }
  @keyframes chipglow { 50% { box-shadow: 0 0 70px rgba(123,92,255,.55), inset 0 0 26px rgba(255,78,205,.18); border-color: rgba(255,78,205,.55); } }
  .glowsec { position: relative; }
  .glowsec::before { content: ""; position: absolute; inset: 4% 6%; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(123,92,255,.35), rgba(255,78,205,.18) 50%, transparent); filter: blur(60px); animation: glowpulse 6s ease-in-out infinite; }
  @keyframes glowpulse { 50% { opacity: .55; transform: scale(1.05); } }
  .glowsec .hub { box-shadow: 0 0 0 1px rgba(123,92,255,.45), 0 0 80px rgba(123,92,255,.35), 0 60px 120px rgba(0,0,0,.6); }
  .appicon.big { width: clamp(110px, 12vw, 160px); filter: drop-shadow(0 0 40px rgba(123,92,255,.7)); animation: float 5s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-10px); } }
  .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; padding: 0 clamp(16px, 6vw, 96px) 14vh; }
  .shot img { width: 100%; display: block; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px rgba(0,0,0,.5); }
  .shot figcaption { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
  @media (max-width: 600px) { .shots { grid-template-columns: 1fr; } }

  /* Library (web preview) */
  .lib { margin: 0 clamp(16px, 4vw, 64px) 8vh; display: grid; grid-template-rows: 50px 1fr; border-radius: 16px; overflow: hidden; background: #0f0f12; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 0 0 1px rgba(123,92,255,.3), 0 0 80px rgba(123,92,255,.25), 0 60px 120px rgba(0,0,0,.6); }
  .lib-top { display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #0a0a0c; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 800; font-size: 12px; letter-spacing: .2em; }
  .lib-top svg { width: 16px; height: 16px; }
  .lib-top .by { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--muted); letter-spacing: .1em; }
  .lib-top input { margin-left: auto; width: min(320px, 40%); height: 30px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,.07); color: #fff; padding: 0 10px; font: 500 12.5px "Inter Tight", sans-serif; letter-spacing: 0; outline: none; }
  .lib-top input:focus { border-color: rgba(123,92,255,.6); }
  .lib-badge { font-family: var(--mono); font-size: 9px; padding: 3px 7px; border-radius: 6px; background: rgba(255,179,71,.18); color: #ffb347; letter-spacing: .1em; }
  .lib-body { display: grid; grid-template-columns: 210px 1fr 290px; min-height: 620px; }
  .lib-side { background: #0b0b0e; border-right: 1px solid rgba(255,255,255,.06); padding: 12px 10px; font-size: 12.5px; overflow: auto; max-height: 720px; }
  .lib-side h6 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); font-weight: 400; margin: 14px 8px 6px; }
  .lib-side h6:first-child { margin-top: 0; }
  .lib-side a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #d6d7de; text-decoration: none; }
  .lib-side a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
  .lib-side a em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }
  .lib-side a:hover { background: rgba(255,255,255,.05); }
  .lib-side a.on { background: rgba(123,92,255,.25); color: #fff; }
  .lib-main { padding: 18px; overflow: auto; max-height: 720px; }
  .lib-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .lib-head h5 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
  .lib-head span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .lib .asset { padding: 0; border: 1px solid rgba(255,255,255,.07); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: transform .25s, border-color .25s; }
  .lib .asset:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); }
  .pv.glitch { background: linear-gradient(90deg,#c0c0c0 0 14%,#c0c000 0 28%,#00c0c0 0 42%,#00c000 0 57%,#c000c0 0 71%,#c00000 0 85%,#0000c0 0); animation: glitchy 1.2s steps(2) infinite; }
  @keyframes glitchy { 30% { transform: translateX(4px) skewX(-4deg); filter: hue-rotate(60deg); } 31% { transform: none; } 70% { clip-path: inset(30% 0 40% 0); } 72% { clip-path: none; } }
  .pv.flashpv { background: #000; }
  .pv.flashpv::after { content: ""; position: absolute; inset: 0; background: #fff; animation: flashpv 2s ease-out infinite; }
  @keyframes flashpv { 0% { opacity: .85; } 30%, 100% { opacity: 0; } }
  .lib-pv { border-left: 1px solid rgba(255,255,255,.06); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,.015); }
  .lib-pv .hub-player .pv { position: absolute; inset: 0; }
  .lut-split { background: none; }
  .lut-split .before, .lut-split .after { position: absolute; inset: 0; background: linear-gradient(#2a2250, #c0607a 60%, #ffb27a); }
  .lut-split .after { clip-path: inset(0 0 0 50%); background: linear-gradient(#1b3b55, #c08a5a 60%, #f3d2a2); }
  .lut-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; }
  .lib-wave { position: relative; height: 90px; border-radius: 10px; background: #050806; overflow: hidden; }
  .lib-wave svg { width: 100%; height: 100%; }
  .lib-wave b { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff8c3a; box-shadow: 0 0 8px #ff8c3a; animation: strip 3s linear infinite; }
  .lib-spec { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
  .lib-spec i { flex: 1; border-radius: 2px; background: linear-gradient(var(--hue-a), #62d991); animation: spec .9s ease-in-out infinite alternate; }
  @keyframes spec { from { height: 10%; } to { height: 100%; } }
  .lib-meta div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
  .lib-meta span { color: var(--muted); }
  .lib-pv .hub-insert { border: 0; font: 700 13px "Inter Tight", sans-serif; opacity: .55; cursor: not-allowed; margin-top: auto; }
  @media (max-width: 1100px) { .lib-body { grid-template-columns: 190px 1fr; } .lib-pv { display: none; } }
  @media (max-width: 760px) { .lib-body { grid-template-columns: 1fr; } .lib-side { display: flex; gap: 6px; overflow-x: auto; max-height: none; padding: 10px; } .lib-side h6 { display: none; } .lib-side a { flex-shrink: 0; padding-left: 8px !important; } .lib-top input { width: 50%; } }

  /* Contribute */
  .contrib { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; padding: 0 clamp(16px, 6vw, 96px) 14vh; }
  .contrib form { display: grid; gap: 14px; }
  .contrib label { display: grid; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .contrib input, .contrib select, .contrib textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 500 15px "Inter Tight", sans-serif; outline: none; resize: vertical; }
  .contrib input:focus, .contrib select:focus, .contrib textarea:focus { border-color: rgba(123,92,255,.7); }
  .contrib select option { background: #15151b; }
  .contrib .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .contrib label.check { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-family: "Inter Tight", sans-serif; font-size: 13.5px; color: #cfd1d8; }
  .contrib label.check input { width: auto; margin-top: 3px; }
  .contrib form .pill { justify-self: start; font-size: 15px; padding: 13px 26px; }
  .spot { border-radius: 20px; padding: 24px; background: linear-gradient(160deg, rgba(255,210,122,.1), rgba(10,10,14,.55)); border: 1px solid rgba(255,210,122,.3); }
  .spot h4 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
  .spot > p { color: var(--muted); font-size: 14px; margin: 6px 0 18px; }
  .spot-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,210,122,.45); }
  .spot-card .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd27a, #ff4ecd); color: #111; font-weight: 900; }
  .spot-card b { display: block; }
  .spot-card span { font-size: 12.5px; color: var(--muted); }
  .spot-rules { margin-top: 18px; padding-left: 18px; color: #c8cad2; font-size: 13.5px; line-height: 1.8; }
  @media (max-width: 900px) { .contrib { grid-template-columns: 1fr; } .contrib .row2 { grid-template-columns: 1fr; } }

  .lib-spec i { display: block; min-height: 4px; height: 50%; }

  /* Fisherman */
  .fisherwrap { margin: 0 clamp(16px, 4vw, 64px) 8vh; }
  .fisher { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
  .fprev canvas { width: 220px; height: 260px; display: block; margin: 0 auto; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
  .fboosts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
  .fboosts small { width: 100%; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
  .fboosts span { font-size: 11.5px; padding: 4px 8px; border-radius: 7px; background: rgba(109,255,176,.1); color: #6dffb0; border: 1px solid rgba(109,255,176,.3); }
  .fboosts span.none { color: var(--muted); background: none; border-color: var(--line); }
  .ftabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; background: rgba(255,255,255,.05); padding: 4px; border-radius: 10px; width: fit-content; }
  .ftabs button { font: 600 12.5px "Inter Tight", sans-serif; color: #b9bcc6; background: none; border: 0; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
  .ftabs button.on { background: #fff; color: #000; }
  .swrow { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .swrow span { width: 60px; font-size: 13px; color: var(--muted); }
  .sw { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.15); cursor: pointer; transition: transform .2s; }
  .sw.on { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 12px var(--c); }
  .shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .shopitem { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; border-radius: 12px; cursor: pointer; color: inherit; font: inherit;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
  .shopitem:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
  .shopitem.eq { border-color: var(--hue-a); box-shadow: 0 0 18px rgba(123,92,255,.35); }
  .shopitem.r3 { background: linear-gradient(160deg, rgba(179,140,255,.12), rgba(255,255,255,.03)); }
  .shopitem.r4 { background: linear-gradient(160deg, rgba(255,177,59,.14), rgba(255,255,255,.03)); }
  .shopitem em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
  .shopitem b { font-size: 15px; }
  .shopitem small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
  .shopitem .off { color: #ffb347; }
  .shopitem .price { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: #ffd27a; }
  .shopitem[data-poor] { opacity: .55; }
  .pick { display: flex; gap: 6px; align-items: center; }
  .pick select { background: rgba(255,255,255,.07); color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px; font: 500 12px "Inter Tight", sans-serif; }
  .vmine a { color: #fff; }
  @media (max-width: 760px) { .fisher { grid-template-columns: 1fr; } }

  /* Admin */
  .admin { min-height: 100vh; padding: 100px clamp(16px, 4vw, 56px) 8vh; }
  .adminlogin { max-width: 360px; margin: 12vh auto 0; text-align: center; display: grid; gap: 12px; justify-items: center; }
  .adminlogin form { display: grid; gap: 10px; width: 100%; }
  .adminlogin input { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 500 15px "Inter Tight", sans-serif; }
  .adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
  .adm-head h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 900; letter-spacing: -.05em; }
  .adm-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.05); padding: 4px; border-radius: 10px; }
  .adm-tabs button { font: 600 13px "Inter Tight", sans-serif; color: #b9bcc6; background: none; border: 0; padding: 8px 14px; border-radius: 7px; cursor: pointer; }
  .adm-tabs button.on { background: #fff; color: #000; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .kpi { border-radius: 16px; padding: 16px; background: rgba(10,10,14,.6); border: 1px solid var(--line); }
  .kpi small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
  .kpi b { display: block; font-size: 32px; font-weight: 900; letter-spacing: -.04em; margin-top: 6px; }
  .kpi span { font-size: 12px; color: var(--muted); }
  .adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
  .adm-card { border-radius: 16px; padding: 18px; background: rgba(10,10,14,.6); border: 1px solid var(--line); overflow: auto; }
  .adm-card h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--muted); margin-bottom: 12px; }
  .adm-card.wide { grid-column: 1 / -1; }
  .chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; }
  .chart div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
  .chart i { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(var(--hue-a), var(--hue-c)); min-height: 2px; }
  .chart em { font-style: normal; font-size: 8.5px; color: var(--muted); font-family: var(--mono); }
  .rows div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; position: relative; }
  .rows div::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w); background: var(--hue-a); opacity: .6; }
  .rows b { font-family: var(--mono); font-weight: 400; }
  table.adm { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  table.adm th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .1em; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  table.adm td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.adm a { color: #9fd8ff; }
  .status { font-family: var(--mono); font-size: 10px; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.08); }
  .status.new { background: rgba(255,179,71,.2); color: #ffb347; } .status.featured { background: rgba(109,255,176,.18); color: #6dffb0; } .status.rejected { opacity: .5; }
  .adm select { background: rgba(255,255,255,.07); color: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px; }

  [hidden] { display: none !important; }

  /* Shop + one-time note */
  .onetime { text-align: center; color: #cfd1d8; font-size: 15px; margin: 0 auto 2vh; max-width: 640px; padding: 0 16px; }
  .phero .onetime { margin-top: 18px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(109,255,176,.35); background: rgba(109,255,176,.08); }
  .onetime b { color: #6dffb0; }
  .shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; padding: 0 clamp(16px, 6vw, 96px); }
  .scard { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; padding: 20px; border-radius: 20px; background: rgba(10,10,14,.6); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, transform .3s; }
  .scard:hover { border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
  .sicon { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-weight: 900; font-size: 22px; }
  .sicon.t1 { background: linear-gradient(90deg,#c0c0c0 0 14%,#c0c000 0 28%,#00c0c0 0 42%,#00c000 0 57%,#c000c0 0 71%,#c00000 0 85%,#0000c0 0); color: #fff; text-shadow: 0 0 8px #000; }
  .sicon.t2 { background: radial-gradient(circle at 30% 30%, #fff, #ff3fd2 40%, #3b1763 80%); color: #fff; }
  .sicon.t3 { background: #2a0e3d; color: #e77bff; border: 1px solid #7b2a9a; }
  .sicon.t4 { background: linear-gradient(135deg, #2a1250, #07051a); border: 1px solid rgba(123,92,255,.6); box-shadow: 0 0 24px rgba(123,92,255,.5); }
  .scard h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
  .splat { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
  .scard p { color: #b8bac3; font-size: 13.5px; line-height: 1.5; }
  .scard .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; color: #cfd2da; }
  .scard .tag i { width: 6px; height: 6px; border-radius: 50%; background: #6dffb0; box-shadow: 0 0 8px #6dffb0; }
  .scard .tag.soon i { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
  .sbuy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .sbuy .price { font-size: 22px; font-weight: 800; }
  .sbuy .pill, .sbuy .ghost { font-size: 13px; padding: 10px 16px; white-space: nowrap; }
  @media (max-width: 600px) { .shopgrid { grid-template-columns: 1fr; } .scard { grid-template-columns: 56px 1fr; } .sicon { width: 56px; height: 56px; } .sbuy { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

  /* Waitlist modal */
  .wl { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,5,7,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
  .wl-card { position: relative; width: min(420px, 100%); padding: 30px 26px; border-radius: 22px; text-align: center; background: rgba(14,14,20,.95); border: 1px solid rgba(123,92,255,.45); box-shadow: 0 0 80px rgba(123,92,255,.35); display: grid; gap: 10px; justify-items: center; }
  .wl-card h3 { font-size: 26px; font-weight: 900; letter-spacing: -.03em; }
  .wl-card p { color: var(--muted); }
  .wl-card form { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
  .wl-card input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: 500 15px "Inter Tight", sans-serif; }
  .wl-card small { color: var(--muted); font-size: 12px; }
  .wl-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--muted); font-size: 24px; cursor: pointer; }
  .flag { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(255,90,95,.2); color: #ff8a7a; margin: 1px; display: inline-block; }