@import url('../components/kelvin-conclusion.css');
body.kelvin-demo-standalone { margin:0; background:#071c26; }
#kelvin-demo { --ink:#e8eee7; --muted:#9aafb0; --night:#071c26; --night-2:#0b2633; --line:#9cd4cd; --coral:#f16d61; --gold:#efbb62; --lav:#b9a7e3; --aqua:#83cfc8; --panel:rgba(8, 28, 38, .78); margin:0; color:var(--ink); background:var(--night); font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; overflow-x:clip; isolation:isolate; }
#kelvin-demo, #kelvin-demo *, #kelvin-demo *::before, #kelvin-demo *::after { box-sizing:border-box; }
#kelvin-demo main { position:relative; z-index:1; }
.demo-nav { position:fixed; z-index:20; inset:0 0 auto; height:56px; padding:19px 28px; display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.09em; color:var(--muted); border-bottom:1px solid rgba(199,226,218,.15); background:linear-gradient(to bottom, rgba(7,28,38,.9), rgba(7,28,38,0)); pointer-events:none; }
.demo-nav a { color:var(--ink); text-decoration:none; pointer-events:auto; }
.demo-scene { min-height:180vh; position:relative; }
.demo-scene--intro { height:385vh; min-height:0; }
.demo-sticky { height:100vh; position:sticky; top:0; overflow:hidden; display:grid; place-items:center; z-index:1; }
.demo-sticky--intro { --dive:0; isolation:isolate; background:transparent; }
.demo-water-fill { position:fixed; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.demo-water-fill path { fill:url(#intro-water-gradient); opacity:.9; }
.demo-sticky--intro .demo-chart-shell { z-index:1; will-change:transform, opacity; }
.demo-intro-waves { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:hidden; will-change:transform, opacity; }
.intro-wave-line { fill:none; stroke-width:3; stroke-linecap:round; opacity:.9; filter:drop-shadow(0 2px 9px rgba(5, 24, 32, .38)); }
.intro-wave-line--coral { stroke:var(--coral); }
.intro-wave-line--aqua { stroke:var(--aqua); }
.intro-wave-line--lavender { stroke:var(--lav); }
.intro-wave-line--gold { stroke:var(--gold); }
.demo-chart-shell { position:absolute; inset:0; padding:88px 4vw 42px; }
.demo-chart-shell--intro { padding:44px 3vw 26px; opacity:.95; }
.is-scroll-ready .demo-chart-shell--calendar,
.is-scroll-ready .demo-chart-shell--focus,
.is-scroll-ready .demo-chart-shell--satellite { opacity:0; transform:translateY(32px) scale(.987); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.is-scroll-ready .demo-chart-shell--calendar.is-revealed,
.is-scroll-ready .demo-chart-shell--focus.is-revealed,
.is-scroll-ready .demo-chart-shell--satellite.is-revealed { opacity:1; transform:none; }
.demo-chart-kicker { position:absolute; top:72px; left:4vw; color:var(--muted); font-size:13px; letter-spacing:.1em; z-index:2; }
.demo-chart-shell--intro .demo-chart-kicker { top:88px; }
#kelvin-demo h1, #kelvin-demo h2 { font-family:Georgia, serif; font-weight:600; letter-spacing:-.045em; margin:0; }
#kelvin-demo h1 { max-width:820px; font-size:4.2em; line-height:1; }
#kelvin-demo h2 { font-size:clamp(38px, 5.5vw, 82px); line-height:.97; position:absolute; left:4vw; top:99px; z-index:2; }
#kelvin-demo .demo-chart-shell h3 { margin:0; color:var(--ink); font-family:Georgia, serif; font-size:2.0em; font-weight:600; letter-spacing:-.045em; line-height:1.1; }
.demo-intro-heading { opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.demo-page[data-scene="lines"] .demo-intro-heading { opacity:1; transform:none; }
#kelvin-demo svg { width:100%; height:100%; display:block; overflow:visible; }
.demo-story-step { min-height:180vh; position:relative; z-index:3; display:flex; justify-content:center; align-items:center; padding:10vh 22px; pointer-events:none; }
.demo-scene--intro .demo-story-step--hero { position:absolute; inset:0 0 auto; min-height:100vh; height:100vh; }
.demo-scene--intro .demo-story-step--hero + .demo-story-step { min-height:285vh; align-items:flex-start; padding-top:28vh; }
.demo-scene:not(.demo-scene--intro) .demo-story-step { min-height:115vh; }
.demo-story-step--detail { align-items:flex-start; padding-top:24vh; }
.demo-story-card { width:min(620px, 90vw); padding:32px 36px; text-align:center; line-height:1.65; font-size:16px; color:#e4e9e2; background:var(--panel); backdrop-filter:blur(10px); box-shadow:0 14px 50px rgba(0,0,0,.22); }
.demo-story-card p { margin:0 0 15px; max-width: 100%; }
.demo-story-card a {text-decoration:none; color:#b9a7e3; font-weight:700; pointer-events: all;}
.demo-story-card p:last-child { margin-bottom:0; }
.demo-story-card--hero { width:min(920px, 92vw); position:relative; isolation:isolate; padding:clamp(28px, 5vw, 64px); background:transparent; box-shadow:none; }
.demo-story-card--hero::before { content:""; position:absolute; z-index:-1; inset:0; border:0px solid rgba(182,218,208,.35); background:rgba(8,28,38,.5); backdrop-filter:blur(10px); box-shadow:0 14px 50px rgba(0,0,0,.22); }
.demo-story-card--hero > * { position:relative; opacity:1; }
.demo-story-card--detail { max-width:510px; }
.demo-scene--intro .demo-story-step { z-index:4; }
.demo-story-card--hero h1 { margin:0 auto; }
.demo-eyebrow { margin:0 0 15px; color:var(--aqua); letter-spacing:.14em; font-size:12px; }
.demo-deck { font-size:clamp(14px,1.5vw,21px); line-height:1.55; max-width:540px; color:#d5dfd9; margin:24px 0; }
.demo-scroll-hint { font-size:11px; letter-spacing:.08em; margin-top:50px; color:var(--muted); }
.demo-scroll-hint span { margin-left:9px; color:var(--coral); font-size:20px; vertical-align:middle; }
.demo-card-number { color:var(--coral); font-size:11px; letter-spacing:.14em; }
.demo-muted { color:#aebfbc; font-size:11px; }
.demo-loading { position:fixed; z-index:40; right:24px; bottom:20px; padding:11px 14px; color:#dbe7de; background:#102d39; border:1px solid rgba(156,212,205,.3); font-size:11px; transition:opacity .4s; }
.demo-loading span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--coral); margin-right:8px; animation:pulse 1s infinite alternate; }
.demo-loading.is-done { opacity:0; pointer-events:none; }
@keyframes pulse { to { opacity:.25; transform:scale(.65); } }
#kelvin-demo .axis text, #kelvin-demo .grid text { fill:var(--muted); font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size:11px; }
#kelvin-demo .axis path, #kelvin-demo .axis line { stroke:rgba(214,232,224,.35); }
#kelvin-demo .grid line { stroke:rgba(197,225,218,.14); }
#kelvin-demo .chart-label { fill:#dbe8df; font-size:12px; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
#kelvin-demo .chart-label--muted { fill:#8fa7a8; }
#kelvin-demo .station-rule { stroke:rgba(197,225,218,.16); stroke-dasharray:2 5; }
#kelvin-demo .focus-pointer { stroke:#f4d692; stroke-width:1.5; }
#kelvin-demo .focus-pointer-label { fill:#f4d692; font-size:11px; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
@media (max-width:700px) {
  #kelvin-demo .demo-nav { padding:18px; font-size:10px; }
  #kelvin-demo .demo-nav span { display:none; }
  #kelvin-demo .demo-scene { min-height:150vh; }
  #kelvin-demo .demo-scene--intro { height:340vh; }
  #kelvin-demo .demo-scene--intro .demo-story-step--hero + .demo-story-step { min-height:240vh; padding-top:24vh; }
  #kelvin-demo .demo-chart-shell { padding:76px 10px 18px; }
  #kelvin-demo .demo-chart-shell--intro { padding:32px 8px 16px; }
  #kelvin-demo .demo-chart-kicker { left:14px; right:14px; top:60px; font-size:12px; letter-spacing:.08em; text-align:center; }
  #kelvin-demo .demo-chart-shell--intro .demo-chart-kicker { top:70px; left:14px; right:14px; }
  #kelvin-demo h1 { font-size:clamp(40px, 12vw, 58px); }
  #kelvin-demo h2 { left:18px; top:90px; font-size:clamp(34px, 11vw, 48px); }
  #kelvin-demo .demo-chart-shell h3 { max-width:94%; margin-left:auto; margin-right:auto; font-size:clamp(27px, 8vw, 38px); line-height:1.02; text-align:center; }
  #kelvin-demo .demo-story-card { width:calc(100% - 28px); padding:24px 20px; font-size:14px; line-height:1.6; }
  #kelvin-demo .demo-story-card--hero { padding:28px 22px; }
  #kelvin-demo .demo-deck { margin:18px 0; font-size:15px; }
  #kelvin-demo .demo-scroll-hint { margin-top:30px; }
  #kelvin-demo .axis text, #kelvin-demo .grid text { font-size:9px; }
  #kelvin-demo .chart-label { font-size:10px; }
  #kelvin-demo .focus-pointer-label { font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-scroll-ready .demo-chart-shell--calendar,
  .is-scroll-ready .demo-chart-shell--focus,
  .is-scroll-ready .demo-chart-shell--satellite { transition:none; transform:none; }
}