/* app.css — the whole stylesheet, because the CSP that serves this page allows style-src 'self' and nothing else. An inline style attribute or a style element renders perfectly under a local http.server (which sends no CSP at all) and is silently refused in production. CSSOM writes from JS (el.style.width = …) are not covered by style-src and keep working, so anything genuinely dynamic — a bar's width, a legend swatch's colour — is set that way. */ :root { --bg: #0d1117; --panel: #141b24; --edge: #22303f; --ink: #dde6f0; --dim: #8fa3b8; --accent: #4fc3f7; --accent-ink: #06121b; --warn: #ffb74d; --bad: #ef5350; --ok: #66bb6a; } * { box-sizing: border-box; } /* `hidden` is only a default of display:none, so any class that sets display beats it and the "hidden" element keeps rendering. .row is flex and .chips is flex here, both of which are toggled. Said once, globally. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* The hosted back-bar is spliced in immediately after by the site build. An app wrapper of `position: fixed; inset: 0` covers it completely and there is no way to scroll to it. So: body is the flex column, the bar takes its natural height at the top, and .wrap takes whatever is left. That fills the viewport when the file is opened standalone and yields exactly the bar's height when it is hosted. */ body { display: flex; flex-direction: column; } body > .hosted-bar { flex: 0 0 auto; max-height: 20vh; overflow: auto; } .topbar, .help { flex: none; } .topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--edge); background: var(--panel); } .brand { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; } .brand img { flex: none; } .topbar h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 3px; vertical-align: 3px; font-weight: 700; } .help { padding: 16px 20px; border-bottom: 1px solid var(--edge); background: #101720; color: var(--dim); font-size: 14px; } .help p { margin: 0 0 10px; max-width: 78ch; } .help p:last-child { margin-bottom: 0; } .help strong, .help b { color: var(--ink); } .help code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--accent); } .wrap { display: flex; flex: 1; min-height: 0; position: relative; } .panel { width: 350px; flex: none; overflow-y: auto; min-height: 0; border-right: 1px solid var(--edge); background: var(--panel); padding: 4px 0 24px; } .step { padding: 16px 18px; border-bottom: 1px solid var(--edge); } .step:last-child { border-bottom: 0; } .step h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--dim); font-weight: 600; display: flex; align-items: center; gap: 8px; } .n { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--edge); color: var(--ink); font-size: 11px; font-weight: 700; flex: none; } .row { display: flex; gap: 8px; align-items: center; } .row.two { gap: 10px; margin-top: 8px; } .row.two label { flex: 1; font-size: 12px; color: var(--dim); } .row.two input, .row.two select { width: 100%; margin-top: 3px; } .row.wrapping { flex-wrap: wrap; } .row + .row { margin-top: 8px; } input[type=text], input[type=date], input[type=number], select { background: #0b1017; border: 1px solid var(--edge); color: var(--ink); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 13.5px; min-width: 0; } input[type=text] { flex: 1; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } input[type=range] { flex: 1; accent-color: var(--accent); } button { background: var(--edge); border: 1px solid transparent; color: var(--ink); border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; } button:hover:not(:disabled) { background: #2c3d50; } button:disabled { opacity: 0.45; cursor: default; } button.primary { width: 100%; background: var(--accent); color: var(--accent-ink); font-weight: 650; padding: 10px; } button.primary:hover:not(:disabled) { background: #6fd0fa; } button.ghost { background: transparent; border-color: var(--edge); } button.wide { width: 100%; margin-top: 10px; } button.half { flex: 1; } button.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; } button.link { background: none; border: 0; padding: 0; color: var(--accent); font-size: inherit; text-decoration: underline; cursor: pointer; } button.link:hover { background: none; } .hint { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); } .aoi { margin: 8px 0 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); word-break: break-all; } .err { margin: 10px 0 0; font-size: 13px; color: var(--bad); background: #2a1416; border: 1px solid #58252a; border-radius: 6px; padding: 9px 11px; } .warnbox { margin: 10px 0 0; font-size: 12.5px; color: var(--warn); background: #241c0e; border: 1px solid #4a3a19; border-radius: 6px; padding: 9px 11px; } .prog { margin-top: 12px; } .bar { height: 4px; background: var(--edge); border-radius: 2px; overflow: hidden; } .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; } .prog p { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); } .prog .mono { font-variant-numeric: tabular-nums; } .toggles { margin-top: 10px; gap: 14px; font-size: 13px; color: var(--dim); } .toggles label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .out { margin-top: 12px; font-size: 13px; } .out dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; } .out dt { color: var(--dim); } .out dd { margin: 0; font-variant-numeric: tabular-nums; } .out .note { color: var(--dim); font-size: 12.5px; margin: 0 0 8px; } .out .lede { margin: 0 0 8px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .out .lede .dim { font-weight: 400; color: var(--dim); font-size: 13px; } /* Scene list. Each row is a