:root{color-scheme:dark;--bg:#0c141f;--surface:#111e2c;--surface2:#162638;--border:#354b60;--text:#e5edf5;--muted:#a8b9ca;--accent:#9ed9f5;--accent-bg:#233e52;--ok:#9ce1c6;--warning:#f4ce8b;--danger:#ffb0a9;--grid:#293e52;--shadow:0 12px 36px #0002;--control-border:#718fa9;font-size:16px}
:root[data-theme=light]{color-scheme:light;--bg:#eaf0f5;--surface:#fff;--surface2:#f2f6fa;--border:#9cabb9;--text:#142d43;--muted:#485e72;--accent:#145e84;--accent-bg:#dcecf6;--ok:#116148;--warning:#795000;--danger:#a12c26;--grid:#c4d3df;--shadow:0 10px 28px #1b3a5210;--control-border:#657b8e}
:root[data-theme=contrast]{--bg:#050a10;--surface:#080f17;--surface2:#101c27;--border:#a2bfd4;--text:#fff;--muted:#d1e3f2;--accent:#b1e4ff;--ok:#b2ffdf;--warning:#ffe0a4;--danger:#ffc2bc;--grid:#66869d}
:root[data-scale="125"]{font-size:20px}:root[data-scale="150"]{font-size:24px}:root[data-scale="200"]{font-size:32px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Yu Gothic UI","Meiryo","Hiragino Kaku Gothic ProN",system-ui,sans-serif;line-height:1.6;font-variant-numeric:tabular-nums}button,input,select,textarea{font:inherit}button,select,input,textarea{color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:6px}button{min-height:44px;padding:.5rem .85rem;cursor:pointer;line-height:1.4}button:hover{border-color:var(--accent);background:var(--accent-bg)}button:disabled{cursor:not-allowed;opacity:.6}button.primary{background:var(--accent);color:var(--bg);font-weight:700;border-color:var(--accent)}button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}button, a, input, select, textarea,summary{scroll-margin:1rem}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:var(--accent)}h1,h2,h3,p{margin:0}h1{font-size:2.2rem;letter-spacing:.04em;line-height:1.3;font-weight:650}h2{font-size:1.12rem;font-weight:650;letter-spacing:.03em}h3{font-size:1rem}small,.subtle,.footnote{color:var(--muted)}small{font-size:.85rem}.subtle{font-size:.88rem}.footnote{font-size:.83rem;line-height:1.7}code{font-family:Consolas,monospace;overflow-wrap:anywhere;color:var(--accent)}[hidden]{display:none!important}.skip{position:absolute;left:1rem;top:-6rem;z-index:20;background:var(--surface);padding:1rem}.skip:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topbar{padding:1.05rem 2.3rem;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--surface)}.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:var(--text)}.brand-mark{font-size:2.2rem;color:var(--accent);line-height:1}.brand b{font-size:1.05rem;font-weight:650}.brand-sub{font-size:.95rem;letter-spacing:.18em;margin-left:.65rem}.brand small{display:block;font-size:.68rem;letter-spacing:.2em;margin-top:.15rem}.display-options{display:flex;gap:1rem}.display-options label{display:flex;align-items:center;gap:.5rem;font-size:.82rem}.display-options select{padding:.3rem;min-height:36px}.demo-strip{display:flex;gap:1.1rem;align-items:center;padding:.52rem 2.3rem;font-size:.81rem;border-bottom:1px solid var(--border);background:var(--accent-bg);color:var(--text)}.demo-strip strong{letter-spacing:.08em;white-space:nowrap;color:var(--accent)}
main{max-width:2400px;margin:auto;padding:1.8rem 2.3rem 2.5rem}.heading-row{display:flex;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.eyebrow{font-size:.69rem;letter-spacing:.19em;color:var(--accent);font-weight:650;margin-bottom:.35rem}.subtitle{font-size:.9rem;color:var(--muted);margin-top:.45rem}.actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-width:0}.controls{display:flex;align-items:end;gap:1.15rem;padding:.85rem 1.05rem;flex-wrap:wrap}.controls label{display:grid;gap:.32rem;font-size:.78rem;color:var(--muted)}.controls select{min-width:9rem;min-height:42px;padding:.35rem .6rem;font-size:.9rem}.control-buttons{display:flex;gap:.5rem;margin-left:auto;flex-wrap:wrap}.health-strip{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;margin:1.05rem 0;color:var(--muted)}.timezone{margin-left:auto}.badge{display:inline-flex;gap:.45rem;align-items:center;font-size:.78rem;white-space:nowrap;color:var(--muted)}.badge.normal{color:var(--ok)}.badge.warning{color:var(--warning)}.badge.incident{color:var(--danger)}.badge.unknown{color:var(--muted)}.feedback:empty{display:none}.feedback{font-size:.88rem;padding:.7rem 0;color:var(--accent)}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;margin-bottom:1.1rem}.metric{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:1rem 1.05rem;position:relative;min-width:0}.metric.warning{border-top:3px solid var(--warning)}.metric.incident{border-top:3px solid var(--danger)}.metric h2{font-size:.83rem;color:var(--muted);font-weight:500}.metric-value{font-size:2.05rem;letter-spacing:-.03em;font-weight:600;line-height:1.2;margin-top:.65rem;white-space:nowrap}.metric-value.word{font-size:1.4rem;white-space:normal}.metric-value small{font-size:.76rem;margin-left:.35rem;font-weight:400;letter-spacing:0}.metric p:last-child{font-size:.7rem;color:var(--muted);margin-top:.55rem}.metric .metric-state{font-size:.68rem;color:var(--muted);position:absolute;right:.65rem;top:.3rem}.metric.warning .metric-state{color:var(--warning)}.metric.incident .metric-state{color:var(--danger)}
.primary-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(17rem,1fr);gap:1.1rem;margin-bottom:1.1rem}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}.flow-panel,.signals{padding:1.2rem}.pipeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;padding:0;margin:0 0 .9rem;gap:.5rem}.pipeline li{min-width:0;background:var(--surface2);border:1px solid var(--border);padding:.8rem .7rem;border-radius:6px}.stage-index{color:var(--accent);font-size:.67rem;letter-spacing:.15em}.pipeline h3{font-size:.78rem;margin:.4rem 0}.stage-value{font-size:1.05rem;font-weight:600}.pipeline small{font-size:.66rem;display:block;margin-top:.35rem}.pipeline li.unknown{border-style:dashed}.pipeline li.incident{border-color:var(--danger)}.pipeline li.incident .stage-value{color:var(--danger)}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.3rem}.chart{min-width:0}.chart figcaption{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:.4rem}.chart figure{margin:0}.chart svg{width:100%;height:130px;display:block;overflow:visible}.chart .grid-line{stroke:var(--grid);stroke-width:1}.chart .plot{stroke:var(--accent);stroke-width:2.5;fill:none;vector-effect:non-scaling-stroke}.chart .latency{stroke:var(--warning)}.chart .cursor-line{stroke:var(--text);stroke-width:1;stroke-dasharray:4 4}.axis-labels{display:flex;justify-content:space-between;font-size:.65rem;color:var(--muted)}.time-control{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.78rem;color:var(--muted)}.time-control input{flex:1;min-width:120px;accent-color:var(--accent);min-height:32px}.time-control output{min-width:10rem;text-align:right}.data-table{font-size:.78rem;margin-top:.5rem}.data-table summary{cursor:pointer;color:var(--accent);min-height:32px}.data-table>div{max-height:220px;overflow:auto}.count{display:grid;place-items:center;border:1px solid var(--border);min-width:2rem;min-height:2rem;border-radius:5px;font-size:.9rem}.signal-item{padding:1rem .9rem;border-radius:6px;background:var(--surface2);border-left:3px solid var(--accent);margin-bottom:.8rem}.signal-item.incident{border-left-color:var(--danger)}.signal-item.warning{border-left-color:var(--warning)}.signal-item h3{font-size:.9rem;margin:.45rem 0}.signal-item p{font-size:.81rem;color:var(--muted)}.clear-state{padding:1rem .4rem}.clear-state h3{color:var(--ok);font-size:1rem}.clear-state p{color:var(--muted);font-size:.82rem;margin-top:.6rem}.observation-note{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem}.orbit{font-size:2rem;color:var(--accent)}.observation-note h3{font-size:.88rem}.observation-note p{font-size:.8rem;margin:.55rem 0 1rem;color:var(--muted)}.observation-note button{font-size:.8rem}
.secondary-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(20rem,1fr);gap:1.1rem;margin-bottom:1.1rem}.secondary-grid>section{padding:1.15rem}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:.85rem;text-align:left}th{font-weight:500;font-size:.75rem;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border);padding:.7rem .65rem}td{padding:.8rem .65rem;border-bottom:1px solid var(--grid);vertical-align:top}tr:last-child td{border-bottom:0}td button{padding:.4rem .6rem;font-size:.84rem}.selected-row{background:var(--accent-bg)}.job-list{list-style:none;padding:0;margin:0}.job-list li{padding:.65rem 0;border-bottom:1px solid var(--grid);display:flex;gap:.7rem;align-items:flex-start}.job-list li:last-child{border:0}.job-list h3{font-size:.82rem}.job-list p{font-size:.73rem;color:var(--muted);margin-top:.2rem}.context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}.mini-panel{padding:1.1rem}.mini-panel h2{font-size:.95rem;margin-bottom:.7rem}.mini-panel p:not(.eyebrow){font-size:.85rem}.mini-panel button{margin-top:.6rem;font-size:.8rem}.inspector-heading{display:flex;justify-content:space-between;gap:1.3rem;padding:1.5rem}.inspector-heading h2{font-size:1.6rem}.inspector-heading code{font-size:.86rem}.inspector-heading p{font-size:.85rem}.tabs{display:flex;gap:.4rem;margin:1rem 0;flex-wrap:wrap}.tabs button{background:transparent;border-color:transparent;min-width:6rem}.tabs button[aria-current=page]{background:var(--accent-bg);border-color:var(--border);color:var(--accent)}.detail-content{padding:1.7rem;min-height:350px}.detail-content .pipeline{margin:1.5rem 0}.detail-content .chart svg{height:200px}.detail-content p{margin-bottom:.8rem}.detail-columns{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.key-values{display:grid;grid-template-columns:minmax(9rem,1fr) 2fr;gap:.7rem 1.5rem;font-size:.88rem}.key-values dt{color:var(--muted)}.key-values dd{margin:0;overflow-wrap:anywhere}.notice{border:1px solid var(--border);background:var(--accent-bg);border-radius:6px;padding:.85rem 1rem;font-size:.85rem;margin-top:.8rem}.notice button{margin:.5rem .5rem 0 0}.notice h3{margin-bottom:.5rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}fieldset{border:0;padding:0;margin:1.5rem 0}legend{font-weight:600;margin-bottom:.7rem}#config-form{max-width:1000px}#config-form label{display:grid;gap:.4rem;font-size:.9rem;margin-bottom:1rem}input:not([type=range]),textarea{width:100%;padding:.6rem .75rem;min-height:44px}input[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid var(--danger)}.field-error{color:var(--danger);font-size:.8rem}.field-error:empty{display:none}.review-box{margin:1.5rem 0;padding:1.2rem;background:var(--surface2);border:1px solid var(--accent);border-radius:8px}.review-box h3{margin-bottom:1rem}.review-box p{font-size:.88rem;margin:1rem 0}.review-box label{display:inline-grid;gap:.3rem;margin-right:1rem}.review-box select{padding:.4rem;min-height:44px}.event-card{padding:1rem 0;border-bottom:1px solid var(--border)}.event-card summary{cursor:pointer;min-height:44px;color:var(--accent);overflow-wrap:anywhere}.event-card .key-values{margin:1rem 0}.audit-card{padding:1rem;border:1px solid var(--border);border-radius:6px;margin:1rem 0}.audit-card h3{margin-bottom:.5rem}.audit-card p{font-size:.85rem;color:var(--muted)}.audit-card button{margin-top:.6rem}.empty{padding:2.5rem;text-align:center;color:var(--muted)}footer{padding:1.2rem 2.3rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--muted)}dialog{max-width:35rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:2rem}dialog::backdrop{background:#0009}dialog p{margin:1rem 0 1.5rem}
@media(min-width:1900px){main{padding:2.2rem 3rem}.topbar,.demo-strip{padding-left:3rem;padding-right:3rem}.metric-value{font-size:2.7rem}.pipeline{gap:.8rem}.pipeline li{padding:1.1rem .8rem}.chart svg{height:170px}.signals{padding:1.5rem}.secondary-grid>section{padding:1.5rem}.panel-head{margin-bottom:1.5rem}}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.primary-grid{grid-template-columns:1fr}.signals{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.signals .panel-head{grid-column:1/-1;margin-bottom:0}.observation-note{margin:0;border:0;border-left:1px solid var(--border);padding:0 0 0 1.2rem}.secondary-grid{grid-template-columns:1fr}.brand-sub{display:block;margin-left:0}.heading-row{align-items:flex-start}.heading-row>.actions{justify-content:flex-end}.detail-columns{grid-template-columns:1fr}}
@media(max-width:800px){.topbar{padding:1rem;align-items:flex-start;flex-wrap:wrap}.demo-strip{padding:.65rem 1rem;flex-wrap:wrap;gap:.25rem}main{padding:1.2rem 1rem}.heading-row{flex-direction:column}.heading-row>.actions{justify-content:flex-start}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}.chart-row{grid-template-columns:1fr}.context-grid{grid-template-columns:1fr}.signals{display:block}.observation-note{margin-top:1rem;border:0;border-top:1px solid var(--border);padding:1rem 0 0}.control-buttons{margin-left:0}.inspector-heading{flex-direction:column}.form-grid{grid-template-columns:1fr}.detail-content{padding:1rem}.key-values{grid-template-columns:1fr}.key-values dd{margin-bottom:.5rem}.timezone{margin-left:0}footer{padding:1rem}.metric-value{white-space:normal}.display-options{flex-wrap:wrap}}
:root[data-scale="200"] .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
:root[data-scale="200"] .primary-grid,:root[data-scale="200"] .secondary-grid{grid-template-columns:1fr}
:root[data-scale="200"] .pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){button,.panel,.metric,.pipeline li{border:1px solid CanvasText}.badge{color:CanvasText!important}.chart .plot,.chart .grid-line,.chart .cursor-line{stroke:CanvasText}}

button,input,select,textarea{border-color:var(--control-border)}

@media(max-width:800px){:root[data-scale="200"] .metrics,:root[data-scale="200"] .context-grid{grid-template-columns:1fr}.controls label{min-width:0;max-width:100%}.controls select{min-width:0;max-width:100%}.brand{max-width:100%;overflow-wrap:anywhere}.heading-row,.actions{min-width:0}}

.compact-link{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .85rem;border:1px solid var(--control-border);border-radius:6px;text-decoration:none;font-size:.9rem}

/* Login-only presentation; authenticated Observatory views retain their layout. */
.login-screen .login-shell{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px 20px}
.login-screen .login-card{width:100%;max-width:380px;padding:36px 28px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.login-screen .login-card h1{text-align:center;font-size:clamp(1.65rem,6vw,2rem);letter-spacing:.015em;margin:0 0 32px;line-height:1.3}
.login-screen .login-card>button{display:block;width:100%;min-height:48px;margin:12px 0;font-weight:600}
.login-screen #legacy-toggle{background:transparent;color:var(--text)}
.login-screen #legacy-panel{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.login-screen #legacy-panel form{display:grid;gap:10px}
.login-screen #legacy-panel input{font-size:16px;min-width:0;max-width:100%}
.login-screen #login-message{color:var(--danger);font-size:.9rem;line-height:1.6;margin:20px 0 0;overflow-wrap:anywhere}
.login-screen button:focus-visible,.login-screen input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.login-screen [hidden]{display:none!important}
@media(max-width:420px){.login-screen .login-card{padding:30px 20px}.login-screen .login-shell{padding:20px 16px}}