@charset "UTF-8";
:root { color-scheme: light; --bg:#f3f3ed; --panel:#fffefa; --ink:#1c302a; --muted:#52655e; --line:#d7dfd5; --accent:#176b53; --accent-ink:#fff; --wash:#e2eddf; --shadow:0 16px 50px #243d2810; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#101919; --panel:#172323; --ink:#edf3e9; --muted:#a7b9ae; --line:#344543; --accent:#bfe5a7; --accent-ink:#122319; --wash:#233b30; --shadow:0 16px 50px #0002; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { cursor:default; opacity:.42; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
[hidden] { display:none !important; }
.skip { position:fixed; left:16px; top:-80px; padding:12px 18px; background:var(--panel); z-index:20; }
.skip:focus { top:12px; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px clamp(20px,4vw,68px); border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:13px; font-size:1.2rem; font-weight:850; letter-spacing:-.05em; }
.brand-symbol { display:block; width:23px; height:23px; background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px); transform:skewY(-18deg); }
.app-nav { display:flex; align-items:center; gap:20px; font-size:.75rem; font-weight:650; }
.app-nav a { border-bottom:1px solid var(--line); padding-bottom:3px; }
.icon-button { min-width:40px; min-height:40px; padding:8px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); }
.app-shell { width:min(1480px,100%); margin:auto; padding:42px clamp(20px,4vw,68px) 25px; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:35px; }
.eyebrow { margin:0 0 14px; color:var(--muted); font-family:ui-monospace,monospace; font-size:.66rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.6rem,4.6vw,4.6rem); font-weight:570; letter-spacing:-.065em; line-height:1.01; }
h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.intro-copy { max-width:33ch; margin:0; color:var(--muted); line-height:1.7; font-size:.87rem; }
.badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:30px; color:var(--muted); font-size:.62rem; letter-spacing:.05em; white-space:nowrap; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:18px; margin-bottom:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.field { display:grid; gap:7px; min-width:145px; }
.field label,.field-label { font-size:.65rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.field input,.field select { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font-size:.8rem; }
.field.search { flex:1; min-width:160px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:42px; padding:10px 16px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:.75rem; font-weight:700; transition:background .2s,transform .2s; }
.button:hover:not(:disabled) { background:var(--wash); transform:translateY(-1px); }
.button.primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.button.primary:hover { filter:brightness(1.08); }
.text-button { padding:7px 0; border:0; background:none; color:var(--accent); font-size:.76rem; text-decoration:underline; text-underline-offset:4px; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 22px; }
.kpi { min-width:0; padding:22px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.kpi:first-child { background:var(--wash); }
.kpi dt { color:var(--muted); font-size:.7rem; }
.kpi dd { margin:12px 0 8px; font-size:clamp(1.6rem,2.7vw,2.65rem); font-weight:600; letter-spacing:-.055em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi small { color:var(--muted); font-size:.64rem; }
.charts { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:18px; margin-bottom:22px; }
.panel { min-width:0; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
h2 { margin:0; font-size:1rem; font-weight:650; letter-spacing:-.025em; }
.subline { display:block; margin:6px 0 0; color:var(--muted); font-size:.68rem; line-height:1.6; }
.chart { display:block; width:100%; height:auto; min-height:190px; overflow:visible; }
.chart .chart-grid { stroke:var(--line); stroke-width:1; }
.chart text { fill:var(--muted); font:11px ui-monospace,monospace; }
.chart .bar { fill:var(--accent); opacity:.55; transition:opacity .2s; }
.chart g[role="button"] { cursor:pointer; outline:none; }
.chart g[role="button"]:is(:hover,:focus) .bar,.chart g[aria-pressed="true"] .bar { opacity:1; stroke:var(--ink); stroke-width:1.5; }
.chart-reading { min-height:20px; margin:8px 0 0; font-size:.7rem; color:var(--muted); }
.channel-list { display:grid; gap:19px; margin:26px 0 0; padding:0; list-style:none; }
.channel-button { width:100%; border:0; background:none; padding:0; text-align:left; color:var(--ink); }
.channel-button .channel-label { display:flex; justify-content:space-between; gap:12px; font-size:.76rem; }
.channel-button .channel-track { display:block; height:7px; margin-top:9px; background:var(--wash); border-radius:10px; overflow:hidden; }
.channel-button .channel-fill { display:block; height:100%; background:var(--accent); border-radius:10px; transition:width .3s; }
.channel-button[aria-pressed="true"] .channel-label { font-weight:800; }
.table-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.table-tools select { padding:8px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; font-size:.7rem; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.77rem; font-variant-numeric:tabular-nums; }
th,td { padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
td.num,th.num { text-align:right; }
tbody tr:hover { background:var(--wash); }
.empty { padding:35px; text-align:center; color:var(--muted); }
.pager { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; }
.pager p { color:var(--muted); font-size:.7rem; }
.pager .button { min-height:34px; padding:6px 12px; }
.live-status { min-height:20px; margin:12px 0; color:var(--muted); font-size:.75rem; }
.share-box { width:100%; padding:12px; margin-top:12px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:7px; }
.app-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:28px; padding-top:20px; color:var(--muted); font-size:.65rem; line-height:1.7; }
.app-footer a { text-decoration:underline; text-underline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* FORM has its own palette while sharing spacing, controls and focus rules. */
:root[data-app="motion"] { --accent:#943f61; --accent-ink:#fff; --wash:#f1dfe7; }
:root[data-app="motion"][data-theme="dark"] { --bg:#14131c; --panel:#201e2b; --ink:#f6ede5; --muted:#b6afc4; --line:#3c374b; --accent:#eca7bc; --accent-ink:#291728; --wash:#3d2939; }
.motion-logo { border:2px solid var(--accent); border-radius:50%; background:none; transform:none; position:relative; }
.motion-logo::after { content:''; position:absolute; width:100%; height:100%; border:2px solid var(--accent); border-radius:50%; left:7px; top:-2px; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
.stage { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#1b1827; aspect-ratio:4/3; }
.stage canvas { display:block; width:100%; height:100%; }
.stage-badge { position:absolute; top:18px; left:18px; color:#f5edeb; background:#171221bd; border:1px solid #fff3; }
.timeline { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-top:15px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
input[type="range"] { width:100%; accent-color:var(--accent); cursor:pointer; }
.timeline output { min-width:4ch; font-family:ui-monospace,monospace; font-size:.75rem; }
.controls { display:grid; gap:22px; }
.controls .field { min-width:0; }
.range-heading { display:flex; justify-content:space-between; gap:12px; font-size:.7rem; }
.range-heading output { color:var(--ink); font-variant-numeric:tabular-nums; }
.control-group { display:grid; gap:8px; }
.swatches { display:flex; gap:10px; padding:0; margin:0; border:0; }
.swatches legend { margin-bottom:12px; }
.swatch { width:36px; height:36px; border:3px solid transparent; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px var(--line); }
.swatch[aria-pressed="true"] { border-color:var(--panel); box-shadow:0 0 0 2px var(--ink); }
.check { display:flex; align-items:center; gap:9px; font-size:.77rem; }
.check input { accent-color:var(--accent); width:17px; height:17px; }
.exports { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.code-panel { margin-top:24px; }
.code-panel pre { margin:0; color:var(--muted); overflow:auto; font: .72rem/1.8 ui-monospace,monospace; }
@media(max-width:1000px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .charts { grid-template-columns:1fr; } .channel-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .lab-layout { grid-template-columns:1fr; } .controls { grid-template-columns:repeat(2,minmax(0,1fr)); } .stage { aspect-ratio:16/10; } }
@media(max-width:600px) { .app-shell { padding-top:28px; } .intro { align-items:flex-start; flex-direction:column; gap:20px; } .intro-copy { max-width:44ch; } .app-nav { gap:12px; } .app-nav .badge { display:none; } .wordmark { font-size:1rem; } .toolbar .field { flex:1 1 100%; } .kpi { padding:16px; } .panel { padding:18px; } .panel-head { flex-wrap:wrap; } .chart { min-height:140px; } .table-tools { width:100%; justify-content:space-between; } .controls { gap:22px 16px; } .stage { aspect-ratio:1; } .timeline { gap:10px; padding:12px; } .timeline .button { padding:8px 12px; } .app-footer { flex-direction:column; gap:5px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }