/* Albastrul care rămâne. One fixed stage paints the world (full screen on desktop, the top 40% on phones);
   the story scrolls past it in narrow cards. The stage keeps its physics colours in both themes; the theme
   switches the cards, the bar and the text. */
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/bodoni-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/bodoni-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2")}

:root{
  --abyss:#03060d;--scene:#03060d;
  --bar:#03060d;--card:rgba(6,11,24,.9);--card-on:rgba(6,11,24,.94);
  --ink:#edf2fd;--dim:#b4c2df;--line:rgba(150,185,255,.18);--line-on:rgba(150,185,255,.42);
  --accent:#9cc3ff;--word:#7fb2ff;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --to-top-bg:#060b18;--to-top-fg:#dfe8fb;
  --vh:1vh;--bar-h:44px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bar:#f6f8fd;--card:rgba(247,249,254,.93);--card-on:rgba(250,251,255,.97);
  --ink:#0c1527;--dim:#36435d;--line:rgba(20,40,90,.16);--line-on:rgba(20,40,90,.38);
  --accent:#1b3fae;--word:#2456d6;--to-top-bg:#f6f8fd;--to-top-fg:#0c1527;color-scheme:light}}
:root[data-theme="light"]{
  --bar:#f6f8fd;--card:rgba(247,249,254,.93);--card-on:rgba(250,251,255,.97);
  --ink:#0c1527;--dim:#36435d;--line:rgba(20,40,90,.16);--line-on:rgba(20,40,90,.38);
  --accent:#1b3fae;--word:#2456d6;--to-top-bg:#f6f8fd;--to-top-fg:#0c1527;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{background:var(--abyss)}
body{margin:0;background:var(--scene);color:var(--ink);font:400 1.0625rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none!important}
svg[hidden]{display:none}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--card-on);color:var(--ink);padding:8px 12px}
.skip-link:focus{left:12px}

/* topbar: slim, the scene's colour */
.topbar{position:sticky;top:var(--browser-safe-top,env(safe-area-inset-top,0px));z-index:20;height:var(--bar-h);display:flex;align-items:center;gap:12px;
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));
  background:var(--bar);border-bottom:1px solid var(--line);font:500 .84rem/1 var(--sans)}
body::before{content:"";position:fixed;inset:0 0 auto;height:var(--browser-safe-top,env(safe-area-inset-top,0px));z-index:21;background:var(--bar)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-mark{color:var(--word);flex:none}
.spacer{flex:1}
.chip{color:var(--dim);text-decoration:none;font:500 .74rem/1 var(--mono);letter-spacing:.08em;padding:6px 7px;border-radius:3px;min-height:28px;display:inline-flex;align-items:center}
.chip[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent)}
.icon-btn{background:none;border:1px solid var(--line);color:var(--ink);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.progress{position:fixed;top:calc(var(--browser-safe-top,env(safe-area-inset-top,0px)) + var(--bar-h));left:0;right:0;height:2px;z-index:19;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--word))}

/* rail */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .4s}
.past-hero .rail{opacity:1}
.rail a{position:relative;display:block;width:14px;height:14px}
.rail .dot{position:absolute;inset:5px;border-radius:50%;background:var(--dim);opacity:.6}
.rail a[aria-current] .dot{background:var(--accent);inset:3px;opacity:1}
.rail-label{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .78rem var(--sans);color:var(--ink);background:var(--card-on);border:1px solid var(--line);padding:3px 8px;border-radius:4px;opacity:0;pointer-events:none}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1}
@media (max-width:1180px){.rail{display:none}}

/* stage */
#stage{position:fixed;left:0;right:0;bottom:0;top:calc(var(--browser-safe-top,env(safe-area-inset-top,0px)) + var(--bar-h));z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%,#0b2a63 0%,#03060d 70%)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{position:absolute;right:max(76px,calc(env(safe-area-inset-right,0px) + 76px));bottom:calc(22px + env(safe-area-inset-bottom,0px));
  width:min(360px,30vw);font:400 .6875rem/1.35 var(--mono);color:#c4d0ea;letter-spacing:.04em;transition:opacity .6s ease;
  background:rgba(3,6,13,.86);padding:8px 10px 7px;border-radius:4px;opacity:0}
#hud .row{display:flex;justify-content:space-between;gap:12px}
#hud .t{color:#eef3fd;text-transform:uppercase;letter-spacing:.12em}
#hud canvas{display:block;width:100%;height:54px;margin-block:6px 3px}
#hud .lo{margin-top:4px}
#hud .sw{display:inline-block;width:.8em;height:.8em;vertical-align:-.08em;border:1px solid rgba(200,215,255,.4);background:var(--scene);margin-right:.4em}

/* story */
main{position:relative;z-index:1;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));outline:none}
.col{width:min(31rem,40vw);margin-left:max(0px,calc(6vw - 16px))}
.hero{padding-block:calc(var(--vh)*12) calc(var(--vh)*26)}
.kicker{font:500 .75rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#c4d0ea;margin:0}
.word{font:italic 400 clamp(6rem,17vw,16rem)/.85 var(--serif);margin:.12em 0 .1em -.04em;letter-spacing:-.035em;color:#7fb2ff;text-shadow:0 0 .35em rgba(70,130,255,.35)}
.hero h1{font:400 clamp(1.55rem,2.6vw,2.2rem)/1.15 var(--serif);margin:0 0 1.2rem;text-wrap:balance;color:#f0f4fd}
.hero .deck{max-width:31rem;margin:0 0 1rem;color:#e3eafa}
.hero .hint{font:400 .78rem/1.55 var(--mono);color:#c4d0ea;letter-spacing:.03em;margin-top:2rem}

.scene{padding-block:calc(var(--vh)*2) calc(var(--vh)*8)}
.step{padding-block:calc(var(--vh)*30)}
.step:first-child{padding-top:calc(var(--vh)*10)}
.card{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:1.35rem 1.5rem 1.4rem;transition:border-color .4s ease,background-color .4s ease}
.step.on .card{border-color:var(--line-on);background:var(--card-on)}
.card p{margin:0 0 .8rem}
.card p:last-child{margin-bottom:0}
.chap{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .5rem}
.chap .n{font:500 .75rem/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.chap .cn{font:italic 400 1.9rem/1 var(--serif)}
.card h2{font:500 1.45rem/1.2 var(--serif);margin:0 0 .6rem;text-wrap:balance}
.card h3{font:500 1.3rem/1.22 var(--serif);margin:0 0 .55rem;text-wrap:balance}
.anchor{opacity:0;margin-left:.35em;font:400 .8em var(--sans);text-decoration:none;color:var(--dim)}
h2:hover .anchor,h3:hover .anchor,.anchor:focus-visible{opacity:1}
.big{font:400 clamp(2.4rem,5vw,3.4rem)/1 var(--serif);font-variant-numeric:lining-nums;color:var(--accent);display:block;margin:.1rem 0 .5rem}
.note{font:400 .84rem/1.5 var(--mono);color:var(--dim);letter-spacing:.01em}
em.g{font-style:normal;color:var(--accent)}
.live{font-family:var(--mono);font-size:.92em;color:var(--accent);font-variant-numeric:tabular-nums}

.coda{padding-block:calc(var(--vh)*24) calc(var(--vh)*10);display:flex;flex-direction:column;gap:3rem}
.coda .last{font:italic 400 clamp(1.6rem,3vw,2.3rem)/1.2 var(--serif);margin:0 0 1.4rem;text-wrap:balance}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share-label{font:500 .8rem var(--sans);color:var(--dim)}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.sbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;text-decoration:none}
.sbtn:hover,.sbtn:focus-visible{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){.sbtn{width:44px;height:44px}}
.share-msg{flex-basis:100%;margin:0;font:400 .8rem var(--sans);color:var(--dim);min-height:1.2em}
.method h2{font:500 1.35rem/1.2 var(--serif);margin:0 0 .8rem}
.method h3{font:500 .8rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:1.6rem 0 .8rem}
.method p{font-size:.95rem}
.sources{margin:0;padding-left:1.2rem;font-size:.86rem;line-height:1.5;color:var(--dim)}
.sources li{margin-bottom:.45rem}
.site-footer{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:400 .82rem var(--sans);color:#c4d0ea;padding:1rem 0 4rem}
.site-footer a{color:#dce6fb}

@media (max-width:899px){
  #stage{bottom:auto;height:calc(var(--vh)*40);z-index:2;border-bottom:1px solid rgba(150,185,255,.25)}
  #hud{left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:6px;width:auto;font-size:.625rem;padding:5px 8px 4px}
  #hud canvas{height:26px;margin-block:3px 1px}
  #hud .ax,#hud .lo{display:none}
  .col{width:auto;margin:0}
  main{padding-top:calc(var(--vh)*40)}
  .hero{padding-block:calc(var(--vh)*6) calc(var(--vh)*14)}
  .word{font-size:clamp(4.6rem,24vw,8rem)}
  .step{padding-block:calc(var(--vh)*16)}
  .step:first-child{padding-top:calc(var(--vh)*6)}
  body{font-size:1rem}
  .brand span{max-width:42vw}
}
/* the story cards keep the night look over the scenes in both themes; the light theme changes the bar, the method and the sources */
.scene .card,.coda .card{--card:rgba(6,11,24,.9);--card-on:rgba(6,11,24,.94);--ink:#edf2fd;--dim:#b4c2df;--line:rgba(150,185,255,.18);--line-on:rgba(150,185,255,.42);--accent:#9cc3ff;color:var(--ink)}
@media (max-width:899px){#hud{top:6px;bottom:auto}}
@media (prefers-reduced-motion:reduce){.card,.rail,#hud{transition:none}}
@media print{.topbar,.rail,.progress,.share,#stage{display:none}.step{padding-block:1rem}}