@font-face {
  font-family: Open Runde;
  src: url('./assets/fonts/OpenRunde-Regular.woff2?v=0.6.6') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Open Runde;
  src: url('./assets/fonts/OpenRunde-Medium.woff2?v=0.6.6') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Open Runde;
  src: url('./assets/fonts/OpenRunde-Semibold.woff2?v=0.6.6') format('woff2');
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: Newsreader;
  src: url('./assets/fonts/Newsreader-Latin.woff2?v=0.6.6') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: Noto Serif SC;
  src: url('./assets/fonts/noto-serif-sc.woff2?v=0.6.6') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --page:#fff; --raised:#fff; --surface:#f2f2f3; --panel:#f7f7f7; --hairline:#dedee0;
  --ink:#202026; --muted:#6e6e73; --faint:#73737a; --accent:#3974d5; --icon-filter:none;
  --space:clamp(88px,10vw,144px);
  font-family:'Open Runde','Segoe UI','Microsoft YaHei',sans-serif; font-synthesis:none;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) { --page:#111; --raised:#282828; --surface:#292929; --panel:#232323; --hairline:#444; --ink:#f5f5f5; --muted:#bdbdbf; --faint:#aaa; --accent:#8bbcff; --icon-filter:invert(1) }
}
:root[data-theme=dark] { color-scheme:dark; --page:#111; --raised:#282828; --surface:#292929; --panel:#232323; --hairline:#444; --ink:#f5f5f5; --muted:#bdbdbf; --faint:#aaa; --accent:#8bbcff; --icon-filter:invert(1) }
:root[data-theme=light] { color-scheme:light }
* { box-sizing:border-box; margin:0; padding:0; letter-spacing:normal }
html { scroll-behavior:smooth; scroll-padding-top:105px }
body { background:var(--page); color:var(--ink); font-size:16px; line-height:1.65 }
button,a,input,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
button,input,textarea,select { font:inherit; color:inherit }
button { cursor:pointer; border:0; background:none }
a { color:inherit; text-decoration:none }
img,video { display:block; max-width:100%; height:auto }
img { -webkit-user-drag:none }
picture { display:block }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:8px }
button:disabled { cursor:default; opacity:.6 }
[hidden] { display:none!important }
::selection { background:#dbeafe; color:#172554 }
.icon { width:18px; height:18px; object-fit:contain; filter:var(--icon-filter); flex-shrink:0 }
.container { width:calc(100% - 64px); max-width:1120px; margin-inline:auto }
.center { text-align:center }
.mobile-break { display:none }
.skip-link { position:fixed; top:8px; left:8px; padding:12px 20px; background:var(--page); z-index:100; transform:translateY(-160%) }
.skip-link:focus { transform:none }
.site-header { position:sticky; top:0; z-index:60; isolation:isolate; padding:24px 32px 0; height:80px; animation:header-enter .75s ease both }
.site-header::before,.site-header::after { content:''; position:absolute; inset:0 0 auto; height:122px; z-index:-1; pointer-events:none }
.site-header::before { backdrop-filter:blur(14px); mask-image:linear-gradient(#000 40%,transparent); opacity:0; transition:opacity .4s }
.site-header::after { background:linear-gradient(var(--page),color-mix(in srgb,var(--page) 72%,transparent) 45%,transparent); opacity:.6; transition:opacity .4s }
.site-header.is-scrolled::before,.site-header.is-scrolled::after { opacity:1 }
.site-nav { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1280px; min-height:44px; margin:auto }
.site-brand { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:18px; white-space:nowrap }
.site-brand img { flex-shrink:0 }
.site-links { display:flex; align-items:center; gap:8px }
.nav-link,.resources>summary { display:flex; align-items:center; gap:7px; min-height:42px; padding:8px 14px; color:var(--muted); border-radius:999px; cursor:pointer; font-size:15px; list-style:none; transition:color .2s,background .2s }
.nav-link:hover,.resources>summary:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); color:var(--ink) }
.nav-link[aria-current=page] { color:var(--ink); font-weight:600 }
summary::-webkit-details-marker { display:none }
.resources { position:relative }
.resources .icon { width:12px; height:12px; opacity:.7; transition:transform .2s }
.resources[open] summary .icon { transform:rotate(180deg) }
.resource-menu { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:216px; padding:7px; background:var(--raised); box-shadow:0 8px 35px #0002; border-radius:18px; animation:menu-enter .2s ease both }
.resource-menu a { display:block; border-radius:12px; padding:10px 13px; font-size:14px }
.resource-menu a:hover { background:var(--surface) }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:48px; padding:13px 22px; border-radius:12px; background:var(--ink); color:var(--page); font-size:15px; font-weight:600; line-height:1.4; transition:transform .2s,opacity .2s }
.button:hover { transform:translateY(-2px); opacity:.88 }
.button .icon { filter:invert(1) }
@media (prefers-color-scheme:dark) { :root:not([data-theme=light]) .button .icon { filter:none } }
:root[data-theme=dark] .button .icon { filter:none }
.nav-download { background:var(--surface); color:var(--ink); min-height:42px; padding:10px 17px; font-size:14px }
.nav-download .icon { filter:var(--icon-filter)!important }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--surface); transition:background .2s,transform .2s }
.icon-button:hover { background:color-mix(in srgb,var(--ink) 12%,var(--page)); transform:scale(1.04) }
.nav-toggle,.menu-close { display:none }
.hero-track { height:235svh; margin-top:-80px; position:relative }
.hero-stage { position:sticky; top:0; height:100svh; min-height:640px; max-width:1600px; margin-inline:auto; overflow:hidden; isolation:isolate }
.hero-copy { position:absolute; top:59%; left:50%; width:min(500px,100% - 32px); text-align:center; z-index:4; transform:translate(-50%,-50%); will-change:opacity,transform }
.hero-copy h1 { font-family:Newsreader,'Noto Serif SC',serif; font-size:clamp(60px,6.2vw,78px); font-weight:500; line-height:1.18 }
.hero-copy h1 { animation:heading-enter .7s ease both }
.hero-copy>p { animation:heading-enter .7s .07s ease both }
.hero-copy>.button { animation:heading-enter .7s .14s ease both }
.hero-copy>p { font-size:18px; line-height:1.6; color:var(--muted); margin:26px auto }
.hero-meta { font-size:12px; line-height:1.9; color:var(--muted); margin:15px auto 0 }
.hero-meta a { text-underline-offset:4px }
.hero-meta a:hover { text-decoration:underline }
.scroll-hint { margin:20px auto 0 }
.scroll-hint .icon { width:22px; height:22px }
.floating-pieces { position:absolute; inset:0; z-index:3; pointer-events:none }
.float-piece { position:absolute; width:228px; will-change:transform,left,top; pointer-events:auto; cursor:grab; touch-action:pan-y; user-select:none }
.piece-content { animation:float 10s ease-in-out infinite }
.float-piece:nth-child(even) .piece-content { animation-duration:13s; animation-delay:-3s; animation-direction:reverse }
.float-piece:nth-child(3n) .piece-content { animation-delay:-5s }
.piece-logo { width:78px }
.piece-logo img { width:78px; height:78px }
.piece-focus .piece-content,.piece-productive .piece-content { scale:.78 }
.piece-reminder .piece-content { scale:.6 }
.is-gathered .piece-content { animation:none }
.is-gathered .piece-content { scale:1 }
.hero-scene { position:absolute; top:50%; left:50%; width:calc(100% - 48px); height:min(72svh,calc((100vw - 48px)*.53)); max-height:780px; border-radius:24px; background:var(--surface); overflow:hidden; opacity:0; transform:translate(-50%,-50%) scale(.72); will-change:transform,opacity }
.scene-menubar { display:flex; justify-content:space-between; gap:20px; padding:12px 20px; color:var(--muted); font-size:11px; line-height:20px }
.scene-menubar span:first-child { color:var(--ink); font-weight:600 }
.scene-window { position:absolute; inset:45px 10% 112px; display:flex; justify-content:center; align-items:center }
.scene-window picture { height:100%; width:100% }
.scene-window img { width:100%; height:100%; object-fit:contain; border-radius:12px }
.scene-tray { position:absolute; bottom:16px; left:16px; right:16px; height:70px; border-radius:999px; background:color-mix(in srgb,var(--page) 72%,transparent) }
.demo-section { padding-top:40px }
.section-heading { text-align:center; margin-bottom:42px }
h2 { font-family:Newsreader,'Noto Serif SC',serif; font-size:clamp(32px,3.5vw,46px); font-weight:500; line-height:1.35 }
.section-heading p { color:var(--muted); font-size:16px; line-height:1.7; margin:20px auto 0 }
.demo-tabs { width:max-content; max-width:100%; display:flex; align-items:center; gap:0; padding:5px; border-radius:999px; background:var(--surface); margin:0 auto 36px; overflow:auto; scrollbar-width:none; overscroll-behavior-x:contain }
.demo-tabs button { padding:10px 24px; border-radius:999px; min-height:42px; white-space:nowrap; font-size:15px; color:var(--muted); transition:background .3s,color .3s }
.demo-tabs button[aria-selected=true] { background:var(--page); color:var(--ink) }
.screen-panel { border-radius:16px; overflow:hidden; background:var(--surface) }
.screen-zoom { display:block; width:100%; position:relative; text-align:left }
.screen-zoom picture,.screen-zoom img { width:100% }
.zoom-hint { position:absolute; right:18px; bottom:18px; display:flex; gap:7px; align-items:center; background:var(--page); padding:8px 13px; border-radius:999px; font-size:12px; opacity:0; transform:translateY(5px); transition:opacity .2s,transform .2s }
.screen-zoom:hover .zoom-hint,.screen-zoom:focus-visible .zoom-hint { opacity:1; transform:none }
.zoom-hint .icon { width:14px; height:14px }
.reel-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin:24px auto 0 }
.reel-progress { width:64px; height:4px; border-radius:999px; overflow:hidden; background:var(--surface) }
.reel-progress i { display:block; width:100%; height:100%; background:var(--muted); transform:scaleX(0); transform-origin:left; animation:reel-tick 6.5s linear infinite; animation-play-state:paused }
.is-playing .reel-progress i { animation-play-state:running }
.reel-pause { width:34px; height:34px; background:none }
.reel-pause .icon { width:14px; height:14px }
.reel-next { width:44px; height:44px }
.media-note { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:20px; font-size:12px; color:var(--faint) }
.media-note .text-link { display:inline-flex; gap:6px; align-items:center; font-size:12px }
.text-link { color:var(--accent); font-size:15px; display:inline-flex; align-items:center; gap:7px; padding-block:6px }
.text-link:hover { text-decoration:underline; text-underline-offset:4px }
.text-link .icon { width:15px; height:15px; opacity:.7 }
.home-section { padding-top:var(--space) }
.section-heading .large-heading { font-size:clamp(38px,4vw,52px); line-height:1.4 }
.feature-pair { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px }
.feature-pair>*,.detail-grid>*,.capability-section>*,.privacy-grid>*,.faq-section>* { min-width:0 }
.feature-major { text-align:center }
.major-art { height:310px; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--surface); border-radius:24px }
.major-art>picture { width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.major-art>picture img { max-height:100%; width:100%; object-fit:contain; border-radius:14px }
.feature-copy { padding:24px 18px }
.badge { display:inline-block; padding:5px 13px; border-radius:999px; background:var(--surface); color:var(--muted); font-size:12px }
.feature-copy h3 { font-size:24px; line-height:1.5; margin-top:14px; font-weight:600 }
.feature-copy p { max-width:360px; margin:12px auto 22px; color:var(--muted); font-size:16px; line-height:1.8 }
.included-section { padding-top:80px }
.eyebrow { font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:12px }
.section-heading p.eyebrow { font-size:13px; margin:0 0 12px }
.component-wall { display:block; background:var(--surface); border-radius:30px; padding:34px 0; overflow:hidden }
.component-row { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent) }
.component-row+.component-row { margin-top:30px }
.component-rail { display:flex; width:max-content; animation:component-scroll 72s linear infinite }
.component-row:nth-child(2) .component-rail { animation-duration:82s; animation-direction:reverse }
.component-group { display:flex; gap:28px; padding-right:28px; flex-shrink:0 }
.component-group figure { width:228px; flex:none; text-align:center }
.component-group .live-widget { --surface:var(--page); box-shadow:none; border:0 }
.component-group figcaption { font-size:13px; color:var(--muted); margin-top:12px }
.component-wall.is-offscreen .component-rail { animation-play-state:paused }
.component-note { text-align:center; color:var(--muted); font-size:13px; margin:24px auto 0 }
.component-note a { text-decoration:underline; text-underline-offset:4px }
.component-note span { display:block; font-size:11px; margin-top:8px }
.capability-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:60px; padding-top:100px }
.capability-copy h2 { font-size:38px; line-height:1.4 }
.capability-copy>p:not(.eyebrow) { font-size:16px; color:var(--muted); margin:24px 0 30px }
.capability-art { padding:16px; background:var(--surface); border-radius:24px }
.capability-art img { width:100%; border-radius:12px; object-fit:contain }
.details-section { padding-top:100px }
.detail-grid { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.detail-art { aspect-ratio:1.4; background:var(--surface); border-radius:24px; display:flex; align-items:center; justify-content:center; padding:20px }
.detail-art picture { width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.detail-art img { width:100%; height:100%; max-height:190px; object-fit:contain; border-radius:12px }
.detail-art:not(.reminder-art):not(.input-art) img { width:160px; height:160px; border-radius:50% }
.detail-grid h3 { font-size:19px; font-weight:600; margin:22px 6px 10px; line-height:1.5 }
.detail-grid p { font-size:15px; color:var(--muted); margin:0 6px; line-height:1.8 }
.privacy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px }
.privacy-grid article { padding:22px 10px }
.privacy-number { font-size:13px; color:var(--muted); display:block; margin-bottom:20px }
.privacy-grid h3 { font-size:20px; font-weight:500; margin-bottom:14px }
.privacy-grid p { font-size:15px; color:var(--muted); line-height:1.8 }
.faq-section { display:grid; grid-template-columns:1fr 1.6fr; gap:72px }
.faq-section>div>p { font-size:15px; color:var(--muted); margin-top:18px }
.faq-list details { border-bottom:1px solid var(--hairline) }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; font-size:15px; font-weight:500; padding:22px 0 }
.faq-list .icon { width:14px; height:14px; opacity:.6; transition:transform .2s }
.faq-list details[open] .icon { transform:rotate(180deg) }
.faq-list p { font-size:14px; color:var(--muted); line-height:1.9; padding:0 28px 24px 0 }
.home-download { margin-top:var(--space); padding:100px 24px; position:relative; text-align:center }
.home-download>div { position:relative }
.home-download h2 { font-size:clamp(34px,4vw,52px) }
.home-download>div>p:not(.download-meta) { font-size:17px; color:var(--muted); margin:22px 0 30px }
.download-watermark { width:58px; height:58px; margin:0 auto 24px }
.download-meta { color:var(--muted); font-size:12px; margin:18px 0 0 }
.download-meta span:not(:empty)::before { content:' · ' }
.portable-link { font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:4px }
.site-footer { max-width:1120px; margin:40px auto 0; padding:36px 0 40px; color:var(--muted); font-size:13px }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px }
.footer-top .site-brand { font-size:16px }
.footer-top .site-brand img { opacity:.7 }
.footer-top nav { display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.footer-top a:hover { color:var(--ink) }
.theme-toggle { padding:8px; display:grid; place-items:center; border-radius:50% }
.theme-toggle:hover { background:var(--surface) }
.theme-toggle .icon { width:16px; height:16px }
.footer-bottom { margin-top:28px; font-size:12px }
dialog { position:fixed; inset:0; margin:auto; border:0; border-radius:24px; background:var(--page); color:var(--ink); max-height:calc(100svh - 40px); max-width:calc(100% - 32px); padding:24px; box-shadow:0 25px 100px #0004 }
dialog::backdrop { background:#0009; backdrop-filter:blur(10px) }
.dialog-close { position:absolute; right:12px; top:12px; z-index:5; width:36px; height:36px }
.image-dialog,.video-dialog { width:1200px; padding:52px 16px 14px }
.image-dialog picture,.video-dialog video { border-radius:12px; overflow:hidden; max-height:calc(100svh - 150px); width:100% }
.image-dialog img { width:100%; max-height:calc(100svh - 150px); object-fit:contain }
.image-dialog>p,.video-dialog>p { text-align:center; color:var(--muted); font-size:12px; margin-top:12px }
.video-dialog video { object-fit:contain; background:#000 }
.download-dialog { width:480px; padding:40px 32px }
.download-logo { margin:0 auto 20px }
.download-dialog h2 { text-align:center; font-size:28px }
.download-dialog>p { text-align:center; color:var(--muted); font-size:12px; margin:14px 0 26px }
.download-option { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px; border-radius:16px; background:var(--surface); margin-top:12px }
.download-option:hover { background:color-mix(in srgb,var(--ink) 12%,var(--page)) }
.download-option strong { display:block; font-size:15px; font-weight:500 }
.download-option small { display:block; font-size:12px; color:var(--muted); margin-top:5px }
.checksum-details { font-size:12px; margin-top:24px; color:var(--muted) }
.checksum-details summary { cursor:pointer }
.checksum-details code { display:block; font-size:10px; word-break:break-all; margin:8px 0 14px; padding:10px; background:var(--surface); border-radius:8px }
.checksum-details strong { display:block; font-weight:500; margin-top:12px }
@keyframes header-enter { from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:none } }
@keyframes heading-enter { from { opacity:0; translate:0 12px } to { opacity:1; translate:0 0 } }
@keyframes menu-enter { from { opacity:0; translate:0 -6px } to { opacity:1; translate:0 0 } }
@keyframes float { 0%,100% { translate:-2px -3px } 50% { translate:3px 4px } }
@keyframes component-scroll { to { transform:translateX(-50%) } }
@keyframes reel-tick { to { transform:scaleX(1) } }
@media (max-width:1100px) and (min-width:701px) {
  .site-footer { padding-inline:32px }
  .hero-copy h1 { font-size:68px }
  .piece-content { scale:.82 }
  .piece-logo .piece-content { scale:1 }
  .feature-pair { gap:28px }
  .major-art { height:260px }
}
@media (max-width:700px) {
  html { scroll-padding-top:86px }
  body { font-size:15px }
  .container { width:calc(100% - 32px) }
  .site-header { padding:14px 16px 0; height:70px }
  .site-brand { font-size:17px }
  .site-links { display:none; position:absolute; top:56px; left:0; right:0; background:var(--page); border-radius:22px; padding:12px; box-shadow:0 10px 35px #0002; max-height:calc(100svh - 110px); overflow:auto }
  .site-links.is-open { display:block }
  .nav-link { padding:12px 14px; color:var(--ink); font-size:16px }
  .resources { padding:4px 0 }
  .resources>summary { font-size:12px; min-height:30px; padding:8px 14px }
  .resources>summary .icon { display:none }
  .resource-menu { position:static; transform:none; width:100%; padding:0; box-shadow:none; background:none }
  .resource-menu a { font-size:16px; padding:12px 14px }
  .nav-download { display:none }
  .nav-toggle { display:grid }
  .nav-toggle[aria-expanded=true] .menu-open { display:none }
  .nav-toggle[aria-expanded=true] .menu-close { display:block }
  .hero-track { height:200svh; margin-top:-70px }
  .hero-stage { min-height:700px }
  .hero-copy { top:51%; width:calc(100% - 32px) }
  .hero-copy h1 { font-size:52px; line-height:1.25 }
  .hero-copy>p { font-size:15px; margin:22px auto }
  .hero-meta { font-size:11px }
  .mobile-break { display:block }
  .piece-content { scale:.6 }
  .piece-focus .piece-content,.piece-productive .piece-content { scale:.6 }
  .piece-logo .piece-content { scale:.65 }
  .float-piece { width:228px }
  .piece-logo { width:78px }
  .piece-logo,.piece-productive,.piece-switches,.piece-reminder,.piece-activity { visibility:hidden }
  .piece-focus { margin-left:-25px; margin-top:8px }
  .piece-agent { margin-left:-24px; margin-top:-16px }
  .piece-activity { margin-left:22px; margin-top:-110px }
  .piece-weekly { margin-left:16px; margin-top:70px }
  .piece-leverage { margin-left:-6px; margin-top:75px }
  .is-gathered .float-piece { visibility:visible; margin:0 }
  .is-gathered .piece-content { scale:1 }
  .hero-scene { width:calc(100% - 24px); height:65svh; border-radius:18px }
  .scene-menubar { padding:10px 14px }
  .scene-menubar span:nth-child(2) { display:none }
  .scene-window { inset:42px 12px 100px }
  .scene-window img { border-radius:7px }
  .scene-tray { left:10px; right:10px; height:52px; bottom:16px }
  .demo-section { padding-top:28px }
  .section-heading { margin-bottom:30px }
  .section-heading p { font-size:14px; max-width:310px; margin-top:16px }
  .demo-tabs { width:100%; padding:4px; margin-bottom:24px }
  .demo-tabs button { flex:1; padding:9px 12px; font-size:12px }
  .screen-panel { border-radius:9px }
  .zoom-hint { display:none }
  .media-note { font-size:11px; gap:8px; flex-wrap:wrap }
  .media-note .text-link { font-size:11px }
  .section-heading .large-heading { font-size:36px }
  .feature-pair { grid-template-columns:1fr; gap:34px; margin-top:36px }
  .major-art { height:auto; aspect-ratio:1.45; padding:18px }
  .feature-copy { padding:20px 10px }
  .feature-copy h3 { font-size:22px }
  .feature-copy p { font-size:15px; margin-bottom:18px }
  .included-section { padding-top:64px }
  .component-wall { padding:28px 0; border-radius:24px }
  .component-group { gap:20px; padding-right:20px }
  .component-note { font-size:12px; padding-inline:12px }
  .capability-section { grid-template-columns:1fr; gap:32px; padding-top:80px }
  .capability-copy { text-align:center }
  .capability-copy h2 { font-size:34px }
  .capability-copy>p:not(.eyebrow) { font-size:15px; margin:20px 0 24px }
  .capability-art { padding:12px; border-radius:20px }
  .details-section { padding-top:80px }
  .detail-grid { grid-template-columns:1fr; gap:38px; margin-top:30px }
  .detail-art { aspect-ratio:1.6 }
  .detail-art img { max-height:220px }
  .detail-grid h3 { font-size:19px; margin-top:20px }
  .detail-grid p { font-size:15px }
  .privacy-grid { grid-template-columns:1fr; gap:8px; margin-top:24px }
  .privacy-grid article { padding:22px 8px }
  .privacy-number { margin-bottom:12px }
  .faq-section { grid-template-columns:1fr; gap:30px }
  .faq-section h2 { font-size:32px }
  .faq-section>div>p { margin-top:14px }
  .faq-list summary { font-size:14px; padding:20px 0 }
  .home-download { padding:64px 20px }
  .home-download h2 { font-size:32px; max-width:320px; margin:auto; line-height:1.5 }
  .home-download>div>p:not(.download-meta) { font-size:15px; margin:20px 0 26px }
  .download-meta { font-size:11px }
  .site-footer { padding:24px 24px 32px; margin-top:20px }
  .footer-top { align-items:flex-start }
  .footer-top nav { justify-content:flex-end; gap:14px 18px; max-width:190px; font-size:12px }
  .footer-bottom { align-items:flex-start; gap:20px; font-size:11px }
  .footer-bottom span:last-child { text-align:right }
  dialog { max-width:calc(100% - 24px); max-height:calc(100svh - 24px) }
  .download-dialog { padding:36px 22px }
  .download-dialog h2 { font-size:26px }
  .download-option { padding:16px }
  .download-option small { font-size:11px }
  .image-dialog,.video-dialog { padding:52px 8px 12px }
}
.hero-track.is-static { height:auto; margin-top:0 }
.hero-track.is-static .hero-stage { position:relative; height:840px; min-height:0 }
.hero-track.is-static .hero-scene { display:none }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .float-piece,.hero-copy { will-change:auto }
  .component-row[aria-hidden=true],.component-group[aria-hidden=true] { display:none }
  .component-row { mask-image:none; overflow:visible }
  .component-rail { display:block; width:100% }
  .component-group { display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); justify-items:center; padding:0 20px; gap:24px }
  .component-group figure { width:228px }
}