/* PHP Patch home = one Commodore 64 screen. Border with raster bars, blue screen that scrolls like terminal output, keyboard deck below.
   Pepto C64 palette only. Pet Me 64 for words (8x8 grid, integer sizes), Martian Mono for addresses and numbers. */
@font-face{font-family:"Pet Me 64";src:url(/fonts/PetMe64.ttf) format("truetype");font-display:swap}
:root{
  --brd:#6C5EB5;--scr:#352879;--cy:#70A4B2;--wh:#FFFFFF;--ye:#B8C76F;--gr:#9AD284;--gn:#588D43;--rd:#68372B;--lr:#9A6759;--lg:#959595;--mg:#6C6C6C;--dg:#444444;--bk:#000;
  --c:16px;--lh:24px;--d:14px;--bt:32px;--bs:48px;--pad:24px 32px;--spr:336px;--name:80px;
  --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;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:var(--brd);-webkit-text-size-adjust:100%}
body{background:var(--brd);color:var(--cy);font:400 var(--d)/var(--lh) "Martian Mono",ui-monospace,monospace;font-variation-settings:"wdth" 87;font-variant-numeric:tabular-nums;overflow:hidden;cursor:var(--cur),auto}
img{image-rendering:pixelated;display:block}
[hidden]{display:none!important}
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,.cli-l{cursor:var(--cur-t),text}
.key[disabled]{cursor:var(--cur),not-allowed}
.p{font-family:"Pet Me 64",monospace;text-transform:uppercase;font-weight:400;letter-spacing:0;font-variant-ligatures:none;font-size:var(--c);line-height:var(--lh)}
.m{font-family:"Martian Mono",ui-monospace,monospace;font-variation-settings:"wdth" 87;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--ye);color:var(--scr)}

/* ---------------- border: raster bars roll in the frame; loader stripes (canvas) only while real work runs */
.frame{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--brd);overflow:hidden}
.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;width:100%;height:100%;display:block;image-rendering:pixelated;opacity:0}
.frame.on canvas{opacity:1}

/* ---------------- the machine: screen + deck */
.c64{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:var(--bt) var(--bs) 0;row-gap:var(--bt)}
.screen{position:relative;background:var(--scr);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:var(--pad);outline:0;scrollbar-gutter:stable}
.screen::-webkit-scrollbar{width:16px;background:var(--scr)}
.screen::-webkit-scrollbar-track{background:var(--scr)}
.screen::-webkit-scrollbar-thumb{background:var(--brd);border:4px solid var(--scr);border-radius:0}
.screen::-webkit-scrollbar-thumb:hover{background:var(--ye)}
@supports (-moz-appearance:none){.screen{scrollbar-color:var(--brd) var(--scr)}}

/* ---------------- boot block (static html: the name, X, pump.fun and CA need no JS) */
.boot{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 var(--lh)}
.spr{position:relative;width:var(--spr);height:var(--spr);margin:calc(var(--spr) * -.06) 0 calc(var(--spr) * -.1);z-index:0;flex:none}
.spr .field{position:absolute;left:50%;top:50%;width:calc(var(--spr) * 720 / 448);height:calc(var(--spr) * 304 / 448);transform:translate(-50%,-45%);background:url(/art/v3/field.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;z-index:-1;pointer-events:none}
.hero-sp{position:absolute;inset:0;overflow:hidden}
.hero-sp::before{content:"";position:absolute;left:0;top:0;width:800%;height:100%;background:url(/art/hero-loop.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;animation:hero 4.4s steps(1,end) infinite;will-change:transform}
@keyframes hero{0%{transform:translateX(0)}24%{transform:translateX(-12.5%)}26%{transform:translateX(-25%)}28%{transform:translateX(-12.5%)}30%{transform:translateX(-25%)}32%{transform:translateX(0)}
  40%{transform:translateX(-37.5%)}42%{transform:translateX(-50%)}44%{transform:translateX(-62.5%)}46.5%{transform:translateX(-75%)}49%{transform:translateX(-87.5%)}100%{transform:translateX(-87.5%)}}
.spr.patched .hero-sp::before{animation:none;transform:translateX(-87.5%)}
.demo-tag{position:absolute;right:18%;bottom:24%;font-size:var(--c);line-height:var(--c);padding:4px 6px 2px;background:var(--cy);color:var(--scr)}
.name{position:relative;z-index:1;font-size:var(--name);line-height:1;padding:.06em 0 .14em;color:var(--wh);white-space:nowrap}
.name::before{content:attr(data-t);position:absolute;left:.125em;top:calc(.06em + .125em);color:var(--brd);z-index:-1;pointer-events:none}
.tag{margin-top:8px;color:var(--cy)}
.links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;margin-top:var(--lh)}
.ca-line{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-basis:100%;min-width:0}
.ca-k{color:var(--wh)}
.ca{background:none;border:0;color:var(--wh);font-size:var(--d);line-height:var(--lh);text-align:left;overflow-wrap:anywhere;word-break:break-all;padding:2px 4px;min-height:32px}
.ca:hover{background:var(--ye);color:var(--scr)}
.ca .ic{margin-left:12px}
.ca-none{font-size:var(--d);color:var(--cy)}
.ticker{color:var(--wh)}

/* ---------------- terminal output */
.log{display:flex;flex-direction:column}
.o{color:var(--cy);overflow-wrap:anywhere;min-height:var(--lh)}
.o .kw,.kw{color:var(--wh)}
.o .d,.d{color:var(--cy)}
.o.m,.o .m{font-size:var(--d)}
.echo{color:var(--wh)}
.echo .m{color:var(--wh)}
.rdy{color:var(--cy)}
.err{color:var(--wh)}
.err::before{content:"";display:inline-block;width:.5em}
.aside{color:var(--cy);font-size:var(--d);max-width:76ch}
.intro{margin-bottom:var(--lh)}
.out{display:flex;flex-direction:column;margin-bottom:var(--lh)}
.out>*+*{margin-top:0}
.inv{display:inline-block;background:var(--cy);color:var(--scr);padding:0 4px;white-space:pre}
.tl{visibility:hidden}
.okl{color:var(--gr)}
.hl{color:var(--ye)}
.gap{height:var(--lh)}
.ikeys{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:12px 0 4px}

/* directory = wallet scan */
.dir-head{color:var(--scr)}
.dir-addr{color:var(--wh);font-size:var(--d)}
.rows{list-style:none}
.row{display:grid;grid-template-columns:10ch minmax(6em,9.5em) minmax(0,1fr) 7.5em;gap:0 16px;align-items:baseline}
.row:hover{background:var(--ye);color:var(--scr)}
.row:hover *{color:var(--scr)!important}
.row .amt{text-align:right;font-size:var(--d);color:var(--wh)}
.row .nm{white-space:nowrap;overflow:hidden;color:var(--wh)}
.row .nm.mint{font-size:var(--d);line-height:var(--lh)}
.row .who{font-size:var(--d);overflow-wrap:anywhere;min-width:0;color:var(--cy)}
.row .who a{color:inherit}
.row .tg{text-align:right;white-space:nowrap;color:var(--ye)}
.row .note{grid-column:2/5;font-size:13px;line-height:20px;color:var(--cy)}
.row.fz .tg{color:var(--lg)}
.row.more,.ln.more{display:none}
.who .sh{display:none}
.who .ic{vertical-align:-3px}
.dir-foot .m{display:block;color:var(--cy);font-size:var(--d)}
.dir-foot .p{color:var(--wh)}
.notcov{font-size:13px;line-height:20px;color:var(--cy);max-width:90ch;margin-top:8px}
.notcov b{font-weight:600;color:var(--wh)}
.clean{display:flex;align-items:center;gap:16px;margin:8px 0}
.clean img{width:104px;height:104px}

/* LIST = the program your wallet signs */
.ln{display:grid;grid-template-columns:4em minmax(0,1fr);gap:0 16px;align-items:baseline;position:relative}
.ln .no{font-family:"Pet Me 64",monospace;font-size:var(--c);line-height:var(--lh);text-align:right;position:relative;color:var(--wh)}
.ln .tx{font-size:var(--d);overflow-wrap:anywhere;min-width:0;color:var(--cy)}
.ln .tx .p{color:var(--wh)}
.ln .tx .sym{color:var(--wh)}
.ln .tx .sym.m{font-size:var(--d)}
.ln.fee .tx{font-weight:600}
.ln.fee .tx .p{color:var(--ye)}
.ln.done .tx{text-decoration:line-through;text-decoration-thickness:2px;color:var(--lg)}
.ln .slap{position:absolute;left:50%;top:50%;width:96px;height:36px;margin:-18px 0 0 -48px;background:url(/art/plaster-slap.png) 0 0/576px 36px no-repeat;image-rendering:pixelated;animation:pslap .42s steps(5,end) forwards;pointer-events:none;z-index:1}
@keyframes pslap{from{background-position:0 0}to{background-position:-480px 0}}
.status{color:var(--wh);font-size:var(--d)}
.status .p{margin-right:8px;color:var(--ye)}

/* VERIFY = site check */
.vcard{display:flex;flex-direction:column;max-width:900px;margin:8px 0}
.vbar{display:flex;align-items:center;gap:16px;padding:8px 12px 6px;flex-wrap:wrap}
.vbar.safe{background:var(--gr);color:var(--bk)}
.vbar.stop{background:var(--rd);color:var(--wh)}
.vbar .vhost{margin-left:auto;font-size:var(--d);color:inherit;overflow-wrap:anywhere}
.vbody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:12px 0}
.vicon{width:104px;height:104px}
.checks{list-style:none}
.checks li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:0 16px;align-items:baseline}
.checks .st{color:var(--gr)}
.checks .st.hit{background:var(--rd);color:var(--wh);padding:0 4px;justify-self:start}
.checks .st.warn{color:var(--ye)}
.checks .st.skip,.checks .st.info{color:var(--lg)}
.checks li>span:last-child{min-width:0;overflow-wrap:anywhere;color:var(--wh);font-size:var(--d)}
.checks .d{display:block;font-size:13px;line-height:20px;color:var(--cy)}
.vline,.vstats{font-size:var(--d);color:var(--cy)}
.vstats{font-size:13px}

/* HELP */
.help{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 24px;align-items:baseline;max-width:100ch}
.help dt{color:var(--wh)}
.help dt .m{font-size:var(--d)}
.help dd{color:var(--cy);font-size:var(--d)}
.help dd b{color:var(--wh);font-weight:500}
.help a{color:var(--wh)}
.credit{font-size:12px;line-height:20px;color:var(--cy)}

/* command line: own block cursor, C64 blink; the native caret is hidden */
.cli{position:relative;display:flex;min-height:var(--lh)}
.cli-l{position:relative;display:block;flex:1;min-width:0;height:var(--lh)}
.cli-in{display:block;width:100%;height:var(--lh);background:transparent;border:0;border-radius:0;outline:0;color:var(--wh);font-size:16px;line-height:var(--lh);padding:0;caret-color:transparent;font-variation-settings:"wdth" 87}
.cli-in::placeholder{color:var(--lg);opacity:1}
.cli-in:focus::placeholder{color:transparent}
.blk{position:absolute;left:0;top:2px;width:10px;height:20px;background:var(--cy);pointer-events:none;animation:blink 1.06s steps(1,end) infinite}
.cli:not(.ed) .cli-in:placeholder-shown{text-indent:2ch}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
.busy .cli{display:none}

/* ---------------- icons: 8x8 PETSCII glyphs as masks */
.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-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)}

/* ---------------- keys = C64 keycaps (9-slice pixel art); press drops the cap one step */
.key{--k:url(/art/v3/key-scr.png);--kd:url(/art/v3/key-scr-down.png);font-family:"Pet Me 64",monospace;text-transform:uppercase;font-size:var(--c);line-height:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;position:relative;
  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;color:var(--scr)}
.key:hover,.key:focus-visible{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png);color:var(--scr);outline:0}
.key:active{border-image-source:var(--kd);padding:12px 12px 0}
.key.run{--k:url(/art/v3/key-patch.png);--kd:url(/art/v3/key-patch-down.png);color:var(--scr)}
.key.run:hover,.key.run:focus-visible{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png)}
.key[disabled],.key[aria-disabled=true]{--k:url(/art/v3/key-mute.png);--kd:url(/art/v3/key-mute.png);color:var(--lg)}
.key.mini{min-height:44px;padding:4px 8px;font-size:16px}
.key.mini:active{padding:8px 8px 0}
.key.xk{min-width:48px;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}

/* ---------------- deck: the keyboard under the screen (black well, grey function caps) */
.deck{position:relative;margin:0 calc(var(--bs) * -1);padding:16px var(--bs) calc(16px + env(safe-area-inset-bottom));background:var(--bk) url(/art/v3/tile-noise.png) 0 0/256px 256px;
  display:flex;justify-content:center;align-items:stretch;gap:12px;flex-wrap:nowrap}
.fk{--k:url(/art/v3/key-grey.png);--kd:url(/art/v3/key-grey-down.png);flex-direction:column;gap:2px;min-width:112px;min-height:64px;padding:8px 10px 4px;color:var(--bk)}
.fk:active{padding:12px 10px 0}
.fk .kl{font-size:var(--c);line-height:16px;display:flex;align-items:center;height:16px}
.fk .ks{font-size:11px;line-height:14px;text-transform:none;white-space:nowrap;color:var(--dg);font-variation-settings:"wdth" 87}
.fk.alt{--k:url(/art/v3/key-ink.png);--kd:url(/art/v3/key-ink-down.png);color:var(--wh)}
.fk.alt .ks{color:var(--cy)}
.fk.alt:hover,.fk.alt:focus-visible{--k:url(/art/v3/key-hot.png);--kd:url(/art/v3/key-hot-down.png);color:var(--bk)}
.fk.alt:hover .ks,.fk.alt:focus-visible .ks{color:var(--dg)}
.fk.hint{--k:url(/art/v3/key-patch.png);--kd:url(/art/v3/key-patch-down.png);color:var(--bk)}
.fk.hint .ks{color:var(--scr)}
.fk:hover,.fk:focus-visible{color:var(--bk)}
.fk.xk .ic{width:16px;height:16px;-webkit-mask:var(--i) 0 0/16px 16px no-repeat;mask:var(--i) 0 0/16px 16px no-repeat;margin:0}
.deck .key:focus-visible::after{content:"";position:absolute;left:50%;bottom:-10px;width:16px;height:4px;margin-left:-8px;background:var(--ye)}

/* ---------------- tape player (moved into the screen by PLAY) */
.tape{max-width:960px;margin:8px 0}
.vp{border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;padding:8px;color:var(--wh)}
.vp-scr{position:relative;background:var(--bk)}
.vp-scr video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--bk)}
.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.on .vp-big{display:none}
.vp-ctl{display:flex;align-items:center;gap:12px;margin-top:12px}
.vp-bar{position:relative;flex:1;height:32px;background:var(--bk);border:4px solid var(--cy);touch-action:none}
.vp-bar:focus-visible{outline:0;border-color:var(--ye)}
.vp-fill{position:absolute;inset:0;background:var(--ye);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.vp-t{font-size:14px;color:var(--cy);white-space:nowrap;min-width:9ch;text-align:right}
.vp .key.mini{min-width:44px}

/* ---------------- toast + wallet modal: PETSCII boxes, dither scrim */
.toast{position:fixed;left:50%;top:calc(var(--bt) + 16px);transform:translateX(-50%);z-index:40;border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;padding:4px 8px;color:var(--wh);font-size:var(--d);max-width:calc(100vw - 32px);animation:toastin .15s steps(3,end)}
.toast .p{margin-right:12px;color:var(--ye)}
@keyframes toastin{from{transform:translate(-50%,-24px)}to{transform:translate(-50%,0)}}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:url(/art/v3/scrim.png) 0 0/4px 4px repeat}
.modal .box{border:16px solid transparent;border-image:url(/art/v3/box-white-on-blue.png) 16 fill / 16px;padding:8px;width:min(456px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;color:var(--wh);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(--wh);color:var(--scr);padding:4px 4px 4px 12px}
.box-h .p{display:flex;gap:12px;align-items:center;white-space:nowrap}
.box-h .key{--k:url(/art/v3/key-ink.png);--kd:url(/art/v3/key-ink-down.png);color:var(--wh)}
.box-sub{font-size:13px;line-height:20px;color:var(--cy)}
.box-foot{color:var(--cy);text-align:right}
#w-list{display:flex;flex-direction:column;gap:8px}
.wkey{width:100%;justify-content:flex-start;gap:12px}
.wkey .wname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.wkey img{width:24px;height:24px;image-rendering:auto;flex:none}

/* ---------------- sizes */
@media (max-height:860px),(max-width:1100px){:root{--spr:224px;--name:64px}}
@media (max-width:1240px),(max-height:620px){.fk .ks{display:none}.fk{min-height:48px;min-width:0;flex:1 1 auto;padding:8px 8px 4px}.fk:active{padding:12px 8px 0}.deck{gap:8px;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
@media (max-height:620px) and (max-width:1000px){.fk .kl{font-size:12px;line-height:12px;height:12px}.fk{padding:6px 4px 2px}.fk:active{padding:10px 4px 0}}
@media (max-width:900px){:root{--bs:24px;--bt:24px;--pad:16px 20px}}
@media (max-width:700px),(max-width:1000px) and (min-height:621px){
  :root{--bs:12px;--bt:16px;--pad:12px 12px 16px;--spr:224px;--name:32px;--d:13px}
  .deck{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:8px 6px;padding:10px 6px calc(10px + env(safe-area-inset-bottom))}
  .deck>*{grid-column:span 4}
  .deck>:nth-child(-n+4){grid-column:span 5}
  .fk{min-height:52px;padding:6px 0 2px}
  .fk:active{padding:10px 0 0}
  .fk .kl{font-size:14px}
  .spr{margin:-28px 0 -36px}
  .tag{font-size:var(--c)}
  .row{grid-template-columns:7ch minmax(0,1fr) 3.5em;grid-template-areas:"a n t" "w w w"}
  .row .amt{grid-area:a}.row .nm{grid-area:n}.row .tg{grid-area:t}.row .who{grid-area:w;padding-left:calc(7ch + 16px)}
  .row .note{grid-column:1/-1;padding-left:calc(7ch + 16px)}
  .who .full{display:none}.who .sh{display:inline}
  .ln{grid-template-columns:2.5em minmax(0,1fr);gap:0 10px}
  .vbody{grid-template-columns:1fr}
  .help{grid-template-columns:1fr;gap:0}
  .help dd{margin-bottom:8px}
  .vp{padding:4px}
  .vp-big .long{display:none}
  .vp-ctl{flex-wrap:wrap;gap:8px}
  .vp-bar{order:-1;flex:1 1 100%}
  .vp-t{margin-right:auto;text-align:left;font-size:12px;min-width:0}
}
@media (max-width:700px) and (min-width:560px){:root{--name:48px}}
@media (min-width:701px) and (max-width:1000px) and (min-height:621px){:root{--name:64px;--d:14px}.row{grid-template-columns:10ch minmax(6em,9.5em) minmax(0,1fr) 7.5em;grid-template-areas:none}.row .who{grid-area:auto;padding-left:0}.row .note{grid-column:2/5;padding-left:0}.who .full{display:inline}.who .sh{display:none}}
@media (pointer:coarse){.cli,.cli-l,.cli-in{min-height:36px;height:36px;line-height:36px}.blk{top:8px}}
@media (max-width:460px){.fk .kl{font-size:12px;line-height:12px;height:12px}}
@media (max-width:340px){:root{--name:24px}.fk .kl{font-size:10px}}
@media (max-height:520px){:root{--spr:112px;--name:32px}.spr{margin:0}.demo-tag{display:none}}
@media (min-width:2400px) and (min-height:1300px){:root{--c:24px;--lh:36px;--d:20px;--bt:48px;--bs:72px;--spr:448px;--name:120px;--pad:36px 48px}
  .fk{min-width:168px;min-height:88px;border-width:12px 12px 18px;border-image-width:12px 12px 18px}.fk .kl{font-size:24px;line-height:24px;height:24px}.fk .ks{font-size:16px;line-height:20px}
  .key{border-width:12px 12px 18px;border-image-width:12px 12px 18px;min-height:72px;line-height:24px}
  .cli-in{font-size:22px}.blk{width:14px;height:30px;top:3px}}
@media (min-width:3600px) and (min-height:2000px){:root{--c:32px;--lh:48px;--d:26px;--bt:64px;--bs:96px;--spr:672px;--name:160px;--pad:48px 64px}
  .fk{min-width:224px;min-height:112px}.fk .kl{font-size:32px;line-height:32px;height:32px}.fk .ks{font-size:20px;line-height:26px}
  .cli-in{font-size:30px}.blk{width:19px;height:40px;top:4px}}
@media (min-width:5000px) and (min-height:2800px){:root{--c:48px;--lh:72px;--d:38px;--spr:896px;--name:240px}
  .fk{min-width:320px;min-height:160px}.fk .kl{font-size:48px;line-height:48px;height:48px}.fk .ks{font-size:30px;line-height:36px}.cli-in{font-size:44px}.blk{width:28px;height:60px;top:6px}}
@media (prefers-reduced-motion:reduce){.frame .bars,.blk,.toast,.modal .box,.hero-sp::before,.ln .slap{animation:none}.hero-sp::before{transform:translateX(-87.5%)}}