/* Project detail, measured impact, and a compact mobile reading companion. */
:root { --graph-preview-filter: invert(1) brightness(1.08); --graph-preview-bg: #f3f3f3; --graph-preview-caption: #55555a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --graph-preview-filter: none; --graph-preview-bg: #1e1e1e; --graph-preview-caption: #d2d2d7; }
}
:root[data-theme="dark"] { --graph-preview-filter: none; --graph-preview-bg: #1e1e1e; --graph-preview-caption: #d2d2d7; }
.project-preview, .preview-slide img { filter: var(--graph-preview-filter); }
.build-band { padding-top: 0; }
.build-comparison { margin: 0; padding: clamp(24px, 5vw, 48px); border-radius: 28px; background: var(--bg-alt); }
.build-comparison figcaption { font-size: clamp(24px, 4vw, 36px); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 36px; }
.build-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 22px 0 10px; }
.build-row strong { font-size: clamp(20px, 4vw, 28px); font-variant-numeric: tabular-nums; }
.build-track { height: 16px; border-radius: 6px; background: var(--chip-border); overflow: hidden; }
.build-bar { height: 100%; display: block; transform-origin: left; }
.build-bar-before { width: 100%; background: linear-gradient(to right, var(--muted) 0 66.6667%, transparent 66.6667%), repeating-linear-gradient(120deg, var(--muted) 0 3px, transparent 3px 8px); }
.build-bar-after { width: 6.6667%; background: var(--accent); border-radius: 6px; }
.js .build-comparison:not(.in) .build-bar { transform: scaleX(0); }
.build-comparison.in .build-bar { transition: transform 800ms cubic-bezier(.2,.7,.2,1); }
.build-note { font-size: 14px; color: var(--muted); margin: 16px 0 24px; }
.build-details { border-top: 1px solid var(--chip-border); padding-top: 18px; }
.build-details summary { cursor: pointer; font-size: 16px; color: var(--accent); padding: 8px 0; }
.build-details p { font-size: 16px; }
.project-feature { grid-column: 1 / -1; }
.project-preview { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 18px; margin: 24px 0; background: #1e1e1e; }
.case-open { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; margin-top: 24px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--chip-border); background: transparent; color: var(--accent); cursor: pointer; text-align: left; }
.case-open[hidden] { display: none; }
.case-open > span:last-child { font-size: 26px; line-height: 1; border-radius: 50%; background: var(--bg-alt); padding: 8px; transition: transform 200ms; }
.case-open:hover > span:last-child { transform: rotate(90deg); }
.case-open:focus-visible, .case-back:focus-visible, .island-link:focus-visible, .gallery-control:focus-visible, .preview-strip:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 10px; }
.case-dialog { width: min(920px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--chip-border); border-radius: 30px; background: var(--card); color: var(--ink); box-shadow: 0 40px 120px #0005; overscroll-behavior: contain; }
.case-dialog::backdrop { background: #0009; backdrop-filter: blur(12px); }
html.case-is-open { overflow: hidden; }
.case-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 18px 28px; background: var(--bar); backdrop-filter: blur(20px); }
.case-back { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 10px 0; font: inherit; font-size: 16px; }
.case-content { padding: 12px clamp(24px, 5vw, 60px) 56px; }
.case-content h2 { font-size: clamp(32px, 7vw, 64px); letter-spacing: -.045em; line-height: 1.05; margin: 24px 0 16px; overflow-wrap: anywhere; }
.case-lede { font-size: clamp(22px, 4vw, 32px); line-height: 1.2; color: var(--muted); margin: 0 0 28px; }
.case-content h3 { font-size: 23px; margin: 36px 0 12px; }
.case-content p { max-width: 68ch; }
.case-facts { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; color: var(--muted); margin-bottom: 32px; }
.case-architecture { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.case-architecture :is(span, a) { padding: 12px 18px; border: 1px solid var(--chip-border); border-radius: 12px; font: 14px ui-monospace, monospace; }
.case-architecture a { color: var(--ink); text-underline-offset: 4px; }
.graph-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 32px; }
.graph-capabilities article { padding: 24px; border: 1px solid var(--chip-border); border-radius: 20px; }
.graph-capabilities h4 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.graph-capabilities p { margin: 0; font-size: 16px; }
.graph-try { padding: 24px; border-radius: 20px; background: var(--bg-alt); margin: 32px 0; }
.graph-try h3 { margin-top: 0; }
.graph-try pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: var(--card); font-size: 15px; }
.graph-source-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.graph-source-links a { display: inline-flex; align-items: center; min-height: 44px; }
.graph-web-note, .graph-verification p { color: var(--muted); font-size: 14px; }
.graph-verification { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--chip-border); }
.graph-source-links a:focus-visible, .case-architecture a:focus-visible, .graph-verification a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 600px) { .graph-capabilities { grid-template-columns: 1fr; } }
.case-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-results > div { display: grid; gap: 10px; padding: 24px; background: var(--bg-alt); border-radius: 20px; }
.case-results strong { font-size: clamp(24px, 5vw, 38px); letter-spacing: -.04em; }
.case-results span { font-size: 16px; }
.case-content > .btn { margin-top: 24px; }
.preview-gallery { margin: 24px 0 32px; }
.preview-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; background: var(--graph-preview-bg); scrollbar-width: thin; }
.preview-slide { flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: start; }
.preview-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.preview-slide figcaption { padding: 0 20px 18px; color: var(--graph-preview-caption); font-size: 14px; }
.preview-slide figcaption :is(strong, span) { display: block; }
.preview-slide figcaption strong { margin: 8px 0; font-size: 16px; }
.gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.gallery-footer p { color: var(--muted); font-size: 14px; margin: 0; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-control { width: 44px; height: 44px; border: 1px solid var(--chip-border); border-radius: 50%; font-size: 20px; color: var(--ink); background: var(--bg-alt); cursor: pointer; }
.gallery-control:disabled { opacity: .35; cursor: default; }
.preview-source { font-size: 14px; }
.mobile-island { display: none; }
.island-current { visibility: hidden; overflow: hidden; }
/* Keep both viewport snapshots opaque while the new theme expands from its control. */
.theme-reveal::view-transition-group(root) { animation-duration: 420ms; }
.theme-reveal::view-transition-image-pair(root) { isolation: isolate; }
.theme-reveal::view-transition-old(root),
.theme-reveal::view-transition-new(root) { mix-blend-mode: normal; animation: none; }
.theme-reveal::view-transition-old(root) { z-index: 1; }
.theme-reveal::view-transition-new(root) { z-index: 2; animation: theme-circle 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes theme-circle {
  from { clip-path: circle(0px at var(--theme-x) var(--theme-y)); }
  to { clip-path: circle(var(--theme-radius) at var(--theme-x) var(--theme-y)); }
}

.project-peek { margin: 24px 0; }
.project-peek-images { position: relative; overflow: hidden; border-radius: 18px; background: var(--graph-preview-bg); }
.project-peek .project-preview { margin: 0; border-radius: 0; transition: opacity 220ms ease, transform 400ms cubic-bezier(.2,.8,.2,1); }
.project-peek .project-preview-alternate { position: absolute; inset: 0; opacity: 0; }
.project-peek.is-alternate .project-preview-alternate { opacity: 1; }
.project-peek-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.project-peek-caption { flex: 1 1 240px; }
.preview-toggle { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--chip-border); border-radius: 24px; background: var(--bg-alt); color: var(--ink); font: inherit; cursor: pointer; }
.preview-toggle[hidden] { display: none; }
.preview-toggle[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.preview-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-peek-images:hover .project-preview { transform: scale(1.025); }
}

/* Independent scale composes with the existing magnetic CTA transform. */
@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .lang-btn, .theme-btn, .case-open, .case-back, .gallery-control, .preview-toggle, .island-current) {
    transition: scale 240ms cubic-bezier(.2,1.5,.4,1), background-color 200ms ease, color 200ms ease, transform 200ms ease;
  }
  :is(.btn, .lang-btn, .theme-btn, .case-open, .case-back, .gallery-control, .preview-toggle, .island-current):not(:disabled):active {
    scale: .96;
    transition-duration: 80ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-inner { transform: none !important; opacity: 1 !important; }
  .project-peek .project-preview { transform: none; }
  .theme-reveal::view-transition-new(root) { animation: none; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .mobile-island { display: block; position: fixed; z-index: 20; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: max(16px, calc((100% - 390px) / 2)); width: min(390px, calc(100% - 32px)); padding: 6px; border: 1px solid var(--chip-border); border-radius: 30px; background: var(--bar); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 8px 32px #0002; transition: width 360ms cubic-bezier(.22,.8,.22,1), right 360ms cubic-bezier(.22,.8,.22,1); }
  .island-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; opacity: 1; visibility: visible; transition: opacity 160ms ease 100ms, transform 260ms ease, visibility 0s; }
  .island-link { position: relative; z-index: 1; text-align: center; text-decoration: none; color: var(--muted); font-size: 14px; padding: 14px 4px; border-radius: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .island-link.active { color: var(--ink); }
  .island-indicator { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / 3); border-radius: 24px; background: var(--card); box-shadow: 0 2px 8px #0001; opacity: 0; transform: translateX(calc(var(--active-index, 0) * 100%)); transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 160ms; }
  .has-active .island-indicator { opacity: 1; }
  .mobile-island.is-compact { right: 16px; width: min(var(--island-compact-width, 88px), calc(100% - 32px)); }
  .is-compact .island-links { opacity: 0; visibility: hidden; transform: translateX(12px) scale(.96); pointer-events: none; transition: opacity 100ms ease, transform 260ms ease, visibility 0s 100ms; }
  .island-current { position: absolute; inset: 6px; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border: 0; border-radius: 24px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateX(-10px); transition: opacity 100ms ease, transform 240ms ease, visibility 0s 100ms; }
  .is-compact .island-current { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease 100ms, transform 240ms ease 80ms, visibility 0s; }
  .island-current-label { display: block; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
  .island-current-measure { position: absolute; width: max-content; max-width: none; white-space: nowrap; visibility: hidden; pointer-events: none; }
  .island-current:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .case-dialog { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .case-toolbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 24px 12px; }
  .case-content { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .case-results { grid-template-columns: 1fr; }
  .case-toolbar .tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .build-comparison:not(.in) .build-bar { transform: none; }
  .build-bar, .mobile-island, .island-links, .island-current, .island-indicator, .case-open > span:last-child { transition: none !important; }
}