:root{
  --bg:#07110f; --paper:#f3f0e7; --ink:#eaf4ef; --muted:#9eb0a9;
  --panel:rgba(9,20,17,.82); --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif}
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0 34%,rgba(0,0,0,.46) 100%)}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent}
button,a{font:inherit}
button{color:inherit}
.topbar{position:fixed;z-index:10;left:0;right:0;top:0;height:76px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(7,17,15,.7),rgba(7,17,15,.18));backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em}
.brand-mark{font-size:23px}
.view-switch{position:absolute;left:50%;transform:translateX(-50%);padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035)}
.view-btn,.about-btn,.reset-btn,.smile-btn{border:0;background:transparent;cursor:pointer}
.view-btn{padding:8px 19px;border-radius:999px;color:var(--muted);font-size:12px}
.view-btn.active{background:var(--paper);color:#13201c}
.top-actions{display:flex;align-items:center;gap:17px}
.smile-btn{position:relative;display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#bdcec6;background:rgba(255,255,255,.018);transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.smile-btn:hover,.smile-btn:focus-visible{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.32);color:#fff;transform:translateY(-1px);box-shadow:0 0 18px rgba(178,255,220,.08);outline:0}
.smile-btn.active{background:var(--paper);border-color:var(--paper);color:#13201c;box-shadow:0 0 20px rgba(220,255,238,.14)}
.smile-icon{font-size:17px;line-height:1;transform:translateY(-.5px)}
.smile-btn::after{content:attr(data-tooltip);position:absolute;z-index:20;right:-8px;top:calc(100% + 10px);width:max-content;max-width:190px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:rgba(7,17,15,.94);color:#dce8e2;font-size:10px;font-weight:400;line-height:1.2;letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .16s,transform .16s;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.smile-btn:hover::after,.smile-btn:focus-visible::after{opacity:1;transform:none}
.about-btn{color:inherit;text-decoration:none;font-size:12px;border-bottom:1px solid rgba(255,255,255,.4);padding:2px 0}
.hero{position:fixed;z-index:5;top:50%;left:50%;width:min(790px,90vw);transform:translate(-50%,-47%);text-align:center;transition:opacity .8s,transform .8s}
.hero.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-42%)}

/* Keep the opening composition invisible until its web fonts are ready.
   The elements retain their layout, so the first visible frame cannot reflow. */
.fonts-loading .hero{opacity:0;transform:translate(-50%,-45%);pointer-events:none}

.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:10px;color:#b3c8bf;margin:0 0 20px}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(46px,7vw,92px);line-height:.92;letter-spacing:-.055em;margin:0}
h1 .title-thin{font-weight:300}
h1 .title-normal{font-weight:500;font-style:normal;color:#93d7ba}
.intro{max-width:590px;margin:28px auto 0;color:#b5c5be;font-size:14px;line-height:1.65}
.start-btn{margin-top:34px;background:transparent;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:12px 17px 12px 20px;cursor:pointer;transition:.25s}
.start-btn:hover{background:var(--paper);color:#10201a}
.start-btn span{margin-left:14px}
.legend{position:fixed;z-index:8;left:28px;top:98px;width:200px;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateX(-8px);transition:.5s}
.legend.visible{opacity:1;transform:none}
.legend button{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:9px;background:transparent;border:0;padding:5px 6px;color:#b7c7c0;font-size:11px;cursor:pointer;text-align:left;border-radius:8px;transition:opacity .2s,background .2s}
.legend button:hover,.legend button.active{background:rgba(255,255,255,.055)}
.legend button.dim{opacity:.24}
.legend small{font-size:9px;color:#74877e;font-variant-numeric:tabular-nums}
.swatch{width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px currentColor}
.legend .legend-reset{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:7px;padding:9px 6px 7px;border-top:1px solid rgba(255,255,255,.12);border-radius:0;background:linear-gradient(180deg,rgba(7,17,15,.92),rgba(7,17,15,.99));color:#8fa29a;font-size:10px;letter-spacing:.01em;opacity:.48;cursor:default}
.legend .legend-reset.enabled{color:#d7e6df;opacity:1;cursor:pointer}
.legend .legend-reset.enabled:hover{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(7,17,15,.99));color:#fff}
.legend .legend-reset:disabled{pointer-events:none}
.legend-reset-icon{display:grid;place-items:center;width:16px;height:16px;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-size:10px;line-height:1}
.timeline{position:fixed;z-index:9;left:50%;bottom:24px;transform:translateX(-50%);width:min(680px,calc(100vw - 38px));display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(7,17,15,.79);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:.5s}
.timeline.visible{opacity:1;pointer-events:auto}
.play-btn{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);cursor:pointer}
.timeline-main{flex:1;min-width:0}
.timeline-row{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px;font-size:10px;color:#c1cdc8}
#dateLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#countLabel{color:#8fa39a;white-space:nowrap}
input[type=range]{width:100%;accent-color:#dcefe5}
.reset-btn{font-size:10px;color:#aebfb7}
.story-card{position:fixed;z-index:12;right:20px;top:92px;width:min(390px,calc(100vw - 40px));max-height:calc(100vh - 188px);overflow:auto;padding:18px 26px 27px;border:1px solid var(--line);border-radius:22px;background:rgba(9,20,17,.92);backdrop-filter:blur(22px);transform:translateX(calc(100% + 40px));transition:.55s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 70px rgba(0,0,0,.35)}
.story-card.open{transform:none}
.close-card{position:absolute;z-index:2;right:14px;top:10px;width:32px;height:32px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(7,17,15,.72);font-size:22px;line-height:1;cursor:pointer}
.story-image-wrap{width:100%;aspect-ratio:1/1;margin-bottom:20px;border-radius:15px;overflow:hidden;background:rgba(255,255,255,.045)}
.story-image-wrap img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
.story-image-wrap img.loaded{opacity:1}
.story-topic{font-size:9px;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;color:#96cdb5;margin:0}
.story-card h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:29px;font-weight:500;line-height:1.07;margin:10px 0 17px}
dl{margin:18px 0 13px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
dt{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#7f938a}
dd{margin:4px 0 0;font-size:12px;line-height:1.4}
.precision-note{margin:0 0 12px;color:#7f938a;font-size:10px;line-height:1.5}
.story-source{margin:0 0 17px;padding-top:11px;border-top:1px solid rgba(255,255,255,.09);color:#91a49b;font-size:9.5px;line-height:1.5}
.story-card a{display:inline-block;color:#eaf4ef;font-size:12px;text-underline-offset:4px}
.status-pill{position:fixed;z-index:8;right:24px;bottom:24px;max-width:310px;border:1px solid var(--line);background:rgba(9,20,17,.72);padding:9px 12px;border-radius:999px;font-size:9px;color:#9fb1a8;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-pill.error{color:#ff9aa6}
.pulse-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#f4c95d;box-shadow:0 0 0 0 rgba(244,201,93,.6);animation:pulse 2s infinite}
.status-pill.error .pulse-dot{background:#ff6b7a}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(244,201,93,0)}100%{box-shadow:0 0 0 0 rgba(244,201,93,0)}}
.hover-tip{position:fixed;z-index:11;max-width:250px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(7,17,15,.9);backdrop-filter:blur(10px);font-size:10px;line-height:1.35;color:#dce8e2;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.hover-tip.visible{opacity:1;transform:none}
@media(max-width:1050px){
 .status-pill{display:none}
}
@media(max-width:700px){
 .topbar{height:66px;padding:0 16px}.brand span:last-child{display:none}.about-btn{font-size:10px}.top-actions{gap:7px}.smile-btn{width:30px;height:30px}.smile-btn::after{display:none}
 .view-btn{padding:7px 14px}.legend{top:78px;left:8px;width:174px;max-height:42vh;overflow:auto}
 .legend button{font-size:10px;padding:4px}.hero{width:88vw}.intro{font-size:12px}
 .timeline{bottom:12px;padding:11px 12px}.story-card{top:74px;right:10px;width:calc(100vw - 20px);max-height:calc(100vh - 152px)}
 .hover-tip{display:none}
}


/* v15 · contextual copy moved into the left rail */
.hero-hint{margin:14px auto 0;color:#83978e;font-size:10px;letter-spacing:.02em}
.view-context{position:fixed;z-index:8;top:96px;left:28px;width:220px;padding:0 6px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.10);background:transparent;backdrop-filter:none;text-align:left;opacity:0;pointer-events:none;transform:translateX(-8px);transition:opacity .45s,transform .45s}
.view-context.visible{opacity:1;transform:none}
.view-context-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.view-context-copy{margin:0;color:#a9bbb3;font-size:10.5px;line-height:1.5}
.view-context-stat{margin:7px 0 0;color:#71867d;font-size:9px;line-height:1.4;font-variant-numeric:tabular-nums}
.legend{top:192px}
.insight-panel{display:none}
.legend small.topic-count{min-width:28px;text-align:right}
.legend button:focus-visible,.view-btn:focus-visible,.start-btn:focus-visible,.play-btn:focus-visible,.reset-btn:focus-visible,.about-btn:focus-visible,.close-card:focus-visible{outline:1px solid rgba(234,244,239,.8);outline-offset:3px}
.fallback-message{position:fixed;z-index:50;inset:auto 20px 20px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#10201a;color:var(--ink);font-size:13px}
@media(max-height:760px) and (min-width:701px){
 .view-context{top:88px}
 .legend{top:178px;gap:2px}
 .legend button{padding-top:3px;padding-bottom:3px}
}
@media(max-width:1050px){
 .view-context{width:200px}
}
@media(max-width:700px){
 .view-context{top:78px;left:8px;width:174px;padding:0 4px 10px}
 .view-context-copy{font-size:9px;line-height:1.45}
 .view-context-stat{display:none}
 .legend{top:143px}
 .hero-hint{font-size:9px}
}

/* v16 · persistent interaction guidance in the lower-left corner */
.interaction-help{position:fixed;z-index:8;left:28px;bottom:25px;color:#82958c;font-size:9.5px;line-height:1;letter-spacing:.01em;opacity:0;pointer-events:none;transform:translateY(7px);transition:opacity .5s .16s,transform .5s .16s}
.interaction-help.visible{opacity:.88;transform:none}
.interaction-help-desktop{display:flex;flex-direction:column;gap:7px}
.interaction-help p{margin:0}
.interaction-help-desktop p{display:flex;align-items:center;gap:8px}
.interaction-icon{display:grid;place-items:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#a9bbb3;font-size:10px;background:rgba(255,255,255,.018)}
.interaction-icon-dot{font-size:6px;text-shadow:0 0 7px currentColor}
.interaction-help-touch{display:none}
@media(max-width:1050px){
 .interaction-help{left:18px;bottom:20px}
}
@media(max-width:700px){
 .interaction-help{left:12px;bottom:78px;max-width:calc(100vw - 24px);font-size:8.5px}
 .interaction-help-desktop{display:none}
 .interaction-help-touch{display:block;padding:7px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(7,17,15,.58);backdrop-filter:blur(10px);white-space:nowrap}
}


/* v17 · touch-safe point selection and a clear legend instruction */
@media(max-width:700px){
}

/* v21 · publication-readiness, clearer methodology and graceful failure states */
canvas:focus-visible{outline:1px solid rgba(234,244,239,.7);outline-offset:-5px}
.runtime-fallback{position:fixed;z-index:100;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 36px));padding:34px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(9,20,17,.96);color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.5);backdrop-filter:blur(22px)}
.runtime-fallback[hidden]{display:none}
.runtime-fallback h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:500;line-height:1.05;margin:0 0 16px}
.runtime-fallback p:not(.eyebrow){color:#aebfb7;font-size:13px;line-height:1.65}
.runtime-fallback a{display:inline-block;margin-top:10px;color:var(--ink);font-size:12px;text-underline-offset:4px}
.runtime-failed #scene{opacity:.16}
.runtime-failed .hero,.runtime-failed .topbar,.runtime-failed .legend,.runtime-failed .timeline,.runtime-failed .view-context,.runtime-failed .interaction-help,.runtime-failed .status-pill{pointer-events:none;opacity:.12}
.view-context{width:236px}
.legend{top:218px}
@media(max-height:760px) and (min-width:701px){
 .legend{top:202px}
}
@media(max-width:700px){
 .view-context{width:184px}
 .legend{top:160px}
 .runtime-fallback{padding:26px}
 .runtime-fallback h2{font-size:29px}
}

/* v33 · copy, geography and transition-state refinements */