:root { color-scheme: light; font-family: system-ui, sans-serif; color: #292b26; background: #f5f4ee; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
main:not(.site-shell) { max-width: 1060px; margin: 36px auto; padding: 0 24px; }
h1 { font-family: Georgia, serif; font-size: 36px; margin: 0; }
/* The case is CSS. All CRT optics are computed inside the WebGL renderer. */
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; outline: none; cursor: none; touch-action: none; }
canvas:focus-visible { outline: 2px solid #84918d; outline-offset: -2px; }
.fallback-screen { position: absolute; inset: 0; pointer-events: none; }
.render-fallback { opacity: 0; position: relative; z-index: 1; }
#cover { position: absolute; z-index: 2; inset: 0; background: #eef0e8; display: flex; align-items: center; justify-content: center; justify-content: safe center; flex-direction: column; text-align: center; padding: 16px; overflow: auto; }
#cover[hidden] { display: none; }
#cover > * { flex-shrink: 0; }
#coverStatus { max-width: 360px; }
#cover:not([data-state=idle]) .mac-icon, #cover:not([data-state=idle]) .small { display: none; }
#cover[data-state=error] { background: #f3f0e6; box-shadow: inset 0 0 0 4px #716653; }
#cover[data-state=error] h2 { color: #4d392e; }
#cover #coverDetail { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
#cover #elapsed { font-size: 11px; color: #65695e; min-height: 1em; }
#elapsed:empty { display: none; }
#loading { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; margin: 14px 0 6px; }
#loading[hidden], #start[hidden], #screenNotice[hidden] { display: none; }
.loading-spinner { width: 22px; height: 22px; border: 3px solid #bdc3b5; border-top-color: #354536; border-radius: 50%; animation: loading-turn .9s linear infinite; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; border-style: dotted; } }
#screenNotice { position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px; display: flex; align-items: start; gap: 8px; padding: 10px 12px; background: #f2f3eaf5; color: #303b2f; border: 1px solid #646f5c; box-shadow: 0 2px 6px #0003; border-radius: 3px; }
#noticeText { flex: 1; font-size: 12px; line-height: 1.4; margin: 0; }
#dismissNotice { padding: 0 6px; min-width: 26px; min-height: 26px; font-size: 18px; line-height: 1; }
#pastePanel { position: absolute; z-index: 4; inset: 6px; border:3px double #222; padding: 17px; display: flex; flex-direction: column; justify-content: safe center; gap: 10px; background: #eee; overflow: auto; }
#pastePanel[hidden] { display: none; }
#pastePanel h2, #pastePanel p { margin: 0; }
#pastePanel p, #pastePanel label { font-size: 12px; line-height: 1.4; }
#pastePanel textarea { width: 100%; min-height: 54px; resize: vertical; font: 14px monospace; padding: 8px; border: 1px solid #6b7465; background: #fff; }
#pastePanel > div { display: flex; justify-content: end; gap: 8px; }
#pastePanel > * { flex-shrink: 0; }
.mac-icon { font: 38px monospace; color: #3d453d; }
h2 { font-family: Georgia, serif; font-size: 22px; }
#cover h2 { margin: 8px 0; font-family:'Chicago Kare',Chicago,Geneva,sans-serif; font-weight:400; }
#cover p { font-size: 12px; margin: 6px 0; }
#cover .small { max-width: 300px; font-size: 11px; color: #6d6d64; }
button { font: inherit; font-size: 13px; font-weight: 650; padding: 9px 14px; border: 1px solid #a7a89c; border-radius: 5px; background: #fff; cursor: pointer; }
button:hover { background: #efefea; }
button:focus-visible { outline: 2px solid #194b91; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .5; }
#cover button,#pastePanel button { position:relative; background:transparent; color:#222; border:3px solid transparent; border-image:url('/system7-button.svg') 3 fill stretch; border-radius:0; box-shadow:none; font:16px/18px 'Chicago Kare',Chicago,Geneva,sans-serif; padding:3px 12px; }
#start { outline:none; margin:8px; }
#start::before { content:''; position:absolute; inset:-8px; border:5px solid transparent; border-image:url('/system7-default-ring.svg') 5 stretch; pointer-events:none; }
#cover button:active,#pastePanel button:active { border-image-source:url('/system7-button-active.svg'); color:#eee; }
#start:focus-visible { outline-style:dotted; outline-offset:4px; }
#legacyDisk { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:10px; }
#legacyDisk[hidden] { display:none; }
#signInForm { display:flex; flex-direction:column; gap:10px; width:min(100%,300px); margin:12px 0; text-align:left; }
#signInForm[hidden] { display:none; }
#signInForm label { font:14px/20px 'Chicago Kare',Chicago,Geneva,sans-serif; }
#signInEmail { width:100%; min-height:36px; padding:6px 8px; border:1px solid #222; border-radius:0; background:#fff; color:#222; font:16px/20px 'Chicago Kare',Chicago,Geneva,sans-serif; }
#signInForm button { align-self:center; min-width:100px; }
#signInForm #signInMessage { margin:0; font-size:12px; line-height:1.4; text-align:center; }
#signInMessage:empty { display:none; }
#signInForm .sign-in-help { text-align:center; }
#signInEmail:focus-visible { outline:2px dotted #222; outline-offset:2px; }
#displayMode[aria-pressed=true] { background: #e2e7dd; border-color: #9da993; color: #384831; }
kbd { font: 12px monospace; border: 1px solid #ccc; padding: 2px 4px; border-radius: 3px; }
@media (max-width: 650px) {
  main:not(.site-shell) { padding: 0 16px; margin-top: 25px; }
  h1 { font-size: 30px; }
  #cover { padding: 10px; }
  #cover h2 { font-size: 17px; margin: 4px 0; }
  #cover p { font-size: 10px; margin: 4px 0; }
  #cover #coverDetail { font-size: 12px; }
  #cover #elapsed { font-size: 10px; }
  #loading { margin: 8px 0 4px; }
  #cover .small { font-size: 9px; }
  .mac-icon { font-size: 24px; }
  #start { padding: 7px 12px; margin: 4px; }
}
@media (max-width: 390px) {
  #cover .small { display: none; }
}

#browserAction { position:absolute; z-index:20; inset:8%; padding:20px; background:#f2efe4; border:3px double #222; overflow:auto; color:#222; }
#browserAction[hidden] { display:none; }

#browserActionCodePanel { margin: 20px 0; }
#browserActionCodePanel label { display: block; margin-bottom: 8px; font-weight: bold; }
.auth-code-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
#browserActionCode { box-sizing: border-box; width: 14ch; max-width: 100%; min-width: 0; padding: 12px; border: 2px solid #333; border-radius: 6px; background: #fff; color: #111; font: bold clamp(20px, 4vw, 32px)/1.2 monospace; letter-spacing: .05em; text-align: center; cursor: text; }
#browserActionCopy { font-size: 18px; font-weight: bold; padding: 12px 20px; }
#browserActionCopyStatus { min-height: 1.4em; font-size: 14px; }