/* Every shell starts close in the same 4:3 window, never stretched. Nothing
   clips it: a pose can spill it across the screen, and its edge dissolves. */
.device-stage { position: relative; width: 100%; height: min(76svh, 860px); display: grid; place-items: center; isolation: isolate; }
.hardware { position: relative; z-index: 1; width: min(100%, 101.333svh, 1147px); aspect-ratio: 4 / 3; overflow: visible; isolation: isolate; }
.hardware-rig { position: absolute; left: var(--rig-left); top: var(--rig-top); width: var(--rig-width); height: var(--rig-height); transform-origin: var(--rig-origin-x) var(--rig-origin-y); transform: translate(calc(var(--pose-x) * var(--frame-rig-x) * 1%), calc(var(--pose-y) * var(--frame-rig-y) * 1%)) rotate(calc(var(--pose-rotate) * 1deg)) scale(var(--pose-scale)); }
.hardware-shell { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; -webkit-mask: var(--shell-mask, none) 0 0 / 100% 100% no-repeat; mask: var(--shell-mask, none) 0 0 / 100% 100% no-repeat; }

.hardware .project-art.crt-screen { position: absolute; z-index: 1; left: var(--screen-x); top: var(--screen-y); width: var(--screen-w); height: var(--screen-h); padding: 0; border: 0; border-radius: 12% / 17%; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 48% 40%, #101411, #040605 85%); box-shadow: inset 0 0 25px #000c; }
.hardware .crt-screen:disabled { cursor: default; }
.crt-picture { position: absolute; inset: 0; opacity: 0; transform-origin: 50% 50%; }
.crt-picture img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; transform: scale(1.015); filter: saturate(.9) contrast(1.035) brightness(.95); }
.has-crt-curvature .crt-picture img { filter: url('#crt-curvature') saturate(.9) contrast(1.035) brightness(.95); }
.crt-filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hardware[data-state="on"] .crt-picture { opacity: 1; }
.hardware[data-state="booting"] .crt-picture { animation: crt-warmup 1120ms linear both; }
.crt-glass { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(0deg, #0001 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 48%, transparent 53%, #0005 100%), linear-gradient(128deg, #ffffff0d, transparent 33% 75%, #bdd8ce07); box-shadow: inset 0 0 15px #0005; opacity: .25; }
.hardware[data-state="on"] .crt-glass, .hardware[data-state="booting"] .crt-glass { opacity: 1; }
.crt-ignition { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: #e5ffe9; transform: scale(0); box-shadow: 0 0 20px #e1ffe0, 0 0 50px #e7ffb9; }
.hardware[data-state="booting"] .crt-ignition { animation: crt-ignite 1120ms linear both; }
.screen-action { position: absolute; z-index: 5; bottom: 12%; left: 50%; transform: translate(-50%, 5px); display: flex; align-items: center; gap: 12px; padding: 10px 17px; border-radius: 24px; background: #f0f0ea; color: #111; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 180ms, transform 180ms; }
.hardware[data-state="on"] .crt-screen:is(:hover, :focus-visible) .screen-action { opacity: 1; transform: translate(-50%, 0); }
.screen-action svg { width: 15px; height: 15px; }
.hardware .crt-screen:focus-visible { outline: 3px solid #fff; outline-offset: -9px; }

/* The switch is a control photographed on the shell: the button shows that
   same patch of photo, so it can press, turn or light up on its own. */
.hardware-power { --glow: 255 214 160; position: absolute; z-index: 6; left: var(--power-x); top: var(--power-y); width: var(--power-w); height: var(--power-h); transform: translate(-50%, -50%); padding: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.hardware-power::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(44px, 100%); height: max(44px, 100%); transform: translate(-50%, -50%); border-radius: inherit; }
.hardware-power--key { border-radius: 12%; }
.power-face { position: absolute; inset: 0; border-radius: inherit; background: var(--shell-src) var(--face-position) / var(--face-size) no-repeat; transition: transform 140ms var(--ease), filter 220ms, box-shadow 220ms; }
.hardware-power:hover .power-face { filter: brightness(1.12); }
.hardware-power--key:active .power-face { transform: scale(.93); filter: brightness(.8); box-shadow: inset 0 2px 4px #000a; }
.hardware-power--arcade:active .power-face { transform: translateY(6%) scale(.96); filter: brightness(.85); }
/* Knobs turn a quarter to switch on, the way the real ones clicked over. */
.hardware-power--knob .power-face { transition: transform 420ms cubic-bezier(.3, 1.6, .5, 1), filter 220ms; }
.hardware[data-state="off"] .hardware-power--knob .power-face { transform: rotate(-50deg); }
.hardware-power--knob:active .power-face { filter: brightness(.88); }
/* Lit controls: dim when off, their own colour when on. */
.hardware[data-state="off"] .has-lamp .power-face { filter: brightness(.62) saturate(.55); }
.hardware[data-state="off"] .has-lamp:hover .power-face { filter: brightness(.78) saturate(.7); }
.hardware:not([data-state="off"]) .has-lamp .power-face { filter: brightness(1.18) saturate(1.25); box-shadow: 0 0 calc(var(--power-w) * .6) rgb(var(--glow) / .35); }
.has-lamp .power-face::after { content: ''; position: absolute; inset: 8%; border-radius: inherit; background: radial-gradient(circle at 50% 42%, rgb(var(--glow) / .75), rgb(var(--glow) / .2) 60%, transparent 78%); mix-blend-mode: screen; opacity: 0; transition: opacity 260ms; }
.hardware:not([data-state="off"]) .has-lamp .power-face::after { opacity: 1; }
.hardware[data-state="booting"] .has-lamp .power-face::after { animation: lamp-flicker 1120ms steps(1) both; }
/* A separate pilot light, over the photographed one. */
.power-lamp { position: absolute; z-index: 5; left: var(--lamp-x); top: var(--lamp-y); width: var(--lamp-d); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 35%, #6a6b5f, #34352e 70%); box-shadow: inset 0 1px 1px #0008; transition: background 260ms, box-shadow 260ms; }
.hardware:not([data-state="off"]) .power-lamp { background: radial-gradient(circle at 40% 35%, #f4ffec, rgb(var(--glow)) 55%, rgb(var(--glow) / .6)); box-shadow: 0 0 6px 1px rgb(var(--glow) / .8), 0 0 18px 3px rgb(var(--glow) / .3); }
.hardware[data-state="booting"] .power-lamp { animation: lamp-flicker 1120ms steps(1) both; }
.hardware-power:focus-visible { outline: 2px solid #fff4d5; outline-offset: 5px; }
/* Asking for help: a soft ring breathes around the control. */
.hardware-power::before { content: ''; position: absolute; inset: -22%; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px #ffe9c9aa, 0 0 14px 2px #ffd9a055; }
/* The label undoes the pose's zoom and tilt so it always reads the same. */
.power-label { --unpose: scale(calc(1 / var(--pose-scale))) rotate(calc(var(--pose-rotate) * -1deg)); position: absolute; bottom: calc(100% + 12px); left: 50%; transform-origin: 50% 100%; transform: translate(-50%, 3px) var(--unpose); border-radius: 6px; background: #f0f0ea; padding: 6px 10px; color: #111; font-size: 11px; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; box-shadow: 0 4px 14px #0007; }
.power-label::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #f0f0ea; }
.hardware-power:is(:hover, :focus-visible) .power-label { opacity: 1; transform: translate(-50%, 0) var(--unpose); }
.power-out .hardware-power, .power-out .power-lamp { visibility: hidden; }
.scene.is-active .hardware[data-state="off"] .hardware-power::before { animation: power-beacon 1900ms ease-in-out infinite; }
.needs-power-help .hardware-power .power-label { opacity: 1; transform: translate(-50%, 0) var(--unpose); }
.needs-power-help .project-speech p { color: #d6d3cc; font-size: 17px; line-height: 1.6; }
.power-guide { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; opacity: 0; overflow: visible; }
.power-guide > path { fill: none; stroke: #e1be8a; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 6; marker-end: url('#power-arrow-tip'); }
.power-guide marker path { fill: none; stroke: #e1be8a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hardware-paused .hardware-power::before { animation-play-state: paused !important; }
.hardware-paused .power-guide { visibility: hidden; }
.is-calm .hardware-power::before { animation: none !important; }

@keyframes power-beacon {
  0%, 100% { opacity: 0; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes lamp-flicker {
  0%, 18% { opacity: 0; }
  22% { opacity: 1; }
  30% { opacity: .15; }
  38%, 100% { opacity: 1; }
}
@keyframes crt-ignite {
  0%, 7% { opacity: 0; transform: scale(.009, .012); }
  12% { opacity: .9; transform: scale(.018, .02); }
  27% { opacity: .8; transform: scale(.94, .006); }
  44% { opacity: .2; transform: scale(1, .76); }
  63% { opacity: .06; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes crt-warmup {
  0%, 25% { opacity: 0; transform: scale(1, .005); filter: brightness(1.8); }
  42% { opacity: .75; transform: scale(1, .72); filter: brightness(1.25); }
  65% { opacity: .95; transform: scale(1); filter: brightness(1.06); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .device-stage { height: 70svh; }
  .hardware { width: min(100%, 93.333svh); }
}
@media (max-width: 760px) {
  .device-stage { height: auto; aspect-ratio: 4 / 3; }
  .hardware { width: 100%; }
  .screen-action { font-size: 10px; padding: 7px 12px; gap: 9px; }
  .hardware[data-state="on"] .screen-action { opacity: 1; transform: translateX(-50%); }
  .power-label { font-size: 9px; padding: 5px 8px; bottom: calc(100% + 10px); }
  .needs-power-help .project-speech p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hardware-power::before { animation: none !important; }
}