/* Pixel UI docs: one page per component (generated by scripts/ui-docs.mjs). */
.ui-docs{grid-template-columns:220px minmax(0,1fr) 168px}
@media (max-width:1240px){.ui-docs{grid-template-columns:220px minmax(0,1fr)}.ui-toc{display:none}}
@media (max-width:900px){.ui-docs{grid-template-columns:minmax(0,1fr)}}
.ui-docs main{min-width:0}
.ui-docs.no-toc{grid-template-columns:220px minmax(0,1fr)}
@media (max-width:900px){.ui-docs.no-toc{grid-template-columns:minmax(0,1fr)}}
.ui-docs.no-toc .ui-toc{display:none}

/* right-hand "on this page" */
.ui-toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px}
.ui-toc h4{margin:4px 0 8px;font:400 11px/1 var(--f-pix);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ui-toc a{padding:5px 0 5px 12px;border-left:2px solid var(--line);font:550 13.5px/1.3 var(--f-sans);color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.ui-toc a:hover{color:var(--ink)}
.ui-toc a.on{color:var(--ink);border-left-color:var(--ink)}
.ui-side h4{margin:4px 0 6px}
.ui-side .side-start{margin-bottom:10px}

/* page head */
.ui-head h1{font-size:clamp(38px,5vw,60px)}
.ui-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ui-badges code{font:600 13px/1 var(--f-mono);padding:7px 10px;border-radius:8px;background:var(--ink);color:var(--paper)}
.ui-badges .b{font:400 11px/1 var(--f-pix);text-transform:uppercase;padding:8px 10px;border-radius:8px;border:1.5px solid var(--ink)}
.ui-h{margin:56px 0 16px;font:760 28px/1.1 var(--f-sans);letter-spacing:-.03em;scroll-margin-top:90px}
.ui-h3{margin:34px 0 10px;font:720 19px/1.2 var(--f-sans);letter-spacing:-.01em;scroll-margin-top:90px}
.ui-note,.ui-about{margin:0 0 14px;max-width:70ch;color:var(--ink-2);font-size:16.5px;line-height:1.55;text-wrap:pretty}
.ui-about{margin-top:18px}
.ui-list{margin:0;padding-left:20px;display:grid;gap:8px;max-width:70ch;color:var(--ink-2);font-size:16px;line-height:1.5}
.muted{color:var(--muted)}

/* the preview box: Preview / Code tabs over a stage */
.ui-demo{position:relative;margin:0 0 6px}
.ui-tabs .tab-bar{background:transparent;padding:0 0 10px;gap:2px;border-radius:0}
.ui-tabs .tab-bar button{background:transparent;color:var(--muted);border-radius:0;padding:8px 12px;border-bottom:2px solid transparent;font-size:14px}
.ui-tabs .tab-bar button:hover{color:var(--ink)}
.ui-tabs .tab-bar button[aria-selected=true]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
.ui-tabs .tab-pane{border-radius:16px;border-top:0}
.ui-tabs pre.tab-pane{min-height:120px}
.replay{position:absolute;top:0;right:0;font:600 13px/1 var(--f-sans);padding:8px 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.replay:hover{background:var(--ink);color:var(--paper)}
.ui-stage{position:relative;display:grid;place-items:center;padding:32px;border-radius:16px;background:#0b0a10;color:#f2eef8;overflow:hidden;box-shadow:0 0 0 2px var(--ink);
  background-image:radial-gradient(#ffffff10 1px,transparent 1px);background-size:16px 16px}
.ui-stage.light{background-color:#f3eee3;color:#17121f;background-image:radial-gradient(#17121f14 1px,transparent 1px)}
.ui-stage.top{align-items:start}
.ui-stage .stage-in{width:100%;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.ui-stage.narrow .stage-in > *{width:min(100%,460px)}
.ui-stage.narrow .stage-in{justify-content:center}
.ui-stage.top .stage-in{align-self:start}
.ui-stage > .stage-in > piix-shader,.ui-stage > .stage-in > piix-scene,.ui-stage > .stage-in > piix-hero,.ui-stage > .stage-in > piix-pixel-image,.ui-stage > .stage-in > section,.ui-stage > .stage-in > .ex-row{width:100%}
.ui-stage .hint{position:absolute;top:14px;left:0;right:0;margin:0;text-align:center;font:400 12px/1 var(--f-pix);text-transform:uppercase;opacity:.6}
.ui-stage.is-split{padding:0;place-items:stretch}
.ui-stage.is-split .stage-in{display:grid;gap:0;grid-template-rows:1fr auto 1fr;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:stretch}
.ui-stage.is-split .split{min-height:60px}

/* live controls under a preview */
.ui-controls{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;padding:14px 4px 0}
.ctl{display:flex;align-items:center;gap:10px;font:400 11px/1 var(--f-pix);text-transform:uppercase;color:var(--muted)}
.ctl .seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;border:1.5px solid var(--ink);border-radius:10px;background:var(--card)}
.ctl .seg button{font:600 12.5px/1 var(--f-sans);text-transform:none;padding:6px 9px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);cursor:pointer}
.ctl .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ctl .swatches{display:flex;flex-wrap:wrap;gap:5px}
.ctl .swatches button{width:30px;height:20px;padding:0;border:1.5px solid var(--ink);border-radius:5px;background:var(--sw);cursor:pointer;image-rendering:pixelated}
.ctl .swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.ctl input[type=range]{width:110px;accent-color:var(--ink)}
.ctl output{min-width:2.5em;font:600 12.5px/1 var(--f-mono);color:var(--ink);text-transform:none}

/* prev / next */
.ui-pager{display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding-top:24px;border-top:2px solid var(--ink)}
.ui-pager a{display:grid;gap:6px;padding:14px 18px;border:2px solid var(--ink);border-radius:14px;background:var(--card);text-decoration:none;font:700 17px/1.1 var(--f-sans);box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.ui-pager a:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.ui-pager small{font:400 11px/1 var(--f-pix);text-transform:uppercase;color:var(--muted)}
.ui-pager .next{text-align:right;margin-left:auto}

/* overview */
.ui-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:12px}
.ui-why div{padding:18px 20px;border:2px solid var(--ink);border-radius:16px;background:var(--card)}
.ui-why h3{margin:0 0 6px;font:400 13px/1 var(--f-pix);text-transform:uppercase}
.ui-why p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45}
@media (max-width:760px){.ui-why{grid-template-columns:minmax(0,1fr)}}
.ui-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
@media (max-width:1100px){.ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ui-grid{grid-template-columns:minmax(0,1fr)}}
.ui-card{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:16px;background:var(--card);overflow:hidden;text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.ui-card:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.ui-card h3{margin:14px 16px 4px;font:720 18px/1.1 var(--f-sans)}
.ui-card p{margin:0 16px 16px;color:var(--ink-2);font-size:14px;line-height:1.4}
.ui-thumb{position:relative;height:150px;display:flex;gap:14px;align-items:center;justify-content:center;background:#0b0a10;color:#f2eef8;border-bottom:2px solid var(--ink);overflow:hidden;font-family:"Bricolage Grotesque",system-ui,sans-serif;pointer-events:none}
.ui-thumb.light{background:#f3eee3;color:#17121f}
.ui-thumb > piix-shader,.ui-thumb > piix-pixel-image,.ui-thumb > piix-divider{position:absolute;inset:0;width:100%}
.ui-thumb .t-over{position:relative;font:800 20px/1 "Bricolage Grotesque";letter-spacing:-.03em}
.ui-thumb .t-cur{font:400 12px/1 var(--f-pix);text-transform:uppercase;opacity:.7}
.ui-thumb piix-stat{transform:scale(.5)}
.ui-thumb piix-marquee{width:100%}

/* palettes */
.ui-pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.ui-pal{border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--card)}
.ui-pal .sw{display:flex;height:16px;border-block:2px solid var(--ink)}
.ui-pal .sw i{flex:1}
.ui-pal h3{margin:12px 14px 4px;font:400 14px/1 var(--f-pix);text-transform:uppercase}
.ui-pal code{display:block;margin:0 14px 14px;font:500 12.5px/1 var(--f-mono);color:var(--muted)}

/* helpers used inside the demos */
.ui-stage .logo,.ui-thumb .logo{font:800 26px/1 "Bricolage Grotesque",system-ui;opacity:.85;white-space:nowrap}
.ui-thumb .logo.s{font-size:18px}
.ui-stage .shot,.ui-thumb .shot{height:200px;display:grid;place-items:center;border-radius:4px;background:linear-gradient(135deg,#6b4cff,#ff6b4a);font:800 28px/1 "Bricolage Grotesque";color:#fff}
.ui-thumb .shot.s{height:96px;font-size:20px}
.ex-h1{margin:0;font:800 clamp(40px,7vw,84px)/1 "Bricolage Grotesque",system-ui;letter-spacing:-.04em}
.ex-h2{margin:0;font:800 clamp(30px,4.5vw,52px)/1.05 "Bricolage Grotesque",system-ui;letter-spacing:-.04em}
.ex-h3{margin:0;font:800 34px/1 "Bricolage Grotesque",system-ui;letter-spacing:-.04em}
.ex-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;width:100%}
.ex-fill{position:relative;display:grid;place-content:center;gap:8px;min-height:300px;text-align:center;color:#fff}
.ex-fill h2{margin:0;font:800 44px/1 "Bricolage Grotesque";letter-spacing:-.04em;text-shadow:3px 3px 0 #0b0a10}
.ex-fill p{margin:0;font-weight:600;text-shadow:2px 2px 0 #0b0a10}
.ex-form{display:grid;gap:16px;width:min(100%,420px)}
.ex-form output,.ui-stage form output{font:12px/1.4 var(--f-mono);opacity:.75}
.ui-stage form{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ui-stage .eyebrow{margin:0 0 6px;font:400 12px/1 var(--f-pix);text-transform:uppercase;opacity:.7}
.ui-stage .price{margin:6px 0;font:800 44px/1 "Bricolage Grotesque"}
.ui-stage .price small{font-size:16px;opacity:.6}
.ui-stage piix-glow-card h3{margin:0 0 6px;font:800 22px/1.1 "Bricolage Grotesque"}
.ui-stage piix-glow-card p{margin:0 0 6px;opacity:.8}
.ui-stage piix-glow-card{width:min(100%,340px)}
.ui-stage .ex-grid piix-glow-card{width:auto}
.ui-stage piix-tabs p{margin:0;opacity:.85}

/* scenes and layouts */
.ui-stage.block{display:block;padding:0}
.ui-stage.block .stage-in{display:block}
.ui-thumb > piix-scene{position:absolute;inset:0;width:100%}
.ui-thumb .scaled{position:absolute;top:0;left:0;width:250%;transform:scale(.4);transform-origin:top left}
.ctl .swatches .own{width:auto;padding:0 8px;font:600 11.5px/1 var(--f-sans);text-transform:none;background:var(--card);color:var(--ink)}
.ctl .swatches .own[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* showcase */
.ui-show{display:grid;gap:40px}
.ui-show article{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
@media (max-width:980px){.ui-show article{grid-template-columns:minmax(0,1fr)}}
.ui-show .shot{display:block;border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.ui-show .shot:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.ui-show img{display:block;width:100%;height:auto}
.ui-show .k{margin:0 0 8px;font:400 11px/1 var(--f-pix);text-transform:uppercase;color:var(--muted)}
.ui-show h2{margin:0 0 10px;font:780 34px/1 var(--f-sans);letter-spacing:-.04em}
.ui-show h2 a{text-decoration:none}
.ui-show p{margin:0 0 14px;color:var(--ink-2);line-height:1.5}
.ui-show .uses{display:flex;flex-wrap:wrap;gap:6px}
.ui-show .uses a{font:600 12.5px/1 var(--f-sans);padding:6px 9px;border-radius:999px;border:1.5px solid var(--ink);text-decoration:none;background:var(--card)}

/* demos: components over a scene, a stat card */
.ex-scene{position:relative;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;min-height:240px;padding:36px 28px;box-sizing:border-box}
.ex-scene piix-glow-card{width:210px}
.ex-scene piix-input{width:230px}
.ex-stat{display:grid;gap:4px;width:min(100%,320px);padding:18px 18px 12px;background:#17121f;box-shadow:inset 0 0 0 2px #2a2236}
.ex-stat small{font:400 11px/1 var(--f-pix);text-transform:uppercase;opacity:.6}
.ex-stat strong{font:800 34px/1 "Bricolage Grotesque";letter-spacing:-.03em}
.ui-stage p{margin:0}
.ui-thumb .t-toast{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#17121f;box-shadow:inset 0 0 0 2px #2c2438;font:500 13px/1 "Bricolage Grotesque";border-bottom:3px solid #9be15d}
.ui-thumb .t-toast i{width:14px;height:14px;background:#9be15d}
.ui-thumb .t-tip{padding:8px 11px;background:#f2eef8;color:#17121f;font:500 13px/1 "Bricolage Grotesque"}
.ui-thumb > piix-fx,.ui-thumb > piix-image-fx{position:absolute;inset:0;width:100%}