/* AI illustration art direction: Optical instrument + Frosted precision.
   This stylesheet is intentionally local to ai.html. The artwork is decorative,
   static, and separate from the existing product examples and their controls. */
.ai-stage {
  --art-text: #f6f7ff;
  --art-secondary: #d5dced;
  --art-muted: #bdc9df;
  --art-panel: linear-gradient(135deg, #293147, #151c2d);
  --art-query: #303a54;
  --art-line: #66799980;
  --art-inset: #101827;
  --art-highlight: #5b689452;
  --art-lens-x: -320px;
  --art-lens-y: -100px;
  --art-lens-rotate: -28deg;
  color: var(--art-text);
  border: 1px solid #d4daea;
  border-radius: 18px;
}
.ai-stage--optical {
  background: radial-gradient(ellipse at 76% 85%, #303354 0, transparent 64%), #080e1c;
  border-color: #283449;
}
.ai-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ai-art > span { display: block; position: absolute; }
.ai-art__lens {
  width: 490px; height: 650px;
  left: var(--art-lens-x); top: var(--art-lens-y);
  transform: rotate(var(--art-lens-rotate)); border-radius: 50%;
  border: 2px solid #aabfd27a;
  background: linear-gradient(110deg, #0d192e 20%, #455c808f 53%, #141827 67%);
  box-shadow: inset -13px 0 9px #7983bb66, inset -20px 0 #070c1966,
    12px 0 #152239, 14px 0 1px #90acbd99, 23px 0 #070c19,
    24px 0 1px #7b899f99, 36px 0 25px #777ddb36;
}
.ai-art__etch {
  width: 515px; height: 675px;
  left: calc(var(--art-lens-x) - 13px); top: calc(var(--art-lens-y) - 12px);
  transform: rotate(var(--art-lens-rotate)); border-radius: 50%;
  background: repeating-conic-gradient(from 1deg, #bac9ec99 0deg .15deg, transparent .15deg 3deg);
  -webkit-mask: radial-gradient(ellipse, transparent 66%, #000 66.2% 67%, transparent 67.3%);
  mask: radial-gradient(ellipse, transparent 66%, #000 66.2% 67%, transparent 67.3%);
  opacity: .7;
}
.ai-art__plate {
  width: 120%; height: 45%; bottom: -36%; left: 6%;
  transform: rotate(-22deg); border-radius: 45%;
  background: linear-gradient(#9c91d188, #171e35 7%, #080c18 70%);
  box-shadow: 0 -1px 1px #ced0ff, 0 -8px 35px #6d7dce44;
}
.ai-art__grid {
  inset: 0;
  background-image: linear-gradient(#a4b7d60b 1px, transparent 1px), linear-gradient(90deg, #a4b7d60b 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 65%);
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}

/* Pale, cut-glass planes for the workspace. Different geometry from the optics. */
.ai-stage--frost {
  background: radial-gradient(ellipse at 95% 80%, #b3bedb, transparent 65%), linear-gradient(135deg, #edf1f8, #cdd4e6);
}
.ai-stage--frost .ai-art__lens {
  width: 42%; height: 160%; top: -25%; left: -20%;
  border-radius: 52px; transform: rotate(28deg);
  border: 1px solid #ffffffbb;
  background: linear-gradient(90deg, #ccd3e91f, #ffffff99);
  box-shadow: 20px 0 24px #6a7b9d1f;
}
.ai-stage--frost .ai-art__plate {
  width: 44%; height: 160%; top: -20%; right: -19%; bottom: auto; left: auto;
  border-radius: 52px; transform: rotate(28deg); border: 1px solid #ffffffdf;
  background: linear-gradient(90deg, #ffffffec, #edf1ff22 5%, #95a5cd3d 90%, #ffffffcc);
  box-shadow: -22px 0 45px #6274a026, inset 7px 0 9px #ffffffb3;
}
.ai-stage--frost .ai-art__etch {
  inset: 30px 30px auto auto; width: 35%; height: 30%;
  border-radius: 0; border-top: 1px solid #70819d66; border-right: 1px solid #70819d66;
  background: none; transform: none; -webkit-mask: none; mask: none;
}
.ai-stage--frost .ai-art__grid {
  background-image: linear-gradient(#4d648517 1px, transparent 1px), linear-gradient(90deg, #4d648517 1px, transparent 1px);
}

/* Conversation: generous optics at the left, large readable chat in front. */
.ai-stage--conversation { padding: 48px 30px 40px 58px; }
.ai-stage .ai-chatcard, .ai-stage .ai-diff__pics,
.ai-stage .ai-chat, .ai-stage .ai-diff__vis,
.ai-stage .ai-chat__turn, .ai-stage .ai-appr { grid-template-columns: minmax(0, 1fr); }
.ai-stage .ai-chat, .ai-stage .ai-diff__vis, .ai-stage .ai-chat__turn, .ai-stage .ai-appr { min-width: 0; }
.ai-stage .ai-chat__turn {
  background: var(--art-panel); color: var(--art-text); border-color: var(--art-line);
  box-shadow: 0 20px 44px #00000030, inset 0 1px #ffffff15;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ai-stage .ai-chat__q {
  background: var(--art-query); color: var(--art-text); border-color: var(--art-line);
  box-shadow: 0 8px 24px #00000015;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ai-stage .ai-chat__status, .ai-stage .ai-chat__st { color: var(--art-secondary); }
.ai-stage .ai-chat__a { color: var(--art-text); }
.ai-stage .ai-chat__note, .ai-stage .ai-draft__toggle,
.ai-stage .ai-chip em, .ai-stage .ai-rec__kind,
.ai-stage .ai-rec__facts, .ai-stage .ai-chat__table th { color: var(--art-muted); }
.ai-stage .ai-chip { height: auto; min-height: 25px; padding-block: 3px; white-space: normal; color: var(--art-text); border-color: var(--art-line); }
.ai-stage .ai-chat__steps { border-color: #909fe085; }
.ai-stage .ai-chat__a u, .ai-stage .ai-draft u { background: var(--art-highlight); }
.ai-stage .ai-rec { background: var(--art-inset); border-color: var(--art-line); }
.ai-stage .ai-rec b, .ai-stage .ai-chat__table td { color: var(--art-text); }
.ai-stage .ai-draft { color: var(--art-secondary); border-color: var(--art-line); background: var(--art-inset); }

/* Two ways: a homepage demo still and an illustrative Claude conversation. */
.ai-way__stage { min-height: 370px; container-type: inline-size; }
.ai-stage--workspace { padding: 28px; align-items: center; }
.ai-stage--connector {
  --art-lens-x: calc(100% - 138px); --art-lens-y: -370px; --art-lens-rotate: 35deg;
  padding: 28px;
  background: radial-gradient(ellipse at 78% 8%, #363755, transparent 62%), #0c1323;
}
.ai-stage--connector .ai-art__plate { left: -62%; bottom: -12%; transform: rotate(29deg); }
.ai-stage--connector .ai-art__grid { opacity: .3; }
.ai-workspace-still {
  display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 22px 40px #24375633, 0 3px 8px #24375612;
}
.ai-claude {
  width: 100%; aspect-ratio: 1312 / 676; display: grid; grid-template-columns: 7% minmax(0, 1fr);
  overflow: hidden; border: 1px solid #d8d5cf; border-radius: 10px;
  background: #faf9f5; color: #30302e; font-family: Arial, sans-serif;
  font-size: 1.8cqw; line-height: 1.4; box-shadow: 0 22px 48px #0007;
}
.ai-claude svg { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-claude__rail { display: flex; flex-direction: column; align-items: center; gap: 1.6em; padding: 1.4em 0 1em; border-right: 1px solid #e8e5df; background: #f0eee6; color: #68665e; }
.ai-claude__avatar { margin-top: auto; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #dedbd1; font-size: .85em; }
.ai-claude__main { min-width: 0; display: flex; flex-direction: column; }
.ai-claude__header { display: flex; align-items: center; gap: 1.6em; padding: .7em 1.2em; }
.ai-claude__header strong { font: 1.75em Georgia, serif; letter-spacing: -.04em; }
.ai-claude__header > span { color: #79766e; font-size: .9em; }
.ai-claude__header > svg { margin-left: auto; }
.ai-claude__thread { width: 80%; margin: .4em auto .4em; }
.ai-claude__user { margin-left: 8%; padding: .7em 1em; background: #f0eee6; border-radius: .7em; }
.ai-claude__file { display: inline-flex; align-items: center; gap: .6em; padding: .35em .65em; margin-bottom: .5em; background: #faf9f5; border: 1px solid #dedbd2; border-radius: .4em; font-size: .83em; }
.ai-claude__file svg { color: #8a7c60; }
.ai-claude__file small { display: block; font-size: .8em; color: #827f75; }
.ai-claude__user p, .ai-claude__answer p { margin: 0; }
.ai-claude__tool { display: flex; align-items: center; gap: .4em; margin: .7em 0 .7em; padding: .55em .65em; border: 1px solid #ddd9cf; border-radius: .5em; font-size: .85em; color: #636158; }
.ai-claude__tool img { width: 1.7em; height: 1.7em; object-fit: contain; }
.ai-claude__tool small { margin-left: .6em; color: #8c897f; font-size: .95em; }
.ai-claude__tool > svg { width: 1em; height: 1em; margin-left: auto; }
.ai-claude__answer { font-family: Georgia, serif; font-size: 1.1em; }
.ai-claude__answer strong { font-weight: 600; }
.ai-claude__results { display: grid; grid-template-columns: 1fr 1fr; margin-top: .6em; font-family: Arial, sans-serif; font-size: .8em; }
.ai-claude__results > * { padding: .2em .4em; border-bottom: 1px solid #e6e2d9; }
.ai-claude__results > :nth-child(-n+2) { color: #7d796f; }
.ai-claude__results > :nth-child(even) { text-align: right; }
.ai-claude__composer { width: 84%; margin: auto auto .9em; padding: .65em .9em .5em; border: 1px solid #dfdcd4; border-radius: 1em; background: #fffefb; box-shadow: 0 2px 6px #342f2010; color: #868176; }
.ai-claude__composer > span { font-size: .95em; }
.ai-claude__composer > div { display: flex; align-items: center; gap: .7em; margin-top: .45em; }
.ai-claude__send { display: grid; place-items: center; margin-left: auto; width: 1.9em; height: 1.9em; border-radius: .55em; background: #c57b5e; color: #fff; }
.ai-stage .ai-win {
  max-width: none; border: 1px solid #ffffffbd; border-radius: 12px;
  color: #202b40; background: #fff;
  box-shadow: 0 22px 40px #24375633, 0 3px 8px #24375612;
  font-size: 13px;
}
.ai-stage--connector .ai-win { box-shadow: 0 22px 48px #0007; }
.ai-stage .ai-win__bar { border-color: #d9dfeb; }
.ai-stage .ai-win__bar small, .ai-stage .ai-win__fin { color: #536079; }
.ai-stage .ai-win__chat { background: #f0f3fa; }
.ai-stage .ai-win__q { background: #e6eaf7; color: #26334c; }
.ai-stage .ai-win__st, .ai-stage .ai-win__tool { color: #404e67; }
.ai-stage .ai-win__tool { border-color: #cdd5e4; overflow-wrap: anywhere; }
.ai-stage .ai-win__map { border-color: #d9dfeb; }
.ai-stage .ai-win__map::after { width: clamp(76px, 8vw, 132px); height: clamp(76px, 8vw, 132px); }
.ai-stage .ai-win__thread { padding: 18px; gap: 10px; }

/* The proof illustration follows the selected example without additional JS.
   Computation and lab context use optics; review and approval use pale glass. */
.ai-stage--proof {
  --art-lens-x: calc(100% - 120px); --art-lens-y: -345px; --art-lens-rotate: 28deg;
  padding: 52px 28px 40px 42px;
}
.ai-stage--proof .ai-art__plate { bottom: -38%; left: -28%; transform: rotate(20deg); }
.ai-stage--proof .ai-diff__pics { min-height: 330px; }
.ai-stage--proof .ai-chat__a { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.ai-stage--proof:has(.ai-diff__vis:is([data-i="1"], [data-i="2"]):not(.is-off)) {
  --art-text: #202b43; --art-secondary: #43516b; --art-muted: #52607a;
  --art-panel: linear-gradient(135deg, #fff, #f2f5fb); --art-query: #edf0fa;
  --art-line: #c5cfe0; --art-inset: #e9eef7; --art-highlight: #dfe5f6;
  background: radial-gradient(ellipse at 10% 90%, #bcc5df, transparent 60%), #e6ecf6;
  border-color: #d0d8e7;
}
.ai-stage--proof:has(.ai-diff__vis:is([data-i="1"], [data-i="2"]):not(.is-off)) .ai-art__lens {
  width: 40%; height: 160%; top: -30%; left: -22%; transform: rotate(30deg);
  border-radius: 54px; border-color: #ffffffbd;
  background: linear-gradient(90deg, #ffffffbb, #afbdd844);
  box-shadow: 22px 0 30px #6c7da02e, inset 3px 0 8px #fff;
}
.ai-stage--proof:has(.ai-diff__vis:is([data-i="1"], [data-i="2"]):not(.is-off)) .ai-art__etch { opacity: 0; }
.ai-stage--proof:has(.ai-diff__vis:is([data-i="1"], [data-i="2"]):not(.is-off)) .ai-art__plate {
  width: 55%; height: 150%; top: -25%; left: 90%; border-radius: 48px;
  background: linear-gradient(90deg, #ffffffdd, #c5cee54d); border: 1px solid #ffffffbb;
  box-shadow: -15px 0 30px #6c7da022;
}
.ai-stage--proof:has(.ai-diff__vis[data-i="3"]:not(.is-off)) { --art-lens-x: -345px; --art-lens-y: 95px; }
.ai-stage--proof .ai-appr { color: #202b43; border: 1px solid #d0d8e7; background: #fff; }
.ai-stage--proof .ai-appr p, .ai-stage--proof .ai-appr__row span { color: #43516b; }
.ai-stage--proof .ai-appr__row { background: #edf1f8; }
.ai-stage--proof .ai-appr__row em, .ai-stage--proof .ai-appr__reply { color: #52607a; }
.ai-stage--proof .ai-appr__btns span, .ai-stage--proof .ai-appr__reply { border-color: #c5cfe0; }
.ai-stage--proof .ai-appr__go { background: #5356bd; color: #fff; }

@media (min-width: 901px) and (max-width: 1100px) {
  .ai-stage--workspace, .ai-stage--connector { padding-inline: 20px; }
  .ai-stage .ai-win__bar { flex-wrap: wrap; }
  .ai-stage .ai-win__bar small { flex-basis: 100%; margin-left: 0; }
  .ai-stage .ai-win__map::after { width: 76px; height: 76px; }
}
@media (max-width: 900px) {
  .ai-stage--conversation { padding: 36px 22px; }
  .ai-way__stage { min-height: 340px; }
  .ai-stage--workspace, .ai-stage--connector { padding: 26px; }
  .ai-stage .ai-win__map::after { width: clamp(80px, 20vw, 160px); height: clamp(80px, 20vw, 160px); }
  .ai-stage--proof { padding: 38px 24px; }
  .ai-stage--proof .ai-diff__pics { min-height: 0; }
}
@media (max-width: 480px) {
  .ai-stage--conversation { padding: 28px 12px; }
  .ai-stage--workspace, .ai-stage--connector { padding: 24px 12px; }
  .ai-way__stage { min-height: 0; }
  .ai-stage .ai-win__bar { flex-wrap: wrap; }
  .ai-stage .ai-win__bar small { flex-basis: 100%; margin-left: 0; }
  .ai-stage .ai-win__body { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .ai-stage .ai-win__map::after { width: 64px; height: 64px; border-width: 4px; }
  .ai-stage .ai-win__chat, .ai-stage .ai-win__thread { padding: 10px; }
  .ai-stage .ai-win__q { max-width: 100%; }
  .ai-stage--proof { padding: 32px 12px; }
  .ai-stage .ai-chat__status { flex-wrap: wrap; }
  .ai-stage .ai-chat__steps { margin-left: 0; padding-left: 10px; }
  .ai-stage .ai-chat__sl { min-width: 0; }
  .ai-stage .ai-chat__table th, .ai-stage .ai-chat__table td { padding-right: 4px; }
}


/* 05 · Lab memory: the Memory Explorer beside the four things it keeps. */
#memory { scroll-margin-top: 90px; }
.ai-memory { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ai-memory__stage { margin: 0; }
.ai-memory__win { max-width: 600px; font-family: var(--body); font-size: 14px; border: 1px solid var(--rule); box-shadow: 0 24px 48px -20px rgba(5, 6, 25, .35); }
.ai-memory__win .ai-win__bar { padding: 11px 16px; }
.ai-memory__tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.ai-memory__scope { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); font-size: 12px; }
.ai-memory__scope span { padding: 4px 12px; border-radius: 6px; color: var(--muted); }
.ai-memory__scope .is-on { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(18, 19, 22, .08); }
.ai-memory__search { flex: 1; max-width: 220px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; font-size: 12px; color: var(--muted); }
.ai-memory__rows { list-style: none; margin: 0; padding: 0; }
.ai-memory__rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "type text" "type meta" "type acts"; column-gap: 12px; row-gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.ai-memory__rows li:last-child { border-bottom: 0; }
.ai-memory__type { grid-area: type; align-self: start; padding: 2px 8px; border-radius: 999px; background: var(--tint); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--purple); }
.ai-memory__rows p { grid-area: text; margin: 0; font-size: 15px; line-height: 1.45; }
.ai-memory__rows small { grid-area: meta; font-size: 12px; color: var(--muted); }
.ai-memory__acts { grid-area: acts; display: flex; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.ai-memory__acts i { font-style: normal; }
.ai-memory__acts i::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1px solid currentColor; border-radius: 2px; opacity: .6; }
.ai-memory__parts { list-style: none; margin: 0; padding: 0; }
.ai-memory__parts li { padding: 16px 0; border-top: 1px solid var(--rule); }
.ai-memory__parts li:last-child { border-bottom: 1px solid var(--rule); }
.ai-memory__parts .h3 { margin: 0 0 6px; }
.ai-memory__parts .text-s { max-width: 46ch; }
.ai-memory__uses { margin-top: 28px; }
.ai-memory__uses .label { display: block; margin-bottom: 10px; }
.ai-memory__uses ul { list-style: none; margin: 0 0 14px; padding: 0; }
.ai-memory__uses li { padding: 8px 0 8px 20px; position: relative; font-size: 16px; line-height: 1.45; }
.ai-memory__uses li::before { content: ''; position: absolute; left: 0; top: calc(8px + .72em); width: 8px; height: 1px; background: var(--ink); }
.ai-memory__uses .text-s { color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) {
  .ai-memory { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ai-memory__tools { flex-wrap: wrap; }
  .ai-memory__acts { flex-wrap: wrap; }
}

/* 04 · "Scientifically rigorous" card (2026-10-09): the review badge and its reason on the corrected turn. */
.ai-review__badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #E3F0EE; color: #1C484B; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.ai-review__why { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--art-muted); }
.ai-diff__body p + p { margin-top: 10px; }
.ai-diff__body b { font-weight: 500; }