:root{
  --bg:#ffffff;--bg2:#f4f8f9;--card:#ffffff;--card2:#f7fafb;--line:#e3ecef;--line2:#d3e1e6;
  --ink:#071013;--ink2:#3f5660;--ink3:#7b8e96;
  --blue:#69aac1;--blue2:#a4c5cf;--blue3:#2f6d82;--goldg:linear-gradient(135deg,#9fd3e4 0%,#69aac1 50%,#3d7f97 100%);
  --gold:var(--blue3);
  --up:#11a36a;--dn:#e5484d;
  --serif:'Sora',system-ui,sans-serif;--sans:'Inter Tight',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(60% 40% at 85% -10%,rgba(105,170,193,.18),transparent 70%),radial-gradient(40% 30% at 0% 15%,rgba(105,170,193,.08),transparent 70%)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
.dim{color:var(--ink3)}.mono{font-family:var(--mono)}.up{color:var(--up)}.dn{color:var(--dn)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
em,.serif{font-family:var(--serif);font-style:normal;font-weight:800}
.goldtxt{background:var(--goldg);-webkit-background-clip:text;background-clip:text;color:transparent}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bar{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;font:700 20px var(--sans);letter-spacing:-.02em}
.mark{width:34px;height:34px;filter:drop-shadow(0 6px 14px rgba(47,109,130,.25))}
#nav{display:flex;gap:4px}
#nav a{padding:8px 12px;border-radius:10px;color:var(--ink2);font-weight:500;font-size:14px}
#nav a:hover{color:var(--ink);background:var(--card)}
#nav a.on{color:var(--ink);background:var(--card2)}
.search{flex:1;max-width:340px;margin-left:auto}
.search input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:14px;outline:none}
.search input:focus{border-color:var(--blue)}
.tape{border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;font:500 12.5px var(--mono);color:var(--ink2);height:32px;display:flex;align-items:center}
.tape-in{display:inline-flex;gap:38px;padding-left:24px;animation:tape 60s linear infinite}
.tape-in span b{color:var(--ink)}.tape-in .g{color:var(--blue3)}
@keyframes tape{to{transform:translateX(-50%)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 20px;font-weight:600;font-size:15px;border:1px solid var(--line2);background:var(--card2);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.btn.gold{background:var(--goldg);color:#fff;border:0;box-shadow:0 10px 26px -10px rgba(47,109,130,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.gold:hover{box-shadow:0 14px 32px -10px rgba(47,109,130,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.sm{padding:8px 14px;font-size:13.5px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--bg2);font-size:13px;color:var(--ink2)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.k{font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.k b{color:var(--gold);font-weight:600}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(7,16,19,.04),0 12px 30px -18px rgba(7,16,19,.12)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:72px 0 40px}
.hero h1{font:800 96px/0.95 var(--serif);letter-spacing:-.045em}
.hero h1 em{display:block}
.hero p.lede{font-size:19px;color:var(--ink2);max-width:560px;margin-top:26px;line-height:1.55}
.hero p.lede b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.stats{display:flex;gap:34px;margin-top:38px}
.stats div b{display:block;font:600 30px var(--mono);letter-spacing:-.02em}
.stats div span{font-size:13px;color:var(--ink3)}

/* the coin */
.stage{position:relative;height:520px}
.coin{position:absolute;left:50%;top:46%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffffff 0%,#d8eef5 16%,#9fd3e4 40%,#5e9fb6 68%,#2f6d82 100%);
  box-shadow:0 50px 90px -30px rgba(47,109,130,.55),0 0 0 10px rgba(105,170,193,.12),inset 0 -14px 30px rgba(20,60,75,.45),inset 0 10px 20px rgba(255,255,255,.6);
  display:grid;place-items:center;animation:float 6s ease-in-out infinite}
.coin::before{content:'';position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(20,60,75,.3);box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.coin span{font:800 118px/1 var(--serif);color:#0f3a48;text-shadow:0 2px 0 rgba(255,255,255,.6),0 -1px 0 rgba(10,40,50,.35);letter-spacing:-.06em}
@keyframes float{50%{transform:translateY(-14px) rotate(-3deg)}}
.glow{position:absolute;left:50%;top:46%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(105,170,193,.25),transparent)}
.ticket{position:absolute;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line2);display:flex;gap:10px;align-items:center;box-shadow:0 20px 40px -20px rgba(7,16,19,.25);font-size:13px;animation:float 7s ease-in-out infinite}
.ticket img,.ticket .av{width:36px;height:36px;border-radius:10px;object-fit:cover}
.ticket b{display:block;font-size:14px}.ticket small{color:var(--ink3);font:500 11.5px var(--mono)}
.ticket.t1{left:0;top:40px}.ticket.t2{right:0;top:160px;animation-delay:-2s}.ticket.t3{left:30px;bottom:40px;animation-delay:-4s}

/* sections */
section.s{padding:56px 0}
.sh{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.sh h2{font:800 44px/1.05 var(--serif);letter-spacing:-.04em}
.sh p{color:var(--ink2);max-width:520px}
.king{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px;position:relative;overflow:hidden}
.king::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 120% at 0% 50%,rgba(105,170,193,.16),transparent 70%)}
.king>*{position:relative}
.king img,.king .av{width:96px;height:96px;border-radius:20px;object-fit:cover}
.king h3{font:700 28px var(--sans);letter-spacing:-.02em}
.crown{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat .card{padding:24px}
.feat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(105,170,193,.12);border:1px solid rgba(105,170,193,.35);color:var(--blue3);margin-bottom:16px}
.feat h3{font:600 19px var(--sans);letter-spacing:-.01em}
.feat p{color:var(--ink2);margin-top:6px;font-size:14.5px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps .card{padding:22px}
.steps b{font:800 40px/1 var(--serif);color:var(--blue)}
.steps h3{font:600 17px var(--sans);margin-top:10px}.steps p{color:var(--ink2);font-size:14px;margin-top:4px}
.big{padding:56px;text-align:center;position:relative;overflow:hidden}
.big::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%,rgba(105,170,193,.2),transparent 70%)}
.big>*{position:relative}.big h2{font:800 64px/1 var(--serif);letter-spacing:-.045em}.big p{color:var(--ink2);margin:14px auto 26px;max-width:520px}

/* board */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.tabs button.on{color:#fff;background:var(--goldg);border-color:transparent;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cc{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px;transition:border-color .15s,transform .15s}
.cc:hover{border-color:var(--blue2);transform:translateY(-2px)}
.cc img,.cc .av{width:96px;height:96px;border-radius:14px;object-fit:cover;background:var(--card2)}
.av{display:grid;place-items:center;font:700 28px var(--sans);color:var(--blue3);background:var(--bg2)}
.cc .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
.cc .nm b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .nm span{font:500 12px var(--mono);color:var(--ink3)}
.cc .mc{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.cc .mc b{font:600 18px var(--mono)}
.cc .ds{color:var(--ink3);font-size:12.5px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc .meta{grid-column:1/-1;display:flex;align-items:center;gap:10px;font:500 11.5px var(--mono);color:var(--ink3)}
.prog{height:6px;border-radius:99px;background:#e7eff2;overflow:hidden;flex:1}
.prog i{display:block;height:100%;background:var(--goldg);border-radius:99px}
.tag{font:600 10.5px var(--mono);padding:3px 7px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.tag.g{color:var(--blue3);border-color:var(--blue2);background:rgba(105,170,193,.1)}
.empty{padding:50px;text-align:center;color:var(--ink2)}

/* forms */
.lp{display:grid;grid-template-columns:1fr 400px;gap:20px;align-items:start;padding:30px 0 60px}
.fc{padding:24px;display:grid;gap:16px}
.fc+ .fc{margin-top:14px}
label.f{display:grid;gap:7px;font-size:13.5px;color:var(--ink2);font-weight:500}
label.f small{color:var(--ink3);font-weight:400}
input.i,textarea.i{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;outline:none;width:100%}
input.i:focus,textarea.i:focus{border-color:var(--blue)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pic{width:120px;height:120px;border-radius:18px;border:1.5px dashed var(--line2);display:grid;place-items:center;cursor:pointer;overflow:hidden;color:var(--ink3);font-size:13px;flex:none;background:var(--bg2)}
.pic img{width:100%;height:100%;object-fit:cover}
.opt{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.opt .t{flex:1}.opt .t b{display:block;font-size:15px}.opt .t small{color:var(--ink3);font-size:13px}
.sw{width:46px;height:26px;border-radius:99px;background:#cfdde2;position:relative;cursor:pointer;border:0;flex:none;transition:background .15s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.sw.on{background:var(--blue)}.sw.on::after{transform:translateX(20px)}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:9px;cursor:pointer;color:var(--ink2);font-weight:600}
.seg button.on{background:var(--goldg);color:#fff}
input[type=range]{width:100%;accent-color:var(--blue)}
.ca{font:600 15px var(--mono);word-break:break-all;color:var(--ink2)}.ca b{color:var(--blue3)}
.note{font-size:13px;color:var(--ink3)}.err{color:var(--dn);font-size:13.5px}.ok{color:var(--up)}
.preview{position:sticky;top:120px;padding:20px;display:grid;gap:14px}

/* coin page */
.cp{display:grid;grid-template-columns:1fr 380px;gap:20px;padding:30px 0 60px;align-items:start}
.chd{display:flex;gap:18px;align-items:center;padding:20px}
.chd img,.chd .av{width:84px;height:84px;border-radius:18px;object-fit:cover}
.chd h1{font:700 30px var(--sans);letter-spacing:-.02em}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kv div{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.kv small{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.kv b{font:600 20px var(--mono)}
.chart svg{width:100%;height:240px;display:block}
.trades{max-height:360px;overflow:auto;font:500 12.5px var(--mono)}
.trades div{display:grid;grid-template-columns:60px 1fr 1fr 90px;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line)}
.cm{display:grid;gap:10px}.cm .c{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.cm .c small{font:500 11.5px var(--mono);color:var(--ink3)}

/* docs */
.doc{max-width:820px;padding:50px 0 70px}.doc h1{font:800 60px/1.02 var(--serif);letter-spacing:-.045em}.doc h2{font:600 22px var(--sans);margin:34px 0 8px}
.doc p{color:var(--ink2);margin-top:10px;font-size:16px}.doc p b{color:var(--ink)}

.foot{border-top:1px solid var(--line);padding:26px 24px;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--ink2);flex-wrap:wrap}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:40px}.hero h1{font-size:72px}.stage{height:380px}
  .feat,.grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.lp,.cp{grid-template-columns:1fr}.preview{position:static}
  #nav{display:none}.search{max-width:none}
}
@media (max-width:640px){
  .wrap,.bar{padding-left:16px;padding-right:16px}.hero h1{font-size:56px}.feat,.grid,.steps,.kv,.row2{grid-template-columns:1fr}
  .sh{flex-direction:column;align-items:start}.sh h2{font-size:40px}.big{padding:34px 20px}.big h2{font-size:48px}.stats{gap:20px}
  .search{display:none}.king{grid-template-columns:auto 1fr}.king .btn{grid-column:1/-1}
}

/* ── sauce: blue page, hero band, the bull ── */
body{background:#e4f1f6;background-image:radial-gradient(70% 50% at 100% 0%,rgba(105,170,193,.35),transparent 70%),radial-gradient(50% 40% at 0% 60%,rgba(105,170,193,.18),transparent 70%)}
.top{background:rgba(255,255,255,.78)}
.mark{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(47,109,130,.35))}
.band{position:relative;overflow:hidden;background:linear-gradient(155deg,#1f5a6e 0%,#3d86a0 38%,#69aac1 70%,#9fd3e4 100%);color:#fff;border-bottom:1px solid rgba(255,255,255,.25)}
.band::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(90% 80% at 60% 40%,#000,transparent)}
.band::after{content:'';position:absolute;width:700px;height:700px;right:-160px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);animation:drift 14s ease-in-out infinite}
@keyframes drift{50%{transform:translate(-60px,40px)}}
.band .wrap{position:relative;z-index:1}
.bigm7{position:absolute;right:-40px;bottom:-120px;font:800 520px/1 var(--serif);letter-spacing:-.08em;color:rgba(255,255,255,.07);pointer-events:none;user-select:none}
.band .hero h1{color:#fff;text-shadow:0 10px 40px rgba(10,40,55,.35)}
.band .hero h1 em{background:linear-gradient(90deg,#ffffff,#d9f2fa 50%,#ffe6a3);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .k{color:rgba(255,255,255,.7)}.band .k b{color:#fff}
.band .hero p.lede{color:rgba(255,255,255,.86)}.band .hero p.lede b{color:#fff}
.band .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px)}
.band .chip i{background:#ffe6a3;box-shadow:0 0 8px #ffe6a3}
.band .stats div b{color:#fff}.band .stats div span{color:rgba(255,255,255,.7)}
.band .btn.gold{background:#fff;color:#1f5a6e;box-shadow:0 14px 30px -12px rgba(10,40,55,.6)}
.band .btn:not(.gold){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.bull{position:absolute;left:50%;top:48%;width:400px;margin:-200px 0 0 -200px;filter:drop-shadow(0 40px 50px rgba(10,40,55,.45));animation:bob 5s ease-in-out infinite;z-index:2}
@keyframes bob{50%{transform:translateY(-16px) rotate(-2deg)}}
.glow{background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent)}
.bubble{position:absolute;right:6px;top:6px;z-index:3;background:#fff;color:var(--ink);font:700 15px/1.3 var(--serif);letter-spacing:-.01em;padding:12px 16px;border-radius:16px;box-shadow:0 18px 40px -16px rgba(10,40,55,.55);animation:float 6s ease-in-out infinite}
.bubble::after{content:'';position:absolute;left:28px;bottom:-9px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.ticket{z-index:4}
.cc,.feat .card,.steps .card{transition:transform .2s,box-shadow .2s,border-color .2s}
.feat .card:hover,.steps .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(31,90,110,.45)}
.big{background:linear-gradient(155deg,#1f5a6e,#3d86a0 50%,#69aac1);color:#fff;border:0}
.big .k{color:rgba(255,255,255,.7)}.big p{color:rgba(255,255,255,.85)}
.big h2 em{background:linear-gradient(90deg,#fff,#ffe6a3);-webkit-background-clip:text;background-clip:text;color:transparent}
.big .btn.gold{background:#fff;color:#1f5a6e}
.big::after{content:'';position:absolute;right:40px;bottom:-40px;width:200px;height:200px;background:url(/logo.png) center/contain no-repeat;opacity:.9;transform:rotate(-12deg)}
@media (max-width:1000px){.bull{width:320px;margin:-160px 0 0 -160px}.bigm7{font-size:300px}.big::after{display:none}}
.band .ticket{color:var(--ink)}.band .ticket small{color:var(--ink3)}

/* ── RULE: the floating book and its rule pages ── */
.mark{width:40px;height:40px}
.book3d{width:470px !important;margin:-235px 0 0 -235px !important;animation:bookfloat 6s ease-in-out infinite !important}
@keyframes bookfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-22px) rotate(1.5deg)}}
.shadow3d{position:absolute;left:50%;top:76%;width:300px;height:36px;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,40,55,.35),transparent);animation:shadowpulse 6s ease-in-out infinite;z-index:1}
@keyframes shadowpulse{50%{transform:scale(.82);opacity:.6}}
.band .ticket .av{background:var(--goldg);color:#fff;font:800 16px var(--serif)}
.rules4{grid-template-columns:repeat(4,1fr)}
.pages{display:grid;gap:8px}
.pg{position:relative;padding:12px 14px 12px 16px;border-radius:12px;background:linear-gradient(180deg,#fbfdfe,#f1f7f9);border:1px solid var(--line);font-size:14px;box-shadow:inset 3px 0 0 var(--blue)}
.pg span{display:block;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue3);margin-bottom:3px}
.pg.empty-pg{box-shadow:inset 3px 0 0 #cfdde2;color:var(--ink3)}
.opt.rule.on{border-color:var(--blue2);background:linear-gradient(180deg,#f3fafc,#eaf5f8);box-shadow:inset 3px 0 0 var(--blue)}
.card.book{border-color:var(--blue2);box-shadow:0 1px 2px rgba(7,16,19,.04),0 18px 40px -22px rgba(31,90,110,.45)}
@media (max-width:1000px){.rules4{grid-template-columns:1fr 1fr}.book3d{width:330px !important;margin:-165px 0 0 -165px !important}}
@media (max-width:640px){.rules4{grid-template-columns:1fr}}
.shadow3d{display:none}

/* the dev's own WHEN / THEN rules */
.crule{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border:1px solid var(--line2);border-radius:12px;background:#fff}
.crule .kw{font:700 11px var(--mono);letter-spacing:.12em;color:var(--blue3);width:auto;padding:0}
.crule select{flex:1 1 170px;width:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;font:500 13px var(--sans)}
.crule .val{display:flex!important;align-items:center;gap:6px;flex:0 1 150px}.crule .val input{width:96px;padding:8px 10px}
.crule .x{margin-left:auto;border:0;background:none;font-size:20px;color:var(--ink3);cursor:pointer}

/* ── the entrance: open the rulebook to enter ── */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:26px;text-align:center;color:#fff;background:linear-gradient(155deg,#16485a 0%,#2f7290 45%,#69aac1 85%,#9fd3e4 100%);transition:opacity .8s ease,transform .8s ease}
#gate::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent)}
#gate>*{position:relative}
#gate.gone{opacity:0;transform:scale(1.08);pointer-events:none}
.g-stage{perspective:1800px}
.g-book{position:relative;width:300px;height:400px;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-14deg);cursor:pointer;animation:gfloat 5s ease-in-out infinite;transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
@keyframes gfloat{50%{translate:0 -12px}}
#gate.open .g-book{transform:rotateX(6deg) rotateY(0) translateX(150px);animation:none}
.g-pages{position:absolute;inset:6px 0 6px 6px;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,#e8e2d6 0,#fbf9f4 8%,#fbf9f4);box-shadow:3px 0 0 #efe9dd,6px 0 0 #e2dccf,9px 0 0 #d8d1c3,12px 2px 0 #cfc7b8,0 30px 60px -20px rgba(5,25,35,.6)}
.g-page{position:absolute;inset:34px 30px;text-align:left;color:#203038;font:400 17px/1.5 Georgia,serif}
.g-page small{display:block;font:700 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#2f6d82;margin-bottom:18px}
.g-page p{margin-bottom:12px}.g-page span{font-weight:700;color:#2f6d82}
.g-lines i{display:block;height:6px;border-radius:3px;background:#dcd5c8;margin:12px 0}.g-lines i:nth-child(2n){width:80%}.g-lines i:nth-child(3n){width:60%}
.g-cover{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.3s cubic-bezier(.5,.05,.2,1)}
#gate.open .g-cover{transform:rotateY(-168deg)}
.g-front,.g-back{position:absolute;inset:0;border-radius:6px 14px 14px 6px;backface-visibility:hidden}
.g-front{display:grid;place-items:center;align-content:center;gap:10px;background:linear-gradient(90deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 7%,rgba(255,255,255,.08) 8%,rgba(0,0,0,0) 10%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 4px),linear-gradient(160deg,#4a96b3,#2c6f8a 55%,#1f566c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset -6px 0 12px rgba(0,0,0,.25),0 30px 60px -20px rgba(5,25,35,.7)}
.g-front small{font:600 12px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,236,190,.8)}
.g-front b{font:800 76px/1 var(--serif);letter-spacing:-.04em;color:#ffe9b3;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.g-front i{width:120px;height:2px;background:linear-gradient(90deg,transparent,#ffe9b3,transparent)}
.g-front em{font:italic 400 22px Georgia,serif;color:rgba(255,240,205,.9)}
.g-front span{position:absolute;bottom:22px;font:500 11px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.55)}
.g-back{transform:rotateY(180deg);background:linear-gradient(90deg,#1f566c,#2c6f8a)}
.g-hint{color:rgba(255,255,255,.75);font-size:14px;margin-top:-12px}
#gate .btn.gold{background:#fff;color:#1f5a6e}
@media (max-width:640px){.g-book{width:220px;height:300px}.g-front b{font-size:56px}.g-page{inset:22px 20px;font-size:13px}#gate.open .g-book{transform:rotateX(6deg) translateX(110px)}}
#g-open,.g-hint{transition:opacity .4s}#gate.open #g-open,#gate.open .g-hint{opacity:0;pointer-events:none}

.xlink{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:var(--ink)}.xlink:hover{border-color:var(--blue)}