:root{
  --bg:#F2F4F8; --panel:#FFFFFF; --ink:#141A2A; --soft:#5C6478; --rule:#DDE2EC; --tint:#EEF1F7;
  --bar:#161D33; --on-bar:#F3F5FA; --bar-soft:#A7B0C8; --pnp:#FFC928; --on-pnp:#141A2A;
  --c1:#E2553F; --c2:#7B55D9; --c3:#1F7FD1; --c4:#13A06E; --c5:#E39B12; --c6:#D23F86;
  --c1s:#FDEBE7; --c2s:#EFE9FC; --c3s:#E5F0FB; --c4s:#E2F5EC; --c5s:#FCF2DD; --c6s:#FBE6F0;
  --ok:#13804F; --neg:#C03321;
  --shadow:0 1px 2px rgba(20,26,42,.06),0 4px 14px rgba(20,26,42,.06);
  --f-ui:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E121C; --panel:#161B28; --ink:#E8ECF4; --soft:#9AA3B8; --rule:#2A3142; --tint:#1C2232; --bar:#0A0D16; --bar-soft:#8E98B3;
  --c1:#FF7A63; --c2:#A688FF; --c3:#58A9FF; --c4:#3DD39A; --c5:#FFBE45; --c6:#FF6FB0;
  --c1s:#3A211E; --c2s:#2A2342; --c3s:#1A2A40; --c4s:#163327; --c5s:#3A2E15; --c6s:#3A1E2D; --ok:#3DD39A; --neg:#FF7A63; --shadow:none}}
:root[data-theme="dark"]{
  --bg:#0E121C; --panel:#161B28; --ink:#E8ECF4; --soft:#9AA3B8; --rule:#2A3142; --tint:#1C2232; --bar:#0A0D16; --bar-soft:#8E98B3;
  --c1:#FF7A63; --c2:#A688FF; --c3:#58A9FF; --c4:#3DD39A; --c5:#FFBE45; --c6:#FF6FB0;
  --c1s:#3A211E; --c2s:#2A2342; --c3s:#1A2A40; --c4s:#163327; --c5s:#3A2E15; --c6s:#3A1E2D; --ok:#3DD39A; --neg:#FF7A63; --shadow:none}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-ui)}
a{color:var(--c3)}
.appbar{background:var(--bar);color:var(--on-bar);padding-top:env(safe-area-inset-top,0px)}
.appbar .in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;color:var(--on-bar);text-decoration:none;font-weight:800;font-size:17px;margin-right:auto}
.logo i{font:700 12px var(--f-mono);font-style:normal;background:var(--pnp);color:var(--on-pnp);border-radius:6px;padding:3px 6px}
.appbar nav{display:flex;gap:16px;flex-wrap:wrap}
.appbar nav a{color:var(--bar-soft);text-decoration:none;font-weight:600;font-size:14px}
.appbar nav a:hover,.appbar nav a[aria-current]{color:var(--on-bar)}
main{max-width:1100px;margin:0 auto;padding:24px 16px 64px}
h1{font-size:28px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 10px}
.lede{color:var(--soft);margin:0 0 22px;max-width:62ch}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);min-width:0}
.card.accent{border-top:4px solid var(--cc,var(--c3))}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--f-ui);border-radius:8px;padding:9px 14px;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--panel);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.y{background:var(--pnp);border-color:var(--pnp);color:var(--on-pnp)}
.btn:disabled{opacity:.55;cursor:default}
label{display:block;font-weight:600;font-size:13px;margin:10px 0 4px}
input,select,textarea{font:400 15px var(--f-ui);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:8px;padding:9px 10px;width:100%;min-width:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.msg{min-height:1.4em;font-size:14px;margin-top:8px}.msg.ok{color:var(--ok)}.msg.bad{color:var(--neg)}
.pill{display:inline-block;font:700 12px var(--f-ui);border-radius:999px;padding:3px 10px;background:var(--pc,var(--c3s));color:var(--pt,var(--c3))}
.soft{color:var(--soft)} .mono{font-family:var(--f-mono)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:12px;color:var(--soft);font-weight:700}
code,pre{font-family:var(--f-mono);font-size:13px}
pre{background:var(--tint);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;overflow:auto}
.keyout{word-break:break-all;background:var(--c4s);border:1px solid var(--c4);border-radius:8px;padding:10px;font-family:var(--f-mono);font-size:13px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.seg button{font:600 13px var(--f-ui);border:0;background:transparent;color:var(--ink);padding:6px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
[hidden]{display:none!important}