:root{
  color-scheme:light;
  --tile:#D3E3DB;
  --grout:#BDD2C8;
  --face:#E3EBE7;
  --face-hi:#FBFDFC;
  --face-lo:#A2B6AE;
  --face-dk:#5D736C;
  --ink:#16302B;
  --ink-2:#46605A;
  --ink-3:#768D86;
  --title-a:#14524C;
  --title-b:#82BAAE;
  --title-ink:#FFFFFF;
  --screen:#0B1917;
  --screen-glow:#13332D;
  --phos:#8DF5DA;
  --phos-dim:#4B8F7F;
  --grid:#163530;
  --cure:#22B2C6;
  --cure-lo:#0E7C90;
  --brass:#C0912F;
  --eel:#2F5A43;
  --stamp:#B03838;
  --glass-edge:#8EA9A1;
  --glass-hi:#FFFFFFB0;
  --glass-lo:#FFFFFF33;
  --key-hi:#FFFFFF;
  --key-mid:#EAF2EE;
  --key-lo:#D3E2DB;
  --key-edge:#C2D4CB;
  --bkey-hi:#41705F;
  --bkey-lo:#1D3B33;
  --bkey-edge:#5F9080;
  --bkey-label:#A6CCBF;
  --shadow:#0B191766;
  --scan:#0B191714;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --f-pix:"Press Start 2P","Courier New",monospace;
  --f-ui:Tahoma,Verdana,"PT Sans","Segoe UI",sans-serif;
  --f-mono:"PT Mono","Courier New",monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;color:var(--ink);font:13px/1.4 var(--f-ui);background:var(--title-a)}
button{font:inherit;color:inherit;touch-action:manipulation}
:focus-visible{outline:1px dotted var(--ink);outline-offset:2px}

.os{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:100%}
.crt{position:fixed;inset:0;z-index:3000;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,var(--scan) 2px 3px)}

.side{position:relative;display:flex;flex-direction:column;gap:26px;padding:22px 18px 0;overflow:hidden;border-right:2px solid var(--face-dk);
  background:repeating-linear-gradient(0deg,var(--face-lo) 0 2px,color-mix(in srgb,var(--face-lo) 88%,var(--ink)) 2px 3px)}
.logo{display:flex;flex-direction:column;gap:12px}
.logo-hand{margin:0;font:500 76px/.8 var(--f-hand);color:var(--phos);transform:skewX(-8deg);transform-origin:left bottom;
  text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.menu h2,.settings h2{margin:0 0 6px;font:400 10px/1.4 var(--f-pix);letter-spacing:.06em;color:var(--ink-2)}
.vbtn{display:flex;align-items:center;gap:10px;padding:6px 8px 5px;margin-left:-8px;border:0;background:transparent;font:400 24px/1 var(--f-pix);color:var(--ink);cursor:pointer;text-align:left}
.vbtn::before{content:"";width:0;height:0;border-left:9px solid transparent;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vbtn:hover{color:var(--title-a)}
.vbtn[aria-pressed="true"]{background:var(--title-a);color:var(--phos)}
.vbtn[aria-pressed="true"]::before{border-left-color:var(--phos)}
.vbtn kbd{font:11px var(--f-mono);color:inherit;opacity:.7}
.settings{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px}
.row label{font:400 16px/1.2 var(--f-pix);color:var(--ink)}
.row output{font:13px var(--f-mono);color:var(--ink)}
.row input{grid-column:1/-1}
.oct{display:flex;align-items:center;gap:6px}
.oct .lbl{font:400 16px/1.2 var(--f-pix);margin-right:auto}
.oct output{min-width:58px;text-align:center;font:13px var(--f-mono)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--face);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:22px;margin-top:-9px;background:var(--face);border:1px solid;border-color:var(--face-hi) var(--ink) var(--ink) var(--face-hi);box-shadow:inset -1px -1px 0 var(--face-lo)}
input[type=range]::-moz-range-track{height:6px;background:var(--face);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk)}
input[type=range]::-moz-range-thumb{width:12px;height:22px;border-radius:0;background:var(--face);border:1px solid;border-color:var(--face-hi) var(--ink) var(--ink) var(--face-hi);box-shadow:inset -1px -1px 0 var(--face-lo)}

.desk{position:relative;display:flex;flex-direction:column;min-width:0;background-color:var(--title-a);
  background-image:url("../images/wallpaper.svg");
  background-size:cover;background-position:center}
.desk-grid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:22px;align-items:start;padding:22px 22px 26px}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}

.win{position:relative;min-width:0;padding:3px;background:var(--face);border:1px solid;border-color:var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);box-shadow:inset -1px -1px 0 var(--face-lo),inset 1px 1px 0 var(--face-hi),7px 9px 0 var(--shadow)}
.tb{touch-action:none;cursor:move;display:flex;align-items:center;gap:6px;min-height:22px;padding:2px 3px 2px 6px;background:linear-gradient(90deg,var(--title-a),var(--title-b));color:var(--title-ink);font:700 12px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden}
.tb h2,.tb span{margin:0;font:inherit;overflow:hidden;text-overflow:ellipsis}
.tb .ico{flex:none;width:8px;height:13px;border:1.5px solid var(--title-ink);border-radius:2px 2px 3px 3px;background:linear-gradient(transparent 45%,var(--cure) 45%)}
.tb .meta{margin-left:auto;font-weight:400;opacity:.85}
.tb-x{flex:none;margin-left:auto;width:18px;height:16px;padding:0;display:grid;place-items:center;background:var(--face);color:var(--ink);border:1px solid;border-color:var(--face-hi) var(--ink) var(--ink) var(--face-hi);font:700 12px/1 var(--f-ui);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:26px;min-width:28px;padding:2px 12px;background:var(--face);border:1px solid;border-color:var(--face-hi) var(--ink) var(--ink) var(--face-hi);box-shadow:inset -1px -1px 0 var(--face-lo);font:12.5px var(--f-ui);color:var(--ink);cursor:pointer}
.btn:active{border-color:var(--ink) var(--face-hi) var(--face-hi) var(--ink);box-shadow:inset 1px 1px 0 var(--face-lo)}
.btn.sq{width:26px;padding:0;font:700 15px/1 var(--f-mono)}

.w-dialog{z-index:3;transform:translate(-40px,10px)}
.dlg{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;padding:14px 16px 12px}
.warn{position:relative;width:34px;height:30px}
.warn::before{content:"";position:absolute;inset:0;background:var(--brass);clip-path:polygon(50% 0,100% 100%,0 100%)}
.warn::after{content:"!";position:absolute;left:0;right:0;bottom:2px;text-align:center;font:700 17px/1 var(--f-ui);color:var(--ink)}
.dlg p{margin:0;font-size:13px}
.dlg .btn{grid-column:1/-1;justify-self:center;min-width:86px}

.screen{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"top top" "scope read" "tick tick";gap:8px 14px;margin:3px;padding:10px 12px 8px;background:radial-gradient(110% 95% at 45% 40%,var(--screen-glow),var(--screen) 72%);color:var(--phos);font:13px/1.3 var(--f-mono)}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,var(--screen) 0 1px,transparent 1px 3px);opacity:.45}
.mon-top{grid-area:top;display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font:400 10px/1.4 var(--f-pix)}
.mon-top .proc{margin-left:auto}
.pulse{display:inline-flex;align-items:center;gap:6px;color:var(--phos-dim)}
.pulse i{width:9px;height:9px;background:var(--grid);transition:background-color .25s,box-shadow .25s}
.pulse.beat i{background:var(--phos);box-shadow:0 0 8px var(--phos);transition:none}
.scope-wrap{grid-area:scope;position:relative}
#scope{display:block;width:100%;height:132px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:10% 25%;border:1px solid var(--grid)}
.mon-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:12px;text-align:center;font:400 11px/1.8 var(--f-pix);text-shadow:0 0 6px var(--phos-dim)}
.mon-read{grid-area:read;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.mon-read div{padding-bottom:5px;border-bottom:1px solid var(--grid)}
.mon-read dt{font-size:11px;letter-spacing:.12em;color:var(--phos-dim)}
.mon-read dd{margin:3px 0 0;font:400 15px/1.1 var(--f-pix);white-space:nowrap;text-shadow:0 0 6px var(--phos-dim)}
.ticker{grid-area:tick;overflow:hidden;white-space:nowrap;padding-top:6px;border-top:1px solid var(--grid);color:var(--phos-dim);font:400 10px/1.5 var(--f-pix)}
.ticker span{display:inline-block;padding-left:100%;animation:ticker 34s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}

.keys{position:relative;display:flex;gap:3px;height:clamp(120px,20vh,160px);margin:3px;padding:3px;background:var(--grout);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.key{position:relative;cursor:pointer;border-radius:3px}
.key.w{flex:1 1 0;min-width:0;background:linear-gradient(150deg,var(--key-hi),var(--key-mid) 55%,var(--key-lo));box-shadow:inset 0 0 0 1px var(--key-hi),inset -2px -3px 0 var(--key-edge)}
.key.b{position:absolute;top:3px;z-index:2;height:58%;background:linear-gradient(150deg,var(--bkey-hi),var(--bkey-lo));box-shadow:inset 0 0 0 1px var(--bkey-edge),0 2px 0 var(--shadow)}
.key.w.on{background:linear-gradient(150deg,var(--key-hi),color-mix(in srgb,var(--cure) 42%,var(--key-hi)));box-shadow:inset 0 0 0 1px var(--key-hi),inset 0 0 12px color-mix(in srgb,var(--cure) 55%,transparent)}
.key.b.on{background:linear-gradient(150deg,var(--cure),var(--cure-lo))}
.key.fit::after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--cure);box-shadow:0 0 6px var(--cure);pointer-events:none}
.key.w.fit::after{bottom:42px}
.key.b.fit::after{bottom:22px}
.fit-hint i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--cure);vertical-align:0}
.key .kl,.key .nn{position:absolute;left:0;right:0;text-align:center;pointer-events:none;line-height:1}
.key .kl{bottom:8px;font:400 8px var(--f-pix);color:var(--ink-3)}
.key .nn{bottom:24px;font:11px var(--f-mono);color:var(--ink-3)}
.key.b .kl{bottom:7px;color:var(--bkey-label)}
.keys-foot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;padding:4px 6px 2px;font-size:11.5px;color:var(--ink-2)}
.keys-foot kbd{font:11px var(--f-mono);padding:0 4px;border:1px solid var(--face-lo);background:var(--face-hi)}

.pult{display:flex;flex-direction:column;gap:10px;padding-bottom:22px}
.pult h2{margin:0 0 2px;font:400 10px/1.4 var(--f-pix);letter-spacing:.06em;color:var(--ink-2)}
.pult-btns{display:flex;gap:8px}
.btn.big{flex:1 1 auto;min-height:42px;font:400 14px/1 var(--f-pix)}
.btn.big[aria-pressed="true"]{background:var(--title-a);color:var(--phos);border-color:var(--ink) var(--face-hi) var(--face-hi) var(--ink);box-shadow:inset 1px 1px 0 var(--screen)}
#again{flex:none;font:400 10px/1 var(--f-pix);padding:2px 10px}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.chk input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:16px;height:16px;margin:0;background:var(--face-hi);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);box-shadow:inset 1px 1px 0 var(--ink-3);cursor:pointer}
.chk input:checked::after{content:"✓";font:700 12px/1 var(--f-ui);color:var(--ink)}
.pult-screen{display:flex;flex-direction:column;gap:7px;padding:10px 11px;background:radial-gradient(110% 95% at 45% 40%,var(--screen-glow),var(--screen) 72%);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);color:var(--phos);font:400 10px/1.5 var(--f-pix);text-shadow:0 0 6px var(--phos-dim)}
.pult-row{display:flex;justify-content:space-between;gap:8px}
.pult-row b{font-weight:400;color:var(--face-hi)}
.pbar{display:block;height:6px;background:var(--grid)}
.pbar i{display:block;height:100%;width:0;background:var(--phos);box-shadow:0 0 6px var(--phos);transition:width .3s}

.insts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.w-inst{display:flex;flex-direction:column;--cell:var(--c)}
.w-inst[data-track="eel"]{--cell:color-mix(in srgb,var(--eel) 45%,var(--phos))}
.w-inst .tb .ico{background:linear-gradient(transparent 45%,var(--cell) 45%)}
.inst-ctl{display:flex;align-items:center;gap:8px;padding:6px 5px 6px}
.btn.onoff{min-width:56px;padding:2px 8px;font:400 9px/1 var(--f-pix)}
.btn.onoff[aria-pressed="true"],.btn.pat[aria-pressed="true"]{background:var(--title-a);color:var(--phos);border-color:var(--ink) var(--face-hi) var(--face-hi) var(--ink);box-shadow:inset 1px 1px 0 var(--screen)}
.pats{display:flex;gap:3px}
.btn.pat{font:400 10px/1 var(--f-pix)}
.btn.pend{animation:pend .7s steps(1) infinite}
@keyframes pend{50%{background:var(--cell);color:var(--ink)}}
.vol{display:flex;align-items:center;gap:6px;flex:1 1 80px;min-width:0;max-width:150px;margin-left:auto;font-size:11px;color:var(--ink-2)}
.vol input{min-width:0}
.grid{--ch:11px;display:grid;grid-template-columns:var(--lw,30px) repeat(24,minmax(7px,1fr));grid-auto-rows:var(--ch);gap:2px;margin:0 3px;padding:7px 8px 7px 6px;background:var(--screen);border:1px solid;border-color:var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);touch-action:none;-webkit-user-select:none;user-select:none}
.grid.wide-l{--lw:42px}
.rl{font:9px/11px var(--f-mono);color:var(--phos-dim);white-space:nowrap;overflow:hidden}
.cell{display:block;border-radius:1px;background:var(--screen-glow);cursor:pointer}
.cell.bs{box-shadow:-2px 0 0 var(--grid)}
.cell.now{background:color-mix(in srgb,var(--phos) 24%,var(--screen-glow))}
.cell.on{background:var(--cell)}
.cell.on.now{background:var(--face-hi);box-shadow:0 0 8px var(--cell)}
.w-inst.off .cell,.w-inst.off .rl{opacity:.32}
.inst-foot{display:flex;flex-wrap:wrap;gap:0 6px;margin:0;padding:4px 6px 2px;font-size:11.5px;color:var(--ink-2)}
.inst-foot .pnext{color:var(--cure-lo)}

.pair{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:stretch}
.w-tube{display:flex;flex-direction:column}
.tube-inner{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px 8px}
.tube-area{flex:1 1 auto;display:flex;gap:5px;min-height:210px;width:100%;justify-content:center}
.scale{display:flex;flex-direction:column;justify-content:space-between;padding:10px 0 22px;font:11px/1 var(--f-mono);color:var(--ink-3);text-align:right}
.tube{position:relative;width:56px;border:2px solid var(--glass-edge);border-top:0;border-radius:0 0 28px 28px;overflow:hidden;cursor:ns-resize;touch-action:none;background:linear-gradient(90deg,var(--glass-hi),var(--glass-lo) 38%,var(--glass-hi))}
.tube::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--glass-edge)}
.tube::after{content:"";position:absolute;inset:10px 6px 22px auto;width:9px;background:repeating-linear-gradient(var(--glass-edge) 0 1px,transparent 1px 10%)}
.water{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(180deg,color-mix(in srgb,var(--cure) 50%,var(--face-hi)),var(--cure-lo))}
.water::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--cure) 35%,var(--face-hi))}
.bubble{position:absolute;bottom:4px;border-radius:50%;border:1px solid var(--glass-hi);background:var(--glass-lo);animation:rise var(--dur) ease-in forwards}
@keyframes rise{to{transform:translate(var(--dx),calc(var(--h) * -1));opacity:0}}
.tube-read{margin:0;text-align:center;line-height:1.3}
.tube-read b{display:block;font:400 16px/1.3 var(--f-pix);color:var(--cure-lo)}
.tube-read small{font-size:11px;color:var(--ink-2)}
.w-log{display:flex;flex-direction:column;transform:translateY(16px)}
.term{flex:1 1 auto;min-height:200px;margin:3px;padding:8px 10px;background:var(--screen);color:var(--face-hi);font:12.5px/1.45 var(--f-mono);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.term p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term p.dim{color:var(--phos-dim)}
.term::after{content:"_";color:var(--phos);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.icons{display:flex;gap:18px;padding:4px 2px 0}
.icon{position:relative;touch-action:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;padding:6px 2px;background:transparent;border:1px dotted transparent;cursor:pointer}
.icon .vial{position:relative;width:34px;height:64px;margin-top:12px;border:3px solid;border-color:var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);border-radius:5px 5px 15px 15px;background:linear-gradient(90deg,var(--face-lo),var(--face-hi) 35%,var(--face-lo) 70%,var(--face-dk));box-shadow:2px 3px 0 var(--shadow)}
.icon .vial::before{content:"";position:absolute;left:50%;top:-14px;width:14px;height:12px;margin-left:-7px;border:3px solid;border-bottom:0;border-color:var(--face-hi) var(--face-dk) transparent var(--face-hi);border-radius:4px 4px 0 0;background:var(--face)}
.icon .liq{position:absolute;left:3px;right:3px;bottom:3px;height:58%;border-radius:2px 2px 10px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,var(--face-hi)),var(--c))}
.icon .lbl{padding:1px 4px;font-size:12px;line-height:1.25;color:var(--title-ink);text-shadow:1px 1px 0 var(--screen);text-align:center}
.icon[aria-pressed="true"] .lbl{background:var(--title-a);text-shadow:none}
.icon[aria-pressed="true"]{border-color:var(--face-hi)}
.icon[aria-pressed="true"] .liq{box-shadow:0 0 12px var(--c)}

.taskbar{position:sticky;bottom:0;z-index:1000;display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px));background:var(--title-a);border-top:2px solid var(--title-b);color:var(--title-ink);font-size:12.5px}
.tb-ver{font-family:var(--f-mono)}
.tb-btn{flex:none;min-height:28px;padding:2px 10px;background:var(--title-a);border:1px solid;border-color:var(--title-b) var(--screen) var(--screen) var(--title-b);color:var(--title-ink);font:12px var(--f-ui);cursor:pointer;white-space:nowrap}
.tb-btn:active{border-color:var(--screen) var(--title-b) var(--title-b) var(--screen)}
body.dragging{cursor:move;-webkit-user-select:none;user-select:none}
.tb-status{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-tray{flex:none;padding:3px 8px;border:1px solid;border-color:var(--screen) var(--title-b) var(--title-b) var(--screen);font-family:var(--f-mono);white-space:nowrap}
.tb-red{flex:none;min-height:30px;padding:3px 16px;background:var(--stamp);border:1px solid;border-color:color-mix(in srgb,var(--stamp) 55%,var(--face-hi)) var(--screen) var(--screen) color-mix(in srgb,var(--stamp) 55%,var(--face-hi));color:var(--title-ink);font:12.5px var(--f-ui);cursor:pointer;white-space:nowrap}
.tb-red:active{border-color:var(--screen) color-mix(in srgb,var(--stamp) 55%,var(--face-hi)) color-mix(in srgb,var(--stamp) 55%,var(--face-hi)) var(--screen)}

@media (max-width:1240px){
  .desk-grid{display:flex;flex-direction:column;align-items:stretch}
  .col{display:contents}
  .w-dialog{order:0;transform:none;width:100%;max-width:420px;align-self:flex-start}
  .w-monitor{order:1}
  .insts{order:2}
  .w-keys{order:3}
  .pair{order:4}
  .icons{order:5}
  .w-log{transform:none}
  .pair{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:760px){
  .insts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pult{grid-column:1/-1;padding-bottom:0}
  .os{grid-template-columns:minmax(0,1fr)}
  .side{border-right:0;border-bottom:2px solid var(--face-dk);padding:16px 16px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px}
  .logo{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:6px 16px}
  .logo-hand{font-size:60px}
  .desk-grid{padding:16px 16px 22px;gap:18px}
  .col{gap:18px}
}
@media (max-width:560px){
  .side{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px 16px 14px}
  .logo{gap:2px 12px}
  .logo-hand{font-size:50px}
  .menu{flex-direction:row;flex-wrap:wrap;gap:6px}
  .menu h2,.settings h2{display:none}
  .vbtn{margin-left:0;padding:7px 7px 6px;font-size:12px}
  .vbtn::before{display:none}
  .settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}
  .settings .oct{grid-column:1/-1}
  .row label,.oct .lbl{font-size:12px}
  .screen{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "scope" "read" "tick"}
  .mon-read{flex-direction:row;flex-wrap:wrap}
  .mon-read div{flex:1 1 40%}
  #scope{height:130px}
  .pair{grid-template-columns:118px minmax(0,1fr);gap:12px}
  .term{font-size:11.5px}
  .icons{justify-content:space-between;gap:6px}
  .icon{width:auto;flex:1 1 0}
  .tb-tray{display:none}
  .keys-foot{display:none}
}
@media (pointer:coarse){.key .kl{display:none}.key .nn{bottom:10px}}
@media (prefers-reduced-motion:reduce){
  .ticker span{animation:none;padding-left:0}
  .term::after{animation:none}
  .bubble{display:none}
  *,*::before,*::after{transition:none!important}
}