[hidden]{display:none!important}
:root{
  color-scheme: dark;
  --ground:#07080d;
  --ink:#efe9dc;
  --muted:#a29fae;
  --panel:rgba(14,13,19,.72);
  --line:rgba(255,255,255,.14);
  --accent:#ffb867;
  --red:#c8282b;
  --blue-a:#5d7ddb;
  --blue-b:#3a55b3;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --osd:"VT323",ui-monospace,"Courier New",monospace;
  --type:"Courier Prime",ui-monospace,monospace;
  --hand:"Caveat",cursive;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--display)}
button{font:inherit;color:inherit}
a{color:var(--accent)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;opacity:0;transition:opacity 1.2s ease}
#gl.ready{opacity:1}
#gl.pointer{cursor:pointer}

/* ---------- loading / enter: a VCR menu glowing in the dark ---------- */
#osd{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--ground);opacity:0;pointer-events:none;transition:opacity .6s ease}
#osd.on{opacity:1;pointer-events:auto}
#osd .tv-scr{position:relative;width:min(84vw,calc(58vh*4/3),620px);aspect-ratio:4/3;border-radius:3%/4%;overflow:hidden;container-type:size;
  box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 70px 8px rgba(70,105,255,.24),0 0 220px 60px rgba(40,70,220,.13)}
#osd .tv-pic{position:absolute;inset:0;font-family:var(--osd);font-size:calc(100cqh/7.4);line-height:1;white-space:nowrap;color:#f4f5ff;
  background:radial-gradient(115% 100% at 48% 42%,var(--blue-a) 0,#4c6ac9 45%,var(--blue-b) 100%);
  text-shadow:.07em .07em 0 rgba(4,8,50,.5),0 0 .3em rgba(210,222,255,.35);animation:tvflick 3.3s steps(1) infinite}
#osd .tv-lb,#osd .tv-ch{position:absolute;top:7.5%;font-size:.6em;letter-spacing:.05em}
#osd .tv-lb{left:6.5%}
#osd .tv-ch{right:6.5%}
#osd .tv-mid{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.3em}
#osd .tv-logo{font-family:var(--display);font-weight:900;font-style:italic;font-size:1.05em;letter-spacing:-.01em}
#osd .tv-cta{display:none;font-size:.85em;letter-spacing:.06em}
#osd .tv-meter{display:flex;align-items:center;gap:.4em;font-size:.6em}
#osd .bar{display:block;width:8em;height:.46em;background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 .31em,transparent .31em .4em)}
#osd .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#f4f5ff 0 .31em,transparent .31em .4em);transition:width .2s}
#osd .tv-glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 6cqh 1.5cqh rgba(4,8,36,.6);
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,0) 34%),repeating-linear-gradient(to bottom,rgba(8,14,60,.24) 0 1px,rgba(8,14,60,0) 1px 3px)}
#osd .tv-mute{display:none;align-self:stretch;margin:.3em 6.5% 0;padding:.3em 0 .22em;font-family:var(--osd);font-size:.62em;letter-spacing:.1em;color:#f4f5ff;
  border:.09em solid rgba(244,245,255,.8);border-radius:.12em;background:linear-gradient(#f4f5ff,#f4f5ff) 0 0/0% 100% no-repeat,rgba(244,245,255,.07);
  cursor:pointer;transition:background-size .22s ease,color .22s;text-shadow:inherit}
#osd .tv-mute:hover,#osd .tv-mute:focus-visible{background-size:100% 100%;color:var(--blue-b);text-shadow:none;outline:none}
#osd .tv-mute:hover::before{content:"▶ "}
#osd.enter{cursor:pointer}
#osd.enter .tv-lb{opacity:0}
#osd.enter .tv-cta{display:block;animation:softblink 1.4s steps(1) infinite}
#osd.enter .tv-meter{display:none}
#osd.enter .tv-mute{display:block}
#enter{position:fixed;inset:0;opacity:0;z-index:19}
@keyframes softblink{50%{opacity:.25}}
@keyframes tvflick{0%,100%{filter:brightness(1)}47%{filter:brightness(1.04)}48%{filter:brightness(.97)}}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:5}
.top{top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 22px;
  pointer-events:none;background:linear-gradient(rgba(5,6,10,.85),rgba(5,6,10,.55) 60%,rgba(5,6,10,0))}
.top > *{pointer-events:auto}
/* the name: red neon, like the sign out of the window */
.name.neon{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,54px);letter-spacing:.03em;line-height:1;text-decoration:none;
  color:#ff4a3d;-webkit-text-stroke:1px rgba(255,214,204,.75);
  text-shadow:0 0 3px #ff9a8c,0 0 10px #ff3b2f,0 0 22px #ff2a1f,0 0 44px #e3160c,0 0 80px rgba(255,42,31,.65);
  animation:neonhum 6s infinite;transition:transform .25s}
.name.neon:hover{transform:scale(1.03)}
@keyframes neonhum{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.6;text-shadow:0 0 2px #ff9a8c,0 0 6px #ff3b2f}}
.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(8px,1.8vw,30px)}
/* menu items: neutral shimmer, alive under the cursor */
.menu .item{position:relative;font-family:var(--osd);font-size:clamp(26px,2.5vw,38px);letter-spacing:.1em;text-decoration:none;padding:.05em .25em 0;
  background:linear-gradient(100deg,#8f8a82 0%,#f6f1e7 22%,#b7b1a6 40%,#ffffff 55%,#9d978d 75%,#8f8a82 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),letter-spacing .25s,filter .25s}
.menu .item::after{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:2px;background:#f4efe6;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 8px rgba(255,255,255,.6)}
.menu .item:hover{transform:translateY(-2px) scale(1.08);letter-spacing:.14em;filter:drop-shadow(0 0 8px rgba(255,255,255,.45));animation-duration:1.6s}
.menu .item:hover::after,.menu .item.on::after{transform:scaleX(1)}
.menu .item.on{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
@keyframes shimmer{to{background-position:-250% 0}}
/* EARLY ACCESS: the loud one */
.menu .cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;font-family:var(--display);font-weight:900;font-style:italic;
  font-size:clamp(20px,1.9vw,28px);letter-spacing:.03em;text-decoration:none;color:#1b0b04;padding:.45em 1.1em .4em;border-radius:12px;
  background:linear-gradient(110deg,#ff3b2f,#ff8a1f 25%,#ffd25e 50%,#ff8a1f 75%,#ff3b2f);background-size:300% 100%;
  animation:playflow 3.2s linear infinite,playglow 1.6s ease-in-out infinite;box-shadow:0 0 0 2px rgba(255,255,255,.25) inset,0 8px 26px rgba(255,90,40,.4);
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.menu .cta .t{position:relative}
.menu .cta .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 48%,transparent 62%);transform:translateX(-120%);animation:shine 2.4s ease-in-out infinite}
.menu .cta:hover{transform:translateY(-2px) scale(1.07) rotate(-1deg)}
.menu .cta:active{transform:scale(.98)}
.menu .cta.on{box-shadow:0 0 0 2px #fff inset,0 0 40px rgba(255,140,40,.7)}
.menu a.x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#efe9dc;border:1px solid rgba(255,255,255,.28);transition:transform .25s,background .25s,border-color .25s}
.menu a.x:hover{transform:rotate(-8deg) scale(1.1);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.menu a.x svg{width:18px;height:18px;fill:currentColor}

/* the shimmering PLAY button, pinned left of the TV */
.play-btn{position:fixed;z-index:4;left:0;top:0;transform:translate(-100%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 26px 11px;border:0;border-radius:14px;cursor:pointer;overflow:hidden;color:#1b0b04;
  background:linear-gradient(110deg,#ff3b2f,#ff8a1f 25%,#ffd25e 50%,#ff8a1f 75%,#ff3b2f);background-size:300% 100%;
  animation:playflow 3.2s linear infinite,playglow 1.6s ease-in-out infinite;
  box-shadow:0 0 0 2px rgba(255,255,255,.25) inset,0 10px 30px rgba(255,90,40,.35);transition:opacity .4s, scale .2s}
.play-btn:hover{scale:1.06}
.play-btn:active{scale:.98}
.play-btn .lbl{position:relative;font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(20px,2vw,30px);letter-spacing:.02em;line-height:1}
.play-btn small{position:relative;font-family:var(--osd);font-size:17px;letter-spacing:.08em;opacity:.8;text-transform:uppercase}
.play-btn .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);transform:translateX(-120%);animation:shine 2.4s ease-in-out infinite}
.play-btn.fade{opacity:0;pointer-events:none}
.play-btn.under{transform:translate(-50%,0)}
@keyframes playflow{to{background-position:300% 0}}
@keyframes playglow{50%{box-shadow:0 0 0 2px rgba(255,255,255,.35) inset,0 0 44px 6px rgba(255,140,40,.55)}}
@keyframes shine{60%,100%{transform:translateX(120%)}}

.ctl{right:clamp(12px,1.5vw,24px);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ctl .hint{font-family:var(--osd);font-size:18px;color:rgba(239,233,220,.7);letter-spacing:.04em;text-shadow:0 1px 2px #000}
.ctl .btns{display:flex;gap:8px}
.sound{font-family:var(--osd);font-size:20px;letter-spacing:.08em;padding:.25em .9em .15em;border-radius:999px;border:1px solid var(--line);background:rgba(10,10,14,.6);backdrop-filter:blur(6px);cursor:pointer}
.sound:hover{border-color:rgba(255,255,255,.4)}
#sound{border-color:rgba(255,184,103,.55);color:var(--accent)}

/* ---------- panels ---------- */
.panel{top:150px;right:clamp(12px,1.6vw,28px);bottom:84px;width:min(440px,calc(100vw - 24px));display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:panelin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes panelin{from{opacity:0;transform:translateX(24px)}}
.panel > header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.panel .ch,.ea-head .ch{font-family:var(--osd);font-size:18px;letter-spacing:.1em;color:var(--accent)}
.panel h2{margin:2px 0 0;font-weight:900;font-style:italic;font-size:30px;letter-spacing:-.01em}
.close{font-family:var(--osd);font-size:18px;letter-spacing:.08em;background:transparent;border:1px solid var(--line);border-radius:999px;padding:.2em .8em .1em;cursor:pointer}
.close:hover{background:rgba(255,255,255,.08)}
.panel .body{flex:1;overflow:auto;padding:14px 20px 20px;scrollbar-width:thin}
.walletform{display:flex;gap:8px}
.inp{display:flex;align-items:center;flex:1;min-width:0;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(0,0,0,.25);transition:border-color .2s}
.inp:focus-within{border-color:var(--accent)}
.inp input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:var(--osd);font-size:22px;padding:.35em .5em .25em;letter-spacing:.03em}
.inp.at span{font-family:var(--osd);font-size:22px;padding-left:.5em;opacity:.7}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--osd);font-size:24px;letter-spacing:.08em;padding:.35em 1em .25em;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;text-decoration:none;color:var(--ink);transition:background .2s,transform .1s}
.btn:hover{background:rgba(255,255,255,.14)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.small{font-size:20px;padding:.25em .8em .15em}
.btn.primary{background:var(--accent);color:#1b1206;border-color:transparent}
.btn.primary:hover{background:#ffc98a}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.hint-demo{font-size:13px;color:var(--muted);margin:8px 0 0}
.link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:inherit}

.me{margin:14px 0 6px;padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25)}
.me .lic{display:flex;justify-content:space-between;align-items:center;font-family:var(--osd);font-size:20px;letter-spacing:.06em}
.me .lic b{padding:.1em .5em 0;border-radius:4px}
.me .lic b.ok{background:#1f6b3d;color:#d8ffe7}
.me .lic b.no{background:#6b1f22;color:#ffdcdc}
.odo{display:flex;gap:3px;margin:12px 0 4px;justify-content:center}
.odo span{display:grid;place-items:center;width:34px;height:48px;background:linear-gradient(#111,#2a2a2a 50%,#111);border-radius:4px;font-family:var(--osd);font-size:40px;color:#f1eadb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.odo span.dec{background:linear-gradient(#e8e0cc,#fff 50%,#e8e0cc);color:#111}
.odo em{align-self:flex-end;font-family:var(--osd);font-style:normal;font-size:20px;margin-left:6px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stats div{background:rgba(255,255,255,.04);border-radius:8px;padding:8px;text-align:center}
.stats b{display:block;font-family:var(--osd);font-size:28px;line-height:1}
.stats small{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.alloc{margin-top:10px;padding:10px 12px;border-radius:8px;background:linear-gradient(100deg,rgba(255,184,103,.16),rgba(200,40,43,.12));font-size:14px}
.alloc b{color:var(--accent)}
.warn{color:#ffb0a5;font-size:14px;margin:8px 0 0}

.tabs{display:flex;gap:4px;margin:16px 0 8px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;font-family:var(--osd);font-size:19px;letter-spacing:.06em;padding:.3em 0;color:var(--muted);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--accent)}
.rows{list-style:none;margin:0;padding:0;font-size:14px}
.rows li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.rows li .rk{width:28px;font-family:var(--osd);font-size:20px;color:var(--muted)}
.rows li .w{flex:1;font-family:var(--type);font-size:13px}
.rows li .v{font-family:var(--osd);font-size:20px}
.rows li.me-row{background:rgba(255,224,102,.1)}
.rows li .tag{font-size:11px;padding:1px 6px;border-radius:4px;background:#6b1f22}
.rows a{color:var(--muted);font-size:12px}
.rules p,.rules li{font-size:14px;line-height:1.5;color:#d9d3c6}
.rules code{font-family:var(--type);font-size:12px;word-break:break-all;color:var(--accent)}
.empty{color:var(--muted);font-size:14px;padding:14px 0}

/* ---------- early access modal: the VCR menu as a card ---------- */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(3,4,8,.55);backdrop-filter:blur(3px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.modal .sheet{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:26px 28px 24px;border-radius:12px;color:#f4f5ff;
  background:radial-gradient(120% 100% at 40% 30%,var(--blue-a),var(--blue-b));box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 90px rgba(70,105,255,.35),0 30px 80px rgba(0,0,0,.6);
  text-shadow:.05em .05em 0 rgba(4,8,50,.4);animation:sheetin .4s cubic-bezier(.2,.8,.2,1)}
.modal .sheet::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(to bottom,rgba(8,14,60,.18) 0 1px,transparent 1px 3px)}
@keyframes sheetin{from{opacity:0;transform:scale(.96) translateY(10px)}}
.x-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;cursor:pointer;font-size:16px;z-index:2}
.ea-head .ch{color:#fff2b0}
.ea-head h2{margin:4px 0 6px;font-weight:900;font-style:italic;font-size:clamp(28px,5vw,38px);letter-spacing:-.01em}
.ea-head .sub{margin:0 0 16px;font-size:14px;line-height:1.45;opacity:.9}
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:16px 0 14px;font-family:var(--osd);font-size:18px;letter-spacing:.06em}
.steps li{flex:1;text-align:center;padding:.2em 0 .1em;border:1px solid rgba(255,255,255,.35);border-radius:4px;opacity:.6}
.steps li.on{background:#f4f5ff;color:var(--blue-b);opacity:1;text-shadow:none}
.steps li.done{opacity:1}
.modal label{display:block;font-family:var(--osd);font-size:19px;letter-spacing:.06em;margin:0 0 12px}
.modal label .inp{margin-top:4px;border-color:rgba(255,255,255,.55);background:rgba(10,20,80,.25)}
.modal label .inp:focus-within{border-color:#fff}
.modal .inp input{color:#fff}
.modal .inp input::placeholder{color:rgba(255,255,255,.5)}
.modal .btn{width:100%;margin-top:8px;font-size:26px}
.modal .btn.primary{background:#f4f5ff;color:var(--blue-b);text-shadow:none}
.modal .btn.primary:hover{background:#fff}
.modal .btn.ghost{color:#dfe5ff}
.x-btn{background:#000!important;color:#fff!important;border-color:#000!important;text-shadow:none}
.x-btn svg{width:.8em;height:.8em;fill:currentColor}
.modal blockquote{margin:8px 0 12px;padding:12px 14px;border-left:3px solid #fff2b0;background:rgba(10,20,80,.3);font-size:14px;line-height:1.5;white-space:pre-wrap;font-family:var(--type)}
.modal .opt{margin-top:12px}
.err{color:#ffe1dc;background:rgba(160,20,30,.45);border-radius:6px;padding:8px 10px;font-size:14px;margin:4px 0 6px}
.pass{margin:4px 0 14px;padding:16px;border-radius:10px;background:#f1eadb;color:#17161a;text-shadow:none;box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden}
.pass::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,#c8282b 0 22px,#f2a03b 22px 30px,#c8282b 30px 52px)}
.pass-top{display:flex;justify-content:space-between;font-family:var(--osd);font-size:18px;letter-spacing:.08em;margin-top:6px;color:#5b5348}
.pass-no{font-weight:900;font-style:italic;font-size:64px;line-height:1;margin:8px 0 10px;color:var(--red)}
.pass-row{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed rgba(0,0,0,.2);padding:6px 0 4px;font-family:var(--type);font-size:13px}
.pass-row b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.done p{font-size:14px;line-height:1.45}

/* ---------- the folder: info card on paper ---------- */
.folder-card{top:150px;right:clamp(12px,3vw,60px);bottom:70px;width:min(560px,calc(100vw - 24px));animation:folderin .6s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes folderin{from{opacity:0;transform:translateY(40px) rotate(1.5deg)}}
.folder-card .paper{position:relative;height:100%;overflow:auto;padding:34px 38px 30px;border-radius:4px 4px 6px 6px;color:#25211b;
  background:linear-gradient(rgba(0,0,0,0) 0 31px,rgba(80,120,200,.18) 31px 32px) 0 120px/100% 32px,#f3ecda;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2);transform:rotate(.6deg);scrollbar-width:thin}
.folder-card .paper::before{content:"";position:absolute;left:58px;top:0;bottom:0;width:2px;background:rgba(200,40,43,.35)}
.folder-card .x-close{border-color:rgba(0,0,0,.3);color:#25211b}
.folder-card h2{font-family:var(--hand);font-size:56px;line-height:1;margin:0 0 6px 30px;color:#1f1b16}
.folder-card .lead{margin:0 0 10px 30px;font-family:var(--type);font-size:15px;line-height:1.6}
.folder-card h3{font-family:var(--hand);font-size:32px;margin:16px 0 2px 30px;color:var(--red);font-weight:600}
.folder-card h3 span{font-family:var(--type);font-size:14px;color:#8a7f6c;margin-right:6px}
.folder-card ul{margin:0 0 0 30px;padding:0 0 0 18px}
.folder-card li{font-family:var(--type);font-size:14.5px;line-height:1.6;margin:2px 0}
.folder-card b{background:rgba(255,214,90,.55);padding:0 .2em}
.folder-card .stamp{position:absolute;right:66px;top:30px;transform:rotate(-8deg);border:3px solid rgba(200,40,43,.7);color:rgba(200,40,43,.75);font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.06em;padding:4px 8px;border-radius:3px}
.folder-card .sig{font-family:var(--hand);font-size:26px;margin:18px 0 0 30px}
.folder-card .sig a{color:var(--red)}

#toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;font-family:var(--osd);font-size:22px;letter-spacing:.06em;background:rgba(10,10,14,.85);border:1px solid var(--line);padding:.35em 1em .25em;border-radius:8px;animation:fade .25s}

/* ---------- phones ---------- */
@media (max-width:760px){
  .top{padding:calc(10px + env(safe-area-inset-top,0px)) 8px 14px;gap:6px}
  .name.neon{font-size:28px}
  .menu{gap:4px 10px}
  .menu .item{font-size:24px}
  .menu .cta{font-size:17px;padding:.45em .8em .4em}
  .menu a.x{width:34px;height:34px}
  .ctl .hint{display:none}
  .panel{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;height:54vh;animation-name:sheetup}
  .folder-card{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:66vh}
  .folder-card .paper{padding:26px 18px 24px;transform:none}
  .folder-card .paper::before{left:20px}
  .folder-card h2,.folder-card .lead,.folder-card h3,.folder-card ul,.folder-card .sig{margin-left:14px}
  .folder-card .stamp{display:none}
  .play-btn{padding:10px 18px 8px}
  .play-btn small{font-size:14px}
  body.panel-open .ctl{display:none}
}
@keyframes sheetup{from{opacity:0;transform:translateY(30px)}}
@media (prefers-reduced-motion:reduce){
  .play-btn,.play-btn .shine,#osd .tv-pic{animation:none}
}

/* early access: one step */
.modal .btn.claim{margin-top:6px;padding:.5em 1em .4em;font-size:28px}
.modal .btn.claim svg{width:.75em;height:.75em}
.modal .fine{margin:10px 0 0;font-size:13px;line-height:1.45;opacity:.85;text-align:center}
.modal .done .btn{margin-top:10px}
/* demo labels */
.soon{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--osd);font-style:normal;font-weight:400;font-size:17px;letter-spacing:.08em;padding:.15em .5em .05em;border-radius:4px;background:#ffd65a;color:#1b1406}
.demo-note{margin:0 0 14px;padding:12px 14px;border-radius:10px;border:1px dashed rgba(255,214,90,.55);background:rgba(255,214,90,.08);font-size:14px;line-height:1.45;color:#efe6cf}
.demo-note b{color:#ffd65a}
.demo-note .btn{display:flex;width:100%;margin-top:10px}

/* the NFT river behind the whitelist form */
.nft-river{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nft-river .lane{transform:rotate(var(--tilt));pointer-events:auto}
.nft-river .track{display:flex;gap:22px;width:max-content;animation:river var(--dur) linear infinite}
.nft-river.paused .track{animation-play-state:paused}
@keyframes river{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.nft-river .nft{position:relative;margin:0;width:clamp(150px,15vw,220px);border-radius:12px;overflow:hidden;background:#0b0c12;
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.55);animation:bob 4s ease-in-out infinite;animation-delay:var(--bob);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .35s,filter .35s;opacity:.9}
.nft-river .nft img{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;user-select:none}
.nft-river .nft figcaption{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 9px 5px;font-family:var(--osd);font-size:17px;letter-spacing:.04em;color:#efe9dc;background:#11131b}
.nft-river .nft em{font-style:normal;font-size:14px;padding:0 .4em;border-radius:3px;background:#2b2f3b}
.nft-river .r-legendary{background:linear-gradient(90deg,#d9a72e,#fbe7a1,#d9a72e)!important;color:#2a1a04}
.nft-river .r-epic{background:#8f6cf0!important;color:#fff}
.nft-river .r-rare{background:#2b6f8f!important;color:#fff}
.nft-river .r-uncommon{background:#3d8c62!important;color:#fff}
.nft-river .nft:hover{transform:scale(1.12) rotate(-2deg);opacity:1;z-index:2;box-shadow:0 0 0 2px #ffd25e,0 0 40px rgba(255,180,80,.45)}
.nft-river .nft.swap{opacity:0;filter:blur(4px);transform:scale(.92)}
@keyframes bob{50%{translate:0 -8px}}
.modal .sheet{z-index:1}
@media (max-width:760px){
  .nft-river{justify-content:space-between;padding:8px 0}
  .nft-river .nft{width:120px}
  .nft-river .nft figcaption{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.nft-river .track,.nft-river .nft{animation:none}}

/* the generated whitelist pass in the success step */
.modal .pass-card{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;margin:4px 0 10px;background:#07080b;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:sheetin .5s cubic-bezier(.2,.8,.2,1)}
.modal .pass-meta{font-family:var(--osd);font-size:17px;letter-spacing:.05em;opacity:.9;margin-bottom:6px}
.modal .pass-meta b{font-weight:400;color:#fff2b0}

/* tape tooltip */
#tip{position:fixed;z-index:6;pointer-events:none;font-family:var(--osd);font-size:20px;letter-spacing:.06em;color:#f4f5ff;
  background:linear-gradient(var(--blue-a),var(--blue-b));padding:.15em .6em .05em;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.4);white-space:nowrap}