/* Homepage product demos: original component rules in cascade order.
   Animation/interaction code remains in optimizer-demo.js and sweep-chart.js. */

/* new.css */
.product-demos .new-sweep-plot {margin:18px 0 0}
.product-demos .new-sweep-plot a {display:block;border:1px solid #303036;border-radius:7px;overflow:hidden;background:#141417}
.product-demos .new-sweep-plot img {display:block;width:100%;height:auto}
.product-demos .new-sweep-plot figcaption {margin-top:8px;font-size:10px;line-height:1.5;color:#bcbcc6}
.product-demos .optimizer-demo-block {margin-top:18px}
.product-demos .optimizer-shell {padding:6px}
.product-demos .optimizer-browser-bar {grid-template-columns:1fr auto}
.product-demos .browser-address {display:none}
.product-demos .optimizer-content {padding:10px;height:460px;min-height:0;overflow-y:auto;scrollbar-gutter:stable;overflow-anchor:none;transition:none}
.product-demos .optimizer-prompt-header {flex-wrap:wrap;gap:4px;padding:6px 8px}
.product-demos .optimizer-prompt-actions {min-width:0;flex-wrap:wrap}
.product-demos #diff-status {font-size:7px;white-space:normal}
.product-demos .optimizer-prompt code {font-size:9px;padding-inline:8px;overflow-wrap:anywhere}
.product-demos .annotation-card {padding:12px;min-height:235px}
.product-demos .annotation-card h4 {font-size:16px}
.product-demos .annotation-labeler {padding:8px}
.product-demos .annotation-labeler>span:not(.annotation-cursor) {flex-wrap:wrap;gap:4px}
.product-demos .annotation-choices button {padding:8px;min-width:0}
.product-demos .optimizer-score {grid-template-columns:auto minmax(0,1fr)}
.product-demos .deployment-endpoint {grid-template-columns:34px minmax(0,1fr);gap:4px}
.product-demos .deployment-cost {grid-column:2}
.product-demos .optimizer-deployment.is-visible {max-height:160px}
@media(max-width:900px) {
.product-demos .optimizer-demo-block,
.product-demos .new-sweep-plot {max-width:608px}
}
.product-demos .scale-map {margin:18px 0 0;padding:14px 12px 12px;border:1px solid #303036;border-radius:7px;background:#141417;max-width:608px}
.product-demos .scale-map-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid #303036}
.product-demos .scale-map-heading code {font:10px ui-monospace,monospace;color:#9da0ff}
.product-demos .scale-map-heading>span {font-size:9px;color:#9da0ff;background:#141417;border-radius:20px;padding:3px 7px;white-space:nowrap}
.product-demos .scale-map svg {display:block;width:100%;height:auto;overflow:visible}
.product-demos .scale-map-label {font:7px ui-monospace,monospace;letter-spacing:.04em;fill:#bcbcc6}
.product-demos .scale-map-path {fill:none;stroke:#303036;stroke-width:1.2}
.product-demos .scale-map-input {fill:#141417;stroke:#303036}
.product-demos .scale-map-lines {fill:none;stroke:#303036;stroke-width:1.6;stroke-linecap:round}
.product-demos .scale-map-function {fill:#9d9da9;stroke:#48476b}
.product-demos .scale-map-symbol {fill:#9da0ff;font:18px Georgia,serif}
.product-demos .scale-map-output {fill:#141417;stroke:#2c4b3b}
.product-demos .scale-map-output-lines {fill:none;stroke:#2c4b3b;stroke-width:1.6;stroke-linecap:round}
.product-demos .scale-map-packet {fill:#9da0ff;animation:scale-map-flow 2.4s linear infinite;animation-delay:calc(var(--row) * -.3s)}
.product-demos .scale-map-row {animation:scale-map-expand 7s ease-in-out infinite;animation-delay:calc(var(--row) * .25s)}
.product-demos .scale-map-more {font:20px Georgia,serif;fill:#9da0ff}
.product-demos .scale-map figcaption {font-size:10px;line-height:1.5;color:#bcbcc6;margin-top:8px}
@keyframes scale-map-flow {0%{transform:translateX(0);opacity:0}10%,85%{opacity:1}100%{transform:translateX(154px);opacity:0}}
@keyframes scale-map-expand {0%,12%,100%{opacity:.25}25%,80%{opacity:1}}
@media(prefers-reduced-motion:reduce) {
.product-demos .scale-map-row,
.product-demos .scale-map-packet {animation:none}
.product-demos .scale-map-packet {display:none}
}

/* dark-theme.css */
.product-demos .new-quotes blockquote,
.product-demos .new-hosting-options article,
.product-demos .new-pricing .pricing-card,
.product-demos .new-pricing .batch-calculator,
.product-demos .pricing-trial,
.product-demos .alignment-trajectory,
.product-demos .new-sweep-plot a,
.product-demos .scale-map,
.product-demos .new-compare-scroll,
.product-demos .new-build-grid,
.product-demos .optimizer-shell,
.product-demos .chart-card,
.product-demos .execution-modes figure,
.product-demos .audience-grid,
.product-demos .pricing-card,
.product-demos .batch-calculator,
.product-demos .terminal,
.product-demos blockquote,
.product-demos .video-placeholder {
  background: var(--panel);
  border-color: transparent;
  border-radius: 16px;
  box-shadow: var(--panel-edge);
}
.product-demos .button,
.product-demos .text-button,
.product-demos .optimizer-window,
.product-demos .annotation-card,
.product-demos .annotation-choices button,
.product-demos .token-preset,
.product-demos .hosting-workload {
  background: var(--raised);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--raised-edge);
  border-radius: 12px;
}
.product-demos .button-primary,
.product-demos .button-header-cta,
.product-demos .button-lavender,
.product-demos .new-pricing .button-enterprise,
.product-demos .optimize-button {
  background: linear-gradient(180deg, #2d2c47, #232235);
  border-color: #9da0ff40;
  color: #c5c7ff;
  box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #7c7ff22e, 0 8px 20px -10px #7c7ff24d;
}
.product-demos .button-primary:hover,
.product-demos .button-header-cta:hover,
.product-demos .button-lavender:hover,
.product-demos .new-pricing .button-enterprise:hover,
.product-demos .optimize-button:hover {
  background: linear-gradient(180deg, #393855, #2b2a42);
  color: #c5c7ff;
}
.product-demos .new-quotes figcaption span,
.product-demos .new-quotes .quote-results .metric-label,
.product-demos .metrics-note,
.product-demos .new-sweep-plot figcaption,
.product-demos .scale-map figcaption,
.product-demos .alignment-trajectory figcaption { color: #a2a2ad; }
.product-demos .optimizer-browser-bar { background: #ffffff04; border-color: #ffffff0d; }
.product-demos .optimizer-prompt,
.product-demos .annotation-labeler,
.product-demos .optimizer-score,
.product-demos .function-example-input,
.product-demos .function-example-output,
.product-demos .function-example-output > code { background: #0d0d12; border-color: #ffffff14; }
.product-demos .annotation-choices button:hover:not(:disabled),
.product-demos .token-preset.is-selected {
  background: #7c7ff217; border-color: #9da0ff66; box-shadow: inset 0 0 0 1px #7c7ff22e;
}
.product-demos .annotation-choices button:first-child.is-selected { background: #14231e; color: #86efac; }
.product-demos .annotation-choices button:last-child.is-selected { background: #2a1b1d; color: #fca5a5; }
.product-demos .optimizer-deployment { background: #14231e; }
.product-demos .optimizer-content { scrollbar-color: #42424c #111114; }
.product-demos .hero-row-label,
.product-demos .hero-score-code,
.product-demos .hero-source-label,
.product-demos .hero-batch-fields,
.product-demos .hero-processed-label,
.product-demos .hero-spend-label,
.product-demos .scale-map-label,
.product-demos .build-svg-label,
.product-demos .build-svg-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.product-demos .hero-batch-packet,
.product-demos .scale-map-packet { fill: #9da0ff; }
.product-demos .scale-map-function { fill: #232235; stroke: #9da0ff66; }
.product-demos .scale-map-symbol { fill: #b1b3ff; }
.product-demos .scale-map-input { fill: #1c1c21; stroke: #ffffff24; }
.product-demos .scale-map-output { fill: #14231e; stroke: #86efac33; }
.product-demos .scale-map-output-lines { stroke: #86efac80; }
.product-demos .scale-map-path { stroke: #ffffff24; }
.product-demos .scale-map-lines { stroke: #ffffff40; }
.product-demos .new-quotes figcaption .quote-annotations { margin-top:18px; font-size:11px; color:#a2a2ad; }
.product-demos .new-quotes .quote-annotations b { color:#d1d1da; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; margin-right:3px; }
.product-demos .how-step-visual .optimizer-content { height:420px; }
.product-demos .sweep-vignette-panel { padding:20px; border-radius:16px; background:var(--panel); box-shadow:var(--panel-edge); }
.product-demos .sweep-vignette { display:block; width:100%; height:auto; overflow:visible; }
.product-demos .new-sweep-plot figcaption { font-size:11px; margin:12px 6px 0; }
.product-demos .how-step-visual .scale-map { padding:20px; }
@media(max-width:650px) {
.product-demos .sweep-vignette-panel { padding:12px; }
}
.product-demos .sweep-redesign { padding:24px; overflow:hidden; }
.product-demos .sweep-chart { display:block; width:100%; height:auto; overflow:visible; }
.product-demos .sweep-chart text { font-family:Inter,system-ui,sans-serif; }
.product-demos .sweep-grid { stroke:#ffffff0d; fill:none; }
.product-demos .sweep-axis { font-size:11px; fill:#9898a6; }
.product-demos .sweep-axis-title { font-size:11px; fill:#b0b0bd; }
.product-demos .sweep-area { fill:#9da0ff08; }
.product-demos .sweep-frontier { fill:none; stroke:#9da0ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.product-demos .sweep-dot { fill:#777785; stroke:#17171b; stroke-width:2; }
.product-demos .sweep-dot-front { fill:#b1b3ff; stroke:#17171b; stroke-width:2; }
.product-demos .sweep-selected-halo { fill:#9da0ff12; stroke:#9da0ff26; }
.product-demos .sweep-dot-selected { fill:#c5c7ff; stroke:#17171b; stroke-width:2; }
.product-demos .sweep-label-leader { fill:none; stroke:#9da0ff66; stroke-width:1; }
.product-demos .sweep-model-label { fill:#c5c7ff; font-size:12px; font-weight:500; }
.product-demos .sweep-chart-legend { display:flex; align-items:center; justify-content:center; gap:24px; color:#9898a6; font-size:11px; margin:6px 0 24px; }
.product-demos .sweep-chart-legend > span { display:flex; align-items:center; gap:7px; }
.product-demos .sweep-legend-line { width:16px; height:2px; background:#9da0ff; }
.product-demos .sweep-legend-dot { width:5px; height:5px; border-radius:50%; background:#777785; }
.product-demos .sweep-model-summary { padding:18px 20px; background:var(--raised); border-radius:12px; box-shadow:var(--raised-edge); }
.product-demos .sweep-summary-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#d1d1da; font-size:12px; font-weight:500; }
.product-demos .sweep-best-badge { color:#b1b3ff; font-size:10px; font-weight:400; }
.product-demos .sweep-summary-metrics { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px; }
.product-demos .sweep-summary-metrics > div { display:flex; flex-direction:column; gap:5px; }
.product-demos .sweep-summary-metrics strong { color:#ebebed; font-size:28px; line-height:1.15; font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.product-demos .sweep-summary-metrics strong > span { font-size:18px; color:#a2a2ad; margin-left:2px; }
.product-demos .sweep-summary-metrics > div > span { color:#a2a2ad; font-size:11px; }
.product-demos .new-sweep-plot.sweep-redesign figcaption { margin:16px 2px 0; color:#9898a6; font-size:10px; line-height:1.6; }
@media(max-width:650px) {
.product-demos .sweep-redesign { padding:16px; }
.product-demos .sweep-model-summary { padding:16px; }
.product-demos .sweep-chart-legend { font-size:10px; gap:16px; }
}
.product-demos #how-panel-align .optimizer-shell {
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
}
.product-demos #how-panel-align .optimizer-window {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.product-demos #how-panel-align .optimizer-browser-bar { display: none; }
.product-demos .sweep-redesign .sweep-frontier { stroke-width:2.5; }
.product-demos .sweep-redesign .sweep-frontier-underlay { stroke-width:9; opacity:.08; }
.product-demos .sweep-redesign .sweep-area { fill:#9da0ff0b; }
.product-demos .sweep-cost-guide { fill:none; stroke:var(--line); stroke-dasharray:2 5; }
.product-demos .sweep-logo-backing { fill:#1a1a1e; stroke:#ffffff1a; }
.product-demos .sweep-logo-point.is-frontier .sweep-logo-backing { stroke:#9da0ff; stroke-width:1.5; }
.product-demos .sweep-provider-logo.provider-openai { filter:invert(1); }
.product-demos .sweep-point-name { fill:#b1b3ff; font-size:10px; }
.product-demos .sweep-selection-card rect { fill:var(--faint); stroke:#9da0ff40; }
.product-demos .sweep-selection-name { fill:var(--ink); font-size:12px; font-weight:500; }
.product-demos .sweep-selection-detail { fill:var(--muted); font-size:10px; }
.product-demos .sweep-redesign .sweep-chart-legend { justify-content:space-between; gap:12px; margin:12px 0 0; font-size:10px; }
.product-demos .sweep-frontier-key { color:#b1b3ff; }
.product-demos .sweep-redesign .sweep-legend-line { width:22px; }
.product-demos .sweep-redesign figcaption { padding-top:12px; }

/* light-theme.css */
[data-theme="light"] .product-demos :is(p, figcaption, small, blockquote, label, summary, code, th, td, .site-header, .cloud-provider, .trajectory-legend, .sweep-chart-legend, .sweep-summary-heading, .stepper-label, .step-dot, .token-preset, .pricing-price, .function-card-copy, .annotation-progress) { color: var(--muted); }
[data-theme="light"] .product-demos :is(h1, h2, h3, h4, .new-quotes blockquote, .new-quotes figcaption strong, .new-quotes .quote-annotations b, .sweep-summary-metrics strong, .function-card-copy strong, .optimizer-prompt code, .annotation-card, .annotation-card p, .annotation-choices button, .stepper-label strong, .token-preset strong) { color: var(--ink); }
[data-theme="light"] .product-demos :is(.new-quotes figcaption span, .new-quotes .quote-metric > span, .sweep-summary-metrics > div > span, .sweep-summary-metrics strong > span, .optimizer-prompt-header, .optimizer-empty p, .optimizer-progress-label, .calculator-heading p, .token-preset span) { color: var(--muted); }
[data-theme="light"] .product-demos :is(.text-link, .new-case-request, .sweep-best-badge, .new-pricing .pricing-price strong, .new-pricing .calculator-price > output, .pricing-trial h3, .new-hosting-options h3, .hosting-network strong, .optimizer-score strong, .function-icon) { color: var(--blue); }
[data-theme="light"] .product-demos :is(.button-primary, .button-header-cta, .new-pricing .button-enterprise, .optimize-button) { color: #39316f; background: linear-gradient(#e8e5ff, #d4cef5); border-color: #6961c440; }
[data-theme="light"] .product-demos :is(.button-primary, .button-header-cta, .new-pricing .button-enterprise, .optimize-button):hover { color: #30285f; background: linear-gradient(#efecff, #dcd6fa); }
[data-theme="light"] .product-demos :is(.build-example, .optimizer-prompt, .annotation-labeler, .optimizer-score, .function-example-input, .function-example-output, .function-example-output > code, .hosting-network, .hosting-workload) { background: #f6f5f9; border-color: var(--line); }
[data-theme="light"] .product-demos .optimizer-prompt.is-updated { background: #f0edfc; border-color: #6961c440; }
[data-theme="light"] .product-demos .optimizer-deployment { background: #e8f4ec; color: #16814b; }
[data-theme="light"] .product-demos .annotation-choices button:first-child.is-selected { color: #16814b; background: #e8f4ec; }
[data-theme="light"] .product-demos .annotation-choices button:last-child.is-selected { color: #bd3744; background: #fae9eb; }
[data-theme="light"] .product-demos :is(.hero-row-track, .hero-row-arrow, .scale-map-path, .build-svg-arrow) { stroke: #bcbac9; }
[data-theme="light"] .product-demos :is(.hero-input-stack rect, .hero-model-box, .scale-map-input, .build-svg-card) { fill: #f0eff5; stroke: #cac7d5; }
[data-theme="light"] .product-demos :is(.hero-input-stack path, .scale-map-lines) { stroke: #9692a6; }
[data-theme="light"] .product-demos :is(.hero-sutro-box, .scale-map-function, .build-svg-function) { fill: #e8e4fa; stroke: #a69dd6; }
[data-theme="light"] .product-demos :is(.hero-with-label, .hero-sutro-wordmark, .hero-sutro-symbol, .hero-function-version, .scale-map-symbol, .build-svg-symbol, .trajectory-callout, .sweep-model-label) { fill: var(--blue); }
[data-theme="light"] .product-demos :is(.hero-without-label, .hero-spend-label, .hero-source-label, .hero-score-code, .hero-processed-label, .scale-map-label, .build-svg-label, .build-svg-file, .build-svg-input-text, .build-svg-json, .trajectory-axis-label, .sweep-axis, .sweep-axis-title) { fill: var(--muted); }
[data-theme="light"] .product-demos :is(.hero-score-card, .hero-batch-result, .scale-map-output) { fill: #e9f3ed; stroke: #16814b30; }
[data-theme="light"] .product-demos .scale-map-output-lines { stroke: #16814b80; }
[data-theme="light"] .product-demos :is(.sweep-grid, .trajectory-grid) { stroke: #26282d10; }
[data-theme="light"] .product-demos :is(.sweep-frontier, .trajectory-sutro) { stroke: #6961c4; }
[data-theme="light"] .product-demos .sweep-area { fill: #6961c408; }
[data-theme="light"] .product-demos :is(.sweep-dot-front, .sweep-dot-selected, .trajectory-point) { fill: #6961c4; stroke: #faf9f6; }
[data-theme="light"] .product-demos .sweep-dot { fill: #92909f; stroke: #faf9f6; }
[data-theme="light"] .product-demos .sweep-selected-halo { fill: #6961c412; stroke: #6961c430; }
[data-theme="light"] .product-demos .sweep-legend-line { background: #6961c4; }
[data-theme="light"] .product-demos .sweep-label-leader { stroke: #6961c480; }
[data-theme="light"] .product-demos .diff-line.is-removed { background: #f9e9ec; color: #ad3040; }
[data-theme="light"] .product-demos .diff-line.is-added { background: #e6f3eb; color: #137341; }
[data-theme="light"] .product-demos :is(.deployment-heading, .deployment-cost) { color: #16814b; }
[data-theme="light"] .product-demos .deployment-heading > span { background: #d7ebdf; }
[data-theme="light"] .product-demos .deployment-endpoint { border-color: #16814b25; }
[data-theme="light"] .product-demos .deployment-endpoint :is(span, code) { color: var(--ink); }
[data-theme="light"] .product-demos .scale-map-heading { border-color: var(--line); }
[data-theme="light"] .product-demos .scale-map-heading > span { color: var(--blue); background: #e8e4fa; }
[data-theme="light"] .product-demos .sweep-logo-backing { fill:#fff; stroke:#26282d20; }
[data-theme="light"] .product-demos .sweep-logo-point.is-frontier .sweep-logo-backing { stroke:#6961c4; }
[data-theme="light"] .product-demos .sweep-provider-logo { filter:none; }
[data-theme="light"] .product-demos :is(.sweep-point-name, .sweep-frontier-key) { color:#5954b5; fill:#5954b5; }
[data-theme="light"] .product-demos .sweep-selection-card rect { fill:#fff; stroke:#6961c440; }
[data-theme="light"] .product-demos .sweep-redesign .sweep-area { fill:#6961c408; }
[data-theme="light"] .product-demos :is(.site-footer, .button-login, .metrics-note, .new-sweep-plot figcaption, .scale-map figcaption, .alignment-trajectory figcaption) { color:var(--muted); }

/* new-polished.css */
.product-demos .scale-map-record-count { margin-top:12px; color:var(--muted); font-size:10px; }
.product-demos #how-panel-scale .scale-map-heading { flex-wrap:wrap; }
.product-demos #how-panel-scale .scale-map-heading code { min-width:0; overflow-wrap:anywhere; }
.product-demos .new-quotes figcaption .quote-annotations { margin-top:14px; }
[data-theme="light"] .product-demos .annotation-choices button p { color:var(--muted); }
[data-theme="light"] .product-demos .annotation-labeler > span { color:var(--muted); }
.product-demos .sweep-provider-logo.provider-gemma { filter:brightness(0) invert(1); }
.product-demos .sweep-card-surface { fill:#242429; stroke:#ffffff12; }
.product-demos .sweep-pick-badge { stroke:none; }
.product-demos .sweep-pick-badge.best-badge { fill:#2aefb118; }
.product-demos .sweep-pick-badge.value-badge { fill:#9da0ff20; }
.product-demos .sweep-pick-text { fill:var(--polish-accent); font-size:9px; font-weight:500; }
.product-demos .sweep-best-card .sweep-pick-text,
.product-demos .sweep-quality-score { fill:var(--polish-positive); }
.product-demos .sweep-recommendation-card .sweep-selection-name { font-size:11px; }
.product-demos #how-panel-align .optimizer-shell { padding:19px; border:1px solid var(--line); box-shadow:none; overflow:hidden; }
.product-demos #how-panel-align .optimizer-content { padding:0; height:400px; min-height:400px; scrollbar-gutter:auto; }
.product-demos #how-panel-align .optimizer-prompt { background:transparent; border:0; border-radius:0; box-shadow:none; }
.product-demos #how-panel-align .optimizer-prompt-header { padding:0 0 10px; color:var(--muted); font-size:8px; gap:8px; }
.product-demos #how-panel-align .optimizer-prompt code { padding:0 0 14px; color:var(--ink); font-size:10px; line-height:1.6; }
.product-demos #how-panel-align .optimizer-prompt-header .is-model-tag { border:0; padding:0; background:none; color:var(--polish-accent); }
.product-demos #how-panel-align #diff-status { font-size:8px; }
.product-demos #how-panel-align .optimizer-progress { margin:0 0 12px; padding-top:12px; border-top:1px solid var(--line); font-size:9px; }
.product-demos #how-panel-align .annotation-card { padding:16px; min-height:240px; background:var(--raised); border:0; border-radius:10px; box-shadow:var(--panel-edge); }
.product-demos #how-panel-align .annotation-card h4 { font-size:18px; line-height:1.35; margin-bottom:18px; }
.product-demos #how-panel-align .annotation-labeler { padding:0; background:none; }
.product-demos #how-panel-align .annotation-labeler > span:not(.annotation-cursor) { font-size:9px; font-weight:400; margin-bottom:12px; }
.product-demos #how-panel-align .annotation-labeler > span em { font-weight:400; }
.product-demos #how-panel-align .annotation-choices button { padding:10px; border:0; border-radius:7px; background:#ffffff04; box-shadow:inset 0 0 0 1px var(--line); }
.product-demos #how-panel-align .annotation-choices button span { font-size:9px; line-height:1.5; color:var(--muted); }
.product-demos #how-panel-align .annotation-choices button.is-selected { background:#9da0ff0d; box-shadow:inset 0 0 0 1px #9da0ff40; }
.product-demos #how-panel-align .optimization-ready { min-height:0; padding:24px 16px; margin-top:12px; background:var(--raised); box-shadow:var(--panel-edge); border-radius:10px; }
.product-demos #how-panel-align .ready-check { width:32px; height:32px; border-radius:0; background:none; margin-bottom:12px; }
.product-demos #how-panel-align .optimization-ready strong { font-size:14px; font-weight:500; }
.product-demos #how-panel-align .optimization-ready p { font-size:11px; line-height:1.6; margin:8px auto 18px; max-width:34ch; }
.product-demos #how-panel-align .optimize-button { background:linear-gradient(#cbd2fc,#aab3f3); color:#121318; border:0; box-shadow:inset 0 1px 0 #ffffff70,0 1px 2px #0002; min-height:36px; border-radius:6px; font-weight:500; }
.product-demos #how-panel-align .optimizer-content.is-optimizing .optimizer-prompt code { min-height:148px; }
.product-demos #how-panel-align .diff-line { padding:4px 8px; }
.product-demos #how-panel-align .diff-line.is-removed { background:#fca5a50a; }
.product-demos #how-panel-align .diff-line.is-added { background:#86efac08; }
.product-demos #how-panel-align .optimizer-score { padding:10px 0; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.product-demos #how-panel-align .optimizer-score strong { font-size:14px; }
.product-demos #how-panel-align .optimizer-score span { font-size:8px; font-weight:400; }
.product-demos #how-panel-align .optimizer-deployment { background:var(--raised); border:0; box-shadow:none; border-radius:10px; padding-inline:14px; transition:none; }
.product-demos #how-panel-align .optimizer-deployment.is-visible { max-height:160px; padding:14px; margin:12px 0 0; border:0; box-shadow:var(--panel-edge); }
.product-demos #how-panel-align .deployment-heading { margin-bottom:12px; font-size:11px; color:var(--ink); gap:7px; }
.product-demos #how-panel-align .deployment-heading > span { color:var(--polish-positive); background:none; font-size:12px; }
.product-demos #how-panel-align .deployment-heading > strong { font-weight:500; }
.product-demos #how-panel-align .deployment-heading > small { margin-left:auto; color:var(--muted); font:9px ui-monospace,monospace; }
.product-demos #how-panel-align .deployment-endpoint { grid-template-columns:38px minmax(0,1fr); gap:10px; border:0; min-height:28px; }
.product-demos #how-panel-align .deployment-endpoint > span { color:var(--muted); font-size:8px; font-weight:400; text-transform:none; letter-spacing:0; }
.product-demos #how-panel-align .deployment-endpoint code { font-size:9px; color:var(--ink); overflow-wrap:anywhere; }
[data-theme="light"] .product-demos .sweep-card-surface { fill:#eeedf2; stroke:#26282d0d; }
[data-theme="light"] .product-demos .sweep-provider-logo.provider-gemma { filter:none; }
[data-theme="light"] .product-demos #how-panel-align .annotation-choices button { background:#fff7; }
[data-theme="light"] .product-demos #how-panel-align .diff-line.is-removed { background:#bd37440a; }
[data-theme="light"] .product-demos #how-panel-align .diff-line.is-added { background:#16814b08; }
@media(max-width:650px) {
.product-demos #how-panel-align .optimizer-shell { padding:15px; }
.product-demos #how-panel-align .optimizer-content { height:440px; min-height:440px; }
.product-demos #how-panel-align .annotation-card h4 { font-size:17px; }
.product-demos #how-panel-align .deployment-heading > small { font-size:8px; }
}
.product-demos .sweep-provider-logo.provider-gemma { filter:none; }
[data-theme="light"] .product-demos .sweep-provider-logo.provider-gemma { filter:brightness(0); }
.product-demos #how-panel-align .optimizer-content.is-optimizing .optimizer-prompt code { height:168px; min-height:168px; max-height:168px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.product-demos #how-panel-align .optimizer-content.is-optimizing .optimizer-progress { display:none; }
.product-demos .scale-map-packet { animation-duration:2.8s; animation-timing-function:cubic-bezier(.45,0,.55,1); animation-delay:calc(var(--row) * -.4s); }
.product-demos .benefit-frontier-chart .sweep-frontier { stroke-width:2; }
.product-demos .benefit-frontier-chart .sweep-frontier-underlay { stroke-width:7; opacity:.08; }
.product-demos .benefit-frontier-chart .sweep-area { fill:var(--polish-accent); fill-opacity:.04; }
.product-demos #how-panel-align .optimizer-demo-block { position:relative; padding:1px 0 40px; }
.product-demos #how-panel-align .optimizer-shell { width:calc(100% - 40px); border-radius:14px; background:var(--paper); background-clip:padding-box; }
.product-demos #how-panel-align .optimizer-window { border-radius:0; overflow:visible; }
.product-demos #how-panel-align .optimizer-content { border-radius:0; }
.product-demos #how-panel-align .optimizer-deployment { position:absolute; right:0; bottom:0; width:calc(100% - 48px); z-index:2; visibility:hidden; pointer-events:none; }
.product-demos #how-panel-align .optimizer-deployment.is-visible { visibility:visible; max-height:none; margin:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 8px 24px #26282d12; }
@media(max-width:650px) {
.product-demos #how-panel-align .optimizer-shell { width:calc(100% - 20px); }
.product-demos #how-panel-align .optimizer-deployment { width:calc(100% - 24px); }
.product-demos #how-panel-align .deployment-heading { flex-wrap:wrap; }
}
.product-demos .benefit-annotation-badge rect { fill:var(--paper); stroke:var(--polish-accent); stroke-width:1; }
.product-demos .benefit-annotation-badge text { fill:var(--polish-accent); font-size:9px; font-weight:500; }
.product-demos .benefit-annotation-label { fill:var(--muted); font-size:9px; }
.product-demos .benefit-frontier-chart :is(.sweep-axis, .sweep-axis-title, .sweep-selection-name, .sweep-selection-detail) { font-size:14.444444px; }
.product-demos .benefit-frontier-chart .sweep-selection-name { font-weight:400; }
.product-demos .benefit-frontier-chart .sweep-pick-text { font-size:13px; }
.product-demos .benefit-frontier-chart .sweep-card-surface { fill:var(--paper); stroke:var(--line); }
.product-demos .benefit-quality-chart .benefit-quality-line,
.product-demos .benefit-frontier-chart .sweep-frontier:not(.sweep-frontier-underlay) { stroke-width:2px; vector-effect:non-scaling-stroke; }
.product-demos #how-panel-align .annotation-card.is-entering { animation:annotation-card-enter 200ms cubic-bezier(.22,1,.36,1) both; }
.product-demos #how-panel-align .annotation-card.is-leaving { opacity:0; transform:translateX(-12px); }
@keyframes annotation-card-enter {
  from { opacity:0; transform:translateX(12px); }
  to { opacity:1; transform:translateX(0); }
}
@media(prefers-reduced-motion:reduce) {
.product-demos #how-panel-align .annotation-card.is-entering { animation:none; }
.product-demos #how-panel-align .annotation-card.is-leaving { transform:none; }
}
.product-demos #how-panel-align #optimizer-prompt-text { overflow-anchor:none; }
.product-demos #how-panel-align .diff-line { transition:background-color 240ms ease, color 240ms ease; }
.product-demos #how-panel-align .diff-line.is-diff-entering { animation:prompt-diff-enter 280ms cubic-bezier(.22,1,.36,1) var(--diff-delay,0ms) both; }
.product-demos #how-panel-align .diff-line.is-diff-leaving { animation:prompt-diff-leave 140ms ease-out both; }
.product-demos #how-panel-align .diff-line.is-diff-shifting { animation:prompt-diff-shift 280ms cubic-bezier(.22,1,.36,1) both; }
@keyframes prompt-diff-enter {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes prompt-diff-leave {
  to { opacity:0; transform:translateY(-4px); }
}
@keyframes prompt-diff-shift {
  from { transform:translateY(var(--diff-shift)); }
  to { transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
.product-demos #how-panel-align .diff-line.is-diff-entering,
.product-demos #how-panel-align .diff-line.is-diff-leaving,
.product-demos #how-panel-align .diff-line.is-diff-shifting { animation:none; }
}
.product-demos #how-panel-align .optimizer-demo-block { min-height:440px; padding:1px 0 0; }
.product-demos #how-panel-align .optimizer-content { height:auto; min-height:0; overflow:visible; }
.product-demos #how-panel-align .optimizer-deployment { display:none; position:relative; right:auto; bottom:auto; margin:-12px 0 0 auto; }
.product-demos #how-panel-align .optimizer-deployment.is-visible { display:block; margin:-12px 0 0 auto; }
.product-demos #how-panel-align .deployment-endpoint { grid-template-columns:38px auto minmax(0,1fr); gap:8px; }
.product-demos #how-panel-align .deployment-endpoint .deployment-method { display:inline-flex; align-items:center; justify-content:center; padding:0 5px; border-radius:4px; background:#9da0ff18; color:var(--polish-accent); font:500 8px/16px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0; }
.product-demos #how-panel-align .annotation-card h4 { font-size:14px; margin-bottom:8px; }
.product-demos .annotation-card .annotation-record { margin:0 0 14px; padding:10px; max-height:116px; overflow-y:auto; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--muted); font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.product-demos #how-panel-sweep .new-sweep-plot { position:relative; }
.product-demos #how-panel-sweep .sweep-logo-point { cursor:pointer; outline:none; }
.product-demos #how-panel-sweep .sweep-logo-point:is(.is-point-highlighted, :focus-visible) .sweep-logo-backing { stroke:var(--ink); stroke-width:2; }
.product-demos #how-panel-sweep .is-inspecting .sweep-recommendation-card,
.product-demos #how-panel-sweep .is-inspecting .sweep-chart > .sweep-label-leader { visibility:hidden; }
.product-demos .sweep-model-tooltip {
  position:absolute;
  z-index:2;
  display:grid;
  gap:5px;
  width:min(240px, calc(100% - 20px));
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--line), 0 8px 24px #00000018;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  pointer-events:none;
}
.product-demos .sweep-model-tooltip[hidden] { display:none; }
.product-demos .sweep-model-tooltip strong { color:var(--ink); font-size:13px; font-weight:500; }
.product-demos .sweep-model-tooltip-heading { display:flex; align-items:center; gap:8px; }
.product-demos .sweep-model-tooltip-logo { width:24px; height:24px; flex:none; color:var(--ink); }