/* =============================================================================
   Public landing page (notcore.org): long-scroll, black + hairlines, 3D tiles.
   Every movement is scaled by --m (motion.css), so "reduced" keeps fades only.
   ============================================================================= */

@layer components {

  .site { position: relative; --head-h: 3.75rem; --wide: 1440px; }

  /* Reading progress (scroll-driven; hidden where unsupported) */
  .site__progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-toast);
    block-size: 2px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transform-origin: left;
    scale: 0 1;
    display: none;
  }
  @supports (animation-timeline: scroll()) {
    .site__progress { display: block; animation: progress linear both; animation-timeline: scroll(root); }
  }
  @keyframes progress { to { scale: 1 1; } }

  /* ---------------------------------------------------------------- brand (shared with the dashboard) */
  .brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text); --focus-radius: var(--radius-pill); }
  .brand__text { display: grid; line-height: 1.05; }
  .brand__text strong { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; }
  .brand__text small { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.06em; }

  .brand-orb {
    position: relative;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    flex: none;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, oklch(98% 0.03 var(--hue)) 0 8%, transparent 32%),
      conic-gradient(from var(--spin), var(--accent), var(--accent-2), var(--accent-3), var(--accent));
    box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.15), 0 0 24px -2px color-mix(in oklch, var(--accent) 70%, transparent);
    animation: orb-spin 9s linear infinite;
  }
  .brand-orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 8px color-mix(in oklch, var(--accent) 50%, transparent); }
  .brand-orb--lg { inline-size: 3.6rem; block-size: 3.6rem; }
  .brand-orb--sleep { animation-duration: 30s; filter: saturate(0.6); }
  @keyframes orb-spin { to { --spin: 360deg; } }

  /* ---------------------------------------------------------------- status bits (shared) */
  .status-chip {
    --tone: var(--text-faint);
    display: inline-flex; align-items: center; gap: 0.55rem;
    max-inline-size: 20rem;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim);
    background: color-mix(in oklch, var(--bg) 70%, transparent);
    border: 1px solid var(--border);
    transition: border-color var(--dur-2), color var(--dur-2);
  }
  .status-chip:hover { color: var(--text); border-color: color-mix(in oklch, var(--tone) 60%, transparent); }
  .status-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-chip--online { --tone: var(--success); }
  .status-chip--playing { --tone: oklch(80% 0.17 145); }
  .status-chip--away { --tone: var(--warning); }

  .status-dot { position: relative; inline-size: 0.55rem; block-size: 0.55rem; flex: none; border-radius: 50%; background: var(--tone, var(--success)); box-shadow: 0 0 10px var(--tone, var(--success)); }
  .status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--tone, var(--success)); animation: ping 2.2s var(--ease-out) infinite; }
  .status-chip--offline .status-dot::after { display: none; }
  @keyframes ping { from { opacity: 0.8; scale: 0.6; } to { opacity: 0; scale: 1.8; } }

  .pulse-dot { display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--accent); animation: pulse 2.4s var(--ease-out) infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
  .hue-dot { display: inline-block; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

  /* ---------------------------------------------------------------- tags & buttons */
  .tag-pill {
    display: inline-flex; align-items: center; gap: 0.45rem;
    inline-size: fit-content;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text);
    background: color-mix(in oklch, var(--bg) 60%, transparent);
  }
  .tag-pill--live { text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); }
  .tag-pill--dark { color: #111; border-color: #c9c8c2; background: transparent; }

  .pill-btn {
    --focus-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 0.4rem;
    block-size: 2.25rem; padding-inline: 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem; font-weight: 600;
    color: var(--bg);
    background: var(--text);
    white-space: nowrap;
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3), background-color var(--dur-2);
  }
  .pill-btn:hover { transform: translateY(calc(-2px * var(--m))); box-shadow: 0 10px 30px -10px var(--accent), 0 0 0 1px var(--accent); }
  .pill-btn:active { transform: scale(0.96); }
  .pill-btn .icon { transition: transform var(--dur-3) var(--ease-spring); }
  .pill-btn:hover .icon { transform: translate(calc(2px * var(--m)), calc(-2px * var(--m))); }
  .pill-btn--lg { block-size: 3rem; padding-inline: 1.5rem; font-size: 1rem; }
  .pill-btn--ghost { color: var(--text); background: transparent; border: 1px solid var(--border-strong); }
  .pill-btn--ghost:hover { background: var(--surface); }

  .glow-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    font-size: 0.82rem; font-weight: 500;
    color: var(--text);
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    border: 1px solid color-mix(in oklch, var(--tile, var(--accent)) 45%, transparent);
    box-shadow: 0 8px 28px -10px var(--tile, var(--accent)), inset 0 -1px 0 color-mix(in oklch, var(--tile, var(--accent)) 70%, transparent);
    transition: box-shadow var(--dur-3), transform var(--dur-2) var(--ease-spring);
  }
  .glow-pill:hover { transform: translateY(calc(-2px * var(--m))); box-shadow: 0 14px 40px -10px var(--tile, var(--accent)), inset 0 -1px 0 var(--tile, var(--accent)); }

  /* ---------------------------------------------------------------- header */
  .site-head {
    position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
    border-block-end: 1px solid var(--line);
    background: color-mix(in oklch, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    animation: fade-in var(--dur-4) var(--ease-out) both;
  }
  .site-head__inner { display: flex; align-items: center; gap: var(--s-5); max-inline-size: var(--wide); margin-inline: auto; block-size: var(--head-h); padding-inline: var(--gutter); }
  .site-nav { display: flex; gap: var(--s-5); margin-inline-start: auto; font-size: var(--fs-s); }
  .site-nav a, .site-foot a { text-decoration: none; }
  .site-nav a { position: relative; color: var(--text-dim); transition: color var(--dur-2); }
  .site-nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -4px; block-size: 1px; background: var(--accent); scale: 0 1; transform-origin: right; transition: scale var(--dur-3) var(--ease-out); }
  .site-nav a:hover { color: var(--text); }
  .site-nav a:hover::after { scale: 1 1; transform-origin: left; }
  .site-head__actions { display: flex; align-items: center; gap: var(--s-2); }
  @media (max-width: 760px) {
    .site-nav { display: none; }
    .site-head__actions { margin-inline-start: auto; }
    .look-btn__text { display: none; }
  }

  /* ---------------------------------------------------------------- theme picker (native popover) */
  .look-btn {
    --focus-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 0.45rem;
    block-size: 2.25rem; padding-inline: 0.55rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem; color: var(--text-dim);
    border: 1px solid var(--border);
    transition: color var(--dur-2), border-color var(--dur-2);
  }
  .look-btn:hover { color: var(--text); border-color: var(--border-strong); }
  .look-btn__swatch { inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: conic-gradient(var(--accent), var(--accent-2), var(--accent-3), var(--accent)); box-shadow: 0 0 10px -2px var(--accent); }

  .look {
    position: fixed;
    inset: calc(var(--head-h, 3.75rem) + 0.5rem) var(--gutter) auto auto;
    margin: 0;
    inline-size: min(22rem, calc(100vw - 2rem));
    padding: var(--s-4);
    border-radius: var(--radius-l);
    color: var(--text);
    background: var(--glass-solid);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-3);
  }
  .look:popover-open { animation: modal-in var(--dur-3) var(--ease-spring) both; }
  .look__title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-block: 0 var(--s-2); }
  .look__title + .look__grid, .look__title + .look__motion { margin-block-end: var(--s-4); }
  .look__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .look__theme { display: grid; gap: 0.35rem; padding: 0.4rem; border-radius: var(--radius-m); border: 1px solid var(--border); text-align: start; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring); }
  .look__theme:hover { transform: translateY(calc(-2px * var(--m))); border-color: var(--border-strong); }
  .look__theme[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .look__preview { block-size: 2.6rem; border-radius: 8px; }
  .look__name { font-size: 0.72rem; font-weight: 600; }
  .look__theme--aurora .look__preview { background: radial-gradient(circle at 25% 25%, oklch(62% 0.17 172), transparent 65%), radial-gradient(circle at 85% 80%, oklch(55% 0.2 270), transparent 60%), #0b0d14; }
  .look__theme--neon .look__preview { background: radial-gradient(circle at 75% 30%, oklch(62% 0.26 330), transparent 60%), radial-gradient(circle at 20% 85%, oklch(70% 0.18 200), transparent 55%), #07050d; }
  .look__theme--minimal .look__preview { background: linear-gradient(135deg, #1b1c20, #121316); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08); }
  .look__theme--sunset .look__preview { background: radial-gradient(circle at 30% 30%, oklch(72% 0.17 62), transparent 60%), radial-gradient(circle at 85% 85%, oklch(60% 0.2 350), transparent 60%), #1a0f0d; }
  .look__theme--abyss .look__preview { background: radial-gradient(circle at 70% 30%, oklch(55% 0.15 215), transparent 60%), radial-gradient(circle at 20% 90%, oklch(45% 0.17 265), transparent 60%), #050a14; }
  .look__theme--terminal .look__preview { background: repeating-linear-gradient(180deg, oklch(0% 0 0 / 0.4) 0 1px, transparent 1px 3px), radial-gradient(circle, oklch(55% 0.17 145), #040805 70%); }
  .look__motion { display: flex; }
  .look__hint { font-size: 0.72rem; color: var(--text-faint); }

  /* =============================================================================
     Video-wall look: near-black canvas, hairlines, a room of picture tiles,
     three-column chapters, glowing card stacks, a white "now" floor, neon art.
     ============================================================================= */

  .site {
    --head-h: 3.75rem;
    --wide: 1240px;
    --ink: color-mix(in oklch, var(--bg) 28%, #000);
    --line: oklch(100% 0 0 / 0.075);
    --edge: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
    background: var(--ink);
    color: var(--text);
  }
  .app:has(.site) .aurora { display: none; }
  .site :where(section) { scroll-margin-top: var(--head-h); }

  .site-head {
    position: fixed;
    inset-inline: 0;
    border-block-end: 0;
    background: linear-gradient(color-mix(in oklch, var(--ink) 88%, transparent), color-mix(in oklch, var(--ink) 55%, transparent));
  }
  .site-head__inner { max-inline-size: var(--wide); }

  .big-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.1rem); letter-spacing: -0.045em; line-height: 1.02; max-inline-size: 20ch; text-wrap: balance; }

  .ghost-pill {
    --focus-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 0.35rem;
    inline-size: fit-content;
    padding: 0.32rem 0.75rem;
    border-radius: 8px;
    border: 1px solid oklch(100% 0 0 / 0.55);
    font-size: 0.8rem; font-weight: 600;
    transition: background-color var(--dur-2), color var(--dur-2);
  }
  .ghost-pill:hover { background: var(--text); color: var(--ink); }


  /* =============================================================================
     Landing: one calm photo, frosted glass, cursor light. Motion is gentle and
     scaled by --m (0 in reduced-motion mode).
     ============================================================================= */

  .lp {
    --ink: color-mix(in oklch, var(--bg) 40%, #000);
    --glass: oklch(100% 0 0 / 0.055);
    --glass-strong: oklch(100% 0 0 / 0.09);
    --rim: oklch(100% 0 0 / 0.12);
    --wide: 1180px;
    position: relative;
    min-block-size: 100dvh;
    color: var(--text);
    background: var(--ink);
    isolation: isolate;
    transition: --px 600ms var(--ease-out), --py 600ms var(--ease-out);
  }
  .app:has(.lp) .aurora { display: none; }
  .lp :where(section, article) { scroll-margin-top: 5rem; }

  /* Background photo with a slow parallax against the cursor, plus a light that follows it */
  .lp__bg {
    position: fixed;
    inset: -4%;
    z-index: -2;
    background: var(--bg-img) center / cover no-repeat;
    filter: saturate(1.1) brightness(0.55) blur(2px);
    translate: calc((0.5 - var(--px)) * 28px * var(--m)) calc((0.5 - var(--py)) * 22px * var(--m));
    scale: 1.04;
    animation: bg-in 1.6s var(--ease-out) both;
  }
  @keyframes bg-in { from { opacity: 0; scale: calc(1.04 + 0.06 * var(--m)); } }
  .lp::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(600px circle at calc(var(--px) * 100%) calc(var(--py) * 100%), color-mix(in oklch, var(--accent) 16%, transparent), transparent 60%),
      radial-gradient(120% 90% at 50% 0%, transparent 40%, oklch(0% 0 0 / 0.55)),
      linear-gradient(180deg, oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.55));
  }

  /* Frosted glass. The rim catches the cursor light (fixed attachment = same light on every panel). */
  .glass-panel {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--glass-strong), var(--glass));
    border: 1px solid var(--rim);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12), 0 30px 60px -30px oklch(0% 0 0 / 0.7);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
  .glass-panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(320px circle at calc(var(--px) * 100vw) calc(var(--py) * 100vh), color-mix(in oklch, var(--accent) 85%, white), transparent 70%) fixed;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0.9;
  }

  .glass-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.88rem; font-weight: 600;
    color: var(--text);
    background: var(--glass);
    border: 1px solid var(--rim);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color var(--dur-2), border-color var(--dur-2), translate var(--dur-3) var(--ease-spring);
  }
  .glass-btn:hover { background: var(--glass-strong); border-color: oklch(100% 0 0 / 0.25); translate: 0 calc(-2px * var(--m)); }

  /* Entrance: everything fades up once, in order */
  .lp-head, .lp-hero, .bento > *, .np { animation: rise 900ms var(--ease-out) both; }
  .np { animation-delay: 100ms; }
  .lp-hero { animation-delay: 150ms; }
  .bento > :nth-child(1) { animation-delay: 300ms; }
  .bento > :nth-child(2) { animation-delay: 380ms; }
  .bento > :nth-child(3) { animation-delay: 460ms; }
  .bento > :nth-child(4) { animation-delay: 540ms; }
  @keyframes rise { from { opacity: 0; translate: 0 calc(18px * var(--m)); filter: blur(calc(6px * var(--m))); } }

  /* Gentle reveal for cards further down (scroll-linked where supported) */
  @supports (animation-timeline: view()) {
    .about-card, .faq { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }

  /* ---------------------------------------------------------------- now playing */
  .np { position: sticky; inset-block-start: 0.6rem; z-index: 30; display: grid; justify-items: center; gap: 0.5rem; padding: 0.6rem var(--gutter) 0; }
  .np__bar { display: flex; align-items: center; gap: 0.6rem; max-inline-size: min(100%, 44rem); padding: 0.35rem 0.4rem 0.35rem 0.4rem; border-radius: var(--radius-pill); font-size: 0.8rem; }
  .np__art { position: relative; flex: none; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; overflow: hidden; background: oklch(100% 0 0 / 0.1) var(--img, none) center / cover no-repeat; }
  .np.is-live .np__art { animation: spin 9s linear infinite; box-shadow: 0 0 0 2px oklch(78% 0.18 150 / 0.7), 0 0 18px oklch(74% 0.19 150 / 0.6); }
  @keyframes spin { to { rotate: calc(360deg * var(--m)); } }
  .np__eq { position: absolute; inset: 0; display: none; }
  .np__label { flex: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
  .np.is-live .np__label { color: oklch(84% 0.16 150); }
  .np.is-live .np__label::before { content: ""; display: inline-block; inline-size: 0.45rem; block-size: 0.45rem; margin-inline-end: 0.4rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2s var(--ease-out) infinite; vertical-align: 1px; }
  .np__song { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
  .np__song span { color: var(--text-dim); }
  .np__song:hover strong { text-decoration: underline; }
  .np__btn { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border: 0; border-radius: var(--radius-pill); color: #06140b; background: oklch(80% 0.18 150); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: filter var(--dur-2); }
  .np__btn:hover { filter: brightness(1.1); }
  .np__bar:has(.tclock) { flex-wrap: wrap; border-radius: 20px; row-gap: 0.15rem; padding-block-end: 0.55rem; }
  .np__bar .tclock { flex-basis: 100%; padding-inline: 0.4rem 0.6rem; }
  .np__count { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--text-dim); }
  .np__note { padding: 1rem; font-size: 0.85rem; color: var(--text-dim); text-align: center; }
  .np__paused { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 16px; background: #000 var(--img, none) center / cover no-repeat; }
  .np__paused span { max-inline-size: 80%; padding: 0.4rem 0.9rem; border-radius: 99px; font-size: 0.78rem; text-align: center; background: oklch(0% 0 0 / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .np__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.4rem 0.1rem; font-size: 0.74rem; color: var(--text-dim); }
  .np__sync { display: inline-block; inline-size: 0.45rem; block-size: 0.45rem; margin-inline-end: 0.3rem; border-radius: 50%; background: oklch(78% 0.19 150); box-shadow: 0 0 8px oklch(74% 0.19 150); animation: pulse 2s var(--ease-out) infinite; }
  .np__link { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .np__player { inline-size: min(100%, 30rem); padding: 0.4rem; animation: rise 500ms var(--ease-out) both; }
  .np__player iframe { display: block; inline-size: 100%; block-size: 152px; border: 0; border-radius: 16px; }
  .np__player iframe.is-video { block-size: auto; aspect-ratio: 16 / 9; }

  /* ---------------------------------------------------------------- header */
  .lp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-inline-size: var(--wide); margin-inline: auto; padding: 1.1rem var(--gutter); }
  .lp-nav { display: flex; gap: 0.2rem; padding: 0.25rem; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--rim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .lp-nav a { padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); font-size: 0.84rem; color: var(--text-dim); text-decoration: none; transition: background-color var(--dur-2), color var(--dur-2); }
  .lp-nav a:hover { color: var(--text); background: oklch(100% 0 0 / 0.08); }
  .lp-head__actions { display: flex; align-items: center; gap: var(--s-2); }

  /* ---------------------------------------------------------------- layout */
  .lp-main { display: grid; gap: var(--s-5); max-inline-size: var(--wide); margin-inline: auto; padding: var(--s-4) var(--gutter) var(--s-8); }
  .lp-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; }

  /* ---------------------------------------------------------------- hero */
  .lp-hero { display: grid; gap: var(--s-4); padding: clamp(1.75rem, 4vw, 3rem); }
  .lp-hero__id { display: flex; align-items: center; gap: var(--s-4); }
  .lp-avatar { position: relative; flex: none; display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 22px; background: oklch(100% 0 0 / 0.06); box-shadow: 0 0 0 1px var(--rim), 0 16px 40px -16px color-mix(in oklch, var(--accent) 70%, transparent); }
  .lp-avatar img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
  .lp-avatar__dot { position: absolute; inset-inline-end: -4px; inset-block-end: -4px; inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 3px solid #111; background: oklch(55% 0 0); }
  .lp-avatar__dot--online, .lp-avatar__dot--playing { background: oklch(78% 0.19 150); box-shadow: 0 0 12px oklch(74% 0.19 150); animation: pulse 2.4s var(--ease-out) infinite; }
  .lp-hero__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 1.6rem + 5vw, 5.4rem);
    letter-spacing: -0.055em;
    line-height: 0.95;
    background: linear-gradient(100deg, var(--text) 30%, color-mix(in oklch, var(--accent) 80%, white) 50%, var(--text) 70%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 9s var(--ease-in-out) infinite;
  }
  @keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
  .lp-hero__tagline { max-inline-size: 30ch; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; color: var(--text-dim); text-wrap: balance; }
  .lp-hero__status { display: inline-flex; align-items: center; gap: 0.5rem; inline-size: fit-content; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.85rem; background: oklch(0% 0 0 / 0.25); border: 1px solid var(--rim); }
  .dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: oklch(60% 0 0); }
  .dot--online, .dot--playing { background: oklch(78% 0.19 150); box-shadow: 0 0 10px oklch(74% 0.19 150); animation: pulse 2.4s var(--ease-out) infinite; }
  .lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* ---------------------------------------------------------------- bento */
  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
  .bt { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); overflow: hidden; transition: translate var(--dur-3) var(--ease-spring), box-shadow var(--dur-3); }
  .bt:hover { translate: 0 calc(-3px * var(--m)); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 40px 70px -30px oklch(0% 0 0 / 0.8), 0 0 50px -24px var(--accent); }
  .bt--steam { grid-column: span 7; }
  .bt--music { grid-column: span 5; grid-row: span 2; }
  .bt--city { grid-column: span 3; min-block-size: 13rem; }
  .bt--links { grid-column: span 4; }
  .bt__head { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
  .bt__badge { margin-inline-start: auto; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-dim); background: oklch(100% 0 0 / 0.08); }
  .bt__badge--online, .bt__badge--playing { color: oklch(86% 0.15 150); background: oklch(74% 0.19 150 / 0.18); }
  .bt__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.035em; line-height: 1.1; }
  .bt__text { color: var(--text-dim); font-size: 0.92rem; }
  .bt__link { display: inline-flex; align-items: center; gap: 0.3rem; inline-size: fit-content; font-size: 0.82rem; color: var(--text-dim); text-decoration: none; }
  .bt__link:hover { color: var(--text); }
  .bt--steam::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art, none) center / cover no-repeat; opacity: 0.16; filter: blur(18px) saturate(1.4); }

  .games { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .game { display: flex; align-items: center; gap: var(--s-3); padding: 0.4rem; border-radius: 14px; background: oklch(0% 0 0 / 0.2); transition: background-color var(--dur-2); }
  .game:hover { background: oklch(0% 0 0 / 0.32); }
  .game img { inline-size: 6.5rem; aspect-ratio: 460 / 215; border-radius: 9px; object-fit: cover; }
  .game span { display: grid; min-inline-size: 0; }
  .game strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game small { color: var(--text-faint); font-size: 0.75rem; }

  .bt--music { grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: stretch; }
  .music-art { position: relative; display: grid; align-content: end; min-block-size: 12rem; padding: var(--s-4); border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(transparent 35%, oklch(0% 0 0 / 0.7)), var(--img) center / cover no-repeat; box-shadow: 0 16px 34px -18px #000; }
  .covers { align-content: start; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
  .cover { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: oklch(100% 0 0 / 0.06) var(--img, none) center / cover no-repeat; box-shadow: 0 14px 30px -18px #000; transition: translate var(--dur-3) var(--ease-spring), scale var(--dur-3) var(--ease-spring); }
  .cover:hover { translate: 0 calc(-3px * var(--m)); scale: 1.03; }
  .cover__cap { position: absolute; inset: auto 0 0; display: grid; padding: 1.4rem 0.55rem 0.45rem; color: #fff; background: linear-gradient(transparent, oklch(0% 0 0 / 0.75)); opacity: 0; translate: 0 6px; transition: opacity var(--dur-2), translate var(--dur-3) var(--ease-out); }
  .cover:hover .cover__cap, .cover:focus-visible .cover__cap { opacity: 1; translate: 0 0; }
  .cover__cap strong { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cover__cap small { font-size: 0.66rem; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spotify-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1rem; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 700; color: #06140b; background: oklch(78% 0.19 150); text-decoration: none; box-shadow: 0 12px 30px -14px oklch(72% 0.2 150); transition: filter var(--dur-2), translate var(--dur-3) var(--ease-spring); }
  .spotify-btn:hover { filter: brightness(1.08); translate: 0 calc(-2px * var(--m)); }

  .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .chips li { padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.74rem; color: var(--text-dim); background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.08); }

  .bt--city { background: var(--img) center / cover no-repeat; }
  .bt--city__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.65)); }
  .bt--city { color: #fff; align-content: space-between; }
  .bt--city .bt__head { color: oklch(100% 0 0 / 0.75); }
  .city-facts { display: grid; gap: 0.1rem; }
  .city-facts__time { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .city-facts p:not(.city-facts__time) { opacity: 0.85; }

  .links { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .link-row { display: flex; align-items: center; gap: var(--s-3); inline-size: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 14px; color: var(--text); background: none; font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--dur-2); }
  .link-row:hover { background: oklch(100% 0 0 / 0.07); }
  .link-row__icon { --h: 270; display: grid; place-items: center; flex: none; inline-size: 2.3rem; block-size: 2.3rem; border-radius: 11px; color: oklch(86% 0.12 var(--h)); background: oklch(70% 0.15 var(--h) / 0.18); }
  .link-row__text { display: grid; flex: 1; min-inline-size: 0; }
  .link-row__text small { color: var(--text-faint); font-size: 0.76rem; }
  .link-row__go { color: var(--text-faint); transition: translate var(--dur-3) var(--ease-spring), color var(--dur-2); }
  .link-row:hover .link-row__go { color: var(--text); translate: calc(3px * var(--m)) calc(-3px * var(--m)); }

  /* ---------------------------------------------------------------- about */
  .about { display: grid; gap: var(--s-4); }
  .about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .about-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); }
  .about-card__img { border-radius: 16px; background: var(--img) center / cover no-repeat; min-block-size: 9rem; box-shadow: 0 16px 30px -18px #000; transition: scale var(--dur-4) var(--ease-out); }
  .about-card:hover .about-card__img { scale: 1.03; }
  .about-card__body { display: grid; align-content: start; gap: 0.45rem; }
  .about-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.025em; }
  .about-card p:not(.lp-eyebrow) { color: var(--text-dim); font-size: 0.88rem; }

  /* ---------------------------------------------------------------- FAQ */
  .faq { display: grid; gap: 0; padding: var(--s-5) var(--s-6); }
  .faq .section-title { margin-block-end: var(--s-2); }
  .faq__item { border-block-end: 1px solid oklch(100% 0 0 / 0.08); }
  .faq__item:last-child { border-block-end: 0; }
  .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: 1rem; cursor: pointer; list-style: none; font-weight: 600; }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__icon { position: relative; flex: none; inline-size: 0.8rem; block-size: 0.8rem; color: var(--text-faint); }
  .faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; block-size: 1.5px; background: currentColor; transition: rotate var(--dur-3) var(--ease-spring); }
  .faq__icon::after { rotate: 90deg; }
  .faq__item[open] .faq__icon::after { rotate: 0deg; }
  .faq__item p { padding-block-end: 1rem; color: var(--text-dim); max-inline-size: 62ch; }
  @supports selector(::details-content) {
    .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
    .faq__item[open]::details-content { block-size: auto; }
  }

  /* ---------------------------------------------------------------- footer */
  .lp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); max-inline-size: var(--wide); margin-inline: auto; padding: 0 var(--gutter) var(--s-6); font-size: 0.78rem; color: var(--text-faint); }
  .credits summary { cursor: pointer; }
  .credits p { max-inline-size: 70ch; margin-block-start: var(--s-2); }
  .credits a { color: var(--text-dim); text-decoration: none; }
  .credits a:hover { color: var(--text); }

  /* ---------------------------------------------------------------- responsive */
  @media (max-width: 960px) {
    .bt--steam, .bt--music, .bt--city, .bt--links { grid-column: span 12; grid-row: auto; }
    .about__grid { grid-template-columns: 1fr; }
    .lp-nav { display: none; }
  }
  @media (max-width: 560px) {
    .about-card { grid-template-columns: 1fr; }
    .about-card__img { min-block-size: 8rem; }
    .np__label { display: none; }
    .lp-hero__id { flex-direction: column; align-items: flex-start; }
  }
  @media (hover: none) {
    .glass-panel::after { display: none; }
  }
}