@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#f5f8ff;--muted:#b7c2d2;--bg:#07111f;--raised:#12233a;--line:#2b4664;--cyan:#52d6ff;--amber:#ffb454;--red:#ff6d79;--green:#52d69a;--radius:18px;--shadow:0 20px 65px rgba(0,0,0,.24);--focus:0 0 0 3px rgba(82,214,255,.7)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 20% -10%,#14345b 0,transparent 30rem),var(--bg);color:var(--ink);font:400 16px/1.5 "Fira Sans",sans-serif}button,input{font:inherit}button{color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:none;box-shadow:var(--focus)}.app-shell{width:min(1480px,calc(100% - 40px));margin:auto;padding:28px 0 50px}.topbar,.panel-heading,.header-meta,.playback-controls,.range-scale,.chart-key{display:flex;align-items:center}.topbar{justify-content:space-between;gap:20px;margin-bottom:24px}.product-mark{display:flex;align-items:center;gap:13px}.mark-dot{width:15px;height:15px;border:3px solid var(--cyan);border-radius:50%;box-shadow:0 0 0 5px rgba(82,214,255,.12)}h1,h2,p{margin:0}h1{font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.1;letter-spacing:-.03em}h2{font-size:1.05rem}.eyebrow{color:var(--muted);font:500 .67rem/1.2 "Fira Code",monospace;letter-spacing:.08em;text-transform:uppercase}.header-meta{gap:8px;flex-wrap:wrap}.model-chip,.status-pill{border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:#d4e1ef;font:500 .68rem/1 "Fira Code",monospace}.notice{display:flex;gap:10px;border:1px solid #705628;border-radius:12px;margin-bottom:18px;padding:10px 14px;background:rgba(255,180,84,.1);color:#f1d3a0;font-size:.84rem}.notice.is-hidden{display:none}.notice-icon{display:grid;flex:none;width:18px;height:18px;place-items:center;border-radius:50%;background:var(--amber);color:#302008;font-weight:700;font-size:.72rem}.workspace{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.7fr);gap:18px}.bottom-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px;margin-top:18px}.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(20,40,65,.9),rgba(10,23,40,.94));box-shadow:var(--shadow)}.field-panel{padding:18px}.panel-heading{justify-content:space-between;gap:18px;margin-bottom:14px}.mode-tabs{display:flex;gap:8px;padding:4px;border-radius:10px;background:rgba(2,8,18,.52)}.mode-tab{min-height:44px;border:0;border-radius:7px;padding:7px 12px;background:transparent;color:var(--muted);cursor:pointer;font-size:.76rem;transition:background-color .18s ease,color .18s ease,transform .18s ease}.mode-tab:hover{color:var(--ink);background:rgba(82,214,255,.1)}.mode-tab:active,.probe:active,.icon-button:active{transform:scale(.97)}.mode-tab.is-selected{background:var(--raised);color:var(--ink)}.field-stage{position:relative;min-height:410px;overflow:hidden;border:1px solid #1e3854;border-radius:13px;background:#06101d}.field-stage canvas{display:block;width:100%;height:100%;min-height:410px}.field-overlay{position:absolute;top:12px;right:13px;display:flex;gap:8px;color:#d7e4f5;font:500 .68rem "Fira Code",monospace}.field-overlay span{padding:5px 7px;border:1px solid rgba(164,191,218,.25);border-radius:5px;background:rgba(4,14,25,.65)}.legend{position:absolute;bottom:13px;right:14px;display:flex;align-items:center;gap:7px;color:#d7e4f5;font:500 .64rem "Fira Code",monospace}.legend i{width:86px;height:8px;border-radius:99px;background:linear-gradient(90deg,#306fb2,#d9e7e5 50%,#ce604c)}.playback-controls{gap:11px;padding:16px 4px 0}.icon-button{display:grid;flex:none;width:44px;height:44px;place-items:center;border:1px solid #2d5377;border-radius:9px;background:#12345a;cursor:pointer;transition:background-color .18s ease,transform .18s ease}.icon-button:hover{background:#174875}.icon-button svg{width:18px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.playback-controls input{width:100%;accent-color:var(--cyan)}.time-readout{min-width:54px;color:var(--muted);font:.7rem "Fira Code",monospace;text-align:right}.control-column{display:grid;gap:18px;align-content:start}.compact-panel{padding:17px}.panel-copy,.probe-hint,.fine-print{color:var(--muted);font-size:.77rem}.probe-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 10px}.probe{display:grid;min-height:44px;aspect-ratio:1;place-items:center;border:1px solid #2d5873;border-radius:8px;background:#0c2539;color:#bfeaff;cursor:pointer;font:500 .66rem "Fira Code",monospace;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}.probe:hover{border-color:var(--cyan);background:#10344e}.probe.is-off{border-color:#a96069;background:#351b25;color:#ffb3ba;text-decoration:line-through}.status-pill{color:var(--green);border-color:rgba(82,214,154,.45);background:rgba(82,214,154,.09)}.status-pill.is-degraded{color:var(--amber);border-color:rgba(255,180,84,.45);background:rgba(255,180,84,.09)}.status-pill.is-unavailable{color:#ffb3ba;border-color:rgba(255,109,121,.5);background:rgba(255,109,121,.1)}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.metric span,.metric small{display:block;color:var(--muted);font-size:.69rem}.metric strong{display:block;margin:4px 0 2px;color:#eff7ff;font:600 1.02rem "Fira Code",monospace}.metric small{font-size:.62rem}.signal-panel,.explanation-panel{padding:18px}.signal-panel canvas{display:block;width:100%;height:160px}.chart-key{gap:6px;color:var(--muted);font-size:.68rem}.chart-key i{width:12px;height:2px;background:#d7e4f5}.chart-key .estimate-key{background:var(--cyan)}.explanation-panel>p:not(.eyebrow):not(.fine-print){margin-top:12px;max-width:62ch;color:#d5dfec;font-size:.9rem}.state-callout{display:flex;gap:9px;margin:16px 0 12px;padding:10px;border:1px solid rgba(82,214,154,.3);border-radius:10px;background:rgba(82,214,154,.07);font-size:.78rem}.status-marker{width:7px;height:7px;flex:none;margin-top:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(82,214,154,.1)}.state-callout.is-degraded{border-color:rgba(255,180,84,.45);background:rgba(255,180,84,.08)}.state-callout.is-degraded .status-marker{background:var(--amber)}.state-callout.is-unavailable{border-color:rgba(255,109,121,.45);background:rgba(255,109,121,.09)}.state-callout.is-unavailable .status-marker{background:var(--red)}.fine-print{font-size:.7rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:900px){.workspace,.bottom-grid{grid-template-columns:1fr}.control-column{grid-template-columns:repeat(2,1fr)}.control-column>:last-child{grid-column:span 2}.field-stage,.field-stage canvas{min-height:360px}}@media(max-width:620px){.app-shell{width:calc(100% - 24px);padding-top:18px}.topbar,.panel-heading{align-items:flex-start}.topbar,.panel-heading{flex-direction:column}.field-panel,.compact-panel,.signal-panel,.explanation-panel{padding:14px}.mode-tabs{width:100%}.mode-tab{flex:1}.control-column{grid-template-columns:1fr}.control-column>:last-child{grid-column:auto}.field-stage,.field-stage canvas{min-height:285px}.field-overlay{left:10px;right:auto}.legend{bottom:10px;right:10px}.signal-panel canvas{height:130px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Reused underwater atmosphere, kept behind the estimator UI. */
body{position:relative;isolation:isolate;overflow-x:hidden}
body::before{position:fixed;inset:0;z-index:0;pointer-events:none;content:"";opacity:.56;background-image:linear-gradient(rgba(5,15,22,.44),rgba(5,15,22,.82)),url("assets/underwater-background.png"),linear-gradient(rgba(157,224,225,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(157,224,225,.035) 1px,transparent 1px),radial-gradient(circle at 80% 8%,rgba(34,112,126,.22),transparent 32rem);background-position:center top,center top,0 0,0 0,center top;background-size:cover,cover,72px 72px,72px 72px,auto;background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;mask-image:linear-gradient(to bottom,#000 0%,transparent 82%);transform:scale(1.04) translate3d(-.5%,0,0);transform-origin:center center;animation:two-cylinder-water-drift 14s ease-in-out infinite alternate}
body::after{position:fixed;inset:-12%;z-index:0;pointer-events:none;content:"";opacity:.13;background-image:radial-gradient(ellipse at 24% -8%,rgba(192,242,236,.28),transparent 31%),radial-gradient(ellipse at 78% 0%,rgba(255,238,204,.18),transparent 27%),repeating-linear-gradient(112deg,transparent 0 62px,rgba(173,232,228,.13) 70px,transparent 78px 150px),repeating-linear-gradient(76deg,transparent 0 92px,rgba(127,216,218,.1) 98px,transparent 106px 190px);background-size:100% 100%,100% 100%,180% 160%,160% 180%;background-position:0 0,0 0,0 0,100% 0;filter:blur(18px);mix-blend-mode:screen;will-change:transform,background-position;animation:two-cylinder-water-shimmer 8s ease-in-out infinite alternate}
body>*{position:relative;z-index:1}
@keyframes two-cylinder-water-drift{0%{transform:scale(1.04) translate3d(-.5%,0,0)}50%{transform:scale(1.07) translate3d(.8%,-1.2%,0)}100%{transform:scale(1.04) translate3d(-.4%,.7%,0)}}
@keyframes two-cylinder-water-shimmer{0%{transform:translate3d(-3%,-1%,0) rotate(-1deg) scale(1.02);background-position:0 0,0 0,0 0,100% 0;opacity:.08}50%{background-position:0 0,0 0,7% -4%,94% 5%;opacity:.14}100%{transform:translate3d(3%,1.5%,0) rotate(1deg) scale(1.08);background-position:0 0,0 0,16% -8%,86% 10%;opacity:.18}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none;transform:none;will-change:auto}}