/* Cinematic SMI cover and gallery; paper figures retain their white canvas. */
:root { --cinema: #0c1411; --mint: #cee5bd; }
html { scroll-padding-top: 100px; }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 68px; padding-top: 16px; padding-bottom: 16px; background: #0b1412f2; backdrop-filter: blur(16px); border-bottom: 1px solid #ffffff12; }
nav a { position: relative; transition: color .2s; }
nav a:not(.nav-github)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--mint); transition: right .2s; }
nav a:hover::after { right: 0; }
.nav-github { border-color: #8caa9270; border-radius: 4px; }
.hero { height: 56.25vw; min-height: 620px; max-height: calc(100svh - 68px); padding: 90px 3.5% 110px; background: var(--cinema); }
.hero-media { inset: 0; background: #0c1411; }
.hero-still, .hero-still img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity .6s; }
.hero-media video.is-playing { opacity: 1; }
.hero-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hero-media.canvas-ready canvas { opacity: 1; }
.hero-media.canvas-ready video, .hero-media.canvas-ready .hero-still { opacity: 0; }
.hero::after { background: linear-gradient(180deg,#06120f26 0%,#08130f4a 18%,#07100dc7 43%,#07100dae 64%,#08130f38 86%,#0c1411de 100%), radial-gradient(ellipse at center,transparent 35%,#06120f42 100%); }
.hero-content { position: relative; max-width: 1840px; animation: cover-enter .9s both; }
.eyebrow { display: inline-block; margin-bottom: 29px; font-size: 11px; letter-spacing: .32em; font-weight: 500; color: #e0ecde; text-shadow: 0 2px 14px #000; }
.hero h1 { font-size: clamp(24px,6.05vw,116px); letter-spacing: -.055em; line-height: 1.08; color: #f4f4e9; text-shadow: 0 4px 40px #0007; }
.hero-subtitle { white-space: nowrap; font-size: clamp(9px,2.05vw,30px); line-height: 1.5; margin-top: 22px; color: #e1e8dc; text-shadow: 0 2px 18px #000; }
.hero-byline { margin: 34px auto 0; max-width: 1080px; text-shadow: 0 2px 12px #000; }
.hero-authors { display: grid; grid-template-columns: repeat(4,max-content); justify-content: center; gap: 12px 32px; padding: 0; margin: 0; list-style: none; font-size: clamp(14px,1.35vw,20px); font-weight: 500; }
.hero-authors li { white-space: nowrap; }
.hero-authors a { border-bottom: 1px solid #d2e5c347; transition: color .2s, border-color .2s; }
.hero-authors a:hover { color: #cee5bd; border-color: #cee5bd; }
.hero-authors sup { margin-left: 4px; font-size: .6em; font-weight: 400; color: #d2e0ca; }
.hero-affiliations { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 20px; padding: 0; margin: 20px auto 0; max-width: 920px; list-style: none; font-size: clamp(11px,.91vw,14px); line-height: 1.6; color: #d8e0d3; }
.hero-affiliations li { white-space: nowrap; }
.hero-affiliations sup { margin-right: 4px; font-size: .7em; color: #c6dcb9; }
.author-notes { display: flex; justify-content: center; gap: 22px; margin: 9px 0 0; font-size: 10px; color: #becbb8; }
.hero-actions { margin-top: 28px; gap: 12px; }
.hero .button { padding: 14px 28px; border-radius: 4px; border-color: #dbe8db75; backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s; }
.hero .primary { background: var(--mint); color: #172b1c; border-color: var(--mint); box-shadow: 0 4px 22px #0002; }
.hero .primary:hover { background: #e5f4d9; }
.hero .secondary { background: #0b17136e; }
.hero .secondary:hover { background: #254135d9; border-color: #e1ecdf; }
.hero .button:not(:disabled):hover { transform: translateY(-2px); }
.hero .resource-pending { color: #e0e8db; cursor: default; opacity: .85; }
.hero .resource-pending:hover { background: #0b17136e; border-color: #dbe8db75; }
.resource-pending small { margin-left: 5px; padding-left: 5px; border-left: 1px solid #aabd9e70; font-size: 9px; color: #becfb4; }
.hero-bottom { position: absolute; bottom: 26px; left: 4.5%; right: 4.5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #d1dccd; font-size: 11px; }
.hero-explore { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; }
.hero-explore span { width: 36px; height: 1px; background: #c4d5bd; transition: width .2s; }
.hero-explore:hover span { width: 48px; }
.hero-pause { position: static; color: #d1dccd; border-color: #abc0a4; font-size: 11px; }
.section-wrap { max-width: 1320px; }
.overview { padding-top: 96px; padding-bottom: 88px; }
.section-kicker { color: #567561; letter-spacing: .19em; font-size: 10px; }
h2 { font-size: clamp(30px,3.4vw,48px); letter-spacing: -.04em; }
.section-heading { margin-bottom: 38px; }
.figure-panel { border: 1px solid #dfe5df; padding: 22px; border-radius: 6px; box-shadow: 0 18px 48px -30px #20322b40; }
.figure-panel figcaption { padding: 17px 0; margin-top: 18px; }
.abstract-band { background: #eaf0e6; border-color: #d9e2d6; }
.abstract-inner { max-width: 1320px; padding-top: 68px; padding-bottom: 68px; }
.abstract-inner h2 { font-size: 36px; }
.method { padding-top: 90px; padding-bottom: 94px; }
.operation { padding-top: 22px; border-top-color: #acc09f; transition: border-color .2s; }
.operation:hover { border-color: #365d43; }
.operation-top span:first-child { color: #638459; }
.operation h3 { font-size: 22px; letter-spacing: -.02em; }
.demos { --ink:#eef3e9; --muted:#abb8ad; --line:#ffffff24; --green-deep:#cee5bd; --green:#a5c395; --sage:#25342b; max-width:none; padding: 88px max(38px,calc((100% - 1244px) / 2)) 96px; background:var(--cinema); color:var(--ink); }
.demos .section-kicker { color: #aac596; }
.demos .section-heading { margin-bottom: 35px; }
.demo-jump { position: sticky; top: 68px; z-index: 20; margin-bottom: 28px; padding: 19px 0; background: #0c1411f5; backdrop-filter: blur(14px); gap: 15px 30px; }
.demo-jump a { color: #cde1bf; }
.backbone-heading { margin-top: 24px; border-bottom: 1px solid #718765; padding-bottom: 22px; }
.backbone-heading h3 { font-size: 46px; font-weight: 600; }
.backbone-group { position: relative; scroll-margin-top: 34px; }
.gallery-anchor { position: absolute; top: 0; scroll-margin-top: 34px; }
.collection-heading h4 { font-size: 26px; letter-spacing: -.025em; }
.demo-collection { scroll-margin-top: 34px; }
.comparison-grid { gap: 52px; }
.comparison { background: transparent; padding-bottom: 35px; }
.comparison-heading { padding-bottom: 16px; }
.method-switch select, .speed-select, .icon-button { background: #17221c; color: #e6ede0; border-color: #445448; }
.icon-button:hover { background: #2c3c2e; }
.method-switch select { min-width: 150px; }
.highlight-jump { color: #ef9b8e; border-color: #94544c; }
.highlight-jump:hover { color: #ffc3b9; }
.video-pair { gap: 0; }
.video-pane { background: #1e2a23; border-radius: 0; }
.video-pane figcaption { padding: 12px 15px; }
.smi-pane { background: #d3e4c4; color: #22361e; }
.smi-pane small { opacity: .85; }
.play-button { color: #162710; font-weight: 600; }
.play-button:hover { background: #e4f4d4; }
.timeline { background: linear-gradient(to right,#acc798 var(--progress,0%),#364438 var(--progress,0%)); }
.timeline::-webkit-slider-thumb { border-color: #0c1411; }
.timeline::-moz-range-thumb { border-color: #0c1411; }
.comparison:fullscreen { background: #0c1411; }
.playback-error { color: #ffb1a7; }
.resources { padding-top: 86px; padding-bottom: 86px; }
.resource-row { padding: 28px 0; }
.resource-row h3 { font-size: 19px; }
.resource-row.available { transition: padding .2s, background .2s; }
.resource-row.available:hover { padding-left: 12px; padding-right: 12px; background: #f1f5ed; }
footer { max-width: 1320px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s, transform .65s; }
.reveal.in-view { opacity: 1; transform: none; }
@keyframes cover-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width: 900px) {
  .demos { padding-left:26px; padding-right:26px; }
  .hero { min-height:560px; }
  .figure-panel { padding:14px; }
  .operation h3 { font-size:20px; }
  .abstract-inner h2 { font-size:29px; }
}
@media (max-width: 760px) {
  .hero { height:calc(100svh - 68px); min-height:580px; max-height:840px; padding:70px 3% 95px; }
  .hero::after { background:linear-gradient(180deg,#06120f26 0%,#07100d2e 21%,#07100dcf 40%,#07100dc4 66%,#07100d24 84%,#0c1411b8 100%); }
  .hero h1 { font-size:6.15vw; }
  .hero-subtitle { font-size:2.38vw; margin-top:20px; }
  .hero-byline { margin-top:28px; }
  .hero-authors { gap:12px 18px; font-size:13px; }
  .hero-affiliations { max-width:580px; gap:3px 12px; margin-top:17px; font-size:10px; }
  .hero .button { padding:12px 20px; font-size:12px; }
  .eyebrow { font-size:10px; letter-spacing:.2em; }
}
@media (max-width: 560px) {
  html { scroll-padding-top:130px; }
  .site-header { min-height:64px; padding-top:16px; padding-bottom:16px; }
  .hero { min-height:560px; max-height:800px; height:calc(100svh - 64px); }
  .hero-subtitle { font-size:2.38vw; }
  .hero-authors { grid-template-columns:repeat(2,max-content); gap:12px 24px; font-size:14px; }
  .hero-affiliations { gap:2px 10px; font-size:9px; max-width:370px; }
  .hero-affiliations li:first-child { flex-basis:100%; }
  .author-notes { font-size:9px; gap:16px; }
  .hero-actions { margin-top:22px; gap:8px; }
  .hero .button { padding:11px 12px; font-size:11px; }
  .hero-bottom { bottom:20px; font-size:10px; }
  .hero-explore, .hero-pause { font-size:10px; }
  .hero-explore span { width:23px; }
  .overview { padding-top:52px; padding-bottom:48px; }
  .section-heading { margin-bottom:26px; }
  .figure-panel { padding:8px; border-radius:3px; }
  .figure-panel figcaption { padding:10px 0; margin-top:10px; }
  .abstract-inner { padding:40px 20px; }
  .abstract-inner h2 { font-size:27px; }
  .method { padding-top:50px; padding-bottom:52px; }
  .operation h3 { font-size:17px; }
  .demos { padding:52px 20px 58px; }
  .demo-jump { top:64px; gap:12px 16px; padding:15px 0; }
  .backbone-heading h3 { font-size:35px; }
  .collection-heading h4 { font-size:21px; }
  .comparison-grid { gap:35px; }
  .method-switch select { min-width:0; }
  .video-pair { gap:0; }
  .video-pane figcaption { padding:9px; }
  .resources { padding-top:48px; padding-bottom:48px; }
  .resource-row h3 { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}