/* timpul-e-creier — a reading room: the stage is always a dark lightbox; the page is paper by day, ink by night. */
:root{
  --bg:#f3efe6; --bg2:#ebe5d8; --ink:#1b1424; --ink2:#4c4458; --ink3:#6d6578; --line:#d7cfbf; --card:#fbf8f1;
  --acc:#a8321f; --gold:#b97a06; --blue:#2559c9; --scar:#ff7a68; --hyp:#8cbcff; --paint:#ffd66e;
  --room:#0b1020; --room2:#121a33; --roomink:#eef0f6; --roomink2:#aab4cc; --roomline:rgba(255,255,255,.12);
  --disp:'Fraunces',Georgia,serif; --serif:'Source Serif 4',Georgia,serif; --ui:'Atkinson Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:44rem; --wide:72rem; color-scheme:light;
}
:root.dark{ --bg:#0d1120; --bg2:#141a2e; --ink:#eef0f6; --ink2:#c2c8d8; --ink3:#9aa3b9; --line:#283049; --card:#151c33; --acc:#ff8a73; --gold:#ffcf4a; --blue:#8cb4ff; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.09rem/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--acc)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:var(--bg);padding:.5rem 1rem}
.skip:focus{left:.5rem}

/* topbar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.6rem;height:3.1rem;padding:0 max(1rem,env(safe-area-inset-left));background:var(--room);color:var(--roomink);font:500 .88rem/1 var(--ui)}
.topbar a{text-decoration:none}
.home{display:flex;align-items:center;gap:.45rem;color:var(--roomink)}
.motif{width:1.35rem;height:1.35rem}
.topnav{display:flex;gap:1.05rem;margin-left:1.2rem;overflow:hidden}
.topnav a{color:var(--roomink2);white-space:nowrap}.topnav a:hover{color:#fff}
.spacer{flex:1}
.chip{border:1px solid var(--roomline);border-radius:99px;padding:.32rem .62rem;color:var(--roomink)}
.icon-btn{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:99px;border:1px solid var(--roomline);background:none;color:var(--roomink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--hyp),var(--scar));transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:900px){.topnav{display:none}}

/* rail */
.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.7rem}
.rail-dot{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;text-decoration:none;color:var(--ink3);font:500 .75rem/1 var(--ui)}
.rail-dot .dot{width:.5rem;height:.5rem;border-radius:99px;background:var(--line);order:2;transition:transform .2s,background .2s}
.rail-dot .rail-label{position:absolute;right:1.4rem;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .2s}
.rail-dot:hover .rail-label{opacity:1}
.rail-dot.on .dot{background:var(--acc);transform:scale(1.35)}
@media (max-width:1180px){.rail{display:none}}

/* hero: the reading room */
.room{background:radial-gradient(120% 90% at 30% 10%,#1a2550 0%,var(--room) 58%);color:var(--roomink);padding:2.2rem 0 2.6rem}
.room a{color:var(--roomink)}
.hero{display:grid;grid-template-columns:minmax(19rem,25rem) minmax(0,1fr);grid-template-areas:'intro stage' 'panel stage';grid-template-rows:auto 1fr;column-gap:2.4rem;max-width:var(--wide);margin:0 auto;padding:0 1.25rem}
.intro{grid-area:intro}.panelcol{grid-area:panel}.stagecol{grid-area:stage}
.kicker{font:600 .8rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--roomink2);margin:0 0 .7rem}
h1{font:420 clamp(1.9rem,3.6vw,2.75rem)/1.08 var(--disp);letter-spacing:-.01em;margin:0 0 1rem;text-wrap:balance}
.deck{font-size:1.06rem;color:#dfe3ee;margin:0 0 1rem}
.shared{border-left:3px solid var(--paint);padding:.2rem 0 .2rem .8rem;margin:0 0 1rem;font:500 1rem/1.45 var(--ui);color:#fff}
.call{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.2rem;font:500 .92rem/1.35 var(--ui)}
.call a.tel{display:inline-flex;align-items:center;gap:.4rem;background:#c8321f;color:#fff;border-radius:99px;padding:.4rem .85rem;font-weight:700;text-decoration:none}
.call a.more{color:var(--roomink2)}
.stepper{display:flex;gap:.4rem;list-style:none;margin:0 0 1rem;padding:0;font:600 .8rem/1 var(--ui)}
.stepper li{display:flex;align-items:center;gap:.4rem;padding:.42rem .7rem;border-radius:99px;border:1px solid var(--roomline);color:var(--roomink2)}
.stepper li b{display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:99px;background:rgba(255,255,255,.08);font-size:.72rem}
.stepper li.on{color:#fff;border-color:var(--paint)}.stepper li.on b{background:var(--paint);color:#1b1424}
.stepper li.done b{background:rgba(255,214,110,.35)}
.panel{font:400 .95rem/1.5 var(--ui);color:#d6dbea}
.panel p{margin:.2rem 0 .7rem}
.panel .hint{color:var(--roomink2);font-size:.9rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:0;border-radius:99px;padding:.6rem 1.05rem;background:var(--paint);color:#1b1424;font:700 .92rem/1 var(--ui);cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--roomink);border:1px solid var(--roomline)}
.btn.small{padding:.42rem .75rem;font-size:.82rem}
.choices{display:flex;gap:.5rem;margin:.4rem 0 .9rem}
.choice{flex:1;border:1px solid var(--roomline);background:rgba(255,255,255,.04);color:#fff;border-radius:.7rem;padding:.75rem .6rem;font:700 .95rem/1.2 var(--ui);cursor:pointer}
.choice[aria-pressed=true]{border-color:var(--paint);background:rgba(255,214,110,.14)}
.range{display:flex;align-items:center;gap:.7rem}
.range input{flex:1;accent-color:var(--paint)}
.range output{min-width:5.6rem;text-align:right;font:700 1rem/1 var(--ui);color:var(--paint)}
#result p{margin:.2rem 0 .65rem}
#result .r-main{font:500 1.06rem/1.45 var(--ui);color:#fff}
#result .saver{color:var(--roomink2);font-size:.88rem}
.layerkeys{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.lk{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--roomline);background:none;color:var(--roomink);border-radius:99px;padding:.3rem .65rem;font:500 .8rem/1 var(--ui);cursor:pointer}
.lk[aria-pressed=false]{opacity:.45}
.sw{display:inline-block;width:.75rem;height:.75rem;border-radius:3px}
.sw.scar{background:var(--scar)}.sw.hyp{background:var(--hyp)}.sw.paint{background:var(--paint)}
.rowbtns{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0}

/* the stage */
.stagecol{min-width:0}
.stagebar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem;font:500 .82rem/1 var(--ui);color:var(--roomink2)}
.segs{display:inline-flex;border:1px solid var(--roomline);border-radius:99px;padding:2px}
.seg{border:0;background:none;color:var(--roomink2);padding:.36rem .7rem;border-radius:99px;font:600 .8rem/1 var(--ui);cursor:pointer}
.seg[aria-pressed=true]{background:rgba(255,255,255,.12);color:#fff}
.seg:disabled{opacity:.3;cursor:not-allowed}
#caseof{margin-left:auto;font-weight:700;color:var(--roomink)}
.stage{position:relative;height:min(72vh,42rem);border-radius:1.4rem;background:radial-gradient(60% 60% at 50% 46%,#151f42 0%,#05070d 100%);overflow:hidden}
.stage canvas#scan{display:block;touch-action:none;outline:none}
.stage canvas.loading{opacity:.35}
.mods{position:absolute;left:.7rem;top:.7rem;display:flex;gap:.4rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(8,11,22,.72);border:1px solid var(--roomline);border-radius:99px;padding:.28rem .4rem .28rem .65rem;font:600 .78rem/1 var(--ui);color:#fff}
.pill button{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:99px;width:1.5rem;height:1.5rem;cursor:pointer;font-size:.85rem}
.ctl{position:absolute;right:.7rem;bottom:.7rem;display:flex;align-items:center;gap:.45rem;background:rgba(8,11,22,.62);border:1px solid var(--roomline);border-radius:.8rem;padding:.4rem .55rem;font:600 .78rem/1 var(--ui);color:var(--roomink2)}
.ctl button{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:.5rem;min-width:1.9rem;height:1.9rem;cursor:pointer}
.ctl button[aria-pressed=true]{background:var(--paint);color:#1b1424}
.ctl input[type=range]{width:5.5rem;accent-color:var(--paint)}
.zbox{position:absolute;left:.7rem;bottom:.7rem;right:auto;display:flex;align-items:center;gap:.45rem;background:rgba(8,11,22,.62);border:1px solid var(--roomline);border-radius:.8rem;padding:.4rem .6rem;font:600 .78rem/1 var(--ui);color:var(--roomink2)}
.zbox input{width:9rem;accent-color:var(--hyp)}
.zbox button{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:.5rem;width:1.8rem;height:1.8rem;cursor:pointer}
#zlab{min-width:4.6rem}
.strip{display:flex;gap:4px;overflow-x:auto;padding:.55rem 0 .2rem;scrollbar-width:thin}
.thumb{position:relative;flex:0 0 auto;width:2.1rem;height:2.5rem;border:1px solid transparent;border-radius:.35rem;background:#05070f;padding:2px;cursor:pointer}
.thumb canvas{width:100%;height:100%;object-fit:contain;opacity:.75}
.thumb.on{border-color:var(--hyp)}.thumb.on canvas{opacity:1}
.thumb i{position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:99px}
.thumb.painted i{background:var(--paint)}
.thumb.scar i{background:var(--scar);box-shadow:-8px 0 0 0 var(--paint)}
.thumb.scar:not(.painted) i{box-shadow:none}
.viewnote{min-height:1.2rem;margin:.35rem 0 0;font:400 .82rem/1.4 var(--ui);color:var(--roomink2)}
.share-wrap{margin-top:.9rem}

/* share row */
.share-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.share-row .lbl{font:600 .82rem/1 var(--ui);margin-right:.2rem}
.sh{display:grid;place-items:center;width:2.15rem;height:2.15rem;border-radius:99px;border:1px solid currentColor;background:none;cursor:pointer;opacity:.85;color:inherit}
.sh svg{width:1rem;height:1rem}
.sh:hover{opacity:1}
.status{min-height:1.1rem;margin:.3rem 0 0;font:400 .8rem/1.3 var(--ui)}

/* body sections */
main{display:block}
.block{padding:3.4rem 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.wide{max-width:var(--wide);margin:0 auto;padding:0 1.25rem}
h2{font:430 clamp(1.5rem,2.6vw,2rem)/1.15 var(--disp);margin:0 0 1rem;position:relative}
h2 .anchor{position:absolute;left:-1.1em;opacity:0;text-decoration:none;color:var(--ink3)}h2:hover .anchor{opacity:1}
h3{font:600 1.05rem/1.3 var(--ui);margin:2rem 0 .6rem}
p{margin:0 0 1rem}
.note{font:400 .84rem/1.45 var(--ui);color:var(--ink3)}
.lead{font:500 1.15rem/1.5 var(--ui)}

/* atlas of 12 */
.atlas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin:1.4rem 0 .6rem}
.atlas-item{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:.8rem;background:var(--room);padding:.55rem .3rem .5rem;cursor:pointer;color:var(--roomink);font:600 .74rem/1.25 var(--ui);text-align:center}
.atlas-item img{width:100%;max-width:7rem;height:auto;aspect-ratio:1/1.15;object-fit:contain}
.atlas-item .v{font-weight:400;color:var(--roomink2)}
.atlas-item.on{border-color:var(--paint);box-shadow:0 0 0 2px var(--paint)}
.atlas-item .bar{width:80%;height:3px;border-radius:9px;background:rgba(140,188,255,.35);position:relative;overflow:hidden}
.atlas-item .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--scar);border-radius:9px}
@media (max-width:760px){.atlas{grid-template-columns:repeat(3,minmax(0,1fr))}}
figcaption{font:400 .84rem/1.45 var(--ui);color:var(--ink3)}

/* map */
.mapfig{margin:1.2rem 0 0}
.search{position:relative;max-width:30rem;margin:0 0 .4rem}
.slab{display:block;font:600 .82rem/1 var(--ui);margin:0 0 .4rem}
.combo{position:relative}
#q{width:100%;font:500 1.05rem/1 var(--ui);padding:.75rem .95rem;border-radius:.7rem;border:1px solid var(--line);background:var(--card);color:var(--ink)}
#sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;list-style:none;margin:0;padding:.3rem;background:var(--card);border:1px solid var(--line);border-radius:.7rem;box-shadow:0 12px 30px rgba(0,0,0,.18);font:400 .95rem/1.3 var(--ui)}
#sugg li{padding:.5rem .6rem;border-radius:.45rem;cursor:pointer}
#sugg li span{color:var(--ink3);font-size:.85rem}
#sugg li[aria-selected=true],#sugg li:hover{background:var(--bg2)}
#sugg li.none{cursor:default;color:var(--ink3)}
.shelp{font:400 .84rem/1.3 var(--ui);color:var(--ink3);margin:.4rem 0 0}
.placebox{background:var(--card);border:1px solid var(--line);border-radius:.9rem;padding:1rem 1.1rem;margin:1rem 0;font:400 .98rem/1.5 var(--ui)}
.placebox .r-main{font-weight:600;font-size:1.08rem}
.placebox p{margin:.1rem 0 .55rem}
.win{display:flex;align-items:center;gap:.7rem;margin:.35rem 0;font:500 .85rem/1.2 var(--ui)}
.wb{flex:0 0 12rem;height:.6rem;border-radius:9px;background:var(--bg2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.wb i{display:block;height:100%;background:linear-gradient(90deg,#8cc4b2,#de8c56,#b04a48)}
.mapwrap{position:relative;border-radius:1rem;overflow:visible}
#map{display:block;cursor:pointer;touch-action:pan-y}
.maploading{position:absolute;inset:0;display:grid;place-items:center;font:500 .9rem/1 var(--ui);color:var(--ink3)}
.tip{position:absolute;z-index:15;pointer-events:none;background:var(--ink);color:var(--bg);font:500 .82rem/1.35 var(--ui);padding:.4rem .6rem;border-radius:.45rem;max-width:16rem}
.tip span{opacity:.75;font-size:.75rem}
.pop{position:absolute;z-index:16;width:17rem;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:.8rem;padding:.75rem .9rem;box-shadow:0 14px 34px rgba(0,0,0,.22);font:400 .9rem/1.4 var(--ui)}
.pop h4{margin:0 1.4rem .35rem 0;font:700 1rem/1.2 var(--ui)}
.pop p{margin:0 0 .4rem}
.pop .x{position:absolute;right:.4rem;top:.35rem;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--ink3)}
.pop.sheet{position:fixed;left:.6rem;right:.6rem;bottom:.6rem;width:auto;top:auto}
.mlegend{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:.8rem 0 0;font:400 .8rem/1.3 var(--ui);color:var(--ink3)}
.mscale{position:relative;flex:0 0 min(22rem,100%)}
.mramp{display:block;height:.7rem;border-radius:9px}
.mrk{position:relative;display:block;height:1rem}.mrk span{position:absolute;top:.2rem;transform:translateX(-50%);font-size:.72rem}
.mkey{display:flex;flex-wrap:wrap;gap:.9rem;font:400 .8rem/1.3 var(--ui);color:var(--ink3);margin:.4rem 0 0}
.mkey i{display:inline-block;width:.8rem;height:.8rem;border-radius:99px;vertical-align:-2px;margin-right:.3rem;border:2px solid var(--bg)}
.mkey .k1{background:var(--ink)}.mkey .k2{background:#2b6cff}.mkey .k3{background:var(--ink);box-shadow:inset 0 0 0 3px var(--bg)}

/* tables, lists */
.tablewrap{overflow-x:auto;margin:.6rem 0 1rem}
table.data{width:100%;border-collapse:collapse;font:400 .9rem/1.35 var(--ui)}
table.data th,table.data td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{font-weight:700;font-size:.8rem;color:var(--ink3)}
.befast{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.befast li{padding:.4rem .2rem;font:400 .92rem/1.4 var(--ui)}
.befast b{display:block;font:500 2.3rem/1 var(--disp);color:var(--acc);margin-bottom:.35rem}
.befast strong{display:block;font-weight:700;margin-bottom:.15rem}
@media (max-width:640px){.befast{grid-template-columns:repeat(2,minmax(0,1fr))}}
.callbig{display:inline-flex;align-items:center;gap:.6rem;background:#c8321f;color:#fff;border-radius:99px;padding:.75rem 1.3rem;font:800 1.2rem/1 var(--ui);text-decoration:none;margin:.4rem 0 1rem}
.callbig:hover{color:#fff}
ul.plain{padding-left:1.1rem}ul.plain li{margin:.3rem 0;font:400 .9rem/1.45 var(--ui)}
footer{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;padding:3rem 1rem 3.4rem;font:400 .82rem/1 var(--ui);color:var(--ink3);border-top:1px solid var(--line);margin-top:3rem}

/* phone: stage on top, text below; stage never under the text */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-areas:'intro' 'stage' 'panel';grid-template-rows:auto;row-gap:.6rem}
  .room{padding-top:1.1rem}
  h1{font-size:1.55rem;margin-bottom:.6rem}
  .deck{font-size:.94rem;margin-bottom:.6rem}
  .kicker{font-size:.7rem;margin-bottom:.4rem}
  .call{margin-bottom:.4rem;font-size:.85rem}
  .call a.more{display:none}
  .stage{height:min(46svh,24rem)}
  .zbox{left:.4rem;right:.4rem;bottom:.4rem;padding:.3rem .45rem}
  .zbox input{flex:1;width:auto}
  .ctl{top:.4rem;right:.4rem;bottom:auto;padding:.3rem}
  .ctl input[type=range]{display:none}
  .mods{left:.4rem;top:.4rem}
  .panelcol{padding-top:.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.hpage main{padding:3rem 0}