:root{
  --bg:#000; --ink:#fafafa; --mut:#a3a3a3; --dim:#737373; --line:#262626; --line2:#1c1c1c; --card2:#0a0a0a;
  --ac:#3ddc84; --ac3:#22d3ee; --ac2:#ff6b5e; --glass:rgba(5,5,5,.66);
  --fs:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --fm:"Geist Mono",ui-monospace,monospace;
  --grad:linear-gradient(90deg,#3ddc84,#22d3ee);
}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ang{to{--ang:360deg}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:#000;color:var(--ink);font-family:var(--fs);overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
body.seated,body.walking{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--fm)}
.small{font-size:12px;color:var(--mut)}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
#scroller{height:340vh}
body.seated #scroller,body.walking #scroller{display:none}

/* shared aceternity bits */
.grid-bg{background-image:linear-gradient(to right,#ffffff0b 1px,transparent 1px),linear-gradient(to bottom,#ffffff0b 1px,transparent 1px);background-size:56px 56px}
.gtext{background:linear-gradient(180deg,#fafafa 20%,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.atext,.pn-body h2 .accent,#intro em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tg{display:inline-block;animation:tg .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes tg{from{opacity:0;filter:blur(10px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}

/* loader */

/* intro text */
#intro{position:fixed;left:5vw;bottom:12vh;z-index:5;pointer-events:none;max-width:820px;transition:opacity .4s}
#intro .kicker{color:var(--mut);font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid #ffffff1a;background:#0008;backdrop-filter:blur(8px)}
#intro .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
#intro h2{font-size:clamp(36px,6vw,88px);line-height:1;letter-spacing:-.045em;margin:16px 0 22px;font-weight:700;color:#fafafa;text-shadow:0 4px 40px #000a}
#intro .hint{color:var(--ink);opacity:.85;font-size:14px;display:flex;gap:8px;align-items:center}

/* HUD */
#hud{position:fixed;top:14px;left:14px;right:14px;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
#hud>*{pointer-events:auto}
.hud-l,.hud-r{display:flex;gap:8px;flex-wrap:wrap}
.hud-r{justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff17;font-size:13px;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff0d}
.chip i{font-size:17px}
.btn{transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn:hover{background:#0d0d0de8;border-color:#ffffff33;box-shadow:0 0 0 4px #ffffff08,inset 0 1px 0 #ffffff14}
.btn:active{transform:scale(.97)}
#fps{min-width:76px;justify-content:center;color:var(--ac)}
@media (max-width:820px){.hud-r .chip span{display:none}.hud-r .chip{padding:0 10px}#hudWx{display:none}}

.pop{position:fixed;top:60px;left:14px;z-index:25;width:min(330px,calc(100vw - 28px));padding:18px;border-radius:18px;background:#050505f2;border:1px solid var(--line);box-shadow:0 30px 80px #000c;display:grid;gap:12px}
.pop[hidden]{display:none}
.pop h4{font-size:15px}
.pop label{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px;color:#d4d4d4}
.pop label.row{grid-template-columns:auto 1fr}
.pop input[type=range]{width:130px;accent-color:var(--ac)}
.pop label:has(input[type=range]){grid-template-columns:1fr auto auto}
.pop select{background:#0f0f0f;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}
.pop input[type=checkbox]{accent-color:var(--ac);width:16px;height:16px}

#modebar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 28px)}
#modebar[hidden]{display:none}
.keys{font-size:12px;color:#d4d4d4;background:#000a;padding:8px 14px;border-radius:999px;border:1px solid #ffffff12}
#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0006;z-index:15;pointer-events:none;transition:transform .15s,background .15s}
#crosshair.on{transform:scale(2.2);background:var(--ac)}
#tip{position:fixed;z-index:16;pointer-events:none;padding:8px 12px;border-radius:12px;background:#050505ee;border:1px solid #ffffff1f;font-size:12px;transform:translate(14px,14px);max-width:280px;box-shadow:0 10px 30px #000a}
#tip b{font-family:var(--fs);font-size:13px;display:block;color:var(--ink)}
#tip span{color:var(--mut)}
#toast{position:fixed;left:50%;top:74px;transform:translateX(-50%);z-index:30;padding:10px 18px;border-radius:999px;font-size:13px;max-width:90vw;text-align:center;border:1.5px solid transparent;background:linear-gradient(#050505f2,#050505f2) padding-box,conic-gradient(from var(--ang),#262626 0 55%,#3ddc84 70%,#22d3ee 80%,#262626 92%) border-box;animation:ang 3s linear infinite}
#joy{position:fixed;left:26px;bottom:90px;width:120px;height:120px;border-radius:50%;background:#ffffff10;border:1px solid #ffffff22;z-index:18;touch-action:none}
#joy i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#3ddc8488}

/* panels */
#panel{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:3vh 0;background:#000b;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);perspective:1600px}
#panel[hidden]{display:none}
.pn-shell{position:relative;width:92vw;max-width:1600px;height:92vh;display:flex;flex-direction:column;border-radius:24px;background:#000;border:1px solid #ffffff17;box-shadow:0 60px 140px #000,inset 0 1px 0 #ffffff0f;overflow:hidden;transform-origin:50% 60%;animation:pnIn .6s cubic-bezier(.2,.9,.2,1);isolation:isolate}
.pn-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,#ffffff0a 1px,transparent 1px),linear-gradient(to bottom,#ffffff0a 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%)}
.pn-shell::after{content:"";position:absolute;left:-18%;top:-70%;width:80%;height:150%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,#ffffff12,#ffffff04 45%,transparent 70%);transform:rotate(-28deg);animation:spot 2s ease .25s both}
@keyframes spot{from{opacity:0;transform:translate(-25%,-25%) rotate(-28deg) scale(.55)}to{opacity:1;transform:rotate(-28deg)}}
@keyframes pnIn{from{opacity:0;transform:rotateX(14deg) translateY(40px) scale(.94)}to{opacity:1;transform:none}}
.pn-top{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 24px;border-bottom:1px solid #ffffff10;flex-wrap:wrap;background:#0006;backdrop-filter:blur(10px)}
.pn-title{font-weight:600;font-size:17px;display:flex;gap:10px;align-items:center;letter-spacing:-.01em}
.pn-title i{font-size:20px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#0f0f0f;border:1px solid var(--line);color:var(--ac)}
.pn-tabs{display:flex;gap:2px;flex-wrap:wrap;padding:4px;border-radius:999px;background:#0a0a0a;border:1px solid var(--line)}
.pn-tabs:empty{display:none}
.pn-tabs button{height:32px;padding:0 16px;border-radius:999px;color:var(--mut);font-size:14px;transition:color .2s,background .25s}
.pn-tabs button:hover{color:var(--ink)}
.pn-tabs button.on{color:#000;background:#fafafa;font-weight:500}
.pn-x{width:38px;height:38px;border-radius:999px;background:#0a0a0a;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;margin-left:auto;transition:transform .25s,border-color .2s}
.pn-x:hover{transform:rotate(90deg);border-color:#ffffff40}
.pn-body{flex:1;overflow:auto;padding:clamp(20px,3.4vw,48px);scrollbar-color:#262626 transparent}
.pn-body>*{animation:tg .6s cubic-bezier(.2,.8,.2,1) both}
.pn-body>*:nth-child(2){animation-delay:.06s}.pn-body>*:nth-child(3){animation-delay:.12s}.pn-body>*:nth-child(4){animation-delay:.18s}
.pn-body h2{font-size:clamp(30px,3.8vw,60px);letter-spacing:-.045em;line-height:1.02;font-weight:700;background:linear-gradient(180deg,#fafafa 25%,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.pn-body h3{font-size:22px;letter-spacing:-.02em;margin:38px 0 16px;display:flex;gap:10px;align-items:center;font-weight:600}
.pn-body h3 i{color:var(--ac)}
.pn-body p{color:#a3a3a3;line-height:1.65}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#d4d4d4;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#0a0a0a}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.lead{font-size:clamp(16px,1.35vw,19px);max-width:72ch}
.accent{color:var(--ac)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* card with mouse spotlight + glowing border */
.card{position:relative;isolation:isolate;background:linear-gradient(180deg,#0e0e0e,#070707);border:1px solid var(--line);border-radius:20px;padding:20px;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .25s,box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(480px circle at var(--mx,50%) var(--my,-30%),#3ddc8418,transparent 45%);opacity:0;transition:opacity .35s}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),#3ddc84,#22d3ee88 35%,transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s}
.card:hover::before,.card:hover::after{opacity:1}
.card:hover{box-shadow:0 24px 60px #000c}
.card h4{font-size:18px;margin-bottom:6px;display:flex;gap:8px;align-items:center;font-weight:600;letter-spacing:-.01em}
.card .tag{font:500 11px var(--fm);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin-left:auto;white-space:nowrap;background:#000}
.card p{font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pills span{font:12px var(--fm);color:#d4d4d4;background:#141414;border:1px solid #1f1f1f;border-radius:999px;padding:3px 10px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:14px}
.bento>.card{display:flex;flex-direction:column;text-decoration:none}
.bento>.card:nth-child(7n+1),.bento>.card:nth-child(7n+5){grid-column:span 2}
.bx{flex:1;min-height:92px;margin:-6px -6px 16px;border-radius:14px;border:1px solid #1a1a1a;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 0% 0%,#3ddc8414,transparent 50%),radial-gradient(120% 120% at 100% 100%,#22d3ee12,transparent 50%),#050505}
.bx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff22 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.bx b{position:absolute;left:16px;bottom:12px;font:600 clamp(26px,2.6vw,40px) var(--fs);letter-spacing:-.04em;background:linear-gradient(180deg,#fafafa,#6b6b6b);-webkit-background-clip:text;background-clip:text;color:transparent}
.bx i{position:absolute;right:16px;top:14px;font-size:22px;color:var(--ac);opacity:.85}
@media (max-width:980px){.bento{grid-template-columns:1fr}.bento>.card:nth-child(n){grid-column:auto}}

.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:clamp(20px,4vw,64px);align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.portrait{border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:#0a0a0a;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#000)}
.portrait .cap{position:absolute;left:18px;bottom:16px;z-index:1;font:12px var(--fm);color:#d4d4d4}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.cta a,.cta button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-weight:500;text-decoration:none;border:1px solid var(--line);background:#0a0a0a;transition:border-color .2s,box-shadow .2s,transform .2s}
.cta a:hover{border-color:#ffffff40;transform:translateY(-1px)}
.cta .pri{color:#fafafa;border:1.5px solid transparent;background:linear-gradient(#050505,#050505) padding-box,conic-gradient(from var(--ang),#262626 0 55%,#3ddc84 70%,#22d3ee 80%,#262626 92%) border-box;animation:ang 3.5s linear infinite;box-shadow:0 0 30px #3ddc8420}
.cta .pri i{color:var(--ac)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:32px}
.stat{position:relative;background:linear-gradient(180deg,#0e0e0e,#070707);border:1px solid var(--line);border-radius:18px;padding:16px 18px;overflow:hidden}
.stat::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,#3ddc84,transparent)}
.stat i{color:var(--ac);font-size:22px}
.stat b{display:block;font-size:32px;margin-top:10px;letter-spacing:-.04em;font-weight:700;background:linear-gradient(180deg,#fafafa,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font:12px var(--fm);color:var(--mut)}
.links a{display:flex;align-items:center;gap:14px;text-decoration:none}
.links a>i{font-size:22px;color:var(--ac);width:46px;height:46px;border-radius:14px;background:#000;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.links a b{display:block;font-weight:600}
.links a span{font:13px var(--fm);color:var(--mut)}

/* timeline with tracing beam */
.tl{position:relative;padding-left:34px;display:grid;gap:14px}
.tl::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,#262626 6%,#262626 94%,transparent)}
.tl::after{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,#3ddc84 45%,#22d3ee 60%,transparent);background-size:100% 30%;background-repeat:no-repeat;animation:beam 4.5s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(0 0 6px #3ddc84)}
@keyframes beam{from{background-position:0 -60%}to{background-position:0 160%}}
.tl .card{position:relative}
.tl .card>.dot{position:absolute;left:-31px;top:24px;width:14px;height:14px;border-radius:50%;background:#000;border:1px solid #404040;display:grid;place-items:center}
.tl .card>.dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.tl .when{font:500 12px var(--fm);color:var(--ac)}

/* certificate slider */
.slider{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2vw 18px;scrollbar-color:#262626 transparent}
.track .cert{flex:0 0 clamp(260px,26vw,380px);scroll-snap-align:start;padding:0;overflow:hidden;cursor:zoom-in}
.cert img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block;background:#fff;border-radius:19px 19px 0 0}
.cert .meta{padding:12px 16px 14px}
.cert .meta b{display:block;font-size:15px;font-weight:600}
.cert .meta span{font:12px var(--fm);color:var(--mut)}
.sl-btns{display:flex;gap:8px}
.sl-btns button{width:40px;height:40px;border-radius:999px;background:#0a0a0a;border:1px solid var(--line);display:grid;place-items:center;font-size:18px}
.sl-btns button:hover{border-color:#ffffff40}
.filters{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:14px;padding:4px;border-radius:999px;background:#0a0a0a;border:1px solid var(--line);width:max-content;max-width:100%}
.filters button{height:30px;padding:0 14px;border-radius:999px;color:var(--mut);font-size:13px}
.filters button.on{color:#000;background:#fafafa}
.lightbox{position:fixed;inset:0;z-index:60;background:#000e;display:grid;place-items:center;padding:4vw;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:14px}

/* book */
.book{display:grid;grid-template-columns:1fr 1fr;min-height:100%;border-radius:18px;overflow:hidden;background:#e9e4d8;color:#1b1c1e;box-shadow:0 30px 80px #000a;perspective:1800px}
.book .pg{padding:clamp(22px,3.5vw,54px);position:relative}
.book .pg:first-child{background:linear-gradient(90deg,#e9e4d8 85%,#d7d1c3);transform-origin:right center;animation:flipIn .9s cubic-bezier(.2,.9,.2,1)}
.book .pg:last-child{background:linear-gradient(90deg,#d9d3c5,#ece7db 12%)}
@keyframes flipIn{from{transform:rotateY(70deg);opacity:.2}to{transform:none;opacity:1}}
.pn-body .book h2{background:none;color:#121315}
.book p,.book li{color:#3a3c40}
.book .mono{color:#6a6c70}
.book .seal{width:76px;height:76px;border-radius:20px;background:#121315;color:var(--ac);display:grid;place-items:center;font:700 28px var(--fm);margin-bottom:22px}
.book ol{list-style:none;display:grid;gap:12px;counter-reset:r}
.book ol li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;gap:8px;padding-bottom:12px;border-bottom:1px dashed #b8b2a4}
.book ol li::before{content:counter(r,decimal-leading-zero);font:12px var(--fm);color:#7c7f84;padding-top:3px}
.book ol b{color:#121315;display:block}
.book img.proof{width:100%;border-radius:10px;margin-top:18px;border:1px solid #c9c3b4}
@media (max-width:820px){.book{grid-template-columns:1fr}}

.bp img{width:100%;max-width:860px;display:block;margin:0 auto;border-radius:14px;box-shadow:0 30px 80px #000;border:1px solid var(--line)}
.diamond-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:900px){.diamond-box{grid-template-columns:1fr}}
.reward{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#050505;box-shadow:0 0 80px #22d3ee14}
.reward img{width:100%;display:block}
.field{display:flex;gap:8px;margin-top:14px}
.field input{flex:1;height:46px;border-radius:999px;background:#0a0a0a;border:1px solid var(--line);color:var(--ink);padding:0 18px;font:inherit}
.field input:focus{outline:none;border-color:#3ddc8488;box-shadow:0 0 0 4px #3ddc8414}
.hof{width:100%;border-collapse:collapse;font-size:14px}
.hof th,.hof td{text-align:left;padding:12px;border-bottom:1px solid #1a1a1a}
.hof th{font:12px var(--fm);color:var(--mut);font-weight:400}
.hof td.mono{font-size:12px;color:var(--mut)}

#dial{position:fixed;inset:0;z-index:45;display:grid;place-items:center;background:#000a;backdrop-filter:blur(6px)}
#dial[hidden]{display:none}
.dl-card{background:#050505f5;border:1px solid var(--line);border-radius:24px;padding:22px;display:grid;gap:12px;justify-items:center;box-shadow:0 40px 100px #000}
.dl-card h4{display:flex;gap:12px;align-items:baseline;font-size:17px;font-weight:600}
.dl-card h4 span{color:var(--ac);font-size:22px}
#dlSvg{touch-action:none;cursor:grab;max-width:76vw;height:auto}
.dl-row{display:flex;gap:8px}
.nojs{position:fixed;inset:0;display:grid;place-items:center;background:#000;color:#fff;padding:20px}

/* monitor website overlay */
#site{position:fixed;inset:0;z-index:42;background:#000;clip-path:inset(0px 0px 0px 0px round 0px);transition:clip-path .72s cubic-bezier(.7,0,.2,1)}
#site iframe{width:100%;height:100%;border:0;display:block;background:#000;color-scheme:dark}

#hint{transition:opacity 1.2s}
#hint.fade{opacity:0}
#gl{cursor:grab}

/* impact flash */
#flash{position:fixed;inset:0;z-index:60;background:#fff;opacity:0;pointer-events:none}
/* phone: the monitor sites open as an iPhone screen */
#site .ios-frame{display:contents}
#site .ios-status,#site .ios-homebtn{display:none}
#site.ios{background:radial-gradient(120% 80% at 50% 0%,#101612,#000 70%);transform-origin:50% 100%}
#site.ios .ios-frame{display:flex;flex-direction:column;position:absolute;inset:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));border-radius:46px;overflow:hidden;background:#000;box-shadow:0 0 0 5px #101012,0 0 0 6.5px #3b3b40,0 30px 80px #000}
#site.ios iframe{flex:1;min-height:0;width:100%}
#site.ios .ios-status{display:flex;align-items:center;justify-content:space-between;height:46px;padding:6px 26px 0;flex:none;color:#fff;font:600 15px/1 var(--fm,system-ui);position:relative;z-index:2;background:#000}
#site.ios .ios-island{position:absolute;left:50%;top:10px;width:104px;height:28px;margin-left:-52px;border-radius:20px;background:#050505;box-shadow:0 0 0 1px #1c1c1e}
#site.ios .ios-r{display:flex;gap:5px;font-size:16px}
#site.ios .ios-homebtn{display:grid;place-items:center;height:30px;flex:none;border:0;background:#000;cursor:pointer;padding:0}
#site.ios .ios-homebtn i{display:block;width:132px;height:5px;border-radius:3px;background:#ffffffcc}

/* flip book (drag a page, or use the two buttons) */
.fb-book{position:relative;display:grid;grid-template-columns:1fr 1fr;height:min(66vh,640px);border-radius:18px;background:#e9e4d8;color:#1b1c1e;box-shadow:0 30px 80px #000a;perspective:2200px;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.fb-book:active{cursor:grabbing}
.fb-base{display:contents}
.fb-a,.fb-b{overflow:hidden;position:relative}
.fb-a .pg,.fb-b .pg,.fb-f .pg,.fb-k .pg{height:100%;padding:clamp(20px,3vw,46px);overflow:auto;position:relative;box-sizing:border-box}
.fb-a .pg{background:linear-gradient(90deg,#e9e4d8 85%,#d7d1c3)}
.fb-b .pg,.fb-f .pg{background:linear-gradient(90deg,#d9d3c5,#ece7db 12%)}
.fb-k .pg{background:linear-gradient(90deg,#e9e4d8 85%,#d7d1c3)}
.fb-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;z-index:4;pointer-events:none}
.fb-f,.fb-k{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fb-k{transform:rotateY(180deg)}
.fb-sh{position:absolute;inset:0;background:linear-gradient(90deg,#0000,#0007);pointer-events:none;opacity:0}
.fb-book.single{grid-template-columns:1fr}
.fb-book.single .fb-a{display:none}
.fb-book.single .fb-leaf{left:0;width:100%}
.fb-book.single .fb-b .pg{background:#e9e4d8}
.fb-book.single .fb-f .pg,.fb-book.single .fb-k .pg{background:#e9e4d8}
.fb-book h2{background:none;color:#121315}
.fb-book p,.fb-book li{color:#3a3c40}.fb-book .mono{color:#6a6c70}
.fb-book .seal{width:76px;height:76px;border-radius:20px;background:#121315;color:var(--ac);display:grid;place-items:center;font:700 28px var(--fm);margin-bottom:22px}
.fb-book ol{list-style:none;display:grid;gap:12px;counter-reset:r}
.fb-book ol li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;gap:8px;padding-bottom:12px;border-bottom:1px dashed #b8b2a4}
.fb-book ol li::before{content:counter(r,decimal-leading-zero);font:12px var(--fm);color:#7c7f84;padding-top:3px}
.fb-book ol b{color:#121315;display:block}.fb-book a{color:#0b6b45}
.fb-book img.proof{width:100%;border-radius:10px;margin-top:10px;border:1px solid #c9c3b4}
.fb-ui{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.fb-ui button:disabled{opacity:.35;pointer-events:none}

/* phone on the desk: a centred iPhone, not a full page */
#site.ios.phone{background:#000b;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#site.ios.phone .ios-frame{inset:auto;left:50%;top:50%;width:min(392px,94vw);height:min(840px,94vh);transform:translate(-50%,-50%)}

/* phone/mobile: the user already holds a phone, so no device frame, no bezel, no fake status bar */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){#site.ios .ios-frame,#site.ios.phone .ios-frame{inset:0;left:0;top:0;width:100%;height:100%;transform:none;border-radius:0;box-shadow:none}#site.ios .ios-status{display:none}#site.ios .ios-homebtn{height:26px}}
@media (display-mode:standalone){#site.ios .ios-frame{padding-top:env(safe-area-inset-top)}}
#doorNote{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);z-index:20;text-align:center;padding:14px 22px;border-radius:14px;background:#000a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#f2f2f2;font:500 15px/1.4 var(--fs,system-ui);pointer-events:none;animation:fade .6s}#doorNote b{display:block;font:600 11px/1 var(--fm,monospace);letter-spacing:.14em;text-transform:uppercase;color:#3ddc84;margin-bottom:6px}
/* ---------- game overlays: mystery box, certificate, object view ---------- */
.gx{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:3vw;background:#0006;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;transition:opacity .3s,backdrop-filter .3s}
.gx.on{opacity:1;backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8)}
.gx-card{position:relative;width:min(1100px,94vw);max-height:92vh;overflow:auto;background:#0b0e0dcc;border:1px solid #1f2a26;border-radius:22px;padding:34px;color:#eef3f0;box-shadow:0 40px 120px #000a;transform:translateY(16px) scale(.98);transition:transform .35s}
.gx.on .gx-card{transform:none}.gx.objview .gx-card{width:min(1300px,96vw);height:min(820px,92vh);padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.gx-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:12px;border:1px solid #2a3532;background:#0b0e0dcc;color:#cfd8d4;cursor:pointer;font-size:18px}
.gx .eyebrow{font:600 12px/1 var(--fm,monospace);letter-spacing:.14em;text-transform:uppercase;color:#3ddc84;margin:0 0 10px}.gx h2{font:700 clamp(28px,3.4vw,44px)/1.05 var(--fs,system-ui);margin:0 0 12px}
.gx .lead{color:#b8c4bf;font-size:16px;line-height:1.6}.gx .small{font-size:13px}.gx .mut{color:#87938e}.gx .mono{font-family:var(--fm,monospace)}
.gbtn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;border:0;background:#3ddc84;color:#04130b;font:600 15px var(--fs,system-ui);cursor:pointer;text-decoration:none}.gbtn:disabled{opacity:.5}.gbtn.ghost{background:#141a18;color:#e6ece9;border:1px solid #26302d}
.mb{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}.mb-art img{width:100%;max-width:440px;display:block;margin:auto;filter:drop-shadow(0 30px 40px #000)}
.mb-art.shake img{animation:mbShake 1.1s infinite}@keyframes mbShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg) translateY(-3px)}40%{transform:rotate(2deg)}60%{transform:rotate(-1deg) translateY(-2px)}}
.pow{height:12px;border-radius:8px;background:#141a18;overflow:hidden;margin:18px 0 8px;border:1px solid #233029}.pow i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f8f55,#3ddc84,#b6ffd6);box-shadow:0 0 18px #3ddc84;transition:width .12s linear}
.mb-art.gem{position:relative}.mb-art.gem img{max-width:320px;animation:gemIn 1s cubic-bezier(.2,1.4,.4,1)}@keyframes gemIn{from{transform:scale(.2) rotate(-30deg);opacity:0}}
.burst{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,var(--c,#3ddc84) 0,#0000 65%);opacity:.35;animation:burst 1.4s ease-out}@keyframes burst{from{transform:scale(.2);opacity:1}}
.reveal.t-mythic .burst{--c:#ff3b6b}.reveal.t-legendary .burst{--c:#ffb020}.reveal.t-epic .burst{--c:#b36bff}.reveal.t-rare .burst{--c:#4da3ff}
.tier{display:inline-block;padding:3px 10px;border-radius:8px;border:1px solid var(--c);color:var(--c);font:600 12px/1.4 var(--fm,monospace);text-transform:uppercase;letter-spacing:.08em}
.claim{display:grid;gap:12px;margin-top:16px}.claim label{display:grid;gap:6px;font-size:13px;color:#9aa6a1}.claim input,.claim select{height:46px;border-radius:12px;border:1px solid #26302d;background:#0a0d0c;color:#eef3f0;padding:0 14px;font:15px var(--fs,system-ui)}
.cert-wrap .cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}.cert-img{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid #1f2a26;min-height:120px;display:grid;place-items:center}
.ov{position:relative;width:100%;height:100%}.ov canvas{width:100%;height:100%;display:block;cursor:grab}.ov-hud{position:absolute;left:3%;bottom:6%;max-width:340px;background:#0b0e0dcc;border:1px solid #1f2a26;border-radius:18px;padding:22px}
.ov-list{display:grid;gap:8px;margin-top:14px}.ov-list button{text-align:left;height:44px;border-radius:12px;border:1px solid #26302d;background:#111614;color:#eef3f0;padding:0 14px;font:500 15px var(--fs,system-ui);cursor:pointer}.ov-list button:disabled{opacity:.55;cursor:default}
.ov-game{position:absolute;right:3%;top:6%;width:min(460px,90%);background:#0b0e0df2;border:1px solid #1f2a26;border-radius:18px;padding:20px}.game-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:14px}.game-head .gbtn{margin-left:auto;height:36px}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ttt button{aspect-ratio:1;border-radius:14px;border:1px solid #26302d;background:#0e1311;color:#eef3f0;font:700 44px var(--fs,system-ui);cursor:pointer}.ttt .vO{color:#3ddc84}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#0e1a14;padding:10px;border-radius:14px}.c4 button{aspect-ratio:1;border-radius:50%;border:0;background:#050807;cursor:pointer}.c4 .p1{background:#3ddc84}.c4 .p2{background:#e8eef0}
.game-msg{margin:12px 0}
@media (max-width:760px){.mb{grid-template-columns:1fr}.gx-card{padding:22px}.ov-hud{left:3%;right:3%;max-width:none;bottom:3%}.ov-game{left:3%;right:3%;width:auto;top:3%}}
.gx .cta a.gbtn{background:#3ddc84;color:#04130b;border:0}.gx .cta a.gbtn.ghost{background:#141a18;color:#e6ece9;border:1px solid #26302d}
.cta button.gbtn{background:#3ddc84;color:#04130b;border:0;border-radius:12px}.cta .gbtn{border-radius:12px}
.fb-book.opening{animation:bookIn .65s cubic-bezier(.2,.9,.3,1) both}@keyframes bookIn{from{transform:translateY(46px) rotateX(16deg) scale(.88);opacity:0}}
.fb-book.opening .fb-a{animation:fbIn .35s 1.05s both}@keyframes fbIn{from{opacity:0}}
.fb-cover{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;z-index:6;transition:transform 1.15s cubic-bezier(.5,.02,.2,1)}.fb-cover.open{transform:rotateY(-180deg)}
.fc-f,.fc-k{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 14px 14px 0}
.fc-f{background:radial-gradient(120% 90% at 30% 20%,#1d2a24,#0b100e 70%);box-shadow:inset 0 0 0 1px #2c3a33,inset 14px 0 18px -10px #000;display:flex;flex-direction:column;justify-content:center;padding:10%;gap:12px;color:#d9c48a}
.fc-f b{font:700 clamp(26px,3vw,44px)/1.05 var(--fs,system-ui);letter-spacing:.02em}.fc-f span{font:500 13px var(--fm,monospace);letter-spacing:.14em;text-transform:uppercase;color:#a99a6a}
.fc-band{position:absolute;left:8%;top:0;bottom:0;width:10px;background:linear-gradient(#3ddc84,#1f8f55);opacity:.8}
.fc-k{transform:rotateY(180deg);border-radius:14px 0 0 14px;background:repeating-linear-gradient(45deg,#2b241d 0 10px,#31291f 10px 20px)}
#unlock{position:fixed;z-index:15;width:88px;height:88px;transform:translate(-50%,-120%);display:grid;place-items:center;pointer-events:none;--p:0}
#unlock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}#unlock circle{fill:#000a;stroke:#ffffff22;stroke-width:4}
#unlock .u{fill:none;stroke:#3ddc84;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:calc(176 - 176 * var(--p));filter:drop-shadow(0 0 6px #3ddc84)}
#unlock b{position:relative;font:700 16px var(--fm,monospace);color:#fff;margin-top:-8px}#unlock span{position:absolute;bottom:22px;font:500 9px var(--fm,monospace);letter-spacing:.12em;text-transform:uppercase;color:#9fe9c0}
/* ---------- base components: no browser defaults anywhere ---------- */
*{scrollbar-width:thin;scrollbar-color:#2c3a34 transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2c3a34;border-radius:9px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#3ddc84;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-button{display:none;height:0;width:0}
::selection{background:#3ddc8455;color:#fff}
:focus{outline:none}:focus-visible{outline:2px solid #3ddc84;outline-offset:2px;border-radius:6px}
input,select,textarea,button{font:inherit;color:inherit;accent-color:#3ddc84}
input,select,textarea{background:#0a0d0c;border:1px solid #26302d;border-radius:12px;color:#eef3f0}
input::placeholder,textarea::placeholder{color:#5f6b66}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233ddc84' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
option{background:#0c100e;color:#eef3f0}
input[type=checkbox],input[type=radio]{accent-color:#3ddc84;width:18px;height:18px}
a{color:inherit}
/* phone on a real phone: no fake status bar or home bar, a small close button instead */
#site .ph-close{display:none}
@media (max-width:640px),(pointer:coarse) and (max-width:900px){#site.ios .ios-status,#site.ios .ios-homebtn{display:none}#site.ios .ph-close{display:grid;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;z-index:5;width:40px;height:40px;place-items:center;border-radius:12px;border:1px solid #2a3532;background:#0b0e0dcc;color:#e6ece9;font-size:18px}}
#site.ios.phone{cursor:zoom-out}#site.ios.phone .ios-frame{cursor:auto}
/* games: holder HUD + full game screen */
.gstats{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}.gstats span{font:500 12px var(--fm,monospace);padding:4px 9px;border-radius:8px;background:#141a18;color:#b8c4bf}.gstats .w{color:#3ddc84}.gstats .l{color:#ff6b5a}
.gx.gscreen{padding:0;background:#050706}.gx.gscreen .gx-card{width:100vw;height:100vh;max-height:none;border-radius:0;border:0;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--gc,#3ddc84) 14%,#0b0e0d),#050706 70%);padding:0;overflow:auto}
.gs{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,4vh,48px) 5vw 40px;--gc:#3ddc84}.gs header{text-align:center;max-width:900px}.gs header h2{font-size:clamp(22px,2.6vw,34px)}.gs .eyebrow{color:var(--gc)}
.gs-area{width:min(620px,92vw);margin-top:22px}.g-turn{text-align:center;color:#b8c4bf;min-height:24px;margin:0 0 14px;font-size:16px}.g-turn b{color:var(--gc)}
.gs .ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(480px,86vw);margin:auto}
.gs .ttt button{aspect-ratio:1;border-radius:20px;border:1px solid #26302d;background:#0e1311;color:#eef3f0;font:800 clamp(48px,9vw,96px) var(--fs,system-ui);cursor:pointer;transition:transform .15s,background .2s}
.gs .ttt button:hover:not(.vX):not(.vO){background:#141c18;transform:translateY(-2px)}.gs .ttt .vX{color:#eef3f0}.gs .ttt .vO{color:var(--gc)}.gs .ttt .hl{background:color-mix(in srgb,var(--gc) 25%,#0e1311);border-color:var(--gc)}
.gs .ttt button.vX,.gs .ttt button.vO{animation:pop .25s}@keyframes pop{from{transform:scale(.6)}}
.gs .c4{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1vw,10px);padding:clamp(10px,1.6vw,18px);border-radius:24px;background:linear-gradient(#123a6b,#0c2647);box-shadow:inset 0 0 0 2px #2a5b9a,0 30px 60px #0008}
.gs .c4 button{aspect-ratio:1;border-radius:50%;border:0;background:#050b14;box-shadow:inset 0 4px 8px #000a;cursor:pointer}.gs .c4 .p1{background:radial-gradient(circle at 35% 30%,#8cffc0,#1f9f5c)}.gs .c4 .p2{background:radial-gradient(circle at 35% 30%,#fff,#b9c4cc)}
.gs .c4 .p1,.gs .c4 .p2{animation:fall .3s cubic-bezier(.5,0,.6,1.4)}@keyframes fall{from{transform:translateY(-140%)}}.gs .c4 .hl{outline:3px solid #ffd54a;outline-offset:-3px}
.gs-result{margin-top:26px;display:grid;justify-items:center;gap:8px;padding:22px 34px;border-radius:20px;background:#0b0e0dcc;border:1px solid #26302d;animation:pop .35s}
.gs-result b{font:800 clamp(30px,4vw,48px) var(--fs,system-ui)}.gs-result.win b{color:#3ddc84}.gs-result.lose b{color:#ff6b5a}.gs-result.draw b{color:#ffd54a}.gs-result span{color:#b8c4bf}
/* ---- the safe ---- */
.gx.safe .gx-card{width:min(1180px,96vw);background:linear-gradient(160deg,#121615f2,#080a09f5);padding:30px}
.sf-head h2{font-size:clamp(20px,2.2vw,28px)!important;font-weight:600!important;color:#cfd8d4;max-width:60ch;line-height:1.35!important}
.sf-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;margin-top:18px;align-items:start}
.sf-lab{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;font:600 11px var(--fm,monospace);letter-spacing:.16em;text-transform:uppercase;color:#87938e}.sf-lab b{color:#3ddc84;font-weight:600}
.sf-img{display:block;width:100%;padding:0;border:1px solid #26302d;border-radius:14px;overflow:hidden;background:#0d1110;cursor:zoom-in;margin-bottom:14px;transition:transform .3s}
.sf-img img{display:block;width:100%;height:auto;min-height:60px;image-rendering:auto}
.sf-img.zoom{position:fixed;inset:4vh 3vw;z-index:5;margin:0;width:auto;cursor:zoom-out;display:grid;place-items:center;background:#050706f5;box-shadow:0 30px 120px #000}
.sf-img.zoom img{width:auto;max-width:100%;max-height:100%}
.sf-img{position:relative}.sf-img.ref img{aspect-ratio:720/320}.sf-img.code img{aspect-ratio:720/150}
.sf-wait{position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:10px;font:12px var(--fm,monospace);color:#87938e;background:linear-gradient(100deg,#0d1110 30%,#151b19 50%,#0d1110 70%) 0 0/300% 100%;animation:sfsk 1.4s linear infinite}
.sf-wait i{width:22px;height:22px;border-radius:50%;border:2px solid #26302d;border-top-color:#3ddc84;animation:hdspin .8s linear infinite}
.sf.loading .sf-wait{display:grid}.sf.loading .sf-img img{opacity:0}@keyframes sfsk{to{background-position:-300% 0}}
.sf-hint{color:#b8c4bf;font-size:14px;line-height:1.55;margin:4px 0 0}
.sf-door{perspective:1400px}
.sf-door-in{position:relative;padding:22px;border-radius:20px;background:linear-gradient(145deg,#2a3030,#151918 45%,#1d2221);border:1px solid #3a4442;box-shadow:inset 0 1px 0 #ffffff14,inset 0 -10px 30px #0008,0 20px 60px #000a}
.sf-door-in::before,.sf-door-in::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9aa3a0,#3a4241);top:10px;left:10px;box-shadow:calc(100% - 0px) 0 0 #0000}
.sf-door-in::after{left:auto;right:10px}
.sf-lcd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:12px;background:#061109;border:1px solid #0f2a1a;box-shadow:inset 0 0 24px #000;margin-bottom:16px}
#sfDig{display:flex;gap:6px;flex-wrap:wrap}
#sfDig span{width:26px;height:38px;display:grid;place-items:center;border-bottom:2px solid #1f4a33;font:600 26px var(--fm,monospace);color:#3ddc84;text-shadow:0 0 10px #3ddc84aa}
#sfDig span.on{border-color:#3ddc84}
.sf-lcd small{font:12px var(--fm,monospace);color:#2fae6a;white-space:nowrap}
.sf-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sf-keys button{height:58px;border-radius:14px;border:1px solid #3a4442;background:linear-gradient(180deg,#2c3332,#1a1f1e);color:#eef3f0;font:600 22px var(--fm,monospace);cursor:pointer;box-shadow:0 3px 0 #0b0e0d,inset 0 1px 0 #ffffff1a;transition:transform .06s,box-shadow .06s,background .2s;touch-action:manipulation}
.sf-keys button:hover{background:linear-gradient(180deg,#333b3a,#1f2524)}
.sf-keys button:active{transform:translateY(3px);box-shadow:0 0 0 #0b0e0d,inset 0 1px 0 #ffffff1a}
.sf-keys .fn{font-size:13px;letter-spacing:.06em;color:#b8c4bf}
.sf-keys .go{background:linear-gradient(180deg,#3ddc84,#23a862);color:#04130b;border-color:#3ddc84;font-size:24px}
.sf-msg{min-height:22px;margin:14px 0 10px;font-size:13px;color:#87938e;line-height:1.5}.sf-msg.bad{color:#ff8b8b}.sf-msg.good{color:#3ddc84}
.sf-new{width:100%;justify-content:center}
.sf.open .sf .sf-grid,.sf .sf-head{transition:opacity .6s ease,filter .6s ease,transform .6s ease}.sf.open .sf-grid,.sf.open .sf-head{opacity:0;filter:blur(6px);transform:scale(.985)}
.fadein{animation:sffade .7s ease both}@keyframes sffade{from{opacity:0;transform:translateY(8px)}}
.sf-door-in.shake{animation:sfsh .38s}
@keyframes sfsh{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media (max-width:860px){.gx.safe{padding:0}.gx.safe .gx-card{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding:18px 14px calc(20px + env(safe-area-inset-bottom))}.sf-grid{grid-template-columns:1fr;gap:14px}.sf-keys button{height:52px}.sf-head h2{font-size:16px!important}}
/* ---- games: on phones the turntable on top, its card underneath (nothing on top of the 3D) ---- */
@media (max-width:760px){
  .gx.objview{padding:0}.gx.objview .gx-card{width:100vw;height:100dvh;max-height:none}
  .gx.objview .gx-body{height:100%}.ov{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}.ov canvas{min-height:0;height:100%}
  .ov-hud{position:relative;left:auto;right:auto;bottom:auto;margin:0 10px calc(10px + env(safe-area-inset-bottom));padding:16px 16px 14px;border-radius:18px}
  .ov-hud h2{font-size:24px!important;margin-bottom:4px!important}.ov-hud .ov-help{display:none}
  .ov-hud .cta{margin-top:10px}.ov-hud .cta .gbtn{width:100%;justify-content:center;height:48px}
}
/* the phone screen on phones: the site has its own close button in its top bar */
@media (max-width:820px){#phClose{display:none!important}}
/* loading indicator for the sharp room after the first view */
#hdload{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:#0a0d0ccc;border:1px solid #ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:12px var(--fm,monospace);color:#cfd8d4;transition:opacity .5s,transform .5s}
#hdload.done{opacity:0;transform:translate(-50%,10px);pointer-events:none}
#hdload .ring{width:18px;height:18px;border-radius:50%;border:2px solid #ffffff22;border-top-color:#3ddc84;animation:hdspin .8s linear infinite}
#hdload .bar{width:70px;height:3px;border-radius:3px;background:#ffffff1a;overflow:hidden}#hdload .bar i{display:block;height:100%;width:0;background:#3ddc84;transition:width .3s}
@keyframes hdspin{to{transform:rotate(360deg)}}
/* games: modes, history, smooth boards */
.gs-bar{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:#0e1311;border:1px solid #26302d}.seg button{height:34px;padding:0 14px;border-radius:9px;border:0;background:none;color:#9aa6a1;font:500 14px var(--fs,system-ui);cursor:pointer}.seg button.on{background:var(--gc);color:#04130b}
.gs-main{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;width:min(1100px,94vw);margin-top:22px;align-items:start}.gs-play{display:grid;justify-items:center}.gs-area{width:min(620px,92vw);margin-top:0}
.gs-area.in{animation:gsin .35s ease}@keyframes gsin{from{opacity:0;transform:translateY(8px)}}
.gs-hist{padding:16px;border-radius:18px;background:#0b0e0dcc;border:1px solid #26302d}.gs-hist h3{margin:0 0 10px;font-size:15px;color:#cfd8d4}.gs-hist ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:420px;overflow:auto}
.gs-hist li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#0e1311;font-size:13px}.gs-hist li b{font-weight:600}.gs-hist li span{color:#87938e}.gs-hist li em{font-style:normal;color:#6b7772;font-size:12px}
.gs-hist li.win b{color:#3ddc84}.gs-hist li.lose b{color:#ff6b5a}.gs-hist li.draw b{color:#ffd54a}.gs-hist li.none{display:block;color:#87938e}
@media (max-width:860px){.gs-main{grid-template-columns:1fr}.gs-hist ol{max-height:220px}}
.g-count{text-align:center;color:#b8c4bf;margin:14px 0 0;font-size:15px}.g-count .you{color:var(--gc)}
.gs .ttt button.hl{animation:hlp .6s ease infinite alternate}@keyframes hlp{to{filter:brightness(1.4)}}
.gs .c4 button{position:relative;overflow:hidden;animation:none!important}.gs .c4 button i{position:absolute;inset:0;border-radius:50%}
.gs .c4 .p1 i,.gs .c4 .p2 i{animation:c4f .42s cubic-bezier(.45,0,.6,1.25) both}.gs .c4 .p1 i{background:radial-gradient(circle at 35% 30%,#8cffc0,#1f9f5c)}.gs .c4 .p2 i{background:radial-gradient(circle at 35% 30%,#ffe08a,#e0a100)}
.gs .c4 .p1,.gs .c4 .p2{overflow:visible;background:#050b14}.gs .c4 .col:not(.p1):not(.p2){background:#0a1626}@keyframes c4f{from{transform:translateY(calc(-1 * var(--fall,300%)))}}
.gs .rv{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:10px;border-radius:18px;background:#0d3b26;box-shadow:inset 0 0 30px #0008;width:min(560px,92vw);margin:auto}
.gs .rv button{aspect-ratio:1;border:0;border-radius:6px;background:#11603d;cursor:default;position:relative;perspective:300px}.gs .rv button.can{cursor:pointer}.gs .rv button.can::after{content:"";position:absolute;inset:38%;border-radius:50%;background:#ffffff30}
.gs .rv button i{position:absolute;inset:12%;border-radius:50%;transition:transform .4s,background .2s .15s;transform:scale(0)}.gs .rv .p1 i{background:radial-gradient(circle at 35% 30%,#3a3f3d,#0b0d0c);transform:scale(1)}.gs .rv .p2 i{background:radial-gradient(circle at 35% 30%,#fff,#cfd5d2);transform:scale(1)}
.gs .rv .flip i{animation:rvf .45s}@keyframes rvf{50%{transform:rotateY(90deg)}}.gs .rv .new i{animation:pop .3s}
.gs .mem{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;width:min(560px,92vw);margin:auto}
.gs .mem button{aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;perspective:600px;position:relative}
.gs .mem .f,.gs .mem .bk{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;transition:transform .45s cubic-bezier(.3,.7,.3,1);display:grid;place-items:center}
.gs .mem .f{background:linear-gradient(145deg,#1b2420,#0e1311);border:1px solid #26302d}.gs .mem .f::after{content:"AY";font:600 13px var(--fm,monospace);color:#3ddc8455}
.gs .mem .bk{background:#121a17;border:1px solid var(--gc);transform:rotateY(180deg)}.gs .mem .bk i{font-size:clamp(26px,5vw,42px);color:var(--gc)}
.gs .mem .up .f{transform:rotateY(180deg)}.gs .mem .up .bk{transform:none}.gs .mem .done.y .bk{background:#123a24}.gs .mem .done.d .bk{background:#3a2a12;border-color:#ffb020}.gs .mem .done.d .bk i{color:#ffb020}
.gs canvas.snk{display:block;width:min(560px,92vw);aspect-ratio:1;margin:auto;border-radius:18px;border:1px solid #26302d;touch-action:none}
.snk-pad{display:none;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:8px;justify-content:center;margin-top:14px}.snk-pad button{border-radius:14px;border:1px solid #26302d;background:#0e1311;color:#eef3f0;font-size:24px}
.snk-pad button:nth-child(1){grid-column:2}.snk-pad button:nth-child(2){grid-column:1;grid-row:2}.snk-pad button:nth-child(3){grid-column:3;grid-row:2}.snk-pad button:nth-child(4){grid-column:2;grid-row:2}
@media (pointer:coarse){.snk-pad{display:grid}}
/* games object view: wide screens keep the card left, the holder renders to the right */
@media (min-width:761px){.ov-hud{left:4%;bottom:auto;top:50%;transform:translateY(-50%);max-width:380px}}
/* the room on phones: app-like top bar + bottom tabs + More sheet (no floating chips over the view) */
#mtop,#mtab,#msheet{display:none}
@media (max-width:760px){
  #hud{display:none}
  #mtop{display:flex;align-items:center;gap:8px;position:fixed;top:0;left:0;right:0;z-index:25;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 14px;background:linear-gradient(#000c,#0000);pointer-events:none}
  #mtop>*{pointer-events:auto}.mlogo{display:flex;align-items:center;gap:9px;margin-right:auto;color:#eef3f0}.mlogo img{width:26px}.mlogo b{font-size:15px;font-weight:600}
  #mtop .mic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:#eef3f0;background:#0a0d0ccc;border:1px solid #ffffff1a;backdrop-filter:blur(10px)}
  #mtab{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#050505eb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid #ffffff12}
  #mtab button{display:grid;justify-items:center;gap:3px;padding:7px 0 5px;border:0;background:none;color:#9aa6a1;font:500 11px var(--fs,system-ui);cursor:pointer}#mtab i{font-size:22px}#mtab button:active i{color:#3ddc84}
  #msheet{display:block;position:fixed;inset:0;z-index:26;background:#000a;opacity:0;transition:opacity .25s}#msheet.on{opacity:1}#msheet[hidden]{display:none}
  #msheet .msh{position:absolute;left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border-radius:22px;background:#0d0f0e;border:1px solid #ffffff17;transform:translateY(20px);transition:transform .3s cubic-bezier(.2,.9,.2,1)}
  #msheet.on .msh{transform:none}#msheet .grab{grid-column:1/-1;justify-self:center;width:40px;height:4px;border-radius:4px;background:#ffffff26;margin-bottom:4px}
  #msheet button,#msheet a{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff12;color:#eef3f0;font:500 14px var(--fs,system-ui);text-align:left;text-decoration:none;cursor:pointer}#msheet i{font-size:20px;color:#3ddc84}
  #modebar{bottom:calc(80px + env(safe-area-inset-bottom))}#hdload{bottom:calc(84px + env(safe-area-inset-bottom))}#hint{display:none!important}
}
/* the wall clock dial */
.dial{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:#0008;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}.dial.on{opacity:1}
.dl-card{position:relative;width:min(420px,100%);padding:26px;border-radius:24px;background:#0b0e0df2;border:1px solid #1f2a26;color:#eef3f0;text-align:center;box-shadow:0 40px 120px #000a}
.dl-card h2{font:700 26px var(--fs,system-ui);margin:0 0 6px}.dl-card .eyebrow{font:600 12px var(--fm,monospace);letter-spacing:.14em;text-transform:uppercase;color:#3ddc84;margin:0 0 8px}.dl-card .small{font-size:13px;color:#87938e;margin:0}
.dl-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:11px;border:1px solid #2a3532;background:#0b0e0d;color:#cfd8d4;font-size:17px;cursor:pointer}
.dl-face{width:min(300px,78vw);margin:18px auto 8px;display:block;touch-action:none;cursor:grab}
.dl-face .rim{fill:#e9ecea;stroke:#0b0e0d;stroke-width:6}.dl-face line{stroke:#1d2522;stroke-width:2}.dl-face text{font:600 11px var(--fm,monospace);fill:#1d2522;text-anchor:middle}
.dl-face .arc{fill:none;stroke:#3ddc84;stroke-width:10;stroke-linecap:round;opacity:.45}.dl-face .now{stroke:#7b8580;stroke-width:4;stroke-linecap:round}.dl-face .to{stroke:#1fa463;stroke-width:5;stroke-linecap:round}.dl-face .hub{fill:#0b0e0d}
.dl-row{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}.dl-val{font:600 16px var(--fm,monospace);min-width:150px}
.mb-art.gem{display:grid;justify-items:center;align-content:center}.mb-art canvas.gem3d{width:min(380px,80vw);aspect-ratio:1;display:block;position:relative;z-index:1}.mb-art.gem small{font-size:12px;margin-top:4px}
a.chip{color:inherit;text-decoration:none}