/* look.css — the room around the hill.

   Warm dark paper and lamplight. One serif for everything that is the
   book (narration, Gran's hand, Mo), the system sans for the controls.
   Gold is the gold: Mo, the foxfire, the borrowed sun. The cynic is gray.
   Every overlay sits over a pixel canvas, so nothing here blurs it. */
:root{
  --ink:#f3ead8; --soft:#b9ab92; --dim:#8a7d68; --line:rgba(243,234,216,.14);
  --paper:#1a1610; --paper2:#241e16; --card:rgba(20,16,11,.92);
  --gold:#ffd166; --gold2:#ffb347; --fox:#a6ec7c; --beck:#f0906a; --dad:#9bb4d6; --gran:#e6c9f0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --fs:1rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:#0b0a08;color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font:var(--fs)/1.5 var(--sans);-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
body.big{--fs:1.18rem}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:#000;padding:6px 10px;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

#stage{position:fixed;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;display:block}

/* ---------- buttons ---------- */
button,.btn{cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:10px;padding:.55em 1em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;transition:background .15s,border-color .15s,transform .1s}
button:hover,.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
button:active{transform:translateY(1px)}
button.primary{background:linear-gradient(180deg,#ffd77a,#f0b23c);color:#2a1a04;border-color:#f6c55a;font-weight:600}
button.primary:hover{background:linear-gradient(180deg,#ffe29a,#f6bf52)}
button.ghost{background:transparent}
button[disabled]{opacity:.45;cursor:default}
.row{display:flex;gap:.6em;align-items:center;justify-content:flex-end;margin-top:.8em}
.row.wrap{flex-wrap:wrap;justify-content:flex-start}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(10px + var(--safe-t)) 12px 0;pointer-events:none;z-index:10;opacity:0;transition:opacity .8s}
body.playing #hud{opacity:1}
#hud button{pointer-events:auto}
.hl{display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.7)}
.day{font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.place{font:italic .95rem var(--serif);color:var(--ink)}
.clock{display:flex;gap:6px;margin-top:6px}
.chip{display:flex;flex-direction:column;align-items:center;background:rgba(10,8,6,.7);border:1px solid var(--line);border-radius:8px;padding:2px 8px;line-height:1.1;min-width:58px}
.chip small{font-size:.6rem;color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
.chip b{font:600 .9rem var(--serif)}
.chip.hot{border-color:rgba(255,140,90,.6)}
.chip.hot b{color:#ffb08a}
.chip.done{opacity:.45;text-decoration:line-through}
.hr{display:flex;gap:6px;align-items:center}
.hbtn{width:40px;height:40px;padding:0;justify-content:center;background:rgba(10,8,6,.6);border-radius:12px}
.hbtn svg{width:20px;height:20px}
.phonehud{height:40px;background:rgba(10,8,6,.6);border-radius:12px;font:600 .72rem var(--sans);gap:6px;padding:0 10px}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.bars i{width:3px;background:rgba(255,255,255,.2);border-radius:1px}
.bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:6px}.bars i:nth-child(3){height:9px}.bars i:nth-child(4){height:12px}
.bars[data-bars="1"] i:nth-child(1){background:#9fe0a0}
.svc{color:var(--soft);font-weight:500}
.bat{width:22px;height:11px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;padding:1px;position:relative}
.bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:rgba(255,255,255,.6);border-radius:1px}
.bat i{display:block;height:100%;width:var(--b,4%);background:#9fe0a0;border-radius:1px}
.bat.low i{background:#e9705a}
.batn{min-width:2.4em;text-align:right}
.obj{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);max-width:min(620px,92vw);margin:0;padding:.45em 1em;border-radius:999px;background:rgba(10,8,6,.66);border:1px solid var(--line);font:italic .92rem/1.35 var(--serif);color:var(--ink);text-align:center;z-index:9;pointer-events:none;text-shadow:0 1px 2px #000}
.obj.pop{animation:pop .7s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(.96);border-color:var(--gold)}100%{transform:translateX(-50%) scale(1)}}
body.touch .obj{bottom:auto;top:calc(96px + var(--safe-t));font-size:.82rem}
.arm{position:fixed;left:14px;top:calc(110px + var(--safe-t));display:flex;align-items:center;gap:6px;font:600 .66rem var(--sans);color:var(--soft);text-transform:uppercase;letter-spacing:.08em;opacity:0;transition:opacity .4s;z-index:9}
.arm.show{opacity:1}
.arm i{width:70px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.arm i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,100%);background:linear-gradient(90deg,#f08a5a,#ffd166)}
.flash{position:fixed;right:16px;bottom:calc(60px + var(--safe-b));font:600 .7rem var(--sans);color:var(--soft);opacity:0;z-index:9;text-transform:uppercase;letter-spacing:.1em}
.flash.on{animation:fl 1.8s ease}
@keyframes fl{0%,100%{opacity:0}20%,70%{opacity:.9}}
.toast{position:fixed;left:50%;top:calc(64px + var(--safe-t));transform:translate(-50%,-8px);max-width:min(560px,90vw);background:rgba(16,13,9,.92);border:1px solid var(--line);border-radius:12px;padding:.55em 1em;font:.9rem/1.4 var(--serif);opacity:0;transition:opacity .3s,transform .3s;z-index:30;pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.caption{position:fixed;left:14px;bottom:calc(60px + var(--safe-b));font:italic .82rem var(--serif);color:var(--soft);background:rgba(0,0,0,.55);padding:.2em .6em;border-radius:6px;opacity:0;transition:opacity .3s;z-index:9;pointer-events:none}
.caption.on{opacity:1}
.prompt{position:fixed;left:50%;bottom:calc(62px + var(--safe-b));transform:translate(-50%,6px);background:rgba(16,13,9,.9);border:1px solid rgba(255,209,102,.35);border-radius:999px;padding:.35em .95em;font:.88rem var(--sans);opacity:0;transition:opacity .2s,transform .2s;z-index:11;pointer-events:none;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
.prompt.on{opacity:1;transform:translate(-50%,0)}
.prompt kbd{font:700 .75rem var(--sans);background:var(--gold);color:#2a1a04;border-radius:5px;padding:.05em .45em;margin-right:.3em}
body.touch .prompt{bottom:calc(150px + var(--safe-b))}

/* ---------- words ---------- */
.dlg{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translate(-50%,16px);width:min(720px,94vw);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--soft);border-radius:14px;padding:.85em 1.15em 1em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;box-shadow:0 10px 40px rgba(0,0,0,.6);cursor:pointer}
.dlg.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dlg b{display:block;font:600 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:.25em}
.dlg p{margin:0;font:calc(var(--fs)*1.08)/1.5 var(--serif)}
.dlg.wren{border-left-color:#5fc4bc}.dlg.wren b{color:#7fd6ce}
.dlg.dad{border-left-color:var(--dad)}.dlg.dad b{color:var(--dad)}
.dlg.beck{border-left-color:var(--beck)}.dlg.beck b{color:var(--beck)}
.dlg.gran{border-left-color:var(--gran)}.dlg.gran b{color:var(--gran)}
.dlg.worker{border-left-color:#d4ec3a}.dlg.worker b{color:#d4ec3a}
.gh{color:transparent}
.more{position:absolute;right:14px;bottom:6px;color:var(--gold);animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.narr{position:fixed;left:50%;top:calc(16% + var(--safe-t));transform:translate(-50%,-10px);width:min(760px,92vw);padding:1.1em 1.4em 1.3em;background:linear-gradient(180deg,rgba(26,21,14,.94),rgba(18,14,10,.94));border:1px solid rgba(255,209,102,.18);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:58;cursor:pointer}
.narr.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.narr p{margin:0;font:calc(var(--fs)*1.12)/1.62 var(--serif);color:#efe3c8}
.narr p em{color:var(--gold)}
.mo{isolation:isolate;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,88vw);text-align:center;opacity:0;pointer-events:none;transition:opacity 1.2s;z-index:61;cursor:pointer}
.mo.on{opacity:1;pointer-events:auto}
.mo p{margin:0;font:italic calc(var(--fs)*1.45)/1.45 var(--serif);color:var(--gold);text-shadow:0 0 18px rgba(255,190,80,.65),0 0 2px rgba(0,0,0,.9),0 2px 30px rgba(0,0,0,.9)}
.cyn{position:fixed;inset:0;pointer-events:none;z-index:57}
.cy{position:absolute;font:italic 1rem var(--serif);color:rgba(190,190,190,.85);text-shadow:0 1px 3px #000;animation:cy 6s ease forwards;max-width:46vw;filter:none}
@keyframes cy{0%{opacity:0;transform:translateY(6px)}12%{opacity:.85}70%{opacity:.6}100%{opacity:0;transform:translateY(-14px)}}
.choice{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);width:min(720px,94vw);background:var(--card);border:1px solid rgba(255,209,102,.3);border-radius:14px;padding:1em;display:none;z-index:62}
.choice.on{display:block}
.choice p{margin:0 0 .6em;font:italic 1rem var(--serif);color:var(--soft)}
.copt{display:block;width:100%;text-align:left;margin:.35em 0;font:1.02rem/1.4 var(--serif);padding:.7em 1em}
.copt.sel{border-color:var(--gold);background:rgba(255,209,102,.12)}

/* ---------- lens ---------- */
.lens{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.35),rgba(0,0,0,.88));opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
.lens.on{opacity:1;pointer-events:auto}
.lwrap{display:flex;gap:28px;align-items:center;max-width:94vw;padding:20px}
#lenscv{width:min(62vh,66vw,440px);height:min(62vh,66vw,440px);border-radius:50%;box-shadow:0 0 0 10px #15151a,0 0 0 12px #2a2a30,0 20px 80px rgba(0,0,0,.8);transform:scale(.9);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.lens.on #lenscv{transform:scale(1)}
.lcap{max-width:340px}
.lcap h3{margin:.2em 0;font:italic 1.35rem var(--serif);color:var(--ink)}
.lcap p{font:.95rem/1.55 var(--serif);color:#ddd0b6;margin:.4em 0}
.lnew{font:600 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fox)}
.lhint{color:var(--dim);font-size:.75rem}
@media (max-width:760px),(max-aspect-ratio:1/1){.lwrap{flex-direction:column;gap:12px}.lcap{text-align:center;max-width:90vw}.lcap p{font-size:.88rem;max-height:30vh;overflow:auto}}

/* ---------- item get ---------- */
.get{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .4s;z-index:70}
.get.on{opacity:1;pointer-events:auto}
.gcard{width:min(520px,92vw);max-height:92vh;overflow:auto;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,209,102,.18),transparent 60%),var(--card);border:1px solid rgba(255,209,102,.4);border-radius:18px;padding:1.4em 1.4em 1.2em;box-shadow:0 0 80px rgba(255,190,80,.25),0 30px 80px rgba(0,0,0,.7);transform:scale(.92) translateY(10px);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.get.on .gcard{transform:none}
#gicon{width:96px;height:96px;margin:0 auto;display:block;animation:rise 1.2s ease}
@keyframes rise{0%{transform:translateY(20px) scale(.7);opacity:0}60%{transform:translateY(-4px) scale(1.05);opacity:1}100%{transform:none}}
.gcard small{font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.gcard h2{margin:.15em 0 .1em;font:600 1.6rem var(--serif)}
.gsci{margin:0 0 .6em;color:var(--fox);font:600 .82rem var(--sans);letter-spacing:.04em}
.gcard p{font:.98rem/1.6 var(--serif);color:#e6d9bd;text-align:left}
.gopens{border-top:1px solid var(--line);padding-top:.7em;color:var(--ink)!important}
.gopens span,.opens span,.now span{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-right:.4em}
.chap{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#060504;opacity:0;pointer-events:none;transition:opacity .9s;z-index:80;text-align:center}
.chap.on{opacity:1}
.chap small{font:600 .8rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.chap h2{font:italic 2.4rem var(--serif);margin:.2em 0;color:var(--ink)}

/* ---------- set pieces ---------- */
.ridehud{position:fixed;right:14px;top:calc(60px + var(--safe-t));display:flex;align-items:center;gap:8px;font:600 .7rem var(--sans);color:var(--soft);text-transform:uppercase;letter-spacing:.08em;opacity:0;transition:opacity .4s;z-index:12;background:rgba(10,8,6,.6);padding:6px 10px;border-radius:10px}
.ridehud.on{opacity:1}
.ridehud i{width:90px;height:8px;border-radius:4px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.ridehud i::after{content:"";position:absolute;inset:0;width:var(--v,0%);background:linear-gradient(90deg,#f08a5a,#fff3c0)}
.ridehud b{color:#9fe0a0;font-size:.85rem}
.mini{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);z-index:45}
.mini.on{display:flex}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1em;max-width:96vw;max-height:96vh;overflow:auto;text-align:center}
.mcard h3{margin:0 0 .5em;font:italic 1.3rem var(--serif)}
#minicv{display:block;margin:0 auto;border-radius:8px;touch-action:none;max-width:100%}
.mhint{font:.98rem/1.5 var(--serif);color:#e6d9bd;max-width:640px;margin:.7em auto 0}
.mmo{font:italic 1.1rem/1.45 var(--serif);color:var(--gold);text-shadow:0 0 14px rgba(255,190,80,.5);opacity:0;transition:opacity 1s;margin:.5em auto 0;max-width:620px}
.mmo.on{opacity:1}
.moats{margin-right:auto;font:600 .8rem var(--sans);color:var(--soft)}
.mini.sand .row{display:none}
.board{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,14,12,.8);z-index:45}
.board.on{display:flex}
.wb{background:#f4f3ee;color:#1d2a4a;border-radius:6px;padding:1.2em;box-shadow:inset 0 0 0 8px #b8bcc0,0 20px 60px rgba(0,0,0,.7);max-width:94vw;transform:rotate(-.6deg)}
.wb table{border-collapse:collapse;font:600 clamp(.7rem,2.2vw,1.05rem) "Marker Felt","Comic Sans MS","Chalkboard SE",var(--sans)}
.wb th,.wb td{border:1.5px solid rgba(29,42,74,.4);padding:.35em .6em;text-align:left}
.wb th{color:#a3263a}
.wb tr.hot td{color:#123;background:rgba(255,230,80,.35)}
.wbnote{font:italic .85rem var(--serif);color:#4a5260}
.sig{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1em 1.4em;text-align:center;display:none;z-index:44}
.sig.on{display:block}
.sig p{font:italic 1rem var(--serif);margin:0 0 .6em}
.sig i{display:block;width:220px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;margin:auto}
.sig i::after{content:"";position:absolute;inset:0;width:var(--v,0%);background:#9fe0a0}

/* ---------- the book ---------- */
.book,.menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:50}
.book.on,.menu.on{opacity:1;pointer-events:auto}
.bcard{width:min(860px,96vw);height:min(720px,92vh);display:flex;flex-direction:column;background:#efe4c8;color:#2c2014;border-radius:6px 14px 14px 6px;box-shadow:inset 14px 0 18px -10px rgba(60,40,20,.5),0 30px 80px rgba(0,0,0,.7);overflow:hidden;transform:translateY(10px);transition:transform .3s}
.book.on .bcard,.menu.on .bcard{transform:none}
.tabs{display:flex;gap:2px;padding:10px 10px 0;background:#d9cba6;overflow-x:auto;scrollbar-width:none}
.tabs button{border:none;border-radius:8px 8px 0 0;background:rgba(0,0,0,.08);color:#4a3a24;font:600 .82rem var(--sans);padding:.6em .9em;white-space:nowrap}
.tabs button.on{background:#efe4c8;color:#2c2014}
.tabs .x{margin-left:auto;background:transparent}
.bbody{flex:1;overflow:auto;padding:1.4em clamp(1em,4vw,2.4em);user-select:text;-webkit-user-select:text;touch-action:pan-y}
.bpane .hand{font:italic 1.15rem/1.65 var(--serif);color:#22304e;margin:0 0 1.2em}
.bpane .hand.first{font-size:1.35rem}
.bpane h3{font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7a5a2a;margin:1.6em 0 .4em}
.chs{font:1rem/1.7 var(--serif);padding-left:1.2em}
.now{font:italic 1rem var(--serif);background:rgba(255,209,102,.3);padding:.6em .9em;border-radius:8px}
.lede{font:italic 1rem var(--serif);color:#5a4a34}
.lede.small,.small{font-size:.85rem}
.keys{display:grid;gap:8px}
.key{background:rgba(255,255,255,.35);border:1px solid rgba(60,40,20,.15);border-radius:10px;padding:.4em .8em}
.key summary{display:flex;align-items:center;gap:.8em;cursor:pointer;list-style:none}
.key summary::-webkit-details-marker{display:none}
.key summary canvas{width:48px;height:48px;border-radius:8px;background:#1a1610;flex:none}
.key summary b{display:block;font:600 1.02rem var(--serif)}
.key summary small{color:#2f6a2a;font:600 .75rem var(--sans)}
.key p{font:.98rem/1.6 var(--serif);color:#3a2c1c}
.key.locked{opacity:.45}
.key .opens{border-top:1px solid rgba(60,40,20,.15);padding-top:.5em}
.seen{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.look{flex-direction:column;background:rgba(255,255,255,.35);border:1px solid rgba(60,40,20,.15);color:#2c2014;padding:.6em;border-radius:12px;font:.82rem/1.25 var(--serif);text-align:center}
.look canvas{width:64px;height:64px;border-radius:50%;background:#1a1610}
.look.locked canvas{background:rgba(60,40,20,.15)}
.seennote{margin-top:1.2em;background:rgba(255,255,255,.5);border-radius:10px;padding:.8em 1.1em;font:.98rem/1.6 var(--serif)}
.seennote h4{margin:0;font:italic 1.1rem var(--serif)}
#mapcv{width:min(100%,600px);height:auto;image-rendering:pixelated;display:block;margin:0 auto;border-radius:4px;box-shadow:0 2px 10px rgba(60,40,20,.3)}
.phone{width:min(320px,100%);margin:0 auto;background:#111;color:#eee;border-radius:26px;padding:16px 16px 22px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.pbar{display:flex;justify-content:space-between;font:600 .75rem var(--sans);color:#aaa;margin-bottom:10px}
.msg{background:#2a2a30;border-radius:14px;padding:.5em .8em;margin:.4em 0;font:.9rem/1.35 var(--sans)}
.msg b{display:block;font-size:.72rem;color:#8fb0ff}
.msg.gran b{color:var(--gran)}
.phone .hint{font:italic .82rem var(--serif);color:#aaa}
.phone .dead{text-align:center;color:#666;font:italic 1rem var(--serif);padding:3em 0}
textarea{width:100%;font:italic 1.1rem/1.6 var(--serif);color:#1d2a5a;background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(60,90,160,.18) 27px 28px),#f5ecd4;border:1px solid rgba(60,40,20,.2);border-radius:6px;padding:.4em .8em;resize:vertical;user-select:text;-webkit-user-select:text}
.mcardx{height:auto;max-height:92vh;overflow:auto;padding:1.4em 1.6em;background:#1c1710;color:var(--ink);border-radius:16px}
.mcardx h2{margin:0;font:italic 1.6rem var(--serif)}
.mcardx .lede{color:var(--soft)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6em 1.4em;margin:1em 0}
.opts label{display:flex;flex-direction:column;font:.85rem var(--sans);color:var(--soft);gap:.3em}
.opts label.ck{flex-direction:row;align-items:center;color:var(--ink)}
input[type=range]{accent-color:var(--gold)}
input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px}
.help{font:.92rem/1.6 var(--serif);color:#ddd0b6;border-top:1px solid var(--line);margin-top:1em;padding-top:.6em}

/* ---------- touch ---------- */
#touch{display:none}
body.touch.playing #touch{display:block}
.stick{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(22px + var(--safe-b));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);z-index:20;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);transition:transform .06s}
.btns{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(22px + var(--safe-b));display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px;z-index:20}
.tb{width:66px;height:66px;border-radius:50%;justify-content:center;font:700 .78rem var(--sans);background:rgba(20,16,11,.6);border:1px solid rgba(255,255,255,.25);padding:0;touch-action:none}
.tb.on{background:rgba(255,209,102,.4)}
.tb-a{grid-column:2;grid-row:2;width:78px;height:78px;background:rgba(255,209,102,.25);border-color:rgba(255,209,102,.6);font-size:1.2rem}
.tb-l{grid-column:1;grid-row:2;align-self:end}
.tb-c{grid-column:2;grid-row:1;justify-self:end}

/* ---------- title ---------- */
.title{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;transition:opacity .9s;overflow:auto}
.title.off{opacity:0;pointer-events:none}
#titlecv{position:absolute;inset:0;width:100%;height:100%}
.tin{position:relative;text-align:center;padding:2em 1.2em;max-width:640px}
.tkick{font:600 .74rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--fox);margin:0}
.title h1{font:400 clamp(2.6rem,9vw,4.6rem)/1 var(--serif);margin:.2em 0 0;color:var(--ink);text-shadow:0 0 30px rgba(255,190,80,.35)}
.title h1 span{font-style:italic;color:var(--gold)}
.tsub{font:italic 1.2rem var(--serif);color:var(--soft);margin:.2em 0 1.2em}
.tline{font:1.05rem/1.6 var(--serif);color:#e6d9bd;margin:0 auto 1.6em;max-width:30em}
.tbtns{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center}
.tbtns button{font-size:1.05rem;padding:.75em 1.6em}
.tbtns small{font-weight:400;opacity:.75;font-size:.75rem;margin-left:.4em}
.tfine{font:.8rem/1.6 var(--sans);color:var(--dim);margin-top:1.4em}

/* ---------- the end ---------- */
.end{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,rgba(255,200,90,.16),#050403 70%);opacity:0;transition:opacity 2.2s;overflow:auto;padding:2em 1em}
.end.on{opacity:1}
.ein{text-align:center;max-width:620px}
.e1{font:italic clamp(1.6rem,5vw,2.4rem)/1.3 var(--serif);color:var(--ink);opacity:0;animation:in 2s 1s forwards}
.e2{font:italic clamp(1.3rem,4vw,1.8rem)/1.3 var(--serif);color:var(--gold);text-shadow:0 0 22px rgba(255,190,80,.5);opacity:0;animation:in 2s 3s forwards}
@keyframes in{to{opacity:1}}
.endyours{margin:1.4em auto;max-width:520px;background:#efe4c8;color:#1d2a5a;border-radius:6px;padding:.8em 1.2em;font:italic 1.05rem/1.6 var(--serif);text-align:left;opacity:0;animation:in 2s 4.5s forwards}
.endyours small{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7a5a2a}
.endyours p{white-space:pre-wrap;margin:.3em 0 0}
.credits{font:.92rem/1.6 var(--serif);color:var(--soft);margin:1.6em 0;opacity:0;animation:in 2s 5s forwards}
.end .primary{opacity:0;animation:in 1.5s 6s forwards}

.fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s;z-index:75}
.fade.on{opacity:1}

body.reduced *,body.reduced *::before,body.reduced *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.05s!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.05s!important}}
@media (max-width:520px){
  .narr{top:calc(12% + var(--safe-t))}
  .narr p{font-size:.98rem}
  .dlg p{font-size:.98rem}
  .chip{min-width:48px;padding:2px 6px}
  .svc{display:none}
}

/* ================= polish: moments ================= */
/* the portrait in the dialogue box */
.dlg{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
.dlg b,.dlg p{grid-column:2}
.pframe{grid-column:1;grid-row:1 / span 2;width:72px;height:72px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 45% 35%,#4a3f30,#1a150f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.45);transform:translateY(4px) scale(.85);opacity:0;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .25s}
.dlg.on .pframe{transform:none;opacity:1}
.pframe[hidden]{display:none!important}
.pframe canvas{width:100%;height:100%;display:block}
.dlg.wren .pframe{background:radial-gradient(circle at 45% 35%,#2f5e5a,#14231f)}
.dlg.beck .pframe{background:radial-gradient(circle at 45% 35%,#6a3a2a,#24130c)}
.dlg.dad .pframe{background:radial-gradient(circle at 45% 35%,#3a4a5e,#121820)}
.dlg.gran .pframe{background:radial-gradient(circle at 45% 35%,#4e3a5a,#1a1220)}
@media (max-width:520px){.pframe{width:52px;height:52px}.dlg{column-gap:10px}}

/* Mo: each word surfaces out of the dark */
.mw{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(6px);animation:mw 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mw{to{opacity:1;filter:blur(0);transform:none}}
.mo.on::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:260%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,200,90,.16),rgba(255,200,90,0) 60%);pointer-events:none;z-index:-1;animation:moglow 4s ease-in-out infinite}
@keyframes moglow{50%{opacity:.6}}

/* the moment a thing becomes yours */
.get .rays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%) rotate(0);background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0deg 6deg,rgba(255,214,120,0) 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 55%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 55%);opacity:0;transition:opacity .6s;pointer-events:none}
.get.on .rays{opacity:1;animation:spin 26s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.get.on .gcard{animation:cardin .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes cardin{0%{transform:scale(.6) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
.get.on #gicon{animation:rise 1.2s ease,float 3.4s 1.2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.gcard h2{background:linear-gradient(90deg,#f6e2b0,#ffd166,#fff3cc,#ffd166,#f6e2b0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 3.6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

/* chapter cards: a line drawing itself, the title settling */
.chap h2{letter-spacing:.06em;transition:letter-spacing 2.6s ease,opacity 1.2s;opacity:0}
.chap.on h2{letter-spacing:0;opacity:1}
.chap small{opacity:0;transition:opacity 1s .2s}
.chap.on small{opacity:1}
.chline{display:block;width:180px;height:1px;margin-top:.8em;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform 1.8s .4s cubic-bezier(.2,.7,.2,1)}
.chap.on .chline{transform:scaleX(1)}
.chap{background:radial-gradient(ellipse at 50% 55%,#1a140b,#050403 70%)}

/* a place, by name */
.region{position:fixed;left:50%;top:calc(70px + var(--safe-t));transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:14px;width:min(560px,90vw);pointer-events:none;z-index:15;opacity:0;text-align:center}
.region span{font:italic clamp(1.4rem,4vw,2.1rem) var(--serif);color:#fbf3dc;text-shadow:0 2px 12px rgba(0,0,0,.7),0 0 24px rgba(255,200,110,.25);white-space:nowrap}
.region i{height:1px;background:linear-gradient(90deg,transparent,rgba(255,226,170,.8))}
.region i:last-of-type{background:linear-gradient(90deg,rgba(255,226,170,.8),transparent)}
.region small{grid-column:1 / span 3;font:italic .9rem var(--serif);color:rgba(240,228,200,.85);text-shadow:0 1px 6px rgba(0,0,0,.8);margin-top:.2em}
.region.on{animation:region 4.2s ease forwards}
@keyframes region{0%{opacity:0;transform:translate(-50%,8px)}14%{opacity:1;transform:translate(-50%,0)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-4px)}}
body.touch .region{top:calc(124px + var(--safe-t))}

/* the battery filling at the bottom of the hill */
.charge{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);display:flex;align-items:center;gap:12px;background:rgba(14,11,8,.85);border:1px solid rgba(159,224,160,.4);border-radius:16px;padding:12px 18px;opacity:0;pointer-events:none;z-index:30;transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.charge.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cbat{width:64px;height:28px;border:2.5px solid rgba(255,255,255,.75);border-radius:6px;padding:3px;position:relative}
.cbat::after{content:"";position:absolute;right:-7px;top:8px;width:4px;height:8px;background:rgba(255,255,255,.75);border-radius:2px}
.cbat i{display:block;height:100%;width:2%;background:linear-gradient(90deg,#7fd67f,#c8f6a0);border-radius:2px;box-shadow:0 0 12px rgba(159,224,160,.7)}
.charge b{font:600 1.3rem var(--sans);color:#c8f6a0;min-width:3.2em}

/* the prompt pops in */
.prompt.pop{animation:ppop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes ppop{0%{transform:translate(-50%,6px) scale(.8)}100%{transform:translate(-50%,0) scale(1)}}

/* the lens forms like a drop */
.lens.on #lenscv{animation:drop .8s cubic-bezier(.2,1.4,.3,1)}
@keyframes drop{0%{transform:scale(.04);filter:blur(3px)}55%{transform:scale(1.04,.96)}75%{transform:scale(.98,1.02)}100%{transform:scale(1);filter:none}}
.lens.on .lcap{animation:capin .8s .25s both ease}
@keyframes capin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
body.touch .caption{bottom:calc(160px + var(--safe-b))}

/* ================= title, how-to, goals ================= */
.tshade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(10,8,4,.62),rgba(10,8,4,.2) 55%,rgba(10,8,4,.55));pointer-events:none}
.title{background:transparent}
.title .tin{animation:tin 1.6s .2s both cubic-bezier(.2,.7,.2,1)}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.title h1{text-shadow:0 2px 24px rgba(0,0,0,.65),0 0 40px rgba(255,190,80,.35)}
.tline,.tsub{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.tmark{position:relative;width:64px;height:64px;margin:0 auto 10px}
.tmark i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff6d6 0,#ffd166 30%,rgba(255,180,60,0) 70%);animation:sunpulse 4s ease-in-out infinite}
.tmark i:nth-child(2){inset:-14px;background:repeating-conic-gradient(rgba(255,214,110,.35) 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);animation:spin2 30s linear infinite}
.tmark i:nth-child(3){inset:22px;background:#fffbe8;filter:blur(2px)}
@keyframes sunpulse{50%{transform:scale(1.12);opacity:.85}}
@keyframes spin2{to{transform:rotate(360deg)}}
.tbtns button.ghost{background:rgba(10,8,6,.45);border-color:rgba(255,255,255,.25)}
.tfine{text-shadow:0 1px 6px rgba(0,0,0,.9);color:#cfc2a8}

.howto{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(6,5,3,.72);opacity:0;transition:opacity .35s}
.howto.on{opacity:1}
.hcard{width:min(520px,92vw);background:radial-gradient(circle at 50% 0,rgba(255,209,102,.14),transparent 60%),var(--card);border:1px solid rgba(255,209,102,.35);border-radius:18px;padding:1.2em 1.4em 1em;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hslides{position:relative;min-height:300px}
.hs{position:absolute;inset:0;opacity:0;transform:translateX(24px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hs.on{opacity:1;transform:none;pointer-events:auto}
.hart{width:240px;height:120px;display:block;margin:0 auto .4em}
.hs h2{font:italic 1.5rem var(--serif);margin:.2em 0;color:var(--gold)}
.hs p{font:1rem/1.55 var(--serif);color:#e6d9bd;margin:.4em 0}
.hhint{font-size:.9rem!important;color:var(--soft)!important}
.hdots{display:flex;gap:8px;justify-content:center;margin:.4em 0}
.hdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s}
.hdots i.on{background:var(--gold);transform:scale(1.3)}

.goalcard{position:fixed;left:12px;top:calc(96px + var(--safe-t));z-index:11;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:min(300px,62vw);padding:.45em .8em .5em;background:rgba(12,10,7,.62);border:1px solid rgba(255,209,102,.22);border-radius:12px;text-align:left;pointer-events:auto}
.goalcard small{font:600 .62rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.goalcard b{font:italic .9rem/1.25 var(--serif);color:var(--ink);font-weight:400}
.pips{display:flex;gap:4px}
.pips i{width:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.pips i.d{background:linear-gradient(90deg,#ffd166,#ffe9a8)}
.goalcard.tick{animation:gtick .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes gtick{0%{transform:translateX(-8px);border-color:var(--gold)}100%{transform:none}}
body.touch .goalcard{top:calc(92px + var(--safe-t))}
body.touch .obj{top:calc(160px + var(--safe-t))}

.chdone{font:600 .8rem var(--sans);letter-spacing:.08em;color:#9fe0a0;margin:0 0 1.4em;opacity:0;transform:translateY(-6px);transition:opacity .8s,transform .8s}
.chdone b{display:inline-block;width:20px;height:20px;line-height:20px;border-radius:50%;background:#9fe0a0;color:#0e1a0e;margin-right:.4em}
.chdone span{display:block;color:var(--soft);font-weight:400;letter-spacing:.04em;margin-top:.4em}
.chap.on .chdone{opacity:1;transform:none}

.goalh{color:#2f5a2a!important}
.goals{list-style:none;padding:0;margin:.4em 0 1em}
.goals li{display:flex;align-items:center;gap:.6em;font:1rem/1.5 var(--serif);padding:.25em 0;color:#3a2c1c}
.goals li i{flex:none;width:16px;height:16px;border-radius:4px;border:1.5px solid rgba(60,40,20,.45)}
.goals li.done{color:#7a6a54;text-decoration:line-through;text-decoration-color:rgba(60,40,20,.35)}
.goals li.done i{background:#4e8a3a;border-color:#4e8a3a;box-shadow:inset 0 0 0 3px #efe4c8}
.goals li small{color:#7a5a2a;font:600 .75rem var(--sans)}
.prose{font:1.02rem/1.7 var(--serif);color:#2c2014;margin:0 0 1em;text-indent:1.2em}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.bdg{display:flex;flex-direction:column;padding:.4em .7em;border-radius:10px;background:rgba(255,255,255,.3);border:1px solid rgba(60,40,20,.15);opacity:.55}
.bdg.got{opacity:1;background:rgba(255,209,102,.35)}
.bdg b{font:600 .85rem var(--sans)}
.bdg small{font:italic .8rem var(--serif);color:#5a4a34}

.narr.hasmore #nmore::after{content:"  · more in the book";font:italic .7rem var(--serif);color:var(--soft)}
#hudbook.ping{animation:ping 1.4s ease}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,0)}30%{box-shadow:0 0 0 6px rgba(255,209,102,.45);transform:scale(1.12)}}
.fly{position:fixed;width:44px;height:44px;border-radius:50%;z-index:80;pointer-events:none;background:radial-gradient(circle at 40% 35%,#fffbe8,#ffd166 45%,rgba(255,170,60,.4) 70%,transparent 72%);box-shadow:0 0 24px rgba(255,200,90,.8);transition:transform .8s cubic-bezier(.5,-0.3,.6,1),opacity .8s ease-in}
.badgepop{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);z-index:85;display:flex;flex-direction:column;align-items:center;gap:2px;padding:1em 1.6em;border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(255,209,102,.3),transparent 70%),rgba(16,12,8,.92);border:1px solid rgba(255,209,102,.5);animation:bin .7s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
.badgepop i{font-style:normal;font-size:2rem;color:var(--gold);text-shadow:0 0 18px rgba(255,200,90,.8)}
.badgepop b{font:italic 1.3rem var(--serif);color:var(--ink)}
.badgepop small{font:.85rem var(--serif);color:var(--soft)}
.badgepop.out{opacity:0;transform:translate(-50%,-60%);transition:all .6s}
@keyframes bin{from{opacity:0;transform:translate(-50%,-40%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}

/* ================= the object, held up to the light ================= */
.insp{position:fixed;inset:0;z-index:72;background:radial-gradient(ellipse at 36% 50%,rgba(40,28,12,.95),rgba(4,3,2,.985) 70%);opacity:0;transition:opacity .4s}
.insp.on{opacity:1}
#icv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#icv:active{cursor:grabbing}
.ipanel{position:absolute;right:max(4vw,24px);top:50%;transform:translateY(-50%);width:min(420px,40vw);max-height:90vh;overflow:auto;padding:1.2em 1.3em;border-radius:16px;background:rgba(18,14,9,.72);border:1px solid rgba(255,209,102,.3);box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transition:opacity .6s .75s,transform .7s .75s cubic-bezier(.2,1.2,.4,1)}
.insp.on .ipanel{opacity:1}
.ipanel small{font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ipanel h2{margin:.15em 0;font:600 clamp(1.4rem,3.4vw,2rem)/1.15 var(--serif);background:linear-gradient(90deg,#f6e2b0,#ffd166,#fff3cc,#ffd166,#f6e2b0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 3.6s linear infinite}
.isci{margin:0 0 .6em;color:var(--fox);font:600 .85rem var(--sans)}
.ipanel p{font:.98rem/1.6 var(--serif);color:#e6d9bd}
.iopens{border-top:1px solid var(--line);padding-top:.6em}
.iopens span{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-right:.4em}
.iprog{margin:.6em 0 .9em;padding:.7em .8em;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.irow{display:flex;align-items:center;gap:.7em}
.irow b{font:600 .8rem var(--sans);white-space:nowrap;color:var(--ink)}
.ibarw{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;display:block}
#ibar{display:block;height:100%;width:0;background:linear-gradient(90deg,#f0a83c,#ffe9a8);box-shadow:0 0 12px rgba(255,209,102,.7);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.islots{display:flex;flex-wrap:wrap;gap:5px;margin:.6em 0 .2em}
.islots i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.25);display:grid;place-items:center;font:700 9px var(--sans);color:rgba(255,255,255,.35)}
.islots i::after{content:"?"}
.islots i.got{background:radial-gradient(circle at 40% 35%,#fff3c0,#e8b840 60%,#9a6a18);border:none}
.islots i.got::after,.islots i.new::after{content:""}
.islots i.new{background:radial-gradient(circle at 40% 35%,#fffbe8,#ffd166 55%,#c88a20);border:none;box-shadow:0 0 0 0 rgba(255,209,102,.8);animation:slotpop 1s 1.3s both cubic-bezier(.2,1.8,.4,1),slotglow 1.6s 2.3s ease-in-out infinite}
@keyframes slotpop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes slotglow{50%{box-shadow:0 0 0 5px rgba(255,209,102,.25)}}
.itease{margin:.2em 0 0!important;font:italic .88rem var(--serif)!important;color:var(--soft)!important}
.ipanel .primary{width:100%;justify-content:center;font-size:1.05rem;padding:.75em}
.ihint{text-align:center;font:.75rem var(--sans)!important;color:var(--dim)!important;margin:.6em 0 0}
@media (max-aspect-ratio:11/10){
  .ipanel{left:50%;right:auto;top:auto;bottom:max(3vh,12px);transform:translateX(-50%);width:min(560px,94vw);max-height:52vh}
}

/* small screens: while someone is talking, the goal card steps aside so the
   words have the top of the screen to themselves */
@media (max-width:760px){
  body:has(#narr.on) #goalcard, body:has(#mo.on) #goalcard{opacity:0;transform:translateY(-6px);pointer-events:none}
}
#goalcard{transition:opacity .3s,transform .3s}

/* ---------------- the opening: letterbox, words, the bars going ---------------- */
.cine{position:fixed;inset:0;z-index:95;pointer-events:none}
.cine .lb{position:absolute;left:0;right:0;height:13vh;min-height:64px;background:#050403;transition:transform 1.4s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.cine .lb.top{top:0;transform:translateY(-100%);justify-content:space-between;padding:0 max(18px,var(--safe-l,0px)) 0 max(18px,var(--safe-l,0px));padding-top:var(--safe-t)}
.cine .lb.bot{bottom:0;transform:translateY(100%);padding-bottom:var(--safe-b,0px)}
.cine.on .lb{transform:none}
.cine::after{content:"";position:absolute;inset:0;background:#050403;opacity:1;transition:opacity 2.6s ease .2s;pointer-events:none}
.cine.on::after{opacity:0}
.cine.out::after{opacity:1;transition:opacity 1.2s ease}
.ccap{margin:0;max-width:min(860px,90vw);text-align:center;font:italic clamp(1rem,2.3vw,1.42rem)/1.5 var(--serif);color:#efe3c8;letter-spacing:.01em;opacity:0;transform:translateY(6px);transition:opacity 1.1s ease,transform 1.4s ease;text-shadow:0 0 18px rgba(255,190,90,.18)}
.ccap.on{opacity:1;transform:none}
.cskip{font:600 .78rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,227,200,.55);background:none;border:1px solid rgba(239,227,200,.18);border-radius:999px;padding:.55em 1em;cursor:pointer;transition:color .2s,border-color .2s}
.cskip:hover,.cskip:focus-visible{color:#ffd166;border-color:rgba(255,209,102,.6);outline:none}
.cbars{display:inline-flex;align-items:flex-end;gap:3px;height:16px;color:rgba(239,227,200,.7);font:600 .7rem/1 system-ui,sans-serif;letter-spacing:.06em}
.cbars i{display:block;width:4px;background:rgba(239,227,200,.75);border-radius:1px;transition:background .6s,opacity .6s}
.cbars i:nth-child(1){height:6px}.cbars i:nth-child(2){height:10px}.cbars i:nth-child(3){height:14px}
.cbars[data-n="2"] i:nth-child(3),.cbars[data-n="1"] i:nth-child(n+2),.cbars[data-n="0"] i{background:rgba(239,227,200,.16)}
.cbars[data-n="1"] i:nth-child(1){animation:cbar 1.4s ease-in-out infinite}
.cbars b{margin-left:8px;font-weight:600;opacity:.8}
@keyframes cbar{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.cine .lb,.ccap{transition:none}.cbars i{animation:none!important}}
.cine .lb.bot{height:auto;min-height:13vh;padding:14px 18px calc(14px + var(--safe-b,0px))}
@media (max-width:600px){.ccap{font-size:.98rem;line-height:1.45}}
.lback{position:absolute;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);font:600 .8rem/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(20,16,10,.8);border:1px solid rgba(255,209,102,.4);border-radius:999px;padding:.8em 1.6em;cursor:pointer;display:none}
body.touch .lback{display:block}
.lens .lwrap{max-height:calc(100vh - 90px);overflow:auto}
body.touch.playing .lens.on ~ #touch, body:has(.lens.on) #touch{opacity:0;pointer-events:none}

/* the eye: in the black cellar, an eye that opens as your eyes do */
.eyem{--o:.1;display:inline-block;position:relative;width:42px;height:24px;margin-right:6px;opacity:0;transform:scale(.8);transition:opacity .8s,transform .8s;pointer-events:none;align-self:center}
.eyem.on{opacity:1;transform:none}
.eyem::before{content:"";position:absolute;inset:0;border-radius:50%/50%;border:1.5px solid rgba(190,230,170,.75);transform:scaleY(var(--o));transition:transform .4s;box-shadow:0 0 10px rgba(170,240,130,.25)}
.eyem i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#0c1208 30%,rgba(170,240,130,.85) 34%,rgba(170,240,130,.2) 70%);transform:scale(calc(.4 + var(--o)*.9));opacity:calc(var(--o)*1.2);transition:transform .4s,opacity .4s}
.eyem.still::before{animation:eyebreath 2.4s ease-in-out infinite}
@keyframes eyebreath{50%{box-shadow:0 0 16px rgba(170,240,130,.5)}}
/* the phone, dying */
.phonehud.dying{animation:phdie 1.3s ease}
@keyframes phdie{0%,30%,60%{filter:none}15%,45%{filter:brightness(2.2) saturate(.2)}100%{filter:none}}

/* ---------------- moments, progress, saving ---------------- */
.achpop{position:fixed;left:50%;top:calc(14px + var(--safe-t));z-index:86;display:flex;align-items:center;gap:14px;min-width:min(420px,92vw);max-width:94vw;padding:12px 18px 12px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(38,28,14,.96),rgba(22,16,9,.96));border:1px solid rgba(255,209,102,.45);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(255,190,90,.18);transform:translate(-50%,-140%);transition:transform .7s cubic-bezier(.2,1.4,.3,1),opacity .6s;pointer-events:none}
.achpop.on{transform:translate(-50%,0)}
.achpop.out{transform:translate(-50%,-140%);opacity:0;transition:transform .6s ease-in,opacity .6s}
.achmed{position:relative;flex:0 0 54px;height:54px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff3c0,#e8b840 45%,#8a5a12);box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),0 0 0 3px rgba(255,220,140,.25),0 0 24px rgba(255,200,90,.5);animation:medspin 1.1s cubic-bezier(.2,1,.3,1) both}
.achmed span{font:700 1.5rem/1 Georgia,serif;color:#5a3a0a;text-shadow:0 1px 0 rgba(255,250,220,.6)}
.achmed::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,220,140,.6);animation:medring 1.4s .4s ease-out both}
@keyframes medspin{0%{transform:rotateY(720deg) scale(.2)}70%{transform:rotateY(-20deg) scale(1.1)}100%{transform:none}}
@keyframes medring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.8);opacity:0}}
.achtx small{display:block;font:600 .66rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.achtx b{display:block;margin:.3em 0 .15em;font:600 1.15rem/1.15 var(--serif);color:#fbf1d8}
.achtx p{margin:0;font:italic .85rem/1.35 var(--serif);color:#d8c9a8}
.objdone{position:fixed;left:50%;bottom:calc(52px + var(--safe-b));transform:translate(-50%,10px);z-index:12;display:flex;align-items:center;gap:8px;padding:.4em .9em;border-radius:999px;background:rgba(14,22,10,.8);border:1px solid rgba(160,220,120,.45);font:italic .85rem/1.3 var(--serif);color:#d8ecc8;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.3,1);pointer-events:none;max-width:90vw}
.objdone.on{opacity:1;transform:translate(-50%,0)}
.objdone.out{opacity:0;transform:translate(-50%,-14px)}
.objdone i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#8ac860;color:#0e1a08;font-weight:900;font-size:.75rem;animation:tickpop .5s .1s cubic-bezier(.2,1.6,.3,1) both}
.objdone span{text-decoration:line-through;text-decoration-color:rgba(160,220,120,.7)}
@keyframes tickpop{0%{transform:scale(0)}100%{transform:scale(1)}}
.savesun{position:fixed;right:calc(14px + var(--safe-r,0px));bottom:calc(14px + var(--safe-b));z-index:30;display:flex;align-items:center;gap:6px;font:600 .68rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,226,160,.85);opacity:0;pointer-events:none}
.savesun i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#ffe7a0 35%,transparent 38%),conic-gradient(from 0deg,#ffd166 0 8%,transparent 8% 12.5%,#ffd166 12.5% 20.5%,transparent 20.5% 25%,#ffd166 25% 33%,transparent 33% 37.5%,#ffd166 37.5% 45.5%,transparent 45.5% 50%,#ffd166 50% 58%,transparent 58% 62.5%,#ffd166 62.5% 70.5%,transparent 70.5% 75%,#ffd166 75% 83%,transparent 83% 87.5%,#ffd166 87.5% 95.5%,transparent 95.5%)}
.savesun.on{animation:savein 1.8s ease both}.savesun.on i{animation:sunturn 1.8s linear}
@keyframes savein{0%,100%{opacity:0}15%,75%{opacity:1}}
@keyframes sunturn{to{transform:rotate(180deg)}}
#hudbook{position:relative}
.pctpop{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:700 .72rem/1 system-ui,sans-serif;color:#ffd166;text-shadow:0 1px 3px #000;animation:pctup 1.6s ease-out both;pointer-events:none;white-space:nowrap}
@keyframes pctup{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
.contcard{display:flex!important;align-items:center;gap:12px;text-align:left;padding:8px 14px 8px 8px!important}
.contcard img{width:112px;height:63px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,209,102,.35);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.contcard .cc{display:flex;flex-direction:column;gap:2px}.contcard .cc small{display:block;opacity:.8}
.pring{position:relative;width:110px;height:110px;margin:4px auto 10px;display:grid;place-items:center}
.pring svg{position:absolute;inset:0;transform:rotate(-90deg)}.pring circle{fill:none;stroke-width:3.4}.pring .bg{stroke:rgba(255,255,255,.08)}.pring .fg{stroke:#ffd166;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,200,90,.6));transition:stroke-dasharray 1.2s ease}
.pring b{font:600 1.5rem/1 var(--serif);color:#fbf1d8;margin-top:-10px}.pring span{position:absolute;bottom:30px;font:italic .7rem/1 var(--serif);color:var(--soft)}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.achc{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.achc i{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font:700 1rem/1 Georgia,serif;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.achc b{font:600 .82rem/1.2 var(--serif);color:rgba(255,255,255,.45)}.achc small{font:italic .72rem/1.3 var(--serif);color:rgba(255,255,255,.35)}
.achc.got{background:rgba(255,200,90,.07);border-color:rgba(255,209,102,.3)}.achc.got i{color:#5a3a0a;background:radial-gradient(circle at 35% 30%,#fff3c0,#e8b840 50%,#9a6a18);box-shadow:0 0 12px rgba(255,200,90,.4)}.achc.got b{color:#fbf1d8}.achc.got small{color:#d8c9a8}
@media (prefers-reduced-motion:reduce){.achmed,.achmed::after,.savesun.on i,.objdone i{animation:none}}
/* on her parchment */
.book .pring .bg{stroke:rgba(60,40,20,.12)}.book .pring b{color:#3a2614}.book .pring span{color:#7a6448}
.book .achc{background:rgba(90,60,30,.05);border-color:rgba(90,60,30,.12)}
.book .achc i{color:rgba(90,60,30,.35);background:rgba(90,60,30,.08)}
.book .achc b{color:rgba(58,38,20,.55)}.book .achc small{color:rgba(90,70,50,.6)}
.book .achc.got{background:rgba(232,184,64,.14);border-color:rgba(190,140,40,.45)}
.book .achc.got b{color:#3a2410}.book .achc.got small{color:#5a4630}

/* ---------------- one thing at a time: the phone layout ----------------
   top-left: the goal card. Just under it: one transient line at a time
   (a place's name, or a new goal). Bottom: the prompt, with sound captions
   and notes stacked above it, clear of the thumbs. */
body.touch .region{top:calc(176px + var(--safe-t))}
body.touch .region span{font-size:1.5rem}
body.touch .region small{font-size:.8rem}
body.regionon #goalcard{opacity:.0;transform:translateY(-6px);pointer-events:none}
body.regionon .obj{opacity:0!important}
#goalcard{transition:opacity .35s,transform .35s}
body.touch .obj{top:calc(176px + var(--safe-t));opacity:0;transition:opacity .4s;pointer-events:none;max-width:86vw}
body.touch.objnew .obj{opacity:1}
body.touch .caption{bottom:calc(204px + var(--safe-b));left:50%;transform:translateX(-50%);max-width:86vw;text-align:center}
body.touch .toast{top:auto;bottom:calc(244px + var(--safe-b))}
body.touch .objdone{bottom:calc(204px + var(--safe-b))}
/* desktop: keep the caption off the prompt's line */
.caption{bottom:calc(104px + var(--safe-b))}
/* when you're up top, the transient line drops into the lower half instead */
body.touch.lanelow .region,body.touch.lanelow .obj{top:auto;bottom:calc(262px + var(--safe-b))}
body.touch.lanelow .caption{bottom:calc(204px + var(--safe-b))}

/* ---------------- direction: bars for a scene, and "previously" ---------------- */
.lbox{position:fixed;inset:0;pointer-events:none;z-index:8}
.lbox i{position:absolute;left:0;right:0;height:6.5vh;max-height:56px;background:linear-gradient(#050403,rgba(5,4,3,.92));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.lbox .t{top:0;transform:translateY(-102%)}
.lbox .b{bottom:0;transform:translateY(102%);background:linear-gradient(rgba(5,4,3,.92),#050403)}
.lbox.on i{transform:none}
body.touch .lbox i{height:4.5vh}
.recap{position:fixed;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;padding:1.5em;background:radial-gradient(ellipse at 50% 45%,rgba(10,8,5,.84),rgba(5,4,3,.94) 70%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .8s;cursor:pointer}
.recap.on{opacity:1;pointer-events:auto}
.rcin{max-width:min(620px,92vw);text-align:center;transform:translateY(8px);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.recap.on .rcin{transform:none}
.rcin small{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:1.1em}
.rcin small::before,.rcin small::after{content:"";display:inline-block;width:2.4em;height:1px;background:rgba(255,209,102,.4);vertical-align:middle;margin:0 .8em}
.rct{margin:0 0 1.3em;font:italic clamp(1.05rem,2.4vw,1.35rem)/1.6 var(--serif);color:#efe3c8;text-shadow:0 0 18px rgba(255,190,90,.12)}
.rct em{color:var(--gold)}
.rcgo{display:inline-flex;align-items:center;gap:.6em;font:.92rem/1.4 var(--serif);color:var(--soft);margin-bottom:1.4em}
.rcgo i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);flex:none}
.rcb{display:block;margin:0 auto;font:600 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#1a1208;background:var(--gold);border:0;border-radius:999px;padding:.75em 1.5em;cursor:pointer}
.rcb:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.playing.framed #hud,body.framed .goalcard,body.framed .clock{opacity:.22;transition:opacity .6s}
.rcch{display:block;font:italic .95rem/1.3 var(--serif);color:var(--soft);margin:-.4em 0 1.2em}
.rcch:empty{display:none}

/* ---------------- the last bar: the phone, full screen ----------------
   Desktop: a phone held up in the dark. A phone: your own screen becomes
   Wren's, edge to edge, until it dies; then it pulls back into a phone in
   your hand again so the narration can be read under it. */
.phx{position:fixed;inset:0;z-index:56;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(3vh + var(--safe-t));background:radial-gradient(ellipse at 50% 40%,rgba(30,24,16,.55),rgba(5,4,3,.94) 75%);opacity:0;pointer-events:none;transition:opacity .7s;-webkit-tap-highlight-color:transparent}
.phx.on{opacity:1;pointer-events:auto;cursor:pointer}
.phx.down{opacity:0;transition:opacity .8s .15s}
.phd{position:relative;width:min(330px,82vw);height:min(68vh,640px);border-radius:46px;padding:10px;background:linear-gradient(145deg,#4a4a52,#141418 38%,#222228 80%,#3a3a40);box-shadow:0 0 0 1.5px #5c5c64 inset,0 0 0 3px #0c0c0e inset,0 40px 90px rgba(0,0,0,.75),0 0 80px rgba(255,200,120,.07);transform:translateY(40vh) rotate(-4deg);transition:transform 1.1s cubic-bezier(.2,.9,.25,1)}
.phd::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:56px;border-radius:0 2px 2px 0;background:#2a2a30}
.phx.on .phd{transform:none}
.phx.down .phd{transform:translateY(70vh) rotate(4deg)!important;transition:transform .9s cubic-bezier(.6,0,.8,.4)}
.phscr{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#000;font-family:var(--sans);color:#1b1a18;isolation:isolate}
.phisl{position:absolute;z-index:6;top:10px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:999px;background:#000}
/* status bar */
.phs{position:absolute;z-index:5;left:0;right:0;top:0;height:46px;display:flex;justify-content:space-between;align-items:center;padding:2px 26px 0 30px;font:600 .9rem/1 var(--sans);color:#fff;transition:color .5s}
.phx.open .phs{color:#1b1a18}
.phr{display:inline-flex;align-items:center;gap:6px}
.phsig{display:inline-flex;align-items:flex-end;gap:2px;height:13px;padding:3px 5px;margin:-3px -5px;border-radius:7px;transition:box-shadow .4s,background .4s}
.phsig i{width:3.5px;border-radius:1px;background:currentColor;opacity:.3;transition:opacity .25s}
.phsig i:nth-child(1){height:4px}.phsig i:nth-child(2){height:7px}.phsig i:nth-child(3){height:10px}.phsig i:nth-child(4){height:13px}
.phsig[data-n="1"] i:nth-child(1),.phsig[data-n="2"] i:nth-child(-n+2){opacity:1}
.phsig.seek i{animation:phseek 1s ease-in-out infinite}
.phsig.seek i:nth-child(2){animation-delay:.15s}.phsig.seek i:nth-child(3){animation-delay:.3s}.phsig.seek i:nth-child(4){animation-delay:.45s}
@keyframes phseek{50%{opacity:.85}}
.phsig.tremble{animation:phtrem .18s steps(2) infinite;background:rgba(255,170,60,.28);box-shadow:0 0 0 2px rgba(255,170,60,.4)}
@keyframes phtrem{50%{transform:translateY(.6px);opacity:.5}}
.phx.got .phs .phsig{background:rgba(120,220,120,.3);box-shadow:0 0 16px rgba(120,230,120,.75)}
.phnet{font:600 .7rem/1 var(--sans);opacity:.8}
@media (min-width:561px),(orientation:landscape){.phnet{display:none}}
.phnet:empty{display:none}
.phbat{width:23px;height:11px;border:1.5px solid currentColor;border-radius:3.5px;padding:1px;position:relative;opacity:.9}
.phbat::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.phbat b{display:block;height:100%;background:#ff453a;border-radius:1px}
.phhome{position:absolute;z-index:5;left:50%;bottom:8px;width:36%;height:5px;margin-left:-18%;border-radius:999px;background:rgba(255,255,255,.85)}
.phapp .phhome{background:rgba(0,0,0,.8)}
/* lock screen */
.phlock{position:absolute;inset:0;z-index:2;filter:brightness(0);transition:filter .7s ease,transform .55s cubic-bezier(.5,0,.2,1),opacity .55s}
.phx.wake .phlock{filter:none}
.phx.open .phlock{transform:translateY(-100%);opacity:.6}
.phwall{position:absolute;inset:-10%;background:radial-gradient(circle at 22% 24%,rgba(255,176,120,.6),transparent 34%),radial-gradient(circle at 84% 38%,rgba(120,150,255,.5),transparent 38%),radial-gradient(circle at 46% 88%,rgba(255,120,160,.45),transparent 44%),radial-gradient(circle at 70% 70%,rgba(255,210,140,.3),transparent 30%),linear-gradient(165deg,#241d40,#4e3358 48%,#b36f58);animation:phwall 18s ease-in-out infinite alternate}
@keyframes phwall{to{transform:translate(-3%,2%) scale(1.06)}}
.phclk{position:absolute;left:0;right:0;top:13%;text-align:center;color:rgba(255,255,255,.94);text-shadow:0 2px 20px rgba(0,0,0,.2)}
.phdate{display:block;font:600 1.05rem/1 var(--sans);opacity:.9;margin-bottom:.18em}
.phbig{display:block;font:700 clamp(4rem,19vw,5.3rem)/1 var(--sans);letter-spacing:-.03em}
.phsrch{position:absolute;left:50%;top:calc(13% + 7.6rem);transform:translateX(-50%);font:600 .74rem/1 var(--sans);color:#fff;background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.5em 1em;border-radius:999px;opacity:0;transition:opacity .4s;white-space:nowrap}
.phx.seeking .phsrch{opacity:1}
.phsrch::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.55em;border-radius:50%;background:#ffd166;vertical-align:1px;animation:phblink 1s infinite}
@keyframes phblink{50%{opacity:.2}}
.phnots{position:absolute;left:9px;right:9px;top:calc(13% + 10rem);display:flex;flex-direction:column;gap:7px}
.phnote{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;padding:11px 13px;border-radius:20px;background:rgba(246,242,236,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 6px 20px rgba(0,0,0,.18);font:.8rem/1.3 var(--sans);color:#1b1a18;opacity:0;transform:translateY(-26px) scale(.92);transition:opacity .3s,transform .5s cubic-bezier(.2,1,.3,1.25)}
.phnote.in{opacity:1;transform:none}
.phnote>i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 .85rem/1 var(--sans);font-style:normal}
.phnote b{display:block;font:600 .82rem/1.2 var(--sans)}
.phnote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.phnote em{color:#7a746a}
.phnote small{font:.68rem/1.3 var(--sans);color:#7a746a}
/* the chat */
.phapp{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding-top:46px;background:linear-gradient(#f6f2ea,#ebe5da);opacity:0;transform:scale(.94);transition:opacity .4s .1s,transform .55s cubic-bezier(.2,.9,.3,1) .05s}
.phx.open .phapp{opacity:1;transform:none;z-index:3}
.phh{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 12px 10px;border-bottom:1px solid rgba(0,0,0,.08);font:600 .76rem/1.2 var(--sans);background:rgba(246,242,234,.9)}
.phback{position:absolute;left:12px;top:10px;font:500 .95rem/1 var(--sans);color:#2f7cf6}
.phav{display:inline-flex}
.phav i{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 .72rem/1 var(--sans);font-style:normal;margin-left:-8px;border:2px solid #f3efe7;transition:filter 1.2s}
.phav i:first-child{margin-left:0}
.phprog{position:absolute;left:0;right:0;bottom:-1px;height:3px;overflow:hidden}
.phprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f7cf6,#6aa8ff);box-shadow:0 0 8px rgba(47,124,246,.6);opacity:0}
.phx.sending .phprog i{opacity:1;width:74%;transition:width 2.4s cubic-bezier(.2,.8,.3,1)}
.phx.sending.stall .phprog i{width:79%;transition:width 8s linear}
.phx.dead .phprog i{opacity:0;transition:opacity .6s}
.phm{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:5px;padding:10px 12px 6px;justify-content:flex-end}
.phm>*{flex:none;opacity:0;transform:translateY(12px) scale(.94);transform-origin:left bottom;transition:opacity .25s,transform .38s cubic-bezier(.2,.9,.3,1.35),filter 1.2s}
.phm>.in{opacity:1;transform:none}
.phday{align-self:center;font:600 .6rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#958e82;margin:5px 0 2px}
.phb{align-self:flex-start;max-width:80%;padding:7px 12px 8px;border-radius:18px 18px 18px 5px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.06);font:.86rem/1.3 var(--sans)}
.phb small{display:block;font:600 .62rem/1.2 var(--sans);margin-bottom:2px}
.phb.p small{color:#c0603e}.phb.t small{color:#3e6ec0}
.phb em{color:#7a746a}
.phb.me{align-self:flex-end;transform-origin:right bottom;background:linear-gradient(#3d8bff,#2f7cf6);color:#fff;border-radius:18px 18px 5px 18px;margin-top:6px;position:relative}
.phb.me.failed{margin-right:28px;margin-bottom:18px}
.phb.me.failed::after{content:"!";position:absolute;right:-28px;bottom:2px;width:20px;height:20px;border-radius:50%;background:#ff3b30;color:#fff;font:800 .8rem/20px var(--sans);text-align:center;animation:phpop .45s cubic-bezier(.2,1,.3,1.6)}
.phb.me.failed::before{content:"Not Delivered";position:absolute;right:-28px;bottom:-17px;font:600 .62rem/1 var(--sans);color:#ff3b30;white-space:nowrap}
@keyframes phpop{from{transform:scale(0)}}
.phreact{align-self:flex-start;margin:-10px 0 0 16px;font:.7rem/1 var(--sans);background:#fff;border-radius:999px;padding:3px 7px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.phmore{align-self:center;font:600 .64rem/1 var(--sans);color:#fff;background:rgba(0,0,0,.32);border-radius:999px;padding:4px 10px}
.phsend{position:relative;display:flex;align-items:center;gap:8px;margin:6px 10px 24px;padding:7px 7px 7px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);font:.86rem/1 var(--sans);color:#a39d92}
.phtx{flex:1;white-space:nowrap;overflow:hidden}
.phsend.typing{color:#1b1a18}
.phsend.typing .phtx::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:#2f7cf6;animation:phblink .9s steps(1) infinite}
.phsend i{width:26px;height:26px;border-radius:50%;background:#cfc9bf;color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 .82rem/1 var(--sans);font-style:normal;transition:background .2s}
.phsend.typing i{background:#2f7cf6}
/* the cloud, and what it takes */
.phcloud{position:absolute;z-index:4;inset:-30%;background:radial-gradient(ellipse 40% 30% at 30% 50%,rgba(20,20,30,.42),transparent 70%);transform:translateX(-110%);pointer-events:none}
.phx.cloud .phcloud{transform:translateX(110%);transition:transform 3.4s cubic-bezier(.4,0,.6,1)}
.phx.dead .phm>*:not(.me),.phx.dead .phav i{filter:grayscale(1);opacity:.42}
.phx.dead .phb.me{background:#9a9a9e}
.phx.dead .phapp{background:linear-gradient(#e2e0dc,#d6d3ce);transition:background 1.4s}
.phns{position:absolute;z-index:4;left:0;right:0;top:46px;bottom:38%;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 1.2s ease .5s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(220,217,212,.3);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.phns>div{display:flex;flex-direction:column;align-items:center;gap:.55em;padding:1em 1.4em;border-radius:20px;background:rgba(244,241,236,.85);box-shadow:0 10px 40px rgba(0,0,0,.12);color:#8d877c;transform:scale(.9);transition:transform .9s cubic-bezier(.2,1,.3,1.2) .5s}
.phns b{font:500 1.45rem/1 var(--sans);letter-spacing:.01em}
.phx0{position:relative;display:inline-flex;color:#8d877c}
.phx0 .phsig{transform:scale(1.9);margin:6px 0}
.phx0::after{content:"";position:absolute;left:-9px;right:-9px;top:50%;height:2.5px;border-radius:2px;background:#8d877c;transform:rotate(-38deg);box-shadow:0 0 0 1.5px rgba(244,241,236,.85)}
.phx.dead .phns{opacity:1}
.phx.dead .phns>div{transform:none}
.phx.dead .phd{animation:phdrop .5s ease-out}
@keyframes phdrop{30%{transform:translateY(5px) rotate(-.6deg)}}
.phx.back .phscr{filter:brightness(.78);transition:filter 1.4s}
/* a phone: the screen is the screen */
@media (max-width:560px) and (orientation:portrait){
  .phx{padding:0;background:#000}
  .phd{width:100%;height:100%;border-radius:0;padding:0;background:#000;box-shadow:none;transform:translateY(8%);transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.9,.25,1),border-radius 1.1s,padding 1.1s,box-shadow 1.1s}
  .phd::before,.phisl{display:none}
  .phscr{border-radius:0;transition:border-radius 1.1s,filter 1.4s}
  .phs{height:max(48px,var(--safe-t));padding:0 30px 0 34px;font-size:1rem}
  .phapp{padding-top:max(48px,var(--safe-t))}
  .phns{top:max(48px,var(--safe-t))}
  .phbig{font-size:clamp(4.6rem,24vw,6.2rem)}
  .phclk{top:calc(max(48px,var(--safe-t)) + 6%)}
  .phsrch{top:calc(max(48px,var(--safe-t)) + 6% + 8.6rem)}
  .phnots{top:calc(max(48px,var(--safe-t)) + 6% + 11.4rem);left:10px;right:10px}
  .phnote{font-size:.88rem;padding:12px 14px}
  .phnote b{font-size:.88rem}
  .phh{font-size:.84rem;padding-bottom:12px}
  .phav i{width:38px;height:38px;font-size:.84rem}
  .phb{font-size:1rem;max-width:78%}
  .phb small{font-size:.7rem}
  .phday{font-size:.66rem}
  .phsend{margin-bottom:calc(22px + var(--safe-b));font-size:1rem;padding:8px 8px 8px 16px}
  .phsend i{width:30px;height:30px}
  .phx.back{background:radial-gradient(ellipse at 50% 30%,rgba(30,24,16,.6),rgba(5,4,3,.96) 75%);transition:background 1.2s}
  .phx.back .phd{transform:translateY(calc(var(--safe-t) + 2vh)) scale(.6);border-radius:56px;padding:13px;background:linear-gradient(145deg,#4a4a52,#141418 38%,#222228 80%,#3a3a40);box-shadow:0 0 0 2px #5c5c64 inset,0 0 0 5px #0c0c0e inset,0 50px 100px rgba(0,0,0,.8)}
  .phx.back .phscr{border-radius:44px}
  .phx.down .phd{transform:translateY(80vh) scale(.6) rotate(4deg)!important}
}
body.phoneup .narr{top:auto;bottom:calc(14px + var(--safe-b));transform:translate(-50%,10px)}
body.phoneup .narr.on{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.phd,.phx.on .phd,.phlock,.phapp{transition:none}.phsig.tremble,.phsig.seek i,.phx.dead .phd,.phwall{animation:none}}

/* ---------------- staying fresh ---------------- */
.ver{font-size:.78rem!important;opacity:.7}
.updcard{position:fixed;left:50%;top:calc(12px + var(--safe-t));transform:translate(-50%,-140%);z-index:96;display:flex;align-items:center;gap:.8em;max-width:min(520px,94vw);padding:.65em .7em .65em 1.1em;border-radius:16px;background:rgba(20,16,11,.96);border:1px solid rgba(255,209,102,.45);box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(255,190,90,.12);color:var(--ink);transition:transform .6s cubic-bezier(.2,.9,.3,1.2)}
.updcard.on{transform:translate(-50%,0)}
.updcard span{flex:1;display:flex;flex-direction:column;gap:2px;font:.9rem/1.3 var(--serif)}
.updcard small{font:.74rem/1.2 var(--sans);color:var(--soft)}
.updcard button{font:600 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:#1a1208;border:0;border-radius:999px;padding:.7em 1.1em;cursor:pointer;flex:none}
.updcard button.x{background:none;color:var(--soft);font-size:1.1rem;padding:.3em .5em;text-transform:none}

/* ---------------- it's a book first: the hero title ---------------- */
.hero{position:fixed;inset:0;z-index:94;overflow:hidden;opacity:0;pointer-events:none;background:#070504;transition:opacity .9s ease;cursor:pointer;--bw:300px;--bh:450px;--closed:1.2}
.hero.on{opacity:1;pointer-events:auto}
.hero.gone{opacity:0;transition:opacity 1s ease}
/* an old table, and a lamp warming up over it */
.hero::before{content:"";position:absolute;inset:-70% -30%;background:
  repeating-linear-gradient(92deg,rgba(0,0,0,0) 0 22px,rgba(0,0,0,.18) 22px 23px,rgba(0,0,0,0) 23px 61px,rgba(255,220,170,.04) 61px 63px),
  repeating-linear-gradient(90deg,#3a2616 0 140px,#41291a 140px 300px,#36220f 300px 420px);
  filter:contrast(1.05);transform:perspective(900px) rotateX(38deg) translateY(8%) scale(1.25);transform-origin:50% 60%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 44%,rgba(255,200,120,.32),rgba(255,170,80,.08) 45%,rgba(4,3,2,.9) 78%),radial-gradient(ellipse at 50% 50%,transparent 40%,#030201 95%);opacity:0;transition:opacity 1.6s ease}
.hero.lamp::after{opacity:1}
.hero.down::after{animation:hflick 1.2s ease-out}
@keyframes hflick{12%{opacity:.82}24%{opacity:1}36%{opacity:.9}}
.hero:not(.lamp)::before{opacity:.25}
.hero::before{transition:opacity 1.6s ease}
.hdust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hstage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;perspective:1700px;perspective-origin:50% 30%}
.hbook{position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;opacity:0;
  transform:translateY(-55vh) rotateX(58deg) rotateZ(-9deg) scale(calc(var(--closed) * 1.25));
  transition:transform .95s cubic-bezier(.55,0,.85,.5),opacity .4s ease}
.hero.drop .hbook{opacity:1;transform:translateY(2vh) rotateX(16deg) rotateZ(-3deg) scale(var(--closed))}
.hero.down .hbook{animation:hland .55s ease-out}
@keyframes hland{0%{translate:0 0}35%{translate:0 -1.2vh}100%{translate:0 0}}
.hero.open .hbook{transform:translateX(calc(var(--bw) / 2)) translateY(1vh) rotateX(12deg) rotateZ(0deg) scale(1);transition:transform 1.5s cubic-bezier(.45,.05,.25,1)}
.hero.read .hbook{transform:translateX(0) translateY(0) rotateX(6deg) scale(var(--read));transition:transform 2.2s cubic-bezier(.45,.05,.3,1)}
.hero.fall .hbook{transform:translateX(0) translateY(0) rotateX(0deg) scale(4.2);transition:transform 1.25s cubic-bezier(.65,0,.9,.55)}
/* the block of pages, with its edge showing */
.hblock{position:absolute;inset:3px 0 3px 3px;background:#efe5cf;border-radius:0 4px 4px 0;transform:translateZ(0);
  box-shadow:1px 1px 0 #e3d8bf,2px 2px 0 #d4c8ac,3px 3px 0 #e6dcc4,4px 4px 0 #cdbfa2,5px 5px 0 #ddd2b8,6px 7px 26px rgba(0,0,0,.75),0 30px 60px rgba(0,0,0,.6)}
.hpage,.hleaf,.hcover{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d}
.hpage{transform:translateZ(1px)}
.hleaf{transform:translateZ(2px);transition:transform 1.35s cubic-bezier(.45,.05,.3,1)}
.hcover{transform:translateZ(4px);transition:transform 1.7s cubic-bezier(.45,.05,.25,1) .1s}
.hero.open .hcover{transform:translateZ(4px) rotateY(-179deg)}
.hero.turn .hleaf{transform:translateZ(3px) rotateY(-177deg)}
.hface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.hface.hback{transform:rotateY(180deg)}
/* paper */
.hbase,.hleaf .hface{background:linear-gradient(90deg,rgba(90,60,20,.22),rgba(90,60,20,0) 9%),radial-gradient(ellipse at 60% 40%,#f8f0dc,#ece0c4 85%);border-radius:0 4px 4px 0}
.hleaf .hback{background:linear-gradient(270deg,rgba(90,60,20,.24),rgba(90,60,20,0) 10%),radial-gradient(ellipse at 40% 40%,#f8f0dc,#ece0c4 85%);border-radius:4px 0 0 4px}
/* the cover */
.hcover .hfront{border-radius:2px 6px 6px 2px;background:#0a0806;box-shadow:inset 0 0 0 1px rgba(255,230,170,.08)}
.hcover .hfront img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hcover .hfront::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.08) 3.5%,rgba(0,0,0,.25) 5.5%,transparent 9%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 20%);pointer-events:none}
.hspark{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none}
.hsheen{position:absolute;inset:-10%;background:linear-gradient(105deg,transparent 38%,rgba(255,240,205,.32) 49%,rgba(255,255,240,.5) 50%,rgba(255,240,205,.28) 51%,transparent 62%);transform:translateX(-90%);pointer-events:none;mix-blend-mode:soft-light}
.hero.sheen .hsheen{transform:translateX(90%);transition:transform 1.9s cubic-bezier(.4,0,.2,1)}
.hcover .hback{border-radius:6px 2px 2px 6px;background:#0b0e08}
.hend{position:absolute;inset:0;width:100%;height:100%}
.hcover .hback::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.5),transparent 10%);pointer-events:none}
/* type on the pages */
.hpin{position:absolute;inset:11% 12%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#2c2216;font-family:var(--serif)}
.hbase .hpin{justify-content:flex-start;padding-top:12%}
.hpin small{font:600 calc(var(--bw) * .045)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#8a6a3a;margin-bottom:.9em}
.hpin b{font:400 calc(var(--bw) * .115)/1.05 var(--serif);color:#2a1f14;letter-spacing:.01em}
.horn{display:block;font-style:normal;margin:.55em 0 .7em;color:#b08a3c;font-size:calc(var(--bw) * .07)}
.horn::before{content:"\2766"}
.hpin p{margin:0;font:calc(var(--bw) * .05)/1.6 var(--serif);text-align:left;color:#3a2e20}
.hdrop{float:left;font-size:3.1em;line-height:.82;margin:.04em .08em 0 0;color:#8a5a20}
.hfly{justify-content:center}
.hink{font:italic calc(var(--bw) * .066)/1.55 "Snell Roundhand","Apple Chancery","Segoe Script","Bradley Hand","Brush Script MT",cursive!important;color:#25304a!important;text-align:center!important;transform:rotate(-2.5deg)}
.hink span{opacity:0;filter:blur(1.5px)}
.hero.ink .hink span{animation:hinkin .55s ease-out forwards;animation-delay:calc(var(--i) * 34ms)}
@keyframes hinkin{to{opacity:.92;filter:blur(0)}}
.hsig{margin-top:1.2em!important;font:italic calc(var(--bw) * .036)/1.3 var(--serif)!important;color:#8a7a60!important;text-align:center!important;opacity:0;transition:opacity 1s ease 3.6s}
.hero.ink .hsig{opacity:1}
.hhalf{justify-content:center}
.hhalf b{font-size:calc(var(--bw) * .085)}
/* the fall into the page */
.hflash{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fffaf0,#ffe9b8 45%,#f2c26a 100%);opacity:0;transition:opacity .85s ease-in}
.hero.white .hflash{opacity:1}
.hskip{position:absolute;right:calc(18px + var(--safe-r,0px));bottom:calc(18px + var(--safe-b));z-index:5;font:600 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,227,200,.55);background:none;border:1px solid rgba(239,227,200,.18);border-radius:999px;padding:.6em 1.05em;cursor:pointer;opacity:0;transition:opacity .8s,color .2s}
.hero.askip .hskip{opacity:1}
.hero.fall .hskip{opacity:0}
.hero.fast *,.hero.fast .hbook{transition-duration:.45s!important;transition-delay:0s!important}
.hero.fast .hink span,.hero.still .hink span{animation:none;opacity:.92;filter:none}
.hero.fast .hsig,.hero.still .hsig{transition-delay:0s}
/* reduced motion: the open book, still */
.hero.still::after{opacity:1}
.hero.still .hbook{opacity:1;transition:none;transform:translateX(calc(var(--bw) / 2)) rotateX(10deg)}
.hero.still .hcover{transition:none;transform:translateZ(4px) rotateY(-179deg)}
.hero.still .hleaf{transition:none;transform:translateZ(3px) rotateY(-177deg)}
.hero.still .hsig{opacity:1}

/* ================= the words: one box, one way =================
   Dialogue and narration share a box, a place (the bottom), a size and a
   pace. Narration is the book's own voice: no name, no portrait, a thread of
   gold along the top. The type is large and high-contrast on a nearly solid
   panel, never more than three lines a page. */
.dlg,.narr{left:50%;right:auto;top:auto;bottom:calc(18px + var(--safe-b));width:min(760px,calc(100vw - 24px));min-height:calc(var(--tfs) * 1.56 * 3 + 2.1em);box-sizing:border-box;background:linear-gradient(180deg,rgba(24,19,13,.97),rgba(14,11,8,.97));border:1px solid rgba(255,236,200,.14);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,240,210,.06);transform:translate(-50%,14px);transition:opacity .18s,transform .22s cubic-bezier(.2,.9,.3,1)}
.dlg.on,.narr.on{transform:translate(-50%,0)}
:root{--tfs:calc(var(--fs) * 1.16)}
.dlg p,.narr p{font:400 var(--tfs)/1.56 var(--serif);color:#f6ecd6;letter-spacing:.004em;text-shadow:0 1px 0 rgba(0,0,0,.6);margin:0}
.dlg b{font:700 .74rem/1 var(--sans);letter-spacing:.14em;margin:.15em 0 .5em}
.narr{padding:1.05em 1.4em 1.15em;border-top:1px solid rgba(255,209,102,.4)}
.narr::before{content:"";position:absolute;left:50%;top:-1px;width:38%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#ffd166,transparent)}
.narr p{font-style:normal;color:#f1e4c6}
.narr p em,.dlg p em{font-style:italic;color:inherit}
/* the words that matter */
.hlr{color:#ff8f72}.hlg{color:#ffd166}.hlb{color:#8fd2ff}
em.hlr,em.hlg,em.hlb{font-style:italic}
.gh,.gh.hlr,.gh.hlg,.gh.hlb,em.gh{color:transparent!important;text-shadow:none}
/* the arrow: a beat after the box fills */
.dlg .more,.narr .more{right:16px;bottom:10px;font-size:.9rem;color:#ffd166;text-shadow:0 0 8px rgba(255,209,102,.6);animation:bob .9s ease-in-out infinite,morein .25s ease-out}
@keyframes morein{from{opacity:0;transform:translateY(-4px)}}
.narr.hasmore #nmore::after{content:"  more in the book";font:italic .72rem var(--serif);color:rgba(239,227,200,.6)}
/* Mo: not a box; but it never has to fight the picture to be read */
.mo::after{content:"";position:absolute;inset:-90% -14%;z-index:-2;background:radial-gradient(ellipse closest-side at center,rgba(6,5,3,.8),rgba(6,5,3,.55) 55%,transparent);pointer-events:none}
.mo p{font-size:calc(var(--fs) * 1.5);text-shadow:0 0 16px rgba(255,190,80,.55),0 1px 2px rgba(0,0,0,.95)}
@media (max-width:520px){
  :root{--tfs:calc(var(--fs) * 1.08)}
  .dlg,.narr{width:calc(100vw - 16px);bottom:calc(10px + var(--safe-b));padding:.85em 1em 1em}
  .dlg p,.narr p{font-size:var(--tfs)}
  .mo p{font-size:calc(var(--fs) * 1.3)}
}
body.phoneup .narr{top:auto;bottom:calc(14px + var(--safe-b))}
.dlg{border-left-width:4px;min-height:calc(var(--tfs) * 1.56 * 3 + 3.4em)}