:root{
    --green:#3dff7e;
    --green-dim:#1c9a44;
    --green-faint:#0c3a1c;
    --amber:#ffb45a;
    --bg:#02100a;
    /* ---- vintage CRT bezel geometry ---- */
    --bz:32px;            /* top + side plastic thickness */
    --chin:108px;         /* taller bottom plastic that holds the hardware */
    --lip:15px;           /* dark recessed ring between plastic and glass */
    --pl-radius:34px;     /* outer (plastic) corner rounding */
    --glass-radius:18px;  /* inner (glass) corner rounding - convex CRT corners */
    /* ---- the monitor as a centered 4:3 box, capped and floated in a dark room ---- */
    --max-w:1180px;                                              /* never wider than this */
    --mon-w:min(100vw, var(--max-w), 100vh * 4 / 3);            /* 4:3, clamped to viewport */
    --mon-h:calc(var(--mon-w) * 3 / 4);
    --mon-x:calc((100vw - var(--mon-w)) / 2);                   /* centre horizontally */
    --mon-y:calc((100vh - var(--mon-h)) / 2);                   /* centre vertically */
    --glass-w:calc(var(--mon-w) - 2 * var(--bz));
    --glass-h:calc(var(--mon-h) - var(--bz) - var(--chin));
    --glass-l:calc(var(--mon-x) + var(--bz));
    --glass-t:calc(var(--mon-y) + var(--bz));
    /* lights-off plastic: near-black, only the screen's green glow lifts it.
       these are the UNLIT base tones; the green illumination is layered on top. */
    --pl-hi:#1d1c16;      /* faintest catch */
    --pl-1:#161510;       /* upper body */
    --pl-2:#100f0b;       /* mid body */
    --pl-3:#0a0907;       /* lower body */
    --pl-lo:#050403;      /* deep shadow, melts into the room */
    --pl-recess:#070705;  /* near-black recess around the glass */
  }
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;background:#000;}
  /* first-paint black cover - kills the split-second monitor flash before the
     JS gate is built. removed by sound.js once #sfx-gate (also black) exists. */
  #preboot{position:fixed;inset:0;background:#000;z-index:300;pointer-events:none;}
  body{
    font-family:"VT323","Courier New",Consolas,monospace;
    color:var(--green);
    font-size:23px;
    line-height:1.28;
    letter-spacing:.5px;
    padding:0;
    overflow-x:hidden;
    -webkit-font-smoothing:none;
    /* phosphor-tube tint with a brighter bloom toward the centre */
    background:
      radial-gradient(120% 85% at 50% 36%, rgba(40,150,80,.18), rgba(2,16,10,0) 62%),
      var(--bg);
  }
  /* realistic CRT scanlines: soft, dense, symmetric lines (a smooth dark->light->dark
     ramp every ~2.6px) rather than hard black bars, darkening via multiply */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:55;
    background:repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,.26) 1.3px,
      rgba(0,0,0,0) 2.6px);
    mix-blend-mode:multiply;opacity:.65;
  }
  /* curved-glass vignette, bloom, slow scan sweep, flicker */
  #crt{
    position:fixed;left:var(--glass-l);top:var(--glass-t);width:var(--glass-w);height:var(--glass-h);
    pointer-events:none;z-index:60;border-radius:var(--glass-radius);overflow:hidden;
    background:
      /* faint green phosphor sparkle (the speckle in real phosphor coatings) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0.5 0.5 0.5 0 0 0.15 0.15 0.15 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.32'/%3E%3C/svg%3E") 0 0 / 190px 190px,
      /* soft reflection sheen down from the top edge of the convex glass */
      radial-gradient(120% 52% at 50% 0%, rgba(120,255,170,.05), rgba(120,255,170,0) 56%),
      /* gentle centre bloom -> sells the bulge without raising overall brightness */
      radial-gradient(82% 62% at 50% 46%, rgba(60,210,120,.05), rgba(60,210,120,0) 62%),
      /* curvature vignette: edges + corners fall into deep shadow */
      radial-gradient(125% 125% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.50) 80%, rgba(0,0,0,.90) 100%);
    background-blend-mode:screen, normal, normal, normal;
    box-shadow:
      inset 0 0 130px 34px rgba(0,0,0,.62),
      inset 0 0 50px rgba(10,42,22,.55),
      inset 0 0 26px rgba(40,160,90,.14);   /* faint phosphor glow hugging the glass edge */
    animation:crtflicker 6s linear infinite;
  }
  #crt::before{   /* the slow refresh band sweeping down the tube */
    content:"";position:absolute;left:0;right:0;height:140px;top:-140px;
    background:linear-gradient(rgba(80,255,150,0) 0%, rgba(90,255,160,.05) 45%, rgba(140,255,190,.08) 50%, rgba(90,255,160,.05) 55%, rgba(80,255,150,0) 100%);
    animation:scansweep 7.5s linear infinite;
  }
  @keyframes scansweep{ 0%{transform:translateY(0);} 100%{transform:translateY(120vh);} }
  @keyframes crtflicker{
    0%,100%{opacity:1;} 50%{opacity:.985;} 82%{opacity:1;} 83%{opacity:.9;} 84%{opacity:1;}
    92%{opacity:1;} 93%{opacity:.88;} 94%{opacity:1;} 96%{opacity:.95;} 97%{opacity:1;}
  }
  /* (scanlines consolidated into the single body::after above; the glass curvature,
     bloom and phosphor grain live on #crt below) */
  #wrap{
    min-height:100%;
    /* first line starts just inside the glass top; bottom clears the chin + room below */
    padding:calc(var(--glass-t) + var(--lip) + 6px) 24px calc(var(--mon-y) + var(--chin) + 96px);
    max-width:var(--glass-w);
    margin:0 auto;
    /* phosphor bloom on the text itself */
    text-shadow:0 0 4px rgba(61,255,126,.55), 0 0 11px rgba(61,255,126,.32), 0 0 22px rgba(61,255,126,.12);
    animation:crtflicker 7s linear infinite;
  }
  #screen .line{white-space:pre-wrap;word-break:break-word;position:relative;}
  /* ---- in-chat debug markers (toggle with backtick; hidden when body.dbg-off) ---- */
  .dbg-ts{position:absolute;top:1px;right:2px;font-family:"Courier New",monospace;font-size:10px;
    letter-spacing:0;color:var(--green-faint);background:var(--bg);padding:0 3px;text-shadow:none;pointer-events:none;}
  .dbg-note{font-family:"Courier New",monospace;font-size:12px;letter-spacing:0;color:var(--green-faint);
    text-shadow:none;opacity:.85;margin:1px 0;}
  .dbg-sep{position:relative;border:0;border-top:1px dashed var(--green-faint);height:0;margin:16px 0 11px;text-shadow:none;}
  .dbg-sep::after{content:attr(data-label);position:absolute;left:50%;top:-9px;transform:translateX(-50%);
    background:var(--bg);padding:0 12px;white-space:nowrap;font-family:"Courier New",monospace;font-size:11px;
    letter-spacing:1.5px;color:var(--green-dim);text-shadow:none;}
  body.dbg-off .dbg-ts,body.dbg-off .dbg-note,body.dbg-off .dbg-sep,body.dbg-off #debug{display:none !important;}
  /* a public photo of the visitor, rendered like a scan on a green phosphor monitor */
  .photo-line{margin:12px 0;}
  .crt-photo{display:inline-block;position:relative;padding:7px 7px 5px;border:1px solid var(--green-faint);
    background:#020d08;box-shadow:0 0 16px rgba(61,255,126,.18), inset 0 0 24px rgba(61,255,126,.06);}
  .crt-photo img{display:block;width:200px;height:auto;image-rendering:pixelated;
    /* desaturate, then push the whole image into phosphor green */
    filter:grayscale(1) sepia(1) hue-rotate(58deg) saturate(3.4) brightness(.95) contrast(1.2);
    mix-blend-mode:screen;opacity:.9;}
  /* scanlines + a soft vignette over the photo */
  .crt-photo::after{content:"";position:absolute;inset:7px 7px 5px;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
               radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45));
    mix-blend-mode:multiply;}
  .photo-cap{margin-top:5px;font-size:11px;color:var(--green-dim);letter-spacing:0;}
  .dim{color:var(--green-dim);text-shadow:0 0 5px rgba(31,154,63,.3);}
  .amber{color:var(--amber);text-shadow:0 0 6px rgba(255,180,84,.35);}
  #cursor{
    display:inline-block;width:.62em;height:1.05em;margin-left:1px;
    background:var(--green);vertical-align:-2px;box-shadow:0 0 10px rgba(61,255,126,.85),0 0 20px rgba(61,255,126,.4);
  }
  #cursor.blink{animation:blink 1.05s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}

  /* terminal-styled input - just a glowing line, no UI chrome */
  .terminal-input{
    background:transparent;border:none;outline:none;
    color:var(--green);font:inherit;text-shadow:inherit;
    caret-color:var(--green);padding:0;margin:0;width:60%;min-width:180px;
  }
  /* mask a type=text field as a password (dots) without triggering the browser's
     save-password manager. used for the phase-3 password check. */
  .pw-mask{ -webkit-text-security:disc; text-security:disc; }
  /* the autofill trap form - kept text-only / line-only to match aesthetic */
  #trap{display:none;margin:.2em 0 .4em;}
  #trap .field{display:flex;gap:.6em;align-items:baseline;margin:.15em 0;}
  #trap label{color:var(--green-dim);min-width:9.5em;}
  #trap input{
    background:transparent;border:none;border-bottom:1px solid var(--green-faint);
    outline:none;color:var(--green);font:inherit;text-shadow:inherit;
    caret-color:var(--green);padding:1px 2px;flex:1;min-width:120px;
  }
  /* autofill detection hook */
  #trap input:-webkit-autofill{ animation-name:onAutoFill; animation-duration:.01s; }
  @keyframes onAutoFill{from{}to{}}
  #trap button, .ghost-btn{
    background:transparent;color:var(--green);border:1px solid var(--green-faint);
    font:inherit;padding:.25em .9em;margin-top:.5em;cursor:pointer;text-shadow:inherit;
  }
  #trap button:hover,.ghost-btn:hover{border-color:var(--green-dim);}

  /* key panel overlay */
  #keypanel{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:100;background:#020602;border:1px solid var(--green-faint);
    padding:26px 28px;max-width:560px;width:calc(100% - 36px);
    box-shadow:0 0 40px rgba(51,255,102,.12);
  }
  #keypanel h1{font-size:18px;margin:0 0 4px;font-weight:normal;letter-spacing:1px;}
  #keypanel p{color:var(--green-dim);font-size:13px;line-height:1.5;margin:.5em 0;}
  #keypanel input[type=password],#keypanel input[type=text]{
    width:100%;background:#000;border:1px solid var(--green-faint);
    color:var(--green);font:inherit;padding:8px;outline:none;margin:.4em 0;
  }
  #keypanel .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
  #keypanel button{
    background:#03130a;color:var(--green);border:1px solid var(--green-dim);
    font:inherit;padding:9px 16px;cursor:pointer;flex:1;min-width:160px;text-shadow:inherit;
  }
  #keypanel button.secondary{border-color:var(--green-faint);color:var(--green-dim);}
  #keypanel button:hover{background:#072414;}
  #keypanel small{color:var(--green-faint);display:block;margin-top:14px;font-size:11px;line-height:1.5;}
  /* always-on user input bar (the shared-surface model) */
  #userbar{position:fixed;left:50%;transform:translateX(-50%);width:var(--glass-w);bottom:calc(var(--mon-y) + var(--chin) + 30px);display:none;background:linear-gradient(0deg,#02100a 80%,rgba(2,16,10,.6));border-top:1px solid var(--green-faint);z-index:80;}
  /* dev telemetry HUD pinned below the input - drag the top grip to resize */
  #debug{position:fixed;left:50%;transform:translateX(-50%);width:var(--glass-w);bottom:calc(var(--mon-y) + var(--chin));z-index:84;height:66px;
    font-family:"Courier New",Consolas,monospace;font-size:11px;line-height:1.45;letter-spacing:0;
    color:var(--green-dim);background:#010a06;border-top:1px solid var(--green-faint);
    padding:5px 14px;overflow-y:auto;overflow-x:hidden;text-shadow:none;
    scrollbar-width:none;-ms-overflow-style:none;}   /* scrollable, but no visible scrollbar */
  #debug::-webkit-scrollbar{width:0;height:0;display:none;}
  #debug-grip{position:sticky;top:0;height:8px;margin:-5px -14px 5px;cursor:ns-resize;z-index:2;
    background:#010a06;border-bottom:1px solid var(--green-faint);}
  #debug-grip::after{content:"";position:absolute;left:50%;top:3px;width:46px;height:2px;transform:translateX(-50%);
    background:repeating-linear-gradient(90deg,var(--green-dim) 0 5px,transparent 5px 9px);opacity:.8;}
  #debug-grip:hover::after{opacity:1;}
  #debug .drow{display:flex;flex-wrap:wrap;gap:2px 14px;}
  #debug .drow.dsrc{white-space:normal;word-break:break-word;}
  #debug i{color:var(--green-faint);font-style:normal;}
  #debug b{color:var(--green);font-weight:normal;}
  #debug .src{color:var(--green-dim);}
  #userbar .inner{max-width:860px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:11px 18px;}
  #userbar .p{color:var(--green-dim);white-space:nowrap;}
  #userin{flex:1;background:transparent;border:none;outline:none;color:#8effb0;font:inherit;
    text-shadow:0 0 6px rgba(125,255,166,.5);caret-color:#8effb0;letter-spacing:inherit;}
  .line.user{color:#8effb0;text-shadow:0 0 7px rgba(125,255,166,.45);}
  /* the post-deletion protection card (clickable, stays on screen) */
  .res{margin-top:1.3em;}
  .res-h{color:var(--amber);margin-bottom:.55em;}
  .res-row{margin:.2em 0;line-height:1.5;}
  .res a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 6px rgba(61,255,126,.45);}
  .res a:hover{color:#9dffbc;}
  .res-share{margin-top:1.1em;color:var(--amber);}
  .res-share-preview{margin:.5em 0;line-height:1.5;border-left:2px solid var(--green-faint);padding-left:.7em;font-style:italic;}
  .res-share-actions{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;margin:.6em 0 .3em;}
  .res-share-status{font-size:.85em;}
  .res-share-note{font-size:11px;margin-top:.2em;opacity:.8;}
  .footer{position:fixed;left:50%;transform:translateX(-50%);width:var(--glass-w);bottom:calc(var(--mon-y) + var(--chin));text-align:center;font-size:11px;color:var(--green-faint);padding:7px;background:linear-gradient(0deg,#02100a,transparent);z-index:40;}
  .footer a{color:var(--green-dim);}
  /* =====================================================================
     VINTAGE CRT MONITOR BEZEL  (full-viewport plastic frame + hardware)
     A fixed overlay frame with the glass area punched out via mask-composite,
     so the window keeps scrolling normally underneath. Pure CSS, no images.
     ===================================================================== */
  #bezel{
    position:fixed;left:var(--mon-x);top:var(--mon-y);width:var(--mon-w);height:var(--mon-h);
    z-index:70;pointer-events:none;
    border-radius:var(--pl-radius);
    /* molded tan plastic: fine grain + soft mottle over a top-lit vertical body.
       the two SVG noise layers give it the textured, slightly uneven plastic feel. */
    background:
      /* fine grain: small tile, overlay so it reads evenly on light AND dark plastic */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E") 0 0 / 240px 240px,
      /* soft mottle: ONE large field stretched across the whole frame, no tiling seams */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
      /* the screen's green phosphor glow washing onto the surrounding plastic,
         brightest at the glass and falling off into shadow at the outer edges */
      radial-gradient(125% 105% at 50% 44%,
        rgba(86,224,140,.40) 0%, rgba(48,150,92,.20) 26%,
        rgba(20,70,42,.07) 46%, rgba(0,0,0,0) 64%),
      linear-gradient(180deg, var(--pl-hi) 0%, var(--pl-1) 14%, var(--pl-2) 52%, var(--pl-3) 82%, var(--pl-lo) 100%);
    background-blend-mode:overlay, soft-light, screen, normal;
    /* punch out the glass: whole frame MINUS the inner screen rectangle */
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--bz) var(--bz) /
        calc(100% - 2*var(--bz)) calc(100% - var(--bz) - var(--chin)) no-repeat;
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--bz) var(--bz) /
        calc(100% - 2*var(--bz)) calc(100% - var(--bz) - var(--chin)) no-repeat;
    mask-composite:exclude;
    /* molded edge highlights/shadows (inset only; outset shadow lives on #monitor-shadow,
       since this element is masked and would clip an outer drop shadow) */
    box-shadow:
      inset 0 1px 1px rgba(150,210,170,.12),   /* faint green catch on the top edge */
      inset 0 -4px 9px rgba(0,0,0,.70),
      inset 2px 0 5px rgba(0,0,0,.45),
      inset -2px 0 5px rgba(0,0,0,.55);
  }
  /* dark room behind the monitor; the glass rectangle is punched out so the live
     screen shows through while everything else scrolling by stays hidden */
  #matte{
    position:fixed;inset:0;z-index:68;pointer-events:none;
    /* the 80s dystopian bedroom behind the monitor, dimmed by a lights-off vignette
       so the green screen stays the only real light source. masked at the glass. */
    background:
      radial-gradient(120% 100% at 50% 40%, rgba(6,8,12,.42) 0%, rgba(3,4,6,.74) 58%, rgba(0,0,0,.93) 100%),
      url("/img/background2.png") center center / cover no-repeat,
      #050506;
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--glass-l) var(--glass-t) / var(--glass-w) var(--glass-h) no-repeat;
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--glass-l) var(--glass-t) / var(--glass-w) var(--glass-h) no-repeat;
    mask-composite:exclude;
  }
  /* faint old-TV static over the background image, so the room feels alive.
     a tiny <canvas> redrawn with random noise each frame (static-fx.js) - the
     only reliable way to animate true static; CSS can't swap noise per frame.
     masked at the glass exactly like #matte, so it never touches the screen. */
  #static-fx{
    position:fixed;inset:0;width:100%;height:100%;z-index:68;pointer-events:none;
    image-rendering:pixelated;
    opacity:.02;                /* subtle - just enough to feel alive. tune to taste */
    mix-blend-mode:screen;       /* soft grey sparkle lifting off the dark room */
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--glass-l) var(--glass-t) / var(--glass-w) var(--glass-h) no-repeat;
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) var(--glass-l) var(--glass-t) / var(--glass-w) var(--glass-h) no-repeat;
    mask-composite:exclude;
  }
  /* the monitor's drop shadow + outer seam, cast onto the room (unmasked) */
  #monitor-shadow{
    position:fixed;left:var(--mon-x);top:var(--mon-y);width:var(--mon-w);height:var(--mon-h);
    z-index:69;pointer-events:none;border-radius:var(--pl-radius);
    box-shadow:0 0 0 2px #241d12, 0 10px 26px rgba(0,0,0,.6), 0 34px 72px rgba(0,0,0,.9);
  }
  /* the dark recessed lip that the plastic curves down into around the glass.
     A rounded ring drawn on top of the plastic's (square) inner mask edge. */
  #screen-lip{
    position:fixed;left:var(--glass-l);top:var(--glass-t);width:var(--glass-w);height:var(--glass-h);
    z-index:71;pointer-events:none;border-radius:var(--glass-radius);
    box-shadow:
      0 0 0 var(--lip) var(--pl-recess),                 /* near-black recess ring */
      inset 0 0 0 2px #000,                              /* crisp black inner edge */
      inset 0 0 18px 7px rgba(0,0,0,.85),                /* glass sits in shadow */
      0 0 22px 5px rgba(60,190,115,.30),                 /* green phosphor spill onto the plastic */
      0 0 46px 14px rgba(45,150,90,.16);                 /* wider, softer green bloom */
  }
  /* ---- the chin: hardware sits here, drawn as children of #bezel ---- */
  #bezel .hw{position:absolute;pointer-events:none;}
  /* speaker vents, lower-left */
  #bezel .vents{
    left:46px;bottom:calc(var(--chin)/2);transform:translateY(50%);
    width:150px;height:34px;border-radius:3px;
    background:repeating-linear-gradient(90deg,
      rgba(0,0,0,.7) 0 3px, rgba(150,200,170,.06) 3px 7px);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(150,200,170,.08);
    opacity:.9;
  }
  /* round power / eject button, center-left of the chin */
  #bezel .knob{
    left:230px;bottom:calc(var(--chin)/2);transform:translateY(50%);
    width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 38% 30%, #2c2e26, #1a1a14 58%, #0a0a08 100%);
    box-shadow:inset 0 1px 2px rgba(150,200,170,.16), inset 0 -2px 3px rgba(0,0,0,.6),
               0 2px 4px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.4);
  }
  /* the knob is the live POWER button - clickable, with the universal power glyph.
     scoped under #bezel so it outranks "#bezel .hw{pointer-events:none}" */
  #bezel #power-btn{pointer-events:auto;cursor:pointer;outline:none;
    transition:box-shadow .12s ease, transform .06s ease;}
  #bezel #power-btn::before{   /* ring of the power symbol */
    content:"";position:absolute;inset:9px;border-radius:50%;
    border:2px solid rgba(150,205,170,.55);box-sizing:border-box;
    box-shadow:0 0 4px rgba(60,190,115,.35);}
  #bezel #power-btn::after{    /* the bar through the top of the ring */
    content:"";position:absolute;left:50%;top:6px;width:2px;height:12px;
    transform:translateX(-50%);border-radius:1px;
    background:rgba(160,215,180,.7);box-shadow:0 0 4px rgba(60,190,115,.45);}
  #bezel #power-btn:hover{box-shadow:inset 0 1px 2px rgba(150,200,170,.22), inset 0 -2px 3px rgba(0,0,0,.6),
               0 2px 5px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.4), 0 0 9px rgba(60,190,115,.45);}
  #bezel #power-btn:active{transform:translateY(calc(50% + 1px)) scale(.96);}
  #bezel #power-btn:focus-visible{box-shadow:0 0 0 2px rgba(60,190,115,.8), 0 0 12px rgba(60,190,115,.5);}
  /* locked while a close is playing out - no press, glyph dimmed */
  #bezel #power-btn.pw-busy{cursor:default;}
  #bezel #power-btn.pw-busy::before,#bezel #power-btn.pw-busy::after{opacity:.3;box-shadow:none;}
  /* the final screen is up: the button now reboots - invite the press with a pulse */
  #bezel #power-btn.pw-restart{cursor:pointer;animation:pwpulse 1.9s ease-in-out infinite;}
  #bezel #power-btn.pw-restart::before{border-color:rgba(130,255,180,.9);box-shadow:0 0 7px rgba(60,210,130,.6);}
  #bezel #power-btn.pw-restart::after{background:rgba(180,255,205,.95);box-shadow:0 0 7px rgba(60,210,130,.7);}
  @keyframes pwpulse{
    0%,100%{box-shadow:inset 0 1px 2px rgba(150,200,170,.16), inset 0 -2px 3px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.4), 0 0 5px rgba(60,210,130,.25);}
    50%{box-shadow:inset 0 1px 2px rgba(150,200,170,.16), inset 0 -2px 3px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.4), 0 0 14px rgba(60,230,140,.6);}
  }
  /* debossed nameplate, just right of the knob */
  #bezel .plate{
    left:288px;bottom:calc(var(--chin)/2);transform:translateY(50%);
    font-family:"VT323","Courier New",monospace;font-size:17px;letter-spacing:2px;
    color:rgba(120,170,140,.45);
    text-shadow:0 0 4px rgba(60,190,115,.25), 0 1px 0 rgba(0,0,0,.6);text-transform:uppercase;
  }
  /* row of 4 square function buttons, right side */
  #bezel .btns{
    right:120px;bottom:calc(var(--chin)/2);transform:translateY(50%);
    display:flex;gap:14px;
  }
  #bezel .btns i{
    display:block;width:40px;height:30px;border-radius:5px;
    background:linear-gradient(180deg,#26271f,#17170f 55%,#0b0b08);
    box-shadow:inset 0 1px 1px rgba(150,200,170,.16), inset 0 -2px 3px rgba(0,0,0,.6),
               0 2px 4px rgba(0,0,0,.6);
  }
  /* power LED, far right, lit phosphor green */
  #bezel .led{
    right:54px;bottom:calc(var(--chin)/2);transform:translateY(50%);
    width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #b6ffce, #3dff7e 55%, #14a046 100%);
    box-shadow:0 0 8px 2px rgba(61,255,126,.85), 0 0 18px 4px rgba(61,255,126,.45),
               inset 0 -1px 2px rgba(0,0,0,.4);
  }

  @media (max-width:560px){
    body{font-size:15px;}
    /* on phones the 4:3 box would be tiny; fill the viewport instead */
    :root{
      --bz:16px;--chin:64px;--lip:9px;--pl-radius:20px;
      --mon-w:100vw;--mon-h:100vh;--mon-x:0px;--mon-y:0px;
    }
    #wrap{padding:calc(var(--glass-t) + var(--lip) + 4px) 16px calc(var(--mon-y) + var(--chin) + 70px);}
    /* shrink + reflow the hardware for the narrow chin */
    #bezel .vents{left:18px;width:74px;height:20px;}
    #bezel .knob{left:110px;width:22px;height:22px;}
    #bezel .plate{display:none;}
    #bezel .btns{right:54px;gap:7px;}
    #bezel .btns i{width:22px;height:17px;}
    #bezel .led{right:22px;width:9px;height:9px;}
  }