:root {
  --background: #252525;
  --foreground: #eeeeee;
  --title-background: #383838;
  --muted: #bdbdbd;
  --font-size: clamp(16px, 1.25vw, 32px);
  --close: #ff5f57;
  --minimize: #febc2e;
  --maximize: #28c840;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--background); color: var(--foreground); }
.terminal { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px minmax(0, 1fr) auto; }
.title-bar { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; padding: 0 12px; background: var(--title-background); font: 12px system-ui, sans-serif; }
.window-buttons { display: grid; grid-template-columns: repeat(3, 12px); gap: 7px; }
.window-buttons i { width: 12px; height: 12px; border-radius: 50%; background: var(--close); }
.window-buttons i:nth-child(2) { background: var(--minimize); }
.window-buttons i:nth-child(3) { background: var(--maximize); }
#status { color: var(--muted); }
.screen { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: none; padding: 12px 16px; }
.screen::-webkit-scrollbar { display: none; }
.screen pre { max-width: 100%; }
[hidden] { display: none !important; }
#terminal-status { padding: 4px 16px; background: var(--background); }
.playback-notice { position: fixed; inset: 45% auto auto 50%; transform: translateX(-50%); padding: 12px 20px; background: var(--title-background); font: 18px system-ui, sans-serif; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--font-size)/1.3 Menlo, Monaco, Consolas, monospace; tab-size: 4; }
.font-16 { --font-size: clamp(12px, 0.833vw, 22px); }
.font-20 { --font-size: clamp(14px, 1.042vw, 26px); }
.font-24 { --font-size: clamp(16px, 1.25vw, 32px); }
.font-28 { --font-size: clamp(18px, 1.458vw, 36px); }
.font-32 { --font-size: clamp(20px, 1.667vw, 42px); }
.font-40 { --font-size: clamp(24px, 2.083vw, 52px); }
.playback-controls { position: fixed; inset: auto 12px 24px; display: grid; grid-template-columns: minmax(60px, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--title-background); font: 13px system-ui, sans-serif; }
#timeline { min-width: 0; width: 100%; accent-color: var(--foreground); }
#position { color: var(--muted); }
@media (max-width: 600px) { .playback-controls { grid-template-columns: 1fr; } }