@font-face {
  font-family: "Chicago Kare";
  src: url("assets/ChicagoKare-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #111;
  --paper: #fff;
  --silver: #c8c8c8;
  --mid: #888;
  --desktop: #777;
  --system-font: "Chicago Kare", Chicago, Charcoal, Geneva, "Arial Narrow", sans-serif;
  --body-font: Geneva, Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; overflow: hidden; }

body {
  display: grid;
  place-items: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 45%, #555 0, #222 52%, #080808 100%);
  font-family: var(--system-font);
  font-size: 15px;
  user-select: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.macintosh {
  width: min(1280px, 96vw, 120vh);
  height: auto;
  min-height: 0;
  aspect-ratio: 1.28;
  padding: 3.4% 3.7% 0;
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 96%, #7c786d55 96% 97%, transparent 97%),
    linear-gradient(112deg, #e2decf 0%, #cbc6b6 62%, #aaa597 100%);
  border: 2px solid #eeeade;
  border-right-color: #716e65;
  border-bottom-color: #5f5c55;
  border-radius: 46px 46px 68px 68px / 38px 38px 60px 60px;
  box-shadow: 0 34px 75px #000c, inset 7px 7px 10px #fff9, inset -11px -8px 16px #625f5859;
}

.macintosh::after {
  content: "";
  position: absolute;
  top: 2.1%; left: 37%; width: 26%; height: 6px;
  border-radius: 8px;
  background: #aaa598;
  border: 1px solid #8e8a7e;
  box-shadow: inset 0 3px 4px #77726999, 0 1px #fff8;
  opacity: .34;
  pointer-events: none;
}

.macintosh::before {
  content: "";
  position: absolute;
  left: 4.5%; right: 4.5%; bottom: 2.2%; height: 3.2%;
  border-radius: 0 0 50% 50%;
  border-bottom: 3px solid #69665e;
  box-shadow: 0 5px 4px #0004, inset 0 -4px 5px #fff4;
  pointer-events: none;
}

.bezel {
  width: 100%; height: auto; aspect-ratio: 1.43; padding: 12px 12px 14px;
  background: linear-gradient(135deg, #858176, #4d4a43 34%, #34332f 100%);
  border: 5px solid #b5b0a2;
  border-top-color: #77736a;
  border-left-color: #817d73;
  border-radius: 28px 28px 36px 36px / 22px 22px 31px 31px;
  box-shadow: inset 0 0 20px #000, 0 2px 1px #fff8, 0 0 0 2px #9b978c;
}

.screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background-color: var(--desktop);
  border-radius: 26px / 18px;
  box-shadow: inset 0 0 28px #000c, 0 0 18px #b7d3be24;
  isolation: isolate;
  filter: contrast(1.045) saturate(.82);
}

.screen::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, #fff1 0%, transparent 17% 70%, #b8d9cd0c 82%, transparent 100%),
    radial-gradient(ellipse at center, transparent 48%, #0003 83%, #000a 116%);
  box-shadow: inset 0 0 12px #000a, inset 3px 1px 4px #fff1;
  animation: crt-flicker 8s steps(2, end) infinite;
}

.screen.scanlines::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 9998; pointer-events: none; opacity: .34;
  border-radius: inherit;
  background:
    repeating-linear-gradient(to bottom, #ffffff0a 0 1px, transparent 1px 2px, #00000038 2px 3px),
    repeating-linear-gradient(to right, #ff00000d 0 1px, #00ff0008 1px 2px, #0000ff0d 2px 3px);
  background-size: 100% 3px, 3px 100%;
}

@keyframes crt-flicker {
  0%, 22%, 100% { opacity: 1; }
  23% { opacity: .94; }
  24% { opacity: .99; }
  72% { opacity: .97; }
  73% { opacity: 1; }
}

.case-details { position: absolute; left: 4.8%; right: 4.8%; bottom: 2.4%; height: 10.8%; }
.case-details::after {
  display: none;
}
.brand { position: absolute; left: 2%; top: 13%; display: flex; align-items: center; gap: 9px; font: 21px Georgia, serif; color: #4e4b45; letter-spacing: -.8px; }
.case-apple { width: 29px; height: 31px; filter: drop-shadow(0 1px #fff8); }
.floppy-slot {
  position: absolute; width: 34%; height: 20px; right: 0; top: 11%;
  border: 3px solid #827e73; border-top-color: #5f5b53; border-radius: 3px;
  background: #3f3e3a; box-shadow: inset 0 3px 5px #111, 0 2px #eee9;
}
.floppy-slot::before { content: ""; position: absolute; left: 8px; right: 8px; top: 5px; height: 3px; background: #111; box-shadow: 0 1px #777; }
.floppy-slot::after { content: ""; position: absolute; right: -2px; top: 31px; width: 18px; height: 18px; background: #bbb6a8; border: 2px solid #77736a; box-shadow: inset 2px 2px #e9e5d8; }
.power-light { position: absolute; width: 7px; height: 7px; right: 1%; top: 69%; background: #617645; border-radius: 50%; box-shadow: 0 0 5px #95b66b; }

.menu-bar {
  position: absolute; z-index: 8000; inset: 0 0 auto; height: 26px;
  display: flex; align-items: stretch;
  color: #000; background: #fff;
  border-bottom: 2px solid #111;
  box-shadow: 0 1px #fff;
}

.menu-trigger, .status-button {
  min-width: 42px; height: 24px; padding: 1px 10px 0;
  border: 0; border-radius: 0; background: transparent;
  font-weight: 700; line-height: 22px; cursor: default;
}
.menu-trigger:hover, .menu-trigger[aria-expanded="true"], .status-button:hover { color: #fff; background: #000; }
.apple-trigger { min-width: 43px; padding: 2px 11px; }
.apple-mark { width: 18px; height: 19px; overflow: visible; }
.menu-spacer { flex: 1; min-width: 8px; }
.status-button { min-width: auto; white-space: nowrap; font-size: 13px; }
.clock-button { padding-inline: 10px 15px; }

.desktop {
  position: absolute; inset: 26px 0 0;
  overflow: hidden;
  background-color: var(--desktop);
}

.screen.pattern-dots .desktop { background-image: radial-gradient(#bdbdbd 1px, transparent 1px); background-size: 4px 4px; }
.screen.pattern-grid .desktop { background-image: linear-gradient(#8e8e8e 1px, transparent 1px), linear-gradient(90deg,#8e8e8e 1px,transparent 1px); background-size: 8px 8px; background-color:#d8d8d8; }
.screen.pattern-diagonal .desktop { background: repeating-linear-gradient(135deg,#bbb 0 2px,#777 2px 4px); }
.screen.pattern-dark .desktop { background-image: radial-gradient(#666 1px, transparent 1px); background-size: 4px 4px; background-color:#333; }
.screen.pattern-light .desktop { background-image: radial-gradient(#bbb 1px,transparent 1px); background-size:6px 6px; background-color:#eee; }
.screen.pattern-checker .desktop { background: conic-gradient(#aaa 25%,#ddd 0 50%,#aaa 0 75%,#ddd 0) 0 0/8px 8px; }

.desktop-icon {
  position: absolute; z-index: 2; left: var(--x); top: var(--y);
  width: 80px; min-height: 86px; padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: default;
  filter: drop-shadow(1px 1px 0 #ffffff44);
}
.desktop-icon:focus { outline: 0; }
.desktop-icon:focus .icon-label, .desktop-icon.selected .icon-label { color: #fff; background: #000; outline: 1px dotted #fff; }
.desktop-icon.selected .icon-art { filter: contrast(140%) brightness(.65); }
.icon-art { width: 52px; height: 52px; overflow: visible; shape-rendering: crispEdges; }
.drive-icon { width: 56px; }
.icon-label { max-width: 88px; padding: 2px 4px 1px; color: #000; background: #fff; line-height: 14px; text-align: center; overflow-wrap: anywhere; box-shadow: 1px 1px 0 #0005; }

.window-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

.mac-window {
  position: absolute; z-index: 10;
  min-width: 260px; min-height: 145px;
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid #111;
  box-shadow: 4px 4px 0 #0008;
  pointer-events: auto;
}
.mac-window.active { z-index: 100; }
.mac-window.inactive .title-bar { background: #fff; }
.mac-window.inactive .title-stripes, .mac-window.inactive .close-box, .mac-window.inactive .zoom-box { visibility: hidden; }
.mac-window.maximized { left: 3px !important; top: 3px !important; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; }
.mac-window.collapsed { height: 25px !important; min-height: 25px; overflow: hidden; }

.title-bar {
  position: relative; height: 25px; min-height: 25px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #fff; border-bottom: 2px solid #111;
  cursor: grab; touch-action: none;
}
.title-bar:active { cursor: grabbing; }
.title-stripes { position: absolute; inset: 4px 3px; background: repeating-linear-gradient(to bottom,#111 0 1px,transparent 1px 3px); }
.window-title { position: relative; z-index: 2; max-width: calc(100% - 82px); padding: 0 8px; background: #fff; font-weight: 700; line-height: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.close-box, .zoom-box {
  position: absolute; z-index: 3; top: 3px; width: 18px; height: 18px; padding: 0;
  background: #fff; border: 2px solid #111; box-shadow: inset 0 0 0 2px #fff; cursor: default;
}
.close-box { left: 5px; }
.close-box:active { background: #111; }
.zoom-box { right: 5px; }
.zoom-box::before { content:""; position:absolute; inset:2px; border:1px solid #111; border-top-width:3px; }
.window-content { position: relative; min-height: 0; flex: 1; overflow: auto; font-family: var(--body-font); background: #fff; }
.resize-handle { position: absolute; z-index: 5; right: 1px; bottom: 1px; width: 17px; height: 17px; background: repeating-linear-gradient(135deg,transparent 0 2px,#111 2px 3px,transparent 3px 5px); cursor: nwse-resize; touch-action: none; }

.window-toolbar, .status-strip {
  min-height: 25px; padding: 3px 8px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--system-font); font-size: 13px;
  background: #eee; border-bottom: 1px solid #111;
}
.status-strip { border-top: 1px solid #111; border-bottom: 0; justify-content: space-between; }
.classic-button {
  min-height: 24px; padding: 2px 14px; color: #111; background: #fff;
  border: 1px solid #111; border-radius: 4px; box-shadow: inset 0 0 0 1px #fff, 1px 1px 0 #111; cursor: default;
}
.classic-button:active, .classic-button.pressed { color: #fff; background: #111; box-shadow: none; }
.default-button { border-width: 2px; box-shadow: 0 0 0 2px #111, inset 0 0 0 1px #fff; }
.small-button { min-height: 20px; padding: 0 8px; }

.menu-panel {
  position: absolute; z-index: 9000; min-width: 195px; padding: 3px 0;
  color: #000; background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #0008;
}
.menu-item {
  width: 100%; height: 25px; padding: 1px 20px;
  display: flex; align-items: center; gap: 7px;
  border: 0; border-radius: 0; color: #000; background: transparent; text-align: left; white-space: nowrap; cursor: default;
}
.menu-item:hover:not(:disabled), .menu-item:focus:not(:disabled) { color: #fff; background: #000; outline: 0; }
.menu-item:disabled { color: #999; }
.menu-item .shortcut { margin-left: auto; padding-left: 24px; }
.menu-separator { height: 1px; margin: 4px 0; background: #777; border: 0; }
.menu-icon { width: 18px; height: 18px; }
.context-menu { min-width: 180px; }

.finder-grid { min-height: 100%; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; gap: 18px 10px; }
.finder-item { min-height: 87px; padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; cursor: default; }
.finder-item:focus { outline: 1px dotted #111; }
.finder-item svg { width: 48px; height: 48px; }
.finder-item span { padding: 1px 3px; text-align: center; }
.finder-item.selected span { color:#fff; background:#000; }
.finder-path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.about-panel { min-height: 100%; padding: 25px 30px; text-align: center; }
.about-computer { width: 96px; height: 112px; margin: 0 auto 12px; position:relative; background:#ddd; border:3px solid #111; border-radius:7px 7px 11px 11px; box-shadow: inset 4px 4px #fff, inset -4px -4px #999; }
.about-screen { position:absolute; left:15px; top:14px; width:66px; height:54px; display:grid; place-items:center; background:#fff; border:4px solid #333; border-radius:3px; font-size:31px; }
.about-slot { position:absolute; right:13px; bottom:22px; width:34px; height:4px; background:#222; }
.about-panel h2 { margin: 5px 0 2px; font: 24px var(--system-font); }
.about-panel p { margin: 6px 0; }
.memory-box { margin:18px auto 10px; max-width:360px; padding:9px; border:1px solid #111; text-align:left; }
.memory-row { display:flex; align-items:center; gap:8px; margin:5px 0; }
.memory-row span:first-child { width:93px; }
.memory-bar { height:13px; flex:1; border:1px solid #111; background:#fff; }
.memory-bar i { display:block; height:100%; background:repeating-linear-gradient(135deg,#111 0 1px,#fff 1px 3px); }

.text-editor { width:100%; height:100%; min-height:200px; padding:16px 20px; resize:none; border:0; outline:0; font:16px/1.55 Geneva, Tahoma, sans-serif; user-select:text; }

.paint-shell { height:100%; min-height:300px; display:grid; grid-template-columns:64px minmax(0,1fr); background:#aaa; }
.paint-tools { padding:7px; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:5px; background:#ddd; border-right:2px solid #111; }
.paint-tool { width:23px; height:25px; padding:0; display:grid; place-items:center; border:1px solid #111; background:#fff; font:16px sans-serif; }
.paint-tool.active { color:#fff; background:#111; }
.paint-colors { grid-column:1/-1; margin-top:8px; display:grid; grid-template-columns:repeat(2,1fr); border:1px solid #111; }
.paint-color { height:22px; padding:0; border:1px solid #fff; outline:1px solid #111; }
.paint-color.active { outline:3px double #111; z-index:1; }
.paint-stage { min-width:0; min-height:0; overflow:auto; display:grid; place-items:center; padding:16px; background:repeating-linear-gradient(45deg,#aaa 0 2px,#bbb 2px 4px); }
.paint-canvas { width:min(100%,640px); height:auto; background:#fff; border:2px solid #111; box-shadow:3px 3px #666; cursor:crosshair; touch-action:none; image-rendering:pixelated; }

.calculator { width:100%; height:100%; padding:12px; background:#ddd; }
.calc-display { width:100%; height:46px; margin-bottom:10px; padding:5px 8px; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; color:#111; background:#d8e0d1; border:2px inset #999; font:28px/1 "Courier New", monospace; user-select:text; }
.calc-keys { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.calc-key { min-height:35px; padding:0; background:#fff; border:1px solid #111; border-radius:5px; box-shadow:2px 2px #555; font-family:var(--system-font); }
.calc-key:active { transform:translate(1px,1px); box-shadow:1px 1px #555; }
.calc-key.operator { background:#333; color:#fff; }
.calc-key.equals { grid-row:span 2; }
.calc-key.zero { grid-column:span 2; }

.control-panel { min-height:100%; padding:18px; background:#eee; }
.control-group { margin:0 0 16px; padding:12px; border:1px solid #111; background:#fff; }
.control-group legend { padding:0 7px; font-family:var(--system-font); }
.pattern-options { display:grid; grid-template-columns:repeat(6, 42px); gap:10px; }
.pattern-choice { width:42px; height:42px; padding:0; border:2px solid #fff; outline:1px solid #111; }
.pattern-choice.active { outline:3px solid #111; }
.pattern-choice[data-pattern="dots"] { background-color:#777; background-image:radial-gradient(#bbb 1px,transparent 1px); background-size:4px 4px; }
.pattern-choice[data-pattern="grid"] { background-color:#ddd; background-image:linear-gradient(#888 1px,transparent 1px),linear-gradient(90deg,#888 1px,transparent 1px);background-size:8px 8px; }
.pattern-choice[data-pattern="diagonal"] { background:repeating-linear-gradient(135deg,#bbb 0 2px,#777 2px 4px); }
.pattern-choice[data-pattern="dark"] { background-color:#333;background-image:radial-gradient(#666 1px,transparent 1px);background-size:4px 4px; }
.pattern-choice[data-pattern="light"] { background-color:#eee;background-image:radial-gradient(#bbb 1px,transparent 1px);background-size:6px 6px; }
.pattern-choice[data-pattern="checker"] { background:conic-gradient(#aaa 25%,#ddd 0 50%,#aaa 0 75%,#ddd 0) 0 0/8px 8px; }
.control-row { margin:8px 0; display:flex; align-items:center; gap:8px; }
.control-row input[type="text"] { min-width:0; flex:1; padding:3px 6px; border:1px solid #111; user-select:text; }
.check-box { appearance:none; width:16px; height:16px; margin:0; border:2px solid #111; background:#fff; }
.check-box:checked::after { content:"✓"; position:relative; left:1px; top:-6px; font:bold 19px sans-serif; }

.puzzle-wrap { min-height:100%; padding:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#ddd; }
.puzzle-board { width:min(310px,75vw); aspect-ratio:1; padding:6px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:5px; background:#777; border:3px solid #111; box-shadow:inset 2px 2px #333; }
.puzzle-tile { display:grid; place-items:center; padding:0; background:#fff; border:1px solid #111; box-shadow:inset 2px 2px #eee, inset -2px -2px #888; font:clamp(18px,4vw,26px) var(--system-font); }
.puzzle-tile.empty { visibility:hidden; }
.puzzle-info { display:flex; align-items:center; gap:18px; }

.mac-window[data-app="prince"] .window-content { overflow: hidden; background: #060b0e; }
.prince-launcher { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; color:#ead8a2; background:#030607; font:11px/1.2 "Courier New",monospace; }
.prince-modebar { min-height:36px; padding:4px 6px; display:flex; align-items:center; gap:7px; color:#17130d; background:#d7d3c7; border-bottom:2px solid #111; font-family:var(--system-font); }
.prince-mode-tabs { display:flex; gap:3px; }
.prince-mode, .prince-emulator-reload { min-height:25px; padding:2px 9px; color:#111; background:#fff; border:1px solid #111; box-shadow:1px 1px #555; font:11px var(--system-font); white-space:nowrap; }
.prince-mode.active { color:#fff; background:#111; box-shadow:inset 0 0 0 1px #fff; }
.prince-emulator-state { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.prince-emulator-source { padding:3px 5px; color:#111; white-space:nowrap; text-decoration:none; border-bottom:1px solid #111; }
.prince-emulator-pane { position:relative; min-height:0; flex:1; overflow:hidden; background:#000; }
.prince-emulator-frame { position:absolute; left:50%; top:50%; width:640px; height:480px; border:0; background:#000; transform:translate(-50%,-50%) scale(var(--emulator-scale,1)); transform-origin:center; }
.prince-emulator-loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#e8cf82; background:radial-gradient(circle,#142124ee,#020405fa 72%); letter-spacing:1px; pointer-events:none; }
.prince-emulator-loading strong { font:bold 20px Georgia,serif; }
.prince-emulator-loading span { color:#b8aa82; font-family:var(--body-font); letter-spacing:0; }
.prince-emulator-hint { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:5px 8px; color:#c9bea0; background:#050708df; border-top:1px solid #7d6338; text-align:center; pointer-events:none; }
.prince-app { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; color:#ead8a2; background:#05090b; font:12px/1.2 "Courier New", monospace; }
.prince-hud { min-height:32px; padding:6px 10px; display:grid; grid-template-columns:1.3fr .7fr 1fr 1fr; align-items:center; gap:8px; color:#f1d786; background:#101618; border-bottom:2px solid #8d6135; font-weight:700; letter-spacing:.6px; text-shadow:0 0 5px #d8ae4c88; }
.prince-level, .prince-health { text-align:center; }
.prince-health { color:#db4d49; font-size:16px; letter-spacing:1px; text-shadow:0 0 5px #e53d36aa; white-space:nowrap; }
.prince-time { text-align:right; white-space:nowrap; }
.prince-stage { width:100%; min-height:80px; position:relative; flex:1 1 auto; display:grid; place-items:center; overflow:hidden; background:#071217; border-bottom:2px solid #8d6135; }
.prince-canvas { width:auto; height:100%; max-width:100%; aspect-ratio:16/9; display:block; outline:0; image-rendering:pixelated; touch-action:none; }
.prince-canvas:focus-visible { box-shadow:inset 0 0 0 2px #e7c66a; }
.prince-intro { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#ead9a2; background:radial-gradient(ellipse at center,#14272bea,#05090bfa 70%); text-align:center; text-shadow:2px 2px #000,0 0 9px #d7aa4f77; }
.prince-logo { font:bold clamp(23px,4.8vw,48px)/.71 Georgia,serif; letter-spacing:5px; color:#e7bf5e; }
.prince-logo small { font-size:.38em; letter-spacing:3px; }
.prince-intro p { margin:7px 0 5px; font-size:clamp(10px,1.6vw,14px); letter-spacing:2px; }
.prince-intro span { margin-top:5px; color:#c6b98f; font:11px var(--body-font); }
.prince-start { min-width:150px; padding:7px 16px 6px; color:#f6d87f; background:#19130d; border:2px solid #ad7a35; box-shadow:inset 0 0 0 2px #3e2b18,0 0 12px #b8823255; font:bold 13px "Courier New",monospace; letter-spacing:1px; cursor:pointer; }
.prince-start:active { color:#19130d; background:#f0ce71; }
.prince-touch-controls { min-height:48px; padding:6px 8px; display:none; align-items:center; justify-content:center; gap:7px; background:#171717; }
.prince-touch-controls button { width:46px; height:35px; padding:0; color:#e5d4a3; background:#292721; border:1px solid #ae8952; border-radius:3px; box-shadow:inset 1px 1px #5d5848,1px 1px #000; font:bold 17px sans-serif; touch-action:none; }
.prince-touch-controls button.pressed, .prince-touch-controls button:active { color:#111; background:#e0c479; box-shadow:inset 1px 1px #756231; }
.prince-touch-controls .prince-restart { width:auto; margin-left:10px; padding:0 12px; font:11px "Courier New",monospace; }
.prince-status { min-height:24px; padding:4px 9px; display:flex; align-items:center; justify-content:space-between; gap:10px; overflow:hidden; color:#bdb293; background:#080b0c; border-top:1px solid #37332a; font-size:10px; white-space:nowrap; }
.prince-message { overflow:hidden; text-overflow:ellipsis; }

.clock-panel { min-height:100%; padding:20px; display:grid; place-items:center; text-align:center; background:#eee; }
.analog-clock { width:180px; aspect-ratio:1; position:relative; border:3px solid #111; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 5px #ddd; }
.clock-hand { position:absolute; left:50%; bottom:50%; width:3px; transform-origin:bottom; background:#111; }
.clock-hand.hour { height:47px; }
.clock-hand.minute { height:65px; width:2px; }
.clock-hand.second { height:70px; width:1px; }
.clock-center { position:absolute; left:calc(50% - 4px); top:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#111; }
.clock-digital { margin-top:14px; font:18px var(--system-font); }

.trash-panel, .help-panel { min-height:100%; padding:25px; text-align:center; background:#fff; }
.large-empty-icon { width:80px; height:80px; }
.help-list { max-width:420px; margin:16px auto; text-align:left; line-height:1.7; }
kbd { padding:1px 5px; border:1px solid #111; border-radius:3px; background:#eee; box-shadow:1px 1px #777; font:12px var(--body-font); }

.modal-shade { position:absolute; z-index:8500; inset:0; display:grid; place-items:center; background:#0003; pointer-events:auto; }
.dialog-box { width:min(430px,calc(100% - 30px)); padding:22px; background:#fff; border:2px solid #111; box-shadow:5px 5px #0008; text-align:center; }
.dialog-buttons { margin-top:20px; display:flex; justify-content:center; gap:15px; }

.toast { position:absolute; z-index:9500; left:50%; bottom:22px; max-width:calc(100% - 30px); transform:translateX(-50%); padding:7px 14px; color:#fff; background:#111; border:2px solid #fff; box-shadow:3px 3px #0007; white-space:nowrap; }

.boot-screen, .shutdown-screen {
  position:absolute; z-index:10000; inset:0; display:grid; place-items:center;
  background:#aaa; cursor:default;
}
.boot-screen { transition:opacity .45s ease; }
.boot-screen.leaving { opacity:0; pointer-events:none; }
.boot-card { width:min(410px,80%); text-align:center; }
.happy-mac { width:76px; height:88px; margin:0 auto 26px; position:relative; background:#fff; border:4px solid #111; border-radius:4px; box-shadow:inset 0 -11px #ddd; }
.happy-mac::after { content:""; position:absolute; left:9px; right:9px; bottom:-16px; height:13px; background:#fff; border:4px solid #111; border-top:0; }
.happy-eye { position:absolute; top:27px; width:7px; height:8px; background:#111; }
.happy-eye.left { left:18px; }.happy-eye.right { right:18px; }
.happy-nose { position:absolute; left:35px; top:35px; width:8px; height:13px; border-left:3px solid #111; border-bottom:3px solid #111; }
.happy-mouth { position:absolute; left:21px; top:52px; width:34px; height:13px; border-bottom:4px solid #111; border-radius:0 0 50% 50%; }
.boot-card h1 { margin:0 0 24px; font-size:21px; }
.boot-card p { margin:15px 0; font-family:var(--body-font); font-size:12px; }
.boot-progress { height:16px; padding:2px; background:#fff; border:2px solid #111; }
.boot-progress span { display:block; width:0; height:100%; background:repeating-linear-gradient(135deg,#111 0 2px,#fff 2px 4px); animation:booting 2.3s ease-out .25s forwards; }
@keyframes booting { 0%{width:0} 35%{width:28%} 70%{width:67%} 100%{width:100%} }
.shutdown-screen { background:#111; color:#fff; }
.shutdown-dialog { text-align:center; font-family:var(--body-font); font-size:17px; line-height:1.5; }
.power-symbol { width:58px; height:58px; margin:0 auto 18px; display:grid; place-items:center; border:4px solid #fff; border-radius:50%; font-size:52px; line-height:1; }
.shutdown-dialog .classic-button { margin-top:22px; }

.drag-selection { position:absolute; z-index:19; border:1px dotted #fff; background:#ffffff1d; pointer-events:none; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
[hidden] { display:none !important; }

@media (max-width: 720px), (max-height: 600px) {
  body { display:block; }
  .macintosh { width:100vw; height:100dvh; min-height:420px; padding:0; border:0; border-radius:0; }
  .bezel { padding:0; border:0; border-radius:0; }
  .screen { border-radius:0; }
  .case-details { display:none; }
  .menu-trigger { min-width:0; padding-inline:7px; font-size:13px; }
  .apple-trigger { padding-inline:8px; }
  .status-button:not(.clock-button) { display:none; }
  .clock-button { padding-inline:6px; font-size:11px; }
  .desktop-icon { transform:scale(.9); transform-origin:top left; }
  .pattern-options { grid-template-columns:repeat(3,42px); }
  .mac-window { min-width:230px; }
  .prince-app { min-height:0; overflow:auto; }
  .prince-modebar { min-height:34px; gap:4px; }
  .prince-mode, .prince-emulator-reload { padding-inline:6px; font-size:10px; }
  .prince-emulator-state, .prince-emulator-source { display:none; }
  .prince-emulator-hint { font-size:9px; }
  .prince-hud { grid-template-columns:1fr 1fr; font-size:10px; }
  .prince-title, .prince-level { text-align:left; }
  .prince-health, .prince-time { text-align:right; }
  .prince-touch-controls { position:relative; z-index:3; display:flex; }
  .prince-touch-controls button { width:50px; height:42px; }
  .prince-status > span:last-child { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen { transition:none; }
  .boot-progress span { animation-duration:.1s; }
  .screen::after { animation:none; }
}

/* Real emulator layout — inspired by the compact pre-production Macintosh. */
body {
  background: radial-gradient(ellipse at 50% 42%, #f8f7f2 0, #dddcd5 52%, #999891 100%);
}

.macintosh {
  width: min(1180px, 96vw, 115vh);
  aspect-ratio: 1.22;
  padding: 3.8% 3.7% 0;
  background:
    linear-gradient(90deg, transparent 0 96.6%, #77705f40 96.6% 97.4%, transparent 97.4%),
    linear-gradient(112deg, #ded8bd 0%, #cbc3a5 62%, #aaa187 100%);
  border: 2px solid #eee9d5;
  border-right-color: #77705f;
  border-bottom-color: #696353;
  border-radius: 13px 13px 22px 22px / 11px 11px 18px 18px;
  box-shadow: 0 28px 62px #29271f77, inset 6px 6px 9px #fff7, inset -9px -6px 13px #655f5048;
}

.macintosh::after { display:none; }
.macintosh::before {
  left:3.5%; right:3.5%; bottom:1.5%; height:2%;
  border-radius:0 0 16px 16px;
  border-bottom-color:#716b59;
  opacity:.7;
}

.bezel {
  width:100%; height:auto; aspect-ratio:1.43; padding:15px 16px 17px;
  background:linear-gradient(135deg,#c6bea2 0,#aaa288 55%,#8d856f 100%);
  border:5px solid #d9d2b8;
  border-top-color:#a49c83;
  border-left-color:#b3ab90;
  border-radius:9px 9px 14px 14px;
  box-shadow:inset 0 0 15px #3b382f99,0 2px 1px #fff8,0 0 0 2px #99917a;
}

.screen {
  width:100%; height:100%; position:relative; overflow:hidden; isolation:isolate;
  background:#050706; border-radius:30px / 21px;
  box-shadow:inset 0 0 34px #000d,0 0 0 5px #393b35,0 0 17px #8bb8a72b;
  filter:none;
}

.emulator-stage { position:absolute; inset:0; overflow:hidden; background:#000; }
.mac-emulator { width:100%; height:100%; display:block; border:0; background:#000; }
.screen.mode-mono .mac-emulator { filter:grayscale(1) contrast(1.06) sepia(.06); }
.screen.crt-strong .mac-emulator { filter:contrast(1.1) brightness(.92) saturate(.88); }
.screen.mode-mono.crt-strong .mac-emulator { filter:grayscale(1) contrast(1.13) brightness(.92) sepia(.09); }

.screen::after {
  content:""; position:absolute; inset:0; z-index:30; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(113deg,#ffffff14 0%,transparent 15% 69%,#bde5d410 82%,transparent 100%),
    radial-gradient(ellipse at center,transparent 51%,#0002 79%,#000b 119%);
  box-shadow:inset 0 0 14px #000a,inset 3px 2px 4px #fff1;
  animation:crt-flicker 8s steps(2,end) infinite;
}
.screen.crt-off::after { background:radial-gradient(ellipse at center,transparent 63%,#0003 112%); animation:none; }
.screen.crt-medium::before,.screen.crt-strong::before {
  content:""; position:absolute; inset:0; z-index:29; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(to bottom,#ffffff0a 0 1px,transparent 1px 2px,#00000042 2px 3px);
  background-size:100% 3px;
  opacity:.25;
}
.screen.mode-color.crt-medium::before,.screen.mode-color.crt-strong::before {
  background:
    repeating-linear-gradient(to bottom,#ffffff08 0 1px,transparent 1px 2px,#00000042 2px 3px),
    repeating-linear-gradient(to right,#ff00000d 0 1px,#00ff0008 1px 2px,#0000ff0d 2px 3px);
  background-size:100% 3px,3px 100%;
}
.screen.crt-strong::before { opacity:.48; }

.emulator-loading {
  position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#161612; background:#b9b9b3; font-family:var(--system-font); text-align:center;
}
.emulator-loading::after { content:""; width:min(280px,60%); height:12px; margin-top:8px; border:2px solid #111; background:repeating-linear-gradient(135deg,#111 0 2px,#fff 2px 4px); animation:loading-stripes .7s linear infinite; }
.emulator-happy-mac { width:66px; height:70px; display:grid; place-items:center; background:#eee; border:4px solid #111; border-radius:4px; box-shadow:inset 0 -10px #ccc; font-size:29px; }
.emulator-loading strong { font-size:16px; letter-spacing:.6px; }
.emulator-loading span { font:12px var(--body-font); }
@keyframes loading-stripes { to { background-position:8px 0; } }

.software-drawer {
  position:absolute; z-index:24; inset:5%; padding:0; overflow:auto; color:#111; background:#e5e2d8;
  border:2px solid #111; box-shadow:7px 7px #0008; font-family:var(--body-font); user-select:text;
}
.software-drawer header { position:sticky; top:0; z-index:1; min-height:48px; padding:7px 9px; display:flex; align-items:center; justify-content:space-between; gap:15px; background:#f4f1e7; border-bottom:2px solid #111; }
.software-drawer header div { display:flex; flex-direction:column; gap:2px; }
.software-drawer header strong { font:16px var(--system-font); }
.software-drawer header span { font-size:11px; color:#555; }
.software-drawer header button { width:29px; height:29px; padding:0; color:#fff; background:#111; border:0; font:21px/1 sans-serif; }
.software-grid { padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.software-grid section { min-height:92px; padding:10px; background:#fff; border:1px solid #777; box-shadow:2px 2px #aaa; }
.software-grid h2 { margin:0 0 7px; font:15px var(--system-font); }
.software-grid p { margin:0; font-size:12px; line-height:1.5; }
.software-note { margin:0 14px 14px; padding:9px; background:#fff; border:1px dotted #555; font-size:12px; }
.emulator-status { position:absolute; z-index:22; left:10px; bottom:8px; max-width:calc(100% - 20px); padding:4px 8px; overflow:hidden; color:#ddd; background:#050505c9; border:1px solid #ffffff4d; font:10px "Courier New",monospace; text-overflow:ellipsis; white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; }
.screen:hover .emulator-status,.screen:focus-within .emulator-status { opacity:.8; }

.case-details { left:5%; right:5%; bottom:2.6%; height:10.5%; }
.case-details::after { display:none; }
.brand { left:0; top:18%; gap:0; }
.case-apple { width:26px; height:29px; }
.floppy-slot { width:29%; height:17px; right:0; top:14%; border-width:2px; border-radius:1px; }
.floppy-slot::before { left:8px; right:22px; top:4px; height:3px; }
.floppy-slot::after { right:3px; top:26px; width:13px; height:13px; }
.power-light { right:.4%; top:72%; width:6px; height:6px; }
.power-light.loading { animation:power-pulse .75s ease-in-out infinite alternate; }
@keyframes power-pulse { to { opacity:.32; box-shadow:none; } }

.hardware-controls { position:absolute; left:43px; right:31%; top:10%; display:flex; align-items:center; justify-content:center; gap:4px; }
.hardware-controls button { min-width:46px; height:25px; padding:2px 7px; color:#39362e; background:#c5bea5; border:1px solid #746e5d; border-radius:2px; box-shadow:inset 1px 1px #f2eedc,1px 1px #827b68; font:10px var(--system-font); white-space:nowrap; }
.hardware-controls button:hover,.hardware-controls button:focus-visible { outline:1px solid #4a463b; background:#d8d1b8; }
.hardware-controls button.active,.hardware-controls button[aria-pressed="true"] { color:#eee9d6; background:#454239; box-shadow:inset 1px 1px #211f1a; }

@media (max-width:720px),(max-height:600px) {
  .macintosh { width:100vw; height:100dvh; min-height:0; aspect-ratio:auto; padding:0; border:0; border-radius:0; }
  .bezel { width:100%; height:100%; aspect-ratio:auto; padding:0 0 38px; border:0; border-radius:0; }
  .screen { border-radius:0; box-shadow:none; }
  .case-details { display:block; position:fixed; z-index:50; left:0; right:0; bottom:0; height:38px; padding:5px; background:#beb79e; border-top:2px solid #77705f; }
  .brand,.floppy-slot,.power-light { display:none; }
  .hardware-controls { position:static; width:100%; height:100%; gap:3px; }
  .hardware-controls button { min-width:0; flex:1; height:28px; padding-inline:3px; font-size:9px; }
  .software-drawer { inset:3%; }
  .software-grid { grid-template-columns:1fr 1fr; padding:8px; }
  .emulator-status { bottom:43px; }
}

@media (prefers-reduced-motion:reduce) {
  .screen::after,.emulator-loading::after,.power-light.loading { animation:none; }
}

/* cool-retro-term inspired display processor. The emulator remains a real iframe;
   these layers reproduce the optical CRT character without intercepting input. */
.screen {
  --crt-phosphor: 184, 221, 207;
  --crt-profile-filter: contrast(1.05) brightness(.98) saturate(.9);
  --crt-scanlines: .34;
  --crt-bloom: .42;
  --crt-noise: .08;
  --crt-jitter-x: .14px;
  --crt-jitter-y: .08px;
  --crt-jitter-x-negative: -.14px;
  --crt-jitter-y-negative: -.08px;
  --crt-glow-line: .18;
  --crt-curvature: 38px;
  --crt-flicker: .025;
  --crt-sync: .05;
  --crt-sync-shift: .4px;
  --crt-sync-shift-negative: -.4px;
  --crt-rgb: .18;
  --crt-curvature-y: 27px;
  --crt-scanline-opacity:.24;
  --crt-bloom-inset:40px;
  --crt-bloom-outer:25px;
  --crt-bloom-alpha:.09;
  --crt-phosphor-center:.04;
  --crt-phosphor-wash:.01;
  --crt-noise-opacity:.04;
  --crt-glow-line-opacity:.08;
  --crt-flicker-opacity:.025;
  --crt-sync-opacity:.02;
  --crt-rgb-opacity:.08;
  border-radius:var(--crt-curvature) / var(--crt-curvature-y);
  box-shadow:
    inset 0 0 var(--crt-bloom-inset) #000,
    0 0 0 5px #393b35,
    0 0 var(--crt-bloom-outer) rgba(var(--crt-phosphor),var(--crt-bloom-alpha));
  transition: border-radius .22s ease, box-shadow .22s ease;
}

.screen::before { content:none !important; }
.screen::after {
  z-index:18;
  background:
    linear-gradient(112deg,#ffffff19 0%,transparent 16% 68%,rgba(var(--crt-phosphor),.07) 83%,transparent 100%),
    radial-gradient(ellipse at center,transparent 48%,#0002 75%,#000d 119%);
  box-shadow:inset 0 0 18px #000b,inset 3px 2px 4px #fff1;
  animation:none;
}

.mac-emulator {
  --crt-mode-grayscale:0;
  --crt-mode-contrast:1;
  --crt-mode-sepia:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:default;
  filter:grayscale(var(--crt-mode-grayscale)) contrast(var(--crt-mode-contrast)) sepia(var(--crt-mode-sepia)) var(--crt-profile-filter);
  transform:none;
  will-change:filter;
}
.screen.mode-mono .mac-emulator { --crt-mode-grayscale:1; --crt-mode-contrast:1.04; --crt-mode-sepia:.05; }
.screen.fx-enabled .mac-emulator { animation:none; }
.screen.fx-enabled .crt-aperture { animation:crt-mask-jitter 5.8s steps(1,end) infinite; }

@keyframes crt-mask-jitter {
  0%,11%,18%,42%,68%,90%,100% { transform:translate3d(0,0,0); }
  11.2% { transform:translate3d(var(--crt-jitter-x),var(--crt-jitter-y),0); }
  18.2% { transform:translate3d(var(--crt-jitter-x-negative),0,0); }
  42.2% { transform:translate3d(var(--crt-jitter-x),var(--crt-jitter-y-negative),0); }
  91% { transform:translate3d(var(--crt-sync-shift-negative),0,0); }
  91.5% { transform:translate3d(var(--crt-sync-shift),var(--crt-jitter-y),0); }
}

.crt-effects {
  position:absolute;
  inset:0;
  z-index:12;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  contain:paint;
}
.screen:not(.fx-enabled) .crt-effects { display:none; }

.crt-phosphor,.crt-aperture,.crt-flicker,.crt-sync-band {
  position:absolute;
  inset:0;
}
.crt-phosphor {
  background:
    radial-gradient(ellipse at 50% 48%,rgba(var(--crt-phosphor),var(--crt-phosphor-center)),transparent 62%),
    linear-gradient(rgba(var(--crt-phosphor),var(--crt-phosphor-wash)),rgba(var(--crt-phosphor),var(--crt-phosphor-wash)));
  mix-blend-mode:screen;
}
.crt-aperture::before,.crt-aperture::after {
  content:"";
  position:absolute;
  inset:0;
}
.crt-aperture::before {
  opacity:var(--crt-scanline-opacity);
  background:repeating-linear-gradient(to bottom,#ffffff0a 0 1px,transparent 1px 2px,#0000007d 2px 3px);
  background-size:100% 3px;
}
.crt-aperture::after {
  opacity:var(--crt-rgb-opacity);
  background:repeating-linear-gradient(to right,#ff1111b0 0 1px,#19ff786e 1px 2px,#3477ffb0 2px 3px);
  background-size:3px 100%;
  mix-blend-mode:soft-light;
}
.crt-noise {
  position:absolute;
  inset:-20%;
  width:140%;
  height:140%;
  opacity:var(--crt-noise-opacity);
  image-rendering:pixelated;
  mix-blend-mode:soft-light;
  transform:scale(1.05);
}
.crt-glow-line {
  position:absolute;
  left:-3%;
  top:-12%;
  width:106%;
  height:7%;
  opacity:var(--crt-glow-line-opacity);
  background:linear-gradient(to bottom,transparent,rgba(var(--crt-phosphor),.08) 28%,rgba(var(--crt-phosphor),.7) 53%,rgba(var(--crt-phosphor),.08) 70%,transparent);
  filter:blur(1.5px);
  mix-blend-mode:screen;
  animation:crt-glow-sweep 7.2s linear infinite;
}
@keyframes crt-glow-sweep { to { transform:translateY(1520%); } }

.crt-sync-band {
  top:-16%;
  bottom:auto;
  height:12%;
  opacity:var(--crt-sync-opacity);
  background:linear-gradient(to bottom,transparent,#fff2 42%,#0008 48% 55%,transparent);
  animation:crt-sync-roll 5.8s steps(35,end) infinite;
}
@keyframes crt-sync-roll { 0%,74% { transform:translateY(0); } 100% { transform:translateY(980%); } }

.crt-flicker {
  background:#fff;
  opacity:0;
  mix-blend-mode:overlay;
  animation:crt-variable-flicker .13s steps(2,end) infinite;
}
@keyframes crt-variable-flicker {
  0% { opacity:0; }
  40% { opacity:var(--crt-flicker-opacity); }
  70% { opacity:0; }
  100% { opacity:var(--crt-flicker-opacity); }
}

.crt-panel {
  position:absolute;
  z-index:60;
  top:16px;
  right:16px;
  width:min(390px,calc(100% - 32px));
  max-height:calc(100% - 32px);
  overflow:auto;
  color:#f0c76d;
  background:#080c0d;
  border:1px solid #826c3b;
  border-radius:4px;
  box-shadow:0 18px 45px #000d,inset 0 0 28px #0f301f66,0 0 20px #e4b6491f;
  font:11px/1.2 "Courier New",monospace;
  user-select:none;
}
.crt-panel-header {
  position:sticky;
  top:0;
  z-index:2;
  min-height:54px;
  padding:9px 10px 8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#f7d789;
  background:linear-gradient(#192321,#0a0e0e);
  border-bottom:1px solid #6e5b35;
  box-shadow:0 3px 9px #0009;
  text-shadow:0 0 8px #d9a93f75;
}
.crt-panel-header div { display:flex; flex-direction:column; gap:2px; }
.crt-panel-header span { color:#749786; font-size:9px; letter-spacing:2px; }
.crt-panel-header strong { font-size:15px; letter-spacing:1.5px; }
.crt-panel-header button {
  width:30px;
  height:30px;
  padding:0;
  color:#d9b75f;
  background:#111716;
  border:1px solid #685a37;
  border-radius:2px;
  font:22px/1 monospace;
}
.crt-panel-body { padding:12px; }
.crt-master-row {
  padding:0 0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #283630;
}
.crt-master-row > div { display:flex; align-items:center; gap:8px; letter-spacing:.8px; }
.crt-led {
  width:8px;
  height:8px;
  display:block;
  border-radius:50%;
  background:#5cff8a;
  box-shadow:0 0 3px #fff,0 0 10px #47ff7e;
}
.crt-panel.fx-off .crt-led { background:#362f27; box-shadow:none; }
.crt-switch {
  min-width:48px;
  padding:4px 9px;
  color:#07100b;
  background:#65df82;
  border:1px solid #a6ffb8;
  border-radius:2px;
  box-shadow:0 0 8px #4cff7b4d;
  font:bold 11px monospace;
}
.crt-switch[aria-checked="false"] { color:#aa8d57; background:#221f18; border-color:#594b32; box-shadow:none; }

.crt-profile-picker { margin:12px 0 10px; padding:9px 8px 8px; border:1px solid #354940; }
.crt-profile-picker legend { padding:0 6px; color:#789b88; font-size:9px; letter-spacing:1.2px; }
.crt-profile-picker > div { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.crt-profile-picker button {
  min-width:0;
  padding:7px 8px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#a58d5d;
  background:#101615;
  border:1px solid #38443f;
  border-radius:2px;
  font:bold 10px/1 monospace;
  text-align:left;
}
.crt-profile-picker button i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#b8ddcf; box-shadow:0 0 7px currentColor; }
.crt-profile-picker button[data-crt-profile="amber"] i { background:#ff9b26; }
.crt-profile-picker button[data-crt-profile="green"] i { background:#2cff7b; }
.crt-profile-picker button[data-crt-profile="blue"] i { background:#72b6ff; }
.crt-profile-picker button.active { color:#ffe19c; border-color:#a7803e; background:#252014; box-shadow:inset 0 0 9px #d89c2d1a; }

.crt-readout {
  min-height:37px;
  padding:6px 8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  color:#547365;
  background:#030505;
  border:1px solid #29342f;
  box-shadow:inset 0 0 10px #000;
}
.crt-readout span { font-size:8px; letter-spacing:1px; }
.crt-readout strong { color:#f1bc50; font-size:12px; text-shadow:0 0 7px #f2a92380; }
.crt-readout em { color:#4dd67c; font-size:8px; font-style:normal; letter-spacing:.8px; }
.crt-panel.fx-off .crt-readout em { color:#71654e; }

.crt-sliders { margin-top:7px; }
.crt-sliders label {
  min-height:27px;
  display:grid;
  grid-template-columns:91px 28px 1fr;
  align-items:center;
  gap:6px;
  color:#b69b64;
}
.crt-sliders label > span { font-size:9px; letter-spacing:.5px; }
.crt-sliders output { color:#6fa88a; font-size:9px; text-align:right; }
.crt-sliders input[type="range"] {
  width:100%;
  height:14px;
  margin:0;
  appearance:none;
  background:transparent;
}
.crt-sliders input[type="range"]::-webkit-slider-runnable-track { height:3px; background:linear-gradient(90deg,#bd8735,#385246); border-radius:0; }
.crt-sliders input[type="range"]::-webkit-slider-thumb { width:8px; height:14px; margin-top:-5px; appearance:none; background:#e5c16e; border:1px solid #fff2bd; border-radius:1px; box-shadow:0 0 5px #ffbd45; }
.crt-sliders input[type="range"]::-moz-range-track { height:3px; background:#6c5d3c; }
.crt-sliders input[type="range"]::-moz-range-thumb { width:7px; height:13px; background:#e5c16e; border:1px solid #fff2bd; border-radius:1px; }
.crt-panel.fx-off .crt-sliders { opacity:.35; }

.crt-panel-actions {
  margin-top:8px;
  padding-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #283630;
}
.crt-panel-actions button { padding:6px 8px; color:#c7a65f; background:#151813; border:1px solid #675638; border-radius:2px; font:bold 9px monospace; }
.crt-panel-actions span { color:#486358; font-size:7px; letter-spacing:.6px; text-align:right; }

.hardware-controls button[aria-expanded="true"] { color:#eee9d6; background:#454239; box-shadow:inset 1px 1px #211f1a; }

@media (max-width:720px),(max-height:600px) {
  .crt-panel { top:8px; right:8px; width:min(370px,calc(100% - 16px)); max-height:calc(100% - 54px); }
  .crt-panel-header { min-height:45px; padding-block:5px; }
  .crt-panel-body { padding:8px 10px; }
  .crt-profile-picker { margin-block:8px; }
  .crt-sliders label { min-height:23px; }
}

@media (prefers-reduced-motion:reduce) {
  .screen.fx-enabled .crt-aperture,.crt-glow-line,.crt-sync-band,.crt-flicker { animation:none; }
}