:root{
  --ink:#0A0A0C; --paper:#F5F5F3; --accent:#F2762B; --accent-deep:#C85A16;
  --display:"Space Grotesk",system-ui,sans-serif; --body:Inter,system-ui,sans-serif;
  --soft:color-mix(in srgb,var(--ink) 72%,transparent);
  --muted:color-mix(in srgb,var(--ink) 52%,transparent);
  --faint:color-mix(in srgb,var(--ink) 32%,transparent);
  --line:color-mix(in srgb,var(--ink) 11%,transparent);
  --line-2:color-mix(in srgb,var(--ink) 20%,transparent);
  --glass:color-mix(in srgb,#fff 66%,transparent);
  --glass-2:color-mix(in srgb,#fff 84%,transparent);
  --sh:0 1px 2px rgb(0 0 0/.04),0 10px 30px rgb(0 0 0/.07);
  --sh-hi:0 2px 6px rgb(0 0 0/.06),0 22px 56px rgb(0 0 0/.13);
  --r:16px; --gut:clamp(16px,4vw,52px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--soft);font:16px/1.62 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.field{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--paper)}
.bloom{position:absolute;border-radius:50%;filter:blur(78px);opacity:.4}
.b1{width:46vw;height:46vw;left:-10vw;top:-14vw;background:radial-gradient(circle,var(--accent),transparent 68%)}
.b2{width:40vw;height:40vw;right:-8vw;top:6vh;background:radial-gradient(circle,#8FD5C4,transparent 68%)}
.b3{width:52vw;height:52vw;left:22vw;top:56vh;background:radial-gradient(circle,#A8C6F0,transparent 70%)}
.grain{position:absolute;inset:0;opacity:.3;background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) .5px,transparent .5px);background-size:3px 3px}

.demo-bar{background:linear-gradient(90deg,var(--accent),var(--accent-deep));color:#fff;font:700 12.5px/1.5 var(--body);text-align:center;padding:7px 16px;letter-spacing:.02em}
nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(20px) saturate(170%);background:color-mix(in srgb,var(--paper) 76%,transparent);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:12px;padding-block:11px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:9px;font:800 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.mark svg{width:24px;height:24px}
.tabs{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{font:600 13.5px var(--body);color:var(--muted);background:none;border:0;padding:8px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink);background:var(--glass-2)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tab:focus-visible,.btn:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tenant{display:flex;align-items:center;gap:7px;font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tenant select{font:600 13px var(--body);padding:7px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--glass-2);color:var(--ink)}

h1{font:500 clamp(32px,5.4vw,58px)/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 16px;max-width:18ch;text-wrap:balance}
h2{font:500 clamp(23px,3.2vw,33px)/1.14 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0}
h3{font:600 17px var(--display);color:var(--ink);margin:0 0 6px}
.kicker{font:500 11px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.lede{font-size:clamp(16px,1.9vw,18.5px);max-width:62ch;margin:0 0 24px}
.sub{max-width:70ch;color:var(--muted);font-size:15px;margin:6px 0 20px}
.sec{padding-block:clamp(30px,4.6vw,52px) 0}
.sec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.note{margin-left:auto;font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.hero{padding-block:clamp(28px,4.4vw,54px) 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.view{display:none;padding-bottom:64px}.view.on{display:block}

.btn{font:700 14px var(--body);border-radius:11px;padding:10px 17px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:box-shadow .16s,transform .14s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 34%,transparent)}
.btn.primary:hover{box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 44%,transparent)}
.btn.ghost{background:var(--glass);border-color:var(--line-2);color:var(--ink);backdrop-filter:blur(10px)}
.btn.ghost:hover{background:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:30px}
.stat{background:var(--glass-2);backdrop-filter:blur(12px);padding:16px 18px}
.stat b{display:block;font:500 22px "JetBrains Mono",monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:18px}
.card{border-radius:var(--r);background:var(--glass-2);backdrop-filter:blur(18px) saturate(180%);border:1px solid color-mix(in srgb,#fff 88%,transparent);box-shadow:var(--sh);overflow:hidden;text-align:left}
.card:hover{box-shadow:var(--sh-hi)}
.viz{aspect-ratio:4/3;position:relative;background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--ink) 8%,transparent))}
.viz svg{position:absolute;inset:0;width:100%;height:100%}
.badge{position:absolute;top:10px;right:10px;font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;padding:5px 9px;border-radius:99px;background:color-mix(in srgb,#fff 90%,transparent);border:1px solid var(--line)}
.cat{position:absolute;top:10px;left:10px;font:700 10.5px var(--body);padding:5px 10px;border-radius:99px;background:color-mix(in srgb,#fff 90%,transparent);border:1px solid var(--line)}
.card-body{padding:15px 17px 17px}
.card-body p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.card-foot{display:flex;justify-content:space-between;font:500 12px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.card-foot b{color:var(--ink);font-weight:500}

.panel{background:var(--glass-2);backdrop-filter:blur(20px) saturate(180%);border:1px solid color-mix(in srgb,#fff 88%,transparent);border-radius:18px;padding:clamp(18px,3.2vw,28px);box-shadow:var(--sh-hi)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
label{display:block;font:700 12.5px var(--body);color:var(--soft)}
.full{grid-column:1/-1}
input,select,textarea{width:100%;margin-top:6px;font:15px var(--body);color:var(--ink);padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:color-mix(in srgb,#fff 80%,transparent)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);background:#fff}
.msg{font:600 14px var(--body)}
.msg.ok{color:#1F9E78}.msg.err{color:#C8456A}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--glass-2);backdrop-filter:blur(12px);margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:700 11px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}
td.mono{font:500 12.5px "JetBrains Mono",monospace;white-space:nowrap}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.tile{background:var(--glass);border:1px solid color-mix(in srgb,#fff 88%,transparent);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.tile .num{font:500 11px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.tile p{margin:0;font-size:14.5px;color:var(--muted)}

.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cl{background:var(--glass-2);border:1px solid color-mix(in srgb,#fff 88%,transparent);border-radius:14px;padding:16px;box-shadow:var(--sh)}
.cl h4{margin:0 0 4px;font:700 15px var(--body);color:var(--ink)}
.cl .p{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.cl .trap{font-size:12.8px;color:var(--soft);border-left:2px solid var(--accent);padding-left:10px;margin:0 0 10px}
.cl ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--muted)}
.cl .meta{margin-top:10px;font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chip{font:600 12.5px var(--body);padding:6px 13px;border-radius:99px;border:1px solid var(--line-2);background:var(--glass);color:var(--soft);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.log{font:500 12.5px/1.8 "JetBrains Mono",monospace;background:color-mix(in srgb,#fff 76%,transparent);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:14px;white-space:pre-wrap;max-height:420px;overflow:auto;color:var(--soft)}
.log b{color:#1F9E78}
.log i{color:#C8456A;font-style:normal}

.out{margin-top:18px;display:grid;gap:14px}
.kv{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:6px 18px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink);font:500 13px "JetBrains Mono",monospace}
details{border:1px solid var(--line);border-radius:12px;background:var(--glass-2);margin-top:10px}
summary{padding:13px 16px;cursor:pointer;font-weight:700;color:var(--ink)}
details .body{padding:0 16px 16px;font-size:14px}
footer{margin-top:clamp(40px,6vw,72px);padding-block:24px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.fine{max-width:88ch}
@media (max-width:700px){.mark b{display:none}.tenant span{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:16px}
.hint{font-weight:400;color:var(--faint);font-size:11.5px}
.gate{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:start;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--glass-2);margin-bottom:9px}
.gate .dot{width:18px;height:18px;border-radius:50%;margin-top:3px}
.gate.ok .dot{background:#1F9E78}
.gate.no .dot{background:var(--line-2);border:2px solid var(--accent)}
.gate h4{margin:0 0 3px;font:700 15px var(--body);color:var(--ink)}
.gate p{margin:0;font-size:13px;color:var(--muted)}
.gate .owed{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.gate .cid{font:500 11px "JetBrains Mono",monospace;color:var(--faint);word-break:break-all}
.blk{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;background:color-mix(in srgb,#fff 60%,transparent)}
.blk .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.blk .bh b{font:700 14px var(--body);color:var(--ink)}
.blk .tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font:500 10px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-deep)}
.tag.req{background:color-mix(in srgb,#C8456A 14%,transparent);color:#8f2c48}
.blk textarea{font:13px/1.6 ui-monospace,"JetBrains Mono",monospace;min-height:90px}
.blk .dec{font-size:12.5px;color:var(--soft);border-left:2px solid var(--citrine,#D99A2B);padding-left:9px;margin-top:8px}
#qr-out canvas,#qr-out img{border-radius:12px;background:#fff;padding:12px;box-shadow:var(--sh)}
.stat-mini{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font:500 13px "JetBrains Mono",monospace}
.stat-mini b{color:var(--ink)}

/* ---------- grouped navigation ---------- */
.navgroup{position:relative}
.tab[data-group]{display:inline-flex;align-items:center;gap:6px}
.tab[data-group][aria-selected="true"]{background:var(--ink);color:var(--paper)}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.55}
.tab[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:80;min-width:230px;padding:10px;
  background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line-2);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.16);
  display:none}
.navmenu.open{display:block}
.navhint{margin:2px 6px 8px;font-size:12px;color:var(--faint);max-width:34ch;line-height:1.45}
.navitem{display:block;width:100%;text-align:left;font:600 14px var(--body);color:var(--soft);
  background:none;border:0;padding:9px 10px;border-radius:9px;cursor:pointer}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem[aria-current="true"]{color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 12%,transparent)}
@media (max-width:760px){
  .navmenu{position:fixed;left:12px;right:12px;top:auto;min-width:0}
}

/* ---------- lockup: UNY in metal, KORN in orange ---------- */
.mark{display:flex;align-items:center;gap:9px;text-decoration:none}
.mark svg{flex:none;display:block}
#mark-name{font-weight:800;letter-spacing:.16em;font-size:14px;line-height:1;white-space:nowrap}
#mark-name .uny{color:#6B7072}
#mark-name .korn{color:#F5750D}

.nav-tools{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.btn.sm{font-size:12.5px;padding:8px 13px}
@media (max-width:860px){.getapp{display:none}}