/* Focused feature pages keep the assignment itself at the center. */
html:root body.feature-page .feature-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
html:root body.feature-page .feature-breadcrumb a { color: var(--ink); text-underline-offset: 4px; }
html:root body.feature-page .feature-example { padding-block: 24px 0; scroll-margin-top: 110px; }
html:root body.feature-page .feature-example h2 { max-width: 760px; margin: 0 auto 40px; font: 650 clamp(30px, 3.1vw, 44px)/1.18 Manrope, sans-serif; letter-spacing: -.04em; text-align: center; text-wrap: balance; }
html:root body.feature-page .feature-demo { position: relative; max-width: 1180px; margin: 0 auto; }
html:root body.feature-page .feature-demo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
html:root body.feature-page .feature-demo-wide { width: 100%; }
html:root body.feature-page .feature-demo-mobile { display: none; }
html:root body.feature-page .feature-demo-frames { position: relative; }
html:root body[data-page="feature-questions"] .feature-demo-card { --demo-card-ratio: 1408/1780; }
html:root body[data-page="feature-essays"] .feature-demo-card,
html:root body[data-page="feature-discussions"] .feature-demo-card { --demo-card-ratio: 1408/1884; }
html:root body.feature-page .feature-demo-frames > img { width: 100%; }
html:root body.feature-page [data-demo-frame="ready"],
html:root body.feature-page [data-demo-frame="working"] { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
html:root body.feature-page .feature-demo-play { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; padding: 0; border-radius: 12px; background: transparent; cursor: pointer; }
html:root body.feature-page .feature-demo-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
html:root body.feature-page .feature-demo-play[hidden] { display: none; }
html:root body.feature-page .feature-demo-play:disabled { cursor: progress; }
html:root body.feature-page [data-demo-playing] [data-demo-frame="review"] { animation: feature-demo-review 4.8s ease-in-out both; }
html:root body.feature-page [data-demo-playing] [data-demo-frame="ready"] { animation: feature-demo-ready 4.8s ease-in-out both; }
html:root body.feature-page [data-demo-playing] [data-demo-frame="working"] { animation: feature-demo-working 4.8s ease-in-out both; }
html:root body.feature-page [data-demo-paused] [data-demo-frame] { animation-play-state: paused; }
@keyframes feature-demo-ready { 0%, 24% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes feature-demo-working { 0%, 24% { opacity: 0; } 36%, 66% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes feature-demo-review { 0%, 66% { opacity: 0; } 80%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html:root body.feature-page [data-demo-playing] [data-demo-frame] { animation: none; }
  html:root body.feature-page .feature-demo-play { display: none; }
}
html:root body.feature-page .feature-details { padding-block: 72px 96px; }
html:root body.feature-page .feature-details-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
html:root body.feature-page .feature-details article { min-width: 0; border-top: 1px solid var(--line); padding-top: 28px; }
html:root body.feature-page .feature-details h3 { margin: 0 0 16px; font: 650 23px/1.3 Manrope, sans-serif; letter-spacing: -.025em; }
html:root body.feature-page .feature-details p { margin: 0 0 14px; color: var(--muted); font-size: 16px; line-height: 1.75; }
html:root body.feature-page .feature-details .link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 650; text-underline-offset: 4px; }
@media (max-width: 960px) {
  html:root body.feature-page .feature-details-list { gap: 28px; }
  html:root body.feature-page .feature-details h3 { font-size: 21px; }
}
@media (max-width: 760px) {
  html:root body.feature-page .feature-example { padding-top: 24px; scroll-margin-top: 88px; }
  html:root body.feature-page .feature-example h2 { margin-bottom: 28px; font-size: 32px; }
  html:root body.feature-page .feature-demo-wide { display: none; }
  html:root body.feature-page .feature-demo-mobile { display: grid; gap: 24px; justify-items: center; max-width: 520px; margin: auto; }
  html:root body.feature-page .feature-demo-assignment { width: 100%; }
  html:root body.feature-page .feature-demo-card { width: min(100%, 352px); }
  html:root body.feature-page [data-feature-demo] .feature-demo-card { aspect-ratio: var(--demo-card-ratio); }
  html:root body.feature-page .feature-details { padding-block: 56px; }
  html:root body.feature-page .feature-details-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html:root body.feature-page .feature-details article { padding-top: 24px; }
  html:root body.feature-page .feature-details h3 { margin-bottom: 12px; font-size: 23px; }
}