@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:block;src:url(/assets/fonts/big-shoulders-display-700.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:block;src:url(/assets/fonts/big-shoulders-display-800.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:block;src:url(/assets/fonts/big-shoulders-display-900.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Text';font-style:normal;font-weight:500;font-display:block;src:url(/assets/fonts/big-shoulders-text-500.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Text';font-style:normal;font-weight:600;font-display:block;src:url(/assets/fonts/big-shoulders-text-600.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Text';font-style:normal;font-weight:700;font-display:block;src:url(/assets/fonts/big-shoulders-text-700.woff2) format('woff2')}
:root{--plum:#3A0F4F;--deep:#1C0727;--gold:#D4A848;--ivory:#FAF6E8;--purple:#7B2CFF;--onyx:#14111C;--disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;--txt:'Big Shoulders Text','Arial Narrow',sans-serif}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--onyx);color:var(--ivory);font-family:var(--txt)}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
/* the homepage's backdrop until the walk is asked for (launch.js): the hologram's night sky and floor grid, in CSS,
   so the page opens with nothing to download or build behind it; gone once the venue renders (body.world-on) */
#backdrop{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 50% 28%,#2B1472 0%,#1B0A4A 52%,#10062E 100%)}
#backdrop::before{content:"";position:absolute;left:-60%;right:-60%;top:54%;height:120%;transform-origin:50% 0;transform:perspective(520px) rotateX(64deg);
  background-image:linear-gradient(rgba(214,198,255,.28) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(214,198,255,.28) 1.5px,transparent 1.5px);background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 80%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 80%)}
#backdrop::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 5px,rgba(27,10,74,.22) 5px 6px)}
body.world-on #backdrop{display:none}
button{font:inherit;cursor:pointer}
kbd{font:800 14px var(--disp);display:inline-block;min-width:26px;text-align:center;padding:4px 7px 3px;border:1px solid rgba(250,246,232,.45);border-bottom-width:3px;border-radius:4px;margin-right:3px;color:var(--ivory)}


#overlay{position:fixed;inset:0;z-index:20;display:none;background:linear-gradient(100deg,rgba(28,7,39,.94) 0%,rgba(28,7,39,.8) 45%,rgba(28,7,39,.2) 100%);padding:5vh 5vw;overflow:auto}
#overlay.on{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center}
#overlay .main{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px;width:100%}
.brand{display:flex;align-items:center;gap:12px;font:600 18px var(--txt);color:var(--gold)}
.brand svg{width:36px;height:36px;flex:none}
.title{font:900 clamp(70px,11vw,178px)/.8 var(--disp);margin:2.4vh 0 2.2vh}
#lede{font:500 clamp(19px,1.7vw,26px)/1.3 var(--txt);max-width:26em;color:rgba(250,246,232,.92);margin-inline:auto}
.actions{display:flex;gap:12px;margin:3.4vh 0 3.2vh;flex-wrap:wrap;justify-content:center}
.btn{font:800 22px var(--disp);padding:13px 26px 11px;border:0;border-radius:2px;background:var(--gold);color:var(--onyx)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(250,246,232,.5)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold);filter:none}
h3{font:800 17px var(--disp);color:var(--gold);margin:0 0 10px}
/* Google Material Symbols, Rounded and filled, for every icon */
.msym{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
/* the show reel: each shot fades in from black */
#reelFade{position:fixed;inset:0;z-index:55;pointer-events:none;background:#0B0416;opacity:0;transition:opacity .55s ease-out}
#reelFade.cut{opacity:1;transition:none}
.side{align-self:end;background:rgba(20,17,28,.74);border-top:4px solid var(--gold);padding:22px 24px 20px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;font:500 16px/1.25 var(--txt)}
.legend{display:flex;flex-wrap:wrap;gap:6px 15px;font:600 14px var(--txt)}
.side .legend{margin-top:20px}
.legend span::before{content:'';display:inline-block;width:11px;height:11px;background:var(--c);margin-right:6px;vertical-align:-1px;border-radius:2px}
.fine{font:500 13.5px/1.45 var(--txt);color:rgba(250,246,232,.62);margin-top:16px;max-width:42em}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .3s}
body.playing #hud{opacity:1}
#where{position:absolute;left:20px;top:20px;width:330px}
/* the zone and place cards: Material cards (12px corners, 16px padding, surface container) */
.zone{display:flex;gap:11px;align-items:flex-start;background:rgba(20,17,28,.78);padding:12px 16px;border-radius:12px}
#zdot{width:12px;height:12px;border-radius:2px;margin-top:4px;flex:none;box-shadow:0 0 0 1px rgba(250,246,232,.45)}
#zname{font:800 22px/1.15 var(--disp)}  /* title-large */
#zsub{font:500 14px/1.3 var(--txt);color:rgba(250,246,232,.72);margin-top:3px}
#card{margin-top:8px;background:rgba(28,7,39,.92);border-left:4px solid var(--cat,#7B2CFF);border-radius:12px;padding:16px;transform:translateX(-10px);opacity:0;transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1)}
#card.on{opacity:1;transform:none}
#cname{font:800 28px/1.1 var(--disp)}
#ccat{font:700 13.5px var(--txt);color:var(--cat);margin-top:6px;filter:brightness(1.25) saturate(.9)}
#csize{font:600 15px var(--txt);margin-top:9px}
#cnote{font:500 14px/1.35 var(--txt);color:rgba(250,246,232,.74);margin-top:4px}
#mini{position:absolute;left:20px;bottom:20px;width:200px;height:200px;border-radius:50%;box-shadow:0 0 0 3px var(--gold),0 8px 30px rgba(0,0,0,.45)}
#keys{position:absolute;left:20px;bottom:18px;display:flex;flex-wrap:wrap;gap:4px 15px;font:500 14px var(--txt);color:rgba(250,246,232,.88);text-shadow:0 1px 3px rgba(0,0,0,.9);max-width:74vw}
#keys kbd{font-size:12px;min-width:20px;padding:2px 5px 1px;background:rgba(20,17,28,.6)}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--ivory);box-shadow:0 0 0 1.5px rgba(20,17,28,.7)}
/* toasts as Material snackbars: inverse surface, 4px corners, 48px, body-medium, above the controls */
#toast{position:fixed;z-index:30;left:50%;bottom:64px;transform:translate(-50%,8px);background:var(--ivory);color:var(--onyx);font:500 14px/1.4 var(--txt);min-height:48px;display:flex;align-items:center;padding:12px 16px;border-radius:4px;max-width:min(560px,90vw);box-shadow:0 6px 10px rgba(0,0,0,.28),0 1px 18px rgba(0,0,0,.22);opacity:0;transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1);pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

#mapview{position:fixed;inset:0;z-index:25;background:rgba(22,7,31,.97);display:none;flex-direction:column;padding:22px 26px 18px}
#mapview.on{display:flex}
.maphead{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.maphead h2{font:900 46px/1 var(--disp)}
.tabs button{font:700 15px var(--txt);background:transparent;color:var(--ivory);border:1px solid rgba(250,246,232,.35);padding:6px 13px;margin-right:6px;border-radius:999px}
.tabs button.sel{background:var(--ivory);color:var(--onyx);border-color:var(--ivory)}
#mapClose{margin-left:auto;font-size:19px;padding:10px 18px 8px}
#bigmap{flex:1;width:100%;min-height:0;margin:14px 0 10px;cursor:crosshair}
.mapfoot{display:flex;gap:26px;align-items:center;flex-wrap:wrap;font:500 15px var(--txt);color:rgba(250,246,232,.78)}
#tip{position:fixed;z-index:40;pointer-events:none;background:var(--onyx);border-left:4px solid var(--cat);padding:6px 11px 7px;display:none}
#tip.on{display:block}
#tip b{display:block;font:800 19px var(--disp)}
#tip span{font:600 12.5px var(--txt);color:rgba(250,246,232,.7)}
.brand img{height:42px;width:auto}
.presented{display:flex;align-items:center;gap:14px;margin:0 0 2.4vh}
.presented span{font:600 19px var(--txt);color:var(--gold)}
.presented b{background:#fff;display:inline-flex;align-items:center;padding:11px 18px;border-radius:3px}
.presented img{height:30px;width:auto;display:block}
.link{background:none;border:0;padding:0;margin-top:14px;font:700 15px var(--txt);color:var(--gold);text-decoration:underline;text-underline-offset:3px}
#logos{position:fixed;inset:0;z-index:35;background:rgba(22,7,31,.9);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
#logos.on{display:flex}
.lp{background:var(--onyx);border-top:4px solid var(--gold);width:min(780px,100%);max-height:88vh;overflow:auto;padding:22px 24px 12px}
.lph{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lph h2{font:900 40px/1 var(--disp)}
.lp p{font:500 15px/1.45 var(--txt);color:rgba(250,246,232,.75);margin:10px 0 14px;max-width:44em}
.lr{display:grid;grid-template-columns:120px 1fr auto auto;gap:14px;align-items:center;padding:9px 0;border-top:1px solid rgba(250,246,232,.1)}
.lr canvas{width:120px;height:48px;border-radius:3px;display:block}
.lr b{display:block;font:800 21px/1.1 var(--disp)}
.lr span{font:600 13px var(--txt);color:var(--green,#2EC27E)}
.lr span.tbd{color:var(--gold)}
.lr .up{font:700 14px var(--txt);border:1px solid rgba(250,246,232,.45);padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.lr .up:hover{border-color:var(--gold);color:var(--gold)}
.lr input{display:none}
.lr .rs{font:600 13px var(--txt);background:none;border:0;color:rgba(250,246,232,.6);text-decoration:underline}
@media (max-height:820px){.title{font-size:max(56px,min(11vw,14.5vh))}}
@media (max-width:900px){#overlay.on{grid-template-columns:1fr}.title{font-size:64px}}


/* ===== STANFEST site layer: ballpoint-on-notebook doodle theme ===== */
:root{
  --paper:#EEF1F6; --rule:#CBD7EC; --margin:#F2A0AE; --ink:#2431A8; --ink-soft:#4B55B8;
  --stan:#3F12B0; --lime:#C8F53A; --sun:#FFD84A; --pink:#FF86BF; --onpaper:#1A1F5C;
  --hand:'Gloria Hallelujah','Comic Sans MS','Chalkboard SE',cursive;   /* the homepage title uses Chewy: chunky, playful, hand-drawn with structure (the Cheetos wordmark's family), Anand, 27 Sep */
  --pen:'Figtree',system-ui,'Segoe UI',sans-serif;
  --disp:'Gloria Hallelujah','Arial Narrow',Impact,sans-serif; --txt:'Figtree',system-ui,sans-serif;
  --gold:#C8F53A; --plum:#3F12B0; --deep:#1B0A4A;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#16143A; --rule:#26245A; --margin:#5A2B63; --ink:#DADDFF; --ink-soft:#A9AEEA; --onpaper:#EDEEFF;
}}
:root[data-theme="dark"]{--paper:#16143A; --rule:#26245A; --margin:#5A2B63; --ink:#DADDFF; --ink-soft:#A9AEEA; --onpaper:#EDEEFF}
:root{padding-top:0}

/* --- walkthrough re-skin (landing) --- */
#overlay{background:radial-gradient(ellipse 70% 80% at 50% 55%,rgba(27,10,74,.94) 0%,rgba(27,10,74,.82) 50%,rgba(27,10,74,.45) 100%);padding-top:calc(88px + env(safe-area-inset-top,0px))}
#overlay .title{font-family:var(--hand);font-weight:400;letter-spacing:-.005em;word-spacing:.04em;line-height:1.24;font-size:clamp(28px,4.2vw,76px);margin-inline:auto;-webkit-text-stroke:.55px currentColor;paint-order:stroke fill;transform:none}   /* the hand font, given structure: level, evenly leaded, a hair of stroke so the strokes read as one weight (Anand, 27 Sep) */
#overlay .title .tl{white-space:nowrap}
#overlay .brand{font-family:var(--pen);color:var(--lime)}
#overlay .btn{font:400 24px/1 var(--hand);padding:12px 22px 10px;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;background:var(--lime);color:#14111C;box-shadow:3px 4px 0 #0c0624;border:2px solid #14111C}
#overlay .btn.ghost{background:transparent;color:#FAF6E8;box-shadow:none;border:2px dashed rgba(250,246,232,.6)}
#overlay .btn.ghost:hover{border-color:var(--lime);color:var(--lime)}
#overlay .btn.pass{background:var(--sun);text-decoration:none;display:inline-flex;align-items:center}
/* under the two CTAs: the reel and the map as quiet links */
#overlay .more{position:static;display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px;color:rgba(250,246,232,.5)}
#overlay .more .link{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 4px;cursor:pointer;color:rgba(250,246,232,.78);font:400 18px var(--pen);text-decoration:none}
#overlay .more .link .msym{font-size:20px;color:var(--lime)}
#overlay .more .link:hover{color:var(--lime)}
#overlay h3{font:400 22px var(--hand);color:var(--sun)}

.side{border-top:0!important;border-radius:6px;background:rgba(20,12,50,.8)!important;box-shadow:inset 0 0 0 2px rgba(200,245,58,.45)}
#logosBtn{display:none}
body.is-owner #logosBtn{display:inline}
#where{top:84px!important}
/* the walk (map view) has no header: the scene owns the whole screen; Esc brings the menu, and its full nav, back */
body.playing #snav{display:none}
body.playing #where{top:20px!important}

/* --- top nav: torn paper strip with a low-poly edge --- */
#snav{position:fixed;z-index:70;top:0;left:0;right:0;padding:env(safe-area-inset-top,0px) 48px 14px;background:var(--paper);color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 82%,96% 94%,91% 84%,86% 97%,80% 86%,74% 100%,69% 87%,63% 95%,57% 83%,51% 98%,45% 86%,39% 96%,33% 84%,27% 99%,21% 87%,15% 95%,9% 83%,4% 97%,0 86%)}
/* logo at the left end, the menu dead centre, the pass button at the right end; 48px in from either side */
#snav .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;min-height:58px}
#snav .right{justify-self:end;display:flex;align-items:center;gap:10px}
#snav .logo{font:400 30px/1 var(--hand);color:var(--stan);text-decoration:none;justify-self:start;white-space:nowrap;display:flex;align-items:center;gap:6px}
:root[data-theme="dark"] #snav .logo{color:var(--lime)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #snav .logo{color:var(--lime)}}
#snav .logo svg{width:34px;height:34px}
#snav nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;justify-self:center}
#snav nav::-webkit-scrollbar{display:none}
#snav nav a{font:400 17px var(--pen);color:var(--ink);text-decoration:none;padding:6px 11px 4px;border-radius:999px;white-space:nowrap;position:relative}
#snav nav a:hover{background:color-mix(in srgb,var(--lime) 55%,transparent)}
#snav nav a[aria-current="page"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C20 1 35 9 52 5 S85 2 98 6' stroke='%23FF86BF' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
#snav .cta{font:400 20px/1 var(--hand);text-decoration:none;color:#14111C;background:var(--sun);padding:9px 16px 7px;border:2px solid #14111C;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:2px 3px 0 #14111C;transform:rotate(1.5deg);white-space:nowrap}
#snav .theme{background:none;border:0;color:var(--ink);font:400 20px var(--hand);padding:6px;cursor:pointer}

/* --- site layer --- */
#site{position:fixed;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;display:none;color:var(--onpaper);font:400 18px/1.55 var(--pen);
  background-color:var(--paper);
  background-image:linear-gradient(90deg,transparent 0,transparent calc(max(16px,4vw) + 0px),var(--margin) calc(max(16px,4vw) + 0px),var(--margin) calc(max(16px,4vw) + 2px),transparent calc(max(16px,4vw) + 2px)),
    repeating-linear-gradient(180deg,transparent 0,transparent 33px,var(--rule) 33px,var(--rule) 34px);
  padding:calc(96px + env(safe-area-inset-top,0px)) 0 calc(60px + env(safe-area-inset-bottom,0px))}
body.site-open #site{display:block}
body.site-open #hud,body.site-open #overlay{visibility:hidden}
#site *{box-sizing:border-box}
#site a{color:var(--ink)}
#site :focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.page{display:none;max-width:1120px;margin:0 auto;padding:0 max(28px,calc(4vw + 22px))}
.page.on{display:block}
.page h1{font:400 clamp(46px,7.2vw,96px)/1.08 var(--hand);color:var(--ink);margin:0 0 18px;max-width:13ch;transform:rotate(-1.2deg);transform-origin:left}
.page h2{font:400 clamp(32px,4.4vw,52px)/1.15 var(--hand);color:var(--ink);margin:0 0 14px;max-width:18ch}
.page h3{font:700 21px/1.25 var(--pen);margin:0 0 4px;color:var(--onpaper)}
.page p{margin:0 0 12px;max-width:62ch}
.lede{font-size:21px;max-width:40ch}
.muted{color:var(--ink-soft);font-size:15px}
section.blk{margin:72px 0 0;position:relative}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr);gap:28px;align-items:end;min-height:min(62vh,560px)}
.hero .doodle{width:100%;max-width:340px;justify-self:center;color:var(--ink)}
@media (max-width:760px){.hero{grid-template-columns:1fr;min-height:0}.hero .doodle{max-width:210px;justify-self:start;order:-1}}

/* hand-drawn box */
.box{position:relative;padding:22px 22px 18px}
.box::before{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);border-radius:255px 14px 225px 14px/14px 225px 14px 255px;pointer-events:none}
.box.alt::before{border-radius:14px 225px 14px 255px/225px 14px 255px 14px}
.box.dash::before{border-style:dashed}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ico{width:52px;height:52px;color:var(--ink);display:block;margin-bottom:8px}
.ico path,.ico circle,.ico rect{vector-effect:non-scaling-stroke}
#site h1[tabindex]:focus,#site h2[tabindex]:focus,#site .done:focus{outline:none}
#site:focus{outline:none}

/* sticky notes */
.notes{display:flex;flex-wrap:wrap;gap:18px 20px;margin-top:26px}
.note{background:var(--sun);color:#1b1b1b;padding:18px 18px 14px;min-width:170px;flex:1 1 170px;max-width:260px;position:relative;box-shadow:2px 6px 10px rgba(20,20,60,.18);transform:rotate(var(--r,-1.5deg))}
.note:nth-child(2n){--r:1.8deg;background:var(--lime)}
.note:nth-child(3n){--r:-.6deg;background:var(--pink)}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(255,255,255,.55);transform:rotate(-3deg);border-left:1px dashed rgba(0,0,0,.15);border-right:1px dashed rgba(0,0,0,.15)}
.note b{display:block;font:400 40px/1.2 var(--hand)}
.note span{font:400 16px/1.3 var(--pen)}
.note small{display:block;font:400 13px var(--pen);opacity:.7;margin-top:6px}

/* scribble divider */
.scrib{display:block;width:100%;height:18px;color:var(--ink-soft);margin:64px 0 0}

/* sequence (real sequences only) */
.seq{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px 0;counter-reset:s}
.seq li{counter-increment:s;display:flex;align-items:center;font:400 17px var(--pen)}
.seq li span{padding:8px 14px 6px;position:relative}
.seq li span::before{content:"";position:absolute;inset:0;border:2px solid var(--ink);border-radius:50% 45% 55% 40%/55% 45% 50% 45%}
.seq li span::after{content:counter(s);position:absolute;top:-12px;left:-6px;font:400 20px var(--hand);color:var(--pink)}
.seq li+li::before{content:"";width:34px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M2 8 C10 5 18 9 28 7 M23 2 L30 7 L23 12' stroke='%234B55B8' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;margin:0 4px}

/* buttons */
.pbtn{display:inline-block;font:400 24px/1 var(--hand);text-decoration:none;cursor:pointer;color:#14111C;background:var(--lime);border:2.5px solid #14111C;padding:12px 22px 10px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:3px 4px 0 var(--ink);transition:transform .12s}
.pbtn:hover{transform:translate(-1px,-2px) rotate(-1deg)}
.pbtn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.pbtn.sun{background:var(--sun)} .pbtn.ghost{background:transparent;color:var(--ink);border-style:dashed;border-color:var(--ink);box-shadow:none}
.pbtn[disabled]{opacity:.5;cursor:wait}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}

/* chart */
.chart{width:100%;max-width:640px;color:var(--ink)}
.chart text{font-family:var(--hand);fill:var(--ink)}
.bars{display:grid;gap:10px;margin-top:10px}
.bar{display:grid;grid-template-columns:78px 1fr 48px;gap:10px;align-items:center;font:400 17px var(--pen)}
.bar i{display:block;height:22px;background:repeating-linear-gradient(-45deg,var(--c,var(--lime)) 0 6px,transparent 6px 10px);border:2px solid var(--ink);border-radius:3px 12px 4px 10px/10px 4px 12px 3px;width:var(--w)}
.bar b{font:400 22px var(--hand)}

/* table */
.tablewrap{overflow-x:auto;margin-top:12px;padding:6px 2px}
table.pk{border-collapse:separate;border-spacing:0;min-width:760px;width:100%;font:400 16px/1.35 var(--pen)}
table.pk th,table.pk td{padding:10px 12px;text-align:left;border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);vertical-align:top}
table.pk thead th{font:400 24px var(--hand);color:var(--ink);border-bottom:2.5px solid var(--ink)}
table.pk tbody th{font-weight:700;white-space:nowrap}

/* brand name wall */
.wall{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:10px;font:400 26px var(--hand);color:var(--ink-soft)}
.wall span:nth-child(3n){transform:rotate(-2deg)} .wall span:nth-child(4n){transform:rotate(2deg)}

/* forms */
form.f{display:grid;gap:18px;max-width:640px;margin-top:10px}
.fld{display:grid;gap:2px}
.fld label,.fld legend{font:700 16px var(--pen);color:var(--onpaper)}
.fld input,.fld select,.fld textarea{font:400 20px var(--pen);color:var(--ink);background:transparent;border:0;border-bottom:2.5px solid var(--ink);padding:4px 2px;border-radius:0;width:100%}
.fld textarea{min-height:90px;border:2.5px solid var(--ink);border-radius:8px 14px 6px 12px;padding:8px}
.fld select{appearance:auto}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:color-mix(in srgb,var(--lime) 30%,transparent)}
.fld .hint{font-size:14px;color:var(--ink-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
fieldset.fld{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips label{font:400 17px var(--pen);cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:6px 14px 4px;border:2px dashed var(--ink);border-radius:999px 30px 999px 40px}
.chips input:checked+span{background:var(--lime);color:#14111C;border-style:solid;border-color:#14111C}
.chips input:focus-visible+span{outline:3px dashed var(--pink);outline-offset:2px}
.err{color:#D0245A;font:700 15px var(--pen);min-height:1em}
:root[data-theme="dark"] .err{color:#FF8FB5}
.done{display:none}
.done.on{display:block}

/* ticket */
.ticket{max-width:560px;background:var(--sun);color:#14111C;padding:24px 26px;position:relative;transform:rotate(-1.2deg);margin:18px 0;
  clip-path:polygon(0 0,100% 0,100% 40%,97% 50%,100% 60%,100% 100%,0 100%,0 60%,3% 50%,0 40%)}
.ticket .code{font:400 44px/1 var(--hand);letter-spacing:.06em;margin:6px 0}
.ticket .meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font:400 17px var(--pen)}
.ticket .qr{position:absolute;right:26px;top:24px;width:92px;height:92px}
@media (max-width:520px){.ticket .qr{position:static;margin-top:10px}}

/* faq */
details.q{border-bottom:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);padding:12px 0}
details.q summary{font:400 26px var(--hand);color:var(--ink);cursor:pointer;list-style:none}
details.q summary::before{content:"+ ";color:var(--pink)}
details.q[open] summary::before{content:"– "}
details.q p{margin-top:6px}

/* footer */
.foot{margin-top:90px;padding-top:20px;border-top:2.5px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px 28px;font:400 16px var(--pen);color:var(--ink-soft)}
.foot a{color:var(--ink-soft)}

/* admin */
.adm table{width:100%;border-collapse:collapse;font:400 15px var(--pen)}
.adm td,.adm th{border-bottom:1px dashed var(--ink-soft);padding:6px 8px;text-align:left;vertical-align:top}

/* draw-on doodle (the one orchestrated moment) */
.page.on .draw path,.page.on .draw ellipse,.page.on .draw circle{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.8s ease-out forwards}
.page.on .draw .late{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.page.on .draw path,.page.on .draw ellipse,.page.on .draw circle{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.pbtn{transition:none}}

@media (max-width:760px){
  #snav{padding-left:16px;padding-right:16px}
  #snav .in{grid-template-columns:auto 1fr;gap:4px}
  #snav .right{grid-column:2;grid-row:1}
  #snav nav{grid-column:1/-1;justify-self:start;margin:0 -6px}
  #site{padding-top:calc(128px + env(safe-area-inset-top,0px))}
  #overlay{padding-top:calc(124px + env(safe-area-inset-top,0px))}
  #where,#mini{top:118px!important}
}

/* v3: readable buttons, imperfect lines, scrapbook photos */
.pbtn,#snav .cta,#overlay .btn{font-family:var(--pen)!important;font-weight:700!important;font-size:18px!important;line-height:1.2!important;letter-spacing:0!important}
#overlay .btn{font-size:19px!important}
.pbtn{padding:12px 20px 11px}
.box::before,.seq li span::before{filter:url(#wob2)}
.doodle,.chart,.ico{filter:url(#wob2)}
.grid>.box:nth-child(3n+1){transform:rotate(-.6deg)} .grid>.box:nth-child(3n+2){transform:rotate(.5deg) translateY(4px)} .grid>.box:nth-child(3n){transform:rotate(-.25deg)}
.snap{margin:0;background:#fff;padding:9px 9px 38px;box-shadow:2px 8px 18px rgba(20,20,60,.22);transform:rotate(var(--r,-1.5deg));position:relative;display:block}
.snap::before{content:"";position:absolute;z-index:2;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(255,236,150,.75);transform:rotate(calc(var(--r,-1.5deg) * -2.5));box-shadow:0 1px 2px rgba(0,0,0,.08)}
.snap img{display:block;width:100%;height:auto;clip-path:polygon(0.8% 1.6%,99.2% 0,100% 98%,1.6% 100%)}
.snap figcaption{position:absolute;left:14px;right:14px;bottom:6px;font:400 17px/1.3 var(--hand);color:#2431A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snap.wide{padding-bottom:9px;max-width:1080px} .snap.wide figcaption{display:none}
.snap.backers{max-width:640px}
.snap.big{max-width:520px}
.cap{margin-top:14px;font-size:17px}
.box .shot{display:block;width:calc(100% + 8px);margin:-6px -4px 14px;aspect-ratio:569/183;object-fit:cover;clip-path:polygon(0 4%,99% 0,100% 95%,2% 100%)}
.cases .snap img{aspect-ratio:422/353;object-fit:cover}
.pair{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;max-width:960px}
.pair .snap:nth-child(2){margin-top:30px}
@media (max-width:700px){.pair{grid-template-columns:1fr}}
.proof{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start;margin-top:10px}
@media (max-width:860px){.proof{grid-template-columns:1fr}}
.notes.tight{margin-top:6px;gap:16px}
.notes.tight .note{min-width:140px;flex:1 1 140px;padding:14px 14px 12px}
.notes.tight .note b{font-size:32px}
.anno{font:400 22px/1.3 var(--hand);color:var(--pink);transform:rotate(-1.5deg);margin:0 0 8px;display:inline-block}
.anno::after{content:"";display:inline-block;width:46px;height:22px;margin-left:6px;vertical-align:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 22'%3E%3Cpath d='M2 4 C14 2 30 6 38 16 M30 17 L39 17 L38 8' stroke='%23FF86BF' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}
:root[data-theme="dark"] .snap{background:#EDEEFF}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* walk HUD: controls centred along the bottom, and a nudge that Esc leaves the walk */
#keys{left:50%!important;right:auto;transform:translateX(-50%);justify-content:center;flex-wrap:nowrap;white-space:nowrap;gap:0 14px;max-width:none;bottom:22px}
#keys span{display:inline-flex;align-items:center;gap:2px}
#escHint{display:none!important}
@media (max-width:900px){#keys{flex-wrap:wrap;max-width:92vw;gap:4px 12px}}
/* the key you are holding lights up */
kbd.on{background:var(--lime)!important;color:#14111C!important;border-color:#14111C!important;box-shadow:0 0 0 2px rgba(200,245,58,.35);transform:translateY(1px)}
#escHint{position:absolute;top:84px;right:240px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;
  font:600 14px/1 var(--pen);color:var(--ivory);background:rgba(20,12,50,.72);border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(200,245,58,.45)}
#escHint kbd{margin:0}
body.touch #escHint{display:none}
@media (max-width:760px){#escHint{display:none}}

/* ===== landing: bare nav over the purple wash, and the two CTAs as objects (a ticket, a folded map) ===== */
body:not(.site-open) #snav{background:transparent;clip-path:none;color:#FAF6E8;padding-bottom:10px}
body:not(.site-open) #snav .logo{color:var(--lime)}
body:not(.site-open) #snav nav a{color:rgba(250,246,232,.92)}
body:not(.site-open) #snav nav a:hover{background:rgba(250,246,232,.14)}
#overlay .main{max-width:1320px}
/* rhythm: the title and the line sit as one block with room above and below; the cards a clear step under them */
/* nothing shows until the opening runs (landing-cards.js adds home-ready right before it starts) */
body:not(.home-ready) #overlay .lead,body:not(.home-ready) #overlay .cards .card{opacity:0}
#overlay .lead{margin:3.5vh 0 0}
#overlay .lead .title{margin:4vh 0 3.6vh}
#overlay .lead #lede{margin:0 auto}
#overlay .title .ch{display:inline-block;white-space:pre}
/* three columns, equal gaps, the pass twice a side card; the columns scale together */
#overlay .cards{display:grid;grid-template-columns:minmax(0,300fr) minmax(0,640fr) minmax(0,300fr);gap:28px;width:min(1296px,92vw);margin:8vh auto 3vh;align-items:stretch;justify-items:stretch}
#overlay .cards .card{width:auto!important;--tilt:0deg}
#overlay .kard{height:352px}
#overlay .more[hidden]{display:none}
@media (max-height:780px) and (min-width:761px){#overlay.on{align-content:start}#overlay .lead .title{font-size:min(8.5vw,92px);margin:1.4vh 0 1.6vh}#overlay{padding-top:calc(76px + env(safe-area-inset-top,0px))}#overlay .cards{margin-top:3.5vh}#overlay .kard{height:300px}}
#overlay .card{position:relative;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-decoration:none;text-align:left;outline-offset:6px;user-select:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 18px 28px rgba(6,2,20,.5))}
#overlay .card:focus-visible{outline:3px dashed var(--lime)}
#overlay .card .glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
/* three cards, one structure: a title row, a panel, one line, a button. Drawn in the site's hand (a ballpoint
   border through #wob, a hand-lettered title, a hard offset shadow, a hint of tilt) but kept calm and card-like.
   Colours: lime, sun, STAN purple. */
#overlay .kard{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;padding:18px 18px 16px;height:340px;color:#14111C;font-family:var(--pen);--ink:#14111C;
  border-radius:22px 18px 24px 18px/18px 24px 18px 22px;box-shadow:4px 6px 0 #14111C;transform:rotate(var(--tilt,0deg))}
#overlay .kard::before{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);border-radius:inherit;pointer-events:none;filter:url(#wob)}
#overlay .kard *{box-sizing:border-box}
#overlay .kard>*{min-width:0}
#overlay .locate{background:#4A1BA0;width:min(280px,21vw);--tilt:.9deg;padding:0;display:block;overflow:hidden}
#overlay .locate .fill{display:block;position:absolute;inset:0;background:#4A1BA0}
#overlay .locate .fill canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlay .pass{background:var(--sun);width:min(560px,43vw);--tilt:-.5deg}
#overlay .explore{background:#2A0B66;color:#C8F53A;width:min(280px,21vw);--tilt:-.9deg;padding:0;display:block;overflow:hidden}
/* one XR screen: dark glass, a faint hologram grid, the headset mark; the caption rises on hover, as on the map card */
#overlay .explore .screen{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 40%,#4A1BA0 0%,#2A0B66 55%,#160538 100%)}
#overlay .explore .grid{position:absolute;inset:0;background:linear-gradient(rgba(200,245,58,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(200,245,58,.10) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 100%)}
#overlay .explore .xr{position:relative;width:52%;height:auto;color:#C8F53A;filter:drop-shadow(0 0 14px rgba(200,245,58,.55));transition:transform .4s cubic-bezier(.22,1,.36,1)}
#overlay .explore:hover .xr,#overlay .explore:focus-visible .xr{transform:translateY(-10px) scale(1.04)}
#overlay .explore .glint{position:absolute;left:-40%;top:0;bottom:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-14deg);transition:left .7s ease}
#overlay .explore:hover .glint{left:110%}
#overlay .kard .cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;font:700 17px/1.2 var(--pen);color:#14111C;background:var(--lime);transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
#overlay .kard:hover .cap,#overlay .kard:focus-visible .cap{transform:translateY(0)}
#overlay .kard .cap i{font-style:normal;font-size:18px;line-height:1}
@media (hover:none){#overlay .kard .cap{transform:none}}
#overlay .kard .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:38px}
#overlay .kard .hd b{position:relative;font:400 27px/1 var(--hand);transform:rotate(-1.2deg);transform-origin:left bottom;padding-bottom:6px;white-space:nowrap}
#overlay .pass .hd b{font-size:42px}
#overlay .pass .scrib{position:absolute;left:0;right:4%;bottom:0;height:9px;color:var(--pink)}
#overlay .pass .scrib path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round}
#overlay .pass .tag{font:400 24px/1 var(--hand);background:#14111C;color:var(--sun);padding:8px 12px 5px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transform:rotate(3deg)}
#overlay .kard .panel{display:block;position:relative;border-radius:12px 9px 13px 9px/9px 13px 9px 12px;overflow:hidden;min-height:0;background:#6E6446}
#overlay .kard .panel::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);border-radius:inherit;pointer-events:none;filter:url(#wob)}
#overlay .kard .panel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlay .kard .line{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;line-height:1.25;letter-spacing:.005em;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overlay .kard .line .msym{font-size:18px;flex:none}
#overlay .kard .line kbd{font:800 10px/1 var(--pen);border:1.5px solid currentColor;border-radius:5px;padding:3px 4px 2px;margin-left:2px}
#overlay .kard .btn{display:flex;align-items:center;justify-content:center;gap:8px;font:700 17px/1.2 var(--pen);padding:12px 16px 11px;border:2px solid #14111C;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:3px 4px 0 #14111C;background:#14111C;color:var(--sun);transition:transform .15s,box-shadow .15s}
#overlay .locate .btn{background:#14111C;color:var(--lime)}
#overlay .kard:hover .btn{transform:translate(-1px,-1px);box-shadow:4px 5px 0 #14111C}
#overlay .kard:active .btn{transform:translate(2px,3px);box-shadow:0 0 0 #14111C}
#overlay .kard .btn i{font-style:normal;font-size:18px;line-height:1}
/* the pass: the code block beside three short lines */
#overlay .pass .body{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;min-height:0}
#overlay .pass .panel.qr{width:150px;height:150px;padding:10px;background:#FFF3B8;display:grid;place-items:center}
#overlay .pass .panel.qr canvas{position:static;width:126px;height:126px}
#overlay .pass .copy{display:grid;gap:6px;align-content:center}
#overlay .pass .copy b{font:400 24px/1.05 var(--hand)}
#overlay .pass .copy span{font-weight:600;font-size:14px;line-height:1.3}
#overlay .pass .copy .muted{font-weight:500;font-size:12px;line-height:1.4;opacity:.8}
/* pass hover: a scan line over the code, a rubber stamp */
#overlay .pass .scan{position:absolute;left:6px;right:6px;top:8px;height:3px;border-radius:2px;background:var(--lime);box-shadow:0 0 10px 2px rgba(200,245,58,.8);opacity:0;pointer-events:none}
#overlay .pass .stamp{position:absolute;right:30px;top:84px;font:400 19px/1 var(--hand);text-align:center;color:var(--pink);border:2.5px dashed var(--pink);border-radius:50% 45% 55% 40%/55% 45% 50% 45%;padding:12px 10px 10px;transform:rotate(-14deg);opacity:0;pointer-events:none;mix-blend-mode:multiply}
#overlay .card{filter:none}
@media (max-width:1180px){#overlay .pass .copy .muted{display:none}#overlay .kard{height:320px}#overlay .cards{gap:20px}}
@media (max-width:760px){#overlay.on{align-content:start}#overlay .cards{grid-template-columns:1fr;gap:18px;width:min(560px,90vw);margin-top:4vh}#overlay .pass,#overlay .locate,#overlay .explore{height:auto}#overlay .locate,#overlay .explore{height:300px}#overlay .pass{order:-1}#overlay .pass .body{grid-template-columns:auto 1fr}#overlay .pass .panel.qr{width:120px;height:120px}#overlay .pass .panel.qr canvas{width:100px;height:100px}}