/* Research */
.r-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.ix { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, box-shadow .4s var(--ease), transform .5s var(--out); height: 100%; }
.ix:hover { background: var(--blush-soft); box-shadow: inset 0 0 0 1px var(--blush); transform: translateY(-2px); }
.ix-img { width: 64px; height: 64px; flex: none; border-radius: 12px; }
.ix-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ix-t .meta { color: var(--steel); }
.ix-n { font-size: 14.5px; font-weight: 500; line-height: 1.3; }

.theme { padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.theme + .theme { border-top: 1px solid var(--line); }
.t-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.t-head .t-n { color: var(--steel); font-variant-numeric: tabular-nums; }
.t-head .t-y { margin-left: auto; white-space: nowrap; }
.p-list li + li { border-top: 1px solid var(--line); }
.p-row { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 12px 8px 12px 0; text-align: left; border-radius: 14px; transition: background .3s, padding .4s var(--out); }
.p-row:hover, .p-row:focus-visible { background: var(--sky-soft); padding-left: 10px; }
.p-t { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 15.5px; font-weight: 500; line-height: 1.4; min-width: 0; }
.p-y { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink-4); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-go { color: var(--steel); transition: transform .4s var(--out); margin-right: 6px; }
.p-row:hover .p-go { transform: translateX(4px); }
.theme.past .t-head .h1 { color: var(--ink-2); }

/* compare slider */
.cmp { position: relative; aspect-ratio: 1 / 1; max-width: 640px; border-radius: var(--r); overflow: hidden; background: var(--bg-2); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 15%, transparent); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--white); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--navy) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--blush) 70%, transparent); transition: transform .4s var(--out), box-shadow .3s; }
.cmp-knob svg { width: 20px; height: 12px; }
.cmp:hover .cmp-knob, .cmp.drag .cmp-knob { transform: scale(1.08); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--navy) 50%, transparent), 0 0 0 8px color-mix(in srgb, var(--blush) 60%, transparent); }
.cmp-lab { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--white) 90%, transparent); font-size: 12px; font-weight: 600; color: var(--navy); pointer-events: none; }
.cmp-lab.l { left: 16px; } .cmp-lab.r { right: 16px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; pointer-events: none; }
.cmp:has(.cmp-range:focus-visible) { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--steel); }

/* project sheet */
.sheet-body.swap { animation: art-in .6s var(--out); }
@keyframes art-in { from { opacity: 0; transform: translateY(14px); } }
.pv-head .meta { color: var(--steel); }
.pv-title { margin-top: 10px; max-width: 26ch; }
.pv-fig { margin-top: 32px; }
.media.natural { background: var(--bg-2); }
.media.natural img { height: auto; }
.pv-meta { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.pv-meta .meta { margin-bottom: 8px; }
.pv-meta p, .pv-meta li { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pv-meta li + li { margin-top: 8px; }
.pv-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pv-nav button { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; transition: background .3s, box-shadow .3s; }
.pv-nav button:hover { background: var(--blush-soft); box-shadow: inset 0 0 0 1px var(--blush); }
.pv-nav .r { text-align: right; align-items: flex-end; }

@media (max-width: 1100px) {
  .r-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .r-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ix { padding: 8px; gap: 10px; }
  .ix-img { width: 44px; height: 44px; border-radius: 10px; }
  .ix-n { font-size: 13px; }
  .t-head { flex-wrap: wrap; gap: 6px 14px; }
  .t-head .h1 { order: 3; width: 100%; font-size: 28px; }
  .pv-nav { grid-template-columns: minmax(0, 1fr); }
}

.cmp-tabs { margin-top: 22px; }
.cmp-imgs { display: contents; }

/* ===== palette layer (v3) ===== */
.ix { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.ix .ix-t .meta { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--th); color: var(--th-ink); }
.ix:hover { background: var(--th-soft); box-shadow: inset 0 0 0 1.5px var(--th); }
.theme[data-th] { position: relative; background: linear-gradient(180deg, var(--th-soft) 0, var(--white) 520px); }
.theme + .theme { border-top: 0; }
.theme[data-th]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--th); }
.theme[data-th] .t-n { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--th); color: var(--th-ink); }
.theme[data-th] .p-row:hover, .theme[data-th] .p-row:focus-visible { background: var(--th-soft); box-shadow: inset 4px 0 0 var(--th); }
.theme[data-th] .p-go { color: var(--th-acc); }
.theme.past .t-head .h1 { color: var(--navy); }
.theme[data-th] { background: linear-gradient(180deg, var(--th-soft) 0, color-mix(in srgb, var(--th-soft) 50%, var(--white)) 900px, var(--white) 1600px); }

/* ===== compact theme layout (v6) ===== */
.t-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.t-text .lede { max-width: 60ch; }
.t-ph { margin: 30px 0 8px; }
.t-ph .n { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--th, var(--sky-soft)); color: var(--th-ink, var(--navy)); }
.p-one { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-3); }
.t-fig .media { width: 100%; border-radius: var(--r); }
.t-fig .caption { margin-top: 12px; }
.t-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.k-it { display: block; width: 100%; border-radius: var(--r); }
.k-it .media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); }
.k-it .media.contain img { padding: 4%; }
.k-cap { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.k-cap .credit { color: var(--steel); }
.cmp-fig .cmp { max-width: none; width: 100%; }
.cmp-fig .cmp-tabs { margin-top: 14px; }
.pv-p { margin-top: 18px; max-width: 70ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.pv-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; align-items: start; }
.pv-figs.n1 { grid-template-columns: minmax(0, 760px); }
.pv-figs .pv-fig { margin-top: 0; }
@media (max-width: 900px) {
  .t-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .t-media { order: -1; }
}
@media (max-width: 640px) {
  .t-keys { gap: 10px; margin-top: 16px; }
  .k-cap { font-size: 12px; }
  .p-row { flex-wrap: wrap; gap: 4px 12px; }
  .p-t { flex-basis: calc(100% - 40px); }
  .p-y { order: 3; width: 100%; }
  .pv-figs { grid-template-columns: minmax(0, 1fr); }
}
.t-page { margin-top: 24px; }
.t-page .btn { white-space: normal; height: auto; min-height: 44px; padding: 10px 20px; line-height: 1.35; }

/* four themes; sub-area block (Virtual Staining inside Computational Microscopy) */
.r-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-subsec { margin-top: clamp(44px, 5vw, 76px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line-2); }
.t-subh { display: flex; align-items: baseline; gap: 20px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.t-subh .t-y { margin-left: auto; white-space: nowrap; }
@media (max-width: 1100px) { .r-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .t-subh { flex-wrap: wrap; gap: 4px 14px; } }
.t-keys .k-wide { grid-column: 1 / -1; }
.ix-img.ix-none { background: var(--th); }

/* parallel themes (PI 2026-10-15): a color dot instead of a sequence number */
.ix-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--th, var(--steel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 14%, transparent); }
.theme[data-th] .t-n { display: block; min-width: 0; width: 14px; height: 14px; padding: 0; border-radius: 50%; background: var(--th); align-self: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 14%, transparent); }
.ix-t:has(.ix-dot) { flex-direction: row; align-items: center; gap: 10px; }
.ix-dot { flex: none; }
.t-fig .media.mat-white > img { padding: 4% 6%; }
/* labels over side-by-side videos (raw sensor image | reconstruction), 2026-10-15 */
.vid-lab { top: 12px; z-index: 2; }
.cmp-lab.r.vid-lab { right: auto; left: calc(50% + 12px); }
@media (max-width: 560px) { .vid-lab { top: 8px; padding: 4px 9px; font-size: 11px; } .cmp-lab.l.vid-lab { left: 8px; } .cmp-lab.r.vid-lab { left: calc(50% + 8px); } }
/* phone widths: grid and flex children may shrink below the intrinsic width of videos and wide figures (2026-10-16) */
.t-text, .t-media, .t-fig, .t-fig .media { min-width: 0; }
.t-fig video, .t-fig img { max-width: 100%; }
.p-research .caption .credit { white-space: normal; overflow-wrap: break-word; }
.t-fig .media.mat-white.tight > img { padding: 2% 3%; }