/* Every rule is scoped to phones; none changes the desktop cascade. */
html[data-mobile-nav-preview] { --mobile-header-height:94px; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:var(--mobile-header-height); }
html[data-mobile-nav-preview] body { min-width:0; }
html[data-mobile-nav-preview] .site-header { display:block; position:sticky; inset:0 auto auto 0; width:100vw; z-index:50; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0; background:#f4f3ee; border-bottom:1px solid #deddd8; }
html[data-mobile-nav-preview] .wordmark { position:static; display:block; width:max-content; margin:0 auto; color:#303b3a; mix-blend-mode:normal; font-size:23px; line-height:36px; letter-spacing:-1px; }
html[data-mobile-nav-preview] .navigation { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:3px; width:100%; min-height:48px; }
html[data-mobile-nav-preview] .navigation .nav-links { display:contents; position:static; inset:auto; color:inherit; }
html[data-mobile-nav-preview] .navigation .nav-links a,
html[data-mobile-nav-preview] .navigation > button { position:static; flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0; border:0; color:#303b3a; background:transparent; mix-blend-mode:normal; font-size:14px; line-height:1.2; font-weight:650; letter-spacing:0; white-space:nowrap; text-decoration:none; text-shadow:none; }
html[data-mobile-nav-preview][lang="en"] .navigation .nav-links a,
html[data-mobile-nav-preview][lang="en"] .navigation > button { font-size:13px; }
html[data-mobile-nav-preview] .navigation .mobile-original-languages { display:none; }
html[data-mobile-nav-preview] .navigation .mobile-language { min-width:26px; font-size:12px; }
html[data-mobile-nav-preview] .navigation .nav-download,
html[data-mobile-nav-preview] .navigation .mobile-register { min-width:32px; }
html[data-mobile-nav-preview] .navigation .mobile-register { color:#245458; }
html[data-mobile-nav-preview] .navigation a:focus-visible,
html[data-mobile-nav-preview] .navigation button:focus-visible { outline:2px solid #245458; outline-offset:2px; border-radius:4px; }
html[data-mobile-nav-preview] .winter-hero { height:calc(100svh - var(--mobile-header-height)); min-height:0; }
html[data-mobile-nav-preview] .winter-painting { object-position:38% 54%; }
html[data-mobile-nav-preview] .mobile-hero-actions { position:absolute; z-index:3; left:20px; right:20px; bottom:clamp(76px,13svh,120px); display:flex; align-items:stretch; gap:10px; }
html[data-mobile-nav-preview] .mobile-hero-actions button { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; min-height:50px; padding:12px 10px; border-radius:13px; font:650 15px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:center; }
html[data-mobile-nav-preview] .mobile-hero-register { border:1px solid #f4f3eec9; color:#253f3e; background:#f4f3eee8; box-shadow:0 3px 18px #173d3b12; }
@media (max-width:360px) {
  html[data-mobile-nav-preview] .site-header { padding-left:8px; padding-right:8px; }
  html[data-mobile-nav-preview] .navigation { gap:0; }
  html[data-mobile-nav-preview] .navigation .nav-links a,
  html[data-mobile-nav-preview] .navigation > button { font-size:13px; }
  html[data-mobile-nav-preview][lang="en"] .navigation .nav-links a,
  html[data-mobile-nav-preview][lang="en"] .navigation > button { font-size:12px; }
  html[data-mobile-nav-preview][lang="en"] .navigation .mobile-language { min-width:18px; }
  html[data-mobile-nav-preview][lang="en"] .navigation .nav-download { min-width:20px; }
  html[data-mobile-nav-preview][lang="en"] .site-header { padding-left:6px; padding-right:6px; }
  html[data-mobile-nav-preview][lang="en"] .navigation { gap:2px; }
  html[data-mobile-nav-preview][lang="en"] .navigation .mobile-register { min-width:26px; }
  html[data-mobile-nav-preview] .mobile-hero-actions { left:16px; right:16px; gap:8px; }
  html[data-mobile-nav-preview] .mobile-hero-actions button { font-size:14px; }
}

/* Responsive content geometry, keeping the original screenshot crop and events. */
html[data-mobile-nav-preview] :is(main[id],section[id],article[id],.explore-tabs,.explore-tabs button,.explore-note-dot) { scroll-margin-top:16px; }
html[data-mobile-nav-preview] .explore-section { padding:56px 16px 64px; }
html[data-mobile-nav-preview] .explore-tabs { margin-bottom:24px; }
html[data-mobile-nav-preview] .explore-tabs button { min-height:44px; }
html[data-mobile-nav-preview] .explore-stage { display:flex; flex-direction:column; gap:12px; min-height:0; width:100%; max-width:100%; }
html[data-mobile-nav-preview] .explore-device { order:0; width:100%; min-width:0; justify-content:center; }
html[data-mobile-nav-preview] .explore-phone { box-sizing:border-box; flex:0 1 auto; width:min(100%,var(--device-width)); max-width:100%; }
html[data-mobile-nav-preview] .explore-screen { width:100%; height:auto; }
html[data-mobile-nav-preview] .explore-notes { order:1; position:static; display:grid; gap:8px; height:auto; width:100%; min-width:0; }
html[data-mobile-nav-preview] .explore-notes-right { order:2; }
html[data-mobile-nav-preview] .explore-note { position:static; width:100%; min-width:0; }
html[data-mobile-nav-preview] .explore-note::before { display:none; }
html[data-mobile-nav-preview] .explore-note-dot { position:static; display:flex; align-items:center; gap:12px; width:100%; height:auto; min-height:44px; padding:10px 12px; border:1px solid #dce3e8; border-radius:12px; background:#f4f7fa; color:#3b4e5d; text-align:left; font:550 14px/1.5 var(--sans); }
html[data-mobile-nav-preview] .explore-note-dot::after { order:-1; flex:none; margin:0; }
html[data-mobile-nav-preview] .mobile-note-label { min-width:0; overflow-wrap:anywhere; }
html[data-mobile-nav-preview] .explore-note-content { display:none; position:static; padding:14px 12px; opacity:1; visibility:visible; }
html[data-mobile-nav-preview] .explore-note.is-open .explore-note-content { display:block; }
html[data-mobile-nav-preview] .story-card { width:min(350px,calc(100vw - 32px)); min-width:0; }