/* Lo-PDA runtime styles. Copyright (c) 2026 Haowei Wu. MIT License. */
/* base reset (the artifact host used to provide this) */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* a handheld, not a web page: no double-tap zoom, no text selection or long-press callouts */
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
textarea,input{-webkit-user-select:text;user-select:text}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}

/* Layout: a fictional 1986 handheld — graphite case, one green LCD that fills the phone, a hardware HOME key below. Single deliberate look (the device), so no theme switching. */
:root{
  --case:#262925; --case-hi:#3a3e38; --case-label:#8d9283;
  --lcd:#a3ad7e; --lcd-2:#8f9a69; --lcd-3:#7d8a58; --ink-2:#4a5a32; --ink:#1f2a14;
  --key:#b7432e; --key-ink:#f1e6d8;
  --f-pix:"VT323", "DotGothic16", ui-monospace, "Menlo", monospace;
  --f-lcd:"DotGothic16", "VT323", "PingFang SC", "Hiragino Sans GB", ui-monospace, monospace;
  color-scheme:light;
}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--case);color:var(--ink);margin:0;display:flex;justify-content:center;padding-inline:16px;box-sizing:border-box;font-family:var(--f-lcd)}
*{box-sizing:border-box}
.device{width:100%;max-width:560px;height:100%;height:100dvh;display:flex;flex-direction:column;gap:10px;padding-block:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 14px)}
.brand{white-space:nowrap;gap:12px;overflow:hidden;display:flex;justify-content:space-between;align-items:baseline;color:var(--case-label);font-family:var(--f-pix);font-size:18px;letter-spacing:.12em;padding-inline:4px}
.brand b{color:#e4ddc9;font-weight:400}
.brand span{color:#a9ae9c}
.screen{flex:1;min-height:0;position:relative;background:var(--lcd);border-radius:8px;border:6px solid #11130f;box-shadow:inset 0 0 0 2px var(--lcd-3), inset 0 6px 18px rgba(31,42,20,.35);display:flex;flex-direction:column;overflow:hidden}
.screen::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(31,42,20,.03) 0 1px,transparent 1px 3px)}
.status{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 10px;border-bottom:2px solid var(--ink);font-family:var(--f-pix);font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.status .save{font-size:16px;color:var(--ink)}
.status .save.bad{background:var(--ink);color:var(--lcd);padding:0 4px}
.view{flex:1;min-height:0;overflow:auto;position:relative}
/* the phone's keyboard is up (core.js): the LCD takes the visible height; the case around it steps aside */
html.kb .device{height:var(--vvh,100dvh);padding-block:calc(env(safe-area-inset-top,0px) + 4px) 4px;gap:0}
html.kb .brand,html.kb .gamepad,html.kb .keys{display:none!important}
.view[hidden]{display:none!important}
.keys{display:flex;align-items:center;justify-content:space-between;padding-inline:8px}
.grille{display:grid;grid-template-columns:repeat(6,6px);gap:5px}
.grille i{width:6px;height:6px;border-radius:50%;background:#11130f;box-shadow:inset 0 1px 0 var(--case-hi)}
.home-key{font-family:var(--f-pix);font-size:20px;letter-spacing:.2em;color:var(--key-ink);background:var(--key);border:0;border-radius:999px;padding:10px 28px;box-shadow:0 3px 0 #6e2216, inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer}
.home-key:active{transform:translateY(2px);box-shadow:0 1px 0 #6e2216}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}

/* home grid */
.home{padding:16px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 10px;align-content:start}
.home-tip{grid-column:1/-1;display:grid;gap:6px;padding:10px;border:2px solid var(--ink);background:var(--lcd);color:var(--ink);font-size:14px;line-height:1.35}
.home-tip strong{font-size:15px;font-weight:600}
.home-tip-dismiss{justify-self:start;min-height:44px;padding:8px 14px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;min-width:0}
.tile{width:64px;height:64px;border:3px solid var(--ink);background:var(--lcd-2);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:4px 4px 0 var(--ink);position:relative;overflow:hidden}
.app:active .tile{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.app.builtin .tile{background:var(--ink);color:var(--lcd)}
.tile.has-icon,.app.builtin .tile.has-icon{background:var(--lcd-2)}
.tile .icon{width:75%;height:75%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.label{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-family:var(--f-pix);font-size:14px;color:var(--ink-2);line-height:1;margin-top:-4px}

/* shared controls */
textarea{width:100%;font-family:var(--f-lcd);font-size:16px;line-height:1.5;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);padding:8px;resize:none}
textarea::placeholder{color:var(--ink-2)}
.btn{font-family:var(--f-lcd);font-size:16px;background:var(--ink);color:var(--lcd);border:0;padding:10px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink-2)}
.btn:disabled{background:var(--lcd-3);color:var(--ink-2);cursor:default;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hint{font-size:13px;color:var(--ink-2);margin:0}

/* top bar used by notes and runner */
.bar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--lcd);z-index:1}
.bar h2{margin:0;font-size:16px;font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .btn{padding:6px 10px;font-size:14px}
/* notes: the search box, one scrolling list, the soft keys; sheets over it (docs/design/notes.md) */
.notes-view{display:flex;flex-direction:column;overflow:hidden;position:relative}
.notes-head{flex:none;padding:6px 8px;border-bottom:2px solid var(--ink)}
.notes-head input{width:100%;min-width:0;min-height:44px;font-family:var(--f-lcd);font-size:17px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:6px 8px;-webkit-appearance:none;appearance:none}
.notes-head input::placeholder{color:var(--ink-2)}
.notes-head input::-webkit-search-cancel-button{display:none}
.notes-filter{flex:none;margin:0;padding:4px 10px;font-size:15px;border-bottom:1px dashed var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.notes-list{gap:0}
.notes-main .notes-list li{display:block;padding:0}
.notes-main .notes-list li::before{display:none}
.notes-list button{width:100%;min-height:44px;text-align:left;background:none;border:0;border-bottom:1px dashed var(--ink-2);padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;color:inherit;font:inherit}
.notes-list li.on button{background:var(--ink);color:var(--lcd)}
.notes-list .t{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-list .d{font-size:13px;max-width:100%;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-list li.on .d{color:var(--lcd)}
.notes-list mark{background:var(--ink);color:var(--lcd)}
.notes-list li.on mark{background:var(--lcd);color:var(--ink)}
.notes-list li.act button{flex-direction:row;align-items:center;justify-content:flex-start;gap:0;border-bottom:0}
.notes-list .mk{flex:none;width:1em;text-align:center;font-size:12px}
.notes-list li.act .mk+.t{margin-left:.25em}
.notes-count{margin:0;padding:8px 10px 2px;font-size:14px;color:var(--ink-2);border-bottom:1px dashed var(--ink-2);cursor:default}
.notes-empty{padding:16px 12px;text-align:center;font-size:14px;line-height:1.5}
#notes-keys{flex:none;height:auto;padding:4px 6px}
.notes-sheet .notes-status{flex:none;font-size:14px;text-align:center}
.notes-sheet .notes-peek{flex:none;margin:0;max-height:5.6em;overflow:hidden;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px dashed var(--ink-2);padding-top:4px}
.notes-sheet .lcd-menu li{min-height:44px}
.notes-sheet .lcd-menu li small{font-family:var(--f-lcd);font-size:14px}
.notes-sheet .softkeys{margin-top:auto}
.notes-help{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45;cursor:pointer}
.notes-help p{margin:0;overflow-wrap:anywhere}
.notes-help .hint{text-align:center;margin-top:auto}
.note-years{flex:none;border-bottom:2px solid var(--ink);gap:0}
.lcd-menu.note-years li{min-height:44px;padding:4px 10px;font-size:14px}
.note-years li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcd-menu.note-years li.label{min-height:0;padding:4px 10px 0;font-size:13px;color:var(--ink-2);cursor:default}
.note-years li.label::before{display:none}
.empty{padding:28px 16px;text-align:center;color:var(--ink-2);font-size:15px;line-height:1.6}
.editor{display:flex;flex-direction:column;height:100%}
.editor textarea{flex:1;border:0;border-radius:0;padding:12px;background:transparent}
.editor textarea:focus-visible{outline:none}
.editor .bar .btn{min-height:44px}
.editor .bar{justify-content:space-between}
.note-when{flex:none;padding:3px 12px;font-size:13px;line-height:18px;color:var(--ink-2);border-bottom:1px solid var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-read{flex:1;min-height:0;overflow-y:auto;padding:12px;font-family:var(--f-lcd);font-size:16px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word;cursor:text}
.note-read:empty::before{content:attr(data-ph);color:var(--ink-2)}

/* runner */
.runner{display:flex;flex-direction:column;height:100%}
.runner iframe{flex:1;width:100%;border:0;background:var(--lcd);display:block}
.err{border-top:3px solid var(--ink);padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:var(--lcd-2)}
.err code{font-family:var(--f-pix);font-size:16px;word-break:break-all}
.confirm{display:flex;gap:6px}

/* camera */
.cam{display:flex;flex-direction:column;gap:12px;padding:12px;align-items:center}
.finder{position:relative;width:100%;max-width:min(400px,50vh);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--lcd)}
#cam-cv{display:block;width:100%;aspect-ratio:128/112;image-rendering:pixelated;image-rendering:crisp-edges}
.finder .corner{position:absolute;width:14px;height:14px;border:3px solid var(--ink)}
.finder .tl{left:8px;top:8px;border-right:0;border-bottom:0}.finder .tr{right:8px;top:8px;border-left:0;border-bottom:0}
.finder .bl{left:8px;bottom:8px;border-right:0;border-top:0}.finder .br{right:8px;bottom:8px;border-left:0;border-top:0}
.finder .stamp{position:absolute;right:10px;bottom:28px;font-family:var(--f-pix);font-size:16px;background:var(--lcd);padding:0 4px}
.shutter{width:72px;height:72px;border-radius:50%;background:var(--key);border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--key-ink);font-family:var(--f-pix);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.shutter:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.cam-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.cam-row .btn{padding:8px 12px;font-size:14px}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;width:100%;max-width:420px}
.album button{padding:0;border:2px solid var(--ink);background:var(--lcd);cursor:pointer;line-height:0}
.album button[aria-current="true"]{outline:3px solid var(--ink);outline-offset:2px}
.album canvas{width:100%;aspect-ratio:128/112;image-rendering:pixelated}
.album .fr{position:relative}
.album .fr b{position:absolute;left:2px;top:1px;font-family:var(--f-pix);font-size:14px;font-weight:400;background:var(--lcd);padding:0 2px;line-height:1.1}
.album .blank{aspect-ratio:128/112;border:2px dashed var(--ink-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-pix);font-size:14px;color:var(--ink-2)}
.panel{width:100%;max-width:420px;border:2px solid var(--ink);background:var(--lcd-2);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.panel p{margin:0;font-size:14px;line-height:1.6}
.panel .row .btn{padding:8px 12px;font-size:14px}
.link-boot{position:absolute;inset:0;z-index:3;background:var(--lcd);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 22px;font-family:var(--f-pix);font-size:19px;line-height:1.25;cursor:pointer}
.link-boot .ln{white-space:pre}
.link-boot .bar8{letter-spacing:.05em;white-space:pre-wrap}   /* on narrow screens the bar drops to its own line instead of being cut off */
.link-boot .skip{margin-top:14px;font-size:16px;color:var(--ink-2)}
.finder .dev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-pix);font-size:20px;background:var(--lcd);letter-spacing:.1em}
.file-in{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.toast{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:var(--ink);color:var(--lcd);padding:6px 12px;font-size:14px;z-index:5;max-width:90%;text-align:center}
@media (prefers-reduced-motion: reduce){.sig i,.cursor{animation:none}}


/* store */
.store-updates{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:8px 10px;border:2px solid var(--ink);background:var(--lcd-2)}
.store-updates span{flex:1;min-width:0;font-size:14px;line-height:1.35}
.store-updates .btn{flex:none;min-height:44px;padding:8px 12px;font-size:14px}
/* store: the search box, the category chips, the permission icons */
.store-search{display:flex;gap:8px;padding:8px 12px 0}
.store-search input{flex:1;min-width:0;min-height:44px;font-family:var(--f-lcd);font-size:17px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:6px 8px;-webkit-appearance:none;appearance:none}
.store-search input::placeholder{color:var(--ink-2)}
.store-search input::-webkit-search-cancel-button{display:none}
.store-q-clear{flex:none;width:44px;height:44px;padding:0;font-size:22px;line-height:1}
.store-perms{display:flex;align-items:center;gap:6px;margin-top:1px}
.store-perms .perm{display:inline-flex;width:16px;height:16px}
.store-perms canvas{width:16px;height:16px;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.store-filters{display:flex;flex-wrap:nowrap;gap:6px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none}
.store-filters::-webkit-scrollbar{display:none}
.store-filter{flex:none;display:inline-flex;align-items:baseline;gap:5px;font-family:var(--f-lcd);font-size:14px;background:transparent;color:var(--ink);border:2px solid var(--ink);padding:6px 9px;min-height:40px;cursor:pointer}
.store-filter span{font-family:var(--f-pix);font-size:14px;color:var(--ink-2)}
.store-filter[aria-pressed="true"]{background:var(--ink);color:var(--lcd)}
.store-filter[aria-pressed="true"] span{color:var(--lcd)}
.store-list{list-style:none;margin:0;padding:6px 12px 8px;display:flex;flex-direction:column;gap:10px}
.store-cat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid var(--ink-2);padding:4px 2px 3px;font-family:var(--f-pix);font-size:17px;color:var(--ink-2)}
.store-cat:first-child{padding-top:0}
.store-cat b{font-weight:400;color:var(--ink)}
.store-cat small{font-size:14px}
.store-item{display:flex;gap:12px;align-items:center;border:2px solid var(--ink);background:var(--lcd-2);padding:10px}
.store-item .tile{width:48px;height:48px;font-size:24px;box-shadow:3px 3px 0 var(--ink);flex:none}
.store-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.store-body b{font-weight:400;font-size:16px}
.store-body span{font-size:13px;line-height:1.5}
.store-body small{font-family:var(--f-pix);font-size:15px;color:var(--ink-2)}
.store-badge{display:inline-block;margin-left:4px;padding:0 3px;background:var(--ink);color:var(--lcd);font-family:var(--f-lcd);font-size:10px;line-height:14px;vertical-align:1px}
.store-item .btn{flex:none;padding:8px 12px;font-size:14px}
.store-note{padding:4px 14px 14px;margin:0}
/* one-tap save sheet (iOS needs a fresh tap for the share sheet) */
.save-sheet{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;background:var(--lcd-2);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px;display:flex;flex-direction:column;gap:10px}
.save-sheet p{margin:0;font-size:14px;word-break:break-all}
/* the runtime's file dialog over a running app: the scrim (no colour of its own) keeps taps off the app */
.file-ask{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:16px}
.file-ask .box{width:100%;max-width:300px;background:var(--lcd-2);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:14px;display:flex;flex-direction:column;gap:12px}
.file-ask p{margin:0;font-size:16px;line-height:1.4;word-break:break-all}
.file-ask .row{display:flex;gap:10px}
.file-ask .btn{flex:1}
.file-ask small{font-family:var(--f-pix);font-size:14px;color:var(--ink-2)}
/* the permissions an app asks for: one icon and one word each */
.file-ask .ask-perms{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.file-ask .ask-perm{display:flex;flex-direction:column;align-items:center;gap:3px;width:58px;text-align:center}
.file-ask .ask-perm-ico{display:inline-flex;width:24px;height:24px}
.file-ask .ask-perm-ico canvas{width:24px;height:24px;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.file-ask .ask-perm small{font-family:var(--f-lcd);font-size:12px;line-height:1.1;color:var(--ink)}
.file-ask p.note{font-size:14px;color:var(--ink-2)}
.file-ask p.names{word-break:keep-all;overflow-wrap:anywhere}
.file-ask p.quote{font-size:14px;line-height:1.35;white-space:pre-wrap;max-height:8.1em;overflow:hidden;border-left:3px solid var(--ink-2);padding-left:8px}
/* "tap to turn on": one line over the bottom of the app, which stays usable around it */
.file-ask.bar{align-items:flex-end;padding:10px;pointer-events:none}
.file-ask.bar .sense-bar{pointer-events:auto;width:100%;min-height:44px;font-size:16px}
/* the status bar's microphone mark while an app listens */
.status .mic-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:20px;background:var(--ink)}
.status .mic-mark[hidden]{display:none}
.status .mic-mark canvas{width:7px;height:10px;image-rendering:pixelated}
/* the status bar's antenna while LP.link is open: a CSS mast and its dot, with two arcs each side.
   Sending, the arcs light from the mast outwards (a wave leaving); hearing the other side, from the
   outside in. Stepped, three frames, like an LCD segment animation. */
.status .link-mark{display:inline-flex;align-items:center;justify-content:center;gap:1px;width:30px;height:20px;background:var(--ink);position:relative}
.status .link-mark[hidden]{display:none}
.status .link-mark i{position:relative;display:block;width:2px;height:11px;background:var(--lcd);margin:3px 2px 0}
.status .link-mark i::before{content:"";position:absolute;left:-2px;top:-4px;width:6px;height:6px;border:2px solid var(--lcd);border-radius:50%;background:var(--ink)}
.status .link-mark b{display:block;width:3px;border:2px solid var(--lcd);visibility:hidden;margin-top:-3px}
.status .link-mark b.w1{height:6px}
.status .link-mark b.w2{height:12px}
.status .link-mark b.l{border-right:0;border-radius:6px 0 0 6px}
.status .link-mark b.r{border-left:0;border-radius:0 6px 6px 0}
.status .link-mark.tx b.w1{animation:linkout1 .6s steps(1,end) infinite}
.status .link-mark.tx b.w2{animation:linkout2 .6s steps(1,end) infinite}
.status .link-mark.rx:not(.tx) b.w1{animation:linkin1 .6s steps(1,end) infinite}
.status .link-mark.rx:not(.tx) b.w2{animation:linkin2 .6s steps(1,end) infinite}
@keyframes linkout1{0%{visibility:hidden}33%{visibility:visible}67%{visibility:visible}}
@keyframes linkout2{0%{visibility:hidden}33%{visibility:hidden}67%{visibility:visible}}
@keyframes linkin1{0%{visibility:hidden}33%{visibility:visible}67%{visibility:hidden}}
@keyframes linkin2{0%{visibility:visible}33%{visibility:hidden}67%{visibility:hidden}}
/* live viewfinder */
.finder .live-tag{position:absolute;left:10px;top:8px;font-family:var(--f-pix);font-size:16px;background:var(--ink);color:var(--lcd);padding:0 4px;letter-spacing:.1em}
.finder{cursor:pointer}
/* settings */
.settings{padding:14px;display:flex;flex-direction:column;gap:14px;max-width:420px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--ink-2);padding-bottom:12px;font-size:16px}
.set-row .btn{padding:6px 14px;min-width:56px}
/* the short settings menu: one 44 px row per setting, the long parts behind a row */
.set-menu{padding:0 10px 6px;gap:0}
.set-bar{padding:1px 8px}
.set-bar h2{line-height:1.1}
.set-menu .set-row{min-height:44px;padding:6px 0 8px;justify-content:flex-start;gap:10px}
/* a little air between the buttons and the lines above and below them (the 3 px shadow sits in the bottom gap) */
.set-menu .set-row .btn{min-height:34px;padding:3px 12px}
.set-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-ico{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.set-ico canvas{display:block;width:24px;height:24px;image-rendering:pixelated;image-rendering:crisp-edges}
.set-state{flex:none;color:var(--ink-2);font-size:15px;white-space:nowrap}
.set-rule{border-top:2px solid var(--ink);margin:0}
/* the solid rule ends the group above it: the row before it drops its own dashed line */
.set-menu .set-row:has(+ .set-rule),.set-menu .set-row:last-child{border-bottom:0}
.set-menu .set-subnote{margin:0;padding:0 0 0 34px;font-size:12px;line-height:1.2}
.set-open{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;background:none;border:0;border-bottom:1px dashed var(--ink-2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.set-open:active{background:var(--lcd-2)}
.set-share-page{align-items:center;text-align:center;gap:10px}
.set-share-qr{display:block;background:var(--lcd);border:2px solid var(--ink);padding:4px;image-rendering:pixelated;image-rendering:crisp-edges}
.set-share-url{margin:0;font-family:var(--f-pix);font-size:17px;word-break:break-all;-webkit-user-select:text;user-select:text}
.set-share-hint{max-width:280px;text-align:center}
.set-share-btns{justify-content:center}
.set-about-page{gap:8px;font-size:15px;line-height:1.5}
.set-about-page h3{margin:4px 0 0;font-size:16px;font-weight:400}
.set-about-page p{margin:0}
.set-about-line{font-family:var(--f-pix);font-size:15px}
.set-about-small{border-top:1px dashed var(--ink-2);padding-top:8px;font-size:12px;line-height:1.4}
.set-sense{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed var(--ink-2);padding-bottom:12px;font-size:16px}
.set-sense-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.set-sense-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.set-sense-list li.none{color:var(--ink-2);font-size:14px}
.set-sense-list .btn{padding:6px 14px;min-height:44px}
.set-saves{display:flex;flex-direction:column;gap:10px}
.set-saves-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.set-saves-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-bottom:8px;border-bottom:1px dashed var(--ink-2)}
.set-saves-list li.none{display:block;color:var(--ink-2);font-size:14px;border-bottom:0}
.set-saves-list .t{min-width:0;font-size:15px;overflow-wrap:anywhere}
.set-saves-list .t small{display:block;margin-top:2px;font-size:13px;color:var(--ink-2)}
.set-saves-list .tag{margin-left:6px;font-size:12px;border:1px solid var(--ink-2);padding:0 4px;white-space:nowrap}
.set-saves-list .btn{flex:none;padding:6px 14px;min-height:44px}
.set-sense .hint{margin:0}
.set-ai{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed var(--ink-2);padding-bottom:12px}
.set-ai .set-row{border-bottom:0;padding-bottom:0}
.set-ai .hint,.set-ai-page .hint{margin:0}
.set-ai-field{display:flex;flex-direction:column;gap:4px;font-size:16px}
.set-ai-field input{min-height:44px;font-family:var(--f-lcd);font-size:16px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:4px 8px;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.set-ai-field input::placeholder{color:var(--ink-2)}
.set-ai-page .row{flex-wrap:wrap;gap:8px}
.set-ai-page .btn{min-height:44px;padding:6px 14px}
.set-backup{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed var(--ink-2);padding-bottom:12px}
.set-backup .set-row{border-bottom:0;padding-bottom:0}
.set-backup-box{display:flex;flex-direction:column;gap:8px;border:2px solid var(--ink);padding:10px;background:var(--lcd-2);font-size:15px}
.set-backup-box p{margin:0}
.set-backup-box .row{flex-wrap:wrap;gap:8px}
.set-backup-box .btn{min-height:44px;padding:6px 14px}
.vol{font-family:var(--f-pix);font-size:26px;letter-spacing:.08em;min-width:4.2ch;text-align:center}
/* film tints on the load panel */
.tints{gap:2px;flex-wrap:nowrap;justify-content:space-between}
.tint{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 3px;min-width:0;background:transparent;border:2px solid transparent;cursor:pointer;font-family:var(--f-lcd);font-size:12px;color:var(--ink)}
.tint[aria-checked="true"]{border-color:var(--ink);background:var(--lcd)}
.tint .sw4{display:flex;border:2px solid var(--ink)}
.tint .sw4 i{width:7px;height:16px;display:block}

/* chin game pad: shown only for the cartridge player and apps that ask for buttons */
.gamepad{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:2px 6px 0;touch-action:none}
.dpad{grid-row:1/3;position:relative;width:120px;height:120px;touch-action:none;cursor:pointer}
.dpad *{touch-action:none}
.dpad i,.dpad b{position:absolute;background:#141613;box-shadow:inset 0 2px 0 var(--case-hi)}
.dpad i{width:40px;height:40px}
.dpad .u{left:40px;top:0;border-radius:6px 6px 0 0}.dpad .d{left:40px;bottom:0;border-radius:0 0 6px 6px;box-shadow:0 4px 0 #0b0c0a}
.dpad .l{left:0;top:40px;border-radius:6px 0 0 6px;box-shadow:0 4px 0 #0b0c0a}.dpad .r{right:0;top:40px;border-radius:0 6px 6px 0;box-shadow:0 4px 0 #0b0c0a}
.dpad b{left:40px;top:40px;width:40px;height:40px;box-shadow:none}
.dpad i.on{background:#000;transform:translateY(2px);box-shadow:none}
.pad-mid{grid-column:2/4;grid-row:2;display:flex;justify-content:center;gap:12px;padding-top:4px}
.pill{font-family:var(--f-pix);font-size:13px;letter-spacing:.08em;color:var(--case-label);background:#141613;border:0;border-radius:999px;padding:5px 10px;box-shadow:0 2px 0 #0b0c0a;touch-action:none}
.pill.on{transform:translateY(2px);box-shadow:none;background:#000}
.pad-ab{grid-column:3;grid-row:1;display:flex;gap:10px;align-items:flex-start}
.pad-ab .pk:first-child{margin-top:24px}
.round{width:58px;height:58px;border-radius:50%;border:0;background:var(--key);color:var(--key-ink);font-family:var(--f-pix);font-size:22px;box-shadow:0 4px 0 #6e2216, inset 0 1px 0 rgba(255,255,255,.25);touch-action:none}
.round.on{transform:translateY(3px);box-shadow:0 1px 0 #6e2216}
@media (max-height:700px){.dpad{width:102px;height:102px}.dpad i,.dpad b{width:34px;height:34px}.dpad .u,.dpad .d,.dpad b{left:34px}.dpad .l,.dpad .r,.dpad b{top:34px}.round{width:50px;height:50px}}
/* cartridge player */
.cart-play{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;overflow:hidden}
/* while a cartridge runs the screen is a fixed panel, like the real thing: nothing scrolls */
#v-cart.locked{overflow:hidden;overscroll-behavior:none;touch-action:none;display:flex;flex-direction:column}
#v-cart.locked .cart-play{flex:1;min-height:0;height:auto}
@media (pointer:coarse){#cart-msg{display:none}}
#cart-cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border:3px solid var(--ink);background:var(--lcd)}
.cart-play .hint{text-align:center;max-width:360px}
#cart-tools .btn{padding:6px 8px;font-size:13px}
.store-item .acts{display:flex;flex-direction:column;gap:6px;flex:none}
/* a cartridge: play on the right, its other actions (the battery save out and in, toss) in a row under it */
.cart-item{flex-wrap:wrap}
.cart-item .cart-acts,.cart-item .cart-note{flex:1 0 100%}
.cart-item .cart-acts{align-items:stretch}
.cart-item .cart-acts .btn{flex:1 1 0;min-height:44px;padding:8px 6px}
@media (max-width:380px){.brand span{font-size:14px;letter-spacing:.06em}}
/* camera: one fixed screen; the back opens over it for rolls and menus */
.cam-view{display:flex;flex-direction:column;overflow:hidden;position:relative}
.cam-lcd{display:flex;align-items:baseline;gap:10px;padding:5px 10px;border-bottom:2px solid var(--ink);font-family:var(--f-pix);font-size:16px;white-space:nowrap;overflow:hidden;flex:none}
.cam-lcd b{font-weight:400;font-size:24px;letter-spacing:.06em}
.cam-lcd #cam-film{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cam-lcd #cam-date{border:2px solid var(--ink);padding:0 3px;line-height:1.1}
.cam-lcd #cam-date.off{color:var(--lcd-3);border-color:var(--lcd-3)}
.finder-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}
#finder{max-width:none;width:auto;flex:none}
#cam-cv{width:100%;height:100%;aspect-ratio:auto}
.finder .shut{position:absolute;inset:0;background:var(--ink)}
.cam-keys{display:flex;gap:6px;justify-content:center;padding:4px 8px 8px;flex:none}
.ck{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:5px 8px;background:transparent;border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;color:var(--ink);cursor:pointer;line-height:1.1}
.ck i{font-style:normal;font-family:var(--f-pix);font-size:12px;color:var(--ink-2);letter-spacing:.05em;line-height:1}
.ck-a{background:var(--ink);color:var(--lcd);min-width:72px}
.ck-a i{color:var(--lcd-3)}
.ck:active{transform:translateY(1px)}
.ck:disabled{border-color:var(--lcd-3);color:var(--lcd-3);background:transparent}
.ck:disabled i{color:var(--lcd-3)}
/* PAD.camera.snap: the runtime's viewfinder over a running app (apps/snap.js), the camera program's parts, one screen */
.snap{position:absolute;inset:0;z-index:7;background:var(--lcd)}
.snap .cam-lcd #snap-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#snap-finder{max-width:none;width:auto;flex:none;cursor:default}
#snap-cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.snap .ck{min-height:44px;min-width:88px;justify-content:center}
/* LP.link: the pairing screen over whatever is in front (link.js). Two little handhelds, a wave while we speak,
   the phase, the attempt and a bar to the session's 60 s pairing limit; one screen at 331 x 359 */
.link-view{position:absolute;inset:0;z-index:8;background:var(--lcd);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 12px 10px;overflow:hidden}
.link-head{width:100%;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-pix);font-size:14px;line-height:1;border-bottom:2px solid var(--ink);padding-bottom:2px;flex:none}
.link-head #link-attempt{font-family:var(--f-lcd);font-size:11px;color:var(--ink-2)}
.link-view h2{margin:0;font-size:17px;font-weight:400;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.link-pair{display:flex;align-items:center;justify-content:center;gap:12px;flex:none}
.link-phone{position:relative;display:block;width:36px;height:52px;border:2px solid var(--ink);background:var(--lcd-2);box-shadow:2px 2px 0 var(--ink-2)}
.link-phone::before{content:"";position:absolute;left:4px;right:4px;top:5px;height:24px;background:var(--lcd);border:2px solid var(--ink)}
.link-phone::after{content:"";position:absolute;left:50%;bottom:4px;width:9px;height:9px;margin-left:-4px;border:2px solid var(--ink);border-radius:50%}
.link-wave{display:flex;align-items:center;justify-content:center;gap:3px;width:32px;height:20px}
.link-wave i{display:block;width:3px;height:5px;background:var(--ink-2)}
.link-wave.tx i{animation:linkwave .55s steps(2,end) infinite}
.link-wave.tx i:nth-child(2){animation-delay:.14s}
.link-wave.tx i:nth-child(3){animation-delay:.28s}
@keyframes linkwave{0%,49%{height:5px;background:var(--ink-2)}50%,100%{height:16px;background:var(--ink)}}
.link-hint{margin:0;font-size:11px;line-height:1.25;text-align:center;color:var(--ink-2);max-width:280px;flex:none}
.link-phase{margin:0;font-family:var(--f-pix);font-size:17px;line-height:1;min-height:17px;flex:none}
.link-diag{margin:0;font-family:var(--f-lcd);font-size:11px;color:var(--ink-2);min-height:11px;flex:none}
.link-progress{width:100%;max-width:260px;height:8px;border:2px solid var(--ink);background:var(--lcd-2);flex:none}
.link-progress i{display:block;height:100%;width:0;background:var(--ink)}
.link-keys{display:flex;gap:8px;margin-top:auto;padding-bottom:0;flex:none}
.link-view .ck{min-height:44px;min-width:104px;justify-content:center}
.softkeys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:44px;flex:none}
.sk{min-width:0;height:44px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 2px;background:transparent;border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;color:var(--ink)}
.sk i{font-style:normal;font-family:var(--f-pix);font-size:11px;line-height:1;color:var(--ink-2)}
.sk span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;line-height:1.1}
.sk-a:not(:disabled){background:var(--ink);color:var(--lcd)}
.sk-a:not(:disabled) i{color:var(--lcd-3)}
.sk:disabled{border-color:var(--lcd-3);color:var(--ink-2)}
.sk:disabled span{color:var(--ink-2)}
.cam-mode{margin:0;padding:0 10px 6px;font-size:12px;color:var(--ink-2);text-align:center;flex:none}
.cam-mode:empty{display:none}
.cam-sheet{position:absolute;inset:0;z-index:2;background:var(--lcd);display:flex;flex-direction:column;padding:10px 10px 4px;gap:8px;overflow:hidden}
.sheet-title{margin:0;font-family:var(--f-pix);font-size:20px;letter-spacing:.1em;border-bottom:2px solid var(--ink);padding-bottom:4px;flex:none}
.cam-sheet .hint{text-align:center;flex:none}
.rolls{flex:1;min-height:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:calc(50% - 64px);touch-action:pan-x}
.rolls::-webkit-scrollbar{display:none}
.roll{flex:none;width:128px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;transition:transform .18s;transform:scale(.72)}
.roll.on{transform:none}
.roll canvas{width:96px;height:128px;image-rendering:pixelated;image-rendering:crisp-edges}
.roll .lab{font-family:var(--f-pix);font-size:16px;letter-spacing:.06em;text-align:center;line-height:1.15;color:var(--ink)}
.roll .lab small{display:block;font-family:var(--f-lcd);font-size:13px;letter-spacing:0}
.roll-opts{display:flex;gap:8px;justify-content:center;flex:none}
.lcd-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lcd-menu li{display:flex;gap:8px;align-items:center;padding:9px 10px;font-size:16px;cursor:pointer}
.lcd-menu li::before{content:"▶";font-size:12px;visibility:hidden}
.lcd-menu li.on{background:var(--ink);color:var(--lcd)}
.lcd-menu li.on::before{visibility:visible}
.lcd-menu li small{margin-left:auto;font-family:var(--f-pix);font-size:15px}
.menu-keys{margin-top:auto!important}
/* calendar: one fixed screen like the camera; the day, the dates and the add form open over it */
.cal-view{display:flex;flex-direction:column;overflow:hidden;position:relative}
.cal-head{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:2px solid var(--ink);flex:none}
.cal-head .ck{min-width:0;padding:6px 9px;font-family:var(--f-pix);font-size:14px}
.cal-head .btn{padding:5px 8px;font-size:14px}
.cal-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.1;white-space:nowrap;overflow:hidden}
.cal-title b{font-family:var(--f-pix);font-weight:400;font-size:24px;letter-spacing:.04em}
.cal-title span{font-size:12px;color:var(--ink-2)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);padding:3px 4px 0;font-size:12px;text-align:center;color:var(--ink-2);flex:none}
.cal-grid{flex:1;min-height:0;container-type:size;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:2px;padding:2px 4px 4px;touch-action:pan-y}
.cal-cell{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:none;border:2px solid transparent;padding:0;cursor:pointer;color:var(--ink);overflow:hidden;font-family:var(--f-lcd)}
.cal-cell b{font-family:var(--f-pix);font-weight:400;font-size:clamp(18px,4vh,26px);line-height:1}
/* the date and the lunar line fit the cell's height: the lunar line is as tall as its font's glyphs (15 px, so nothing in it
   is cut) and never shrinks, and the date gives way when a sixth of the grid (100cqh, less the gaps) is too short for both,
   which happens only near the smallest screen, 331x359. Browsers without container units keep the clamp */
.cal-cell b{font-size:min(clamp(18px,4vh,26px),calc((100cqh - 10px) / 6 - 19.5px))}
.cal-cell span{flex:none;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;max-width:100%;color:var(--ink-2)}
.cal-cell span.hi{color:var(--ink)}
.cal-cell.out,.cal-cell.out span{color:var(--lcd-3)}
.cal-cell.sel{border-color:var(--ink)}
.cal-cell.today{background:var(--ink);color:var(--lcd)}
.cal-cell.today span{color:var(--lcd)}
.cal-cell:disabled{cursor:default}
.cal-cell i{position:absolute;top:1px;right:1px;font-style:normal;font-size:10px;line-height:1;padding:1px}
.cal-cell i.off{background:var(--ink);color:var(--lcd)}
.cal-cell i.work{border:1px solid currentColor;padding:0}
.cal-cell.today i.off{background:var(--lcd);color:var(--ink)}
.cal-cell u{position:absolute;left:2px;top:2px;width:5px;height:5px;background:currentColor}
/* a diary on that day: a folded page corner, a 6 px staircase in 2 px steps at the bottom right, clear of the anniversary
   square (top left), the 休/班 badge (top right) and the lunar line, which already fills the cell at 331x359. Drawn as the
   cell's own backgrounds, so the cell's overflow:hidden (it clips the text) does not cut it, and the cell itself is never
   clipped. In the text colour: ink, paper on today's ink, mid outside the month. Placed from the border box; on the selected
   day from the padding box, 2 px in, so it sits inside the selection frame and the frame stays whole */
.cal-cell.dy{background-repeat:no-repeat;background-origin:border-box;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:2px 6px,2px 4px,2px 2px;background-position:right 0 bottom 0,right 2px bottom 0,right 4px bottom 0}
.cal-cell.dy.sel{background-origin:padding-box}
.cal-info{flex:none;background:none;border:0;border-top:2px solid var(--ink);padding:6px 8px;font-family:var(--f-lcd);font-size:13px;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-sheet{position:absolute;inset:0;z-index:2;background:var(--lcd);display:flex;flex-direction:column;padding:10px 10px 4px;gap:8px;overflow:hidden}
.cal-lines{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.cal-lines p{margin:0;font-size:15px;line-height:1.4}
.cal-lines .cal-big{font-size:20px}
.cal-date{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:6px 8px}
.cal-date b{font-weight:400;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-date small{flex:1;font-size:12px;color:var(--ink-2)}
.cal-date .btn{padding:5px 8px;font-size:13px;flex:none}
.cal-diary{border-top:2px solid var(--ink);gap:0;margin-top:2px}
.lcd-menu.cal-diary li{min-height:44px;padding:4px 10px;font-size:14px}
.cal-diary li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcd-menu.cal-diary li.label{min-height:0;padding:4px 10px 0;font-size:13px;color:var(--ink-2);cursor:default}
.cal-diary li::before{display:none}
.cal-list{flex:1;min-height:0;overflow:auto}
.cal-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-empty{text-align:center;padding:16px 8px}
.cal-name{font-family:var(--f-lcd);font-size:16px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);padding:8px;width:100%}
.cal-name::placeholder{color:var(--ink-2)}
.cal-kind .btn{flex:1;padding:8px}
.cal-step{display:flex;align-items:center;gap:8px;font-size:15px}
.cal-step > span{min-width:3em}
.cal-step b{font-weight:400;min-width:4.5em;text-align:center;font-size:17px}
.cal-step .btn{padding:4px 12px;font-size:16px}
.cal-step small{flex:1}
/* dictionary: the word box and candidates; an entry, the word book and the book list open over it */
.dict-view{display:flex;flex-direction:column;overflow:hidden;position:relative}
.dict-head{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:2px solid var(--ink);flex:none}
.dict-head input{flex:1;min-width:0;font-family:var(--f-lcd);font-size:17px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:6px 8px;-webkit-appearance:none;appearance:none}
.dict-head input::placeholder{color:var(--ink-2)}
.dict-head input::-webkit-search-cancel-button{display:none}
.dict-history{flex:none;margin:0;padding:5px 10px 2px;border-bottom:1px solid var(--lcd-3);font-size:13px;line-height:1.2;color:var(--ink-2)}
.dict-list{flex:1;min-height:0;overflow:auto;padding:2px 0}
.dict-list li{padding:7px 10px}
.dict-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-list li.label{cursor:default;font-size:13px;color:var(--ink-2);padding:6px 10px 2px}
.dict-list li.label::before{display:none}
.dict-list li.dict-alloff{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-note{flex:none;padding:4px 8px 6px;border-top:2px solid var(--ink);text-align:center}
.dict-note:empty{display:none}
.dict-sheet{position:absolute;inset:0;z-index:2;background:var(--lcd);display:flex;flex-direction:column;padding:8px 10px 4px;gap:6px;overflow:hidden}
.dict-sheet .sheet-title{display:flex;gap:8px;align-items:baseline;letter-spacing:.04em;overflow:hidden}
.dict-sheet .sheet-title span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-sheet .sheet-title small{font-size:16px;color:var(--ink-2);flex:none}
.dict-page{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;font-size:16px;line-height:24px;white-space:pre-wrap;word-break:break-word}
.dict-page b{display:inline-block;font-weight:400;font-size:13px;line-height:18px;background:var(--ink);color:var(--lcd);padding:0 6px;margin:3px 0}
.dict-page .dl{min-height:24px}
.dict-page mark{background:var(--ink);color:var(--lcd)}
.dict-page .big{display:block;text-align:center;font-family:var(--f-pix);font-size:40px;line-height:48px;margin-top:24px}
.dict-sheet .lcd-menu{flex:1;min-height:0;overflow:auto}
.dict-sheet .lcd-menu li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dict-sheet .lcd-menu li .dict-book-state{margin-left:0}
.dict-sheet .lcd-menu li.disabled{color:var(--ink-2)}

/* reader: the shelf; a book is whole pages laid out in CSS columns and moved sideways, never scrolled */
.rd{display:flex;flex-direction:column;overflow:hidden}
.rd-shelf{flex:1;min-height:0;display:flex;flex-direction:column}
.rd-shelf .bar h2{flex:1}
.rd-shelf .bar .btn{padding:6px 10px;font-size:14px}
.rd-list{flex:1;min-height:0;overflow:auto;padding:2px 0}
.rd-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-list li.label{cursor:default;font-size:14px;line-height:1.6;color:var(--ink-2)}
.rd-list li.label::before{display:none}
.rd-note{flex:none;padding:4px 8px 6px;border-top:2px solid var(--ink);text-align:center}
.rd-note:empty{display:none}
.rd-book{flex:1;min-height:0;display:flex;flex-direction:column}
.rd-page{flex:1;min-height:0;position:relative;overflow:hidden;padding:12px 16px 0;touch-action:none}
/* the system font for long reading; CJK justified with a two-character indent */
.rd-flow{column-fill:auto;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  color:var(--ink);text-align:justify;white-space:pre-line;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.rd-flow p{margin:0;text-indent:2em}
.rd-flow[lang=en] p{text-indent:1.5em}
.rd-flow .h{margin:0 0 .5em;text-indent:0;text-align:center;font-weight:700;break-after:avoid}
.rd-flow em{font-style:italic}
.rd-flow[lang=zh] em{font-style:normal;font-weight:700}
.rd-flow mark{background:var(--ink);color:var(--lcd)}
.rd-foot{flex:none;height:30px;display:flex;gap:6px;align-items:center;padding:0 12px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.rd-foot span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rd-foot b{font-weight:400;font-family:var(--f-pix);font-size:17px}
.rd-keyrow{display:flex;align-items:center;gap:4px;flex:none}
.rd-keyrow>div{flex:1;min-width:0}
.rd-sheet .lcd-menu li small{font-family:var(--f-lcd);font-size:14px}
.rd-toc li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-jump{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.rd-jump b{font-family:var(--f-pix);font-size:56px;font-weight:400;line-height:1}
.rd-def{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;background:var(--lcd);border-top:3px solid var(--ink);display:flex;flex-direction:column;padding:6px 10px 2px;gap:4px;overflow:hidden}
.rd-def .sheet-title{display:flex;gap:8px;align-items:baseline;letter-spacing:.04em;overflow:hidden}
.rd-def .sheet-title span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-def .sheet-title small{font-size:16px;color:var(--ink-2);flex:none}
.rd-def textarea{flex:1;min-height:0}
.rd-def .hint{color:var(--ink)}
.rd-book{position:relative}
/* START's menu over a selection (textsel.js), in the reader and on a dictionary entry: the selection stays in view above it */
.sel-menu{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--lcd);border-top:3px solid var(--ink);display:flex;flex-direction:column;gap:4px;padding:6px 10px 4px}
.sel-menu .lcd-menu li{min-height:44px;box-sizing:border-box}
.rd-flow p.img{text-indent:0;text-align:center;margin:.4em 0;break-inside:avoid;line-height:0}
.rd-flow p.img img{display:inline-block;image-rendering:pixelated;image-rendering:crisp-edges}
.rd-flow p.img.bad{line-height:inherit;color:var(--ink-2)}
.rd-flow a.ln{color:inherit;text-decoration:none;border-bottom:2px solid var(--ink)}
.rd-flow u.hl{text-decoration:underline dotted var(--ink);text-decoration-thickness:2px;text-underline-offset:.2em}
.rd-notes li{align-items:flex-start}
.rd-notes li>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rd-notes li>span span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.rd-notes li>span small{margin:0;font-family:var(--f-lcd);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-track{flex:none;display:flex;flex-direction:column;gap:4px;padding:2px 4px}
.rd-bar{height:22px;border:2px solid var(--ink);position:relative;touch-action:none;cursor:pointer}
.rd-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.rd-track .hint{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-help{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:var(--lcd);cursor:pointer}
.rd-zones{flex:1;display:flex}
.rd-zones span{flex:3;display:flex;align-items:center;justify-content:center;border:2px dashed var(--ink);margin:6px 3px;font-size:15px;text-align:center}
.rd-zones span:nth-child(2){flex:4}
.rd-card{flex:none;border-top:3px solid var(--ink);padding:8px 12px 10px;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.45}
.rd-card p{margin:0}
.rd-card .hint{text-align:center}
.rd.eink .rd-flow p.img.bad{color:var(--ink)}
/* e-ink: no motion, and only the two tones furthest apart (ink on paper) */
.screen.rd-eink{box-shadow:none}
.screen.rd-eink::after{display:none}
.rd.eink .hint,.rd.eink .rd-foot,.rd.eink .ck i,.rd.eink li:not(.on) small,.rd.eink .sheet-title small,.rd.eink .rd-list li.label{color:var(--ink)}
.rd.eink .btn{box-shadow:none}
.rd.eink .btn:disabled{background:transparent;color:var(--ink);border:2px dashed var(--ink)}
.rd.eink *{transition:none!important;animation:none!important}
/* the e-ink full refresh (reader.js), as a real panel does it: the old page in negative, then blank paper, then the new
   page. Negative swaps ink and paper for everything on the screen; the panel's outer rim is not part of the display and
   stays paper, so the screen never runs into the bezel. #rd-flash only catches touches, and is the blank paper. */
.rd-flash{position:absolute;inset:0;z-index:20;pointer-events:auto}
.rd-flash[hidden]{display:none}
.rd-flash.paper{background:var(--lcd)}
.screen.rd-neg{color:var(--ink);--lcd:#1f2a14;--lcd-2:#1f2a14;--lcd-3:#1f2a14;--ink:#a3ad7e;--ink-2:#a3ad7e}
.screen.rd-neg::after{display:block;z-index:21;background:none;box-shadow:inset 0 0 0 4px #a3ad7e;border-radius:2px}
/* calendar: go to a date */
#cal-ym{cursor:pointer}
.cal-digits{display:flex;align-items:baseline;justify-content:center;gap:2px;flex:none;font-family:var(--f-pix)}
.cal-digits button{width:28px;height:40px;padding:0;border:2px solid var(--ink);background:none;color:var(--ink);font-family:var(--f-pix);font-size:28px;line-height:1;cursor:pointer}
.cal-digits button.on{background:var(--ink);color:var(--lcd)}
.cal-digits span{font-family:var(--f-lcd);font-size:15px;padding:0 4px 0 2px}
.cal-preview{margin:0;flex:none;text-align:center;font-size:14px;min-height:1.4em}
.cal-preview.err{color:var(--ink-2)}
.cal-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:none;width:100%;max-width:300px;align-self:center}
.cal-numpad .btn{padding:7px 0;font-family:var(--f-pix);font-size:20px}
.cal-kind .cal-leap{flex:none;padding:8px 10px}
@media (max-height:700px){.cal-numpad{gap:4px}.cal-numpad .btn{padding:4px 0;font-size:18px}.cal-digits button{height:34px;font-size:24px}}

/* ---------- darkroom: the film box (apps/darkroom.js) ---------- */
.dk{display:flex;flex-direction:column;overflow:hidden}
.dk-list{flex:1;min-height:0;overflow:auto;padding:2px 0}
.dk-list li{min-height:52px;padding:6px 10px}
.dk-list li>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-list li b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-list li>span small{margin:0;font-family:var(--f-lcd);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-list li em{font-style:normal;font-size:13px;flex:none}
.dk-list li.label{cursor:default;font-size:15px;line-height:1.6;color:var(--ink);align-items:flex-start;white-space:normal;overflow:visible}
.dk-list li.label::before{display:none}
.dk-status{flex:none;margin:0;padding:4px 8px;text-align:center}
.dk-status:empty{display:none}
.dk-sheet{inset:0 0 44px 0}
.dk-sheet .dk-note{font-size:14px;line-height:1.6;color:var(--ink)}
.dk-sheet .lcd-menu{flex:none}
.dk-sheet .lcd-menu li{min-height:44px;box-sizing:border-box}
.dk-sheet .lcd-menu li small{font-family:var(--f-lcd);font-size:14px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the overlays stop above #dk-keys: the key row is one strip at the bottom of every darkroom screen */
.dk-full{position:absolute;inset:0 0 44px 0;z-index:2;background:var(--lcd);display:flex;flex-direction:column}
.dk-full[hidden]{display:none}
.dk-dev{align-items:center;justify-content:center;gap:10px;padding:10px}
.dk-dev canvas{width:min(100%,384px);height:auto;aspect-ratio:8/7;image-rendering:pixelated;border:3px solid var(--ink)}
.dk-dev-step{margin:0;font-family:var(--f-pix);font-size:20px;letter-spacing:.06em}
.dk-vhead span{flex:none;font-family:var(--f-pix);font-size:16px;color:var(--ink)}
.dk-vhead h2{font-family:var(--f-pix);font-size:18px}
/* the print fills the same box as the film box's rows: no side padding, so every screen starts and ends at the same x */
.dk-photo{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:10px 0;box-sizing:border-box;overflow:hidden;touch-action:none}
/* the print on the glass and its neighbours: the middle card holds exactly the box the canvas used to sit in */
.dk-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px 0;box-sizing:border-box;will-change:transform}
/* the print on the glass: colour, on purpose (decisions.md section 19); its white border is the photo paper */
.dk-photo canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;box-sizing:border-box;border:5px solid #f1ece1;box-shadow:0 3px 0 var(--ink)}
.dk-wait{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:2px 10px;background:var(--ink);color:var(--lcd);font-size:15px;white-space:nowrap}
.dk-wait[hidden]{display:none}
.dk-name{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.dk-name input{font-family:var(--f-lcd);font-size:16px;padding:10px;border:2px solid var(--ink);background:var(--lcd);color:var(--ink);border-radius:0;min-height:44px;box-sizing:border-box;width:100%}
.dk-name input::placeholder{color:var(--ink-2)}
.dk-name .row{display:flex;gap:10px}
.dk-name .row .btn{flex:1;min-height:44px}

/* local scripts: a small library, a code editor, and the AI round trip */
.scripts-view{display:flex;flex-direction:column;overflow:hidden}
.scripts-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:8px;display:flex;flex-direction:column;gap:10px}
.scripts-card{border:3px solid var(--ink);background:var(--lcd-2);padding:10px;display:flex;flex-direction:column;gap:8px}
.scripts-card b{font-size:17px;font-weight:400}
.scripts-card .hint{line-height:1.35}
.scripts-card .btn{min-height:44px}
/* the idea page: one long prompt, its own screen, and a clear button that asks twice */
.idea-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px;overflow:hidden}
.idea-main .hint{flex:none}
#scripts-idea{flex:1;min-height:0;width:100%;font-family:var(--f-lcd);font-size:16px;line-height:1.45;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:10px;resize:none;-webkit-appearance:none;appearance:none}
#scripts-idea::placeholder{color:var(--ink-2)}
#scripts-idea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.idea-actions{flex:none;display:flex;gap:8px;padding:6px 8px;border-top:2px solid var(--ink)}
.idea-actions .btn{flex:1;min-height:44px}
#idea-status{min-height:18px;line-height:1.3}
#idea-clear:disabled{color:var(--mid);border-color:var(--mid);background:transparent;box-shadow:none;cursor:default}
#idea-ask{bottom:58px}
#idea-ask p{margin:0 0 2px;font-size:15px;line-height:1.35}
.scripts-list{gap:0}
.scripts-list li{display:block;padding:0}
.scripts-list li::before{display:none}
.scripts-list button{width:100%;min-height:52px;text-align:left;background:none;border:0;border-bottom:1px dashed var(--ink-2);padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;color:inherit;font:inherit}
.scripts-list .t{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scripts-list .d{font-size:13px;max-width:100%;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scripts-empty{padding:10px 4px;text-align:center;line-height:1.4}
.scripts-count{margin:6px 10px -4px;font-size:15px;font-weight:normal;color:var(--ink-2)}
#v-script-edit .editor{position:relative}
#script-name{flex:1;min-width:0;min-height:44px;font-family:var(--f-lcd);font-size:16px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:4px 8px}
#script-code{flex:1;min-height:0;width:100%;font-family:var(--f-lcd);font-size:14px;line-height:1.45;color:var(--ink);background:transparent;border:0;border-radius:0;padding:10px;resize:none}
#script-code:focus-visible{outline:none}
.script-actions{flex:none;display:flex;gap:8px;padding:6px 8px;border-top:2px solid var(--ink)}
.script-actions .btn{flex:1;min-height:44px}
#script-hint{flex:none;padding:0 10px 6px;min-height:18px;line-height:1.3;white-space:pre-line}
.script-menu{position:absolute;left:8px;right:8px;bottom:58px;z-index:2;background:var(--lcd-2);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink-2);padding:8px;display:flex;flex-direction:column;gap:6px}
.script-menu .btn{min-height:44px}
#script-ask p{margin:0 0 2px;font-size:15px;line-height:1.35}
#scripts-prompt-box{width:100%;height:120px;font-family:var(--f-lcd);font-size:13px;line-height:1.35;color:var(--ink);background:var(--lcd);border:2px solid var(--ink);padding:6px;resize:none}
#data-ask{bottom:10px}
#data-ask p{margin:0 0 2px;font-size:15px;line-height:1.35}
#data-clear-all:disabled{color:var(--mid);border-color:var(--mid);background:transparent;box-shadow:none;cursor:default}
#run-err-msg{white-space:pre-wrap}

/* pet (runtime/apps/pet.js): one hardware screen, the room at 4 px a room pixel, eight 44 px icons, soft keys */
.pet-view{display:flex;flex-direction:column;overflow:hidden;padding:0}
/* the room keeps 4 CSS px a room pixel and is centred in whatever height is left above the icons: the spare height is paper,
   and the soft keys sit on the very bottom of the LCD like the calendar's and the dictionary's */
.pet-stage{flex:1;min-height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--lcd)}
.pet-room{position:relative;flex:none;width:324px;height:240px;overflow:hidden}
.pet-cv{display:block;width:324px;height:240px;image-rendering:pixelated;image-rendering:crisp-edges}
.pet-panel{position:absolute;inset:0;background:var(--lcd);color:var(--ink);padding:8px 10px;display:flex;flex-direction:column;gap:4px;overflow:hidden;font-size:14px;line-height:1.35}
.pet-panel p{margin:0}
.pet-ptitle{font-size:15px;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:3px}
.pet-pinfo{font-size:14px;color:var(--ink-2)}
.pet-phint{font-size:13px;color:var(--ink-2);margin-top:auto}
.pet-pempty{padding:20px 0;text-align:center;color:var(--ink-2)}
.pet-choice{width:100%;min-height:44px;margin:2px 0;padding:6px 10px;text-align:left;font-size:15px;color:var(--ink);background:transparent;border:2px solid var(--ink);cursor:pointer}
.pet-choice.on{background:var(--ink);color:var(--lcd)}
.pet-leftright{display:flex;gap:8px}
.pet-leftright .pet-choice{flex:1;text-align:center;margin:0}
.pet-presult{margin:2px 0;font-size:15px}
.pet-prow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;border-bottom:1px dashed var(--ink-2)}
.pet-prow b{font-weight:400;font-family:var(--f-pix);font-size:16px}
.pet-boxes{display:inline-flex;align-items:center;gap:2px}
.pet-box{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);background:transparent}
.pet-box.on{background:var(--ink)}
.pet-confirm{display:flex;gap:6px;margin-top:2px;min-height:0}
.pet-confirm:empty{display:none}
.pet-confirm .btn{min-height:44px;padding:6px 10px;font-size:14px}
.pet-souv{display:flex;align-items:flex-start;gap:10px;padding:4px 0;border-bottom:1px dashed var(--ink-2)}
.pet-souvcv{flex:none;width:48px;height:48px;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--ink)}
.pet-souvtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pet-souvname{font-weight:600;font-size:15px}
.pet-souvline{font-size:14px;line-height:1.35;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pet-souvdate{font-family:var(--f-pix);font-size:14px;color:var(--ink-2)}
.pet-souvfrom{font-family:var(--f-pix);font-size:14px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.pet-souvtag{margin:2px 0 0;font-size:13px;color:var(--ink);border:1px solid var(--ink);padding:0 4px;align-self:flex-start}
.pet-souvfoot{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--ink-2)}
/* the box index: 5 x 5 pictures a page, newest first; the selected tile gets an outer frame */
.pet-souv-grid{display:grid;grid-template-columns:repeat(5,32px);grid-auto-rows:32px;gap:4px;justify-content:center;align-content:center;padding:2px 0}
.pet-tile{width:32px;height:32px;padding:0;background:transparent;border:0;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pet-tile canvas{width:32px;height:32px;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--ink);box-sizing:border-box;display:block}
.pet-tile.on{box-shadow:0 0 0 2px var(--ink)}
.pet-tile-mark{position:absolute;right:4px;bottom:4px;width:4px;height:4px;background:var(--ink);pointer-events:none}
.pet-ask{margin-top:4px}
.pet-askq{margin:0 0 2px;font-size:14px}
.pet-askrow{display:flex;gap:6px}
.pet-askrow .btn{min-height:44px;flex:1;padding:6px 8px;font-size:14px}
.pet-nameinput{width:100%;min-width:0;min-height:44px;box-sizing:border-box;font-family:var(--f-lcd);font-size:17px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:6px 8px;-webkit-appearance:none;appearance:none}
.pet-nameinput::placeholder{color:var(--ink-2)}
.pet-name-actions{display:flex;gap:6px;margin-top:2px}
.pet-name-actions .btn{min-height:44px;flex:1;padding:6px 8px;font-size:14px}
.pet-pname{margin:0;font-family:var(--f-lcd);font-size:17px;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:3px}
.pet-wordbig{margin:8px 0 0;font-family:var(--f-pix);font-size:40px;line-height:1.1;overflow-wrap:anywhere}
.pet-meaning{margin:2px 0 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}
.pet-eggline{flex:none;display:flex;align-items:center;justify-content:center;height:44px;margin:0;padding:0 10px;text-align:center;font-size:14px;line-height:1.3;color:var(--ink-2)}
.pet-eggline[hidden]{display:none}
.pet-icons{flex:none;display:flex;justify-content:space-around;align-items:center;height:44px;overflow:hidden}
.pet-icons[hidden]{display:none}
.pet-keys[hidden]{display:none}
.pet-ikey{flex:none;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;position:relative}
.pet-ikey.on{box-shadow:inset 0 0 0 2px var(--ink)}
.pet-icv{display:block;width:24px;height:24px;image-rendering:pixelated;image-rendering:crisp-edges}
.pet-keys{flex:none;padding:0;height:44px}
.pet-menu{width:100%;min-height:44px;margin:0;padding:6px 10px;display:flex;align-items:center;gap:8px;text-align:left;font-family:var(--f-lcd);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px dashed var(--ink-2);cursor:pointer}
.pet-menu.on{background:var(--ink);color:var(--lcd)}
.pet-menu.dim,.pet-menu:disabled{color:var(--ink-2);cursor:default}
.pet-menu.on .pet-dot{background:var(--lcd)}
.pet-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.pet-away{position:absolute;left:0;right:0;bottom:4px;padding:2px 4px;text-align:center;font-size:14px;line-height:1.25;color:var(--ink);background:var(--lcd);border-top:1px solid var(--ink-2)}
/* a play pack's start card and its result: one centred four-tone card, a double ink frame, no scrolling */
.pet-panel.pet-gcard{align-items:center;justify-content:center;text-align:center;padding:10px;gap:0}
.pet-gbox{display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid var(--ink);padding:10px 16px;min-width:200px;max-width:290px;box-sizing:border-box;background:var(--lcd);box-shadow:0 0 0 2px var(--lcd),0 0 0 4px var(--ink)}
.pet-gname{margin:0;font-family:var(--f-lcd);font-size:19px;font-weight:600;line-height:1.1}
.pet-ghow{margin:0;font-size:13px;line-height:1.3;color:var(--ink-2)}
.pet-gface{display:block;width:56px;height:56px;image-rendering:pixelated;image-rendering:crisp-edges}
.pet-gscorelabel{margin:0;font-size:11px;letter-spacing:2px;color:var(--ink-2)}
.pet-gscore{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.pet-gcomment{margin:0;font-family:var(--f-lcd);font-size:15px;line-height:1.2}
.pet-ganykey{margin:2px 0 0;font-size:11px;line-height:1.2;color:var(--ink-2)}
/* ---------- studio: the four-track tape machine's rhythm screen (apps/studio.js) ---------- */
.studio{display:flex;flex-direction:column;overflow:hidden;background:var(--lcd)}
.st-bar{flex:none;display:flex;align-items:center;gap:4px;padding:4px 6px;border-bottom:2px solid var(--ink)}
.st-tempo{flex:none;display:flex;align-items:center;gap:4px}
.st-play{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--ink);color:var(--lcd);border:2px solid var(--ink);font-family:var(--f-pix);font-size:22px;line-height:1;cursor:pointer}
#studio-play-glyph{display:block;width:0;height:0;margin-left:3px;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.st-play[data-playing="true"] #studio-play-glyph{width:13px;height:13px;margin-left:0;border:0;background:currentColor}
.st-play[data-playing="true"]{background:var(--lcd);color:var(--ink)}
.st-bpm{flex:none;min-width:52px;text-align:center;font-family:var(--f-pix);font-size:18px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-step,.st-mini{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:24px;line-height:1;cursor:pointer}
.st-mini{font-size:20px}
.st-step:active,.st-mini:active{background:var(--ink);color:var(--lcd)}
/* 12.24: REC is a filled paper circle in CSS, inverted while recording; the count-in blinks the dot on each beat */
.st-rec .st-rec-dot{display:block;width:14px;height:14px;border-radius:50%;background:currentColor}
/* held to clear (12.24.1): no iOS callout or text selection on the long press */
.st-rec{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.st-rec.on{background:var(--ink);color:var(--lcd)}
.st-rec.count .st-rec-dot{opacity:0.15}
.st-rec.count.lit .st-rec-dot{opacity:1}
.st-rec:disabled{color:var(--ink-2);border-color:var(--ink-2);cursor:default}
.st-gap{flex:1;min-width:0}
.st-tabs{flex:none;display:flex;gap:4px;padding:4px 6px;border-bottom:2px solid var(--ink)}
.st-tab{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;white-space:nowrap;overflow:hidden}
.st-tab.on{background:var(--ink);color:var(--lcd)}
.st-tab-name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.st-dot{display:block;width:5px;height:5px;border-radius:50%;background:transparent}
.st-dot.on{background:var(--ink)}
.st-tab.on .st-dot.on{background:var(--lcd)}
.st-board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px 8px}
.st-grid{display:grid;gap:4px;touch-action:manipulation}
.st-cell{display:block;min-width:0;min-height:0;margin:0;padding:0;background:var(--lcd);border:2px solid var(--ink);border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.st-cell.beat{border-width:3px}
.st-cell.on{background:var(--ink)}
/* the step being heard: mid tone on an empty step, dark on a lit one, so the moving light never reads as a note */
.st-cell.playing{background:var(--lcd-3)}
.st-cell.on.playing{background:var(--ink-2)}
.st-cell.focus,.st-cell:focus-visible{outline:2px dashed var(--ink);outline-offset:1px}
.st-sheet{z-index:3}
.st-sheet .lcd-menu{flex:none}
.st-sheet .lcd-menu li{min-height:44px;box-sizing:border-box}
.st-sheet .lcd-menu li.disabled{color:var(--ink-2);cursor:default}
.st-ask{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.4}
.st-ask p{margin:0}
.st-ask .row{gap:10px}
.st-ask .btn{flex:1;min-height:44px}
/* the tour: an ink frame on the target and a speech bubble above or below it; nothing is covered, so
   the whole screen keeps working (docs/design/studio.md 11.6) */
.st-tour-hi{position:relative;z-index:44;outline:3px solid var(--ink);outline-offset:3px}
.st-tour{position:absolute;inset:0;z-index:40;pointer-events:none}
.st-tour-box{position:absolute;z-index:48;width:max-content;max-width:calc(100% - 8px);background:var(--lcd);color:var(--ink);border:3px solid var(--ink);padding:6px 8px;display:flex;flex-direction:column;gap:6px;pointer-events:auto;font-size:15px;line-height:1.3}
.st-tour-box::before{content:"";position:absolute;width:0;height:0;border:8px solid transparent}
.st-tour-above::before{bottom:-19px;left:calc(var(--st-tour-tip,50%) - 8px);border-top-color:var(--ink)}
.st-tour-below::before{top:-19px;left:calc(var(--st-tour-tip,50%) - 8px);border-bottom-color:var(--ink)}
.st-tour-text{margin:0}
.st-tour-btns{display:flex;gap:6px}
.st-tour-btns button{flex:1;min-height:44px;padding:4px 8px;border:2px solid var(--ink);font-family:var(--f-lcd);font-size:15px;line-height:1.1;cursor:pointer}
.st-tour-skip{background:transparent;color:var(--ink)}
.st-tour-next{background:var(--ink);color:var(--lcd)}
/* 331x359: a 15 px bubble is taller than the gap above a target; the smaller voice keeps the same
   words and 44 px buttons inside the view */
.studio.st-short .st-tour-box{font-size:12px;line-height:1.25;padding:2px 4px;gap:2px}
.studio.st-short .st-tour-btns button{font-size:12px;padding:2px 4px}
/* the bubble sits above the screen, so the hush toast has to rise above it */
.st-tour-on #toast{z-index:60}
/* a sheet owns the screen while it is open: the bubble and the target's frame step aside, then come back */
.studio.st-sheet-open .st-tour-box{display:none}
.studio.st-sheet-open .st-tour-hi{position:static;z-index:auto;outline:none}

/* the screens (docs/design/studio.md 12.2): the pattern letter, then six tabs; a tab's dot says that track has notes */
.st-nav{flex:none;display:flex;align-items:stretch;gap:4px;padding:4px;border-bottom:2px solid var(--ink)}
.st-pat{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--lcd);color:var(--ink);border:4px solid var(--ink);font-family:var(--f-pix);font-size:24px;line-height:1;cursor:pointer}
/* a queued pattern blinks for two beats at the current tempo; the duration comes from the player, inline */
.st-pat.queued{animation-name:st-queue;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes st-queue{0%,49%{background:var(--ink);color:var(--lcd)}50%,100%{background:var(--lcd);color:var(--ink)}}
.st-screens{flex:1;min-width:0;display:flex;gap:2px}
.st-scr{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:1px 0;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:13px;line-height:1.1;cursor:pointer;white-space:nowrap;overflow:hidden}
.st-scr.on{background:var(--ink);color:var(--lcd)}
.st-scr-name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.st-scr .st-dot{width:4px;height:4px}
.st-scr.on .st-dot.on{background:var(--lcd)}
/* a note cell writes its pitch in paper on ink; the selected cell has a thick inner frame */
.st-cell.has-note{display:flex;align-items:center;justify-content:center;color:var(--lcd);font-family:var(--f-pix);font-size:18px;line-height:1}
.st-cell.sel{box-shadow:inset 0 0 0 5px var(--lcd)}
/* a rest: paper with a heavy frame and an en dash, not a filled note (12.12); the selection's inner frame is ink */
.st-cell.rest{display:flex;align-items:center;justify-content:center;background:var(--lcd);color:var(--ink);border-width:4px;font-family:var(--f-pix);font-size:20px;line-height:1}
.st-cell.rest.sel{box-shadow:inset 0 0 0 5px var(--ink)}
.st-cell.rest.playing{background:var(--lcd-3)}
/* the eight pitch keys, two rows of four, the higher octave underlined; the rest key fills the fifth column */
.st-keys-wrap{flex:none;padding:0 8px 6px}
.st-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 44px;grid-auto-rows:44px;gap:4px}
.st-rest-key{grid-column:5;grid-row:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;overflow:hidden}
.st-rest-key:active{background:var(--ink);color:var(--lcd)}
/* 12.23: the octave window under the rest key: 低 / 中 / 高 */
.st-oct-key{grid-column:5;grid-row:2;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer}
.st-oct-key:active{background:var(--ink);color:var(--lcd)}
/* 331x359: take the padding out of the bars and the keys, and 2 px from the grid gaps, so four cells still
   measure at least 40 px after the remaining scale. The buttons themselves stay 44 px. */
.studio.st-short .st-bar,.studio.st-short .st-nav,.studio.st-short .st-tabs{padding-top:0;padding-bottom:0}
.studio.st-short .st-board{padding:2px 4px;overflow:hidden}
.studio.st-short .st-keys-wrap{padding-bottom:0}
.studio.st-short .st-keys{gap:2px}
.st-key{position:relative;min-height:44px;min-width:0;display:flex;align-items:center;justify-content:center;padding:0;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:18px;line-height:1;cursor:pointer}
.st-key.on{background:var(--ink);color:var(--lcd)}
.st-key-line{position:absolute;left:32%;right:32%;bottom:5px;height:2px;background:currentColor;display:none}
.st-key.oct .st-key-line{display:block}
/* deep mode (12.20.5): a sixth column, the acc key above the Play key; the four pitch columns keep their 44 px floor */
.st-keys.deep{grid-template-columns:repeat(4,minmax(0,1fr)) 44px 44px}
.st-key-acc{grid-column:6;grid-row:1;font-family:var(--f-pix);font-size:20px}
.st-key-play{grid-column:6;grid-row:2;padding:0 1px;font-family:var(--f-lcd);font-size:13px}
.st-key:disabled{color:var(--ink-2);border-color:var(--ink-2);cursor:default}
/* the chord screen: two big cells, then six keys */
.st-chord-board{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;padding:6px 8px}
.st-chord-cells{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.st-chord-cell{min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;background:var(--lcd);color:var(--ink);border:3px solid var(--ink);font-family:var(--f-lcd);cursor:pointer;overflow:hidden}
.st-chord-cell .st-roman{font-family:var(--f-pix);font-size:26px;line-height:1}
.st-chord-cell .st-name{font-size:13px;line-height:1.2;color:var(--ink-2)}
.st-chord-cell.has-chord .st-name{color:var(--ink)}
.st-chord-cell.sel{box-shadow:inset 0 0 0 5px var(--ink)}
.st-chord-cell.focus,.st-chain-cell.focus{outline:2px dashed var(--ink);outline-offset:1px}
.st-chord-cell.playing{background:var(--lcd-3)}
.st-chord-cell.has-chord.playing{background:var(--ink-2);color:var(--lcd)}
.st-chord-cell.has-chord.playing .st-name{color:var(--lcd)}
.st-chord-cell.has-chord.playing.sel{box-shadow:inset 0 0 0 5px var(--lcd)}
/* a rest on the chord screen: the same paper-and-heavy-frame dash (12.12) */
.st-chord-cell.rest{background:var(--lcd);color:var(--ink);border-width:4px}
.st-chord-cell.rest .st-roman{font-size:26px}
.st-chord-cell.rest.sel{box-shadow:inset 0 0 0 5px var(--ink)}
.st-chord-cell.rest.playing{background:var(--lcd-3)}
.st-chord-keys{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;grid-auto-rows:44px;gap:4px}
.st-chord-keys .st-rest-key{grid-column:4;grid-row:1/span 2}
/* deep mode (12.20.5): the root's acc above the type key in a fifth column */
.st-chord-keys.deep{grid-template-columns:repeat(3,minmax(0,1fr)) 44px 44px}
.st-chord-acc{grid-column:5;grid-row:1;font-family:var(--f-pix);font-size:18px}
.st-chord-type{grid-column:5;grid-row:2;padding:0 1px;font-size:13px}
.st-chord-key:disabled{color:var(--ink-2);border-color:var(--ink-2);cursor:default}
/* the deep sheets: three 44 px choices to a row; the quality sheet is 18 buttons, six rows, so it fits 331x359 */
.st-deep-row{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.st-deep-btn{min-width:0;min-height:44px;padding:2px 4px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-deep-btn.on{background:var(--ink);color:var(--lcd)}
.st-q-grid{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:44px;gap:4px}
.st-q-btn{min-width:0;min-height:44px;padding:2px 4px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-q-btn.on{background:var(--ink);color:var(--lcd)}
.st-chord-key{min-height:44px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 2px;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);line-height:1.1;cursor:pointer;overflow:hidden}
.st-chord-key b{font-family:var(--f-pix);font-weight:400;font-size:18px;line-height:1}
.st-chord-key small{font-size:11px;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-chord-key.on{background:var(--ink);color:var(--lcd)}
.st-chord-key.on small{color:var(--lcd)}
/* the song screen: one row is a four-bar phrase; only the chain scrolls, and only when it outgrows its box */
.st-song{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;padding:4px 6px 6px}
.st-song-info{flex:none;font-family:var(--f-lcd);font-size:13px;line-height:1.2;color:var(--ink);padding:0 2px}
.st-chain{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:44px;gap:4px;align-content:start}
.st-chain-cell{position:relative;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:20px;line-height:1;cursor:pointer}
.st-chain-cell.two{font-size:16px;letter-spacing:-.5px}
.st-chain-cell.sel{box-shadow:inset 0 0 0 4px var(--ink)}
.st-chain-cell.playing{background:var(--ink);color:var(--lcd)}
.st-chain-cell.playing.sel{box-shadow:inset 0 0 0 4px var(--lcd)}
.st-chain-cell.same::after{content:"";position:absolute;right:5px;bottom:5px;width:5px;height:5px;background:var(--ink)}
.st-chain-cell.same.playing::after{background:var(--lcd)}
.st-song-btns{flex:none;display:flex;gap:4px}
.st-song-btn{flex:1;min-width:0;min-height:44px;padding:2px 4px;background:var(--ink);color:var(--lcd);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:13px;line-height:1.15;cursor:pointer}
.st-song-btn:disabled{background:var(--lcd-3);color:var(--ink-2);border-color:var(--lcd-3);cursor:default}
/* the mixer screen (12.14): key and tape/sound row, then one row per instrument; 4 rows + the top row fit 331x359 */
.st-mixer{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;padding:4px 6px 6px}
.st-mix-top{flex:none;display:flex;gap:4px}
.st-mix-open{flex:1;min-width:0;min-height:44px;padding:2px 4px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:13px;line-height:1.15;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-mix-rows{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
.st-mix-row{flex:none;display:flex;align-items:center;gap:4px;min-height:44px;border-bottom:1px solid var(--ink);box-sizing:border-box}
.st-mix-row.muted .st-mix-name{color:var(--ink-2)}
.st-mix-row.focus{outline:2px dashed var(--ink);outline-offset:-2px}
.st-mix-name{flex:1 1 0;min-width:0;height:44px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:2px 3px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;text-align:left;overflow:hidden}
.st-mix-track,.st-mix-voice{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-mix-voice{font-size:12px;line-height:1.1;color:var(--ink-2)}
.st-mix-btn{flex:none;width:44px;height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:20px;line-height:1;cursor:pointer}
.st-mix-btn:disabled{color:var(--ink-2);border-color:var(--ink-2);cursor:default}
.st-mix-vol{flex:none;min-width:28px;text-align:center;font-family:var(--f-pix);font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
.st-mix-mute{font-family:var(--f-lcd);font-size:13px}
.st-mix-mute.on{background:var(--ink);color:var(--lcd)}
/* the key, sound and slot sheets' title buttons (12.8, 12.14) keep the title row at 44 px */
.dict-sheet .st-sheet-head{align-items:center;padding-bottom:0;gap:6px}
.st-sheet-close{flex:none;min-width:44px;height:44px;box-sizing:border-box;padding:0 6px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1;cursor:pointer}
.st-key-grid{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:44px;gap:4px}
.st-scale-grid{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:44px;gap:4px}
.st-key-btn,.st-scale-btn{min-width:0;min-height:44px;padding:2px 4px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:14px;line-height:1.1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-key-btn.on,.st-scale-btn.on{background:var(--ink);color:var(--lcd)}
.st-sheet-label{margin:0;font-size:14px;line-height:1.2;color:var(--ink)}
.st-tape-levels{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.st-tape-btn{min-width:0;min-height:44px;padding:0;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:20px;line-height:1;cursor:pointer}
.st-tape-btn.on{background:var(--ink);color:var(--lcd)}
.st-swing-row{flex:none;display:flex;align-items:center;gap:4px;min-height:44px}
.st-swing-name{flex:1;min-width:0;font-family:var(--f-lcd);font-size:14px}
.st-swing-val{flex:none;min-width:52px;text-align:center;font-family:var(--f-pix);font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
/* the pattern sheet: 64 names in six columns (A-P, then A1-P3), the current one inverted, a dot when that pattern has
   notes; the grid scrolls inside the sheet so the buttons under it stay on a 331x359 screen */
.st-pat-grid{flex:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:44px;gap:4px;max-height:calc(100% - 168px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;align-content:start}
.st-pat-btn{position:relative;min-height:44px;min-width:0;display:flex;align-items:center;justify-content:center;padding:0 0 6px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-pix);font-size:18px;line-height:1;letter-spacing:-.5px;cursor:pointer}
.st-pat-btn.on{background:var(--ink);color:var(--lcd)}
.st-pat-btn .st-dot{position:absolute;left:50%;bottom:4px;margin-left:-2.5px}
.st-pat-btn.on .st-dot.on{background:var(--lcd)}
.st-sheet-btn{min-height:44px;padding:4px 8px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:15px;line-height:1.1;cursor:pointer}
.st-sheet-row{flex:none;display:flex;gap:4px}
.st-sheet-row .st-sheet-btn{flex:1;min-width:0}
/* the slot sheet's four edits sit two by two under the letters, so the whole sheet fits 331x359 */
.st-slot-actions{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.st-slot-actions li{min-height:44px;box-sizing:border-box;justify-content:center;padding:4px 6px;border:2px solid var(--ink);font-size:14px;line-height:1.15}
.st-slot-actions li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
/* the slot sheet's title keeps a 44 px play button (12.8), so the sheet still fits the 331x359 screen */
.dict-sheet .st-slot-title{align-items:center;padding-bottom:0;gap:6px}
.st-slot-play{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--ink);color:var(--lcd);border:2px solid var(--ink);cursor:pointer}
.st-slot-play::before{content:"";display:block;width:0;height:0;margin-left:3px;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.st-copy-ask{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4}
.st-copy-ask p{margin:0}
.st-copy-ask .row{gap:10px}
.st-copy-ask .btn{flex:1;min-height:44px}

/* RADIO (apps/radio.js): the acoustic link, guide and meter. Four tones; only the log and the meter scroll. */
.radio-view{display:flex;flex-direction:column;overflow:hidden}
.radio-bar{flex:none;display:flex;align-items:center;gap:8px;padding:4px 8px;border-bottom:2px solid var(--ink);background:var(--lcd)}
.radio-bar h2{margin:0;font-size:16px;font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-bar .hint{flex:none;font-size:12px;text-align:right}
.radio-page{flex:1;min-height:0;display:flex;flex-direction:column}
.radio-menu-page{gap:8px;padding:8px}
.radio-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.radio-list li{min-height:44px;display:flex;align-items:center;padding:6px 12px;border:2px solid var(--ink);cursor:pointer;font-size:17px}
.radio-list li.on{background:var(--ink);color:var(--lcd)}
.radio-guide-page{gap:6px;padding:8px}
.radio-guide-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:4px 2px}
.radio-guide-text{margin:0;font-size:15px;line-height:1.5}
.radio-guide-page{margin:0;text-align:right;font-family:var(--f-pix);font-size:16px}
.radio-tones{display:flex;gap:4px;height:20px}
.radio-tones i{flex:1;display:block}
.radio-link-page{gap:4px;padding:4px 8px 6px}
.radio-link-status{flex:none;display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2)}
.radio-link-log{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;border:2px solid var(--ink-2);padding:3px 5px;display:flex;flex-direction:column;gap:3px;word-break:break-word;-webkit-overflow-scrolling:touch}
.radio-link-log .hint{margin:auto;text-align:center}
/* the log as a chat: ours on the right in ink, theirs on the left in a frame, the link's start and end centred */
.radio-sys{flex:none;margin:2px 0;align-self:center;font-family:var(--f-pix);font-size:14px;color:var(--ink-2);letter-spacing:.04em}
.radio-msg{flex:none;max-width:80%;display:flex;flex-direction:column;gap:1px;padding:2px 6px;border:2px solid var(--ink);font-size:14px;line-height:1.35}
.radio-msg.in{align-self:flex-start;background:var(--lcd);color:var(--ink)}
.radio-msg.out{align-self:flex-end;background:var(--ink);color:var(--lcd)}
.radio-msg.lost{border-style:dashed;background:var(--lcd);color:var(--ink);cursor:pointer}
.radio-msg .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.radio-msg canvas{width:32px;height:32px;image-rendering:pixelated}
.radio-msg.out canvas{outline:1px solid var(--lcd)}
.radio-msg .meta{display:flex;align-items:center;gap:4px;font-family:var(--f-pix);font-size:13px;line-height:1}
.radio-msg.out .meta{justify-content:flex-end}
.radio-msg.in .meta{color:var(--ink-2)}
/* acknowledged: a small tick drawn with two borders */
.radio-ok{display:inline-block;width:4px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 2px 2px}
/* three dots that light in turn: outwards while we send, inwards while we hear */
.radio-dots{display:inline-flex;gap:2px;align-items:center}
.radio-dots i{display:block;width:4px;height:4px;background:currentColor;visibility:hidden}
.radio-msg.pending .radio-dots i,.radio-air.talk .radio-dots i{animation:radiodot .6s steps(1,end) infinite}
.radio-msg.pending .radio-dots i:nth-child(2),.radio-air.talk .radio-dots i:nth-child(2){animation-delay:.2s}
.radio-msg.pending .radio-dots i:nth-child(3),.radio-air.talk .radio-dots i:nth-child(3){animation-delay:.4s}
.radio-air.hear .radio-dots i{animation:radiodot .6s steps(1,end) infinite}
.radio-air.hear .radio-dots i:nth-child(2){animation-delay:.2s}
.radio-air.hear .radio-dots i:nth-child(1){animation-delay:.4s}
@keyframes radiodot{0%{visibility:visible}34%{visibility:hidden}}
/* who is on the air: one line that keeps its height, so the log does not jump */
.radio-air{flex:none;margin:0;height:16px;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
.radio-air .radio-dots{display:none}
.radio-air.talk,.radio-air.hear{color:var(--ink)}
.radio-air.talk{justify-content:flex-end}
.radio-air.talk .radio-dots,.radio-air.hear .radio-dots{display:inline-flex}
/* the bar: the signal (the rate the handshake reached) and the experimental tag */
.radio-sig{flex:none;display:flex;align-items:flex-end;gap:2px;height:14px}
.radio-sig[hidden]{display:none}
.radio-sig i{display:block;width:4px;border:1px solid var(--ink);background:transparent}
.radio-sig i:nth-child(1){height:6px}.radio-sig i:nth-child(2){height:10px}.radio-sig i:nth-child(3){height:14px}
.radio-sig i.on{background:var(--ink)}
.radio-exp{flex:none;border:1px solid var(--ink);padding:0 3px;font-size:11px;line-height:1.4}
.radio-link-actions{flex:none;display:flex;gap:4px}
.radio-link-actions .btn{flex:1;min-width:0;min-height:44px;padding:4px 2px;font-size:14px}
.radio-link-actions .btn.on{background:var(--ink);color:var(--lcd);border-color:var(--ink)}
.radio-write-page{gap:8px;padding:10px}
.radio-write-page .radio-field{min-height:18px}
.radio-write-page .radio-field>span{flex:none;font-size:14px;color:var(--ink-2)}
.radio-write-page input{width:100%;min-height:44px;font-family:var(--f-lcd);font-size:17px;color:var(--ink);background:var(--lcd);border:3px solid var(--ink);border-radius:0;padding:6px 8px;-webkit-appearance:none;appearance:none}
.radio-write-page input::placeholder{color:var(--ink-2)}
.radio-write-actions{display:flex;gap:6px;margin-top:auto}
.radio-write-actions .btn{flex:1;min-height:44px}
.radio-draw-page{gap:4px;padding:4px}
#radio-draw-cv{display:block;width:260px;height:260px;flex:none;margin:0 auto;border:2px solid var(--ink);image-rendering:pixelated;touch-action:none}
.radio-draw-hint{margin:0;text-align:center;font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-draw-actions{display:flex;align-items:center;gap:6px}
.radio-swatch{flex:none;width:18px;height:18px;border:2px solid var(--ink)}
.radio-draw-tone{flex:none;font-size:13px;color:var(--ink-2)}
.radio-draw-actions .btn{flex:1;min-width:0;min-height:44px;padding:4px;font-size:14px}
.radio-meter-page{overflow-y:auto;overflow-x:hidden;padding:8px;gap:8px;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.radio-meter-block{display:flex;flex-direction:column;gap:4px;border:2px solid var(--ink-2);padding:6px}
.radio-meter-block h3{margin:0;font-size:14px;font-weight:400}
.radio-bars{display:flex;flex-direction:column;gap:3px}
.radio-bar-row{display:flex;align-items:center;gap:6px;min-height:16px}
.radio-bar-label{flex:none;width:38px;font-family:var(--f-pix);font-size:14px;line-height:1}
.radio-level{flex:1;height:10px;border:1px solid var(--ink);background:var(--lcd);overflow:hidden}
.radio-level i{display:block;height:100%;width:0;background:var(--ink)}
.radio-bar-row small{flex:none;width:44px;text-align:right;font-family:var(--f-pix);font-size:13px}
.radio-check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px}
.radio-check input{width:22px;height:22px;accent-color:var(--ink)}
.radio-field{display:flex;align-items:center;gap:8px;min-height:36px}
.radio-field>span{flex:0 0 64px;font-size:13px;color:var(--ink-2)}
.radio-field select{flex:1;min-width:0;min-height:38px;font-family:var(--f-lcd);font-size:15px;color:var(--ink);background:var(--lcd);border:2px solid var(--ink);border-radius:0;padding:4px 28px 4px 6px;-webkit-appearance:none;appearance:none}
.radio-test-actions{display:flex;gap:4px}
.radio-test-actions .btn{flex:1;min-width:0;min-height:44px;padding:4px 2px;font-size:13px}
.radio-meter{height:12px;border:2px solid var(--ink);background:var(--lcd);overflow:hidden}
.radio-meter span{display:block;height:100%;width:0;background:var(--ink)}
.radio-hex{font-size:13px;line-height:1.4;word-break:break-all;border:2px solid var(--ink-2);padding:3px 5px;min-height:18px;white-space:pre-wrap;margin:0}
.radio-scope{display:block;width:100%;height:80px;border:2px solid var(--ink);background:var(--lcd)}
.radio-field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#v-radio.radio-draw-on .radio-bar{display:none}
/* the project library, versions, guide and assistant sheets (12.15, 12.16) */
.st-name{width:100%;box-sizing:border-box;height:44px;padding:6px 8px;background:var(--lcd);color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:16px;line-height:1.2}
.st-name::placeholder{color:var(--ink-2)}
.st-ai-input{height:auto;min-height:88px;max-height:132px;resize:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* iOS paints a disabled field and button grey and half transparent: keep them in the four tones while the AI works */
.st-name:disabled{opacity:1;color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);border-color:var(--ink-2)}
.st-ai-chip:disabled,.st-sheet .st-sheet-btn:disabled{opacity:1;color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);border-color:var(--ink-2);cursor:default}
.dict-sheet .st-menu{flex:1;min-height:0;overflow:auto}
.dict-sheet .st-proj-list{flex:1;min-height:0;overflow:auto}
.dict-sheet .st-proj-actions{flex:none;min-height:0;overflow:visible}
.st-guide{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.st-guide h4{margin:0;font-family:var(--f-pix);font-weight:400;font-size:18px;line-height:1.2}
.st-guide-text{margin:0;font-size:15px;line-height:1.45;white-space:pre-line}
.st-ai-chips{flex:none;display:flex;gap:4px}
.st-ai-chip{flex:1;min-width:0;min-height:44px;padding:2px 3px;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:12px;line-height:1.15;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-ai-preview{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.st-ai-reply{margin:0;font-size:15px;line-height:1.4;white-space:pre-line}
.st-ai-state{color:var(--ink)}
/* the AI job's progress under the input: one clock for the whole job, plain ink on paper */
.st-ai-progress{flex:none;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-ai-card,.st-ai-stage,.st-ai-link,.st-ai-stay{margin:0;font-size:13px;line-height:1.3;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.st-ai-stage,.st-ai-stay{font-size:14px}
.st-ai-link{font-family:inherit}
.st-ai-trouble{flex:none;display:flex;flex-direction:column;gap:4px;padding:4px;border:2px solid var(--ink)}
/* a tape row in the library: the name, its date or demo tag, and a 44 px delete button */
.st-proj-list .st-proj-row{padding:0 2px 0 8px;gap:4px}
.st-row-del{flex:none;width:44px;height:44px;box-sizing:border-box;padding:0;background:transparent;color:var(--ink);border:2px solid var(--ink);font-family:var(--f-lcd);font-size:12px;line-height:1;cursor:pointer}