/* Review-only space palette. Load after visual-options.css. */
html[data-visual="rings"] {
  --paper: #f7f8f8;
  --ink: #17242d;
  --muted: #63717a;
  --pine: #223745;
  --line: #dbe1e5;
  --blue: #6d8fa8;
  --surface: #edf0f2;
  --surface-soft: #f1f4f5;
  --surface-raised: #fdfefe;
  --slate: #536d80;
  --silver: #d7e2e9;
  --space: #071118;
}

/* Shared controls and navigation. */
html[data-visual="rings"] ::selection { background: #d4e1ea; color: #172c3a; }
html[data-visual="rings"] :is(button, a, input, textarea):focus-visible { outline-color: #7a9ab1; }
html[data-visual="rings"] .button:hover { background: #344f60; box-shadow: 0 6px 16px #142b3b17; }
html[data-visual="rings"] .button-light:hover { background: #e1e8ed; }
html[data-visual="rings"] .header.scrolled { color: var(--ink); background: #f7f8f8f5; border-color: #17242d14; box-shadow: 0 1px 0 #17242d12; }
html[data-visual="rings"] .header:not(.scrolled) { color: #f1f5f7; background: #08131d3d; border-color: #e9f0f621; }
html[data-visual="rings"] .header:not(.scrolled) .button { background: #eff3f5; color: #243b4b; }
html[data-visual="rings"] .header:not(.scrolled) .button:hover { background: #dce6ed; box-shadow: 0 6px 20px #06111c24; }
html[data-visual="rings"] .header:not(.scrolled) .menu-toggle span { background: #f1f5f7; }
html[data-visual="rings"] .mobile-nav { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: 0 20px 30px #152a3915; }
html[data-visual="rings"] .mobile-nav a { border-color: var(--line); }
html[data-visual="rings"] .introduction > .eyebrow { color: #53626d; }

/* The product illustration uses quiet silver surfaces and slate selections. */
html[data-visual="rings"] .product-section { background: var(--surface); }
html[data-visual="rings"] .mode-switch { background: #e4e9ec; border-color: #d2dce2; }
html[data-visual="rings"] .mode-switch button[aria-selected="true"] { color: var(--ink); background: var(--surface-raised); box-shadow: 0 1px 5px #17304414; }
html[data-visual="rings"] .mode-switch button:hover { color: #33556d; }
html[data-visual="rings"] .app-window { background: #fbfcfd; border-color: #cfd9e0; box-shadow: 0 24px 58px -20px #142c4120; }
html[data-visual="rings"] .app-topbar { background: var(--surface-raised); border-color: var(--line); }
html[data-visual="rings"] .app-sidebar { background: var(--surface-soft); border-color: var(--line); }
html[data-visual="rings"] .prompt-card { background: var(--surface-raised); border-color: var(--line); }
html[data-visual="rings"] .prompt-avatar { background: #e4eaee; color: #5e7180; }
html[data-visual="rings"] :is(.concept-label, .attachment, .app-content-footer, .develop-main, .experiment-steps > div, .process article) { border-color: var(--line); }
html[data-visual="rings"] .app-breadcrumb > span:last-child { color: #435663; }
html[data-visual="rings"] :is(
  .app-breadcrumb,
  .concept-label,
  .app-sidebar > .small-label,
  .attachment,
  .project-trail button,
  .project-trail button > span,
  .sidebar-bottom,
  .content-heading .small-label,
  .example-tag,
  .stage-description,
  .direction p,
  .direction .card-category,
  .app-content-footer > span,
  .demo-caption,
  .demo-caption button,
  .develop-main .small-label,
  .develop-notes .small-label,
  .experiment-card .small-label,
  .develop-main p,
  .develop-notes p,
  .experiment-steps p,
  .process p
) { color: var(--muted); }
html[data-visual="rings"] .project-trail button:hover { background: #e6ecef; }
html[data-visual="rings"] .project-trail button.active { color: #304b5e; background: #dfe8ee; }
html[data-visual="rings"] .project-trail button.active > span { color: inherit; }
html[data-visual="rings"] .project-trail button > i { background: #6a879a; }
html[data-visual="rings"] .direction { background: #fcfdfe; border-color: var(--line); }
html[data-visual="rings"] .direction:hover { border-color: #96abba; }
html[data-visual="rings"] .direction.selected { border-color: #7995a9; background: #eef3f7; }
html[data-visual="rings"] .direction .direction-symbol { color: #58758a; background: #e2ebf1; }
html[data-visual="rings"] .direction:nth-child(2) .direction-symbol { color: #657584; background: #e5eaef; }
html[data-visual="rings"] .direction:nth-child(3) .direction-symbol { color: #777d87; background: #eaecef; }
html[data-visual="rings"] .direction-tick { border-color: #cbd7e0; }
html[data-visual="rings"] .selected .direction-tick { color: #fff; background: #56788f; border-color: #56788f; }
html[data-visual="rings"] .inline-action { background: var(--pine); }
html[data-visual="rings"] .inline-action:hover { background: #3a586b; }
html[data-visual="rings"] .caption-divider { background: #ccd8e0; }
html[data-visual="rings"] :is(.develop-panel, .experiment-card) { background: #f0f4f7; border-color: #d7e1e8; }
html[data-visual="rings"] .assumption-label { background: #e2eaf0; color: #586f80; }
html[data-visual="rings"] .experiment-title > span { border-color: #b8cad7; color: #638098; }
html[data-visual="rings"] .experiment-steps strong { color: #526f84; }
html[data-visual="rings"] .process-number { color: #738897; }
html[data-visual="rings"] .process-number > span { color: #577386; }

/* Graphite and illuminated silver echo the planetary surface and its rings. */
html[data-visual="rings"] .research { color: #f1f4f5; background: #252f34; }
html[data-visual="rings"] .research .eyebrow { color: #bccbd2; }
html[data-visual="rings"] .research-intro > p { color: #d0d9de; font-size: 15px; }
html[data-visual="rings"] .research .text-link { color: #e6edf1; border-color: #a3b7c280; }
html[data-visual="rings"] .art-coordinate { color: #bccbd2; font-size: 10px; }
html[data-visual="rings"] :is(.research-metrics, .research-definition, .metric, .metric:nth-child(3)) { border-color: #a3b7c238; }
html[data-visual="rings"] .research-definition .small-label { color: #bccbd2; font-size: 10px; }
html[data-visual="rings"] .research-definition > span:last-child { color: #c4d0d7; font-size: 12px; }
html[data-visual="rings"] .metric small { color: #bccbd2; font-size: 11px; }
html[data-visual="rings"] .metric > span { color: #d0d9de; }
/* Labels occupy their own margin; no text or backplates cross the diagram. */
.research-stages { position: absolute; inset: 0; pointer-events: none; }
.research-stage { position: absolute; left: 0; display: grid; grid-template-columns: 17px auto; gap: 7px; align-items: start; transform: translateY(-50%); color: #bccbd2; font-size: 12px; line-height: 1.5; transition: color .5s ease; }
.research-stage-number { padding-top: 2px; color: #8fa6b4; font-size: 9px; line-height: 1.65; font-variant-numeric: tabular-nums; transition: color .5s ease; }
.research-art[data-stage="0"] .research-stage[data-layer="0"],
.research-art[data-stage="1"] .research-stage[data-layer="1"],
.research-art[data-stage="2"] .research-stage[data-layer="2"],
.research-art[data-stage="complete"] .research-stage { color: #edf5f9; }
.research-art[data-stage="0"] .research-stage[data-layer="0"] .research-stage-number,
.research-art[data-stage="1"] .research-stage[data-layer="1"] .research-stage-number,
.research-art[data-stage="2"] .research-stage[data-layer="2"] .research-stage-number { color: #cce3ef; }
@media (min-width: 541px) and (max-width: 800px) {
  .research-top { grid-template-columns: 1fr; gap: 0; }
  .research-intro { padding-bottom: 12px; }
  .research-art { min-height: 360px; height: 360px; margin: 0; }
  .research-art .art-coordinate { top: 20px; }
}
@media (max-width: 600px) {
  .research-stage { left: 12px; grid-template-columns: 14px auto; gap: 5px; font-size: 11px; line-height: 1.45; }
  .research-stage-number { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .research-stage, .research-stage-number { transition: none; }
}
@media (max-width: 540px) {
  html[data-visual="rings"] .research-intro > p { font-size: 14px; }
  html[data-visual="rings"] .research-definition > span:last-child { font-size: 11px; }
}

/* Access options, forms and proof dialogs. */
html[data-visual="rings"] :is(.access-heading > p, .access-option > span:nth-child(2) > span, .access-note) { color: var(--muted); }
html[data-visual="rings"] :is(.access-option, .access-option:nth-child(4), .access-icon) { border-color: var(--line); }
html[data-visual="rings"] .access-option:hover { color: #3d6078; }
html[data-visual="rings"] :is(.access-icon, .option-arrow) { color: #667f91; }
html[data-visual="rings"] .dialog {
  width: calc(100% - 48px); max-width: 740px; padding: 54px 56px;
  max-height: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain;
  border-color: #d1dde5; box-shadow: 0 30px 100px #07152240;
}
html[data-visual="rings"] .proof-dialog { max-width: 820px; }
html[data-visual="rings"] .dialog::backdrop { background: #09172399; }
html[data-visual="rings"] .dialog-close {
  position: sticky; float: right; top: -30px; right: auto; margin: -30px -32px 0 0;
  width: 44px; height: 44px; z-index: 2; background: #e4ebf0; color: #3d5667;
}
html[data-visual="rings"] .dialog h2 { font-size: 48px; line-height: 1.12; }
html[data-visual="rings"] .dialog h2 .heading-accent { color: #506f85; }
html[data-visual="rings"] .dialog :is(.eyebrow, label, small, table caption),
html[data-visual="rings"] .dialog > :is(p, ul) { color: var(--muted); }
html[data-visual="rings"] .dialog > :is(p, ul),
html[data-visual="rings"] .dialog #access-result p { font-size: 16px; line-height: 1.7; }
html[data-visual="rings"] .dialog :is(.methodology, table) { font-size: 14px; }
html[data-visual="rings"] .dialog .eyebrow { font-size: 11px; }
html[data-visual="rings"] .dialog :is(label, small, table caption) { font-size: 12px; }
html[data-visual="rings"] .dialog label { margin-bottom: 8px; }
html[data-visual="rings"] .dialog :is(.button, .text-link) { font-size: 14px; }
html[data-visual="rings"] .dialog .button { min-height: 50px; }
html[data-visual="rings"] .dialog > .button { margin-top: 22px; }
html[data-visual="rings"] .dialog #access-result .request-email { color: var(--muted); }
html[data-visual="rings"] .dialog :is(input, textarea) { padding: 14px; font-size: 16px; background: var(--surface-raised); border-color: #cddbe5; color: #2e4b60; }
html[data-visual="rings"] .dialog :is(input, textarea)::placeholder { color: #758693; }
html[data-visual="rings"] .dialog :is(th, td) { padding: 13px 9px; border-color: var(--line); }
html[data-visual="rings"] .dialog tbody tr:first-child { color: #385b73; background: #e7eff5; }

/* Keep the contact address visible alongside the existing footer details. */
html[data-visual="rings"] .footer .footer-contact { flex-direction: column; align-items: flex-start; gap: 5px; }
html[data-visual="rings"] .footer .footer-contact-label { display: flex; gap: 16px; color: #e8eff4; }
html[data-visual="rings"] .footer .footer-email { font-size: 13px; color: #d6e2eb; letter-spacing: 0; }
html[data-visual="rings"] .footer .footer-contact:hover .footer-email { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 540px) {
  html[data-visual="rings"] .dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); padding: 32px 24px; }
  html[data-visual="rings"] .dialog-close { top: -20px; margin: -20px -12px 0 0; }
  html[data-visual="rings"] .dialog h2 { font-size: clamp(30px, 9vw, 38px); }
  html[data-visual="rings"] .dialog .eyebrow { max-width: calc(100% - 35px); font-size: 10px; line-height: 1.6; }
  html[data-visual="rings"] .dialog > :is(p, ul) { font-size: 15px; }
  html[data-visual="rings"] .dialog .methodology { font-size: 13px; }
  html[data-visual="rings"] .dialog table { font-size: 12px; }
  html[data-visual="rings"] .dialog :is(th, td) { padding: 11px 5px; }
  html[data-visual="rings"] .footer .footer-email { font-size: 12px; }
}
html[data-visual="rings"] .preview-badge { color: #667d8d; background: #f7f8f8ed; border-color: #cedbe4; box-shadow: 0 2px 12px #102b3b0c; }
html[data-visual="rings"] .preview-badge > span:last-child { color: #748894; border-color: #c4d3de; }
html[data-visual="rings"] .preview-badge .little-dot { background: #6f92ab; }

@media (max-width: 540px) {
  html[data-visual="rings"] .project-trail button.active { background: transparent; border-bottom-color: #6f8da3; }
}

/* A quiet path from the product to its public research and evidence. */
html[data-visual="rings"] .footer-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
html[data-visual="rings"] .footer-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 12px; color: #d6e2eb; white-space: nowrap; }
html[data-visual="rings"] .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
html[data-visual="rings"] .footer-github svg { width: 16px; height: 16px; flex-shrink: 0; }
html[data-visual="rings"] .footer .footer-contact { display: flex; margin-left: 0; font-size: 11px; }
@media (max-width: 540px) {
 html[data-visual="rings"] .footer { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; }
 html[data-visual="rings"] .footer>p { margin: 0; }
 html[data-visual="rings"] .footer-links { grid-column: 1 / -1; margin-left: 0; gap: 26px; }
 html[data-visual="rings"] .footer>span { margin-left: 0; text-align: right; }
}

/* Keep small explanatory text comfortably legible against silver surfaces. */
html[data-visual="rings"] .product-section :is(.demo-caption, .demo-caption button) { color: #53626d; font-size: 12px; }
html[data-visual="rings"] .process-number { color: #536d80; }
html[data-visual="rings"] .code-icon { color: #536d80; }
html[data-visual="rings"] .demo-caption button { min-height: 28px; }
@media (max-width: 540px) { html[data-visual="rings"] :is(.demo-caption, .demo-caption button) { font-size: 11px; } .demo-caption > span { max-width: 195px; } }

/* Strong keyboard focus on both the silver surfaces and dark artwork. */
html[data-visual="rings"] :is(button, a, input, textarea, summary):focus-visible { outline-color: #57778c; }
html[data-visual="rings"] :is(.hero, .research, .site-ending, .header:not(.scrolled)) :is(button, a):focus-visible { outline-color: #c6e0ef; }