:root {
  color-scheme: light;
  --page: #f4f4ee;
  --surface: #fffef8;
  --ink: #202a24;
  --muted: #737c73;
  --line: rgba(32, 55, 42, .13);
  --accent: #214b39;
  --accent-soft: #b7d89b;
  --scene-paper: #f1f0e8;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Inter", system-ui, sans-serif;
  --display: "Newsreader", Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #151b17;
  --surface: #1c241f;
  --ink: #eef1e9;
  --muted: #a1ada1;
  --line: rgba(220, 234, 216, .13);
  --accent: #b9d999;
  --accent-soft: #b9d999;
}
:root[data-theme="dark"] .header-link,
:root[data-theme="dark"] .outro-link { color: #1d2b22; }

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--page); background: var(--accent-soft); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.skip-link { position: fixed; z-index: 40; left: 1rem; top: 1rem; padding: .75rem 1rem; color: #fff; background: #214b39; }
.skip-link:not(:focus) { clip: rect(0, 0, 0, 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.site-header { position: absolute; z-index: 10; inset: 0 0 auto; min-height: 6.1rem; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 1.5rem; padding: 1.2rem max(5.5vw, calc((100vw - 1460px) / 2)); border-bottom: 1px solid var(--line); background: var(--page); }
.brand { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; color: var(--ink); font-size: 1.25rem; font-weight: 750; letter-spacing: -.065em; }
.brand-light { color: var(--muted); font-weight: 500; }
.brand-mark { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: .62rem; background: var(--accent); color: #fff; }
:root[data-theme="dark"] .brand-mark { color: #1d2b22; }
.brand-mark svg { display: block; width: 1.3rem; height: 1.3rem; }
.header-nav, .header-actions { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.4vw, 2.4rem); color: var(--muted); font-size: .8rem; }
.header-nav a, .site-footer a { transition: color .2s ease; }
.header-nav a:hover, .site-footer a:hover { color: var(--accent); }
.header-actions { justify-content: flex-end; gap: 1.4rem; }
.header-login { display: none; color: var(--muted); white-space: nowrap; }
.header-link { display: inline-flex; align-items: center; gap: 1.1rem; padding: .9rem 1.05rem; border: 1px solid var(--accent); border-radius: .18rem; background: var(--accent); color: #f4f4ee; font-size: .76rem; font-weight: 650; transition: background .2s, color .2s; }
.header-link:hover { color: var(--accent); background: transparent; }
.header-link span { font-size: 1rem; }
.theme-toggle { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font: 1.15rem var(--sans); cursor: pointer; transition: border-color .2s, color .2s; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

.experience { position: relative; min-height: 2400vh; overflow: visible; background: #c6e3f1; }
.pin-stage { position: relative; z-index: 1; height: 100svh; min-height: 0; overflow: hidden; background: #c6e3f1; }
.scene { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #68b4df 0%, #d9ecf6 62%, #9bcddd 100%); transition: background 1.8s ease; }
.scene.is-dawn { background: linear-gradient(180deg, #79bbdf 0%, #daedf5 45%, #f6e6c8 65%, #55aec3 66%, #238da8 100%); }
#hub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; backface-visibility: hidden; transform: translateZ(0); }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(25, 52, 72, .04), transparent 35%, rgba(25, 52, 72, .025)), linear-gradient(0deg, rgba(25, 52, 72, .06), transparent 16%, transparent 82%, rgba(25, 52, 72, .035)); transition: opacity 1.4s ease; }
.scene.is-dawn .scene-vignette { opacity: .58; }
.scene-grid { display: none; }
.scene-label { position: absolute; z-index: 2; top: 7.2rem; right: 5.5vw; display: flex; align-items: center; gap: 1.2rem; color: rgba(242, 243, 235, .76); font: 500 .55rem var(--mono); letter-spacing: .13em; }
.scene-mark { padding-left: 1rem; border-left: 1px solid rgba(242, 243, 235, .35); color: #d8e7c3; }
.scene-readout { position: absolute; z-index: 2; right: 5.5vw; bottom: 17%; display: flex; align-items: center; gap: .75rem; color: var(--scene-paper); font: .62rem var(--mono); letter-spacing: .04em; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.scene-readout, .scene-label--top { display: none; }
.readout-line { width: 24px; height: 1px; background: #c8d8ac; transform-origin: right; }
.scene-footer { position: absolute; z-index: 2; right: 5.5vw; bottom: 1.5rem; left: 5.5vw; display: flex; justify-content: flex-end; color: rgba(241, 241, 233, .48); font: .48rem var(--mono); letter-spacing: .12em; }
.scene-footer > span:first-child, #fps-note { display: none; }
.render-debug #fps-note { display: inline; }
.scene-footer-actions { display: inline-flex; align-items: center; gap: .75rem; text-align: right; }
.motion-toggle { padding: .45rem .65rem; border: 1px solid rgba(241, 241, 233, .38); border-radius: .65rem; background: rgba(23, 36, 31, .82); color: var(--scene-paper); font: inherit; letter-spacing: inherit; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
#sun-flash { position: absolute; z-index: 5; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 43%, #fffdf1 0%, #fff4d9 38%, #eae9d9 100%); will-change: opacity; }
.progress-rail { display: none; }
.progress-rail span { display: block; width: 1px; height: 100%; background: #d6e5c2; transform: scaleY(.04); transform-origin: top; will-change: transform; }
.story-ui { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.story-topline, .story-panels { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; }
.chapter-nav { position: absolute; right: clamp(.45rem, 1.45vw, 1.35rem); top: 50%; display: grid; gap: 0; width: 1.65rem; padding: .42rem .2rem; border: 1px solid rgba(239, 242, 231, .18); border-radius: 2rem; background: rgba(19, 35, 28, .34); backdrop-filter: blur(8px); transform: translateY(-50%); pointer-events: auto; }
.chapter-dot { display: flex; align-items: center; justify-content: center; width: 1.18rem; height: 1.28rem; color: rgba(237, 241, 232, .57); font: .52rem var(--mono); }
.chapter-dot::after { content: ""; width: 3px; height: 3px; border-radius: 3px; background: rgba(237, 241, 232, .55); transition: height .2s ease, background .2s ease; }
.chapter-dot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chapter-dot:hover::after, .chapter-dot:focus-visible::after { background: #eef4e8; height: 9px; }
.chapter-dot.is-active::after { background: #d7e7c1; height: 13px; box-shadow: 0 0 8px rgba(215,231,193,.45); }

/* Click surfaces track the physical monitor. The lettering is rendered in 3D. */
.workspace-actions { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.workspace-actions[hidden], .world-action[hidden], .scene-fallback[hidden] { display: none !important; }
.world-action { position: absolute; left: 0; top: 0; display: block; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.world-action:focus-visible { outline: none; background: rgba(220,242,186,.1); box-shadow: inset 0 0 0 3px #ebf3db; }
.world-action-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.scene-fallback { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; padding: max(2rem,10vw); background: var(--page); }
.scene-fallback h1 { max-width: 40rem; font: 400 clamp(2rem,5vw,4rem)/1.1 var(--display); }
.scene-fallback a { color: var(--accent); text-decoration: underline; text-underline-offset: .3rem; }
.scene-unavailable .experience { min-height: 100svh; }
.scene-unavailable .chapter-nav { display: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto; padding-inline: 1.5rem; }
  .header-nav { display: none; }
  .header-login { display: inline; }
  .access-grid { grid-template-columns: 1fr; padding: 1.3rem 0 2rem; }
  .access-grid article, .access-grid article:first-child, .access-grid article:last-child { min-height: 0; padding: 1.65rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .access-grid article:last-child { border-bottom: 0; }
  .access-explainer { grid-template-columns: 1fr; gap: 1.3rem; }
}
@media (max-width: 760px) {
  .site-header { min-height: 5rem; grid-template-columns: 1fr auto; padding: .8rem 1.1rem; }
  .header-login { font-size: .7rem; }
  .header-actions { gap: .65rem; }
  .brand { font-size: .94rem; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
  .header-link { padding: .75rem .8rem; font-size: .68rem; }
  .theme-toggle { width: 2.35rem; height: 2.35rem; }
  .pin-stage { min-height: 0; }
  .scene-label { top: 6rem; right: 1.2rem; max-width: 60vw; font-size: .43rem; }
  .scene-label .eyebrow { max-width: 28vw; }
  .scene-readout { right: 1.2rem; bottom: 7rem; font-size: .48rem; }
  .scene-footer { right: 1.1rem; bottom: 1rem; left: 1.1rem; }
  .chapter-nav { right: .35rem; width: 1.45rem; padding-inline: .12rem; }
  .chapter-dot { width: 1.1rem; height: 1.2rem; }
  .outro { min-height: 70vh; padding: 6rem 1.25rem 1.5rem; }
  .outro-main { align-items: flex-start; flex-direction: column; padding: 3.2rem 0 4.2rem; gap: 2.2rem; }
  .outro h2 { font-size: clamp(3.3rem, 13vw, 5.3rem); }
  .outro-description { font-size: .96rem; }
  .access-grid { grid-template-columns: 1fr; padding: 1.3rem 0 2rem; }
  .access-grid article, .access-grid article:first-child, .access-grid article:last-child { min-height: 0; padding: 1.65rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .access-grid article:last-child { border-bottom: 0; }
  .access-grid h3 { margin-top: .95rem; }
  .access-explainer { grid-template-columns: 1fr; gap: 1.3rem; }
  .site-footer { align-items: flex-start; flex-wrap: wrap; font-size: .43rem; }
  .site-footer > span { order: 3; flex-basis: 100%; }
}
@media (max-width: 380px) {
  .header-link { gap: .55rem; font-size: .62rem; }
  .scene-label { font-size: .39rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Compact controls: a small closed handle, generous targets only when opened. */
.journey-controls {position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;pointer-events:auto;z-index:8;color:#f4f7ef;}
.journey-control {min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(238,248,238,.35);border-radius:16px;background:rgba(21,42,33,.88);box-shadow:0 3px 12px #10251f24,inset 0 1px #ffffff20;backdrop-filter:blur(12px);color:inherit;font:500 12px var(--sans);cursor:pointer;touch-action:manipulation;}
.journey-control:hover {background:#254e3e;}
.chapter-nav {inset:auto 0 54px auto;transform:none;width:min(280px,calc(100vw - 32px));max-height:min(520px,calc(100svh - 190px));overflow:auto;overscroll-behavior:contain;display:grid;gap:2px;padding:8px;border-radius:20px;background:rgba(20,38,30,.96);border:1px solid #d7e7d54d;box-shadow:0 12px 40px #14251c40;backdrop-filter:blur(16px);}
.chapter-nav[hidden] {display:none;}
.chapter-dot {position:relative;display:flex;justify-content:flex-start;gap:14px;width:100%;min-height:44px;height:auto;padding:9px 12px;border-radius:12px;color:#e5eee2;font:500 13px/1.35 var(--sans);touch-action:manipulation;}
.chapter-dot::after {display:none;}
.chapter-dot span {position:static;clip-path:none;width:auto;height:auto;overflow:visible;font:500 11px var(--mono);opacity:.65;}
.chapter-dot:is(:hover,:focus-visible,.is-active) {background:#b9d99926;color:#fff;}
.chapter-dot.is-active span {color:#d6efb9;opacity:1;}
.journey-control:focus-visible,.chapter-dot:focus-visible {outline:2px solid #d6efb9;outline-offset:3px;}
.scene-footer {bottom:76px;color:#1e3f33;pointer-events:none;}
.scene-footer .motion-toggle {pointer-events:auto;min-height:44px;}
.graphics-notice {position:absolute;z-index:10;inset:auto 16px 76px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;border-radius:18px;background:#183b2ff2;color:#fff;font:14px var(--sans);}
.graphics-notice[hidden] {display:none;}
.graphics-notice button,.scene-fallback button {min-height:44px;padding:10px 16px;border:1px solid #a9c797;border-radius:12px;background:#b9d999;color:#182b20;font:600 13px var(--sans);cursor:pointer;}
.page-recorrido .xinix-header {background:var(--xh-bg);}
.page-recorrido .xinix-header .lp-header-inner {background:color-mix(in srgb,var(--xh-bg) 92%,transparent);}
.reading-mode .experience {min-height:0;background:var(--page);}
.reading-mode .pin-stage {height:auto;overflow:visible;background:var(--page);}
.reading-mode .scene,.reading-mode #sun-flash,.reading-mode .chapter-nav,.reading-mode #chapter-toggle,.reading-mode .workspace-actions {display:none!important;}
.reading-mode .story-ui {position:relative;pointer-events:auto;}
.reading-mode .story-panels {position:static;width:min(760px,calc(100% - 40px));height:auto;margin:0 auto;padding:80px 0 100px;overflow:visible;clip:auto;clip-path:none;white-space:normal;}
.reading-mode .story-panel {padding:32px 0;border-bottom:1px solid var(--line);}
.reading-mode .story-panel h1,.reading-mode .story-panel h2 {margin:16px 0;font:400 clamp(32px,5vw,56px)/1.08 var(--display);letter-spacing:-.025em;}
.reading-mode .story-panel p {color:var(--muted);font:16px/1.8 var(--sans);}
.reading-mode .chapter-tag {color:var(--accent);font:11px/1.7 var(--mono);letter-spacing:.05em;}
.reading-mode .chapter-tag span+span {margin-left:12px;}
.reading-mode .scroll-cue,.reading-mode .data-cards,.reading-mode .core-status {display:none;}
.reading-mode .journey-controls {position:fixed;bottom:16px;}
.reading-mode .scene-fallback {position:relative;padding:20px;gap:12px;border-bottom:1px solid var(--line);}
.no-script {max-width:760px;margin:40px auto;padding:24px;line-height:1.8;}
@media(max-width:600px){.journey-controls{right:12px;bottom:max(12px,env(safe-area-inset-bottom));}.journey-control{padding:0 12px;font-size:11px;}.scene-footer{left:12px;right:12px;bottom:70px;} .reading-mode .story-panels{padding-top:40px;}}
@media(prefers-reduced-transparency:reduce){.journey-control,.chapter-nav{backdrop-filter:none;background:#18372a;}}

.page-recorrido .pin-stage {height:calc(100svh - var(--journey-header-height,94px));}
.reading-mode .page-recorrido .pin-stage {height:auto;}

.reading-actions {display:none;}
.reading-mode .reading-actions {display:flex;flex-wrap:wrap;gap:12px;width:min(760px,calc(100% - 40px));margin:0 auto;padding-bottom:100px;}
.reading-actions a {min-height:44px;display:inline-flex;align-items:center;padding:12px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--accent);font:600 14px var(--sans);}
.render-debug .scene-footer {left:16px;right:auto;max-width:min(760px,calc(100% - 32px));background:#142d25ed;border:1px solid #e6f2df33;border-radius:12px;padding:8px 12px;color:#eef5e8;font-size:10px;line-height:1.5;letter-spacing:0;}
.render-debug .scene-footer-actions {text-align:left;flex-wrap:wrap;}

/* Keep the cinematic view free of floating corner controls. The recovery
   notice and the explicit reading URL retain the accessible alternative. */
html:not(.reading-mode) .journey-controls {display:none;}
.reading-mode .journey-controls {position:static;justify-content:center;padding:0 20px 32px;}
#motion-toggle {display:none;}