@font-face{font-family:"Pet Me 64";src:url(/fonts/PetMe64.ttf) format("truetype");font-display:swap}
:root{
  --frame:#6C5EB5;--screen:#70A4B2;--ink:#352879;--line:#000;--patch:#B8C76F;--paper:#FFF;
  --safe:#588D43;--safe2:#9AD284;--stop:#68372B;--mute:#6C6C6C;--mute2:#959595;
  --b:40px;--u:24px;--col:1008px;
  --cmd:32px;--key:16px;--name:96px;--pr:24px;--data:16px;
  --cur:url(/art/cursor.png) 2 2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--frame);scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--frame);color:var(--ink);font:400 15px/1.55 "Martian Mono",ui-monospace,monospace;font-variation-settings:"wdth" 87;font-variant-numeric:tabular-nums;cursor:var(--cur),auto;min-height:100vh}
img{image-rendering:pixelated;display:block}
::selection{background:var(--patch);color:var(--ink)}
a,button,[role=button],label[for],summary,.ca{cursor:var(--cur),pointer}
a:active,button:active{cursor:url(/art/cursor-press.png) 2 2,pointer}
.p{font-family:"Pet Me 64",monospace;text-transform:uppercase;font-weight:400;letter-spacing:0;font-variant-ligatures:none}
.m{font-family:"Martian Mono",ui-monospace,monospace;font-variation-settings:"wdth" 87;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* the machine: fixed lavender border with a hole; raster stripes live in it */
.frame{position:fixed;inset:0;z-index:20;pointer-events:none;background:var(--frame);
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
    max(var(--b),calc(50% - var(--col)/2)) var(--b),min(calc(100% - var(--b)),calc(50% + var(--col)/2)) var(--b),
    min(calc(100% - var(--b)),calc(50% + var(--col)/2)) calc(100% - var(--b)),max(var(--b),calc(50% - var(--col)/2)) calc(100% - var(--b)),
    max(var(--b),calc(50% - var(--col)/2)) var(--b))}
.frame canvas{width:100%;height:100%;display:block;image-rendering:pixelated;opacity:0}
.frame.on canvas{opacity:1}
.screen{position:relative;width:min(var(--col),calc(100% - 2*var(--b)));margin:0 auto;min-height:100vh;
  background:var(--screen) url(/art/tile-screen.png) 0 0/64px 128px repeat;image-rendering:pixelated;
  padding:calc(var(--b) + var(--u)) var(--u) calc(var(--b) + var(--u))}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--u);height:48px}
.brand{display:flex;align-items:center;gap:16px;color:var(--ink);text-decoration:none;font-size:var(--key);line-height:var(--key)}
.bar-keys{display:flex;gap:16px}

/* keys: RVS ON fields on the grid */
.key{font-family:"Pet Me 64",monospace;text-transform:uppercase;font-size:var(--key);line-height:var(--key);display:inline-flex;align-items:center;gap:0;
  min-height:40px;padding:12px 16px;border:0;border-radius:0;background:var(--ink);color:var(--screen);text-decoration:none;white-space:nowrap;
  transition:none;position:relative}
.key:hover{background:var(--patch);color:var(--ink)}
.key:active{background:var(--line);color:var(--screen);transform:translateY(2px)}
.key:focus-visible{outline:0;background:var(--patch);color:var(--ink)}
.key:focus-visible::before{content:"";position:absolute;left:-16px;top:12px;width:16px;height:16px;background:var(--ink);animation:blink 1.6s steps(1) infinite}
.key[disabled],.key[aria-disabled=true]{background:var(--mute);color:var(--mute2);transform:none;cursor:var(--cur),not-allowed}
.key.run{background:var(--patch);color:var(--ink)}
.key.run:hover{background:var(--ink);color:var(--patch)}
.key.run:active{background:var(--line);color:var(--patch)}
.key.big{font-size:24px;line-height:24px;padding:16px 32px;min-height:56px}
.keys{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ticker{font-size:var(--key);line-height:var(--key);padding:12px 0}

/* boot */
.boot{display:flex;flex-direction:column;align-items:center;padding-top:var(--u)}
.name{font-size:var(--name);line-height:var(--name);text-align:center;white-space:nowrap}
.tag{margin-top:16px;text-align:center;font-size:15px}
.stage{position:relative;width:312px;height:312px;margin-top:var(--u)}
.shield{position:absolute;inset:0;width:100%;height:100%}
.sh-patched{visibility:hidden}
.stage.patched .sh-cracked{visibility:hidden}
.stage.patched .sh-patched{visibility:visible;animation:slap .24s steps(3) 1}
@keyframes slap{0%{transform:translate(24px,-24px)}100%{transform:translate(0,0)}}
.demo-tag{position:absolute;right:0;top:0;font-size:16px;line-height:16px;padding:4px 8px;background:var(--ink);color:var(--screen)}
.boot .prompt{align-self:stretch;margin-top:var(--u)}
.ready{font-size:var(--pr);line-height:var(--pr)}
.cmd{display:flex;align-items:center;flex-wrap:nowrap;min-height:40px;margin-top:8px;cursor:var(--cur),text}
.kw{font-size:var(--pr);line-height:var(--pr);white-space:nowrap;flex:none}
.line-in{flex:1 1 auto;min-width:0;background:transparent;border:0;border-radius:0;outline:0;color:var(--ink);font-size:17px;line-height:24px;height:40px;padding:0 4px;
  caret-color:var(--ink);font-variation-settings:"wdth" 87;cursor:var(--cur),text}
.line-in::placeholder{color:var(--frame);opacity:1}
.cmd:focus-within{background:var(--patch)}
.line-in:focus{caret-shape:block}
.err{margin-top:8px;font-size:16px;line-height:16px;color:var(--paper);background:var(--ink);display:inline-block;padding:4px 8px}
.err.bad{color:var(--paper);background:var(--stop)}
.prompt .keys{margin-top:var(--u)}
.ca-line{display:flex;align-items:baseline;gap:16px;margin-top:16px;min-width:0}
.ca-k{font-size:16px;line-height:16px;flex:none}
.ca{background:none;border:0;color:var(--ink);font-size:15px;line-height:1.5;text-align:left;overflow-wrap:anywhere;word-break:break-all;padding:2px 0;min-height:32px}
.ca:hover{background:var(--patch)}
.ca-none{font-size:15px}

/* scenes */
.scene{margin-top:calc(var(--u)*4)}
.cmdline{font-size:var(--cmd);line-height:var(--cmd);min-height:var(--cmd);white-space:nowrap}
.cmdline .c{display:inline-block;width:.75em;height:1em;background:var(--ink);vertical-align:top;animation:blink 1.6s steps(1) infinite}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
.aside{margin-top:var(--u);max-width:62ch;font-size:15px;color:var(--ink)}
.hint{font-size:var(--pr);line-height:calc(var(--pr) + 8px);margin-top:16px}
.inv{background:var(--ink);color:var(--screen);padding:0 0;white-space:pre}

/* directory */
.dir{margin-top:var(--u)}
.dir-head{font-size:var(--pr);line-height:var(--pr)}
.dir-addr{margin-top:8px;overflow-wrap:anywhere;font-size:15px}
.rows{list-style:none;margin-top:16px}
.row{display:grid;grid-template-columns:12ch 9.5em 1fr 7.5em;gap:0 16px;align-items:baseline;padding:4px 0}
.row:hover{background:var(--patch)}
.row .amt{text-align:right;font-size:var(--data)}
.row .nm{font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden}
.row .who{font-size:14px;overflow-wrap:anywhere;min-width:0}
.row .who a{color:inherit}
.row .tg{font-size:16px;line-height:24px;text-align:right;white-space:nowrap}
.row .note{grid-column:2/5;font-size:13px;line-height:1.5;padding-left:0}
.row.fz .tg{color:var(--mute)}
.dir-foot{margin-top:16px;font-size:var(--pr);line-height:var(--pr)}
.dir-foot .m{font-size:15px;display:block;margin-top:8px;line-height:1.5}
.clean{display:flex;align-items:center;gap:var(--u);margin-top:16px}
.notcov{margin-top:var(--u);font-size:13px;line-height:1.6}
.notcov b{font-weight:600}
.partial{margin-top:16px}

/* listing */
.listing{margin-top:var(--u)}
.ln{display:grid;grid-template-columns:3.5em 1fr;gap:0 16px;align-items:baseline;padding:2px 0;position:relative}
.ln .no{font-family:"Pet Me 64",monospace;font-size:16px;line-height:24px;text-align:right;position:relative}
.ln .tx{font-size:14px;overflow-wrap:anywhere;min-width:0}
.ln .tx .p{font-size:16px;line-height:24px}
.ln.rem .tx{color:var(--ink)}
.ln.fee .tx{font-weight:600}
.ln .slap{position:absolute;right:-6px;top:-12px;width:48px;height:48px;background:url(/art/sprite-patch-slap.png) 0 0/288px 48px no-repeat;image-rendering:pixelated;animation:slap6 .48s steps(5) forwards;pointer-events:none}
@keyframes slap6{from{background-position:0 0}to{background-position:-240px 0}}
.ln.done .tx{text-decoration:line-through;text-decoration-thickness:2px}
.run-keys{margin-top:var(--u)}
.status{margin-top:16px;min-height:24px;font-size:15px}
.status .p{font-size:16px}

/* verdict */
.verdict-out{margin-top:var(--u);position:relative}
.vbar{display:flex;align-items:center;gap:16px;padding:12px 16px;font-size:var(--pr);line-height:var(--pr);flex-wrap:wrap}
.vbar.safe{background:var(--safe);color:var(--safe2)}
.vbar.stop{background:var(--paper);color:var(--stop)}
.vbar .vhost{margin-left:auto;font-size:15px;line-height:1.4;color:inherit;overflow-wrap:anywhere}
.vline{margin-top:16px;font-size:15px}
.checks{list-style:none;margin-top:16px}
.checks li{display:grid;grid-template-columns:4.5em 1fr;gap:0 16px;align-items:baseline;padding:3px 0}
.checks .st{font-size:16px;line-height:24px}
.checks .st.hit{background:var(--stop);color:var(--paper);padding:0 4px;justify-self:start}
.checks .d{display:block;font-size:13px;overflow-wrap:anywhere}
.checks li>span:last-child{min-width:0;overflow-wrap:anywhere}
.vstats{margin-top:16px;font-size:13px}
.demo{position:relative}
.demo .vbar{display:none}
.demo[data-i="0"] .vbar.safe,.demo[data-i="1"] .vbar.stop{display:flex}
.demo .demo-tag{top:auto;bottom:0}

/* price */
.price{display:grid;grid-template-columns:240px 1fr;gap:16px var(--u);margin-top:var(--u);align-items:baseline}
.price dt{font-size:var(--pr);line-height:var(--pr)}
.price dd{font-size:15px}
.wrap{overflow-wrap:anywhere;word-break:break-all}
.howto{margin-top:calc(var(--u)*2)}
.howto .p{font-size:var(--pr);line-height:var(--pr);margin-bottom:16px}
.howto video{width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);display:block}

/* end */
.end{margin-top:calc(var(--u)*4);padding-top:var(--u);border-top:3px solid var(--ink)}
.credit{margin-top:var(--u);font-size:12px}

/* toast + modal (PETSCII boxes) */
.toast{position:fixed;left:50%;bottom:calc(var(--b) + 16px);transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--paper);padding:12px 16px;
  border:3px solid var(--paper);outline:3px solid var(--ink);font-size:14px;max-width:min(560px,calc(100vw - 2*var(--b) - 16px))}
.toast .p{font-size:16px;line-height:16px;margin-right:12px;color:var(--patch)}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:transparent}
.modal .box{background:var(--screen);border:3px solid var(--ink);outline:6px solid var(--screen);padding:var(--u);width:min(420px,calc(100vw - 48px));display:flex;flex-direction:column;gap:16px}
.modal .box>.p{font-size:24px;line-height:24px}
#w-list{display:flex;flex-direction:column;gap:8px}
#w-list .key{justify-content:flex-start;gap:12px}
#w-list img{width:24px;height:24px;image-rendering:auto}
.blank .screen>*{visibility:hidden}

/* docs */
.doc h1{font-size:48px;line-height:48px;margin-top:var(--u)}
.doc h2{font-size:24px;line-height:24px;margin-top:calc(var(--u)*2)}
.doc p,.doc li{font-size:15px;max-width:70ch;margin-top:12px}
.doc ul{margin-top:8px;padding-left:2ch}
.doc table{border-collapse:collapse;margin-top:16px;font-size:14px;width:100%}
.doc td,.doc th{text-align:left;padding:6px 16px 6px 0;border-bottom:2px solid var(--ink);vertical-align:top}
.doc th{font-family:"Pet Me 64",monospace;font-weight:400;font-size:16px;text-transform:uppercase}
.doc .lead{font-size:16px;margin-top:16px}
.doc a:not(.key){color:var(--ink)}

/* 404 */
.nf{display:flex;flex-direction:column;align-items:center;gap:var(--u);padding-top:calc(var(--u)*2);text-align:center}
.nf .p.big{font-size:32px;line-height:40px}

@media (max-width:1100px){:root{--name:80px}}
@media (max-width:900px){:root{--b:24px;--u:16px;--cmd:24px;--name:64px;--pr:16px}
  .row{grid-template-columns:auto 1fr auto;gap:0 12px}
  .row .amt{order:2;text-align:left;grid-column:2}.row .nm{order:1;grid-column:1}.row .tg{order:3}
  .row .who{order:4;grid-column:1/4;font-size:13px}.row .note{grid-column:1/4}
  .price{grid-template-columns:1fr;gap:8px}
  .price dd{margin-bottom:12px}}
@media (max-width:560px){:root{--b:10px;--u:16px;--name:32px;--cmd:24px}
  .stage{width:208px;height:208px}
  .boot .prompt .keys .key{flex:1 1 auto;justify-content:center}
  .kw{font-size:16px;line-height:16px}
  .line-in{font-size:15px;padding:0 2px}
  .bar .brand span{display:none}
  .ln{grid-template-columns:2.5em 1fr;gap:0 10px}
  .ln .no{font-size:16px}
  .checks li{grid-template-columns:3.5em 1fr;gap:0 10px}
  .doc h1{font-size:32px;line-height:32px}}
@media (max-width:340px){:root{--name:24px}}
@media (prefers-reduced-motion:reduce){.stage.patched .sh-patched,.ln .slap,.key:focus-visible::before,.cmdline .c{animation:none}}
.row.more,.ln.more{display:none}
.more-keys{margin-top:16px}
.nm.mint,.sym.mint{font-size:14px}
.key.mini{font-size:16px;min-height:32px;padding:8px 12px}
.line-in{flex:0 1 auto;width:24ch;min-width:8ch;max-width:100%}
.stage{width:416px;height:416px;margin:-24px 0 -40px}
.stage .demo-tag{right:72px;top:auto;bottom:72px}
@media (max-width:560px){.stage{width:208px;height:208px;margin:0 0 -16px}.stage .demo-tag{right:0;bottom:24px}.line-in{flex:1 1 auto}}
.who .sh{display:none}
@media (max-width:560px){.who .full{display:none}.who .sh{display:inline}.ln{grid-template-columns:52px 1fr}}

/* ================= v2: hero name, loop, scene panels ================= */
.boot{container-type:inline-size}
.name{position:relative;font-size:min(calc(100cqw / 9.2),128px);line-height:1;padding:.06em 0 .1em;z-index:0;color:var(--ink)}
.name::before{content:attr(data-t);position:absolute;left:.125em;top:calc(.06em + .125em);right:-.125em;color:var(--line);z-index:-1;pointer-events:none}
.tag{font-size:16px;margin-top:8px}
.stage{width:448px;height:448px;margin:-56px 0 -64px}
.hero-sp{position:absolute;inset:0;background:url(/art/hero-loop.png) 0 0/3584px 448px no-repeat;image-rendering:pixelated;animation:hero 4.4s steps(1,end) infinite}
.stage.patched .hero-sp,.hold .hero-sp{animation:none;background-position:-3136px 0}
.loading .stage{visibility:hidden}
@keyframes hero{0%{background-position:0 0}24%{background-position:-448px 0}26%{background-position:-896px 0}28%{background-position:-448px 0}30%{background-position:-896px 0}32%{background-position:0 0}
  40%{background-position:-1344px 0}42%{background-position:-1792px 0}44%{background-position:-2240px 0}46.5%{background-position:-2688px 0}49%{background-position:-3136px 0}100%{background-position:-3136px 0}}
.stage .demo-tag{right:88px;bottom:96px}
.ready{white-space:pre-line}

/* panels: each scene is its own C64 screen inside the machine, framed PETSCII-style (no full-bleed bands) */
.scene{margin-top:calc(var(--u)*3)}
.panel{position:relative;padding:var(--u);border:4px solid var(--line);outline:4px solid var(--ink);outline-offset:4px;margin:8px}
.pn-k{font-size:16px;line-height:20px;margin-bottom:12px}
.inv{display:inline-block;background:var(--ink);color:var(--screen);line-height:1.25;padding:2px 4px 0;white-space:pre}
.pn-blue{background:var(--ink) url(/art/tile-blue.png) 0 0/64px 128px;color:var(--screen)}
.pn-blue .inv,.pn-blue .dir-head .inv{background:var(--screen);color:var(--ink)}
.pn-blue .aside,.pn-blue .m,.pn-blue .hint{color:var(--paper)}
.pn-blue .cmdline .c{background:var(--screen)}
.pn-paper{background:var(--paper) url(/art/feed.png) 0 0/24px 16px repeat-y;color:var(--ink);padding-left:calc(var(--u) + 32px);padding-right:calc(var(--u) + 32px)}
.pn-paper::after{content:"";position:absolute;right:0;top:0;bottom:0;width:24px;background:url(/art/feed.png) 0 0/24px 16px repeat-y;transform:scaleX(-1)}
.pn-paper .inv{background:var(--ink);color:var(--paper)}
.pn-black{background:var(--line) url(/art/tile-black.png) 0 0/64px 128px;color:var(--mute2)}
.pn-black .cmdline,.pn-black .kw,.pn-black .pn-k{color:var(--paper)}
.pn-black .inv{background:var(--mute2);color:var(--line)}
.pn-black .aside{color:var(--mute2)}
.pn-black .line-in{color:var(--paper);caret-color:var(--paper)}
.pn-black .line-in::placeholder{color:var(--mute)}
.pn-black .cmd:focus-within{background:var(--ink)}
.pn-black .cmdline .c{background:var(--paper)}
.pn-black .key{background:var(--mute2);color:var(--line)}
.pn-black .key:hover{background:var(--patch);color:var(--ink)}
.pn-black .key.run{background:var(--patch);color:var(--ink)}
.pn-black .key.run:hover{background:var(--paper);color:var(--line)}
.pn-black .hint{color:var(--paper)}
.pn-black .vline,.pn-black .vstats{color:var(--mute2)}

/* 2 directory */
.pn-top{display:grid;grid-template-columns:1fr 384px;gap:var(--u);align-items:end}
.pn-top .aside{margin-top:16px}
.drive{width:384px;height:240px;background:url(/art/drive.png) 0 0/1152px 240px no-repeat;image-rendering:pixelated}
.drive.busy{background-position:-384px 0;animation:led .32s steps(1,end) infinite}
.drive.in{background-position:-768px 0}
@keyframes led{0%{background-position:-384px 0}50%{background-position:-768px 0}}
.dir{margin-top:var(--u);border-top:4px solid var(--screen);padding-top:var(--u)}
.dir-head{font-size:var(--pr);line-height:var(--pr)}
.dir-demo{position:relative;margin-top:8px}
.dir-demo .demo-tag{right:0;top:auto;bottom:0;background:var(--screen);color:var(--ink)}
.pn-blue .row:hover{background:var(--patch);color:var(--ink)}
.pn-blue .row:hover .m{color:var(--ink)}
.dir-demo .row .who{font-size:14px}
.dir-demo + .hint{margin-top:16px}
.pn-blue .dir-foot .m{color:var(--paper)}

/* 3 listing on printer paper */
.dlist{position:relative;margin-top:var(--u)}
.dl{display:grid;grid-template-columns:72px 1fr;gap:0 16px;align-items:center;min-height:48px;position:relative}
.dl .no{font-family:"Pet Me 64",monospace;font-size:24px;line-height:24px;text-align:right;position:relative;z-index:0}
.dl .tx{font-size:24px;line-height:32px}
.dl .tx .m{font-size:15px;line-height:24px}
.dl .tx .p{font-size:24px}
.dl.rv.done .tx{text-decoration:line-through;text-decoration-thickness:3px}
.dl .slap,.ln .slap{position:absolute;left:50%;top:50%;width:128px;height:48px;margin:-24px 0 0 -72px;background:url(/art/plaster-slap.png) 0 0/768px 48px no-repeat;image-rendering:pixelated;animation:pslap .42s steps(5,end) forwards;pointer-events:none;z-index:1}
.ln .slap{width:96px;height:36px;margin:-18px 0 0 -56px;background-size:576px 36px;animation-name:pslap2}
@keyframes pslap{from{background-position:0 0}to{background-position:-640px 0}}
@keyframes pslap2{from{background-position:0 0}to{background-position:-480px 0}}
.dl-run{font-size:24px;line-height:32px;margin-top:16px;min-height:32px}
.dl-run .dl-ok{visibility:hidden}
.dlist.ran .dl-run .dl-ok{visibility:visible}
.dlist .demo-tag{right:0;top:0}
.pn-paper .ln .tx{font-size:15px}
.pn-paper .ln .no{font-size:20px}
.pn-paper .listing{margin-top:var(--u)}
.pn-paper .aside{margin-top:var(--u)}

/* 4 verdict cards */
.vpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--u);position:relative;padding-bottom:40px}
.vpair .demo-tag{right:0;bottom:0;top:auto;background:var(--mute2);color:var(--line)}
.vcard{border:4px solid var(--mute2);background:var(--line);display:flex;flex-direction:column}
.vcard.stop{border-color:var(--stop)}
.vcard.safe{border-color:var(--safe)}
.vbar{display:flex;align-items:center;gap:16px;padding:14px 16px 10px;font-size:var(--pr);line-height:1.25;flex-wrap:wrap}
.vbar.safe{background:var(--safe2);color:var(--line)}
.vbar.stop{background:var(--stop);color:var(--paper)}
.vbar .vhost{margin-left:auto;font-size:15px;line-height:1.4;color:inherit;overflow-wrap:anywhere}
.vbody{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px}
.vicon{width:104px;height:104px}
.vcard .checks{margin-top:0}
.vcard .checks li{grid-template-columns:4em 1fr;color:var(--paper)}
.vcard .checks .st{color:var(--safe2)}
.vcard.stop .checks .st{color:var(--lred,#9A6759)}
.checks .st.hit{background:var(--stop);color:var(--paper)!important;padding:0 4px;justify-self:start}
.vone .vbody{grid-template-columns:auto 1fr}
.vone .vicon{width:208px;height:208px}
.vone .vline{margin:0 16px 16px;color:var(--paper)}
.vone .vstats{margin:0 16px 16px}

/* 5 price cards */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) + 8px);margin-top:var(--u)}
.pcard{position:relative;padding:var(--u);border:4px solid var(--line);outline:4px solid var(--ink);outline-offset:4px;margin:8px}
.pc-yellow{background:var(--patch) url(/art/tile-yellow.png) 0 0/64px 128px;color:var(--ink)}
.pc-blue{background:var(--ink) url(/art/tile-blue.png) 0 0/64px 128px;color:var(--screen)}
.pc-blue .inv{background:var(--screen);color:var(--ink)}
.pc-big{font-size:48px;line-height:56px;margin-top:16px}
.pc-list{list-style:none;margin-top:16px;font-size:15px}
.pc-list li{padding:6px 0 6px 24px;position:relative}
.pc-list li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:10px;background:currentColor}
.pc-blue .pc-list{color:var(--paper)}
.treasury{margin-top:var(--u);display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.treasury .p{font-size:16px}

@media (max-width:900px){.pn-top{grid-template-columns:1fr}.drive{justify-self:center}.vpair,.pcards{grid-template-columns:1fr}.pc-big{font-size:32px;line-height:40px}}
@media (max-width:560px){
  .stage{width:224px;height:224px;margin:-24px 0 -32px}
  .hero-sp{background-size:1792px 224px}
  @keyframes hero{0%{background-position:0 0}24%{background-position:-224px 0}26%{background-position:-448px 0}28%{background-position:-224px 0}30%{background-position:-448px 0}32%{background-position:0 0}
    40%{background-position:-672px 0}42%{background-position:-896px 0}44%{background-position:-1120px 0}46.5%{background-position:-1344px 0}49%{background-position:-1568px 0}100%{background-position:-1568px 0}}
  .stage.patched .hero-sp,.hold .hero-sp{background-position:-1568px 0}
  .stage .demo-tag{right:0;bottom:40px}
  .panel{padding:12px;margin:8px 8px}
  .pn-paper{padding-left:28px;padding-right:28px}
  .pn-paper{background-size:12px 8px}.pn-paper::after{width:12px;background-size:12px 8px}
  .drive{width:256px;height:160px;background-size:768px 160px}
  .drive.busy{background-position:-256px 0}.drive.in{background-position:-512px 0}
  @keyframes led{0%{background-position:-256px 0}50%{background-position:-512px 0}}
  .dl{grid-template-columns:40px 1fr;gap:0 10px;min-height:40px}
  .dl .no,.dl .tx,.dl .tx .p,.dl-run{font-size:16px;line-height:24px}
  .dl .slap{width:96px;height:36px;margin:-18px 0 0 -44px;background-size:576px 36px;animation-name:pslap2}
  .vbody{grid-template-columns:1fr}.vicon{width:104px;height:104px}.vone .vicon{width:104px;height:104px}
  .vbar{font-size:16px}
  .pcard{padding:16px}
}
.dl .slap{margin-left:-52px}
.vpair .vbody{grid-template-columns:1fr;justify-items:start}
.vpair .vicon{width:208px;height:208px;justify-self:center;margin:-24px 0 -16px}
.vpair .vcard .checks li{grid-template-columns:4em 1fr}
@media (max-width:560px){.vpair .vicon{width:104px;height:104px;margin:0}.dl .slap{margin-left:-40px}}
.dlist{padding-bottom:8px}
.dlist .demo-tag{top:auto;bottom:8px}
.dir-demo{padding-bottom:32px}
@media (max-width:560px){
  .panel .cmdline{font-size:20px;line-height:24px;min-height:24px}
  .pn-paper{padding-left:22px;padding-right:22px}
  .dl .opt{display:none}
  .dl{grid-template-columns:32px 1fr}
  .dl .no,.dl .tx,.dl .tx .p,.dl-run{font-size:16px;line-height:24px}
}
@media (max-width:560px){.dl .slap{width:64px;height:24px;margin:-12px 0 0 -46px;background-size:384px 24px;animation-name:pslap3}}
@keyframes pslap3{from{background-position:0 0}to{background-position:-320px 0}}
.dlist.ran .slap{animation:none;background-position:-640px 0}
.vpair .vbar{font-size:20px;min-height:64px}
@media (max-width:560px){.dlist.ran .slap{background-position:-320px 0}.vpair .vbar{font-size:16px;min-height:0}}
.stage-load{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:pre;text-align:left;font-size:24px;line-height:32px;visibility:visible}
.loading .stage-load{display:block}
.loading .hero-sp,.loading .stage .demo-tag,.loading .ready{visibility:hidden}
.loading .stage{visibility:visible}
@media (max-width:560px){.stage-load{font-size:16px;line-height:24px}}
@media (max-width:560px){.stage-load{left:0;right:0;transform:translateY(-50%);text-align:center;font-size:14px;line-height:24px;white-space:pre-line}}
@media (max-width:560px){.dir-head{font-size:14px;line-height:20px}.dir-head .inv{white-space:pre-wrap}}
@media (max-width:360px){.panel .kw{font-size:12px;line-height:16px}.panel .cmdline{font-size:16px}}

/* ================= v3: design bar pass (own cursor, icons, keycaps, PETSCII frames, raster border, scene tiles, player, modal) ================= */
:root{--cur:url(/art/v3/cur-arrow.png) 1 1;--cur-p:url(/art/v3/cur-hand.png) 9 1;--cur-t:url(/art/v3/cur-text.png) 7 14}
body{cursor:var(--cur),auto}
a,button,[role=button],[role=slider],label[for],summary,.ca{cursor:var(--cur-p),pointer}
a:active,button:active,[role=slider]:active{cursor:url(/art/v3/cur-hand-press.png) 9 1,pointer}
input,textarea,.cmd,.line-in{cursor:var(--cur-t),text}
.key[disabled]{cursor:var(--cur),not-allowed}

/* scrollbar: lavender border track, ink thumb with a lavender frame (no rounding) */
::-webkit-scrollbar{width:16px;height:16px;background:var(--frame)}
::-webkit-scrollbar-track{background:var(--frame)}
::-webkit-scrollbar-thumb{background:var(--ink);border:4px solid var(--frame);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--patch)}
::-webkit-scrollbar-corner{background:var(--frame)}
@supports (-moz-appearance:none){html{scrollbar-color:var(--ink) var(--frame);scrollbar-width:auto}}
::selection{background:var(--patch);color:var(--ink)}
.pn-black ::selection,.pn-blue ::selection,.pc-blue ::selection{background:var(--patch);color:var(--line)}

/* icons: 8x8 PETSCII glyphs as masks, colored by currentColor; native 16 / 24 px, never resampled */
.ic{display:inline-block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) 0 0/16px 16px no-repeat;mask:var(--i) 0 0/16px 16px no-repeat;vertical-align:-2px}
.ic-x{--i:url(/art/v3/i-x.png);--i24:url(/art/v3/i-x-24.png)}.ic-xlogo{--i:url(/art/v3/i-xlogo.png);--i24:url(/art/v3/i-xlogo-24.png)}
.ic-pill{--i:url(/art/v3/i-pill.png);--i24:url(/art/v3/i-pill-24.png)}.ic-disk{--i:url(/art/v3/i-disk.png);--i24:url(/art/v3/i-disk-24.png)}
.ic-copy{--i:url(/art/v3/i-copy.png);--i24:url(/art/v3/i-copy-24.png)}.ic-play{--i:url(/art/v3/i-play.png);--i24:url(/art/v3/i-play-24.png)}
.ic-pause{--i:url(/art/v3/i-pause.png);--i24:url(/art/v3/i-pause-24.png)}.ic-sound{--i:url(/art/v3/i-sound.png);--i24:url(/art/v3/i-sound-24.png)}
.ic-mute{--i:url(/art/v3/i-mute.png);--i24:url(/art/v3/i-mute-24.png)}.ic-full{--i:url(/art/v3/i-full.png);--i24:url(/art/v3/i-full-24.png)}
.ic-arrow{--i:url(/art/v3/i-arrow.png);--i24:url(/art/v3/i-arrow-24.png)}.ic-out{--i:url(/art/v3/i-out.png)}
.ic-bullet{--i:url(/art/v3/i-bullet.png)}.ic-check{--i:url(/art/v3/i-check.png)}.ic-hit{--i:url(/art/v3/i-hit.png)}
.ic-wallet{--i:url(/art/v3/i-wallet.png);--i24:url(/art/v3/i-wallet-24.png)}.ic-shield{--i:url(/art/v3/i-shield.png);--i24:url(/art/v3/i-shield-24.png)}
.ic-close{--i:url(/art/v3/i-close.png)}.ic-run{--i:url(/art/v3/i-run.png);--i24:url(/art/v3/i-run-24.png)}
.key.big .ic{width:24px;height:24px;-webkit-mask:var(--i24) 0 0/24px 24px no-repeat;mask:var(--i24) 0 0/24px 24px no-repeat;vertical-align:-3px}

/* keys = C64 keycaps (9-slice pixel art: outline, highlight, face, lip). Press drops the cap 4 px, lip shrinks: one hard step. */
.key{--k:url(/art/v3/key-ink.png);--kd:url(/art/v3/key-ink-down.png);
  background:none;border-style:solid;border-width:8px 8px 12px;border-image:var(--k) 8 8 12 fill / 8px 8px 12px stretch;
  min-height:48px;padding:8px 12px 4px;gap:8px;color:var(--screen);transform:none!important;line-height:16px}
.key:hover,.key:focus-visible{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png);background:none;color:var(--ink)}
.key:active{border-image-source:var(--kd);padding:12px 12px 0;background:none}
.key.run{--k:url(/art/v3/key-patch.png);--kd:url(/art/v3/key-patch-down.png);background:none;color:var(--ink)}
.key.run:hover,.key.run:focus-visible{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png);background:none;color:var(--ink)}
.key.run:active{background:none;color:var(--ink)}
.key[disabled],.key[aria-disabled=true]{--k:url(/art/v3/key-mute.png);--kd:url(/art/v3/key-mute.png);background:none;color:var(--mute2)}
.key.big{min-height:64px;padding:12px 24px 8px;font-size:24px;line-height:24px}
.key.big:active{padding:16px 24px 4px}
.key.mini{min-height:44px;padding:4px 8px 4px;font-size:16px}
.key.mini:active{padding:8px 8px 0}
.key:focus-visible::before{left:-20px;top:8px}
.pn-blue .key:not(.run),.vp .key:not(.run),.box .key:not(.run){--k:url(/art/v3/key-scr.png);--kd:url(/art/v3/key-scr-down.png);color:var(--ink)}
.pn-blue .key:not(.run):hover,.vp .key:not(.run):hover,.box .key:not(.run):hover{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png)}
.pn-black .key:not(.run){--k:url(/art/v3/key-grey.png);--kd:url(/art/v3/key-grey-down.png);background:none;color:var(--line)}
.pn-black .key:hover{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png);background:none;color:var(--line)}
.pn-black .key.run{background:none}
.pn-black .key.run:hover{background:none;color:var(--line)}
.keys{gap:12px 16px}
.bar-keys{gap:12px}
.ca .ic{margin-left:12px;vertical-align:-2px}
.ca{display:inline}
.ca:hover{background:var(--patch);color:var(--ink)}

/* border: real C64 raster bars rolling in the frame (one 2 px raster line per step); loader stripes paint above them while work runs */
.frame .bars{position:absolute;left:0;right:0;top:0;height:calc(100% + 320px);background:url(/art/v3/raster.png) 0 0/8px 320px repeat;
  image-rendering:pixelated;animation:bars 14s steps(160,end) infinite;will-change:transform}
@keyframes bars{to{transform:translate3d(0,-320px,0)}}
.frame canvas{position:absolute;inset:0}

/* screens: PETSCII tiles per scene (8x8 chars at 2x) */
.screen{background:var(--screen) url(/art/v3/tile-screen.png) 0 0/128px 128px}
.pn-blue{background:var(--ink) url(/art/v3/tile-bam.png) 0 0/256px 128px}
.pn-black{background:var(--line) url(/art/v3/tile-noise.png) 0 0/256px 256px}
.pc-yellow{background:var(--patch) url(/art/v3/tile-hatch.png) 0 0/128px 128px}
.pc-blue{background:var(--ink) url(/art/v3/tile-dia.png) 0 0/128px 128px}
.pn-paper .dlist{background:url(/art/v3/greenbar.png) 0 0/8px 96px repeat;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}

/* panels framed with PETSCII rounded box characters instead of CSS outlines */
.panel,.pcard{border:16px solid transparent;border-image:url(/art/v3/box-blue.png) 16 / 16px;outline:0;background-clip:padding-box;margin:0}
.pn-black{border-image-source:url(/art/v3/box-black.png)}
.pc-yellow{border-image-source:url(/art/v3/box-blue.png)}

/* hero: shield field (PETSCII diamond rings) behind the slap loop */
.stage{z-index:0}
.stage .field{position:absolute;left:50%;top:50%;width:720px;height:304px;margin:-136px 0 0 -360px;background:url(/art/v3/field.png) 0 0/720px 304px no-repeat;image-rendering:pixelated;z-index:-1;pointer-events:none}
.loading .stage .field{visibility:hidden}
.boot{position:relative;z-index:0}
.boot .name,.boot .tag{position:relative;z-index:1}

/* line editor: PETSCII frame, own block cursor (native caret hidden), C64 blink */
.cmd{position:relative;border:16px solid transparent;border-image:url(/art/v3/box-blue.png) 16 / 16px;padding:0 8px;min-height:0;background:none!important;margin-top:8px;align-self:flex-start;max-width:100%}
.cmd.ed,.cmd:focus-within{border-image:url(/art/v3/box-blue-on-yellow.png) 16 fill / 16px}
.line-in{caret-color:transparent!important;height:32px}
.cmd.ed .line-in:placeholder-shown::placeholder{color:transparent}
.blk{position:absolute;left:0;top:0;width:12px;height:22px;background:var(--ink);display:none;pointer-events:none;animation:blink 1.6s steps(1,end) infinite}
.cmd.ed .blk{display:block}
.pn-black .cmd{border-image-source:url(/art/v3/box-lgrey.png)}
.pn-black .cmd.ed,.pn-black .cmd:focus-within{border-image:url(/art/v3/box-yellow.png) 16 / 16px}
.pn-black .blk{background:var(--paper)}
.boot .prompt{display:flex;flex-direction:column}
.boot .prompt>.ready{align-self:flex-start}

/* lists: PETSCII bullets */
.pc-list li::before{width:16px;height:16px;top:9px;background:currentColor;-webkit-mask:url(/art/v3/i-bullet.png) 0 0/16px 16px;mask:url(/art/v3/i-bullet.png) 0 0/16px 16px}
.pc-list li{padding-left:28px}
.who .ic{vertical-align:-3px}

/* toast + modal in PETSCII boxes, dither scrim instead of blur/opacity */
.toast{background:none;border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;outline:0;padding:4px 8px;color:var(--paper);animation:toastin .15s steps(3,end)}
@keyframes toastin{from{transform:translate(-50%,24px)}to{transform:translate(-50%,0)}}
.modal{background:url(/art/v3/scrim.png) 0 0/4px 4px repeat}
.modal .box{background:none;border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;outline:0;padding:8px;width:min(456px,calc(100vw - 32px));gap:12px;color:var(--paper);animation:boxin .2s steps(4,end)}
@keyframes boxin{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);color:var(--ink);padding:4px 4px 4px 12px}
.box-h .p{font-size:16px;line-height:16px;display:flex;gap:12px;align-items:center}
.box-sub{font-size:13px;line-height:1.5;color:var(--screen)}
.box-foot{font-size:16px;line-height:16px;color:var(--screen);text-align:right}
.box-h .key{--k:url(/art/v3/key-ink.png);--kd:url(/art/v3/key-ink-down.png);color:var(--paper)}
.wkey{width:100%;justify-content:flex-start}
.wkey .wname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.wkey img{width:24px;height:24px;image-rendering:auto;flex:none}

/* tape player */
.howto{margin-top:calc(var(--u)*3)}
.howto-k{font-size:16px;line-height:20px;margin-bottom:12px}
.vp{border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;padding:8px;color:var(--paper)}
.vp-scr{position:relative;background:var(--line)}
.vp-scr video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--line)}
.vp-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0}
.vp-big .key{pointer-events:none}
.vp-big:hover .key{--k:url(/art/v3/key-hot.png)}
.vp-big:active .key{border-image-source:url(/art/v3/key-hot-down.png);padding:12px 12px 0}
.vp.on .vp-big{display:none}
.vp-ctl{display:flex;align-items:center;gap:12px;margin-top:12px}
.vp-bar{position:relative;flex:1;height:24px;background:var(--line);border:4px solid var(--screen);touch-action:none}
.vp-bar:focus-visible{outline:0;border-color:var(--patch)}
.vp-fill{position:absolute;inset:0;background:var(--patch);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.vp-t{font-size:14px;color:var(--screen);white-space:nowrap;min-width:9ch;text-align:right}
.vp .key.mini{min-width:40px;justify-content:center}

@media (max-width:900px){.stage .field{width:360px;height:152px;margin:-68px 0 0 -180px;background-size:360px 152px}}
@media (max-width:560px){
  .cmd{padding:0 4px;align-self:stretch}
  .blk{width:10px;height:18px}
  .vp{padding:4px}
  .vp-ctl{gap:8px}
  .vp-t{font-size:12px;min-width:0}
  .key{padding:8px 10px 4px}
  .key:active{padding:12px 10px 0}
  .howto-k{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.frame .bars,.blk,.toast,.modal .box{animation:none}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.key.xk{min-width:48px;justify-content:center;padding-left:10px;padding-right:10px}
.key.xk .ic{width:24px;height:24px;-webkit-mask:var(--i24) 0 0/24px 24px no-repeat;mask:var(--i24) 0 0/24px 24px no-repeat;margin:-4px 0}
@media (max-width:560px){
  .vp-big .long{display:none}
  .vp-ctl{flex-wrap:wrap}
  .vp-bar{order:-1;flex:1 1 100%}
  .vp-t{margin-right:auto;text-align:left}
}
.modal .box>.box-foot{font-size:16px;line-height:16px}
.modal .box>.box-sub{font-size:13px;line-height:1.5}
.box-h .p{white-space:nowrap}
@media (max-width:560px){.doc table:has(td.p),.doc table:has(td.p) tbody,.doc table:has(td.p) tr,.doc table:has(td.p) td{display:block;width:auto}
  .doc table:has(td.p) tr:has(th){display:none}
  .doc table:has(td.p) tr{border-bottom:2px solid var(--ink);padding:8px 0}.doc table:has(td.p) td{border:0;padding:2px 0}.doc table:has(td.p) td.p{font-size:16px}}
@media (max-width:400px){.stage .field{width:calc(100vw - 20px);margin-left:calc((100vw - 20px)/-2);background-position:50% 0}}
@media (max-width:360px){
  .drive{width:128px;height:80px;background-size:384px 80px}
  .drive.busy{background-position:-128px 0}.drive.in{background-position:-256px 0}
  @keyframes led{0%{background-position:-128px 0}50%{background-position:-256px 0}}
  .line-in{min-width:4ch}
  .vp-t{display:none}
  .pn-top .aside,.panel .aside{overflow-wrap:anywhere}
}
.vp-bar{height:32px}
@media (max-width:420px){.line-in{min-width:4ch}}