@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/pixelify-sans-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700.woff2) format('woff2')}
  :root{ --k:#08080a; --wall:#15151b; --wall2:#1c1c24; --panel:#23232d; --edge:#34343f; --dim:#8b8b9a; --paper:#f1f1ee; --neon:#ccff00; --amber:#ffaa00; --brass:#c9a227; --u:4px; }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:var(--k);color:var(--paper)}
  body{font-family:"Space Mono",ui-monospace,monospace;-webkit-font-smoothing:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  button:focus-visible,[tabindex]:focus-visible{outline:max(2px,calc(var(--u)*.5)) solid var(--paper);outline-offset:1px}
  [hidden]{display:none !important}
  svg{display:block;width:100%;height:100%}
  .px{font-family:"Pixelify Sans","Space Mono",monospace;font-weight:600;letter-spacing:.02em}
  .money{white-space:nowrap}
  svg.eth{display:inline-block;width:.5em;height:.82em;margin-right:.18em;vertical-align:-.06em;fill:currentColor}

  /* the room: one screen, nothing scrolls. every length is counted in cells of the room, one cell is --u */
  #room{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--wall) 50%,var(--k) 50%)}
  #stage{position:relative;flex:none;width:calc(var(--u)*320);height:calc(var(--u)*180);background:var(--wall);overflow:hidden;font-size:max(9px,calc(var(--u)*3.1));line-height:1.25}
  #stage[data-shape=tall]{width:calc(var(--u)*180);height:calc(var(--u)*380)}
  #back{position:absolute;inset:0;pointer-events:none}
  #back i{position:absolute;display:block}
  .seam{top:0;bottom:0;width:max(1px,calc(var(--u)*.25));background:var(--wall2)}
  .skirt{left:0;right:0;height:calc(var(--u)*2);background:var(--k)}

  /* ---------------- the top of the wall: the name, the dial, the pass ---------------- */
  #logo{position:absolute;left:calc(var(--u)*4);top:calc(var(--u)*3);height:calc(var(--u)*9);display:flex;align-items:center;color:var(--neon);font-size:max(11px,calc(var(--u)*6.4));font-weight:700}
  #dial{position:absolute;left:calc(var(--u)*61);top:calc(var(--u)*3);width:calc(var(--u)*198);height:calc(var(--u)*9);background:var(--k);border:max(1px,calc(var(--u)*.5)) solid var(--edge);cursor:ew-resize;touch-action:none}
  #dial .ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--edge) 0 max(1px,calc(var(--u)*.25)),transparent 0 10%);opacity:.9}
  #dial #fill{position:absolute;left:0;bottom:0;height:calc(var(--u)*2.5);background:repeating-linear-gradient(90deg,var(--neon) 0 calc(var(--u)*.5),transparent 0 calc(var(--u)*1.5));min-width:0}
  #dial #frame{position:absolute;top:calc(var(--u)*-.5);bottom:calc(var(--u)*-.5);border:max(1px,calc(var(--u)*.5)) solid var(--paper);min-width:calc(var(--u)*2);pointer-events:none}
  #dial #needle{position:absolute;top:calc(var(--u)*-1.5);bottom:calc(var(--u)*-1.5);width:max(2px,calc(var(--u)*.75));margin-left:calc(var(--u)*-.375);background:var(--neon);pointer-events:none}
  #dial #mine{position:absolute;inset:0;pointer-events:none}
  #dial #mine i{position:absolute;bottom:0;width:max(1px,calc(var(--u)*.4));height:calc(var(--u)*2.5);background:var(--paper)}
  #dial b{position:absolute;top:50%;transform:translateY(-50%);font-weight:400;color:var(--dim);font-size:max(8px,calc(var(--u)*2.6));pointer-events:none}
  #dial b.lo{left:calc(var(--u)*2.5)} #dial b.hi{right:calc(var(--u)*1.5)} #dial b.q{transform:translate(-50%,-50%)} #dial b.q1{left:25%} #dial b.q2{left:50%} #dial b.q3{left:75%}
  #tip{position:absolute;top:calc(var(--u)*11);transform:translateX(-50%);background:var(--paper);color:var(--k);padding:calc(var(--u)*.8) calc(var(--u)*1.6);white-space:nowrap;z-index:30;border:max(1px,calc(var(--u)*.5)) solid var(--k);font-size:max(9px,calc(var(--u)*2.9));pointer-events:none}
  .key.turn{position:absolute;top:calc(var(--u)*3);width:calc(var(--u)*7);height:calc(var(--u)*9);font-size:max(9px,calc(var(--u)*3.6))} #turnL{left:calc(var(--u)*52)} #turnR{left:calc(var(--u)*261)}
  #pass{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*3);height:calc(var(--u)*9);min-width:calc(var(--u)*40);padding:0 calc(var(--u)*2.5);background:var(--panel);border:max(1px,calc(var(--u)*.5)) solid var(--edge);display:flex;align-items:center;gap:calc(var(--u)*1.5);justify-content:center;font-size:max(9px,calc(var(--u)*2.9))}
  #pass i{width:calc(var(--u)*2);height:calc(var(--u)*2);background:var(--dim);flex:none} #pass.in i{background:var(--neon)}
  #pass:hover{border-color:var(--paper)}

  /* ---------------- the wall of sets ---------------- */
  #wall{position:absolute;left:calc(var(--u)*56);top:calc(var(--u)*16);width:calc(var(--u)*208);height:calc(var(--u)*104);background:#0d0d11;box-shadow:0 0 0 calc(var(--u)*1.5) #0d0d11,0 0 0 calc(var(--u)*2.25) var(--k)}
  #back,#left,#right{transform:translate(calc(var(--px,0)*calc(var(--u)*-3)),calc(var(--py,0)*calc(var(--u)*-1.5)))}
  #stage.opening .set .tube svg{animation:warm .5s steps(7) both;animation-delay:calc(var(--i)*45ms)}
  .set{position:absolute;left:calc(var(--c)*calc(var(--u)*26));top:calc(var(--r)*calc(var(--u)*26));width:calc(var(--u)*26);height:calc(var(--u)*26);padding:calc(var(--u)*1);display:block}
  .set .tube{position:absolute;inset:calc(var(--u)*1);background:#050506;border:max(1px,calc(var(--u)*.5)) solid var(--k);overflow:hidden}
  .set .tube svg{position:absolute;inset:0}
  .set em{position:absolute;left:calc(var(--u)*1.5);bottom:calc(var(--u)*1.5);background:var(--k);color:var(--paper);font-style:normal;font-size:max(8px,calc(var(--u)*2.5));padding:0 calc(var(--u)*.8);line-height:1.35;z-index:2}
  .set.yours em{background:var(--paper);color:var(--k)}
  .set.on .tube{outline:max(2px,calc(var(--u)*.75)) solid var(--neon);outline-offset:0;z-index:1}
  .set u{position:absolute;right:calc(var(--u)*1.5);top:calc(var(--u)*1.5);text-decoration:none;background:var(--neon);color:var(--k);font-size:max(8px,calc(var(--u)*2.6));padding:0 calc(var(--u)*1);line-height:1.35;z-index:2;font-weight:700}
  .set.dim .tube svg,.set.dim .tube .noise{opacity:.22}
  .set.gone .tube{background:#0c0c10;display:flex;align-items:center;justify-content:center;text-align:center;color:#77778c;font-size:max(7px,calc(var(--u)*2.3));line-height:1.3}
  .set.gone .tube::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);margin:calc(var(--u)*-.75);background:#2a2a36}
  .set.gone .tube span{position:absolute;left:0;right:0;bottom:calc(var(--u)*6)}
  .noise{position:absolute;inset:0;background-image:var(--snow);background-size:100% 100%;image-rendering:pixelated}
  .set.snow .tube svg{opacity:0}
  .set.next .tube svg{opacity:.5}
  .set.next .tube{border-style:dashed;border-color:var(--neon)}
  .set.next em{background:var(--neon);color:var(--k)}
  @keyframes warm{0%{transform:scale(1,.03);filter:brightness(4)}45%{transform:scale(1,.03);filter:brightness(4)}100%{transform:none;filter:none}}
  @keyframes cool{0%{transform:none;filter:none}55%{transform:scale(1,.03);filter:brightness(4)}100%{transform:scale(0,.03);filter:brightness(4)}}
  @keyframes slip{0%,100%{transform:none}30%{transform:translateY(-18%)}60%{transform:translateY(9%)}}
  .set.warm .tube svg,.big.warm .tube svg{animation:warm .5s steps(7) both}
  .set.cool .tube svg{animation:cool .55s steps(8) both}
  .set.slip .tube svg{animation:slip .28s steps(3)}
  .big{position:absolute;top:calc(var(--u)*26);width:calc(var(--u)*52);height:calc(var(--u)*52);padding:calc(var(--u)*1)}
  #pgm{left:calc(var(--u)*52)} #pvw{left:calc(var(--u)*104)}
  .big .tube{position:absolute;left:calc(var(--u)*1);right:calc(var(--u)*1);top:calc(var(--u)*1);height:calc(var(--u)*43);background:#050506;border:max(2px,calc(var(--u)*.75)) solid var(--k);overflow:hidden}
  .big .tube svg{position:absolute;inset:0}
  .big .plate{position:absolute;left:calc(var(--u)*1);right:calc(var(--u)*1);bottom:calc(var(--u)*1);height:calc(var(--u)*6.5);background:var(--k);display:flex;align-items:center;gap:calc(var(--u)*1.5);padding:0 calc(var(--u)*1.5);white-space:nowrap;overflow:hidden;text-align:left}
  .big .plate b{font-size:max(9px,calc(var(--u)*3))} .big .plate span{color:var(--dim);font-size:max(8px,calc(var(--u)*2.5));overflow:hidden;text-overflow:ellipsis}
  .big .tag{position:absolute;left:calc(var(--u)*2.5);top:calc(var(--u)*2.5);background:var(--neon);color:var(--k);font-size:max(8px,calc(var(--u)*2.5));padding:0 calc(var(--u)*1);z-index:2;font-weight:700}
  #pvw .tag{background:var(--paper)}
  #pvw.empty .tube svg{display:none}
  #pgm{cursor:pointer}
  .cursor{position:absolute;top:0;bottom:0;width:6.25%;background:#fff;opacity:.28;pointer-events:none}

  /* ---------------- what hangs on the wall beside the sets ---------------- */
  #left{position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*18);width:calc(var(--u)*38)}
  #window{height:calc(var(--u)*54);border:max(2px,calc(var(--u)*.75)) solid var(--k);background:#0b0d18}
  #onair,#clock{width:100%}
  .lamp{animation:blink 2.4s steps(1) infinite}
  @keyframes blink{0%,62%{opacity:1}63%,100%{opacity:.15}}
  #onair{margin-top:calc(var(--u)*4);height:calc(var(--u)*12);border:max(2px,calc(var(--u)*.75)) solid var(--k);background:#1d1d24;color:#4a4a58;display:flex;align-items:center;justify-content:center;font-size:max(10px,calc(var(--u)*4.6));font-weight:700}
  #onair.lit{background:var(--neon);color:var(--k)}
  #clock{margin-top:calc(var(--u)*4);height:calc(var(--u)*10);background:var(--k);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:max(10px,calc(var(--u)*4.2))}
  #clock i{font-style:normal;animation:blink 2s steps(1) infinite}
  #window{cursor:pointer;display:block;width:100%} #printer2{flex:1}
  .big .tube svg.faint{opacity:.5}
  .seam:nth-child(1){left:calc(var(--u)*25)}
  .seam:nth-child(2){left:calc(var(--u)*70)}
  .seam:nth-child(3){left:calc(var(--u)*115)}
  .seam:nth-child(4){left:calc(var(--u)*160)}
  .seam:nth-child(5){left:calc(var(--u)*205)}
  .seam:nth-child(6){left:calc(var(--u)*250)}
  .seam:nth-child(7){left:calc(var(--u)*295)}
  #window .clouds{animation:drift 140s linear infinite} @keyframes drift{from{transform:translateX(0)}to{transform:translateX(80px)}}
  #window .plane{animation:fly 53s linear infinite,blink 1.1s steps(1) infinite} @keyframes fly{0%,35%{transform:translate(0,0)}100%{transform:translate(44px,-6px)}}
  #window .rain{display:none} #window.wet .rain{display:block;animation:fall .5s steps(4) infinite} @keyframes fall{from{transform:translate(0,-4px)}to{transform:translate(-2px,4px)}}
  #window .ring{opacity:0} #window.pulse .ring{animation:ring 1.2s steps(4) 2} #window.pulse .r1{animation-delay:.2s} #window.pulse .r2{animation-delay:.4s}
  @keyframes ring{0%{opacity:0}30%{opacity:1}70%{opacity:1}100%{opacity:0}}
  #onair,#clock{cursor:pointer}
  #shelf{margin-top:calc(var(--u)*3);height:calc(var(--u)*13);display:flex;align-items:flex-end;gap:calc(var(--u)*3);border-bottom:calc(var(--u)*1.5) solid var(--k);padding:0 calc(var(--u)*2)}
  #mug{width:calc(var(--u)*8);height:calc(var(--u)*11)} #mug .s0{animation:steam 1.6s steps(1) infinite} #mug .s1{animation:steam 1.6s steps(1) infinite reverse}
  @keyframes steam{0%,49%{opacity:1}50%,100%{opacity:0}}
  #phone{width:calc(var(--u)*17);height:calc(var(--u)*10);margin-left:auto} #phone .bell{fill:#3a3a48} #phone.ringing .bell{fill:var(--neon);animation:blink .4s steps(1) infinite} #phone.ringing{animation:shake .2s steps(2) infinite}
  @keyframes shake{0%{transform:translateX(calc(var(--u)*-.4))}100%{transform:translateX(calc(var(--u)*.4))}}
  #chair{display:block;width:100%;height:calc(var(--u)*19);margin-top:calc(var(--u)*4);background:#0d0d11;border:calc(var(--u)*1.25) solid var(--brass);position:relative}
  #chair span{position:absolute;left:50%;bottom:calc(var(--u)*-1);transform:translate(-50%,50%);background:var(--brass);color:var(--k);font-size:max(7px,calc(var(--u)*2.2));padding:0 calc(var(--u)*1.5);white-space:nowrap}
  #chair i{position:absolute;left:50%;top:22%;width:calc(var(--u)*9);height:calc(var(--u)*9);margin-left:calc(var(--u)*-4.5);border:max(1px,calc(var(--u)*.5)) dashed #2c2c38}
  #moth{position:absolute;left:0;top:0;width:calc(var(--u)*2);height:calc(var(--u)*1.5);z-index:6;pointer-events:none;transition:transform 1.4s steps(9);background:linear-gradient(90deg,var(--paper) 0 35%,transparent 0 65%,var(--paper) 0);animation:flap .18s steps(1) infinite}
  #moth.still{animation:none;background:var(--paper);width:calc(var(--u)*1.5)}
  @keyframes flap{0%,49%{clip-path:inset(0 0 0 0)}50%,100%{clip-path:inset(35% 0 0 0)}}
  .set .tube::after{content:"";position:absolute;left:0;right:0;top:-30%;height:20%;background:rgba(255,255,255,.2);opacity:0;pointer-events:none;z-index:3}
  .set.band .tube::after{opacity:1;animation:band .9s steps(10) both} @keyframes band{from{top:-30%}to{top:110%}}
  .set.burst .tube svg{opacity:.3} .set.burst .tube{background-image:var(--snow);background-size:100% 100%;image-rendering:pixelated}
  .set .prog{position:absolute;width:50%;height:50%;z-index:3;background:linear-gradient(90deg,#f1f1ee 0 12.5%,#ffe14a 0 25%,#39e6ff 0 37.5%,#57d957 0 50%,#ff5fb0 0 62.5%,#e23b3b 0 75%,#3b5be2 0 87.5%,#08080a 0)}
  .set.spot .tube{outline:max(2px,calc(var(--u)*.75)) solid var(--paper);z-index:1}
  #stage.dip #dark{opacity:.45;transition:none}
  #right{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*18);width:calc(var(--u)*38)}
  #charter{display:block;width:100%;height:calc(var(--u)*46);background:var(--brass);color:var(--k);border:max(2px,calc(var(--u)*.75)) solid var(--k);padding:calc(var(--u)*2.5);text-align:left;box-shadow:calc(var(--u)*1.5) calc(var(--u)*1.5) 0 #000}
  #charter svg{width:calc(var(--u)*18);height:calc(var(--u)*12);margin-bottom:calc(var(--u)*2.5)}
  #stage[data-shape=tall] #charter svg{display:none}
  #charter b{display:block;font-size:max(10px,calc(var(--u)*4.2));line-height:1.1}
  #charter span{display:block;margin-top:calc(var(--u)*1.5);font-size:max(8px,calc(var(--u)*2.5));line-height:1.3}
  #charter i{display:block;margin-top:calc(var(--u)*2);height:calc(var(--u)*.75);background:var(--k);opacity:.45;box-shadow:0 calc(var(--u)*2.2) 0 var(--k),0 calc(var(--u)*4.4) 0 var(--k)}
  #charter:hover{transform:translate(calc(var(--u)*-.5),calc(var(--u)*-.5))}
  #tally{margin-top:calc(var(--u)*4);background:var(--k);padding:calc(var(--u)*1.5) calc(var(--u)*2.5);display:grid;gap:calc(var(--u)*.6)}
  #tally div{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u)*1);color:var(--dim);font-size:max(8px,calc(var(--u)*2.5))}
  #tally b{color:var(--paper);font-size:max(10px,calc(var(--u)*3.6))}

  /* ---------------- the console ---------------- */
  #desk{position:absolute;left:0;right:0;top:calc(var(--u)*122);height:calc(var(--u)*48);background:#2b2b36;border-top:calc(var(--u)*1.5) solid #3b3b49;box-shadow:inset 0 calc(var(--u)*.75) 0 #4a4a5a}
  .panel{position:absolute;top:calc(var(--u)*2);bottom:calc(var(--u)*2);background:var(--panel);border:max(1px,calc(var(--u)*.5)) solid var(--k);padding:calc(var(--u)*2.5)}
  #tx{left:calc(var(--u)*4);width:calc(var(--u)*88)} #mix{left:calc(var(--u)*95);width:calc(var(--u)*136)} #mon{left:calc(var(--u)*234);width:calc(var(--u)*82)}
  .cap{position:absolute;left:calc(var(--u)*2.5);top:calc(var(--u)*-.5);transform:translateY(-50%);background:#2b2b36;color:var(--dim);font-size:max(8px,calc(var(--u)*2.5));padding:0 calc(var(--u)*1);white-space:nowrap}
  .key{position:relative;background:#3a3a48;border:max(1px,calc(var(--u)*.5)) solid var(--k);box-shadow:inset 0 calc(var(--u)*-1) 0 #2a2a35,inset 0 calc(var(--u)*.5) 0 #50505f;color:var(--paper);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1);font-size:max(8px,calc(var(--u)*2.7));white-space:nowrap;padding:0 calc(var(--u)*1.2);min-width:0}
  .key:hover{background:#454556}
  .key:active,.key.down{box-shadow:inset 0 calc(var(--u)*.5) 0 #2a2a35;transform:translateY(calc(var(--u)*.5))}
  .key.on{background:var(--paper);color:var(--k);box-shadow:inset 0 calc(var(--u)*-1) 0 #b9b9b0}
  .key i{font-style:normal;color:var(--dim)} .key.on i{color:#55554c}
  .key:disabled{opacity:.4;cursor:default}

  #lcd{position:absolute;left:calc(var(--u)*2.5);top:calc(var(--u)*3);width:calc(var(--u)*50);height:calc(var(--u)*22);background:#0c1204;border:max(1px,calc(var(--u)*.5)) solid var(--k);color:var(--neon);padding:calc(var(--u)*1.5) calc(var(--u)*2);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.4);overflow:hidden}
  #lcd b{font-size:max(10px,calc(var(--u)*3.7));white-space:nowrap} #lcd span{font-size:max(9px,calc(var(--u)*3.1));white-space:nowrap} #lcd small{font-size:max(7px,calc(var(--u)*2.15));color:#8fae2a;white-space:nowrap}
  #qty{position:absolute;left:calc(var(--u)*2.5);top:calc(var(--u)*27);width:calc(var(--u)*50);height:calc(var(--u)*13);display:flex;gap:calc(var(--u)*1);align-items:stretch}
  #qty .key{flex:none;width:calc(var(--u)*11);font-size:max(10px,calc(var(--u)*4))}
  #qty p{flex:1;background:var(--k);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);font-size:max(8px,calc(var(--u)*2.5));color:var(--dim);white-space:nowrap}
  #qty p b{color:var(--paper);font-size:max(10px,calc(var(--u)*4))}
  #lever{position:absolute;right:calc(var(--u)*2.5);top:calc(var(--u)*3);width:calc(var(--u)*30);height:calc(var(--u)*37);background:var(--neon);color:var(--k);border:max(2px,calc(var(--u)*.75)) solid var(--k);box-shadow:inset 0 calc(var(--u)*-2) 0 #94b800;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 calc(var(--u)*1) calc(var(--u)*3);font-size:max(9px,calc(var(--u)*3.3));line-height:1.05;text-align:center}
  #lever svg{width:calc(var(--u)*16);height:calc(var(--u)*18);margin-bottom:calc(var(--u)*1.5);flex:none}
  #lever .arm{transform-origin:8px 14px;transition:transform .12s steps(2)}
  #lever:hover .arm{transform:rotate(12deg)}
  #lever.down{box-shadow:inset 0 calc(var(--u)*.75) 0 #94b800;transform:translateY(calc(var(--u)*1))} #lever.down .arm{transform:rotate(58deg)}
  #lever:disabled{background:#565663;color:#17171c;box-shadow:none;cursor:default}

  .seat{position:absolute;top:calc(var(--u)*3);width:calc(var(--u)*27);height:calc(var(--u)*37);background:var(--k);border:max(1px,calc(var(--u)*.5)) dashed #5a5a6a;display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--u)*1);text-align:center}
  .seat .tube{position:relative;height:calc(var(--u)*24);width:calc(var(--u)*24);margin:0 auto;background:#050506;overflow:hidden;flex:none}
  .seat .tube svg{position:absolute;inset:0}
  .seat b{font-size:max(8px,calc(var(--u)*2.7));margin-top:calc(var(--u)*1);display:block} .seat span{font-size:max(7px,calc(var(--u)*2.15));color:var(--dim);display:block;line-height:1.15}
  .seat.full{border-style:solid;border-color:var(--paper)}
  .seat:hover{border-color:var(--neon)}
  #seatA{left:calc(var(--u)*2.5)} #seatB{left:calc(var(--u)*48)}
  #kinds{position:absolute;left:calc(var(--u)*31);top:calc(var(--u)*3);width:calc(var(--u)*15.5);height:calc(var(--u)*37);display:grid;grid-template-rows:repeat(3,1fr);gap:calc(var(--u)*1)}
  #effects{position:absolute;left:calc(var(--u)*77);top:calc(var(--u)*8);width:calc(var(--u)*34);height:calc(var(--u)*19);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--u)*1)}
  #mix .hint .narrow{display:none} #stage[data-shape=tall] #mix .hint .wide{display:none} #stage[data-shape=tall] #mix .hint .narrow{display:inline}
  #mix .hint{position:absolute;left:calc(var(--u)*77);top:calc(var(--u)*3);width:calc(var(--u)*34);font-size:max(7px,calc(var(--u)*2.15));color:var(--dim);white-space:nowrap}
  #gloss{position:absolute;left:calc(var(--u)*77);top:calc(var(--u)*28.5);width:calc(var(--u)*56);font-size:max(7px,calc(var(--u)*2.2));color:var(--dim);line-height:1.25;height:calc(var(--u)*11.5);overflow:hidden}
  #file{position:absolute;right:calc(var(--u)*2.5);top:calc(var(--u)*3);width:calc(var(--u)*20);height:calc(var(--u)*24);background:var(--paper);color:var(--k);border:max(2px,calc(var(--u)*.75)) solid var(--k);box-shadow:inset 0 calc(var(--u)*-1.5) 0 #b9b9b0;font-size:max(8px,calc(var(--u)*2.8));line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1);padding:0 calc(var(--u)*.5)}
  #file small{font-family:"Space Mono",monospace;font-weight:400;font-size:max(7px,calc(var(--u)*2.15))}
  #file:disabled{background:#565663;box-shadow:none;cursor:default;color:#17171c}
  #file:not(:disabled):active{transform:translateY(calc(var(--u)*.75));box-shadow:none}

  #mon .row{position:absolute;left:calc(var(--u)*2.5);right:calc(var(--u)*2.5);display:flex;gap:calc(var(--u)*1);align-items:stretch}
  #mon .r1{top:calc(var(--u)*3);height:calc(var(--u)*11)} #mon .r2{top:calc(var(--u)*15.5);height:calc(var(--u)*11)} #mon .r3{top:calc(var(--u)*28);height:calc(var(--u)*12)}
  #listen{flex:none;width:calc(var(--u)*23)} #mineKey{flex:none;width:calc(var(--u)*19)}
  #vu{flex:1;background:var(--k);display:flex;align-items:flex-end;gap:calc(var(--u)*.6);padding:calc(var(--u)*1.2)}
  #vu i{flex:1;background:#2c3a08;height:15%} #vu i.hi{background:var(--neon)}
  #shows{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1)}
  #shows .key{flex-direction:column;gap:0;font-size:max(7px,calc(var(--u)*2.3));line-height:1.05;padding:0}
  #shows .key b{font-size:max(9px,calc(var(--u)*3))}
  #printer{flex:1;background:var(--paper);color:var(--k);text-align:left;padding:0 calc(var(--u)*2);display:flex;align-items:center;gap:calc(var(--u)*1.5);font-size:max(8px,calc(var(--u)*2.5));white-space:nowrap;overflow:hidden;border:max(1px,calc(var(--u)*.5)) solid var(--k);box-shadow:inset 0 calc(var(--u)*1.5) 0 #cfcfc6}
  #printer b{flex:none} #printer span{overflow:hidden;text-overflow:ellipsis}
  #printer.jerk{animation:jerk .3s steps(3)} @keyframes jerk{0%{transform:translateY(calc(var(--u)*1.5))}100%{transform:none}}

  /* ---------------- the announcer's line ---------------- */
  #caption{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*10);background:var(--k);border-top:max(2px,calc(var(--u)*.75)) solid var(--neon);display:flex;align-items:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*5)}
  #caption .mic{flex:none;width:calc(var(--u)*4);height:calc(var(--u)*6);fill:var(--neon)}
  #line{flex:1;font-size:max(11px,calc(var(--u)*4.2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:type .5s steps(20)}
  @keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  #steps{flex:none;display:flex;gap:calc(var(--u)*2.5);list-style:none;font-size:max(8px,calc(var(--u)*2.5));color:#55556a}
  #steps li{display:flex;align-items:center;gap:calc(var(--u)*1)} #steps li::before{content:"";width:calc(var(--u)*2);height:calc(var(--u)*2);background:#2c2c38}
  #steps li.lit{color:var(--paper)} #steps li.lit::before{background:var(--neon)}
  #steps li.bad{color:var(--amber)} #steps li.bad::before{background:var(--amber)}
  #how{flex:none;height:calc(var(--u)*6.5);padding:0 calc(var(--u)*2.5);border:max(1px,calc(var(--u)*.5)) solid var(--edge);font-size:max(8px,calc(var(--u)*2.6))} #how:hover{border-color:var(--paper)}

  /* ---------------- things that open over the room ---------------- */
  .slip{position:absolute;z-index:40;background:var(--paper);color:var(--k);border:max(2px,calc(var(--u)*.75)) solid var(--k);box-shadow:calc(var(--u)*2) calc(var(--u)*2) 0 #000;padding:calc(var(--u)*4);font-size:max(9px,calc(var(--u)*2.9))}
  .slip h2{font-size:max(11px,calc(var(--u)*4.4));line-height:1.1;margin-bottom:calc(var(--u)*1.5)}
  .slip .x{position:absolute;right:calc(var(--u)*2);top:calc(var(--u)*2);width:calc(var(--u)*7);height:calc(var(--u)*7);border:max(1px,calc(var(--u)*.5)) solid var(--k);font-size:max(9px,calc(var(--u)*3.4));line-height:1}
  .slip .x:hover{background:var(--k);color:var(--paper)}
  #papers{left:calc(var(--u)*66);top:calc(var(--u)*20);width:calc(var(--u)*188);max-height:calc(var(--u)*146);overflow:auto}
  #papers .who{color:#55554c;margin-bottom:calc(var(--u)*2.5)}
  #papers dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.8) calc(var(--u)*4)}
  #papers dl div{display:flex;justify-content:space-between;gap:calc(var(--u)*2);border-bottom:max(1px,calc(var(--u)*.25)) solid #c8c8bf;padding:calc(var(--u)*.6) 0}
  #papers dt{color:#55554c} #papers dd{font-weight:700;text-align:right}
  #papers .links{margin-top:calc(var(--u)*3);display:flex;gap:calc(var(--u)*2);flex-wrap:wrap}
  .slip a,.slip .link{color:var(--k);border:max(1px,calc(var(--u)*.5)) solid var(--k);padding:calc(var(--u)*1) calc(var(--u)*2);text-decoration:none;font-size:max(8px,calc(var(--u)*2.6))} .slip a:hover,.slip .link:hover{background:var(--k);color:var(--paper)}
  #roll{right:calc(var(--u)*6);top:calc(var(--u)*20);width:calc(var(--u)*120);max-height:calc(var(--u)*146);overflow:auto}
  #roll ol{list-style:none;display:grid;gap:calc(var(--u)*.8);margin-top:calc(var(--u)*2)} #roll li{border-bottom:max(1px,calc(var(--u)*.25)) dashed #b4b4aa;padding-bottom:calc(var(--u)*.8)}
  #picker{right:calc(var(--u)*4);top:calc(var(--u)*14);width:calc(var(--u)*86)}
  #picker ul{list-style:none;display:grid;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*2)}
  #picker li button{width:100%;display:flex;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*1.5) calc(var(--u)*2);border:max(1px,calc(var(--u)*.5)) solid var(--k);text-align:left;font-size:max(9px,calc(var(--u)*3))}
  #picker li button:hover{background:var(--k);color:var(--paper)} #picker img{width:calc(var(--u)*6);height:calc(var(--u)*6);flex:none;image-rendering:auto}
  #picker p{margin-top:calc(var(--u)*2);color:#55554c;line-height:1.35}

  #dark{position:absolute;inset:0;background:var(--k);z-index:50;pointer-events:none;opacity:0;transition:opacity .9s steps(6)}
  #title{position:absolute;left:0;right:0;top:36%;text-align:center;opacity:0;transition:opacity .6s steps(4)} #title b{display:block;color:var(--neon);font-size:max(22px,calc(var(--u)*17));line-height:1} #title span{display:block;margin-top:calc(var(--u)*3);color:var(--dim);font-size:max(10px,calc(var(--u)*3.6))}
  #stage.cold #title{opacity:1}
  #stage.cold #dark{opacity:.93} #stage.cold .set .tube svg,#stage.cold .big .tube svg,#stage.cold .noise{visibility:hidden}

  #sheet{position:fixed;inset:0;z-index:60;background:rgba(8,8,10,.84);display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,40px)}
  .book{background:var(--paper);color:var(--k);border:4px solid var(--k);box-shadow:8px 8px 0 #000;width:min(880px,100%);max-height:100%;display:flex;flex-direction:column}
  .bookhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:4px solid var(--k);background:var(--brass);flex-wrap:wrap}
  #tabs{display:flex;gap:6px;flex-wrap:wrap}
  #tabs button,#shut{font-family:"Pixelify Sans",monospace;font-weight:600;font-size:14px;padding:6px 10px;border:3px solid var(--k);background:var(--paper);color:var(--k)}
  #tabs button.on{background:var(--k);color:var(--neon)}
  .page{overflow:auto;padding:clamp(14px,3vw,30px);font-size:14px;line-height:1.55}
  .page article{max-width:64ch}
  .page h3{font-family:"Pixelify Sans",monospace;font-size:22px;margin:22px 0 8px;line-height:1.15} .page h3:first-child{margin-top:0}
  .page h4{font-family:"Pixelify Sans",monospace;font-size:17px;margin:16px 0 6px}
  .page p,.page ul,.page ol,.page table{margin:0 0 12px} .page ul,.page ol{padding-left:22px}
  .page table{border-collapse:collapse;width:100%;font-size:13px} .page th,.page td{border:2px solid var(--k);padding:5px 8px;text-align:left;vertical-align:top} .page th{background:var(--k);color:var(--paper)}
  .page code{background:#dcdcd4;padding:0 4px}
  .short{display:grid;gap:16px;max-width:60ch}
  .short div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
  .short b{font-family:"Pixelify Sans",monospace;font-size:30px;line-height:1;background:var(--k);color:var(--neon);text-align:center;padding:6px 0}
  .short p{margin:0}

  /* ---------------- a tall room, for a phone held upright ---------------- */
  #stage[data-shape=tall] #logo{left:calc(var(--u)*4);top:calc(var(--u)*3)}
  #stage[data-shape=tall] #pass{right:calc(var(--u)*4);top:calc(var(--u)*3);min-width:calc(var(--u)*52);height:calc(var(--u)*10)}
  #stage[data-shape=tall] #how{height:calc(var(--u)*8)}
  #stage[data-shape=tall] #dial{left:calc(var(--u)*17);top:calc(var(--u)*18);width:calc(var(--u)*146);height:calc(var(--u)*11)}
  #stage[data-shape=tall] .key.turn{top:calc(var(--u)*18);width:calc(var(--u)*10);height:calc(var(--u)*11)} #stage[data-shape=tall] #turnL{left:calc(var(--u)*5)} #stage[data-shape=tall] #turnR{left:calc(var(--u)*165)}
  #stage[data-shape=tall] #tip{top:calc(var(--u)*31)}
  #stage[data-shape=tall] #wall{left:calc(var(--u)*12);top:calc(var(--u)*36);width:calc(var(--u)*156);height:calc(var(--u)*130)}
  #stage[data-shape=tall] #pgm{left:calc(var(--u)*26)} #stage[data-shape=tall] #pvw{left:calc(var(--u)*78)}
  #stage[data-shape=tall] #left{left:calc(var(--u)*4);top:calc(var(--u)*170);width:calc(var(--u)*54);display:grid;grid-template-columns:calc(var(--u)*20) 1fr;grid-template-rows:calc(var(--u)*11) calc(var(--u)*11);gap:calc(var(--u)*2)}
  #stage[data-shape=tall] #window{height:calc(var(--u)*24);grid-row:1/3}
  #stage[data-shape=tall] #onair,#stage[data-shape=tall] #clock{margin:0;height:calc(var(--u)*11);font-size:max(9px,calc(var(--u)*3.6))}
  #stage[data-shape=tall] #shelf,#stage[data-shape=tall] #chair{display:none}
  #stage[data-shape=tall] #right{right:calc(var(--u)*4);top:calc(var(--u)*170);width:calc(var(--u)*114);display:grid;grid-template-columns:1fr calc(var(--u)*46);gap:calc(var(--u)*3)}
  #stage[data-shape=tall] #charter{height:calc(var(--u)*24);order:2;padding:calc(var(--u)*2)} #stage[data-shape=tall] #charter span,#stage[data-shape=tall] #charter i{display:none}
  #stage[data-shape=tall] #tally{margin:0;height:calc(var(--u)*24);padding:calc(var(--u)*1.5) calc(var(--u)*2.5);gap:calc(var(--u)*.4);align-content:center}
  #stage[data-shape=tall] #desk{top:calc(var(--u)*198);height:calc(var(--u)*168)}
  #stage[data-shape=tall] .panel{left:calc(var(--u)*4);width:calc(var(--u)*172);bottom:auto}
  #stage[data-shape=tall] #tx{top:calc(var(--u)*3);height:calc(var(--u)*50)} #stage[data-shape=tall] #mix{top:calc(var(--u)*57);height:calc(var(--u)*66)} #stage[data-shape=tall] #mon{top:calc(var(--u)*127);height:calc(var(--u)*38)}
  #stage[data-shape=tall] #lcd{width:calc(var(--u)*98);height:calc(var(--u)*25)} #stage[data-shape=tall] #qty{top:calc(var(--u)*31);width:calc(var(--u)*98);height:calc(var(--u)*15)}
  #stage[data-shape=tall] #lever{width:calc(var(--u)*64);height:calc(var(--u)*43);font-size:max(10px,calc(var(--u)*4.4))}
  #stage[data-shape=tall] .seat{height:calc(var(--u)*40);width:calc(var(--u)*30)} #stage[data-shape=tall] #seatB{left:calc(var(--u)*72)}
  #stage[data-shape=tall] #kinds{left:calc(var(--u)*35);width:calc(var(--u)*34.5);height:calc(var(--u)*40)}
  #stage[data-shape=tall] #file{width:calc(var(--u)*63);height:calc(var(--u)*40);font-size:max(10px,calc(var(--u)*4))}
  #stage[data-shape=tall] #mix .hint{left:calc(var(--u)*2.5);top:calc(var(--u)*47);width:auto;font-size:max(8px,calc(var(--u)*2.6))} #stage[data-shape=tall] #effects{left:calc(var(--u)*34);top:calc(var(--u)*44.5);width:calc(var(--u)*135);height:calc(var(--u)*11);grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}
  #stage[data-shape=tall] #gloss{left:calc(var(--u)*2.5);top:calc(var(--u)*57.5);width:calc(var(--u)*166);height:calc(var(--u)*6);white-space:nowrap;text-overflow:ellipsis}
  #stage[data-shape=tall] #mon .r1{height:calc(var(--u)*13)} #stage[data-shape=tall] #mon .r2{top:calc(var(--u)*17.5);height:calc(var(--u)*13);left:calc(var(--u)*50)} #stage[data-shape=tall] #mon .r3{display:none}
  #stage[data-shape=tall] #mon .r1{right:auto;width:calc(var(--u)*45)} #stage[data-shape=tall] #vu{display:none} #stage[data-shape=tall] #listen{width:calc(var(--u)*22)} #stage[data-shape=tall] #mineKey{width:calc(var(--u)*22)}
  #stage[data-shape=tall] #mon .r2{top:calc(var(--u)*3)}
  #stage[data-shape=tall] #mon .r4{display:flex;top:calc(var(--u)*18.5);height:calc(var(--u)*13)}
  #mon .r4{display:none}
  #stage[data-shape=tall] #caption{height:calc(var(--u)*14);padding:0 calc(var(--u)*4);gap:calc(var(--u)*2)} #stage[data-shape=tall] #line{white-space:normal;font-size:max(10px,calc(var(--u)*3.6));line-height:1.15;max-height:calc(var(--u)*12)}
  #stage[data-shape=tall] #steps{font-size:0;gap:calc(var(--u)*1.2)}
  #stage[data-shape=tall] #papers{left:calc(var(--u)*6);top:calc(var(--u)*40);width:calc(var(--u)*168);max-height:calc(var(--u)*300)} #stage[data-shape=tall] #roll{left:calc(var(--u)*6);right:auto;top:calc(var(--u)*40);width:calc(var(--u)*168);max-height:calc(var(--u)*300)} #stage[data-shape=tall] #picker{right:calc(var(--u)*4);top:calc(var(--u)*15);width:calc(var(--u)*120)}
  @media (prefers-reduced-motion:reduce){ #moth{display:none} #window .clouds,#window .plane,#mug .s0,#mug .s1{animation:none} #line{animation:none} #back,#left,#right{transform:none} .lamp,#clock i{animation:none} .set.warm .tube svg,.set.cool .tube svg,.set.slip .tube svg,.big.warm .tube svg{animation:none} #dark{transition:none} }