/* The casing is a rendered asset; all screen content remains live HTML. */
html:has(body.computer-page) { background: #f3f0e8; overflow-x: clip; }
html[data-theme=dark]:has(body.computer-page) { background: #211c18; }
body.computer-page {
  --desktop: #f3f0e8;
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  min-height: 100svh;
  padding: 82px 24px 34px;
  background-image: none;
  overflow-x: clip;
}
:root[data-theme=white] body.computer-page { --desktop: #fafafa; }
:root[data-theme=dark] body.computer-page { --desktop: #211c18; }
:root[data-theme=classic] body.computer-page { --desktop: #e3e1d9; }
.mac-masks { position:absolute; pointer-events:none; }
.computer-stage { pointer-events:none; position: relative; z-index: 2; width: min(900px, calc(100vw - 64px), max(650px, calc(100svh - 116px))); aspect-ratio: 1; flex-shrink: 0; }
.computer { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.computer-render {
  display: block; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; user-select: none;
  /* Clip stray transparency-edge speckles outside the supplied render. */
  clip-path: polygon(12.2% 4%,14% 2.7%,77.5% 2.7%,79.7% 4.5%,87% 9.5%,87% 72.6%,92% 73.5%,95.6% 77.7%,95% 81%,97% 81.5%,99% 91%,98.5% 97.8%,1% 97.8%,1.2% 91%,6.2% 78%,10.4% 75%,10.5% 61%,11.1% 26%,11.4% 6%);
}
.screen-dock { pointer-events:auto; position: absolute; left: 21.65%; top: 13.35%; width: 48.25%; height: 36.15%; }
.mobile-open-desktop { display: none; }
.computer .screen {
  --phosphor: #0753b8; --dim: #285879; --line: #245b822c; --wash: #146ef51a; --glow: #146ef52b;
  width: 100%; height: 100%; min-height: 0; padding: 12px 17px 10px;
  border-radius: 7% / 9%; background: transparent; overflow: hidden;
  box-shadow: none; color: var(--phosphor); text-shadow: 0 0 7px var(--glow);
}
.computer .screen::before { inset: 0; opacity: .25; border-radius: inherit; }
.computer .screen::after { background: linear-gradient(115deg,#efffff1c,transparent 50%); box-shadow: inset 0 0 16px #16759b1a; }
/* A quiet CRT layer: the text and hit targets never shake or move. */
.computer .crt-title { font-family: 'VT323', monospace; text-shadow: -.35px 0 #264dbc55,.4px 0 #49ccd944,0 0 5px #166ce53b; }
.computer .crt-title .caret { animation: none; opacity: .7; }
.crt-overlay { position: absolute; inset: 0; z-index: 13; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: .55; background: repeating-linear-gradient(90deg,#2075bd07 0 1px,transparent 1px 3px); }
.crt-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,#153d6e0a 0 1px,transparent 1px 3px); opacity: .6; }
.crt-sweep { position: absolute; left: 0; right: 0; top: -22%; height: 20%; pointer-events: none; background: linear-gradient(0deg,transparent,#d4faff24 48%,#075ca10d 52%,transparent); opacity: 0; animation: crt-pass 18s linear infinite; }
@keyframes crt-pass {
  0%,76% { transform: translateY(0); opacity: 0; }
  78% { opacity: .6; }
  97% { transform: translateY(620%); opacity: .6; }
  98%,100% { transform: translateY(620%); opacity: 0; }
}
@media(hover:hover) and (pointer:fine) { .computer .screen:hover .crt-overlay { opacity: .8; } }
.crt-paused .crt-sweep { animation-play-state: paused; }
.no-fx .crt-overlay { display: none; }
.no-fx .computer .crt-title { text-shadow: none; }
@media(prefers-reduced-motion:reduce) { .crt-sweep { display: none; animation: none; } }
@media(max-width:700px) { .crt-overlay { opacity: .4; } }
.computer .screen-top { margin: 0; padding: 0 0 5px; height: 25px; gap: 7px; border-color: var(--line); background: transparent; color: var(--phosphor); font-size: 8px; }
.computer .screen-top::before,.computer .screen-top>a::before { display: none; }
.computer .screen-top>a { background: transparent; padding: 0; font-size: 8px; }
.computer .screen-top>span { position: static; transform: none; background: transparent; padding: 0; color: var(--dim); font-size: 7px; margin-left: auto; }
.computer .screen-top>button { flex-shrink: 0; margin: 0; padding: 0 4px; height: 22px; min-width: 23px; font-size: 14px; color: var(--phosphor); background: #c8eaf040; border-color: var(--line); }
.computer .home-view { padding: 7px 0 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.computer .title h1 { font: 400 clamp(38px,5.7cqw,62px)/.95 var(--display); letter-spacing: -.055em; padding: 0; margin: 0 0 7px; }
.computer .browser { display: block; flex: 1; min-height: 0; }
.computer .project-menu { height: 100%; display: flex; flex-direction: column; }
.computer .section-label,.computer .preview,.computer .screen-footer { display: none; }
.computer .menu-items { flex: 1; display: grid; grid-template-rows: repeat(4,1fr); min-height: 144px; }
.computer .selection { height: 25%; border-radius: 1px; }
.computer .menu-link { height: 100%; min-height: 36px; gap: 8px; padding: 0 9px 0 5px; }
.computer .menu-name { font-size: clamp(18px,2.25cqw,23px); letter-spacing: -.045em; }
.computer .menu-cursor { font-size: 21px; }
.computer .menu-index { font-size: 8px; }
.computer .github-link { min-height: 23px; margin: 3px 0 0 26px; font-size: 9px; gap: 12px; align-self: flex-start; }
.computer .command-panel { inset: 37px 16px 11px; overflow: auto; padding: 12px; background: #d9ecf7; color: #24445e; }
.computer .command-panel .command-help { font-size: 9px; margin: 10px 0; }
.computer .command-panel form { font-size: 10px; gap: 5px; }
.computer .command-panel #commandOutput { font-size: 10px; }
.computer .monitor-bottom { position: absolute; left: 25%; right: 29%; top: 54%; height: 32px; padding: 0; gap: 12px; }
.computer .chassis-brand { color: #635d4f; font-size: 16px; letter-spacing: -.03em; }
.computer .chassis-brand::before,.computer .power-led { display: none; }
.computer .monitor-controls { pointer-events:auto; gap: 7px; }
.computer .monitor-controls>button { min-height: 28px; padding: 4px 7px; border: 1px solid #867b6545; color: #645c4d; background: #d2c8af40; box-shadow: inset 0 1px 0 #fff4; font-size: 8px; }
.computer .monitor-controls>button[aria-pressed=true] { color: #104d8c; background: #e3dac780; }
:root[data-theme=classic] .computer .screen { --phosphor: #164b76; --glow: transparent; text-shadow: none; }
:root[data-theme=classic] .computer .title h1 { font-size: 4.7cqw; font-weight: bold; }
:root[data-theme=white] .computer .screen { background: #f9ffffb8; }
:root[data-theme=white] .computer .title h1 { font-size: 4.7cqw; }
:root[data-theme=dark] .computer .computer-render { filter: brightness(.32) saturate(.64) sepia(.25); }
.computer-glass { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; clip-path: url(#mac-glass-mask); }
:root[data-theme=dark] .computer .computer-glass { display: block; }
:root[data-theme=dark] .computer .screen { color-scheme: light; }
:root[data-theme=dark] .computer .chassis-brand { color: #c8bca7; }
:root[data-theme=dark] .computer .monitor-controls>button { color: #c2b8a7; border-color: #a79b8650; background: #332a2180; }
:root[data-theme=dark] .computer .monitor-controls>button[aria-pressed=true] { color: #b6d8ff; background: #372e2480; }
.desktop-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.desktop-balls { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.desktop-ball { position: absolute; top: 0; left: 0; border-radius: 50%; padding: 0; background: transparent; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; }
.desktop-ball.dragging { cursor: grabbing; }
.desktop-ball:focus-visible { outline: 2px dashed var(--phosphor); outline-offset: 5px; }
.screen-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--desktop); overflow: hidden; }
.screen-dialog::backdrop { background: var(--desktop); }
.screen-dialog .computer { position: absolute; max-width: none; }
.screen-dialog .computer .title h1 { font-size: clamp(36px,5cqw,90px); }
.screen-dialog .computer .menu-name { font-size: clamp(19px,2.4cqw,32px); }
.screen-dialog .computer .screen { padding: clamp(12px,1.5cqw,25px) clamp(17px,2cqw,34px); }
.screen-dialog .computer .screen-top { height: clamp(28px,2.3cqw,38px); font-size: 11px; }
.screen-dialog .computer .screen-top>a { font-size: 11px; }
.screen-dialog .computer .screen-top>span { font-size: 10px; }
.screen-dialog .computer .screen-top>button { min-width: 34px; height: 30px; font-size: 19px; }
.screen-dialog .computer .github-link { font-size: 12px; min-height: 32px; }
.screen-dialog .computer .menu-index { font-size: 11px; }
.screen-dialog .computer .command-panel { inset: 58px 22px 22px; }
.screen-dialog .computer .command-panel form,.screen-dialog .computer .command-panel #commandOutput { font-size: 13px; }
.is-zoomed .desktop-canvas,.is-zoomed .desktop-balls { visibility: hidden; }
body.is-zoomed { overflow: hidden; }
.render-failed .computer-render { visibility: hidden; }
.render-failed .screen-dock { left: 5%; top: 5%; width: 90%; height: 70%; }
.render-failed .screen { background: var(--paper); border: 1px solid var(--mac-line); }
@media(min-width:701px) and (max-height:850px), (min-width:701px) and (max-width:850px) {
  .computer .screen { padding: 8px 13px; }
  .computer .home-view { padding-top: 4px; }
  .computer .menu-items { min-height: 120px; }
  .computer .menu-link { min-height: 30px; }
  .computer .title h1 { font-size: 28px; margin-bottom: 4px; }
  .computer .screen-top>span { display: none; }
  .computer .screen-top>a { margin-right: auto; }
}
@media(max-width:700px) {
  body.computer-page { flex-direction: column; align-items: center; justify-content: flex-start; padding: 72px 6px calc(28px + env(safe-area-inset-bottom)); width: 100%; min-width: 0; }
  .computer-page .desktop-canvas,.computer-page .desktop-balls { display: none; }
  /* On a phone the Mac reads as one object; its CRT becomes the project launcher. */
  .computer-stage { width: min(420px,calc(100vw - 12px)); max-width: 100%; height: auto; aspect-ratio: 1; left: auto; overflow: visible; filter: drop-shadow(0 13px 17px #19233818); }
  .computer-stage > .computer { position: relative; width: 100%; left: auto; top: auto; }
  .computer-stage .computer .screen { visibility: hidden; }
  .computer-stage .monitor-bottom { visibility: hidden; }
  .computer-stage .screen-dock { pointer-events: auto; }
  .computer-stage .mobile-open-desktop:not([hidden]) {
    position: absolute; inset: 0; z-index: 20; display: flex; width: 100%; height: 100%;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: 15% 12%; border: 0; border-radius: 7% / 9%; cursor: pointer; touch-action: manipulation;
    color: #0753b8; background: linear-gradient(115deg,#efffff17,transparent 52%);
    text-align: left; text-shadow: 0 0 7px #146ef542;
  }
  .mobile-open-title { font: 400 clamp(16px,5cqw,21px)/1 'VT323',monospace; letter-spacing: -.03em; }
  .mobile-open-action { font: 500 clamp(8px,2.35cqw,11px)/1.25 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
  .mobile-open-desktop:focus-visible { outline: 2px solid #146ef5; outline-offset: 4px; }
  .screen-dialog .mobile-open-desktop { display: none !important; }
  .screen-dialog .computer .screen { visibility: visible; }
  .screen-dialog .computer .screen { padding: 10px 15px; }
  .screen-dialog .computer .title h1 { font-size: 32px; margin-bottom: 4px; }
  .screen-dialog .computer .menu-name { font-size: 20px; }
  .screen-dialog .computer .github-link { min-height: 24px; font-size: 10px; }
  .screen-dialog .computer .screen-top { height: 27px; }
}
@media(max-width:380px) { .screen-dialog .computer .title h1 { font-size: 28px; } .screen-dialog .computer .menu-name { font-size: 18px; } }
@media(prefers-reduced-motion:reduce) { .desktop-ball { will-change: auto; } }