/* Shared look for the viewer and the editor: colours, top bar, buttons, form fields, the television frame, dialogs. */
:root {
  color-scheme: dark;
  --bg: #0d0f12; --panel: #1a1d22; --panel2: #14161a; --line: #2c3037; --text: #d8dce2; --dim: #8a919c;
  --accent: #ffe14d; --focus: #7cc4ff; --ok: #6fdc8c; --warn: #ffb347; --danger: #ff7a7a; --primary: #2a62c9;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(ellipse at 50% 0%, #1b1f27 0%, var(--bg) 60%); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: #8ab4d8; } a:hover { color: #b9d4ee; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: 8px; top: -60px; background: #fff; color: #000; padding: 8px 12px; border-radius: 4px; z-index: 10; } .skip:focus { top: 8px; }
kbd { background: #23272e; border: 1px solid #3a3f48; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font: 12px ui-monospace, Menlo, Consolas, monospace; color: #e6e9ee; }

/* buttons */
button { font: inherit; color: var(--text); background: #262a31; border: 1px solid #3a3f48; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button:hover:not(:disabled) { background: #30353d; border-color: #50565f; }
button:disabled { cursor: default; opacity: .5; }
button[aria-pressed="true"], button.on { background: #264a2c; border-color: #4f9a5c; color: #d6f5db; }
button.primary { background: var(--primary); border-color: #4a82e0; color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #3470dc; }
button.danger { background: #3a2022; border-color: #7a3a3e; color: #ffb3b3; }
button.link { background: none; border: 0; padding: 0; color: #8ab4d8; text-decoration: underline; }

/* form fields */
input:not([type]), input[type=text], input[type=number], input[type=password], select, textarea { background: #0f1114; color: var(--text); border: 1px solid #3a3f48; border-radius: 6px; padding: 6px 9px; font: inherit; min-width: 0; }
input:disabled, select:disabled { opacity: .5; }
input[type=file] { color: var(--dim); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; color: var(--text); background: #262a31; border: 1px solid #3a3f48; border-radius: 6px; padding: 5px 10px; margin-right: 8px; cursor: pointer; }
input[type=checkbox] { accent-color: #4f9a5c; }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(10,12,15,.7); backdrop-filter: blur(6px); }
.bar h1 { margin: 0; font-size: 16px; letter-spacing: .14em; font-weight: 700; color: var(--text); } .bar h1 span { color: var(--accent); } .bar h1 small { font-size: 12px; letter-spacing: .1em; color: var(--dim); font-weight: 600; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tools a { padding: 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: #20242a; border: 1px solid #343a43; color: #b4bac4; font-size: 12px; white-space: nowrap; }

/* the television: a bezel around a 4:3 screen */
.tv { padding: clamp(8px, 1.8vw, 18px); border-radius: 22px; background: linear-gradient(160deg, #31343b, #17181c 70%); box-shadow: 0 18px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.6); }
.screen { position: relative; overflow: hidden; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #0b0c0e; }
.screen canvas { image-rendering: auto; }

/* dialogs */
dialog { background: var(--panel); color: var(--text); border: 1px solid #454b55; border-radius: 12px; max-width: min(440px, calc(100vw - 32px)); padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog h2 { margin: 0 0 10px; font-size: 16px; }
dialog label { display: block; margin: 10px 0 4px; color: var(--dim); }
dialog select, dialog textarea { width: 100%; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; } dialog dt { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--accent); } dialog dd { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }