/* Kuartal Web Playbook layer for app shells (founder, 4 Nov 2026).
   Copied from kuartal.id resources/css/redesign.css (main @1541530): sprite strip, pixel stage,
   diorama and decode blocks, with their dark-mode and prefers-reduced-motion lines. The app rules at
   the end enforce section 2 of docs/KUARTAL-WEB-PLAYBOOK.md: monochrome UI, no left accent bars,
   no green borders/outlines/offset shadows on hover, no teal panels, links green without underline. */
:root{--pb-bg:#fff;--pb-text:#171717;--pb-muted:#6b6b6b;--pb-border:#e5e5e5;--pb-soft:#f5f5f5;--pb-ink:#0a0a0a;--pb-ink-fg:#fff;--border:var(--pb-border);--px-green:#1E9E4C}
[data-theme=dark]{--pb-bg:#111;--pb-text:#F5F5F5;--pb-muted:#a3a3a3;--pb-border:#2a2a2a;--pb-soft:#1a1a1a;--pb-ink:#f5f5f5;--pb-ink-fg:#0a0a0a;--px-green:#36CC64}
@keyframes px-bob{50%{transform:translateY(-3%)}}
.px-stage{position:relative;display:block;aspect-ratio:1;width:100%}
.px-stage>*{position:absolute;inset:0;width:100%;height:100%}
.px-stage-canvas{image-rendering:pixelated;opacity:0}
.px-stage.is-live .px-stage-canvas{opacity:1}
.dc-w.is-locked{display:inline-block;white-space:nowrap;vertical-align:baseline}
.pxs img{display:block;width:100%;height:100%;image-rendering:pixelated}
.pxs{--pxs:32px;display:block;width:var(--pxs);height:var(--pxs);overflow:hidden}
.pxs-frames{display:block;width:200%;height:100%;animation:pxs-step var(--step,.5s) steps(2) infinite}
.pxs svg{display:block;width:100%;height:100%;image-rendering:pixelated}
@keyframes pxs-step{to{transform:translateX(-100%)}}
.dio{--st-bg:#fff;--st-line:rgba(0,0,0,.1);--st-ink:#0a0a0a;--st-ink-fg:#fff;position:relative;margin:0;width:100%;aspect-ratio:5/4;display:grid;place-items:center;border:1px solid var(--border);border-radius:16px;overflow:hidden;container-type:inline-size;background-color:var(--st-bg);background-image:linear-gradient(var(--st-line) 1px,transparent 1px),linear-gradient(90deg,var(--st-line) 1px,transparent 1px);background-size:calc(100% / 12) calc(100% / 12);background-position:-1px -1px;isolation:isolate}
[data-theme=dark] .dio{--st-bg:#050505;--st-line:rgba(255,255,255,.13);--st-ink:#fff;--st-ink-fg:#0a0a0a}
.dio-scene{position:relative;z-index:2;width:min(52%,300px);animation:px-bob 3.2s steps(2) infinite}
.dio-tag{position:absolute;z-index:3;top:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;padding:5px 11px;border-radius:7px;background:var(--st-ink);color:var(--st-ink-fg);font:500 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.dio-corners i{position:absolute;z-index:1;width:18px;height:18px;border:0 solid var(--st-ink)}
.dio-corners i:nth-child(1){top:12px;left:12px;border-width:3px 0 0 3px}
.dio-corners i:nth-child(2){top:12px;right:12px;border-width:3px 3px 0 0}
.dio-corners i:nth-child(3){bottom:12px;left:12px;border-width:0 0 3px 3px}
.dio-corners i:nth-child(4){bottom:12px;right:12px;border-width:0 3px 3px 0}
.dio-floor{position:absolute;z-index:3;left:0;right:0;bottom:0;height:18%;border-top:2px dashed var(--st-line);pointer-events:none}
.dio-sky{position:absolute;z-index:3;left:0;right:0;top:14%;height:30%;pointer-events:none}
.dio-walk,.dio-fly{--pxs:40px;position:absolute;left:0;opacity:0;animation:dio-cross var(--dur,16s) linear var(--delay,0s) infinite}
.dio-walk{bottom:calc(100% - 10px)}
.dio-walk.is-n0{--dur:17s;--delay:-3s}
.dio-walk.is-n1{--dur:23s;--delay:-12s;animation-direction:reverse}
.dio-walk.is-n1 svg{transform:scaleX(-1)}
.dio-walk.is-n2{--dur:29s;--delay:-20s}
.dio-walk.is-packet .pxs-frames{--step:.35s}
.dio-fly{--pxs:36px}
.dio-fly.is-n0{top:0;--dur:13s;--delay:-5s}
.dio-fly.is-n1{top:45%;--dur:19s;--delay:-14s;animation-direction:reverse}
.dio-fly.is-n1 svg{transform:scaleX(-1)}
.dio-fly .pxs-frames{animation:pxs-step .2s steps(2) infinite,dio-bob 1.6s ease-in-out infinite}
.dio-fly.is-satellite .pxs-frames{animation:pxs-step .6s steps(2) infinite,dio-bob 3s ease-in-out infinite}
@keyframes dio-cross{0%{transform:translateX(-48px);opacity:0}3%{opacity:1}97%{opacity:1}100%{transform:translateX(calc(100cqw + 8px));opacity:0}}
@keyframes dio-bob{50%{margin-top:-5px}}
.dio-bits i{position:absolute;z-index:1;bottom:18%;width:8px;height:8px;background:var(--px-green);opacity:0;animation:dio-rise 5.4s steps(18) infinite}
.dio-bits i:nth-child(2n){background:var(--st-ink);width:6px;height:6px}
.dio-bits i:nth-child(1){left:12%;animation-delay:.2s}.dio-bits i:nth-child(2){left:24%;animation-delay:2.1s}.dio-bits i:nth-child(3){left:37%;animation-delay:3.6s}
.dio-bits i:nth-child(4){left:61%;animation-delay:1.2s}.dio-bits i:nth-child(5){left:73%;animation-delay:4.4s}.dio-bits i:nth-child(6){left:86%;animation-delay:2.8s}.dio-bits i:nth-child(7){left:50%;animation-delay:.9s}
@keyframes dio-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-240px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .dio-scene,.pxs-frames,.dio-bits i,.dio-fly .pxs-frames{animation:none}
  .dio-walk,.dio-fly{animation:none;opacity:1}
  .dio-walk.is-n0{left:14%}.dio-walk.is-n1{left:auto;right:14%}.dio-walk.is-n2{left:44%}
  .dio-fly.is-n0{left:10%}.dio-fly.is-n1{left:auto;right:10%}
}


/* App shell patterns (Kuartal AI / Kuartal Satellite), 4 Nov 2026. Prefix pb-. */
.pb-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:center;margin:0 0 40px}
.pb-hero h1{font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.04em;font-weight:500;margin:10px 0 14px;color:var(--pb-text)}
.pb-hero p{font-size:15px;line-height:1.6;color:var(--pb-muted);max-width:56ch;margin:0 0 20px}
.pb-hero .dio{max-width:520px;justify-self:end}
.pb-eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--pb-muted)}
.pb-actions{display:flex;flex-wrap:wrap;gap:10px}
.pb-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--pb-text);background:var(--pb-text);color:var(--pb-bg);font:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:transform .15s}
.pb-btn.is-ghost{background:transparent;color:var(--pb-text);border-color:var(--pb-border)}
.pb-btn:hover:not(:disabled){transform:translateY(-2px)}
.pb-btn:disabled{opacity:.45;cursor:not-allowed}
.pb-btn svg{width:16px;height:16px;flex:none}
.pb-section{margin:0 0 44px}
.pb-section>h2,.pb-section-head h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;font-weight:500;margin:0 0 6px;color:var(--pb-text)}
.pb-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 18px}
.pb-section-head p,.pb-section>p{margin:0;color:var(--pb-muted);font-size:14px;line-height:1.55}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pb-chips button{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text);font:inherit;font-size:13px;cursor:pointer}
.pb-chips button[aria-pressed=true]{background:var(--pb-text);color:var(--pb-bg);border-color:var(--pb-text)}
.pb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pb-tile{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px;border:1px solid var(--pb-border);border-radius:14px;background:var(--pb-bg);color:var(--pb-text);font:inherit;transition:transform .18s,border-color .18s;min-width:0}
.pb-tile:is(button,a):not(:disabled){cursor:pointer;text-decoration:none}
.pb-tile:is(button,a):hover:not(:disabled),.pb-tile.is-link:hover{transform:translate(-3px,-3px);border-color:var(--pb-text)}
.pb-tile:disabled,.pb-tile[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.pb-tile .pb-art{width:64px;height:64px;image-rendering:pixelated;display:block}
.pb-tile .pb-art.is-big{width:96px;height:96px}
.pb-tile strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pb-tile small{font:500 .7rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--pb-muted)}
.pb-tile p{margin:0;color:var(--pb-muted);font-size:13px;line-height:1.5}
.pb-tile .pb-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.pb-tile .pb-go svg{width:15px;height:15px}
.pb-tile:hover .pb-go{color:var(--link,#15803d)}
.pb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 44px;padding:0}
.pb-stat{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:#0a0a0a;color:#fff;margin:0;min-width:0}
[data-theme=dark] .pb-stat{background:#000;border:1px solid var(--pb-border)}
.pb-stat .pb-art{width:56px;height:56px;flex:none;image-rendering:pixelated}
.pb-stat dt{font-size:12px;color:#bdbdbd;margin:0}
.pb-stat dd{margin:2px 0 0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.pb-stat dd small{display:block;font-size:11px;font-weight:400;color:#9a9a9a;letter-spacing:0}
.pb-empty{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid var(--pb-border);border-radius:14px;background:var(--pb-bg);background-image:linear-gradient(var(--pb-soft) 1px,transparent 1px),linear-gradient(90deg,var(--pb-soft) 1px,transparent 1px);background-size:24px 24px}
.pb-empty .pxs{--pxs:56px;flex:none}
.pb-empty p{margin:0 0 10px;color:var(--pb-text);font-size:14px}
.pb-rail{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;position:relative;padding-top:56px;counter-reset:pbstep;margin:0 0 44px}
.pb-rail::before{content:"";position:absolute;left:0;right:0;top:40px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--pb-border),var(--pb-text))}
.pb-rail .pxs{--pxs:40px;position:absolute;top:2px;left:0;animation:pb-drive 14s linear infinite}
@keyframes pb-drive{to{left:calc(100% - 40px)}}
.pb-rail li{list-style:none;padding:16px;border:1px solid var(--pb-border);border-radius:14px;counter-increment:pbstep}
.pb-rail li::before{content:counter(pbstep,decimal-leading-zero);display:block;font:500 .72rem ui-monospace,monospace;color:var(--pb-muted);margin-bottom:6px}
.pb-rail li strong{display:block;font-size:15px;margin-bottom:4px}
.pb-rail li p{margin:0;font-size:13px;color:var(--pb-muted);line-height:1.5}
.pb-soon{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;border:1px dashed var(--pb-border);font-size:10px;color:var(--pb-muted);letter-spacing:.04em;text-transform:uppercase}
.pb-ico{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
@media (max-width:900px){.pb-hero{grid-template-columns:1fr}.pb-hero .dio{justify-self:stretch;max-width:none}.pb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-rail{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pb-stats{grid-template-columns:1fr 1fr;gap:8px}.pb-stat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.pb-stat .pb-art{width:40px;height:40px}.pb-stat dd{font-size:22px}.pb-rail{grid-template-columns:1fr}.pb-tiles{grid-template-columns:1fr}.pb-section-head{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.pb-tile,.pb-btn{transition:none}.pb-tile:hover,.pb-btn:hover{transform:none!important}.pb-rail .pxs{animation:none}.pb-rail .pxs .pxs-frames{animation:none}}

/* Founder "never" rules, enforced last. */
:where(button,a,input,select,textarea,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--pb-text)!important;outline-offset:3px}
blockquote,.md blockquote{border-left:0!important;border:1px solid var(--pb-border)!important;border-radius:12px;padding:12px 14px!important;margin:12px 0}
a{text-decoration:none}