/* R4: the complete royal-purple presentation, with readable UI and full-frame media. */
@media screen {
  :root {
    --r4-nav-height: 144px;
    --r4-surface: #120b1e;
    --r4-surface-raised: #1b102b;
    --r4-ink: #f7f2ff;
    --r4-soft: #cbbbdc;
    --r4-lavender: #d2b0ff;
    --r4-border: rgba(198,159,249,.23);
  }
  html { scroll-padding-top: var(--r4-nav-height); }
  .r4-site { color: var(--r4-ink); background: radial-gradient(ellipse at 83% 0%,rgba(101,37,179,.19),transparent 34%),radial-gradient(ellipse at 4% 40%,rgba(72,30,112,.08),transparent 30%),#090610; }
  .r4-site main { width: 100%; max-width: none; }
  .r4-site .section-shell,.r4-site .nav-shell { width: var(--shell); max-width: none; }
  .r4-site :is(main,section,article,figure,nav,header,footer,div) { min-width: 0; }
  .r4-site [id] { scroll-margin-top: var(--r4-nav-height); }
  .r4-site [hidden] { display: none !important; }
  .r4-site :focus-visible { outline: 3px solid #e4cbff; outline-offset: 5px; }
  .r4-site .section-label { font-size: .8rem; letter-spacing: .115em; line-height: 1.55; color: #cdb1ee; }
  .r4-site .button { min-height: 50px; padding: 14px 21px; font-size: .9rem; line-height: 1.35; border-radius: 10px; white-space: normal; text-align: center; }
  .r4-site .button-primary { background: linear-gradient(115deg,#e0c5ff,#ba8fed); color: #21102f; border: 1px solid #d2b0ff; box-shadow: 0 7px 22px rgba(103,50,161,.18); }
  .r4-site .button-primary:hover { background: linear-gradient(115deg,#ead6ff,#cda7f7); box-shadow: 0 10px 28px rgba(133,75,207,.25); }
  .r4-site .button-ghost { background: rgba(29,18,42,.68); border-color: var(--r4-border); color: #eee1ff; }
  .r4-site .button-ghost:hover { background: #26163a; border-color: #b994e6; }
  .r4-site :is(.text-link,.v3-text-link,.everyone-link) { color: var(--r4-lavender); font-size: .9rem; line-height: 1.55; }
  .r4-site .fine-print { color: var(--r4-soft); font-size: .86rem; line-height: 1.7; }

  /* A compact navigation that wraps before it can widen the document. */
  .r4-site .site-header { background: rgba(10,6,17,.92); border-bottom: 1px solid rgba(194,153,246,.1); backdrop-filter: blur(20px); }
  .r4-site .site-header.is-scrolled { background: rgba(10,6,17,.97); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
  .r4-site .nav-shell { min-height: 78px; gap: 20px; justify-content: space-between; }
  .r4-site .brand { min-width: 0; flex: 0 0 auto; gap: 10px; }
  .r4-site .brand img { width: 46px; height: 46px; }
  .r4-site .brand-copy strong { font-size: 1rem; letter-spacing: -.02em; }
  .r4-site .brand-copy small { font-size: .7rem; color: #bca5d0; letter-spacing: .035em; }
  .r4-site .primary-nav { flex: 0 1 auto; gap: 2px; min-width: 0; }
  .r4-site .primary-nav > a:not(.nav-cta) { padding: 10px 10px; min-height: 42px; font-size: .82rem; line-height: 1.35; white-space: nowrap; }
  .r4-site .primary-nav a[aria-current] { color: #e1c8ff; background: rgba(179,123,245,.13); box-shadow: inset 0 -2px 0 #c496ff; border-radius: 7px; }
  .r4-site .primary-nav .nav-cta { min-height: 42px; padding: 10px 15px; margin-left: 9px; font-size: .8rem; white-space: nowrap; border-radius: 8px; }
  .r4-site .command-key { min-height: 42px; padding: 8px 10px; margin-left: 4px; font-size: .78rem; gap: 7px; }
  .r4-site .command-key kbd { font-size: .68rem; }
  .r4-site .status-ribbon { min-height: 35px; padding: 7px var(--page-gutter); gap: 10px; color: #ba9cd5; background: rgba(132,77,205,.055); font-size: .76rem; line-height: 1.4; }
  .r4-site .status-ribbon strong { color: #dbc0fb; font-size: .76rem; }
  .r4-site .status-ribbon a { color: #e1c8ff; font-size: .76rem; }
  .r4-reading-progress { height: 2px; width: 100%; position: absolute; inset: auto 0 -1px; background: transparent; pointer-events: none; }
  .r4-reading-progress::after { content: ''; display: block; height: 100%; width: var(--page-progress,0%); background: linear-gradient(90deg,#8c4ed2,#d8b3ff); }

  /* The browser receives most of the hero's usable width. */
  .r4-site .v3-hero { grid-template-columns: minmax(0,.57fr) minmax(0,1.43fr); gap: clamp(28px,3vw,66px); align-items: start; padding-block: clamp(32px,3.2vw,60px) 36px; min-height: 0; }
  .r4-site .hero-copy { padding-top: 13px; }
  .r4-site .v3-hero h1 { font-size: clamp(3.5rem,5.05vw,7.8rem); line-height: 1.04; letter-spacing: -.06em; margin: 23px 0 25px; }
  .r4-site .v3-hero .hero-title-top { font-size: .44em; letter-spacing: -.035em; line-height: 1.25; }
  .r4-site .v3-hero h1 em { font-size: .66em; line-height: 1.2; background-image: linear-gradient(110deg,#e1c2ff,#b982f2 70%,#e3d0ff); }
  .r4-site .hero-kicker { display: flex; flex-wrap: wrap; font-size: .74rem; line-height: 1.5; letter-spacing: .035em; gap: 8px; margin-bottom: 20px; }
  .r4-site .v3-badge { padding: 7px 10px 7px 12px; font-size: .78rem; letter-spacing: .09em; border-radius: 6px; background: rgba(169,104,245,.12); }
  .r4-site .v3-badge b { font-size: .78rem; }
  .r4-site .v3-hero .hero-lede { color: #e9ddf7; font-size: clamp(1.1rem,1.3vw,1.4rem); max-width: 31ch; line-height: 1.55; margin-bottom: 14px; font-weight: 600; }
  .r4-hero-description { max-width: 48ch; color: #c3b0d5; font-size: 1rem; line-height: 1.75; margin: 0 0 25px; }
  .r4-site .hero-actions { gap: 10px; align-items: stretch; }
  .r4-site .v3-hero .hero-actions { flex-direction: column; align-items: flex-start; }
  .r4-site .v3-hero .hero-actions .button { min-width: min(100%,246px); justify-content: center; }
  .r4-watch-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .r4-site .v3-hero-facts { gap: 13px; margin: 27px 0 18px; padding-block: 19px; border-color: var(--r4-border); }
  .r4-site .v3-hero-facts strong { font-size: clamp(1.3rem,1.6vw,1.9rem); color: #dbb9ff; line-height: 1.2; }
  .r4-site .v3-hero-facts > span { color: #c2adD6; font-size: .79rem; line-height: 1.45; gap: 7px; }
  .r4-site .hero-stage { min-height: 0; padding: 0; }
  .r4-site .stage-light { inset: -4% 0 0; border-radius: 30px; }
  .r4-site .v3-demo-heading { margin-bottom: 16px; gap: 15px; align-items: end; }
  .r4-site .v3-demo-heading > div > span { font-size: .72rem; letter-spacing: .12em; margin-bottom: 7px; color: #b99bcf; }
  .r4-site .v3-demo-heading strong { font-size: clamp(1.2rem,1.8vw,1.9rem); font-weight: 650; line-height: 1.25; }
  .r4-site .v3-demo-quality { font-size: .77rem; font-weight: 600; white-space: nowrap; padding: 7px 9px; background: rgba(176,130,236,.07); border-color: var(--r4-border); }
  .r4-site .v3-demo-frame { border-radius: 14px; border-color: rgba(191,147,247,.48); background: #0a0710; box-shadow: 0 28px 75px rgba(0,0,0,.4),0 0 45px rgba(113,43,190,.13); scroll-margin-top: var(--r4-nav-height); }
  .r4-site .v3-player-top { min-height: 43px; padding: 11px 15px; gap: 14px; background: linear-gradient(110deg,#241433,#140d20); }
  .r4-site .v3-player-top strong { display: flex; align-items: center; gap: 8px; font-size: .8rem; letter-spacing: 0; white-space: nowrap; }
  .r4-live-mark { display: block; width: 6px; height: 6px; border-radius: 50%; background: #ce9bff; box-shadow: 0 0 12px rgba(199,139,255,.45); }
  .r4-site .v3-player-top > span { font-size: .77rem; letter-spacing: 0; color: #c6afd9; text-transform: none; }
  .r4-player-current { margin-left: auto; }
  .r4-player-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .r4-site #browser-demo { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: contain; background: #07050c; }
  .r4-demo-progress { height: 3px; width: 100%; background: #251632; }
  .r4-demo-progress::before { content: ''; display: block; height: 100%; width: var(--demo-progress,0%); background: linear-gradient(90deg,#a768e9,#e6c7ff); }
  .r4-site .v3-player-caption { padding: 16px; gap: 12px; border-top: 0; }
  .r4-site .v3-player-caption strong { font-size: .92rem; font-weight: 650; }
  .r4-site .v3-player-caption p { font-size: .8rem; color: #c0aaca; margin-top: 5px; }
  .r4-site .v3-player-actions { gap: 7px; }
  .r4-site .v3-player-actions > :is(button,a) { min-height: 42px; padding: 10px 12px; border-radius: 7px; font-size: .83rem; font-weight: 650; line-height: 1.35; }
  .r4-site .v3-player-actions [data-demo-toggle] { color: #210c32; background: #d0a9fa; border-color: #d0a9fa; }
  .r4-site .v3-video-error { font-size: .9rem; line-height: 1.6; padding: 16px; }
  .r4-chapters-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 23px 0 12px; font-size: .8rem; color: #d5bee9; }
  .r4-chapters-heading > span:last-child { color: #b49ac7; }
  .r4-site .r4-demo-chapters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; background: none; border: 0; padding: 0; }
  .r4-site .r4-demo-chapters button { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--r4-border); border-radius: 9px; background: #130b20; color: #cdb9df; cursor: pointer; grid-column: auto; }
  .r4-site .r4-demo-chapters button:last-child { grid-column: auto; }
  .r4-site .r4-demo-chapters button:hover { border-color: #b18cd9; background: #211031; }
  .r4-site .r4-demo-chapters button.is-active { background: #2a1540; border-color: #d3a9ff; box-shadow: inset 0 -2px 0 #d3a9ff; }
  .r4-chapter-image { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: #08050d; border-bottom: 1px solid rgba(194,153,246,.13); }
  .r4-chapter-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .r4-site .r4-chapter-image .chapter-time { position: absolute; inset: auto 5px 5px auto; font-size: .73rem; line-height: 1.2; padding: 3px 5px; border-radius: 4px; color: #f2dfff; background: rgba(12,6,22,.96); }
  .r4-chapter-copy { display: block; padding: 9px 10px 11px; text-align: left; }
  .r4-chapter-copy strong { display: block; font-size: .81rem; line-height: 1.4; font-weight: 650; }
  .r4-chapter-copy small { display: block; font-size: .73rem; line-height: 1.4; margin-top: 4px; color: #ae93c4; }
  .r4-site .v3-demo-description { font-size: .86rem; color: #bea2d3; margin-top: 9px; }
  .r4-site .v3-demo-description summary { min-height: 44px; padding-block: 12px; }
  .r4-site .v3-demo-description ol { border-top: 1px solid var(--r4-border); padding-top: 18px; }
  .r4-site .v3-demo-description li span { font-size: .85rem; line-height: 1.65; }
  .r4-site #demo:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; background: #06040b; }
  .r4-site #demo:fullscreen #browser-demo { flex: 1 1 0; width: 100%; height: 0; min-height: 0; aspect-ratio: auto; }
  .r4-site #demo:fullscreen .v3-player-top,.r4-site #demo:fullscreen .v3-player-meta { flex: 0 0 auto; }
  .r4-site #demo:fullscreen .v3-player-caption { justify-content: space-between; padding-inline: max(16px,env(safe-area-inset-left)); }

  /* Section hierarchy: open editorial spacing, substantial product images. */
  .r4-site .start-paths { margin-bottom: 14px; border-block-color: var(--r4-border); }
  .r4-site .start-paths > a { min-height: 107px; gap: 16px; padding: 24px; }
  .r4-site .start-paths > a:first-child { padding-left: 0; }
  .r4-site .start-path-index { font-size: .8rem; color: #b58bd9; }
  .r4-site .start-paths strong { font-size: 1.02rem; }
  .r4-site .start-paths small { font-size: .86rem; color: #c0aacc; }
  .r4-site .start-path-arrow { font-size: 1.5rem; transition: transform .18s ease; }
  .r4-site .start-paths a:hover .start-path-arrow { transform: translateX(4px); }
  .r4-site :is(.mission,.modes,.native,.principles,.creator-section,.development-section,.faq-section,.v3-local-oi) { padding-block: clamp(58px,5.5vw,108px); }
  .r4-site .flagship-statement { padding-block: 56px 37px; }
  .r4-site .statement-grid { padding-top: 14px; gap: clamp(25px,5vw,95px); }
  .r4-site .statement-grid h2 { font-size: clamp(2.3rem,3.55vw,4.3rem); }
  .r4-site .statement-grid p { font-size: 1rem; line-height: 1.8; color: #cdbbde; }
  .r4-site .statement-grid .statement-accent { color: #e0c7f7; }
  .r4-site .everyone-section { padding-block: 34px 64px; }
  .r4-site :is(.section-heading,.screenshot-heading) { align-items: end; margin-bottom: 30px; gap: clamp(24px,5vw,80px); }
  .r4-site :is(.section-heading h2,.screenshot-heading h2) { font-size: clamp(2.3rem,3.7vw,4.8rem); line-height: 1.08; letter-spacing: -.045em; }
  .r4-site :is(.section-heading > p,.screenshot-heading > p) { font-size: 1rem; line-height: 1.8; color: #c8b3da; max-width: 65ch; }
  .r4-site :is(.everyone-grid,.mission-feature-grid,.native-grid,.development-grid) { gap: 16px; }
  .r4-site .everyone-card { padding: 25px; border-radius: 14px; background: linear-gradient(145deg,rgba(40,22,57,.66),rgba(17,10,26,.85)); border-color: rgba(193,148,239,.19); }
  .r4-site .everyone-card h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 12px; }
  .r4-site .everyone-card p { font-size: .97rem; color: #c5b1d5; line-height: 1.75; }
  .r4-site .everyone-index { font-size: .76rem; margin-bottom: 17px; }
  .r4-site .everyone-link { font-size: .86rem; padding-top: 16px; }
  .r4-site .mission-feature { border-radius: 12px; background: rgba(26,14,40,.65); padding: 25px; border-color: rgba(193,148,239,.18); }
  .r4-site .mission-feature .feature-index { font-size: .84rem; margin-bottom: 20px; }
  .r4-site .mission-feature h3 { font-size: 1.4rem; line-height: 1.3; }
  .r4-site .mission-feature p { font-size: .97rem; color: #c9b6db; line-height: 1.75; }
  .r4-site .screenshot-showcase { padding-top: 62px; }
  .r4-site .screenshot-note { font-size: .9rem; line-height: 1.7; color: #c6b0d8; margin-bottom: 26px; }
  .r4-site .v3-gallery .showcase-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 13px; }
  .r4-site .v3-gallery .showcase-tab { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 10px 13px; border-radius: 10px; font-size: .91rem; background: #150c21; }
  .r4-showcase-thumb { flex: 0 0 auto; width: 70px; height: 40px; object-fit: contain; background: #06040b; border: 1px solid rgba(193,153,235,.18); border-radius: 4px; }
  .r4-showcase-meta { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .r4-showcase-number { font-size: .68rem; font-weight: 650; color: #ba90dc; letter-spacing: .07em; }
  .r4-showcase-label { font-size: .91rem; line-height: 1.35; font-weight: 650; }
  .r4-site .v3-gallery .showcase-tab[aria-selected="true"] { background: #2a163e; border-color: #d0a7ff; color: #f3e4ff; }
  .r4-site .v3-gallery .screenshot-card { border-color: var(--r4-border); border-radius: 15px; background: linear-gradient(125deg,#140c20,#1d0f2b); }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-card { grid-template-columns: minmax(0,2.6fr) minmax(0,.9fr); gap: 0; }
  .r4-site .v3-gallery .screenshot-button { display: block; width: 100%; min-height: 0; aspect-ratio: 16/9; background: #08050e; color: #f4e5ff; text-decoration: none; }
  .r4-site .v3-gallery .screenshot-button img { width: 100%; height: 100%; object-fit: contain; transform: none; filter: none; }
  .r4-site .v3-gallery .screenshot-button::after { display: none; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy { padding: clamp(20px,2.3vw,44px); }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy h3 { font-size: clamp(1.55rem,2.2vw,3rem); line-height: 1.15; letter-spacing: -.04em; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy p { font-size: 1rem; color: #cbb4df; line-height: 1.8; }
  .r4-site .screenshot-copy > span { font-size: .79rem; letter-spacing: .025em; color: #c59be9; }
  .r4-site .v3-capture-label { font-size: .73rem; letter-spacing: .06em; margin-top: 25px; color: #bea0d1; }
  .r4-site .screenshot-zoom { font-size: .79rem; min-height: 36px; padding: 9px 12px; border-radius: 7px; background: rgba(13,6,24,.94); }
  .r4-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 4px 0; }
  .r4-gallery-toolbar > button { min-height: 43px; padding: 10px 16px; border: 1px solid var(--r4-border); border-radius: 8px; background: #190e27; color: #e6cdfb; font-size: .87rem; cursor: pointer; }
  .r4-gallery-toolbar > button:hover { border-color: #c49ce8; background: #2b173e; }
  .r4-gallery-summary { display: flex; align-items: center; gap: 12px; color: #ceb5df; font-size: .86rem; }
  .r4-gallery-counter { font-variant-numeric: tabular-nums; color: #b78bd7; }
  .r4-gallery-current { font-weight: 650; }

  .r4-site .v3-mode-workbench { border-radius: 16px; border-color: var(--r4-border); }
  .r4-site .v3-mode-workbench .mode-tabs { padding: 12px; gap: 8px; background: rgba(25,13,39,.85); }
  .r4-site .v3-mode-workbench .mode-tab { min-height: 83px; padding: 13px; border-radius: 9px; }
  .r4-site .v3-mode-workbench .mode-tab strong { font-size: .92rem; line-height: 1.4; }
  .r4-site .v3-mode-workbench .mode-tab small { font-size: .8rem; color: #c0a1d5; line-height: 1.4; }
  .r4-site .v3-mode-content { grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); padding: clamp(25px,3vw,56px); gap: clamp(26px,3.4vw,62px); }
  .r4-site .v3-mode-workbench .mode-panel h3 { font-size: clamp(1.8rem,2.7vw,3.4rem); line-height: 1.12; letter-spacing: -.04em; }
  .r4-site .v3-mode-workbench .mode-panel p:not(.mode-eyebrow) { font-size: 1rem; line-height: 1.8; color: #cbb6da; }
  .r4-site .mode-status { font-size: .8rem; padding: 6px 10px; }
  .r4-site .mode-eyebrow { font-size: .8rem; }
  .r4-site .v3-mode-workbench .mode-actions span { font-size: .85rem; padding: 8px 11px; line-height: 1.4; border-radius: 7px; }
  .r4-site .v3-feature-shot { display: block; width: 100%; border-radius: 10px; text-decoration: none; background: #090611; }
  .r4-site .v3-feature-shot img { display: block; width: 100%; height: auto; object-fit: contain; }
  .r4-shot-caption { margin: 16px 0 0; font-size: .83rem; color: #bfa3d1; line-height: 1.65; }
  .r4-site .v3-section-note { margin-top: 9px; font-size: .9rem; max-width: 100ch; color: #cbb6dc; line-height: 1.7; }
  .r4-site .v3-oi-intro h2 { font-size: clamp(2.3rem,3.7vw,4.8rem); line-height: 1.08; }
  .r4-site .v3-oi-intro > p:last-child { font-size: 1rem; line-height: 1.8; }
  .r4-site .v3-oi-content { grid-template-columns: minmax(0,1.6fr) minmax(0,.75fr); gap: clamp(27px,4vw,74px); }
  .r4-site .v3-mini-label { font-size: .78rem; letter-spacing: .08em; }
  .r4-site .v3-oi-copy h3 { font-size: clamp(1.85rem,2.45vw,3.1rem); line-height: 1.15; }
  .r4-site .v3-oi-copy > p { font-size: 1rem; line-height: 1.8; }
  .r4-site .v3-oi-copy dt { font-size: .95rem; }
  .r4-site .v3-oi-copy dd { font-size: .9rem; line-height: 1.7; }
  .r4-site .v3-oi-copy dl > div { padding-block: 17px; }
  .r4-site .pretty-face { border-radius: 18px; min-height: 0; background: radial-gradient(ellipse at 20% 40%,rgba(133,67,191,.18),transparent 50%),#150b23; border-color: var(--r4-border); }
  .r4-site .pretty-copy { width: 100%; max-width: none; padding: clamp(30px,5vw,80px); }
  .r4-site .pretty-copy h2 { font-size: clamp(2.2rem,3.7vw,4.4rem); line-height: 1.12; }
  .r4-site .skin-manifesto p { font-size: 1.12rem; line-height: 1.7; }
  .r4-site .manifesto-caption { font-size: 1rem; line-height: 1.75; }
  .r4-site .native-card { border-radius: 14px; min-height: 0; padding: clamp(25px,2.4vw,46px); }
  .r4-site .native-card-large { min-height: 0; }
  .r4-site .native-card h3 { font-size: 1.5rem; line-height: 1.25; }
  .r4-site .native-card-large h3 { font-size: clamp(2rem,3vw,3.6rem); line-height: 1.1; }
  .r4-site .native-card p { font-size: 1rem; line-height: 1.8; color: #c9b6dc; }
  .r4-site :is(.card-kicker,.native-lines span,.feature-status) { font-size: .81rem; line-height: 1.5; }
  .r4-site .principle { padding-block: 26px; }
  .r4-site .principle h3 { font-size: 1.35rem; line-height: 1.35; }
  .r4-site .principle p { font-size: 1rem; line-height: 1.75; }
  .r4-site :is(.creator-panel,.development-card) { border-radius: 15px; padding: clamp(25px,3vw,54px); }
  .r4-site :is(.creator-panel,.development-card) h3 { font-size: clamp(1.8rem,2.4vw,3rem); line-height: 1.15; }
  .r4-site :is(.creator-panel,.development-card) p { font-size: 1rem; line-height: 1.8; }
  .r4-site .skin-journey { border-radius: 11px; padding: 23px 28px; }
  .r4-site .skin-journey li { font-size: .9rem; }
  .r4-site .release-panel { border-radius: 18px; border-color: rgba(197,153,243,.33); padding: clamp(29px,4vw,72px); }
  .r4-site .release-copy > p:not(.section-label) { font-size: 1rem; line-height: 1.8; }
  .r4-site .release-states { gap: 12px; }
  .r4-site .release-states article { padding: 20px 22px; border-radius: 11px; }
  .r4-site .release-states article > span { font-size: .8rem; }
  .r4-site .release-states h3 { font-size: 1.1rem; }
  .r4-site .release-states p { font-size: .9rem; line-height: 1.6; }
  .r4-faq-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  .r4-site .r4-faq-heading h2 { max-width: none; font-size: clamp(2.2rem,3.6vw,4.5rem); line-height: 1.1; margin: 0; }
  .r4-faq-heading > p { font-size: 1rem; color: #c5afda; line-height: 1.7; margin: 0; }
  .r4-site .faq-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: clamp(25px,5vw,80px); align-items: start; }
  .r4-site .faq-list details { border-color: var(--r4-border); }
  .r4-site .faq-list summary { font-size: 1rem; line-height: 1.55; min-height: 65px; padding: 20px 31px 20px 0; }
  .r4-site .faq-list details p { font-size: .96rem; line-height: 1.8; padding: 0 22px 23px 0; color: #ccb8df; }
  .r4-site .faq-list details[open] summary { color: #e8cfff; }
  .r4-site .final-cta { width: var(--shell); display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(25px,4vw,65px); padding: clamp(29px,4vw,68px); border-radius: 18px; margin-block: 20px 45px; background: radial-gradient(ellipse at 15% 50%,rgba(157,83,230,.19),transparent 50%),linear-gradient(110deg,#251238,#130b20); }
  .r4-site .final-cta img { width: clamp(95px,10vw,200px); }
  .r4-site .final-cta h2 { font-size: clamp(2rem,3.4vw,4rem); line-height: 1.15; }
  .r4-site .final-cta h2 em { color: #d3acf8; font-style: normal; }
  .r4-site .final-cta p:not(.section-label) { font-size: 1rem; line-height: 1.7; }

  /* Resource pages continue the same product presentation. */
  .r4-site .policy-hero { min-height: 0; padding-block: clamp(43px,5vw,80px); grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(28px,5vw,86px); }
  .r4-site .policy-hero h1 { font-size: clamp(2.8rem,4.8vw,5.8rem); line-height: 1.08; }
  .r4-site .policy-hero p { font-size: 1.05rem; line-height: 1.8; }
  .r4-site .policy-hero-logo { width: clamp(170px,18vw,350px); }
  .r4-resource-preview { display: block; border: 1px solid rgba(192,148,247,.4); border-radius: 14px; overflow: hidden; background: #160d22; text-decoration: none; box-shadow: 0 25px 60px rgba(0,0,0,.3); }
  .r4-resource-preview > img { display: block; width: 100%; height: auto; object-fit: contain; }
  .r4-resource-preview > span { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 16px 18px; border-top: 1px solid var(--r4-border); }
  .r4-resource-preview svg { width: 22px; height: 22px; color: #dcb7ff; }
  .r4-resource-preview strong { font-size: .97rem; }
  .r4-resource-preview small { font-size: .84rem; color: #bea1d2; margin-left: auto; }
  .r4-resource-preview:hover { border-color: #d4acf8; }
  .r4-site .resource-jumps { gap: 9px; }
  .r4-site .resource-jump { font-size: .9rem; min-height: 48px; line-height: 1.5; border-radius: 8px; padding: 12px 16px; }
  .r4-site .resource-jumps-label { font-size: .8rem; }
  .r4-site .policy-panel { padding: clamp(25px,3vw,54px); border-radius: 15px; border-color: var(--r4-border); }
  .r4-site .policy-panel h2 { font-size: clamp(1.85rem,2.6vw,3.5rem); line-height: 1.15; }
  .r4-site .policy-panel > p,.r4-site .policy-panel li { font-size: 1rem; line-height: 1.8; }
  .r4-site .policy-card { border-radius: 10px; padding: 23px; }
  .r4-site .policy-card h3 { font-size: 1.17rem; line-height: 1.35; }
  .r4-site .policy-card p { font-size: .95rem; line-height: 1.75; }
  .r4-site :is(.resource-steps h3,.operational-model-card h3) { font-size: 1.17rem; line-height: 1.4; }
  .r4-site :is(.resource-steps p,.operational-model-card p) { font-size: .96rem; line-height: 1.75; }
  .r4-site .notice { font-size: .91rem; line-height: 1.75; border-radius: 9px; }
  .r4-breadcrumb { display: flex; flex-wrap: wrap; gap: 11px; padding-top: 29px; font-size: .85rem; color: #b69dc9; }
  .r4-breadcrumb a { text-decoration: none; color: #d9b9f4; }

  /* Full image inspection stays in the native dialog and keeps its own scroll. */
  .r4-site .lightbox { width: calc(100vw - 32px); max-width: none; max-height: calc(100dvh - 24px); padding: 54px 0 0; border-radius: 14px; border: 1px solid #72518b; background: #0b0712; overflow: auto; }
  .r4-site .lightbox::backdrop { background: rgba(4,2,9,.9); backdrop-filter: blur(10px); }
  .r4-site .lightbox-close { width: 40px; height: 40px; top: 7px; right: 10px; border: 1px solid var(--r4-border); border-radius: 7px; font-size: 1.5rem; }
  .r4-lightbox-viewport { display: flex; align-items: center; justify-content: center; width: 100%; height: min(70dvh,900px); overflow: auto; background: #040207; overscroll-behavior: contain; }
  .r4-site .lightbox .r4-lightbox-viewport > img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; border-radius: 0; }
  .r4-site .lightbox.is-zoomed .r4-lightbox-viewport { display: block; }
  .r4-site .lightbox.is-zoomed .r4-lightbox-viewport > img { width: auto; height: auto; max-width: none; max-height: none; margin: 0; object-fit: initial; }
  .r4-site .lightbox > p:not(.sr-only) { padding: 14px 18px; margin: 0; font-size: .9rem; color: #d4bddf; line-height: 1.6; }
  .r4-site .lightbox-controls { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 12px 18px 16px; }
  .r4-site :is(.lightbox-nav,.r4-lightbox-zoom,.r4-lightbox-original) { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border: 1px solid var(--r4-border); border-radius: 7px; background: #1c1029; color: #ead7fc; font-size: .85rem; line-height: 1.4; text-decoration: none; cursor: pointer; }
  .r4-site .lightbox-controls [data-lightbox-counter] { color: #c1a4d3; font-size: .82rem; padding-inline: 7px; }
  .r4-site .r4-lightbox-original { margin-left: auto; }
  .r4-site .r4-lightbox-zoom[aria-pressed="true"] { border-color: #d4a6ff; background: #341b47; }
  .r4-site .command-dialog { border-radius: 15px; border-color: var(--r4-border); background: #100918; }
  .r4-site .command-head strong { font-size: 1rem; }
  .r4-site .command-head small { font-size: .85rem; }
  .r4-site .command-item { padding: 15px; min-height: 65px; }
  .r4-site .command-item strong { font-size: .98rem; }
  .r4-site .command-item small { font-size: .85rem; line-height: 1.6; }
  .r4-site .command-item > span:last-child { font-size: .76rem; }
  .r4-site .command-foot { font-size: .79rem; }
  .r4-site .site-footer { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px 35px; padding-block: 30px 38px; }
  .r4-site .site-footer > p { font-size: .94rem; color: #b99dcc; }
  .r4-site .footer-brand strong { font-size: 1rem; }
  .r4-site .footer-brand span { font-size: .82rem; }
  .r4-footer-tools { display: flex; grid-column: 1/-1; align-items: center; justify-content: space-between; gap: 16px; padding-block: 15px; border-block: 1px solid rgba(194,152,240,.13); }
  .r4-back-top { font-size: .86rem; text-decoration: none; color: #d6b5ef; }
  .r4-site .motion-toggle { font-size: .82rem; min-height: 42px; padding: 10px 13px; line-height: 1.35; }
  .r4-site .site-footer nav { grid-column: 1/-1; gap: 10px 22px; }
  .r4-site .site-footer nav a { font-size: .86rem; min-height: 38px; display: inline-flex; align-items: center; }
  .r4-site :is(.v3-player-caption,.r4-chapter-copy,.screenshot-copy,.v3-mode-content,.v3-oi-copy,.policy-content,.site-footer) { overflow-wrap: anywhere; }
}

@media screen and (min-width: 1800px) {
  .r4-site .v3-hero { grid-template-columns: minmax(0,.61fr) minmax(0,1.39fr); }
  .r4-site .v3-hero .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .r4-site .v3-hero .hero-actions .button { min-width: 0; }
  .r4-site .r4-demo-chapters { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .r4-chapter-copy { padding: 11px 10px; }
  .r4-chapter-copy small { display: none; }
}
@media screen and (max-width: 1400px) {
  .r4-site .brand-copy small { font-size: .65rem; }
  .r4-site .primary-nav > a:not(.nav-cta) { padding-inline: 8px; font-size: .79rem; }
  .r4-site .primary-nav .nav-cta { font-size: .77rem; padding-inline: 11px; }
  .r4-site .command-key kbd { display: none; }
  .r4-site .v3-hero { grid-template-columns: minmax(0,.64fr) minmax(0,1.36fr); }
  .r4-site .v3-player-caption { align-items: flex-start; }
  .r4-site .v3-player-actions { width: 100%; }
  .r4-site .v3-player-actions > :is(button,a) { flex: 1 1 auto; }
  .r4-chapter-copy small { display: none; }
  .r4-site .v3-mode-workbench .mode-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media screen and (max-width: 1240px) {
  .r4-site .nav-shell { flex-wrap: wrap; gap: 0; min-height: 74px; }
  .r4-site .menu-toggle { display: block; flex: 0 0 auto; min-width: 44px; min-height: 44px; margin-left: auto; }
  .r4-site .primary-nav { display: none; position: absolute; inset: calc(100% - 1px) var(--page-gutter) auto; width: auto; max-height: calc(100dvh - 145px); overflow-y: auto; margin: 0; padding: 16px; gap: 7px; border: 1px solid var(--r4-border); border-radius: 0 0 13px 13px; background: #140b21; box-shadow: 0 25px 45px rgba(0,0,0,.35); }
  .r4-site .primary-nav.is-open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .r4-site .primary-nav > a:not(.nav-cta),.r4-site .command-key { min-width: 0; min-height: 46px; padding: 12px; font-size: .95rem; white-space: normal; margin: 0; border-radius: 7px; }
  .r4-site .primary-nav .nav-cta { grid-column: 1/-1; display: flex; justify-content: center; min-height: 46px; margin: 4px 0 0; padding: 12px; font-size: .95rem; }
  .r4-site .v3-hero { grid-template-columns: minmax(0,.69fr) minmax(0,1.31fr); gap: 28px; }
  .r4-site .v3-hero h1 { font-size: clamp(3.4rem,5.6vw,4.5rem); }
  .r4-site .v3-demo-heading { flex-wrap: wrap; gap: 10px; }
  .r4-site .v3-demo-quality { font-size: .74rem; }
  .r4-site .v3-player-top { gap: 8px; flex-wrap: wrap; }
  .r4-site .r4-player-current { display: none; }
  .r4-site .r4-player-clock { margin-left: auto; }
  .r4-site .r4-demo-chapters { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .r4-chapter-copy { padding: 8px 7px; }
  .r4-chapter-copy strong { font-size: .78rem; }
  .r4-showcase-thumb { width: 52px; height: 30px; }
  .r4-site .v3-gallery .showcase-tab { padding: 10px; gap: 9px; }
  .r4-showcase-label { font-size: .85rem; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-card { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
  .r4-site .v3-oi-content { grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); }
}
@media screen and (max-width: 960px) {
  .r4-site .v3-hero { grid-template-columns: minmax(0,1fr); gap: 31px; padding-top: 24px; }
  .r4-site .hero-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); column-gap: 28px; padding-top: 0; align-items: start; }
  .r4-site .hero-kicker { grid-column: 1/-1; margin-bottom: 16px; }
  .r4-site .v3-badge { grid-column: 1; width: fit-content; margin-bottom: 6px; }
  .r4-site .v3-hero h1 { grid-column: 1; grid-row: 3/6; font-size: clamp(3.8rem,7vw,5rem); margin: 15px 0 0; }
  .r4-site .v3-hero .hero-lede { grid-column: 2; grid-row: 2/4; margin-top: 4px; max-width: none; }
  .r4-hero-description { grid-column: 2; grid-row: 4/6; max-width: none; margin-bottom: 0; }
  .r4-site .v3-hero .hero-actions { grid-column: 1/-1; flex-direction: row; align-items: stretch; margin-top: 24px; }
  .r4-site .v3-hero .hero-actions .button { min-width: 0; }
  .r4-site .v3-hero-facts { grid-column: 1/-1; max-width: none; margin-block: 20px 10px; }
  .r4-site .v3-hero-facts strong { font-size: 1.6rem; }
  .r4-site .v3-hero-facts > span { font-size: .86rem; }
  .r4-site .hero-copy > .v3-text-link { grid-column: 1/-1; }
  .r4-site .v3-demo-heading { align-items: center; flex-wrap: nowrap; }
  .r4-site .v3-player-actions { width: auto; }
  .r4-site .v3-player-caption { align-items: center; }
  .r4-site .r4-demo-chapters { gap: 10px; }
  .r4-chapter-copy { padding: 10px; }
  .r4-chapter-copy strong { font-size: .87rem; }
  .r4-site .start-paths > a { padding: 18px; min-height: 110px; gap: 11px; }
  .r4-site .start-paths strong { font-size: .97rem; }
  .r4-site .start-paths small { font-size: .8rem; }
  .r4-site .start-path-index { display: none; }
  .r4-site .start-paths > a { grid-template-columns: 1fr auto; }
  .r4-site :is(.section-heading,.screenshot-heading) { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .r4-site :is(.section-heading > p,.screenshot-heading > p) { justify-self: start; max-width: 75ch; }
  .r4-site .v3-gallery .showcase-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .r4-site .v3-gallery .showcase-tab { min-height: 69px; }
  .r4-showcase-thumb { display: none; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-card { grid-template-columns: minmax(0,1fr); }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy { padding: 28px; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy h3 { font-size: 2rem; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy p { max-width: 78ch; }
  .r4-site .v3-mode-content { grid-template-columns: minmax(0,1fr); padding: 29px; }
  .r4-site .v3-mode-workbench .mode-panel h3 { max-width: none; }
  .r4-site .v3-oi-intro,.r4-site .v3-oi-content { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .r4-site .v3-oi-copy dl { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .r4-site .v3-oi-copy dd { font-size: .91rem; }
  .r4-site .final-cta { grid-template-columns: auto minmax(0,1fr); gap: 25px; }
  .r4-site .final-cta > .button { grid-column: 2; justify-self: start; }
  .r4-site .policy-hero { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .r4-site .policy-hero-logo { width: 170px; justify-self: start; }
  .r4-resource-preview { max-width: none; width: 100%; }
  .r4-site .policy-content:not(.resource-content) { display: block; }
  .r4-site .policy-content:not(.resource-content) > .policy-panel:last-child { display: block; }
}
@media screen and (max-width: 640px) {
  .r4-site .nav-shell { min-height: 68px; }
  .r4-site .brand img { width: 41px; height: 41px; }
  .r4-site .brand-copy strong { font-size: .95rem; }
  .r4-site .brand-copy small { font-size: .65rem; }
  .r4-site .status-ribbon { font-size: .72rem; gap: 7px; min-height: 33px; }
  .r4-site .status-ribbon strong,.r4-site .status-ribbon a { font-size: .72rem; }
  .r4-site .status-ribbon > span:not(.status-dot) { display: none; }
  .r4-site .primary-nav { padding: 12px; }
  .r4-site .hero-copy { display: block; }
  .r4-site .hero-kicker { font-size: .73rem; margin-bottom: 14px; }
  .r4-site .v3-hero h1 { font-size: clamp(3.7rem,13vw,5.6rem); line-height: 1.04; margin: 18px 0 24px; }
  .r4-site .v3-hero .hero-lede { font-size: 1.17rem; line-height: 1.6; margin: 0 0 12px; }
  .r4-hero-description { font-size: 1rem; line-height: 1.75; }
  .r4-site .v3-hero .hero-actions { margin-top: 24px; gap: 9px; }
  .r4-site .v3-hero .hero-actions .button { width: 100%; min-height: 49px; font-size: .96rem; }
  .r4-site .v3-hero-facts { gap: 14px; margin-block: 23px 13px; padding-block: 18px; }
  .r4-site .v3-hero-facts > span { font-size: .81rem; }
  .r4-site .v3-hero-facts strong { font-size: 1.35rem; }
  .r4-site .v3-demo-heading { display: block; }
  .r4-site .v3-demo-heading strong { font-size: 1.4rem; }
  .r4-site .v3-demo-quality { display: inline-block; margin-top: 10px; font-size: .77rem; }
  .r4-site .v3-demo-frame { border-radius: 10px; }
  .r4-site .v3-player-top { padding: 10px; min-height: 40px; }
  .r4-site .v3-player-top strong { font-size: .76rem; }
  .r4-site .v3-player-top > span { font-size: .74rem; }
  .r4-site .v3-player-caption { padding: 14px 12px; gap: 15px; }
  .r4-site .v3-player-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 7px; }
  .r4-site .v3-player-actions > :is(button,a) { min-height: 45px; font-size: .86rem; padding: 10px; }
  .r4-chapters-heading { margin-top: 20px; font-size: .79rem; }
  .r4-site .r4-demo-chapters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .r4-site .r4-demo-chapters button { flex-direction: row; min-height: 68px; align-items: center; }
  .r4-chapter-image { flex: 0 0 44%; width: 44%; border: 0; }
  .r4-chapter-copy { padding: 8px; }
  .r4-chapter-copy strong { font-size: .8rem; line-height: 1.4; }
  .r4-site .r4-chapter-image .chapter-time { font-size: .68rem; padding: 2px 4px; inset: auto 3px 2px auto; }
  .r4-site .v3-demo-description { margin-top: 9px; }
  .r4-site .v3-demo-description ol { grid-template-columns: minmax(0,1fr); }
  .r4-site .v3-demo-description li span { font-size: .9rem; }
  .r4-site .start-paths { grid-template-columns: minmax(0,1fr); }
  .r4-site .start-paths > a { min-height: 95px; padding: 20px 2px; }
  .r4-site .start-paths > a + a { border-left: 0; border-top: 1px solid var(--r4-border); }
  .r4-site .start-paths strong { font-size: 1.02rem; }
  .r4-site .start-paths small { font-size: .87rem; }
  .r4-site .statement-grid { display: block; padding-top: 12px; }
  .r4-site .statement-grid h2 { font-size: 2.25rem; margin-bottom: 20px; }
  .r4-site .everyone-grid { grid-template-columns: minmax(0,1fr); }
  .r4-site .everyone-card { padding: 23px; }
  .r4-site :is(.section-heading h2,.screenshot-heading h2) { font-size: clamp(2.1rem,8.6vw,3rem); line-height: 1.12; }
  .r4-site .v3-gallery .showcase-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .r4-site .v3-gallery .showcase-tab { min-height: 63px; padding: 10px 12px; }
  .r4-showcase-meta { flex-direction: row; align-items: center; gap: 9px; }
  .r4-showcase-number { font-size: .71rem; }
  .r4-showcase-label { font-size: .86rem; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy { padding: 23px; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy h3 { font-size: 1.78rem; }
  .r4-site .v3-gallery .screenshot-grid.is-enhanced .screenshot-copy p { font-size: .98rem; }
  .r4-gallery-toolbar { gap: 8px; padding-top: 14px; flex-wrap: wrap; }
  .r4-gallery-summary { order: -1; width: 100%; justify-content: center; padding: 4px 0 10px; }
  .r4-gallery-toolbar > button { flex: 1 1 0; font-size: .89rem; }
  .r4-site .screenshot-zoom { font-size: .75rem; min-height: 34px; padding: 8px 10px; }
  .r4-site .v3-mode-workbench .mode-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 9px; gap: 6px; }
  .r4-site .v3-mode-workbench .mode-tab { padding: 11px; min-height: 76px; }
  .r4-site .v3-mode-workbench .mode-tab strong { font-size: .88rem; }
  .r4-site .v3-mode-workbench .mode-tab small { font-size: .77rem; }
  .r4-site .v3-mode-content { padding: 22px; gap: 27px; }
  .r4-site .v3-mode-workbench .mode-panel h3 { font-size: 1.9rem; }
  .r4-site .v3-mode-workbench .mode-panel p:not(.mode-eyebrow) { font-size: .97rem; }
  .r4-site .v3-mode-workbench .mode-actions span { font-size: .81rem; }
  .r4-site .v3-oi-intro h2 { font-size: clamp(2.15rem,8vw,2.9rem); }
  .r4-site .v3-oi-copy dl { grid-template-columns: minmax(0,1fr); gap: 0; }
  .r4-site .v3-oi-copy dt { font-size: 1rem; }
  .r4-site .v3-oi-copy dd { font-size: .95rem; }
  .r4-site .pretty-copy { padding: 28px 23px; }
  .r4-site .pretty-copy h2 { font-size: 2.05rem; }
  .r4-site .skin-manifesto p { font-size: 1.03rem; }
  .r4-site .release-panel { padding: 27px 23px; }
  .r4-site .release-panel h2 { font-size: 2.35rem; }
  .r4-site .release-states { grid-template-columns: minmax(0,1fr); }
  .r4-faq-heading { display: block; }
  .r4-faq-heading > p { margin-top: 16px; }
  .r4-site .faq-list { grid-template-columns: minmax(0,1fr); }
  .r4-site .final-cta { grid-template-columns: minmax(0,1fr); padding: 27px 23px; }
  .r4-site .final-cta img { width: 88px; }
  .r4-site .final-cta > .button { grid-column: 1; width: 100%; }
  .r4-site .final-cta h2 { font-size: 2.1rem; }
  .r4-site .policy-hero h1 { font-size: clamp(2.65rem,9.7vw,4rem); }
  .r4-site .policy-panel { padding: 25px 22px; }
  .r4-site .policy-panel h2 { font-size: 1.9rem; }
  .r4-resource-preview > span { padding: 13px; }
  .r4-resource-preview small { width: 100%; margin-left: 36px; font-size: .83rem; }
  .r4-site .lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
  .r4-lightbox-viewport { height: min(58dvh,620px); }
  .r4-site .lightbox > p:not(.sr-only) { padding: 13px; font-size: .87rem; }
  .r4-site .lightbox-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 12px; }
  .r4-site .lightbox-controls > :is(button,a) { font-size: .82rem; padding-inline: 9px; }
  .r4-site .r4-lightbox-original { grid-column: 2/4; margin: 0; }
  .r4-site .r4-lightbox-zoom { grid-column: 1; }
  .r4-site .command-dialog { width: calc(100vw - 24px); }
  .r4-site .command-item { gap: 8px; padding: 13px; }
  .r4-site .command-item small { font-size: .86rem; }
  .r4-site .command-item > span:last-child { font-size: .72rem; }
  .r4-site .site-footer { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .r4-site .site-footer > p { text-align: left; }
  .r4-site .site-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 15px; }
  .r4-site .site-footer nav a { font-size: .86rem; }
  .r4-footer-tools { flex-wrap: wrap; }
}
@media screen and (max-width: 380px) {
  .r4-site .primary-nav.is-open { grid-template-columns: minmax(0,1fr); }
  .r4-site .r4-demo-chapters { grid-template-columns: minmax(0,1fr); }
  .r4-chapter-image { flex-basis: 30%; width: 30%; }
  .r4-chapter-copy strong { font-size: .89rem; }
  .r4-site .v3-player-top { flex-wrap: wrap; }
  .r4-site .v3-gallery .showcase-tab { padding: 10px; }
  .r4-showcase-label { font-size: .81rem; }
}
@media screen {
  html:not(.js-ready) .r4-site [role="tablist"],html:not(.js-ready) .r4-site .menu-toggle,html:not(.js-ready) .r4-site .r4-chapters-heading { display: none; }
  html:not(.js-ready) .r4-site .site-header { position: static; }
  html:not(.js-ready) .r4-site .primary-nav { display: flex; position: static; flex-wrap: wrap; width: 100%; max-height: none; margin-bottom: 15px; }
  html:not(.js-ready) .r4-site .mode-panel { margin-bottom: 25px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .r4-site *, .r4-site *::before,.r4-site *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media screen and (forced-colors: active) {
  .r4-site .v3-hero h1 em { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
  .r4-site :is(button,.button,.screenshot-button,.v3-feature-shot,.showcase-tab) { border: 1px solid ButtonText; }
  .r4-site .r4-demo-progress::before,.r4-reading-progress::after { background: Highlight; }
}
@media print {
  .r4-reading-progress,.r4-demo-chapters,.r4-chapters-heading,.r4-gallery-toolbar,.r4-footer-tools,.r4-breadcrumb { display: none !important; }
  .r4-resource-preview { display: block; }
}