@import url("tokens.css");
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pk-paper);color:var(--pk-ink);font-family:var(--pk-mono);-webkit-font-smoothing:antialiased}
.pk-nav{display:flex;gap:18px;align-items:center;padding:16px 22px;border-bottom:1px dashed var(--pk-hair);font-size:12.5px;flex-wrap:wrap}
.pk-nav a{color:var(--pk-muted);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.pk-nav a:hover{color:var(--pk-ink)}
.pk-nav a.on{color:var(--pk-ink);border-bottom-color:var(--pk-ink)}
.pk-nav .brand{font-weight:700;color:var(--pk-ink);display:flex;align-items:center;gap:8px;border:none}
.pk-nav canvas{width:24px;height:24px;image-rendering:pixelated}
.pk-nav .theme{margin-left:auto;background:none;border:1px solid var(--pk-ink);color:var(--pk-ink);font-family:var(--pk-mono);font-size:12px;padding:5px 10px;cursor:pointer;border-radius:0}
.pk-nav .theme:active{transform:translate(1px,1px)}
.wrap{max-width:900px;margin:0 auto;padding:44px 22px 90px}
h1{font-size:28px;margin:0 0 8px;font-weight:700}
.sub{font-family:var(--pk-sans);font-size:14px;color:var(--pk-muted);max-width:640px;line-height:1.6;margin:0}
h2{font-size:18px;font-weight:700;margin:52px 0 10px;display:flex;align-items:baseline;gap:12px}
h2::after{content:"";flex:1;border-top:1px dashed var(--pk-hair);align-self:center}
h3{font-size:14px;font-weight:700;margin:26px 0 8px}
p{font-family:var(--pk-sans);font-size:15px;line-height:1.7;max-width:640px;margin:8px 0}
.lead{font-family:var(--pk-sans);font-size:13px;color:var(--pk-faint);max-width:640px;line-height:1.6;margin:0 0 16px}
a.more{font-size:12.5px;color:var(--pk-blue);text-decoration:none;border-bottom:1px solid rgba(58,108,191,.35)}
.note{font-family:var(--pk-sans);font-size:12.5px;color:var(--pk-faint);border-left:3px solid var(--pk-hair);padding-left:12px;margin:14px 0;max-width:640px;line-height:1.55}
code{font-family:var(--pk-mono);font-size:12px;background:var(--pk-card);padding:1px 5px}
pre{font-family:var(--pk-mono);font-size:12px;line-height:1.55;background:var(--pk-card);border-left:3px solid var(--pk-blue);padding:10px 14px;overflow-x:auto;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{border-top:1px solid var(--pk-rule);padding:12px 0 8px}
.card .t{font-size:13px;font-weight:700}
.card .d{font-family:var(--pk-sans);font-size:12.5px;color:var(--pk-faint);margin-top:4px;line-height:1.5}
.card a{color:var(--pk-blue);text-decoration:none}
/* swatches */
.sw{display:flex;flex-direction:column;gap:6px}
.sw .chip{height:44px;border:1px solid var(--pk-hair)}
.sw .n{font-size:11.5px}
.sw .v{font-size:11px;color:var(--pk-faint)}
/* buttons */
.btn{font-family:var(--pk-mono);font-size:13px;padding:8px 15px;border:1px solid var(--pk-ink);background:var(--pk-ink);color:var(--pk-paper);cursor:pointer;border-radius:0;text-decoration:none;display:inline-block}
.btn.sec{background:transparent;color:var(--pk-ink)}
.btn.danger{background:var(--pk-coral);border-color:var(--pk-coral);color:#fff}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--pk-blue);outline-offset:1px}
.btn:active{transform:translate(1px,1px)}
.btn[disabled]{opacity:.4;pointer-events:none}
/* inputs */
.field{display:flex;flex-direction:column;gap:4px;max-width:300px}
.field label{font-size:11.5px;color:var(--pk-faint)}
.field input,.field select{font-family:var(--pk-mono);font-size:14px;color:var(--pk-ink);background:transparent;border:none;border-bottom:1px solid var(--pk-ink);padding:7px 0;outline:none;border-radius:0}
.field input:focus{border-bottom:2px solid var(--pk-blue);margin-bottom:-1px}
/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--pk-rule)}
.tab{font-family:var(--pk-mono);font-size:13px;padding:8px 16px;background:transparent;border:none;color:var(--pk-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--pk-ink);border-bottom-color:var(--pk-ink);font-weight:700}
/* toggle */
.tg{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;cursor:pointer}
.tg .k{width:34px;height:18px;border:1px solid var(--pk-ink);position:relative}
.tg .k::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--pk-faint)}
.tg.on .k::after{left:18px;background:var(--pk-ink)}
/* badges */
.badge{font-size:11px;padding:2px 7px;border:1px solid currentColor;display:inline-block;margin-right:6px}
.badge.ok{color:var(--pk-ok)}.badge.warn{color:var(--pk-warn)}.badge.crit{color:var(--pk-crit)}.badge.info{color:var(--pk-info)}
/* table */
table.pk{border-collapse:collapse;width:100%;max-width:720px}
table.pk th{font-size:11.5px;font-weight:400;color:var(--pk-faint);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--pk-rule)}
table.pk td{font-family:var(--pk-sans);font-size:13.5px;padding:9px 14px 9px 0;border-bottom:1px dashed var(--pk-hair);vertical-align:top}
table.pk td.n,table.pk th.n{font-family:var(--pk-mono);text-align:right;font-variant-numeric:tabular-nums}
/* callout */
.co{border-left:3px solid var(--pk-info);padding:8px 14px;font-family:var(--pk-sans);font-size:13.5px;max-width:640px;line-height:1.55;margin:10px 0}
.co.ok{border-color:var(--pk-ok)}.co.warn{border-color:var(--pk-warn)}.co.crit{border-color:var(--pk-crit)}
.co b{font-family:var(--pk-mono);font-size:12px}
/* toast + card */
.toast{display:inline-block;background:var(--pk-ink);color:var(--pk-paper);font-size:12.5px;padding:9px 14px}
.kcard{border:1px solid var(--pk-hair);background:var(--pk-card);padding:12px 14px;max-width:260px}
.kcard .t{font-family:var(--pk-sans);font-size:13.5px}
.kcard .m{font-size:11px;color:var(--pk-faint);margin-top:8px}
/* sprites */
.spr{display:flex;flex-direction:column;align-items:center;gap:6px}
.spr canvas{image-rendering:pixelated;width:48px;height:48px}
.spr span{font-size:10.5px;color:var(--pk-faint)}
canvas.px{image-rendering:pixelated}
.foot{margin-top:60px;font-family:var(--pk-sans);font-size:12px;color:var(--pk-faint)}
@media print{.pk-nav{display:none}body{background:#fff}}