/* Hallmark · shape: app screen · theme: Console (2/3) with supplied Union City RP palette · genre: modern-minimal · posture: restrained · surface: absolute · signature: live transparent broadcast canvas · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, removed a decorative sidebar and kept three editing steps */
/* Hallmark · waive 7b · supplied Union brand guide requires black · Official Union logo backgrounds retain the exact brand value */

:root {
  --color-paper: #0D0E12; --color-paper-2: #15161C; --color-paper-3: #1D1F27; --color-input: #101116;
  --color-ink: #F0F1F5; --color-ink-2: #D6D7DF; --color-muted: #A0A3B1; --color-faint: #797E90;
  --color-rule: #2B2E38; --color-rule-2: #626777; --color-accent: #8CE5FF; --color-accent-ink: #071A20;
  --color-accent-hover: #B4EEFF; --color-accent-soft: #1F323D; --color-focus: #8CE5FF;
  --color-orange: #E8801F; --color-purple: #C900D6; --color-brand-black: #000000; --color-error: #FFA9A4;
  --color-checker-a: #14151B; --color-checker-b: #191A21; --color-transparent: transparent;
  --color-backdrop: rgba(0,0,0,.76); --color-shadow: rgba(0,0,0,.3);
  --font-body: 'BruceForever', 'Segoe UI', Arial, sans-serif; --font-display: var(--font-body);
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --radius-control: 6px; --radius-panel: 10px; --container: 1440px; --gutter: 40px;
  --dur-micro: 120ms; --dur-short: 220ms; --ease-out: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { overflow-x: clip; color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font: 400 16px/1.5 var(--font-body); font-synthesis: none; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: var(--color-transparent); }
button, summary, select { cursor: pointer; }
button { color: inherit; }
button:disabled { opacity: .55; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
button:active { transform: translateY(1px); }
input:focus-visible, select:focus-visible { outline-offset: -3px; }
button { transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
fieldset, h1, h2, h3, p { margin: 0; }
fieldset { border: 0; padding: 0; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; pointer-events: none; }
.icon, .preview-monitor { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: clip; white-space: nowrap; }
.container, .header-inner { max-width: var(--container); padding-inline: var(--gutter); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--color-rule); }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: var(--space-xl); }
.brand { display: flex; align-items: center; gap: var(--space-md); font-size: 17px; font-weight: 600; white-space: nowrap; }
.brand img { object-fit: contain; }
.brand-divider { height: 24px; width: 1px; background: var(--color-rule); }
nav { display: flex; align-items: stretch; align-self: stretch; gap: var(--space-lg); margin-left: var(--space-lg); }
nav a, .nav-link { display: inline-flex; align-items: center; gap: var(--space-xs); background: none; border: 0; padding: 0; font-size: 14px; color: var(--color-muted); position: relative; }
.nav-active { color: var(--color-ink); }
.nav-active::after { content: ''; position: absolute; height: 2px; bottom: -1px; inset-inline: 0; background: var(--color-accent); }
.nav-link:hover { color: var(--color-ink); }
.nav-link .icon { width: 15px; height: 15px; }
.header-note { margin-left: auto; color: var(--color-muted); font-size: 13px; }
.page-intro { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); }
h1 { font-size: 38px; line-height: 1.15; letter-spacing: -.035em; }
.page-intro p { color: var(--color-muted); margin-top: var(--space-xs); }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 var(--space-lg); border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); font-size: 14px; font-weight: 600; white-space: nowrap; }
.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.primary:hover { background: var(--color-accent-hover); }
.secondary { background: var(--color-paper-2); color: var(--color-ink); }
.secondary:hover { background: var(--color-paper-3); }
.workbench { display: grid; grid-template-columns: 330px minmax(0, 1fr); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); }
.editor { background: var(--color-paper-2); border-radius: var(--radius-panel) 0 0 var(--radius-panel); border-right: 1px solid var(--color-rule); min-width: 0; }
.editor-section { padding: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.editor-section h2 { font-size: 15px; line-height: 1.3; display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 0; }
.section-number { color: var(--color-faint); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; }
.field + .field { margin-top: var(--space-md); }
.field label:not(.upload-zone), .field-label, #link-panel > label { display: flex; align-items: center; gap: var(--space-xs); font-size: 13px; color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.optional { color: var(--color-faint); font-size: 11px; font-weight: 400; margin-left: auto; }
input[type="text"], input:not([type]), select { width: 100%; min-height: 40px; border: 1px solid var(--color-rule-2); background: var(--color-input); border-radius: var(--radius-control); color: var(--color-ink); padding: 0 var(--space-sm); font-size: 13px; }
input::placeholder { color: var(--color-faint); }
input[aria-invalid="true"] { border-color: var(--color-error); }
.counted-input { position: relative; }
.counted-input input { padding-right: 52px; }
.counted-input > span { position: absolute; right: 12px; top: 12px; color: var(--color-faint); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.field-help { display: block; color: var(--color-muted); font-size: 11px; line-height: 1.5; min-height: 1lh; margin-top: var(--space-2xs); }
.upload-zone { display: flex; align-items: center; gap: var(--space-sm); position: relative; min-height: 78px; padding: var(--space-sm); border: 1px dashed var(--color-rule-2); border-radius: var(--radius-control); cursor: pointer; }
.upload-zone:hover, .upload-zone.dragover { background: var(--color-paper-3); }
.upload-zone:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.upload-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; color: var(--color-ink-2); }
.upload-icon img { width: 36px; height: 36px; object-fit: contain; }
.upload-zone strong { font-size: 12px; font-weight: 600; }
.upload-caption { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: 10px; }
.upload-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); }
.upload-bottom .text-button { font-size: 11px; min-height: 26px; }
.palette-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); margin-bottom: var(--space-md); }
.palette { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 38px; background: none; border: 1px solid var(--color-transparent); padding: 0 var(--space-2xs); font-size: 11px; border-radius: var(--radius-control); color: var(--color-muted); }
.palette .icon { display: none; width: 15px; height: 15px; margin-left: auto; visibility: hidden; color: var(--color-accent); }
.palette.active { border-color: var(--color-rule-2); color: var(--color-ink); background: var(--color-paper-3); }
.palette.active .icon { visibility: visible; }
.palette:hover { background: var(--color-paper-3); }
.palette-disc { width: 16px; height: 16px; border-radius: 50%; }
.cyan { background: var(--color-accent); }.orange { background: var(--color-orange); }.purple { background: var(--color-purple); }
.colour-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.colour-fields .field { margin: 0; }
.colour-fields .field label { font-size: 11px; }
.colour-input { display: flex; align-items: center; min-width: 0; position: relative; }
.colour-input input[type="text"] { padding-left: var(--space-xl); font-size: 12px; }
.colour-input input[type="color"] { position: absolute; left: 8px; top: 9px; width: 23px; height: 23px; border: 0; padding: 0; background: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.layout-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.layout-option { border: 0; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); font-size: 11px; color: var(--color-muted); min-height: 80px; }
.layout-picture { display: block; width: 100%; height: 54px; background: var(--color-input); border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); position: relative; }
.layout-picture > span { display: block; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 10px; border-left: 2px solid var(--color-accent); border-bottom: 1px solid var(--color-accent); background: var(--color-paper-3); }
.top-picture > span { bottom: auto; top: 7px; }.compact-picture > span { right: 32px; }
.layout-option.active { color: var(--color-ink); }.layout-option.active .layout-picture { border-color: var(--color-accent); background: var(--color-accent-soft); }
.layout-option:hover .layout-picture { border-color: var(--color-accent); }
.adjustments { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.adjustments summary { display: flex; align-items: center; gap: var(--space-xs); font-size: 12px; color: var(--color-muted); list-style: none; min-height: 24px; }
.adjustments summary::-webkit-details-marker { display: none; }
.adjustments summary .icon { width: 15px; height: 15px; }.adjustments .chevron { margin-left: auto; transform: rotate(90deg); width: 12px; }
.adjustments[open] .chevron { transform: rotate(-90deg); }
.adjustment-fields { display: grid; gap: var(--space-md); padding-top: var(--space-md); }
.range-field label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); }
.range-field output { color: var(--color-ink); font-variant-numeric: tabular-nums; }input[type="range"] { width: 100%; accent-color: var(--color-accent); margin: var(--space-xs) 0 0; }
.editor-bottom { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-lg); }
#save-status { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: 11px; }
#save-status .icon { width: 14px; height: 14px; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; background: none; border: 0; border-radius: var(--radius-control); color: var(--color-muted); }
.icon-button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.icon-button .icon { width: 17px; height: 17px; }
.preview-region { padding: var(--space-lg); min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.preview-toolbar h2 { display: flex; align-items: center; gap: var(--space-sm); font-size: 14px; }
.live-badge { border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--space-2xs) var(--space-xs); color: var(--color-muted); font-size: 10px; font-weight: 400; }
.preview-tools { display: flex; align-items: center; gap: var(--space-xs); }.preview-tools select { background: none; min-height: 32px; border-color: var(--color-rule); font-size: 11px; padding-left: var(--space-xs); width: auto; }.preview-tools .icon-button { width: 32px; height: 32px; flex-basis: 32px; }
.preview-stage { aspect-ratio: 16 / 9; position: relative; background-color: var(--color-checker-a); border-radius: var(--radius-control); outline: 1px solid var(--color-rule); }
.checker { background-image: conic-gradient(var(--color-checker-b) 25%, var(--color-checker-a) 0 50%, var(--color-checker-b) 0 75%, var(--color-checker-a) 0); background-size: 24px 24px; }
.preview-stage.brand-background { background-image: url('assets/brand-background.png'); background-size: cover; background-position: center; }
.preview-stage iframe { position: absolute; inset: 0; border: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--radius-control); }
.preview-placeholder { position: absolute; top: 34%; left: 0; width: 100%; display: flex; align-items: center; flex-direction: column; gap: var(--space-sm); color: var(--color-muted); font-size: 14px; }
.preview-placeholder .preview-monitor { width: 32px; height: 32px; opacity: .65; }.preview-placeholder small { color: var(--color-faint); font-size: 11px; }
.preview-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); }
.background-switch { display: flex; align-items: center; gap: var(--space-xs); }
.background-switch button { min-height: 32px; display: inline-flex; align-items: center; gap: var(--space-xs); border: 1px solid var(--color-transparent); border-radius: 4px; background: none; color: var(--color-muted); padding: 0 var(--space-xs); font-size: 11px; }
.background-switch button.active { border-color: var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink); }.background-switch button:hover { background: var(--color-paper-3); }
.checker-icon, .brand-bg-icon { display: block; width: 12px; height: 12px; border: 1px solid var(--color-rule-2); border-radius: 2px; }
.checker-icon { background: conic-gradient(var(--color-muted) 25%, var(--color-checker-a) 0 50%, var(--color-muted) 0 75%, var(--color-checker-a) 0); background-size: 6px 6px; }.brand-bg-icon { background: var(--color-brand-black); }
.preview-ratio { color: var(--color-faint); font-size: 11px; white-space: nowrap; }
.brand-note { display: flex; align-items: center; gap: var(--space-md); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding-block: var(--space-lg); margin-top: var(--space-md); }
.brand-note > .icon { color: var(--color-accent); }.brand-note strong { font-size: 13px; font-weight: 600; }.brand-note p { font-size: 12px; color: var(--color-muted); margin-top: var(--space-2xs); }.brand-note img { margin-left: auto; object-fit: contain; }
.obs-callout { display: flex; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); }
.obs-symbol { color: var(--color-muted); }.obs-callout h3 { font-size: 13px; }.obs-callout p { margin-top: var(--space-2xs); font-size: 12px; color: var(--color-muted); }.obs-callout .text-button { margin-left: auto; white-space: nowrap; font-size: 12px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 38px; background: none; border: 0; padding: 0; font-size: 12px; color: var(--color-muted); }.text-button:hover { color: var(--color-ink); }.text-button .icon { width: 14px; height: 14px; }
.preview-footnote { margin-top: 0; padding-top: var(--space-lg); text-align: center; color: var(--color-faint); font-size: 11px; }
footer { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); color: var(--color-faint); font-size: 11px; }footer > span:first-child { color: var(--color-muted); font-weight: 600; }footer .text-button { margin-left: auto; font-size: 11px; }
dialog { position: fixed; inset: 0; margin: auto; width: min(540px, calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule-2); border-radius: var(--radius-panel); padding: var(--space-lg);  }
dialog::backdrop { background: var(--color-backdrop); }dialog h2 { margin-top: var(--space-md); font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }dialog > p { font-size: 14px; color: var(--color-muted); margin-top: var(--space-sm); }dialog p + p { margin-top: var(--space-md); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }.dialog-symbol { color: var(--color-accent); }.dialog-symbol .icon { width: 26px; height: 26px; }
.export-tabs { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); border-bottom: 1px solid var(--color-rule); }.export-tabs button { background: none; border: 0; border-bottom: 2px solid var(--color-transparent); padding: var(--space-sm) 0; font-size: 13px; color: var(--color-muted); }.export-tabs button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.export-description { font-size: 13px; line-height: 1.6; color: var(--color-muted); padding-block: var(--space-lg); }
.full { width: 100%; }.setup-steps { display: grid; gap: var(--space-md); padding: 0 0 0 var(--space-lg); margin-block: var(--space-lg); font-size: 13px; color: var(--color-muted); }.setup-steps li { padding-left: var(--space-2xs); }.setup-steps li::marker { color: var(--color-accent); }.setup-steps strong { color: var(--color-ink); font-weight: 600; }
.source-field { display: flex; gap: var(--space-xs); align-items: center; }.source-field input { min-width: 0; }.source-note { display: flex; align-items: flex-start; gap: var(--space-xs); color: var(--color-muted); font-size: 12px; line-height: 1.6; margin-top: var(--space-md); }.source-note .icon { width: 16px; height: 16px; margin-top: var(--space-2xs); color: var(--color-accent); }.export-status { min-height: 1.5em; font-size: 12px; color: var(--color-accent); }
.large-steps { gap: var(--space-lg); }.large-steps strong, .large-steps span { display: block; }.large-steps strong { margin-bottom: var(--space-2xs); }.guide-tip { font-size: 12px; color: var(--color-muted); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); margin-bottom: var(--space-lg); }.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
.noscript-note { padding: var(--space-lg); background: var(--color-paper-3); color: var(--color-ink); text-align: center; }
@media (min-width: 1600px) { :root { --gutter: 48px; } }
@media (max-width: 1100px) { :root { --gutter: 24px; }.workbench { grid-template-columns: 300px minmax(0, 1fr); }.editor-section { padding: var(--space-md); }.preview-region { padding: var(--space-md); }.header-note { display: none; }nav { margin-left: auto; }.live-badge { display: none; }.preview-bottom { align-items: flex-start; flex-direction: column; }.obs-callout { flex-wrap: wrap; }.obs-callout .text-button { margin-left: 36px; }.brand-note img { display: none; } }
@media (max-width: 760px) { :root { --gutter: 16px; }.header-inner { min-height: 70px; gap: var(--space-md); }.brand { font-size: 14px; gap: var(--space-sm); }.brand img { width: 38px; height: 38px; }.brand-divider, nav a, .nav-link .icon { display: none; }nav { gap: 0; }.nav-link { font-size: 12px; }.page-intro { padding-block: var(--space-lg); align-items: flex-start; flex-direction: column; gap: var(--space-md); }h1 { font-size: 30px; }.page-intro p { font-size: 15px; }.page-intro .button { width: 100%; min-height: 48px; }.workbench { display: flex; flex-direction: column; }.preview-region { order: -1; border-bottom: 1px solid var(--color-rule); }.editor { border: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }.editor-section { padding: var(--space-lg); }.brand-note, .obs-callout, .preview-footnote, .preview-ratio { display: none; }.preview-bottom { padding-bottom: 0; flex-direction: row; }.preview-toolbar h2 { font-size: 13px; }.preview-tools select { max-width: 135px; }.preview-placeholder { top: 25%; gap: var(--space-xs); font-size: 12px; }.preview-placeholder .preview-monitor { width: 24px; height: 24px; }.preview-placeholder small { font-size: 10px; }.background-switch { gap: 0; }.background-switch button { min-height: 40px; font-size: 11px; }.palette-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }.palette { min-height: 44px; justify-content: center; gap: var(--space-xs); padding: 0 var(--space-2xs); font-size: 11px; }.palette .icon { display: none; }.colour-fields .field label { font-size: 13px; }.colour-input input[type="text"], input[type="text"], input:not([type]), select { font-size: 16px; min-height: 44px; }.colour-input input[type="color"] { top: 11px; }.field label:not(.upload-zone), .field-label { font-size: 14px; }.field-help { font-size: 12px; }.upload-zone { min-height: 88px; }.upload-zone strong { font-size: 14px; }.upload-caption { font-size: 11px; }.layout-picture { height: 64px; }.layout-option { font-size: 12px; min-height: 90px; }.adjustments summary { min-height: 44px; font-size: 13px; }.icon-button { min-width: 44px; min-height: 44px; }.preview-tools .icon-button { min-width: 32px; min-height: 32px; }.preview-toolbar { gap: var(--space-xs); }.editor-bottom { padding: var(--space-sm) var(--space-lg); }footer { gap: var(--space-xs); flex-wrap: wrap; }footer > span:nth-child(2) { display: none; }footer .text-button { min-height: 44px; }.dialog-actions { flex-direction: column-reverse; }.export-tabs { gap: var(--space-md); }.export-tabs button { font-size: 12px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; } }

.preview-title { display: flex; align-items: center; gap: var(--space-sm); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
html { scrollbar-color: var(--color-rule-2) var(--color-paper); }
input { caret-color: var(--color-accent); }

.section-heading { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.identity-extras { margin-block: var(--space-md); font-size: 12px; color: var(--color-muted); }
.identity-extras summary { min-height: 32px; display: flex; align-items: center; justify-content: space-between; }
.identity-extras summary::after { content: "+"; font-size: 16px; }
.identity-extras[open] summary::after { content: "−"; }
.identity-extras[open] .field:first-of-type { margin-top: var(--space-sm); }
#link-panel { padding-top: var(--space-lg); }
#link-panel #copy-url { margin-top: var(--space-md); }
@media (max-width: 760px) { .identity-extras summary { min-height: 44px; } }