/* Project surfaces share the site's type scale, spacing and brand colours. */
.project-page-hero {
  position:relative;
  padding:32px 0 48px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(125deg,#fff 58%,#f2f8fa);
}
.project-back {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
  color:var(--text);
  font-size:12px;
  line-height:1.5;
}
.project-back:hover {color:var(--teal)}
.project-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  align-items:center;
  gap:48px;
}
.project-hero-copy,.project-hero-preview {min-width:0}
.project-hero-copy .eyebrow {font-size:12px;line-height:1.5;letter-spacing:.06em;margin-bottom:16px}
.project-hero-copy h1 {font-family:var(--display);font-size:clamp(40px,4vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.04em;margin-bottom:16px}
.project-hero-copy .project-tagline {font-family:var(--display);font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.025em;max-width:440px;margin-bottom:24px;color:var(--ink)}
.project-hero-copy .lead {font-size:16px;line-height:1.6;margin-bottom:24px}
.project-hero-tags {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.project-hero-tags span {border:1px solid #cfdfe5;padding:5px 9px;border-radius:4px;background:#fff;color:var(--text);font-size:12px;line-height:1.5}
.project-hero-copy .btn {min-height:48px;font-size:14px;padding:12px 20px}
.project-hero-copy .project-stage-note {font-size:14px;line-height:1.6;color:var(--text);margin:16px 0 0}

.project-view {position:relative;min-width:0;overflow:hidden;isolation:isolate;border:1px solid #ccdde3;border-radius:8px;background:#fff;box-shadow:0 12px 32px #183e4d08}
.project-windowbar {display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 16px;border-bottom:1px solid var(--line);background:#f7fafb;color:#3e6172;font-size:12px;font-weight:600;line-height:1.5}
.project-window-dots {display:flex;gap:4px;flex-shrink:0}
.project-window-dots i {display:block;width:5px;height:5px;border-radius:50%;background:#bfd0d7}
.project-window-dots i:first-child {background:#6cb6bf}
.project-window-note {margin-left:auto;color:var(--text);font-size:12px;font-weight:400;text-align:right}
.project-mode-tabs {display:flex;border-bottom:1px solid var(--line);padding:0 8px;background:#fff}
.project-mode-tabs button {position:relative;flex:1;min-width:0;min-height:48px;border:0;padding:12px;background:none;color:var(--text);font-size:14px;line-height:1.5;text-align:center}
.project-mode-tabs button[aria-selected=true] {color:var(--teal);font-weight:600}
.project-mode-tabs button[aria-selected=true]:after {content:"";position:absolute;bottom:-1px;left:8px;right:8px;height:2px;background:var(--teal)}
.project-mode-tabs button>span {font-size:12px;font-weight:400;margin-right:8px;color:var(--text)}
.project-mode-tabs button:hover {background:#f4f9fa}
.project-mode-tabs button:focus-visible {outline-offset:-4px}
.project-screen {position:relative;min-width:0;background:#f5f9fb}
.project-screen img {display:block;width:100%;height:auto;border:0}
.project-screen-open {position:relative;display:block;width:100%;border:0;background:none;padding:0;text-align:left;cursor:zoom-in}
.project-screen-open:focus-visible {outline-offset:-5px}
.project-screen-expand {position:absolute;right:12px;bottom:12px;border:1px solid #c9dce3;border-radius:4px;background:#fff;color:#315565;padding:7px 10px;font-size:12px;line-height:1.5}
.project-screen--portrait {background:#edeaf7}
.project-screen--portrait img {max-height:440px;width:auto;max-width:100%;margin:0 auto}
.project-screen--portrait .project-screen-open {padding:24px}
.project-gallery-caption {border-top:1px solid var(--line)}
.project-view .project-view-footnote {font-size:14px;line-height:1.6;color:var(--text);margin:0;padding:16px 20px}
.project-demo-label {font-size:12px;font-weight:500;line-height:1.5;color:var(--text);margin:0}
.project-gallery-panel:focus-visible,.project-flow-panel:focus-visible,.project-concept-panel:focus-visible {outline:2px solid var(--teal);outline-offset:-3px}

.project-flow-panel {padding:24px 28px 8px;background:#fff}
.project-pathway {list-style:none;padding:0;margin:24px 0 0}
.project-pathway li {position:relative;display:flex;gap:16px;padding:0 0 24px;margin:0}
.project-pathway li:not(:last-child):before {content:"";position:absolute;left:17px;top:34px;bottom:0;width:1px;background:#a8d5d9}
.project-pathway li>span {display:grid;place-content:center;width:35px;height:35px;flex-shrink:0;border:1px solid #a4cdd2;border-radius:50%;background:#fff;color:var(--teal);font-size:12px}
.project-pathway strong {display:block;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.015em;margin:4px 0 4px}
.project-pathway p {font-size:14px;line-height:1.6;color:var(--text);margin:0}

.project-view--spona {background:#fbfdfe}
.project-demo-head {padding:24px 20px 0}
.project-field-tabs {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.project-field-tabs button {min-height:44px;border:1px solid #ccdde3;border-radius:4px;background:#fff;color:var(--text);padding:10px 12px;font-size:12px;line-height:1.5}
.project-field-tabs button[aria-pressed=true] {border-color:#75bcc4;background:#eaf6f5;color:#086570}
.project-mapping-columns {display:grid;grid-template-columns:minmax(0,1.12fr) 20px minmax(0,.88fr);gap:8px;align-items:center;padding:24px 20px}
.project-mapping-columns>div {min-width:0}
.project-code-heading {display:block;margin-bottom:8px;color:var(--text);font-size:12px;font-weight:500;line-height:1.5}
.project-code {margin:0;min-width:0;min-height:160px;padding:16px 12px;overflow:auto;border:1px solid #d6e4e9;border-radius:4px;background:#fff;color:#345366;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.8;white-space:pre;tab-size:2}
.project-code code {font:inherit}
.project-code-muted {color:#5c7482}
.project-code mark {border-radius:2px;background:transparent;color:inherit;padding:2px 1px}
.project-code mark.is-selected {background:#a9e7e4;color:#154957}
.project-code-json span {display:inline-block;border-radius:2px;padding:0 3px}
.project-code-json span.is-selected {background:#d9f2ef;color:#12666b;box-shadow:-2px 0 #1b9ca6}
.project-mapping-arrow {font-size:22px;color:var(--teal);margin-top:24px;text-align:center}
.project-mapping-status {display:flex;align-items:center;gap:12px;border-top:1px solid #d7e9e8;background:#eef8f7;padding:16px 20px;color:#285766;font-size:14px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.6}
.project-mapping-status strong {font-size:14px;font-weight:600;color:#086570;margin-left:8px}
.project-connection-dot {width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #1ca6ac12}
.project-map-compact {padding:24px}
.project-map-summary {display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:12px;margin-top:24px}
.project-map-value {min-width:0;border:1px solid #cddfe5;border-radius:4px;background:#fff;padding:16px 12px}
.project-map-value>span {display:block;color:var(--text);font-size:12px;line-height:1.5;margin-bottom:12px}
.project-map-value strong {display:block;color:var(--ink);font-size:24px;line-height:1.2;font-weight:600;margin-bottom:8px}
.project-map-value code {color:var(--teal);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.project-map-value:last-child {background:#edf8f6;border-color:#9fced0}
.project-map-summary>span {color:var(--teal);font-size:24px;text-align:center}
.project-map-compact>p:last-child {font-size:14px;line-height:1.6;color:var(--text);margin:20px 0 0}

.project-demo-banner {padding:16px 20px;border-bottom:1px solid var(--line);background:#f5f9fa}
.project-concept-panel {padding:24px 24px 8px;min-height:300px;background:#fff}
.project-concept-panel h2 {font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0 0 24px}
.project-concept-panel>p:not(.project-view-footnote) {font-size:14px;line-height:1.7;color:var(--text);margin-bottom:24px}
.project-concept-panel .project-document-metadata {font-size:12px!important;line-height:1.5!important;font-family:var(--body);color:var(--text)!important;border-bottom:1px solid var(--line);padding-bottom:16px}
.project-concept-panel mark {background:#c9eeea;color:#17636d;padding:2px 5px;border-radius:3px}
.project-concept-panel .project-view-footnote {padding:16px 0 8px}
.project-extraction {margin:0}
.project-extraction>div {display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0;font-size:14px;line-height:1.6}
.project-extraction dt {color:var(--text);font-size:12px;line-height:1.6}
.project-extraction dd {max-width:65%;margin:0;color:#214b5d;text-align:right}
.project-review-list {padding-left:20px;margin:0;color:var(--text);font-size:14px;line-height:1.6}
.project-review-list li {padding:0 0 16px}
.project-concept-compact {padding:24px 24px 0}
.project-concept-compact .project-pathway {margin-top:24px}
.project-concept-compact .project-pathway li {padding-bottom:20px}

.project-view--compact {border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.project-view--compact .project-windowbar {min-height:40px;padding:8px 16px}
.project-tile-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.project-tile-grid .project-card {min-width:0}
.project-tile-image {display:block;overflow:hidden;border-radius:6px 6px 0 0}
.project-tile-image:hover .project-screen img {filter:brightness(.98)}
.project-tile-grid .project-card-content {padding:24px}
.project-card-content .badge {font-size:12px;line-height:1.5}
.project-tile-grid .project-card-content h3 {font-size:26px;font-weight:600;line-height:1.3;margin:0 0 16px}
.project-card-content h3>a {display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.project-card-content h3>a:hover {color:var(--teal)}
.project-card-content h3>a>span {font-family:var(--body);font-size:22px;font-weight:400;color:var(--teal)}
.project-tile-grid .project-card-content p {font-size:16px;line-height:1.6;margin-bottom:0}
.project-list-hero {padding:40px 0 32px;border-bottom:0}
.project-list-hero h1 {max-width:800px;font-size:clamp(36px,4vw,52px);font-weight:600;line-height:1.15}
.project-list-hero .lead {max-width:740px;font-size:16px;line-height:1.6;margin-bottom:0}
.projects-section.project-list-section {padding-top:8px}
.project-stage-strip {border-bottom:1px solid var(--line);background:#f8fbfc}
.project-stage-strip>.shell {display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding-top:16px;padding-bottom:16px;font-size:14px;line-height:1.6;color:var(--text)}
.project-stage-strip strong {font-weight:600;color:var(--ink)}

.project-zoom {position:fixed;inset:0;width:max-content;max-width:min(1440px,94vw);max-height:94dvh;overflow:auto;border:1px solid #d7e2e7;border-radius:8px;background:#fff;color:var(--ink);padding:60px 16px 16px;box-shadow:0 25px 100px #0c23344a}
.project-zoom::backdrop {background:#081c2bd6;backdrop-filter:blur(6px)}
.project-zoom img {max-width:100%;max-height:76dvh;width:auto;height:auto;margin:auto;object-fit:contain}
.project-zoom>p {font-size:14px;line-height:1.6;color:var(--text);padding:16px 0 0;margin:0;text-align:center}
.project-zoom-close {position:absolute;right:16px;top:8px;display:flex;align-items:center;gap:16px;min-height:44px;border:0;background:#fff;padding:8px;font-size:14px;line-height:1.5}
.project-zoom-close span {font-size:24px;line-height:1}
html.project-zoom-open {overflow:hidden}

@media(max-width:1100px) {
  .project-hero-grid {gap:32px}
  .project-hero-copy .project-tagline {font-size:24px}
  .project-mapping-columns {grid-template-columns:1fr;gap:12px}
  .project-code {min-height:0}
  .project-mapping-arrow {transform:rotate(90deg);margin:0;line-height:1}
}
@media(max-width:820px) {
  .project-page-hero {padding:24px 0 40px}
  .project-back {margin-bottom:24px}
  .project-hero-grid {grid-template-columns:1fr;gap:32px;max-width:720px;margin-inline:auto}
  .project-hero-copy h1 {font-size:44px}
  .project-hero-copy .project-tagline {max-width:640px}
  .project-hero-copy .lead {max-width:640px}
  .project-view {width:100%}
  .project-mapping-columns {grid-template-columns:minmax(0,1.15fr) 20px minmax(0,.85fr);gap:8px}
  .project-code {min-height:150px}
  .project-mapping-arrow {transform:none;margin-top:24px;line-height:1.5}
  .project-tile-grid .project-window-note {display:none}
  .project-map-compact {padding:20px}
  .project-map-summary {grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px}
  .project-map-value {padding:16px 10px}
}
@media(max-width:600px) {
  .project-page-hero {padding:24px 0 32px}
  .project-back {margin-bottom:24px}
  .project-hero-copy h1 {font-size:38px;margin-bottom:16px}
  .project-hero-copy .eyebrow {font-size:12px;letter-spacing:.04em;margin-bottom:12px}
  .project-hero-copy .project-tagline {font-size:22px;line-height:1.35;max-width:380px;margin-bottom:20px}
  .project-hero-copy .lead {font-size:16px;line-height:1.6;margin-bottom:20px}
  .project-hero-copy .btn {min-height:48px;font-size:14px;padding:12px 16px}
  .project-hero-tags {gap:8px;margin-bottom:20px}
  .project-hero-tags span {font-size:12px;padding:4px 8px}
  .project-hero-grid {gap:24px}
  .project-view {border-radius:6px;box-shadow:none}
  .project-windowbar {gap:8px;min-height:40px;padding:8px 12px}
  .project-window-note {font-size:12px}
  .project-window-dots {display:none}
  .project-mode-tabs {padding:0 4px}
  .project-mode-tabs button {font-size:12px;min-height:48px;padding:12px 6px}
  .project-mode-tabs button>span {display:none}
  .project-screen-expand {right:8px;bottom:8px;font-size:12px;padding:5px 8px}
  .project-view .project-view-footnote {font-size:14px;line-height:1.6;padding:16px}
  .project-screen--portrait img {max-height:420px}
  .project-screen--portrait .project-screen-open {padding:16px}
  .project-flow-panel {padding:24px 20px 8px}
  .project-pathway {margin-top:24px}
  .project-pathway strong {font-size:16px}
  .project-pathway p {font-size:14px}
  .project-demo-head {padding:20px 16px 0}
  .project-demo-label {font-size:12px}
  .project-field-tabs {gap:6px;margin-top:16px}
  .project-field-tabs button {font-size:12px;min-height:44px;padding:10px}
  .project-mapping-columns {grid-template-columns:1fr;gap:12px;padding:20px 16px}
  .project-code {font-size:12px;min-height:0;padding:12px;line-height:1.8}
  .project-code-heading {font-size:12px;margin-bottom:8px}
  .project-mapping-arrow {transform:rotate(90deg);margin:0;line-height:1}
  .project-mapping-status {font-size:14px;padding:16px;gap:10px}
  .project-demo-banner {padding:16px}
  .project-concept-panel {padding:24px 20px 8px;min-height:300px}
  .project-concept-panel h2 {font-size:22px;line-height:1.3}
  .project-concept-panel>p:not(.project-view-footnote) {font-size:14px;line-height:1.7}
  .project-concept-panel .project-view-footnote {padding:16px 0 8px}
  .project-extraction>div {font-size:14px;gap:12px;padding:12px 0}
  .project-extraction dt {font-size:12px}
  .project-review-list {font-size:14px}
  .project-tile-grid {grid-template-columns:1fr;gap:24px}
  .project-tile-grid .project-card-content {padding:24px}
  .project-tile-grid .project-card-content h3 {font-size:26px}
  .project-tile-grid .project-card-content p {font-size:16px}
  .project-view--compact {border-radius:0}
  .project-view--compact .project-window-note {display:block}
  .project-map-compact {padding:24px 20px}
  .project-map-summary {gap:8px}
  .project-map-value strong {font-size:24px}
  .project-list-hero {padding:32px 0 24px}
  .project-list-hero h1 {font-size:36px;margin-bottom:20px}
  .project-list-hero .lead {font-size:16px}
  .project-stage-strip>.shell {font-size:14px;gap:8px 20px;padding-block:16px}
  .project-zoom {max-width:96vw;max-height:94dvh;padding:60px 12px 12px}
  .project-zoom img {max-height:75dvh}
  .project-zoom-close {right:12px;font-size:14px}
}
@media(prefers-reduced-motion:reduce) {
  .project-view * {scroll-behavior:auto;transition:none!important}
}

/* Spona: inspectable grouped transformations and a strictly local model-result demo. */
.spona-compact {padding:24px}
.spona-compact-flow {display:flex;align-items:center;justify-content:space-between;gap:6px;margin:24px 0}
.spona-compact-flow>span {min-width:0;border:1px solid #cddfe5;border-radius:4px;background:#fff;padding:10px 7px;text-align:center;font-size:12px;font-weight:500;line-height:1.5}
.spona-compact-flow>i {font-style:normal;color:var(--teal);font-size:16px}
.spona-compact-flow .spona-optional {border-style:dashed;color:var(--teal);background:#edf8f6}
.spona-optional span {display:block;font-size:12px;font-weight:400}
.spona-compact-groups {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;gap:12px}
.spona-compact-groups>span {font-size:12px;line-height:1.5;color:var(--text)}
.spona-compact-groups strong {display:block;font-size:24px;font-weight:600;color:var(--ink);margin-bottom:4px}
.spona-compact>p:last-child {font-size:14px;line-height:1.6;color:var(--text);margin:20px 0 0}
.project-hero-preview>.project-view--spona.project-view--compact {border:1px solid #ccdde3;border-radius:8px}
.spona-showcase {overflow:hidden;border:1px solid #c7dbe2;border-radius:8px;background:#fff}
.spona-showcase-head {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;background:#f5f9fa;border-bottom:1px solid var(--line)}
.spona-showcase-head>strong {font-size:18px;font-weight:600;color:var(--ink)}
.spona-showcase-head>span {font-size:12px;line-height:1.5;color:var(--text);text-align:right}
.spona-showcase>.project-mode-tabs {padding:0 16px}
.spona-showcase>.project-mode-tabs button {font-size:14px;min-height:52px}
.spona-scenario {padding:24px}
.spona-scenario-intro {font-size:16px;line-height:1.6;color:var(--text);margin:0 0 24px}
.spona-flow {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;gap:20px;padding:0;margin:0 0 24px}
.spona-flow li {position:relative;min-width:0;padding:16px 12px;border:1px solid #cddfe5;border-radius:4px;background:#f8fbfc;text-align:center;color:var(--ink)}
.spona-flow li:not(:last-child):after {content:"";position:absolute;right:-21px;top:50%;width:20px;height:1px;background:#82bbc5}
.spona-flow strong {display:block;font-size:14px;line-height:1.4;font-weight:600}
.spona-flow small {display:block;font-size:12px;line-height:1.5;color:var(--text);margin-top:4px}
.spona-flow-dot {display:block;width:6px;height:6px;margin:0 auto 10px;background:var(--teal);border-radius:50%}
.spona-flow .spona-flow-llm {border-style:dashed;background:#fff;color:#5a7280}
.spona-flow .spona-flow-llm .spona-flow-dot {background:#a6b9c2}
.spona-flow .spona-flow-llm.is-active {border-color:#3d9ca7;background:#eaf7f4;color:#0d6e78}
.spona-flow .spona-flow-llm.is-active .spona-flow-dot {background:var(--teal);box-shadow:0 0 0 4px #1ca6ac12}
.spona-profile-meta {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:24px;color:var(--text);font-size:12px;line-height:1.5}
.spona-profile-meta strong {color:var(--ink);font-size:12px;font-weight:600;margin-left:5px}
.spona-map-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.spona-map-column {min-width:0}
.spona-map-column h3 {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin:0 0 16px;font-size:18px;font-weight:600;line-height:1.5;letter-spacing:-.02em}
.spona-map-column h3>span {font-size:12px;font-weight:400;color:var(--text);letter-spacing:0}
.spona-pair-list {display:grid;gap:8px}
.spona-pair {position:relative;display:block;min-width:0;width:100%;border:1px solid #d7e3e8;border-radius:4px;background:#fff;color:var(--ink);padding:12px 16px;text-align:left;line-height:1.5;transition:background .15s,border-color .15s}
.spona-pair:hover {border-color:#8fbec8;background:#f7fbfc}
.spona-pair:focus-visible {outline-offset:-3px}
.spona-pair-label {display:block;font-size:14px;line-height:1.5;font-weight:600;margin-bottom:6px}
.spona-pair>code {display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:var(--text);line-height:1.6;overflow-wrap:anywhere}
.spona-pair:not(.is-selected)>code {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spona-pair>strong {display:block;font-size:14px;font-weight:500;line-height:1.6;color:#145c68;margin-top:12px;white-space:pre-line;overflow-wrap:anywhere}
.spona-pair:not(.is-selected)>strong {display:none}
.spona-pair.is-selected {border-color:#69b7bf;background:#edf8f6}
.spona-pair-dot {display:none;position:absolute;right:-4px;top:50%;width:7px;height:7px;border:1px solid #fff;border-radius:50%;background:var(--teal)}
.spona-pair.is-selected .spona-pair-dot {display:block}
.spona-map-column:last-child .spona-pair-dot {right:auto;left:-4px}
.spona-map-column:first-child .spona-pair.is-selected:after {content:"";position:absolute;right:-25px;top:calc(50% + 3px);width:24px;height:1px;background:#65b5be}
@supports(grid-template-rows:subgrid) {
  .spona-map-grid {grid-template-rows:auto repeat(6,auto);column-gap:24px;row-gap:8px}
  .spona-map-column {display:grid;grid-template-rows:subgrid;grid-row:1 / span 7}
  .spona-pair-list {display:contents}
  .spona-map-column h3 {margin-bottom:8px}
}
.spona-trace {border:1px solid #c9e1e3;border-radius:4px;background:#f3f9fa;margin-top:24px;padding:20px}
.spona-trace>div {display:flex;align-items:center;gap:12px}
.spona-trace-rule {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#14717b;font-size:12px;border:1px solid #b4d5da;border-radius:3px;padding:3px 6px;background:#fff}
.spona-trace>div>strong {font-size:14px;font-weight:600;line-height:1.5}
.spona-trace-path {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0;color:var(--teal)}
.spona-trace-path code {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.7;overflow-wrap:anywhere;max-width:100%}
.spona-trace-note {font-size:14px;line-height:1.6;color:var(--text);margin:0}
.spona-raw {margin-top:24px;border:1px solid var(--line);border-radius:4px}
.spona-raw summary {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;min-height:56px;cursor:pointer;font-size:14px;font-weight:500;list-style:none}
.spona-raw summary::-webkit-details-marker {display:none}
.spona-raw summary>span {color:var(--teal);font-size:20px}
.spona-raw[open] summary>span {transform:rotate(45deg)}
.spona-raw-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 20px 20px}
.spona-raw-grid>div {min-width:0}
.spona-raw h4 {font-size:14px;line-height:1.5;font-weight:600;margin:0 0 12px}
.spona-raw pre,.spona-llm-grid pre {max-width:100%;overflow:auto;border:1px solid #d6e4e9;border-radius:4px;padding:16px;background:#f8fbfc;color:#2b5365;font-size:12px;line-height:1.8;margin:0;tab-size:2;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.spona-raw pre {max-height:420px}
.spona-raw code,.spona-llm-grid code {font:inherit}
.spona-llm-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.spona-llm-grid>article {min-width:0}
.spona-kicker {font-size:12px;line-height:1.5;color:var(--teal);margin:0 0 12px;font-weight:500}
.spona-llm-grid h3 {font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.02em;margin:0 0 20px}
.spona-llm-grid article>p:not(.spona-kicker) {font-size:14px;line-height:1.6;color:var(--text);margin:16px 0 0}
.spona-invalid-toggle {display:inline-flex;align-items:center;min-height:44px;margin-top:16px;border:1px solid #bed5df;border-radius:4px;background:#fff;color:var(--ink);padding:10px 14px;font-size:14px;line-height:1.5;text-align:left}
.spona-invalid-toggle:hover {background:#f2f8fa}
.spona-invalid-toggle[aria-pressed=true] {background:#fcf0ed;border-color:#d8aaa0;color:#8e3a2c}
.spona-validation {margin-top:24px;border:1px solid #afd3cd;border-radius:4px;background:#eef8f3;padding:20px}
.spona-validation>strong {display:block;font-size:16px;line-height:1.5;color:#1d6659;font-weight:600;margin-bottom:8px}
.spona-validation>p {font-size:14px;line-height:1.6;color:#365f58;margin:0}
.spona-validation.is-invalid {border-color:#deb6ac;background:#fdf1ed}
.spona-validation.is-invalid>strong {color:#8e3a2c}
.spona-validation.is-invalid>p {color:#7d4c42}
.spona-llm-target {display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:20px;border:1px solid var(--line);border-radius:4px;margin-top:16px;background:#f8fbfc}
.spona-llm-target>span {font-size:12px;line-height:1.5;color:var(--text)}
.spona-llm-target code {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.8;color:#315a6d;overflow-wrap:anywhere}
.spona-llm-target strong {font-size:14px;line-height:1.5;font-weight:500;color:#21695c;margin-left:auto}
.has-invalid-output .spona-llm-target {border-color:#ddbeb5;background:#fbf6f4}
.has-invalid-output .spona-llm-target code {color:#8c7c76;text-decoration:line-through}
.has-invalid-output .spona-llm-target strong {color:#8e3a2c}
.spona-model-disclosure {font-size:14px;line-height:1.6;color:var(--text);margin:20px 0 0}
.spona-showcase-note {font-size:14px;line-height:1.6;color:var(--text);padding:20px 24px;margin:0;border-top:1px solid var(--line);background:#f7fafb}
@media(max-width:820px) {
  .spona-scenario {padding:20px}
  .spona-flow {gap:10px}
  .spona-flow li {padding:14px 7px}
  .spona-flow li:not(:last-child):after {right:-11px;width:10px}
  .spona-flow strong {font-size:12px}
  .spona-flow small {font-size:12px}
  .spona-raw-grid,.spona-llm-grid {grid-template-columns:1fr;gap:24px}
  .spona-profile-meta {gap:10px;font-size:12px}
}
@media(max-width:600px) {
  .spona-compact {padding:20px}
  .spona-compact-flow {gap:4px;margin:20px 0}
  .spona-compact-flow>span {font-size:12px;padding:8px 5px}
  .spona-compact-flow>i {font-size:14px}
  .spona-showcase-head {padding:16px;align-items:flex-start;gap:16px}
  .spona-showcase-head>strong {font-size:16px}
  .spona-showcase-head>span {max-width:180px;font-size:12px}
  .spona-showcase>.project-mode-tabs {padding:0 4px}
  .spona-showcase>.project-mode-tabs button {font-size:12px;padding:12px 6px;line-height:1.5;min-height:52px}
  .spona-scenario {padding:20px 12px}
  .spona-scenario-intro {font-size:16px;margin-bottom:20px}
  .spona-flow {gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .spona-flow li {padding:12px 6px}
  .spona-flow li:not(:last-child):after {right:-7px;width:6px}
  .spona-flow li:nth-child(3):after {display:none}
  .spona-flow li:nth-child(4) {grid-column:2}
  .spona-flow-dot {margin-bottom:8px}
  .spona-profile-meta {padding:14px 0;margin-bottom:20px}
  .spona-profile-meta strong {display:block;margin-left:0;margin-top:3px}
  .spona-map-grid {gap:8px;column-gap:12px}
  .spona-map-column h3 {display:block;font-size:16px;line-height:1.4;margin-bottom:12px}
  .spona-map-column h3>span {display:block;font-size:12px;margin-top:4px}
  .spona-pair {padding:12px 10px}
  .spona-pair-label {font-size:14px;line-height:1.45}
  .spona-pair>code {font-size:12px;line-height:1.6}
  .spona-pair>strong {font-size:14px;line-height:1.6;margin-top:10px}
  .spona-map-column:first-child .spona-pair.is-selected:after {right:-13px;width:12px}
  .spona-trace {padding:16px;margin-top:20px}
  .spona-trace>div {gap:8px;flex-wrap:wrap}
  .spona-trace-path {display:block;margin:12px 0}
  .spona-trace-path>span {display:block;line-height:1.2;padding:5px 0}
  .spona-raw {margin-top:20px}
  .spona-raw summary {font-size:14px;padding:16px 12px;gap:10px}
  .spona-raw-grid {padding:0 12px 16px}
  .spona-raw pre,.spona-llm-grid pre {font-size:12px;padding:12px;line-height:1.8}
  .spona-llm-grid {gap:24px}
  .spona-llm-grid h3 {font-size:20px}
  .spona-invalid-toggle {width:100%;justify-content:center;font-size:14px}
  .spona-validation {padding:16px}
  .spona-validation>strong {font-size:16px}
  .spona-llm-target {padding:16px;gap:14px}
  .spona-llm-target>span {width:100%}
  .spona-llm-target strong {width:100%;margin-left:0}
  .spona-showcase-note {padding:16px;font-size:14px}
}