:root{
  --bg:#0e0e0c; --surface:#161614; --chip:#1e1e1b; --ink:#f1eee6; --muted:#9a978d; --line:#2b2b27;
  --accent:#c8f031; --accent-ink:#0e0e0c; --link:#c8f031; --hot:#ff5c39; --ok:#7ee36d;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f2efe6; --surface:#fbf9f3; --chip:#e8e4d8; --ink:#13130f; --muted:#6b685e; --line:#d6d1c3;
    --accent:#c8f031; --accent-ink:#13130f; --link:#4c6a00; --hot:#e0431f; --ok:#2f8a1f;
  }
}
:root[data-theme="light"]{
  --bg:#f2efe6; --surface:#fbf9f3; --chip:#e8e4d8; --ink:#13130f; --muted:#6b685e; --line:#d6d1c3;
  --accent:#c8f031; --accent-ink:#13130f; --link:#4c6a00; --hot:#e0431f; --ok:#2f8a1f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--link)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.muted{color:var(--muted)}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.top a{color:var(--muted);text-decoration:none}
.top a:hover{color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);animation:pulse 2s infinite}
.dot.wait{background:#f3c64a;box-shadow:0 0 0 4px color-mix(in srgb,#f3c64a 25%,transparent)}
.dot.off{background:var(--hot);animation:none;box-shadow:none}
@keyframes pulse{50%{box-shadow:0 0 0 8px transparent}}

.eyebrow{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 18px}
h1{font:800 clamp(52px,10vw,120px)/.88 var(--display);letter-spacing:-.04em;margin:0;text-transform:uppercase}
h1.small{font-size:clamp(38px,7vw,72px)}
h1 .mark{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:0 .08em;transform:rotate(-2deg);margin-top:.06em}
h2{font:700 clamp(26px,3.6vw,38px)/1.08 var(--display);letter-spacing:-.025em;margin:0 0 14px}
h3{font:700 20px/1.2 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.lead{font-size:20px;max-width:34ch;margin:28px 0 0;color:var(--muted)}
.lead b{color:var(--ink);font-weight:600}

/* hero + pass */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding:48px 0 64px}
.pass{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:22px;position:relative;transform:rotate(1.5deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.pass-main{flex:1;padding:22px 22px 18px;min-width:0}
.pass-head{display:flex;justify-content:space-between;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:16px;border-bottom:1px dashed var(--line)}
.pass-head .ok{color:var(--link)}
.pass dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px}
.pass dt{font:400 12px/1.9 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pass dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.pass dd.big{font:800 26px/1 var(--display)}
.pass-stub{flex:none;width:150px;padding:18px 16px;border-left:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.pass-stub::before{top:-13px;clip-path:inset(50% 0 0 0)}
.pass-stub::after{bottom:-13px;clip-path:inset(0 0 50% 0)}
.qr{background:#fff;border-radius:10px;padding:6px;width:112px;height:112px}
.qr svg{display:block;width:100%;height:100%}
.stub-cap{font:600 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:center}

.marquee{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;margin:0 -16px;padding:14px 0;font:700 15px/1 var(--display);text-transform:uppercase}
.marquee-track{display:inline-flex;gap:28px;animation:run 30s linear infinite;padding-left:28px}
.marquee span{display:inline-flex;align-items:center;gap:28px}
.marquee span::after{content:"✱";color:var(--accent)}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track,.dot{animation:none}}

/* steps */
.step{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:44px 0;border-bottom:1px solid var(--line)}
.num{font:800 132px/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--ink);user-select:none}
.step:hover .num{color:var(--accent);-webkit-text-stroke-color:var(--accent);transition:color .25s}
.step p{margin:10px 0;max-width:62ch}
.split{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.split .grow{flex:1 1 320px;min-width:0}
.qr-box{flex:none;text-align:center}
.qr-box .qr{width:150px;height:150px}
.qr-box .stub-cap{margin-top:8px}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn .arr{font-family:var(--mono)}
.btn-hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-danger{border-color:var(--hot);color:var(--hot)}
kbd{font:600 14px/1 var(--mono);background:var(--chip);border:1px solid var(--line);border-bottom-width:3px;border-radius:8px;padding:4px 8px;white-space:nowrap;color:var(--ink)}

/* forms */
.form{display:grid;gap:14px;max-width:520px;margin-top:18px}
.form label{display:grid;gap:6px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.form input{font:500 17px/1.3 var(--body);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;width:100%}
.form input:focus{outline:none;border-color:var(--accent)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-left:3px solid var(--hot);padding:10px 14px;background:color-mix(in srgb,var(--hot) 10%,transparent);border-radius:0 12px 12px 0;margin:16px 0}
.alert.ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* copy field */
.copyline{display:flex;gap:8px;align-items:stretch;margin:12px 0}
.copyline code{flex:1;min-width:0;font:13px/1.5 var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;overflow-wrap:anywhere;max-height:96px;overflow:auto}
.copy{flex:none;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:0 16px;cursor:pointer;min-height:44px}
.copy.ghost{background:none;border:1px solid var(--line);color:var(--ink)}

/* apps */
.platforms{margin-top:18px;border-top:1px solid var(--line)}
.platform{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.plat{font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.chip:hover{border-color:var(--ink)}
.chip.hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip em{font:600 10px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;background:var(--accent-ink);color:var(--accent);padding:4px 6px;border-radius:999px}
.warn{margin-top:16px;font-size:15px;color:var(--muted);padding-left:14px;border-left:3px solid var(--hot)}

ol.how{counter-reset:s;list-style:none;padding:0;margin:8px 0 0}
ol.how li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;padding:10px 0;align-items:baseline}
ol.how li::before{content:counter(s,decimal-leading-zero);font:600 13px/1 var(--mono);color:var(--link)}

/* cabinet */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;margin:16px 0}
.panel.hot{border-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.server{display:flex;gap:18px;align-items:flex-start}
.server .qr{width:120px;height:120px;flex:none}
.server .body{flex:1;min-width:0}
.tag{font:700 28px/1 var(--display);letter-spacing:-.03em}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stat b{display:block;font:800 30px/1.1 var(--display);letter-spacing:-.03em}
.stat span{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.status{display:inline-flex;align-items:center;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:8px 12px;border:1px solid var(--line);border-radius:999px}

/* admin */
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td form{display:inline}
.st-active{color:var(--ok)} .st-pending{color:#f3c64a} .st-rejected,.st-revoked{color:var(--muted)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.req{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.req b{font-size:18px}

/* faq */
.faq{padding:56px 0 24px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:600 19px/1.3 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--mono);color:var(--link);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 20px;max-width:64ch;color:var(--muted)}

footer{padding:64px 0 32px;overflow:hidden}
.big-out{font:800 clamp(40px,12.5vw,148px)/.85 var(--display);letter-spacing:-.05em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--line);white-space:nowrap;margin:0 0 24px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:40px;padding:28px 0 48px}
  .pass{transform:rotate(1deg)}
  .step{grid-template-columns:1fr;gap:4px;padding:36px 0}
  .num{font-size:88px}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .pass-stub,.qr-box,.server .qr{display:none}
  .pass dd{font-size:14px}
  .pass dd.big{font-size:22px}
  .platform{grid-template-columns:1fr;gap:10px}
  .btns .btn{width:100%}
  .copyline{flex-direction:column}
  .panel{padding:18px}
  table, thead, tbody, tr, td{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--line);padding:10px 0}
  td{border:0;padding:4px 0}
  .row-actions{justify-content:flex-start}
}
.form-inline{grid-template-columns:1fr 1fr auto;max-width:none;align-items:end}
@media (max-width:640px){.form-inline{grid-template-columns:1fr}}
/* code blocks */
.code{position:relative;margin:12px 0}
.code pre{margin:0;font:13.5px/1.6 var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;padding-right:110px;overflow-x:auto;white-space:pre}
.code .copy{position:absolute;top:8px;right:8px;min-height:32px;padding:0 12px}
.guide .step{grid-template-columns:120px 1fr}
.guide .num{font-size:84px}
.guide h2{font-size:clamp(22px,3vw,30px)}
.guide ul{padding-left:20px;margin:8px 0}
.guide li{margin:4px 0}
.guide details.more{border:1px solid var(--line);border-radius:14px;padding:0 16px;margin:12px 0}
.guide details.more summary{cursor:pointer;padding:14px 0;font-weight:600}
.guide details.more[open]{padding-bottom:8px}
@media (max-width:860px){.guide .step{grid-template-columns:1fr}.guide .num{font-size:64px}}
@media (max-width:520px){.code pre{padding-right:16px;padding-top:48px}}