/* Observatory controls: cool scientific ink, shared alignment, restrained depth.
   Decoration is layered beneath solid text; masking never touches glyphs. */
body[data-page="ai-progress"] {
  --selected:var(--accent);
  --blue:#8eb7c0;
  --text:#dce4e9;
  --muted:#a9b6bf;
  --line:#34424c;
  --soft:#202c34;
  --control-light:#c5d6e1;
  --control-ink:#dce4e9;
  --control-muted:#a9b6bf;
}
/* Every lens uses the approved brand ink; evidence shapes remain distinct. */
.chart-svg .point-mark,.chart-svg .point-mark.mixed { fill:var(--accent); stroke:var(--accent); }
.chart-svg .point-mark.estimated,.chart-svg .point-mark.unspecified { fill:transparent; stroke:var(--accent); }
.chart-svg text { fill:var(--muted); }
.chart-svg .grid { stroke:#9eb6c21a; }
.chart-svg .axis-line { stroke:#9eb6c247; }
.chart-region { background:radial-gradient(ellipse at 55% 50%,#89aabd0b,transparent 70%); }
.progress-title h1,.progress-title h1 .type-light,.instrument-heading h2,
.lens-nav button strong,.coverage-signal strong,.inspector h3,.inspector .inspection-value {
  background-image:none; color:var(--text); text-shadow:none;
}
.lens-nav button[aria-pressed="true"] strong { color:var(--accent); }
.lens-nav button[aria-pressed="false"] strong { color:var(--muted); }
.reading-notes { padding-block:32px 56px; }
.reading-notes .inspection-layers { margin:0; }
@supports not (appearance:base-select) {
  body[data-page="ai-progress"] select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%239fb9c9' stroke-width='1.2'/%3E%3C/svg%3E"); }
}
body[data-page="ai-progress"] select:hover { color:var(--control-light); }
body[data-page="ai-progress"] input { background-image:linear-gradient(110deg,#a7c5d807,#8eb7c005); border-bottom-color:var(--line); }
.inspection-measure::before { background:radial-gradient(ellipse at 25% 40%,#a7c5d812,transparent 68%),radial-gradient(ellipse at 85% 65%,#8eb7c00a,transparent 70%); }
.inspection-notice { border-left-color:#a7c5d873; color:var(--control-light); }
.inspector summary,.inspector a { color:var(--control-light); }
.inspector dt,.inspector .unit { color:var(--control-muted); }
.site-footer { border-top-color:var(--line); background:none; }
.benchmark-navigation { display:flex; justify-content:flex-end; align-items:center; gap:18px; margin:0 0 18px; }
.benchmark-navigation[hidden] { display:none; }
.benchmark-context { container-type:inline-size; margin-bottom:12px; }
.benchmark-context:has(.benchmark-explainer[hidden]) { display:none; }
.benchmark-context-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:28px; }
body[data-page="ai-progress"] .benchmark-context .benchmark-explainer { min-width:0; margin:0; }
body[data-page="ai-progress"] .benchmark-context .benchmark-navigation { margin:0; gap:8px; padding-left:20px; border-left:1px solid var(--soft); }
.benchmark-context .benchmark-browser-trigger strong { font-size:16px; white-space:nowrap; }
.benchmark-context .benchmark-step { width:36px; }
@container(max-width:650px) {
  .benchmark-context-row { grid-template-columns:minmax(0,1fr); gap:12px; }
  body[data-page="ai-progress"] .benchmark-context .benchmark-navigation { padding-left:0; border:0; }
}
/* Keep the measurement title and both chart axes together in the reading view. */
body[data-page="ai-progress"] .instrument-heading { margin:5px 0 14px; }
body[data-page="ai-progress"] .instrument-heading h2 { margin:0 0 8px; }
body[data-page="ai-progress"] .benchmark-explainer { margin:0 0 10px; }
body[data-page="ai-progress"] .benchmark-explainer-content { padding:10px 0 12px; }
body[data-page="ai-progress"] .benchmark-navigation { margin-bottom:8px; }
body[data-page="ai-progress"] #chart { min-height:0; height:clamp(310px,46svh,420px); }
body[data-page="ai-progress"] #chart .chart-svg { height:100%; }
body[data-page="ai-progress"] .has-selection .inspector { max-height:var(--inspector-height,580px); }
.post-chart-controls {
  display:flex; justify-content:flex-end; border:0; margin-top:20px;
  background:none;
}
.post-chart-controls .record-finder {
  display:grid; grid-template-columns:minmax(0,1fr); gap:2px;
  width:min(460px,100%); min-width:0; padding:14px 0 18px;
  white-space:normal; font:12px/1.5 var(--font-body);
}
.record-finder-label { color:var(--control-muted); letter-spacing:.025em; }
body[data-page="ai-progress"] #observation {
  font:17px/1.5 var(--font-body); color:var(--control-light);
  padding:10px 0 12px; border:0; border-bottom:1px solid var(--line);
  text-shadow:none;
}
body[data-page="ai-progress"] #observation:hover { background-color:transparent; color:#e1edf4; }
@supports (appearance:base-select) {
  body[data-page="ai-progress"] #observation { gap:20px; }
  #observation>button {
    display:flex; flex:1; align-items:center; min-width:0; width:100%; padding:0;
    border:0; background:none; color:inherit; font:inherit; text-align:left;
  }
  #observation selectedcontent { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #observation selectedcontent .record-meta { display:none; }
  #observation selectedcontent .record-model { font:inherit; color:inherit; }
  body[data-page="ai-progress"] #observation::picker(select) {
    padding:30px; width:max(anchor-size(width),min(490px,calc(100vw - 20px)));
    height:min(460px,60dvh); max-height:stretch;
    position-area:block-start span-inline-start;
    position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;
    position-try-order:most-height;
    border:0; border-radius:0; box-shadow:none;
    background:radial-gradient(ellipse at 15% 10%,#89aabd16,transparent 70%),linear-gradient(125deg,#1a242cf5,#11191ff5);
    backdrop-filter:none;
    /* Fade only inside generous empty margins; option ink remains in the center. */
    mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-composite:intersect;
  }
  body[data-page="ai-progress"] #observation option {
    display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:10px;
    row-gap:4px; padding:12px; border:0;
  }
  #observation option::checkmark { grid-column:1; grid-row:1 / 3; align-self:center; }
  #observation option .record-model { grid-column:2; font:15px/1.5 var(--font-body); color:#dce4e9; }
  #observation option .record-meta { grid-column:2; font:11px/1.6 var(--font-body); color:#a9b6bf; letter-spacing:.025em; }
  body[data-page="ai-progress"] #observation option:first-of-type {
    display:flex; font:17px/1.5 var(--font-body); color:var(--control-light);
    border:0; padding-bottom:16px;
  }
  body[data-page="ai-progress"] #observation option:hover,
  body[data-page="ai-progress"] #observation option:checked {
    background:radial-gradient(ellipse at 42% 50%,#a7c5d81c,transparent 75%);
  }
}
.benchmark-step {
  width:44px; height:44px; border:0; border-radius:0;
  color:#a9bdca; background:none;
  font:20px/1 var(--font-body);
  transition:color 240ms ease,text-shadow 300ms ease;
}
.benchmark-step:hover { color:#dfedf5; background:none; transform:none; text-shadow:0 0 14px #a7c5d82b; }
.benchmark-browser-trigger strong {
  font:400 16px/1.5 var(--font-display); color:inherit;
}
.benchmark-browser-trigger {
  border:0; background:none; padding:10px 0;
  color:var(--control-light);
  text-shadow:none;
  transition:color 240ms ease,text-shadow 300ms ease;
}
.benchmark-browser-trigger:hover {
  background:none; transform:none; color:#e1edf4;
  text-shadow:0 1px 2px #08070b80,0 0 24px #a7c5d81c;
}
/* Light dissipates beyond the hit targets; their rectangular bounds stay invisible. */
.benchmark-step,.benchmark-browser-trigger { position:relative; isolation:isolate; }
.benchmark-step::before,.benchmark-browser-trigger::before {
  content:""; position:absolute; inset:-8px -4px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,#a7c5d812 0%,#89aabd09 35%,transparent 72%);
  opacity:0; transition:opacity 360ms ease;
}
.benchmark-step:hover::before,.benchmark-browser-trigger:hover::before { opacity:1; }
.benchmark-browser-trigger .href-symbol { opacity:.55; transition:opacity 240ms ease; }
.benchmark-browser-trigger:hover .href-symbol { opacity:.85; transform:none; }
.benchmark-browser {
  isolation:isolate; border:0; border-radius:0; background:none; box-shadow:none;
  max-height:calc(100dvh - 32px);
}
.benchmark-browser::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 15% 10%,#89aabd1a,transparent 65%),radial-gradient(ellipse at 85% 60%,#7193a20d,transparent 70%),linear-gradient(125deg,#172129eb,#10171df5);
  mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-composite:intersect;
}
.benchmark-browser::after {
  content:""; position:absolute; inset:32px; z-index:-1; pointer-events:none;
  background:url("atmosphere-grain.svg"); opacity:.1; mix-blend-mode:soft-light;
  mask-image:radial-gradient(ellipse,#000 35%,transparent 75%);
}
.benchmark-browser::backdrop { background:#06060bc4; backdrop-filter:blur(9px); animation:observatory-backdrop-in 360ms ease-out; }
.benchmark-browser.is-closing::backdrop { animation:observatory-backdrop-out 180ms ease-in forwards; }
.benchmark-browser-shell {
  display:flex; flex-direction:column; overflow:hidden; padding:48px 52px 28px;
}
.benchmark-browser header { flex:none; align-items:center; padding-bottom:20px; border:0; }
.benchmark-browser header .micro { font:11px/1.5 var(--font-body); letter-spacing:.1em; color:var(--control-muted); }
.benchmark-browser header h2 {
  font:400 clamp(26px,3vw,36px)/1.25 var(--font-display); color:var(--control-light);
  text-shadow:0 2px 2px #08070b80,0 0 32px #a7c5d80d; margin-top:10px;
}
.benchmark-browser header button { font:13px/1.4 var(--font-body); padding:10px 4px; color:var(--control-ink); border:0; }
.benchmark-search { flex:none; margin:20px 0 8px; font:12px/1.5 var(--font-body); color:var(--control-muted); }
body[data-page="ai-progress"] .benchmark-search input {
  font:16px/1.5 var(--font-body); padding:10px 12px; border:0;
  background:radial-gradient(ellipse at 45% 50%,#89aabd0c,transparent 75%);
}
body[data-page="ai-progress"] .benchmark-search input:focus-visible {
  outline:0;
  background-image:radial-gradient(ellipse at 45% 50%,#a7c5d812,transparent 75%),linear-gradient(to right,transparent,#a7c5d8b3 20%,#a7c5d8b3 80%,transparent);
  background-size:100% 100%,100% 1px; background-position:center,bottom; background-repeat:no-repeat;
}
.benchmark-list button:focus-visible {
  outline:0; text-decoration:underline; text-underline-offset:5px; color:#dfedf5;
  background:radial-gradient(ellipse at 40% 50%,#a7c5d820,transparent 75%);
}
.benchmark-search-status { flex:none; margin:4px 0 20px; font:12px/1.5 var(--font-body); color:var(--control-muted); }
.benchmark-list { overflow:auto; min-height:0; padding:0 8px 32px 0; scrollbar-width:thin; scrollbar-color:#667f8d transparent; align-items:start; }
.benchmark-category { border:0; }
.benchmark-category h3 { align-items:baseline; padding:16px 8px 12px; font:19px/1.4 var(--font-brand); color:var(--control-light); }
.benchmark-category h3 small { font:10px/1.4 var(--font-body); color:var(--control-muted); }
.benchmark-options { padding:0; }
.benchmark-list button {
  position:relative; padding:11px 12px; min-height:44px; font:14px/1.5 var(--font-body);
  color:#c2d0d9; border:0; overflow-wrap:anywhere;
  transition:color .18s,background-color .18s,box-shadow .18s;
}
.benchmark-list button:hover { color:var(--control-ink); background:radial-gradient(ellipse at 40% 50%,#a7c5d816,transparent 75%); }
.benchmark-list button[aria-pressed="true"] { color:#dfedf5; background:radial-gradient(ellipse at 40% 50%,#a7c5d820,transparent 75%); box-shadow:none; }
.benchmark-list button[aria-pressed="true"]::before { content:none; }
.benchmark-list button[hidden],.benchmark-category[hidden] { display:none; }
.filters label,.record-finder,.scale-label,.chart-options-label {
  font:12px/1.5 var(--font-body); letter-spacing:.025em; color:var(--control-muted);
}
body[data-page="ai-progress"] select {
  font:14px/1.5 var(--font-body); color:var(--control-ink); min-height:44px;
  text-shadow:0 1px 2px #05060980;
}
.chart-options-toggle,.methodology-toggle strong { color:var(--control-light); font-family:var(--font-display); }
.expand-panel .expand-inner {
  background:radial-gradient(ellipse at 0 0,#89aabd0a,transparent 65%);
}
.expand-panel { transition:grid-template-rows 360ms var(--ease),opacity 280ms ease,visibility 0s 360ms; }
.expand-panel.is-open { transition-delay:0s; }
.expand-panel .expand-inner { transition:transform 360ms var(--ease); transform:translateY(-7px); }
.expand-panel.is-open .expand-inner { transform:translateY(0); }
.benchmark-explainer-content { background:radial-gradient(ellipse at 0 0,#89aabd08,transparent 70%); }
.explainer-heading { display:flex; align-items:center; justify-content:flex-start; gap:8px 12px; flex-wrap:wrap; min-height:44px; }
.explainer-heading h3 { margin:0; color:var(--control-light); font:400 14px/1.5 var(--font-display); }
.explainer-controls { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.explainer-controls button { min-width:32px; height:36px; padding:6px; border:0; background:none; color:var(--control-light); font:18px/1 var(--font-body); }
.explainer-controls button:hover { color:var(--text); background:none; transform:none; }
#explainer-position { color:var(--control-muted); font:11px/1.5 var(--font-body); }
.explainer-controls .explainer-timer { display:grid; place-items:center; width:32px; height:36px; padding:4px; margin-left:2px; }
.explainer-timer[hidden] { display:none; }
.explainer-timer svg { width:20px; height:20px; fill:none; stroke:var(--control-light); stroke-width:1.4; transform:rotate(-90deg); }
.explainer-timer .timer-track { stroke:var(--control-muted); opacity:.25; }
#explainer-countdown { stroke-dasharray:1; stroke-dashoffset:0; stroke-linecap:round; }
.explainer-timer[aria-pressed="true"] svg { opacity:.45; }
.benchmark-explainer .benchmark-explainer-content { grid-template-columns:minmax(0,1fr); gap:0; padding:18px 0 22px; }
.benchmark-explainer-content>div { grid-area:1 / 1; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity 650ms ease,transform 650ms var(--ease); }
.benchmark-explainer-content>div.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }
.benchmark-explainer p { max-width:75ch; }
.has-selection .inspector { display:flex; flex-direction:column; overflow:hidden; }
.has-selection .inspector-inner { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.inspector>.post-chart-controls { flex:0 0 auto; margin-top:0; margin-left:23px; border-top:1px solid var(--soft); }
.inspector .record-finder { width:100%; padding:16px 0 0; }
.inspector #observation { width:100%; min-width:0; font-size:18px; }
@media(max-width:700px) {
  .has-selection .inspector-inner { margin-top:20px; }
  .inspector>.post-chart-controls { margin:0; padding:0 20px 12px; background:var(--panel); border:1px solid var(--line); border-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .benchmark-explainer-content>div { transition:none; transform:none; }
}
.benchmark-explainer small { color:var(--control-light); font:400 13px/1.5 var(--font-display); letter-spacing:0; }
.benchmark-explainer p { font-size:13px; }
.inspector summary { font:15px/1.5 var(--font-brand); }
@supports (appearance:base-select) {
  body[data-page="ai-progress"] select::picker(select) {
    border:1px solid #9fb9c93b; border-radius:3px; padding:10px;
    background:radial-gradient(ellipse at 0 0,#89aabd1a,transparent 65%),linear-gradient(125deg,#1a242c,#11191f);
    box-shadow:0 18px 60px #03030880,inset 0 1px #d5e7f012;
    mask-image:none; backdrop-filter:blur(16px); min-width:anchor-size(width);
    width:max(anchor-size(width),min(420px,calc(100vw - 32px)));
    opacity:0; transform:translateY(-6px); transform-origin:top center;
    transition:opacity 220ms ease,transform 280ms var(--ease),display 280ms allow-discrete,overlay 280ms allow-discrete;
  }
  body[data-page="ai-progress"] select:open::picker(select) { opacity:1; transform:translateY(0); }
  @starting-style {
    body[data-page="ai-progress"] select:open::picker(select) { opacity:0; transform:translateY(-6px); }
  }
  body[data-page="ai-progress"] select::picker-icon { transition:rotate 280ms var(--ease); color:var(--control-light); }
  body[data-page="ai-progress"] select:open::picker-icon { rotate:180deg; }
  body[data-page="ai-progress"] select option {
    font:14px/1.6 var(--font-body); min-height:44px; padding:10px 12px;
    color:var(--control-ink); background:transparent; text-shadow:0 1px 2px #05060980;
  }
  body[data-page="ai-progress"] select option:checked { color:#dfedf5; background:linear-gradient(100deg,#a7c5d81c,transparent); }
  body[data-page="ai-progress"] select option:hover { color:#edf5fa; background:linear-gradient(100deg,#a7c5d820,transparent); }
  body[data-page="ai-progress"] select option::checkmark { color:var(--control-light); }
}
@keyframes observatory-backdrop-in { from { background:#06060b00; backdrop-filter:blur(0); } }
@keyframes observatory-backdrop-out { to { background:#06060b00; backdrop-filter:blur(0); } }
@keyframes observatory-copy-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@media(max-width:700px) {
  .benchmark-browser-shell { padding:30px 28px 20px; }
  .benchmark-browser::before {
    mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  }
  .benchmark-browser { width:calc(100vw - 20px); height:calc(100dvh - 32px); }
  .benchmark-list { grid-template-columns:1fr; }
  .benchmark-search { gap:7px; margin-top:14px; }
  .benchmark-navigation { gap:12px; }
  .benchmark-browser-trigger strong { font-size:18px; }
  .benchmark-category h3 { font-size:18px; }
  .benchmark-category h3 { flex-wrap:wrap; gap:4px 14px; }
  .benchmark-category h3 small { flex-basis:100%; }
  .benchmark-browser header { gap:14px; }
  .benchmark-browser header h2 { font-size:27px; }
  .benchmark-search-status { margin-bottom:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .benchmark-browser::backdrop,.benchmark-explainer[open] .benchmark-explainer-content { animation:none; }
  .expand-panel,.expand-panel .expand-inner,.benchmark-step { transition:none; transform:none; }
  .benchmark-browser-trigger,.benchmark-step::before,.benchmark-browser-trigger::before { transition:none; }
  body[data-page="ai-progress"] select::picker(select),body[data-page="ai-progress"] select::picker-icon { transition:none; transform:none; }
}
@media(forced-colors:active) {
  body[data-page="ai-progress"] { --text:CanvasText; --muted:CanvasText; --control-light:CanvasText; --control-ink:CanvasText; --control-muted:CanvasText; --line:ButtonText; --accent:LinkText; --selected:Highlight; }
  .chart-svg text { fill:CanvasText; }
  .chart-svg .point-mark,.chart-svg .point-mark.mixed { fill:CanvasText; stroke:CanvasText; }
  .chart-svg .point-mark.estimated,.chart-svg .point-mark.unspecified { fill:Canvas; }
  .benchmark-browser,.benchmark-step { background:Canvas; color:CanvasText; border:1px solid CanvasText; box-shadow:none; }
  .benchmark-browser::before,.benchmark-browser::after { display:none; }
  body[data-page="ai-progress"] #observation::picker(select) { mask-image:none; background:Canvas; color:CanvasText; border:1px solid CanvasText; }
  .benchmark-list button[aria-pressed="true"] { color:HighlightText; background:Highlight; }
}
