/* Shared front-panel geometry. Both pages use exactly the same 900-unit case
   and 644 × 430.171875 opening (512:342). Never size the two shells separately. */
@font-face { font-family:'Chicago Kare'; src:url('/fonts/ChicagoKare-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
.site-shell { width:calc(100% - 48px); max-width:1202px; margin:20px auto 36px; padding:0; }
.site-controls { margin:28px auto 0; text-align:center; color:#66685e; font:12px/1.5 system-ui,sans-serif; }
.site-controls button { font:12px/1.5 system-ui,sans-serif; border:1px solid #a7a89c; border-radius:3px; background:#fff; color:#292b26; box-shadow:none; padding:9px 14px; }
.site-controls p { margin:12px 0; }
.site-controls p:empty { display:none; }
.site-controls a { color:inherit; text-underline-offset:3px; }
.site-controls .display-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; }
@media (max-width:650px) { .site-shell { width:calc(100% - 32px); margin:16px auto 25px; } }
@media print { .site-shell { width:100%; margin:0; } .site-controls { display:none; } }
.se30-case {
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  width:min(100%,1040px);
  aspect-ratio:900/1160;
  margin-inline:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
/* Only the static housing casts this shadow: never filter the live emulator
   together with an entire 1160-unit faceplate on every framebuffer update. */
.se30-case::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('/se30-case.svg') center/100% 100% no-repeat;
  filter:drop-shadow(3px 6px 1px #746e5844) drop-shadow(0 22px 20px #51493422);
}
.se30-case > .se30-opening {
  position:absolute;
  left:14.222222%; top:12.931034%; width:71.555556%; height:37.083783%;
  padding:0; border:0; border-radius:2.3% / 3.5%; background:#171c18;
  box-shadow:none; overflow:hidden;
}
.se30-case .se30-glass {
  position:relative; width:100%; height:100%; padding:0; border:0;
  border-radius:2.3% / 3.5%; overflow:hidden; background:#171c18;
  aspect-ratio:512/342;
}
.se30-identity { position:absolute; top:80.1%; left:9.1%; display:flex; align-items:flex-start; gap:2cqw; color:#53574a; }
.se30-identity img { display:block; width:4cqw; height:4cqw; }
.se30-identity span { font:2.6cqw/1.2 'Times New Roman',serif; letter-spacing:-.08cqw; }
.se30-byline { display:block; margin-top:.45cqw; font:clamp(8px,1.15cqw,12px)/1.4 system-ui,sans-serif; color:#5f6253; }
.se30-byline a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.se30-byline a:hover { color:#24291f; }
.se30-byline a:focus-visible { outline:2px solid #424a38; outline-offset:3px; }
.se30-case #activity { position:absolute; left:80.222%; top:62.5%; width:2.889%; height:.259%; border:0; border-radius:0; background:#3b4033; box-shadow:none; }
.se30-case #activity.on { background:#cfad66; box-shadow:0 0 3px #e8ab4577; }
/* The optional smaller emulator keeps the same proportions, only its scale changes. */
body:not(.large) .se30-case[data-emulator] { width:min(100%,650px); }
@media print { .se30-case::before { filter:none; } }