:root{--color-bg:#f6f7f9;--color-surface:#fff;--color-ink:#11141a;--color-ink-muted:#5b6373;--color-line:#e3e6eb;--color-accent:#2f6bff;--color-accent-ink:#fff;--color-warn:#b4541a;--color-ok:#2a7a3b;--color-scrim:#11141aa6;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-6:24px;--radius-sm:8px;--radius-md:14px;--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:20px;--font:system-ui, -apple-system, "Segoe UI", sans-serif;--panel-width:360px}*{box-sizing:border-box}html,body{background:var(--color-bg);height:100%;color:var(--color-ink);font:var(--text-md)/1.4 var(--font);margin:0}body{display:flex;overflow:hidden}.stage{background:#cfd6dd;flex:1;min-width:0;position:relative}.stage__video,.stage__canvas{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.stage__video{object-fit:cover}.stage__canvas{touch-action:none;outline:none}.hud{left:var(--spacing-3);top:var(--spacing-3);right:var(--spacing-3);pointer-events:none;gap:var(--spacing-2);flex-direction:column;display:flex;position:absolute}.hud__line,.hud__task{background:var(--color-scrim);color:#fff;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-sm);font-size:var(--text-sm);width:-moz-fit-content;width:fit-content;max-width:100%}.hud__task{font-size:var(--text-md)}.hud__row{justify-content:space-between;align-items:flex-start;gap:var(--spacing-2);display:flex}.hud__btn{pointer-events:auto;font:inherit;font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-sm);background:var(--color-scrim);color:#fff;cursor:pointer;border:1px solid #ffffff80;flex-shrink:0}body.is-fullscreen .panel{display:none}body.is-fullscreen .stage{position:fixed;top:0;bottom:0;left:0;right:0}.panel{width:var(--panel-width);background:var(--color-surface);border-left:1px solid var(--color-line);flex-direction:column;max-width:100%;display:flex}.panel__toggle{display:none}.panel__body{padding:var(--spacing-4);gap:var(--spacing-6);flex-direction:column;display:flex;overflow-y:auto}.group{gap:var(--spacing-2);flex-direction:column;display:flex}.group__title{font-size:var(--text-lg);margin:0}.group__sub{font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--spacing-2) 0 0;text-transform:uppercase;letter-spacing:.04em}.group__hint{font-size:var(--text-sm);color:var(--color-ink-muted);margin:0}.minimap{aspect-ratio:1;border:1px solid var(--color-line);border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;background:#eef1e6;width:100%;height:auto}.field{gap:var(--spacing-1);font-size:var(--text-sm);flex-direction:column;display:flex}.field input[type=range]{width:100%;accent-color:var(--color-accent)}.field input[type=text]{font:inherit;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink)}.field select{font:inherit;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface)}.field--check{align-items:center;gap:var(--spacing-2);flex-direction:row}.field output{font-variant-numeric:tabular-nums}.row{gap:var(--spacing-2);flex-wrap:wrap;display:flex}.btn{font:inherit;font-size:var(--text-sm);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-sm);border:1px solid var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);cursor:pointer}.btn--quiet{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-line)}.btn[aria-pressed=true]{background:var(--color-ok);border-color:var(--color-ok)}.btn:disabled{opacity:.5;cursor:default}.btn--small{padding:var(--spacing-1) var(--spacing-2);font-size:var(--text-xs)}.list{padding-left:var(--spacing-4);font-size:var(--text-sm);gap:var(--spacing-2);flex-direction:column;margin:0;display:flex}.list small{color:var(--color-ink-muted)}.stats{gap:var(--spacing-1) var(--spacing-3);margin:var(--spacing-2) 0 0;font-size:var(--text-sm);grid-template-columns:auto 1fr;display:grid}.stats dt{color:var(--color-ink-muted)}.stats dd{font-variant-numeric:tabular-nums;margin:0}.stats dd.is-bad{color:var(--color-warn)}.stats dd.is-good{color:var(--color-ok)}@media (max-width:760px){body{flex-direction:column}.stage{flex:1}.panel{border-left:0;border-top:1px solid var(--color-line);width:100%;max-height:55vh}.panel__toggle{font:inherit;padding:var(--spacing-2);background:var(--color-surface);border:0;border-bottom:1px solid var(--color-line);text-align:left;display:block}.panel__body[hidden]{display:none}}