:root {
  color-scheme: dark;
  --bg: #080909;
  --panel: rgba(255, 255, 255, 0.055);
  --ink: #f6f4ef;
  --muted: rgba(246, 244, 239, 0.62);
  --muted-strong: rgba(246, 244, 239, 0.78);
  --line: rgba(246, 244, 239, 0.12);
  --acid: #e8ff65;
  --shell: min(100% - 2.5rem, 78rem);
  --font: "Inter Tight", "Manrope", "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 78% 16%, rgba(232, 255, 101, 0.08), transparent 26rem), linear-gradient(135deg, #050606 0%, #111313 100%); color: var(--ink); font-family: var(--font); }
body::before { position: fixed; inset: 0; z-index: -1; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); content: ""; pointer-events: none; }
a { color: inherit; }
h1, h2, p, ol { margin: 0; }
em { color: var(--acid); font-style: normal; }
.shell { width: var(--shell); margin-inline: auto; }

.detail-topbar { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.back-link, .next-link { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--muted-strong); font-size: 0.82rem; font-weight: 750; text-decoration: none; transition: color 180ms ease; }
.back-link span, .next-link span { color: var(--acid); font-size: 1rem; }
.back-link:hover, .next-link:hover { color: var(--acid); }
.detail-topbar-label { color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.detail-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--acid); color: #080909; font-size: 0.7rem; font-weight: 900; letter-spacing: -0.06em; text-decoration: none; }

.detail-main { padding-block: clamp(4rem, 8vw, 7.5rem); }
.detail-hero { max-width: 58rem; }
.detail-kicker { display: flex; gap: 1rem; color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }.detail-kicker span:first-child { color: var(--acid); }
.detail-hero h1 { max-width: 10ch; margin-top: 1.5rem; font-size: clamp(3.2rem, 7.6vw, 7.6rem); font-weight: 900; letter-spacing: -0.075em; line-height: 0.88; }
.detail-lede { max-width: 40rem; margin-top: 1.8rem; color: var(--muted-strong); font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.45; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.6rem; }.detail-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.7rem; color: var(--muted); font-size: 0.62rem; font-weight: 750; }

.detail-hero-visual { margin-top: clamp(3rem, 7vw, 6rem); }
.detail-visual { position: relative; min-height: clamp(18rem, 43vw, 35rem); overflow: hidden; background: #4d6657; }.detail-visual::before, .detail-visual::after { position: absolute; border-radius: 50%; content: ""; }.detail-visual::before { width: 44%; aspect-ratio: 1; top: -16%; right: -5%; background: rgba(232, 255, 101, 0.8); }.detail-visual::after { width: 37%; aspect-ratio: 1; bottom: -22%; left: -5%; background: rgba(7, 20, 17, 0.55); }
.detail-visual.visual-comments { background: #536c9e; }.detail-visual.visual-comments::before { background: #a8c7ff; }.detail-visual.visual-comments::after { background: rgba(26, 44, 88, 0.66); }
.detail-visual.visual-jackpot, .detail-visual.visual-promo { background: #85554f; }.detail-visual.visual-jackpot::before, .detail-visual.visual-promo::before { background: #ffaf90; }.detail-visual.visual-jackpot::after, .detail-visual.visual-promo::after { background: rgba(64, 19, 31, 0.6); }
.detail-visual.visual-gifts, .detail-visual.visual-banners { background: #6a608c; }.detail-visual.visual-gifts::before, .detail-visual.visual-banners::before { background: #d0c9ff; }.detail-visual.visual-gifts::after, .detail-visual.visual-banners::after { background: rgba(41, 28, 78, 0.62); }
.detail-visual.visual-icons, .detail-visual.visual-stories { background: #4d6960; }.detail-visual.visual-icons::before, .detail-visual.visual-stories::before { background: #bbefc7; }.detail-visual.visual-icons::after, .detail-visual.visual-stories::after { background: rgba(23, 61, 50, 0.62); }
.detail-visual.visual-marketing, .detail-visual.visual-badge { background: #806f4f; }.detail-visual.visual-marketing::before, .detail-visual.visual-badge::before { background: #ffe9a8; }.detail-visual.visual-marketing::after, .detail-visual.visual-badge::after { background: rgba(69, 47, 19, 0.62); }
.detail-visual-number { position: absolute; top: 1.4rem; left: 1.5rem; z-index: 2; color: rgba(246, 244, 239, 0.85); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em; }.detail-visual-caption { position: absolute; right: 1.5rem; bottom: 1.4rem; z-index: 2; color: rgba(246, 244, 239, 0.72); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.25; text-align: right; text-transform: uppercase; }
.detail-visual-ui { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: min(58%, 34rem); min-height: 12rem; align-content: center; gap: 0.65rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(246, 244, 239, 0.34); background: rgba(246, 244, 239, 0.14); box-shadow: 1.8rem 1.8rem 0 rgba(0, 0, 0, 0.13); transform: translate(-50%, -50%) rotate(-4deg); backdrop-filter: blur(12px); }.detail-visual-ui::before { display: block; width: 34%; height: 0.55rem; background: rgba(246, 244, 239, 0.74); box-shadow: 0 1.6rem 0 rgba(246, 244, 239, 0.34), 0 3.2rem 0 rgba(246, 244, 239, 0.18); content: ""; }.detail-visual-ui::after { display: block; width: 22%; height: 2.2rem; margin-top: 1.4rem; background: var(--acid); content: ""; }

.detail-visual.has-hero-image {
  background: #fff;
}

.detail-visual.has-hero-image::before,
.detail-visual.has-hero-image::after,
.detail-visual.has-hero-image .detail-visual-ui {
  display: none;
}

.detail-hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(3rem, 8vw, 9rem); padding-block: clamp(5rem, 10vw, 9rem); }.detail-story { min-width: 0; }.story-section + .story-section { margin-top: clamp(5rem, 10vw, 9rem); }.story-label { margin-bottom: 1.3rem; color: var(--acid); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }.story-section h2 { max-width: 12ch; font-size: clamp(2.3rem, 4.8vw, 4.8rem); font-weight: 850; letter-spacing: -0.07em; line-height: 0.92; }.story-section > p:not(.story-label), .story-rich { max-width: 42rem; margin-top: 1.7rem; color: var(--muted-strong); font-size: 1rem; line-height: 1.7; }.story-rich { white-space: pre-line; }
.process-list { display: grid; gap: 0.7rem; max-width: 44rem; margin-top: 2rem; padding: 0; list-style: none; counter-reset: process; }.process-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; border-top: 1px solid var(--line); padding: 1rem 0; color: var(--muted-strong); font-size: 0.9rem; line-height: 1.5; counter-increment: process; }.process-list li::before { color: var(--acid); content: counter(process, decimal-leading-zero); font-size: 0.62rem; font-weight: 800; }
.detail-rail { align-self: start; border-top: 1px solid var(--line); }.rail-block, .rail-result { display: grid; gap: 0.45rem; border-bottom: 1px solid var(--line); padding: 1rem 0; }.rail-block span, .rail-result span { color: var(--muted); font-size: 0.6rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }.rail-block strong { font-size: 0.8rem; font-weight: 750; line-height: 1.4; }.rail-result { margin-top: 2rem; border: 1px solid rgba(232, 255, 101, 0.4); padding: 1rem; background: rgba(232, 255, 101, 0.08); }.rail-result strong { color: var(--acid); font-size: 1.45rem; font-weight: 850; letter-spacing: -0.05em; line-height: 1; }
.detail-footer-nav { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.4rem; }.next-link { color: var(--ink); }.next-link span { transition: transform 180ms ease; }.next-link:hover span { transform: translate(2px, -2px); }

@media (min-width: 761px) {
  body.detail-page {
    height: 100svh;
    overflow: hidden;
  }

  .detail-topbar {
    min-height: 3.4rem;
  }

  .detail-main {
    display: grid;
    height: calc(100svh - 3.4rem);
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 0.95fr) auto;
    grid-template-areas:
      "hero visual"
      "layout layout"
      "footer footer";
    gap: 0.85rem;
    padding-block: 0.85rem 0.2rem;
  }

  .detail-hero {
    grid-area: hero;
    align-self: start;
    max-width: none;
    padding-top: 0.2rem;
  }

  .detail-hero h1 {
    max-width: 8ch;
    margin-top: 0.85rem;
    font-size: clamp(2.3rem, 4.2vw, 4.5rem);
    line-height: 0.88;
  }

  .detail-lede {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: clamp(0.8rem, 1vw, 1rem);
    line-height: 1.4;
  }

  .detail-tags {
    margin-top: 0.85rem;
  }

  .detail-hero-visual {
    grid-area: visual;
    min-height: 0;
    margin-top: 0;
  }

  .detail-visual {
    min-height: 0;
    height: 100%;
    border-radius: 1rem;
  }

  .detail-visual-number {
    top: 0.9rem;
    left: 1rem;
  }

  .detail-visual-caption {
    right: 1rem;
    bottom: 0.9rem;
  }

  .detail-layout {
    grid-area: layout;
    grid-template-columns: minmax(0, 1fr) 11rem;
    min-height: 0;
    gap: 0.75rem;
    padding: 0;
  }

  .detail-story {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 0;
    gap: 0.55rem;
  }

  .story-section,
  .story-section + .story-section {
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.035);
    scrollbar-width: none;
  }

  .story-section::-webkit-scrollbar {
    display: none;
  }

  .story-label {
    margin-bottom: 0.65rem;
    font-size: 0.52rem;
  }

  .story-section h2 {
    max-width: none;
    font-size: clamp(1rem, 1.55vw, 1.55rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
  }

  .story-section > p:not(.story-label),
  .story-rich {
    max-width: none;
    margin-top: 0.85rem;
    font-size: clamp(0.65rem, 0.78vw, 0.8rem);
    line-height: 1.35;
  }

  .process-list {
    gap: 0.25rem;
    max-width: none;
    margin-top: 0.85rem;
  }

  .process-list li {
    grid-template-columns: 1rem 1fr;
    gap: 0.35rem;
    padding: 0.5rem 0;
    font-size: clamp(0.65rem, 0.78vw, 0.8rem);
    line-height: 1.35;
  }

  .process-list li::before {
    font-size: 0.48rem;
  }

  .detail-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0.45rem;
    border-top: 0;
  }

  .rail-block,
  .rail-result {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.035);
  }

  .rail-block span,
  .rail-result span {
    font-size: 0.5rem;
  }

  .rail-block strong {
    font-size: 0.68rem;
  }

  .rail-result {
    grid-column: span 2;
    margin-top: 0;
  }

  .rail-result strong {
    font-size: 1.15rem;
  }

  .detail-footer-nav {
    grid-area: footer;
    padding-top: 0.65rem;
  }
}

@media (max-width: 760px) { :root { --shell: min(100% - 1.5rem, 78rem); }.detail-topbar-label { display: none; }.detail-main { padding-block: 3.5rem; }.detail-hero h1 { font-size: clamp(3rem, 15vw, 5.2rem); }.detail-visual { min-height: 18rem; }.detail-visual-ui { width: 74%; min-height: 9rem; }.detail-layout { grid-template-columns: 1fr; gap: 3rem; padding-block: 4rem 5rem; }.detail-rail { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; border-top: 0; }.rail-block { min-height: 4.7rem; }.rail-result { grid-column: span 2; margin-top: 1rem; }.story-section h2 { font-size: clamp(2.4rem, 12vw, 4rem); }.detail-footer-nav { align-items: flex-start; flex-direction: column; gap: 1.2rem; } }