:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f6f7f4;color:#151712;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(180deg,rgba(37,99,235,.06) 1px,transparent 1px),#f6f7f4;background-size:44px 44px}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}.app-shell{min-height:100vh;padding:24px}.workspace{display:grid;grid-template-columns:300px minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;max-width:1520px;margin:0 auto}.side-panel,.form-panel,.keys-panel,.output-card{border:1px solid #dfe3da;background:#ffffffeb;box-shadow:0 18px 48px #15171214}.side-panel{position:sticky;top:24px;align-self:start;min-height:calc(100vh - 48px);padding:22px;display:flex;flex-direction:column;gap:28px}.brand-block{display:grid;gap:16px}.brand-mark{display:grid;place-items:center;width:52px;height:52px;background:#151712;color:#fff;font-weight:800;font-size:22px}h1,h2,p{margin:0}h1{font-size:30px;line-height:1;letter-spacing:0}h2{font-size:18px;line-height:1.2;letter-spacing:0}p{color:#5d6355;line-height:1.55}.progress-list{display:grid;gap:10px}.progress-row{display:flex;align-items:center;gap:10px;color:#6b7164;font-size:14px}.status-dot{width:10px;height:10px;border:1px solid #a9b0a0;background:#fff}.progress-row.complete{color:#151712}.progress-row.complete .status-dot{background:#20a464;border-color:#20a464}.security-note{margin-top:auto;padding:16px;display:grid;gap:8px;background:#eef6ff;border:1px solid #c8ddff;color:#24324c}.security-note strong{font-size:13px;text-transform:uppercase;letter-spacing:0}.security-note span{font-size:14px;line-height:1.45}.view-switcher{display:grid;gap:8px}.view-switcher button{min-height:42px;border:1px solid #d3d9cf;background:#fff;color:#454b42;padding:0 12px;text-align:left;font-size:13px;font-weight:800}.view-switcher button.active{border-color:#151712;background:#151712;color:#fff}.form-panel,.keys-panel{padding:22px}.panel-heading,.output-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.panel-heading p{margin-top:6px}.panel-heading.compact{margin-bottom:18px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px;margin-bottom:14px}.field.full-span{grid-column:1 / -1}.field span{color:#42483d;font-size:13px;font-weight:700}input,textarea,select{width:100%;border:1px solid #cfd5c8;background:#fbfcf8;color:#151712;border-radius:0;padding:12px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}textarea{resize:vertical;min-height:132px;line-height:1.5}input:focus,textarea:focus,select:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px #2563eb29}.secondary-button,.icon-button,.output-heading button{min-height:38px;border:1px solid #151712;background:#151712;color:#fff;padding:0 14px;font-size:13px;font-weight:800;white-space:nowrap}.secondary-button{background:#fff;color:#151712}.secondary-button.danger{width:100%;margin-top:2px;border-color:#b93131;color:#b93131}.icon-button{min-width:68px}.keys-panel{align-self:start}.output-panel{grid-column:2 / 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.output-card{min-width:0;padding:18px}.output-card.wide{grid-column:1 / -1}.output-card pre{min-height:180px;max-height:380px;overflow:auto;margin:0;padding:16px;background:#151712;color:#eff7e9;line-height:1.5;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;white-space:pre-wrap}.workspace.observability-mode{grid-template-columns:300px minmax(0,1fr)}.observability-panel{min-width:0;display:grid;gap:16px}.dashboard-hero,.dashboard-card,.metric-card{border:1px solid #dfe3da;background:#fffffff0;box-shadow:0 18px 48px #15171214}.dashboard-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px}.dashboard-hero h2{font-size:34px;line-height:1}.dashboard-hero p{max-width:760px;margin-top:10px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.hero-actions button{min-height:40px;border:1px solid #151712;background:#151712;color:#fff;padding:0 14px;font-size:13px;font-weight:800}.telemetry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric-card{min-height:132px;padding:18px;display:grid;align-content:space-between;gap:12px}.metric-card span,.metric-card small{color:#596051;font-size:13px;font-weight:700}.metric-card strong{color:#151712;font-size:38px;line-height:1}.observability-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px}.observability-layout.lower{grid-template-columns:minmax(320px,.7fr) minmax(0,1fr)}.dashboard-card{min-width:0;padding:20px}.card-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}.card-heading h3{margin:0;font-size:18px;line-height:1.2}.card-heading p{margin-top:6px;font-size:14px}.status-chip,.signal-status{align-self:flex-start;border:1px solid #c8ddff;background:#eef6ff;color:#24324c;padding:7px 9px;font-size:12px;font-weight:800;white-space:nowrap}.trace-list,.signal-list,.log-list{display:grid;gap:12px}.trace-row{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:14px}.trace-meta{display:grid;gap:4px}.trace-meta strong,.signal-row strong,.log-row strong{font-size:13px;color:#151712}.trace-meta span,.signal-row small,.log-row small{color:#68705f;font-size:12px}.trace-bar-wrap{position:relative;height:30px;background:linear-gradient(90deg,rgba(21,23,18,.08) 1px,transparent 1px),#f5f7f1;background-size:12.5% 100%;border:1px solid #dfe3da;overflow:hidden}.trace-bar{position:absolute;left:var(--start);top:6px;width:var(--size);height:16px;background:#2563eb}.trace-bar.warn{background:#b7791f}.signal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px;border:1px solid #e2e6dc;background:#fbfcf8}.signal-row p{margin-top:5px;font-size:13px}.signal-status{border-color:#bde8d1;background:#ecfff4;color:#15613d}.signal-status.partial{border-color:#f2dc9b;background:#fff8dc;color:#805b0f}.signal-status.missing{border-color:#f0b8b8;background:#fff0f0;color:#8a2424}.bar-chart{display:grid;gap:14px}.bar-row{display:grid;grid-template-columns:86px minmax(0,1fr) 48px;align-items:center;gap:12px;font-size:13px;font-weight:800}.bar-track{position:relative;height:18px;border:1px solid #dfe3da;background:#f5f7f1}.bar-fill,.bar-target{position:absolute;top:0;bottom:0}.bar-fill{left:0;width:var(--bar);background:#20a464}.bar-target{left:var(--target);width:2px;background:#151712}.log-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:12px;border:1px solid #e2e6dc;background:#fbfcf8}.log-row>span{display:grid;place-items:center;align-self:start;min-height:26px;background:#eef6ff;color:#24324c;font-size:11px;font-weight:900;text-transform:uppercase}.log-row.warn>span{background:#fff8dc;color:#805b0f}.log-row.error>span{background:#fff0f0;color:#8a2424}.log-row p{margin-top:4px;font-size:13px}.setup-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px}.setup-fields{align-self:start;padding:14px;border:1px solid #e2e6dc;background:#fbfcf8}.snippet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.output-card.embedded{padding:0;border:0;box-shadow:none;background:transparent}.output-card.embedded .output-heading{margin-bottom:10px}.output-card.embedded pre{min-height:360px;max-height:460px}@media(max-width:1180px){.workspace{grid-template-columns:260px minmax(0,1fr)}.keys-panel{grid-column:2}.output-panel{grid-column:1 / -1}.workspace.observability-mode,.observability-layout,.observability-layout.lower,.setup-grid,.snippet-grid{grid-template-columns:1fr}.telemetry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.app-shell{padding:12px}.workspace,.field-grid,.output-panel{grid-template-columns:1fr}.side-panel,.keys-panel,.output-panel{grid-column:auto}.side-panel{position:static;min-height:auto}.panel-heading,.output-heading{align-items:stretch;flex-direction:column}.secondary-button,.icon-button,.output-heading button{width:100%}.dashboard-hero,.card-heading{flex-direction:column}.dashboard-hero h2{font-size:28px}.hero-actions,.hero-actions button,.telemetry-grid{width:100%}.telemetry-grid,.trace-row,.signal-row,.bar-row,.log-row{grid-template-columns:1fr}.metric-card strong{font-size:32px}}