/* The established blue hero is the visual anchor for the long-form story. */
html { scroll-padding-top: 2rem; }
body { overflow-x: clip; overflow-y: auto; background: var(--bg-deep); }
a { color: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.4em; text-decoration: none; transition: background .2s, border-color .2s; }
.btn:hover { background: #2968d8; border-color: #79aaff; }
:focus-visible { outline: 2px solid #a9c8ff; outline-offset: 6px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 150; padding: 1rem; background: var(--accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.hero { isolation: isolate; }
.blueprint-grid { z-index: -1; }
.story-layout { position: relative; display: grid; grid-template-columns: clamp(180px, 19vw, 310px) minmax(0, 1fr); max-width: 1920px; margin: 0 auto; border-top: 1px solid var(--card-border); }
.sidebar { padding: clamp(1rem, 2.4vw, 2.5rem); border-right: 1px solid var(--card-border); }
.sidebar-inner { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem); }
.side-brand { font: 900 clamp(1rem, 1.8vw, 2rem)/1 var(--font-display); text-decoration: none; letter-spacing: -.05em; }
.side-brand span { color: var(--accent); }
.eyebrow, .section-index, .pill, .micro { font: 500 clamp(.62rem, .74vw, .82rem)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .8em; color: var(--ink-dim); margin-bottom: clamp(1.2rem, 3vw, 3rem); }
.eyebrow::before { content: ''; height: .5em; width: .5em; background: var(--accent); }
.side-intro { color: var(--ink-dim); font-size: clamp(.75rem, 1vw, .95rem); line-height: 1.65; }
.side-nav { display: grid; }
.side-nav a { padding: .8rem 0; border-bottom: 1px solid var(--card-border); text-decoration: none; font-size: clamp(.72rem, 1vw, 1rem); display: flex; justify-content: space-between; color: var(--ink-dim); }
.side-nav a span { color: var(--ink-faint); font-family: var(--font-mono); font-size: .7em; }
.side-nav a:hover, .side-nav a[aria-current] { color: var(--ink); }
.side-nav a[aria-current] span { color: var(--accent); }
.side-item { width: clamp(65px, 7vw, 115px); height: auto; image-rendering: pixelated; align-self: center; }
.side-socials { display: flex; gap: 1rem; font-size: clamp(.65rem, .8vw, .85rem); }
.side-socials a { text-underline-offset: .4em; }
.side-progress { height: 2px; background: var(--card-border); }
.side-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.story-main { min-width: 0; }
.chapter { position: relative; padding: clamp(4rem, 8vw, 10rem) clamp(1.3rem, 4.8vw, 6rem); border-bottom: 1px solid var(--card-border); scroll-margin-top: 1rem; }
.section-index { position: absolute; right: clamp(1.3rem, 4.8vw, 6rem); top: clamp(4rem, 8vw, 10rem); color: var(--ink-faint); }
.chapter h2 { font: 750 clamp(2.7rem, 5.4vw, 6.6rem)/.98 var(--font-display); letter-spacing: -.055em; }
.chapter h2 em { font-style: normal; color: var(--ink-dim); }
.chapter-intro { margin-top: 1.8rem; max-width: 43ch; color: var(--ink-dim); font-size: clamp(.95rem, 1.15vw, 1.25rem); line-height: 1.7; }
.journey-list { margin-top: clamp(3rem, 6vw, 7rem); }
.journey-step { display: grid; grid-template-columns: .5fr 1fr 1.2fr; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 3rem) 0; border-top: 1px solid #ffffff26; align-items: start; }
.step-number { font: 500 clamp(2.5rem, 5vw, 6rem)/1 var(--font-display); letter-spacing: -.06em; color: var(--accent); }
.journey-step h3 { font: 650 clamp(1.3rem, 2vw, 2.2rem)/1.12 var(--font-display); letter-spacing: -.035em; }
.journey-step p, .journey-step details, .tool-info p, .use-card p, .quick-card p, .faq-list p { color: var(--ink-dim); font-size: clamp(.85rem, 1.05vw, 1.1rem); line-height: 1.65; }
.journey-step details { margin-top: 1rem; }
.journey-step summary { cursor: pointer; color: var(--ink); font-size: .85em; text-underline-offset: .4em; }
.journey-step details p { margin-top: .7rem; }
.tools-chapter { padding-bottom: clamp(3rem, 5vw, 6rem); overflow: hidden; background: #151e2c; }
.tools-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.tools-header .chapter-intro { max-width: 24ch; }
.tool-track { display: flex; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2.5rem, 4vw, 5rem); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; padding-bottom: 1rem; }
.tool-card { flex: 0 0 min(59vw, 850px); min-width: 0; overflow: hidden; border: 1px solid #ffffff20; border-radius: var(--radius-card); background: var(--bg-deep); }
.tool-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--card-border); }
.tool-top > span { font-family: var(--font-mono); color: var(--ink-dim); font-size: .75rem; }
.pill { border: 1px solid #ffffff24; border-radius: 2rem; padding: .3em .8em; color: var(--ink-dim); }
.tool-media { position: relative; aspect-ratio: 16/9; background: #111923; }
.tool-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.tool-info { padding: clamp(1.2rem, 2vw, 2rem); display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; }
.tool-info img { width: 100%; image-rendering: pixelated; }
.tool-info h3 { font: 650 clamp(1.25rem, 2.2vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -.04em; margin-bottom: .7rem; }
.rail-caption { margin-top: 1.3rem; display: flex; justify-content: space-between; color: var(--ink-dim); }
.reveal-chapter { background: #0f1621; }
.reveal-title { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.reveal-title img { width: clamp(4rem, 10vw, 11rem); image-rendering: pixelated; transform: rotate(-12deg); }
.manifesto { font: 600 clamp(2rem, 4.3vw, 5.3rem)/1.2 var(--font-display); letter-spacing: -.045em; margin: clamp(3rem, 6vw, 7rem) 0; }
.reveal-word { display: inline-block; white-space: nowrap; }
.reveal-char { display: inline-block; }
.ability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.ability { padding: 1.2rem 0; border-top: 1px solid #ffffff26; display: flex; gap: 1rem; font-size: clamp(.85rem, 1.1vw, 1.2rem); }
.ability span { font: .7rem var(--font-mono); color: var(--accent); margin-top: .3rem; }
.use-grid { margin-top: clamp(2.5rem, 4vw, 5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.use-card { border: 1px solid #ffffff24; border-radius: var(--radius-card); padding: clamp(1.25rem, 2vw, 2.5rem); background: #ffffff04; display: flex; flex-direction: column; }
.use-card.featured { background: var(--accent); border-color: var(--accent); }
.use-card img { width: 75%; max-width: 180px; align-self: center; margin: 2.5rem 0; image-rendering: pixelated; }
.use-card h3 { font: 650 clamp(1.6rem, 2.6vw, 3rem)/1.03 var(--font-display); letter-spacing: -.045em; margin-bottom: 1.2rem; }
.use-card p { flex: 1; }
.use-card.featured p, .use-card.featured .micro { color: #fff; }
.use-card > a { text-decoration: none; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ffffff35; font-size: clamp(.75rem, .95vw, 1rem); display: flex; justify-content: space-between; }
.chat-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.chat-chapter h2 { font-size: clamp(2.7rem, 4.4vw, 5.5rem); }
.chat-stage { display: flex; flex-direction: column; gap: 1rem; align-items: start; }
.chat-person { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; font-size: .85rem; }
.chat-person img { width: 2.6rem; image-rendering: pixelated; }
.chat-person span { display: block; color: var(--ink-dim); font-size: .7rem; margin-top: .2rem; }
.chat-bubble { padding: 1.15rem 1.4rem; border-radius: 1rem 1rem 1rem .15rem; background: #1d293b; font-size: clamp(.9rem, 1.3vw, 1.3rem); line-height: 1.5; transform-origin: bottom left; }
.chat-bubble.reply { background: #2f68bd; align-self: end; border-radius: 1rem 1rem .15rem 1rem; }
.chat-bubble.actions { background: transparent; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.typing { display: flex; gap: .4rem; }
.typing i { width: .4rem; height: .4rem; background: var(--ink-dim); border-radius: 50%; }
.quick-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.carousel-controls { display: flex; gap: .5rem; }
.carousel-controls button { width: 2.7rem; height: 2.7rem; border: 1px solid #ffffff30; border-radius: 50%; background: transparent; color: var(--ink); font: 1.2rem var(--font-body); cursor: pointer; }
.carousel-controls button:hover { background: var(--accent); }
.quick-carousel { overflow: hidden; margin-top: 3rem; cursor: grab; touch-action: pan-y; position: relative; }
.quick-carousel:active { cursor: grabbing; }
.swiper-wrapper { display: flex; box-sizing: content-box; }
.swiper-slide { flex-shrink: 0; height: auto; }
.quick-card { width: 70%; background: #192332; border: 1px solid #ffffff16; border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 3rem); user-select: none; }
.quick-card img { width: 4.5rem; height: 4.5rem; object-fit: contain; image-rendering: pixelated; margin: 2rem 0; }
.quick-card h3 { font: 650 clamp(1.8rem, 3.4vw, 4rem)/1.04 var(--font-display); letter-spacing: -.045em; margin-bottom: 1.3rem; }
.quick-card p { max-width: 44ch; }
.quick-card .micro { display: block; margin-top: 2rem; color: var(--accent); }
.drag-cursor { position: fixed; top: 0; left: 0; z-index: 30; pointer-events: none; width: 5rem; height: 5rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font: .65rem var(--font-mono); opacity: 0; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; }
.faq-list details { border-top: 1px solid #ffffff30; }
.faq-list details:last-child { border-bottom: 1px solid #ffffff30; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: clamp(.95rem, 1.2vw, 1.3rem); line-height: 1.4; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--accent); font-size: 1.4em; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { padding: 0 1rem 1.5rem 0; }
.footer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 5vw, 6rem) clamp(1rem, 2.4vw, 2.5rem) 1.5rem; background: #162236; }
.footer-top { display: flex; justify-content: space-between; align-items: start; gap: 2rem; }
.footer-top p { font: 600 clamp(1.5rem, 3vw, 3.5rem)/1.15 var(--font-display); letter-spacing: -.04em; }
.footer-links { display: flex; gap: 2rem; font-size: clamp(.8rem, 1vw, 1rem); }
.footer-links a { text-underline-offset: .5rem; }
.footer-word { font: 900 clamp(3.3rem, 16.2vw, 22rem)/1.2 var(--font-display); letter-spacing: -.04em; text-align: center; margin: clamp(2rem, 4vw, 5rem) 0 0; color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid #ffffff26; color: var(--ink-dim); font-size: clamp(.6rem, .85vw, .9rem); }
.trail-image { position: absolute; top: 0; left: 0; width: clamp(5rem, 10vw, 10rem); pointer-events: none; image-rendering: pixelated; z-index: -1; }
.no-swiper .swiper-wrapper { gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.no-swiper .quick-card { scroll-snap-align: start; }
@media (min-width: 768px) and (max-height: 680px) { .sidebar-inner { gap: 1rem; top: 1rem; } .side-item { display: none; } .side-nav a { padding: .6rem 0; } }
@media (min-width: 768px) {
  .hero .card-traits { right: clamp(2rem, 8vw, 10rem); top: 55vh; }
  .hero .card-downloads { left: clamp(2rem, 10vw, 12rem); top: 55vh; }
  .hero .card-views { left: clamp(2rem, 10vw, 12rem); top: 72vh; }
  .horizontal-active { padding-top: 4vh; padding-bottom: 3vh; }
  .horizontal-active .eyebrow { margin-bottom: 2vh; }
  .horizontal-active h2 { font-size: clamp(2.5rem, 4.2vw, 5rem); }
  .horizontal-active .section-index { top: 4vh; }
  .horizontal-active .tool-track { overflow: visible; margin-top: 3vh; }
  .horizontal-active .tool-card { flex-basis: min(53vw, 850px); }
  .horizontal-active .tool-media { height: 34vh; aspect-ratio: auto; }
  .horizontal-active .tool-info { padding: 1rem 1.4rem; }
  .horizontal-active .tool-info h3 { font-size: clamp(1.25rem, 1.8vw, 2rem); }
  .horizontal-active .tool-info p { font-size: clamp(.8rem, .95vw, 1rem); line-height: 1.5; }
}
@media (max-width: 1023px) { .story-layout { grid-template-columns: 160px minmax(0, 1fr); } .sidebar { padding: 1.5rem 1rem; } .tools-header, .quick-heading { align-items: start; } .tools-header .chapter-intro { display: none; } .chat-chapter, .faq-layout { grid-template-columns: 1fr; } .use-grid { grid-template-columns: 1fr; } .use-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .use-card img { grid-column: 2; grid-row: 1/4; margin: 0; width: 60%; justify-self: center; } .use-card > a { grid-column: 1/-1; } .journey-step { grid-template-columns: .4fr 1fr; } .journey-step > div { grid-column: 2; } }
@media (max-width: 767px) {
  .preloader { display: none; }
  .hero { overflow: hidden; padding-top: 1.3rem; }
  .giant-word { font-size: 15.7vw; white-space: nowrap; top: 1.7rem; }
  .meta-row { margin-top: 22vw; gap: 1rem; }
  .meta-text { display: block; white-space: normal; }
  .meta-value { font-size: clamp(.7rem, 2.7vw, 1rem); }
  .meta-label { display: block; font-size: .6rem; }
  .stage { padding: .5rem 0 1rem; }
  .stage-img { width: min(84vw, 430px); max-height: 55vh; object-fit: contain; touch-action: pan-y; }
  .headline { margin-top: -3rem; position: relative; left: auto; bottom: auto; font-size: clamp(1.85rem, 6.2vw, 3rem); }
  .card-stat { position: static; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .9rem; margin-bottom: .6rem; backdrop-filter: none; }
  .card-stat .stat-value { font-size: 1.8rem; }
  .card-stat .stat-label { margin: 0; }
  .card-traits { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin: .3rem 0 1rem; gap: 1rem; padding: 1rem; }
  .trait { font-size: .8rem; }
  .foot-left { font-size: 1rem; }
  .foot-right { max-width: 36ch; font-size: .85rem; }
  .story-layout { display: block; }
  .sidebar { display: none; }
  .chapter { padding: 4rem 1.25rem; }
  .section-index { top: 4rem; right: 1.25rem; }
  .chapter h2 { font-size: clamp(2.7rem, 10.5vw, 4.2rem); }
  .journey-step { gap: 1rem; }
  .tool-track { display: grid; overflow: visible; }
  .tool-card { width: 100%; }
  .tool-info { gap: 1rem; grid-template-columns: 3rem 1fr; }
  .rail-caption { display: none; }
  .manifesto { font-size: clamp(1.9rem, 7.7vw, 3rem); }
  .reveal-title { gap: .5rem; }
  .reveal-title img { width: 3rem; }
  .reveal-title h2 { min-width: 0; }
  .ability-list { grid-template-columns: 1fr; }
  .use-grid { gap: 1rem; }
  .use-card img { width: 90%; }
  .chat-chapter { gap: 2.5rem; }
  .quick-card { width: 88%; }
  .quick-heading { align-items: end; }
  .carousel-controls { flex-shrink: 0; }
  .footer-top { flex-direction: column; }
  .footer-links { gap: 1.2rem; }
  .footer-bottom { flex-wrap: wrap; line-height: 1.6; }
  .drag-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .preloader, .drag-cursor { display: none; } }