@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-500.woff) format("woff");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400i.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
:root{--ink:#ece8f4;--mute:#a49fb4;--v:#b9a4ff;--t:#7fe6da;--amber:#f2c26b;--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07060d;color:var(--ink);font:15px/1.5 var(--sans);-webkit-text-size-adjust:100%;overscroll-behavior:none}
button{font:inherit;color:inherit}
/* painted backdrop: two canvases that cross-fade between rooms */
#paint{position:fixed;inset:0;overflow:hidden;z-index:0}
#paint .pc{position:absolute;inset:-3%;width:106%;height:106%;opacity:0;transition:opacity 1.4s ease;animation:drift 40s ease-in-out infinite alternate}
#paint .pc.on{opacity:1}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.04) translate3d(-1%,-.8%,0)}}
#mist{position:fixed;inset:-20%;z-index:1;pointer-events:none;opacity:.5;background:radial-gradient(40% 30% at 30% 70%,rgba(185,164,255,.10),transparent 70%),radial-gradient(35% 25% at 75% 60%,rgba(127,230,218,.08),transparent 70%);animation:mist 26s ease-in-out infinite alternate}
@keyframes mist{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
#shade{position:fixed;left:0;right:0;bottom:0;height:70%;z-index:2;pointer-events:none;background:linear-gradient(transparent,rgba(5,4,10,.55) 36%,rgba(5,4,10,.9) 80%)}
#hud{position:fixed;z-index:6;top:calc(10px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:56px}
#hud .brand{font:500 21px/1 var(--serif);letter-spacing:.12em;color:#f1ecfa;text-decoration:none;text-shadow:0 0 14px rgba(185,164,255,.35)}
#foot{position:fixed;z-index:6;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));text-align:center;font-size:11.5px;letter-spacing:.03em;color:#8d879d;padding:0 16px;pointer-events:none}
#panel{position:fixed;z-index:5;left:0;right:0;top:calc(52px + env(safe-area-inset-top));bottom:calc(26px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px calc(20px + env(safe-area-inset-right)) 14px calc(20px + env(safe-area-inset-left));display:flex;flex-direction:column;scrollbar-width:none}
#panel::-webkit-scrollbar{display:none}
#panel .in{margin:auto auto 0;width:100%;max-width:520px;text-align:center;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
#panel.mid .in{margin:auto}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.eb{margin:0 0 6px;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--t)}
h1,h2{font-family:var(--serif);font-weight:500;margin:0 0 6px;line-height:1.05;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.6)}
h1{font-size:clamp(40px,11vw,64px)}
h2{font-size:clamp(30px,8.4vw,44px)}
.lede{font:400 20px/1.35 var(--serif);margin:0 auto 16px;max-width:30ch;color:#e6e0f2;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.sm{font-size:13.5px;color:var(--mute);margin:8px auto 0;max-width:34ch}
.btn{appearance:none;border:1px solid rgba(236,232,244,.32);background:rgba(12,10,22,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f4f0fb;border-radius:999px;padding:12px 20px;min-height:48px;font-size:15.5px;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s,border-color .2s,transform .12s}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--v);outline-offset:2px}
.btn.xl{display:block;width:100%;max-width:340px;margin:0 auto 10px;min-height:54px;font-size:16.5px;font-weight:500;border-color:rgba(185,164,255,.6);background:rgba(44,32,92,.5);box-shadow:0 0 22px rgba(185,164,255,.12)}
.btn.xl small{display:block;font-weight:400;font-size:12.5px;color:#bdb5d6;letter-spacing:.02em;margin-top:1px}
.btn.go{border-color:rgba(127,230,218,.75);background:rgba(18,70,70,.5)}
.btn.quiet{border-color:rgba(236,232,244,.16);background:transparent;color:#bdb6cc;min-height:42px;font-size:14px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.back{display:inline-block;margin-top:14px;color:#bdb6cc;font-size:13.5px;text-decoration:none;border-bottom:1px solid rgba(189,182,204,.3);background:none;border-top:0;border-left:0;border-right:0;padding:4px 0;cursor:pointer}
.mine{margin:12px auto 0;font-size:12.5px;color:#a49fb4;line-height:1.6}
.mine b{color:#e6e0f2;font-weight:500}
/* zener */
.stage{display:grid;place-items:center;margin:4px auto 12px;perspective:900px}
.card{position:relative;width:132px;height:184px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.card.flip{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.card .b{background:repeating-linear-gradient(45deg,rgba(185,164,255,.13) 0 6px,transparent 6px 12px),linear-gradient(160deg,#2a2152,#141029);border:1px solid rgba(185,164,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 6px rgba(10,8,20,.5)}
.card .b::after{content:'';width:54px;height:54px;border-radius:50%;border:1px solid rgba(185,164,255,.5);box-shadow:0 0 18px rgba(185,164,255,.25)}
.card .f{transform:rotateY(180deg);background:linear-gradient(160deg,#f1ecdf,#d9d2c0);border:1px solid #fff6;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.card .f svg{width:78px;height:78px;stroke:#2b4f9a;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card.hit .f{box-shadow:0 0 0 2px var(--t),0 0 34px rgba(127,230,218,.55)}
.syms{display:flex;gap:8px;justify-content:center;margin:2px auto 6px}
.sym{appearance:none;width:58px;height:58px;border-radius:14px;border:1px solid rgba(236,232,244,.3);background:rgba(12,10,22,.6);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .2s,background-color .2s,transform .12s}
.sym:active{transform:scale(.94)}
.sym svg{width:30px;height:30px;stroke:#e9e3f7;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sym.pick{border-color:var(--v);background:rgba(60,44,120,.6)}
.sym[disabled]{cursor:default}
.prog{font-size:13px;letter-spacing:.08em;color:#c9c2dc;margin:0 0 6px}
.prog b{color:var(--t);font-weight:600}
.pips{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:300px;margin:0 auto 10px}
.pips i{width:8px;height:8px;border-radius:50%;background:rgba(236,232,244,.14)}
.pips i.h{background:var(--t);box-shadow:0 0 6px var(--t)}
.pips i.m{background:rgba(236,232,244,.42)}
/* result */
.score{font:500 54px/1 var(--serif);margin:2px 0 2px}
.score small{font-size:22px;color:var(--mute)}
.vs{font-size:14px;color:#cfc8e2;margin:0 0 10px}
.dist{display:flex;align-items:flex-end;gap:2px;height:74px;max-width:320px;margin:6px auto 2px;padding:0 4px}
.dist i{flex:1;background:rgba(185,164,255,.28);border-radius:2px 2px 0 0;min-height:1px}
.dist i.ch{background:rgba(185,164,255,.5)}
.dist i.you{background:var(--t);box-shadow:0 0 10px rgba(127,230,218,.6)}
.dax{display:flex;justify-content:space-between;max-width:320px;margin:0 auto;padding:0 4px;font-size:10.5px;color:#8d879d}
.odds{margin:10px auto 0;font-size:14.5px;color:#e6e0f2;max-width:32ch}
.odds b{color:var(--t);font-weight:600}
.note{font:italic 17px/1.35 var(--serif);color:#d9d2ea;margin:8px auto 0;max-width:30ch}
/* doors */
.doors{display:flex;gap:10px;justify-content:center;margin:6px auto 12px}
.door{appearance:none;position:relative;width:66px;height:132px;border-radius:34px 34px 6px 6px;border:1px solid rgba(236,232,244,.26);background:linear-gradient(#17132a,#0c0a16);cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .15s,border-color .3s,box-shadow .5s}
.door::before{content:'';position:absolute;left:10%;right:10%;bottom:0;height:4px;border-radius:2px;background:var(--c);box-shadow:0 0 12px 3px var(--c);opacity:.75}
.door::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 100%,var(--c),transparent 75%);opacity:0;transition:opacity .6s}
.door:active{transform:scale(.96)}
.door.pick{border-color:#f4f0fb;box-shadow:0 0 0 1px #f4f0fb inset}
.door.open{border-color:var(--c);box-shadow:0 0 30px var(--c)}
.door.open::after{opacity:.9}
.door[disabled]{cursor:default}
.dl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a49fb4;margin-top:-4px}
.wait{min-height:22px;font-size:13.5px;color:#cfc8e2;margin:0 0 6px}
/* slides (why / record) */
.slide{background:rgba(10,8,20,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(185,164,255,.2);border-radius:18px;padding:18px 18px 16px;margin:0 auto;max-width:440px}
.slide .yr{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.slide h2{font-size:clamp(28px,7.6vw,38px)}
.slide p{margin:8px auto 0;max-width:34ch;font-size:15px;line-height:1.5;color:#e3ddef}
.slide p.q{font:400 18.5px/1.35 var(--serif);color:#efe9f9}
.slide .src{margin-top:12px;font-size:11.5px;line-height:1.6;color:#8d879d}
.slide .src a{color:#a9a0c6;text-decoration:none;border-bottom:1px solid rgba(169,160,198,.3)}
.dots{display:flex;gap:7px;justify-content:center;margin:12px 0 0}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(236,232,244,.2)}
.dots i.on{background:var(--v);box-shadow:0 0 6px var(--v)}
.bday{margin:12px auto 0;min-height:44px;font-size:14px;color:#e6e0f2}
.bday b{color:var(--t)}
.cal{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:280px;margin:8px auto 0}
.cal i{width:14px;height:14px;border-radius:50%;background:rgba(185,164,255,.3)}
.cal i.m{background:var(--t);box-shadow:0 0 8px var(--t)}
@media (min-width:860px){#panel{padding-bottom:30px}h1{font-size:68px}}
@media (max-height:700px){.card{width:110px;height:154px}.door{height:112px}.lede{font-size:18px;margin-bottom:12px}.btn.xl{min-height:50px;margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){#paint .pc,#mist,#panel .in{animation:none!important}.card{transition:none}}
/* v2: hub tiles, Baseer's note, try-its */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:400px;margin:0 auto 6px}
.tile{appearance:none;border:1px solid rgba(185,164,255,.32);background:rgba(18,14,36,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f4f0fb;border-radius:16px;padding:11px 8px 10px;min-height:62px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s,border-color .2s}
.tile:active{transform:scale(.97)}.tile:focus-visible{outline:2px solid var(--v);outline-offset:2px}
.tile b{display:block;font:500 19px/1.1 var(--serif);letter-spacing:.02em}
.tile small{display:block;font-size:11.5px;color:#b5adcc;margin-top:3px}
.tile.wide{grid-column:1/-1;border-color:rgba(255,190,110,.45);background:linear-gradient(90deg,rgba(60,30,20,.45),rgba(40,26,80,.5))}
.btn.xl.quietxl{border-color:rgba(236,232,244,.24);background:rgba(12,10,22,.5);box-shadow:none}
.seal{display:inline-block;margin:2px auto 4px;padding:8px 14px;border:1px dashed rgba(127,230,218,.5);border-radius:12px;background:rgba(8,20,24,.5)}
.seal small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t)}
.seal code{font:13px/1.4 ui-monospace,Menlo,monospace;color:#e6e0f2}
code.tiny{font:10.5px ui-monospace,Menlo,monospace;color:#8d879d;word-break:break-all}
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 auto 8px}
.chip{appearance:none;border:1px solid rgba(236,232,244,.25);background:rgba(12,10,22,.55);color:#e9e3f7;border-radius:999px;padding:8px 13px;min-height:40px;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chip.on{border-color:var(--t);background:rgba(18,70,70,.6);color:#fff}
.sk{display:block;width:min(300px,100%);height:130px;margin:4px auto 0;border-radius:14px;border:1px solid rgba(185,164,255,.3);background:rgba(8,6,16,.6);touch-action:none}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:380px;margin:0 auto}
.thumb{appearance:none;padding:0;border:1px solid rgba(236,232,244,.22);border-radius:12px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:4/3;-webkit-tap-highlight-color:transparent}
.thumb canvas,.reveal canvas{display:block;width:100%;height:100%}
.thumb:active{transform:scale(.97)}
.reveal{display:flex;gap:8px;justify-content:center;margin:6px auto 10px;max-width:400px}
.reveal canvas{width:62%;height:auto;aspect-ratio:4/3;border-radius:12px;box-shadow:0 0 0 2px var(--t),0 0 26px rgba(127,230,218,.35)}
.reveal img{width:34%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;border:1px solid rgba(185,164,255,.3);background:rgba(8,6,16,.7)}
.pkbar{position:relative;height:16px;max-width:300px;margin:8px auto 8px;border-radius:9px;background:rgba(236,232,244,.12);overflow:hidden}
.pkbar i{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#8a6fff,#d8ccff);transition:width .08s}
.pkbar span{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:#f2c26b}
.opts .btn.xl{font-size:15.5px}
/* intro: arrive by falling out of the black hole */
#paint .pc.fall{animation:fall 2.6s cubic-bezier(.2,.7,.15,1) both}
@keyframes fall{from{transform:scale(3.4) rotate(-14deg);filter:blur(6px) brightness(.4)}to{transform:scale(1) rotate(0);filter:none}}
body.falling #panel .in{animation-delay:1.1s}
.bhgap{height:120px;margin:0 auto 4px;max-width:380px}@media (max-height:700px){.bhgap{height:104px}}
.bhc{display:block;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 54%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 54%,#000 55%,transparent 100%)}
body.falling .bhc{animation:bhin 2.4s cubic-bezier(.2,.7,.15,1) both}
@keyframes bhin{from{transform:scale(.25) rotate(-50deg);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.bhc{animation:none!important}}