:root { --paper:#fff; --ink:#000; --muted:#000; --line:#000; --blue:#000; --green:#000; background:#f5f4ee; }
body { background:#f5f4ee; }
.display-filters { position:absolute; pointer-events:none; }
.skip-link { position:fixed; top:8px; left:8px; z-index:10; padding:10px; background:white; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
/* Classic layout proportions, but live text keeps the browser's full output
   resolution. Do not pixel-sample or displace HTML glyphs. */
.setup-display { width:512px; height:342px; background:#fff; color:#000; font:16px/22px 'Chicago Kare',Chicago,Geneva,sans-serif; font-synthesis:none; display:flex; flex-direction:column; transform-origin:top left; }
.setup-display.crt-enabled { filter:url(#setup-phosphor); }
.setup-display * { font-family:inherit; font-weight:400; letter-spacing:0; }
.setup-display small { font-size:inherit; }
.setup-display h1,.setup-display h2,.setup-display .mac-menu,.setup-display .titlebar span { font-family:'Chicago Kare',Chicago,Geneva,sans-serif; }
.mac-menu { display:flex; height:20px; align-items:center; flex-shrink:0; gap:14px; padding:0 10px; border-bottom:1px solid #000; background:#fff; white-space:nowrap; font-size:16px; }
.menu-mark { display:block; width:13px; height:14px; filter:grayscale(1) brightness(0); }
.desktop { min-height:0; flex:1; padding:10px; background-color:#fff; background-image:conic-gradient(#fff 25%,#000 0 50%,#fff 0 75%,#000 0); background-size:2px 2px; }
.window { height:100%; display:flex; flex-direction:column; border:1px solid #000; padding:1px; outline:1px solid #fff; box-shadow:2px 2px 0 1px #000; background:#fff; }
.titlebar { flex-shrink:0; height:20px; border-bottom:1px solid #000; background:#fff; }
/* Six one-pixel rules inset from the frame, as in an active System 7 window. */
.titlebar::before { content:''; position:absolute; top:3px; right:2px; left:2px; height:12px; background:repeating-linear-gradient(#000 0 1px,#fff 1px 2px); pointer-events:none; }
.titlebar h1 { position:absolute; top:0; left:50%; transform:translateX(-50%); max-width:calc(100% - 38px); margin:0; padding:0 7px; font:16px/18px 'Chicago Kare',Chicago,monospace; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.titlebar span { position:static; inset:auto; transform:none; padding:0; font:inherit; background:transparent; }
.closebox { width:11px; height:11px; left:6px; top:3px; border:1px solid #000; background:#fff; box-shadow:0 0 0 2px #fff,inset 1px 1px 0 #fff,inset -1px -1px 0 #000; }
h1,h2 { font:16px/20px 'Chicago Kare',Chicago,monospace; margin:0 0 4px; letter-spacing:0; }
main { display:block; overflow:auto; overscroll-behavior:contain; scrollbar-color:#000 #fff; scrollbar-width:thin; scrollbar-gutter:stable; min-height:0; flex:1; scroll-padding:10px; }
.flow { padding:10px; }
.step { display:grid; gap:7px; grid-template-columns:18px minmax(0,1fr); padding:12px 0; border-bottom:1px solid #000; }
.step-number { width:17px; height:17px; border:1px solid #000; font-size:16px; line-height:15px; }
.step.locked { opacity:1; color:#000; }
.step.locked .step-number { border-style:dotted; }
.step.locked .step-number { color:#000; border-color:#000; }
.step.locked .quiet { color:#000; }
.step p { margin:0 0 6px; }
.controls { gap:7px; margin-top:6px; }
.pairing-panel { margin:12px 0; padding:10px 12px; border:1px solid #000; background:#fff; }
.pairing-panel .controls:has(button[hidden]),.download-option:has(button[hidden]) { display:none; }
.pairing-panel .controls { margin-top:10px; }
.setup-display .pairing-panel .code { margin:0 0 8px; }
.pairing-panel p:last-child { margin-bottom:0; }
.setup-display button,.setup-display .button { position:relative; min-height:24px; border:3px solid transparent; border-image:url('/system7-button.svg') 3 fill stretch; border-radius:0; padding:0 10px; color:#000; background:transparent; box-shadow:none; font:16px/18px 'Chicago Kare',Chicago,Geneva,sans-serif; }
.setup-display button.primary { outline:none; }
.setup-display button.primary::before { content:''; position:absolute; inset:-8px; border:5px solid transparent; border-image:url('/system7-default-ring.svg') 5 stretch; pointer-events:none; }
.setup-display button:hover,.setup-display .button:hover { background:transparent; color:#000; }
button:focus-visible,input:focus-visible,a:focus-visible,main:focus-visible { outline:1px dotted #000; outline-offset:3px; }
.setup-display button:focus-visible { outline:2px dotted #000; outline-offset:4px; }
.setup-display button:active,.setup-display .button:active { transform:none; box-shadow:none; border-image-source:url('/system7-button-active.svg'); background:transparent; color:#fff; }
.setup-display button.text-link { display:inline; min-height:0; padding:0; border:0; border-image:none; border-radius:0; background:transparent; color:inherit; font:inherit; text-align:left; text-decoration:underline; text-underline-offset:3px; }
.setup-display button.text-link:active { background:#000; color:#fff; }
button[disabled],.button.disabled { opacity:1; border-image-source:url('/system7-button-disabled.svg'); color:#000; }
input { min-height:30px; width:min(100%,245px); border:1px solid #000; border-radius:0; padding:4px 5px; font-size:16px; line-height:20px; accent-color:#000; }
input::placeholder { color:#000; opacity:1; }
fieldset legend { font-size:16px; }
fieldset label { display:flex; align-items:center; gap:4px; min-height:22px; }
input[type=radio] { margin:0; width:12px!important; height:12px; }
.setup-display .code { max-width:100%; margin:8px 0 3px; padding:6px 8px; border:1px solid #000; font:600 15px/20px ui-monospace,Menlo,monospace; letter-spacing:1px; white-space:nowrap; }
.timer { font-size:16px; }
aside { margin:0 10px 10px; padding:9px; border:1px solid #000; background:#fff; font-size:16px; }
aside h2 { font-size:16px; }
.device { padding:5px 0; }
.device button { font-size:16px; min-height:24px; padding:3px 5px; margin-top:4px; }
.notice { flex-shrink:0; margin:0; border:0; border-top:1px solid #000; background:#fff; padding:4px 8px; min-height:29px; max-height:69px; overflow:auto; font-size:16px; line-height:20px; overflow-wrap:anywhere; }
.notice.error { color:#000; border-color:#000; background:#fff; }
.notice.error::before { content:'! '; }
/* Optional readable mode is deliberately not constrained by a tiny Mac raster. */
.shell.readable .se30-case { aspect-ratio:auto; background:none; filter:none; }
.shell.readable .se30-case::before { display:none; }
.shell.readable .se30-opening { position:relative; inset:auto; width:100%; height:auto; border-radius:0; }
.shell.readable .se30-glass { height:auto; aspect-ratio:auto; border-radius:0; }
.shell.readable .setup-display { zoom:1!important; width:100%; height:650px; max-height:85vh; font-family:system-ui,sans-serif; }
.shell.readable .se30-identity { display:none; }
@media (forced-colors:active), (prefers-contrast:more) { .setup-display.crt-enabled { filter:none; } }
@media (forced-colors:active) {
  .setup-display button,.setup-display .button { border:1px solid ButtonText; border-image:none; background:ButtonFace; color:ButtonText; }
  .setup-display button.primary::before { border:2px solid ButtonText; border-image:none; }
  .setup-display button.text-link { border:0; background:transparent; }
}
@media print {
  .setup-display.crt-enabled { filter:none; }
  .se30-identity,.site-controls,.mac-menu,.titlebar { display:none; }
  .shell { width:100%; margin:0; }
  .shell .se30-case { aspect-ratio:auto; background:none; filter:none; }
  .shell .se30-case::before { display:none; }
  .shell .se30-opening { position:relative; inset:auto; width:100%; height:auto; border-radius:0; }
  .shell .se30-glass { height:auto; aspect-ratio:auto; overflow:visible; }
  .setup-display { zoom:1!important; width:100%; height:auto; }
  .desktop,.window { padding:0; border:0; background:white; box-shadow:none; overflow:visible; }
  .window { height:auto; display:block; }
  main { overflow:visible; }
}