:root { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; color: #182a25; --u: 1px; --radius: 24; --l-thin: .10; --l-dense: .35; }
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
button, select, textarea, input { font: inherit; color: inherit; touch-action: manipulation; }
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
button { border: 0; }
.stage { min-height: 100svh; position: relative; isolation: isolate; background: #d6d7bf; }
.stage[data-scene-dark="true"] { color: #eaf0eb; background: #102429; }
#background, #refraction { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
#background { z-index: -2; }
#refraction { z-index: -1; }
.shell { max-width: 1120px; margin: auto; padding: 36px 34px 28px; }
.masthead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.wordmark { display: flex; gap: 12px; align-items: center; }
.mark { display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; height: 42px; width: 42px; font-size: 30px; font-weight: 500; letter-spacing: -3px; padding-right: 4px; line-height: 1; }
.wordmark strong { display: block; font-size: 16px; letter-spacing: -.3px; font-weight: 650; }
.wordmark div > span { display: block; font-size: 11px; margin-top: 2px; }
.local-marker { display: flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .03em; }
.local-marker i { height: 6px; width: 6px; background: currentColor; border-radius: 50%; }
.glass { --ink: rgb(24 30 29); color: var(--ink); corner-shape: round; transition: none; }
.glass[data-kind="dark"] { --ink: rgb(245 245 247); }
.controls { padding: 20px 24px 12px; margin-bottom: 28px; --radius: 20; }
.settings { display: flex; gap: 26px; align-items: flex-start; }
fieldset { padding: 0; margin: 0; border: 0; flex: 1; min-width: 0; }
legend, .mode-control, .refraction-control { font-size: 11px; font-weight: 600; }
legend { margin-bottom: 8px; }
.backgrounds { display: flex; flex-wrap: wrap; gap: 5px; }
.background-button { min-height: 44px; min-width: 44px; background: transparent; color: inherit; border: 1px solid transparent; padding: 7px 10px; border-radius: 10px; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.swatch { width: 16px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px #0002; }
.background-button[aria-pressed="true"] { border-color: currentColor; background: rgb(128 128 128 / .10); }
.mode-control { display: flex; flex-direction: column; gap: 8px; width: 190px; }
select { border: 1px solid currentColor; border-radius: 9px; background: transparent; padding: 0 10px; min-height: 44px; font-size: 12px; width: 100%; }
option { color: #18201d; background: #f6f7f2; }
.refraction-control { display: flex; flex-direction: column; gap: 8px; min-width: 111px; }
.switch { min-height: 44px; display: flex; align-items: center; gap: 9px; position: relative; cursor: pointer; font-size: 12px; font-weight: 500; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.track { display: block; width: 34px; height: 21px; border-radius: 20px; background: rgb(128 128 128 / .4); padding: 3px; }
.track::after { content: ''; display: block; height: 15px; width: 15px; border-radius: 50%; background: currentColor; }
.switch input:checked + .track::after { transform: translateX(13px); }
.switch input:focus-visible + .track { outline: 2px solid currentColor; outline-offset: 4px; }
.surface-meta { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(128 128 128 / .26); margin-top: 13px; padding-top: 10px; font-size: 10px; font-variant-numeric: tabular-nums; }
.measurement { text-align: right; font-variant-numeric: tabular-nums; }
.workspace { display: grid; grid-template-columns: minmax(0, 704px) minmax(180px, 1fr); align-items: center; gap: 52px; }
.hud { overflow: hidden; }
.hud-heading { padding: 27px 28px 21px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.eyebrow { font-size: 9px; font-weight: 650; letter-spacing: .12em; }
h1 { font-size: 25px; font-weight: 560; letter-spacing: -.75px; line-height: 1.2; margin: 8px 0 0; display: flex; align-items: center; gap: 12px; text-wrap: balance; }
.count { font-size: 12px; letter-spacing: 0; padding: 3px 6px; border: 1px solid rgb(128 128 128 / .4); border-radius: 5px; font-variant-numeric: tabular-nums; }
.fixture { font-size: 10px; border: 1px solid rgb(128 128 128 / .4); border-radius: 6px; padding: 6px 8px; white-space: nowrap; }
.summary { display: flex; gap: 18px; align-items: center; font-size: 11px; border-block: 1px solid rgb(128 128 128 / .25); padding: 12px 28px; }
.summary > span { display: flex; gap: 5px; align-items: center; }
.summary strong { font-weight: 650; }
.summary .summary-note { margin-left: auto; font-size: 10px; }
.status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.busy { background: #167253; }
.blocked { background: #a05e16; }
.idle { background: #66736a; }
.offline { background: #808580; }
[data-kind="dark"] .busy { background: #8ddcaa; }
[data-kind="dark"] .blocked { background: #f3c778; }
.agents { list-style: none; margin: 0; padding: 0 28px; }
.agent { display: grid; grid-template-columns: 36px minmax(0, 1fr) 108px; gap: 12px; padding: 16px 0; align-items: center; border-bottom: 1px solid rgb(128 128 128 / .22); }
.agent:last-child { border-bottom: none; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgb(128 128 128 / .45); border-radius: 10px; font-size: 10px; font-weight: 650; background: rgb(128 128 128 / .08); }
.agent-name { display: flex; gap: 9px; align-items: baseline; margin-bottom: 4px; }
.agent-name strong { font-weight: 650; font-size: 12px; }
.agent-name span { font-size: 10px; }
.agent p { margin: 0; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-state { text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.agent-state > span { display: inline-flex; gap: 5px; align-items: center; }
.progress { width: 70px; height: 2px; margin: 8px 0 0 auto; border-radius: 2px; background: rgb(128 128 128 / .25); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--progress); background: currentColor; }
.composer { padding: 20px 28px; border-top: 1px solid rgb(128 128 128 / .25); }
.composer-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 11px; }
.composer-heading label { font-weight: 650; }
.composer-heading > span { font-size: 10px; }
textarea { display: block; width: 100%; min-height: 76px; resize: vertical; border: 1px solid rgb(128 128 128 / .55); border-radius: 10px; padding: 12px; background: rgb(128 128 128 / .07); font-size: 16px; line-height: 1.5; }
textarea::placeholder { color: inherit; opacity: 1; font-size: 13px; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.composer-actions > span { font-size: 10px; line-height: 1.5; }
.preview-button { min-height: 44px; padding: 0 15px; background: #243b31; color: #fff; border-radius: 9px; white-space: nowrap; display: flex; gap: 18px; align-items: center; font-size: 12px; font-weight: 550; }
[data-kind="dark"] .preview-button { background: #e2eddf; color: #17271e; }
.preview-button { transition: transform 150ms ease-out; }
.preview-button:active { transform: scale(.96); }
.local-preview { margin-top: 16px; border-top: 1px solid currentColor; padding-top: 12px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.local-preview p { margin: 0 0 8px; }
.local-preview ol { padding-left: 20px; margin: 0; }
.hud-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid rgb(128 128 128 / .25); padding: 13px 28px; font-size: 9px; letter-spacing: .03em; }
.annotation h2 { font-size: 30px; line-height: 1.15; font-weight: 460; letter-spacing: -.9px; margin: 15px 0; text-wrap: balance; }
.annotation p { font-size: 12px; line-height: 1.75; margin: 0; max-width: 23ch; }
.annotation-line { width: 28px; height: 1px; background: currentColor; margin: 27px 0; }
dl { margin: 0; }
dl > div { margin-bottom: 17px; }
dt { font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
dd { margin: 0; font-size: 11px; line-height: 1.6; }
.annotation .estimate-note { font-size: 10px; line-height: 1.7; margin-top: 24px; max-width: 26ch; }
.page-footer { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; margin-top: 34px; line-height: 1.6; }
#scene-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage[data-scene="test-pattern"] :is(.masthead, .annotation, .page-footer) { background: #fff6de; color: #182a25; padding: 12px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .background-button:hover { background: rgb(128 128 128 / .16); }
  .preview-button:hover { background: #314e3f; }
  [data-kind="dark"] .preview-button:hover { background: #fff; }
}
@media (max-width: 1040px) {
  .background-button { flex-direction: column; gap: 5px; padding: 6px 7px; font-size: 10px; }
  .swatch { width: 29px; height: 13px; }
  .workspace { gap: 32px; grid-template-columns: minmax(0, 1fr) 170px; }
  .settings { gap: 16px; }
}
@media (max-width: 760px) {
  .shell { max-width: 580px; padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .masthead { margin-bottom: 24px; }
  .local-marker { font-size: 0; gap: 0; }
  .local-marker i { height: 7px; width: 7px; }
  .controls { padding: 17px 17px 12px; margin-bottom: 20px; }
  .settings { display: grid; grid-template-columns: minmax(0, 1fr) 105px; gap: 16px; }
  fieldset { grid-column: 1 / -1; }
  .backgrounds { justify-content: space-between; gap: 4px; }
  .background-button { flex-direction: column; gap: 5px; padding: 5px; font-size: 10px; flex: 1; justify-content: center; }
  .swatch { width: 13px; height: 22px; flex-shrink: 0; }
  .mode-control { width: auto; }
  select { font-size: 12px; padding-inline: 6px; }
  .refraction-control { min-width: 0; }
  .surface-meta { align-items: flex-start; line-height: 1.5; font-size: 9px; }
  .workspace { display: block; }
  .hud-heading { padding: 23px 20px 18px; align-items: flex-start; }
  h1 { font-size: 23px; }
  .fixture { font-size: 9px; margin-top: 2px; padding: 5px; }
  .summary { padding: 12px 20px; gap: 16px; }
  .summary .summary-note { display: none; }
  .agents { padding-inline: 20px; }
  .agent { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-block: 15px; }
  .avatar { height: 29px; width: 29px; border-radius: 8px; }
  .agent-state { grid-column: 2; text-align: left; margin-top: -3px; }
  .progress { display: none; }
  .agent-name span { font-size: 9px; }
  .composer { padding: 18px 20px; }
  .composer-actions { align-items: flex-start; }
  .composer-actions > span { max-width: 120px; padding-top: 5px; }
  .preview-button { padding-inline: 12px; gap: 12px; }
  .hud-footer { padding: 13px 20px; font-size: 8px; }
  .annotation { margin-top: 28px; }
  .annotation h2, .annotation > p:not(.estimate-note), .annotation-line, dl { display: none; }
  .annotation .estimate-note { max-width: none; font-size: 10px; margin-top: 8px; }
  .page-footer { margin-top: 23px; font-size: 9px; }
}
@media (max-width: 360px) {
  .fixture { display: none; }
  .background-button { flex-direction: column; }
  .composer-heading { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--m-tint); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .glass { background: Canvas; color: CanvasText; --ink: CanvasText; --m-tint: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #background, #refraction { visibility: hidden; }
  .stage, .stage[data-scene-dark="true"] { background: Canvas; color: CanvasText; }
  .status-dot { background: CanvasText; }
}