:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --color-text: #ececec;
  --color-bg: #17181b;
  --color-panel-bg: #202226;
  --color-panel-border: #33353a;
  --color-panel-shadow: rgba(0,0,0,.4);
  --color-input-border: #3a3d42;
  --color-input-bg: #26282c;
  --color-error: #ff6b6b;
  --color-button-bg: #ececec;
  --color-button-text: #151515;
  --color-link: #ececec;
  --color-event-border: #2c2e33;
  --color-dot-default: #5a5d63;
  --color-dot-running: #ececec;
  --color-dot-done: #3ecb8a;
  --color-dot-warning: #ffb445;
  --color-dot-error: #ff6b6b;
  --color-connection-text: #e0a679;
  --color-connection-bg: #3a2a1e;
  --color-connection-border: #4a3626;
  --color-artifact-bg: #1c1e22;
  --color-artifact-border: #2c2e33;
  --color-focus-outline: #ececec;
  --color-hero-name: #8ab4ff;
  color: var(--color-text);
  background: var(--color-bg);
}
html[data-theme="light"] {
  --color-text: #151515;
  --color-bg: #f4f1ea;
  --color-panel-bg: #fff;
  --color-panel-border: #ddd8cd;
  --color-panel-shadow: rgba(0,0,0,.05);
  --color-input-border: #d3cec4;
  --color-input-bg: #fcfbf8;
  --color-error: #c33;
  --color-button-bg: #151515;
  --color-button-text: #fff;
  --color-link: #151515;
  --color-event-border: #eeeae2;
  --color-dot-default: #aaa;
  --color-dot-running: #222;
  --color-dot-done: #2a7;
  --color-dot-warning: #d90;
  --color-dot-error: #c33;
  --color-connection-text: #a66;
  --color-connection-bg: #fdf3ea;
  --color-connection-border: #eddcc8;
  --color-artifact-bg: #faf9f5;
  --color-artifact-border: #eeeae2;
  --color-focus-outline: #151515;
  --color-hero-name: #a6410f;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0; }
.hero { padding: 40px 0 28px; }
.eyebrow { font-size: 12px; letter-spacing: .18em; font-weight: 800; opacity: .55; }
h1 { font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -.055em; margin: 14px 0 18px; max-width: 800px; }
.hero p { font-size: 20px; opacity: .65; }
.panel { background: var(--color-panel-bg); border: 1px solid var(--color-panel-border); border-radius: 18px; padding: 24px; margin: 22px 0; box-shadow: 0 16px 50px var(--color-panel-shadow); }
label { display: block; font-size: 13px; font-weight: 750; margin-bottom: 8px; }
textarea, select, input[type="password"] { width: 100%; font: inherit; color: inherit; border: 1px solid var(--color-input-border); border-radius: 12px; padding: 13px; background: var(--color-input-bg); }
.error { color: var(--color-error); font-size: 14px; margin-top: 10px; }
textarea { resize: vertical; font-size: 18px; line-height: 1.45; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
button { margin-top: 18px; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-weight: 800; background: var(--color-button-bg); color: var(--color-button-text); cursor: pointer; }
.hidden { display: none; }
.theme-toggle { position: fixed; top: 18px; right: 18px; margin-top: 0; width: 40px; height: 40px; padding: 0; border-radius: 100%; font-size: 16px; line-height: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.theme-toggle::before { content: "☀"; }
html[data-theme="light"] .theme-toggle::before { content: "☾"; }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.progress-head h2 { margin-top: 0; }
#project-id { font-family: ui-monospace, monospace; opacity: .45; }
#download-link { font-size: 13px; font-weight: 750; color: var(--color-link); text-decoration: none; border-bottom: 1px solid currentColor; }
#download-link:hover { opacity: .7; }
.event { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 13px 0; border-top: 1px solid var(--color-event-border); }
.dot { width: 9px; height: 9px; border-radius: 100%; background: var(--color-dot-default); margin-top: 6px; }
.event.running .dot { background: var(--color-dot-running); }
.event.done .dot { background: var(--color-dot-done); }
.event.warning .dot, .event.waiting .dot { background: var(--color-dot-warning); }
.event.error .dot { background: var(--color-dot-error); }
.dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }
.meta { display: flex; gap: 10px; align-items: baseline; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.meta span { opacity: .5; }
.meta .elapsed { font-family: ui-monospace, monospace; text-transform: none; letter-spacing: 0; opacity: .4; }
.connection-status { font-size: 13px; font-weight: 700; color: var(--color-connection-text); background: var(--color-connection-bg); border: 1px solid var(--color-connection-border); border-radius: 10px; padding: 10px 14px; margin-top: 14px; }
#artifact-content { display: block; width: 100%; white-space: pre; font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.5; color: inherit; background: var(--color-artifact-bg); border: 1px solid var(--color-artifact-border); border-radius: 12px; padding: 16px; height: 420px; resize: vertical; margin: 0; }
#artifact-content:focus { outline: 2px solid var(--color-focus-outline); outline-offset: -1px; }
.hero-name { color: var(--color-hero-name); font-style: italic; }
#apply-panel p { margin: 0; }
.message { margin-top: 4px; white-space: pre-wrap; line-height: 1.45; }
.principle { text-align: center; padding: 32px 0 0; font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.principle i { padding: 0 8px; font-weight: 400; opacity: .45; }
.principle strong { display: block; margin-top: 8px; letter-spacing: 0; font-size: 16px; }
@media (max-width: 650px) { .grid { grid-template-columns: 1fr; } main { padding-top: 24px; } }