:root{
  --paper:#f5f8fb; --paper-2:#ecf2f8; --ink:#0f2440; --muted:#5b6b80; --line:#dfe7f0;
  --accent:#2b7cf0; --dark:#0f1b2d;
  --font:"HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  /* hero tokens, overridden per time of day */
  --h-ink:#fff; --h-muted:rgba(255,255,255,.94); --h-a1:#2b7cf0; --h-a2:#15a6d6;
  --pill-bg:rgba(21,48,70,.58); --pill-line:rgba(255,255,255,.5);
  --btn-bg:#0f1b2d; --btn-fg:#fff; --ghost-bg:rgba(255,255,255,.82); --ghost-fg:#0f2440; --ghost-line:rgba(255,255,255,.95);
  --cta-top:#5aa9f7; --cta-bot:#dff1ff; --cta-ink:#0f2440; --cta-muted:#34506f;
  font-family:var(--font); color:var(--ink); background:var(--paper);
  scroll-behavior:smooth; scroll-padding-top:80px; font-synthesis:none;
}
html[data-time="dusk"]{
  --h-ink:#fff; --h-muted:rgba(255,255,255,.86); --h-a1:#ffe3c4; --h-a2:#ffb0a3;
  --pill-bg:rgba(60,40,90,.62); --pill-line:rgba(255,255,255,.35);
  --btn-bg:#fff; --btn-fg:#2a1f4a; --ghost-bg:rgba(64,42,74,.7); --ghost-fg:#fff; --ghost-line:rgba(255,255,255,.55);
  --cta-top:#3f4aa2; --cta-bot:#ffc59c; --cta-ink:#fff; --cta-muted:rgba(255,255,255,.85);
}
html[data-time="night"]{
  --h-ink:#fff; --h-muted:rgba(226,234,255,.82); --h-a1:#c8dcff; --h-a2:#8fb0ff;
  --pill-bg:rgba(20,30,70,.7); --pill-line:rgba(170,190,255,.3);
  --btn-bg:#fff; --btn-fg:#0b1433; --ghost-bg:rgba(25,39,70,.78); --ghost-fg:#fff; --ghost-line:rgba(190,205,255,.45);
  --cta-top:#070d24; --cta-bot:#2e3f7a; --cta-ink:#fff; --cta-muted:rgba(226,234,255,.8);
}
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
img,video{max-width:100%;display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #f2b84b;outline-offset:4px;border-radius:8px}
.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;padding:12px;background:var(--ink);color:#fff;z-index:100;border-radius:8px}
.skip-link:focus{top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:12px;border:1px solid transparent;font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;transition:transform .2s,background .3s,color .3s,box-shadow .2s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:#fff;box-shadow:0 8px 24px -10px rgba(15,27,45,.55)}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:10px}
.btn-lg{padding:17px 34px;font-size:17px;min-width:240px}
.btn:disabled{opacity:.55}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;color:var(--h-ink);transition:background .3s,color .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(245,248,251,.94);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.site-header:not(.scrolled){pointer-events:none}
.site-header a,.site-header button{pointer-events:auto}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:.06em}
.brand img{border-radius:10px}
.header-inner nav{display:flex;gap:34px;font-size:14px;font-weight:500}
.header-inner nav a{opacity:.82;transition:opacity .2s}
.header-inner nav a:hover{opacity:1}
.site-header:not(.scrolled) .btn-dark{background:var(--btn-bg);color:var(--btn-fg)}
.site-header:not(.scrolled) .brand,.site-header:not(.scrolled) nav{text-shadow:0 1px 5px rgba(10,29,48,.5)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding-top:94px;color:var(--h-ink);background:linear-gradient(#8cc8ff,#e3f4ff)}
html[data-time="dusk"] .hero{background:linear-gradient(#3b4aa0,#ffc49a)}
html[data-time="night"] .hero{background:linear-gradient(#070d24,#2e3f7a)}
.hero-scenes,.sparkles{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-scenes{z-index:-3;pointer-events:none}
/* Repeated scene clicks must not select the decorative image behind the canvases. */
.hero-scenes,.hero-scenes *,.hero-title-art,.hero-title-art *{-webkit-user-select:none;user-select:none}
.hero-scenes img,.hero-title-art image{-webkit-user-drag:none}
.hero-scene-base{position:absolute;inset:0;isolation:isolate}
.hero-scene-base[data-time-managed] .hero-scene{transition:none}
.hero-scenes::after,.hero-scene-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,35,58,.13),transparent 55%)}
.hero-scene,.hero-poster-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:0;transition:opacity 1s ease-in-out}
html[data-time="day"] :is(.hero-scene,.hero-poster-image)[data-scene="day"],html[data-time="dusk"] :is(.hero-scene,.hero-poster-image)[data-scene="dusk"],html[data-time="night"] :is(.hero-scene,.hero-poster-image)[data-scene="night"]{opacity:1}
.hero-scene-poster{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:1;transition:opacity .45s ease}
.hero[data-scene-ready="true"]:not([data-quality="static"]) .hero-scene-poster{opacity:0}
.hero:not([data-scene-ready="true"]) .hero-scenes>:not(.hero-scene):not(.hero-scene-poster){visibility:hidden!important}
.sparkles{z-index:-1;pointer-events:none}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:36px;z-index:-2;background:linear-gradient(to bottom,rgba(245,248,251,0),var(--paper));pointer-events:none}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-line);font-size:12px;font-weight:500;color:var(--h-ink);transition:background .6s,color .6s}
.pill-dot{width:8px;height:8px;border-radius:50%;background:#35c46a;box-shadow:0 0 0 4px rgba(53,196,106,.2)}
h1{margin:0;font-size:clamp(42px,4.2vw,60px);line-height:1.18;font-weight:700;letter-spacing:-.025em;text-wrap:balance;transition:color .6s;text-shadow:0 2px 12px rgba(24,51,69,.28)}
h1 span{display:inline}
.lede{margin:12px 0 0;max-width:34em;font-size:16px;line-height:1.8;color:var(--h-muted);transition:color .6s;text-shadow:0 1px 5px rgba(10,29,48,.45)}
.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.hero .actions .btn{padding:12px 22px;font-size:15px}
.hero .btn-dark{background:var(--btn-bg);color:var(--btn-fg)}
.btn-ghost{background:var(--ghost-bg);color:var(--ghost-fg);border-color:var(--ghost-line);}
.timebar{display:inline-flex;align-items:center;gap:4px;margin-top:14px;padding:3px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-line);}
.timebar-label{font-size:12px;padding:0 8px 0 10px;color:var(--h-muted)}
.timebar button{border:0;background:transparent;color:var(--h-ink);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;transition:background .3s,color .3s}
.timebar button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)}

/* ---------- carousel ---------- */
.showcase{position:relative;margin-top:22px;padding-bottom:28px;scroll-margin-top:90px}
.carousel{--w:min(680px,54vw,calc((100svh - 470px)*1.7778));position:relative;height:calc(var(--w)*.5625 + 32px);perspective:1600px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.track{position:absolute;inset:0;transform-style:preserve-3d}
.slide{position:absolute;left:50%;top:0;width:var(--w);margin:0;will-change:transform,opacity;transition:filter .4s;transform-origin:50% 50%}
.slide:not(.is-active){cursor:pointer;filter:saturate(.85) brightness(.96)}
.win{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 80px -30px rgba(15,36,64,.5),0 12px 24px -12px rgba(15,36,64,.25)}
.win-bar{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 14px;background:rgba(248,250,252,.96);border-bottom:1px solid #e6ecf2;font-size:12px;color:#51647a}
.win-bar>span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.win-bar>span:first-child{min-width:0;overflow:hidden}
.win-bar img{width:16px;height:16px;border-radius:4px}
.win-ctl{display:flex}
.win-ctl i{width:36px;height:26px;display:grid;place-items:center;position:relative}
.win-ctl i::before{content:"";width:10px;height:1px;background:#6b7c90}
.win-ctl i:nth-child(2)::before{height:9px;width:9px;background:transparent;border:1px solid #6b7c90}
.win-ctl i:nth-child(3)::before{height:1px;width:12px;transform:rotate(45deg);box-shadow:none}
.win-ctl i:nth-child(3)::after{content:"";position:absolute;width:12px;height:1px;background:#6b7c90;transform:rotate(-45deg)}
.screen{position:relative;aspect-ratio:16/9;background:#cfe9f5}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen video{opacity:0;transition:opacity .4s}
.screen.has-frame video{opacity:1}
.play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(15,27,45,.55);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s}
.play svg{width:28px;height:28px;fill:currentColor;stroke:none;margin-left:4px}
.slide.is-active .screen:not(.playing) .play{opacity:1;pointer-events:auto}
.play:hover{transform:scale(1.06)}
.progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#2b7cf0,#15a6d6);z-index:2}
.nav-btn{position:absolute;top:calc(50% - 26px);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.75);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(15,36,64,.4);z-index:30;transition:transform .2s,background .2s}
.nav-btn:hover{background:#fff;transform:scale(1.06)}
.nav-btn.prev{left:max(16px,calc(50% - var(--w)/2 - 76px))}
.nav-btn.next{right:max(16px,calc(50% - var(--w)/2 - 76px))}
.showcase-foot{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:18px;position:relative}
.tabs{display:flex;gap:4px;padding:5px;border-radius:14px;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:0 6px 20px -12px rgba(15,36,64,.25);flex-wrap:wrap;justify-content:center}
.tabs button{border:0;background:transparent;padding:8px 13px;border-radius:10px;font-size:13px;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.tabs button span{font-size:11px;opacity:.55;margin-right:6px;font-variant-numeric:tabular-nums}
.tabs button[aria-selected="true"]{background:var(--dark);color:#fff}
.tabs button:hover:not([aria-selected="true"]){color:var(--ink);background:rgba(15,36,64,.05)}
.caption{margin:0;padding:5px 11px;border-radius:8px;background:var(--pill-bg);font-size:12px;color:var(--h-ink);display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
.caption span{font-size:12px;padding:2px 8px;border-radius:6px;background:var(--paper-2);color:#6f8196}

/* One landscape, three views. The showcase keeps its DOM and playback position. */
:root{--scene-ease:cubic-bezier(.22,.8,.2,1);--footer-height:68px;scroll-behavior:auto}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.hero{height:100dvh;min-height:0;padding:0;--feature-width:678px;--home-top:300px;--feature-x:280px;--feature-y:-110px}
.hero-scenes{transform-origin:65% 55%;transition:transform 1.2s var(--scene-ease)}
.hero[data-view="features"] .hero-scenes{transform:scale(1.055) translateX(-.7%)}
.hero[data-view="start"] .hero-scenes{transform:scale(1.025)}
.scene-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(8,30,40,.62),rgba(8,30,40,.08) 70%);transition:opacity .85s ease}
.hero[data-view="features"] .scene-shade{opacity:.75}
.hero[data-view="start"] .scene-shade{opacity:.3}
.header-inner nav a{position:relative;padding:12px 0}
.header-inner nav a[aria-current="page"]{opacity:1}
.header-inner nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:currentColor;border-radius:2px;transform:scaleX(0);transition:transform .3s}
.header-inner nav a[aria-current="page"]::after{transform:scaleX(1)}
.state-panel{position:absolute;inset:72px 0 var(--footer-height);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s .32s}
.panel-content{pointer-events:none;transform:translateY(24px);transition:transform .8s var(--scene-ease)}
.hero[data-view="home"] .home-panel,.hero[data-view="features"] .feature-panel,.hero[data-view="start"] .start-panel{opacity:1;visibility:visible;transition:opacity .55s ease .2s,visibility 0s}
.hero[data-view="home"] .home-panel .panel-content,.hero[data-view="features"] .feature-panel .panel-content,.hero[data-view="start"] .start-panel .panel-content{pointer-events:auto;transform:translateY(0)}
.home-panel{inset:0;z-index:2}
.hero-copy{position:absolute;left:0;right:0;top:94px}
h1:focus,h2:focus{outline:none}
.hero .showcase{position:absolute;top:var(--home-top);left:0;width:100%;margin:0;padding:0;z-index:3;transform:translateX(var(--home-x,0px));transform-origin:50% 0;transition:transform .95s var(--scene-ease),opacity .35s ease,visibility 0s}
.hero .carousel{--w:var(--feature-width);height:calc(var(--w)*.5625 + 32px)}
.hero[data-view="features"] .showcase{transform:translate(var(--feature-x),var(--feature-y))}
.hero[data-view="start"] .showcase{transform:translateY(22px) scale(.96);opacity:0;pointer-events:none;visibility:hidden;transition:transform .65s var(--scene-ease),opacity .3s ease,visibility 0s .3s}
.slide{transition:filter .4s,opacity .4s}
.hero[data-view="features"] .slide{transition:filter .35s}
.hero[data-view="features"] .nav-btn{opacity:0;pointer-events:none;visibility:hidden}
.showcase-foot{width:fit-content;max-width:calc(100% - 32px);margin-top:14px}
.showcase-foot .caption{display:none}
.hero[data-view="features"] .showcase-foot .tabs{display:none}
.hero[data-view="features"] .showcase-foot .caption{display:flex}
.feature-panel{display:flex;align-items:center;z-index:4}
.feature-copy{margin-left:6vw;width:min(30vw,410px)}
.eyebrow{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.75)}
h2{margin:0;font-size:clamp(32px,3.45vw,48px);line-height:1.3;font-weight:650;letter-spacing:-.025em;text-wrap:balance}
.feature-copy h2{text-shadow:0 2px 12px rgba(12,35,40,.22);min-height:2.6em}
.feature-description{font-size:15px;line-height:1.9;color:rgba(255,255,255,.88);margin:20px 0 24px;min-height:5.7em;max-width:25em}
.feature-options{display:flex;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.3);background:rgba(12,33,43,.68);border-radius:12px;}
.feature-options button{flex:1;border:0;border-radius:8px;padding:11px 6px;background:transparent;color:#fff;font-size:13px;white-space:nowrap;transition:background .25s,color .25s}
.feature-options button[aria-pressed="true"]{background:rgba(255,255,255,.94);color:#173443;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.interaction-options{display:flex;gap:18px;margin-top:15px;height:30px;align-items:center}
.interaction-options[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.interaction-options button{padding:5px 1px;border:0;border-bottom:1px solid transparent;background:none;color:rgba(255,255,255,.64);font-size:12px}
.interaction-options button[aria-pressed="true"]{border-bottom-color:currentColor;color:#fff}
.text-link{display:inline-flex;align-items:center;gap:14px;padding:8px 0;border:0;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.feature-continue{margin-top:22px;font-size:14px}
.start-panel{display:grid;place-items:center;padding:18px 24px;z-index:5}
.start-card{width:min(580px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:26px 34px 22px;border-radius:24px;border:1px solid rgba(255,255,255,.36);background:rgba(17,44,53,.84);text-align:center;box-shadow:0 22px 70px -35px rgba(10,30,42,.4)}
.download-icon{display:block;width:58px;height:58px;margin:0 auto 14px;border-radius:16px;box-shadow:0 12px 30px -15px rgba(0,0,0,.5)}
.start-card h2{font-size:clamp(28px,3.1vw,42px)}
#download-description{font-size:14px;line-height:1.8;margin:16px auto 0;max-width:28em;color:rgba(255,255,255,.86)}
.download-action{margin-top:22px;display:flex;flex-direction:column;align-items:center}
.download-action .btn{padding:14px 28px;font-size:15px;min-width:220px;background:#fff;color:#1a3342;box-shadow:0 7px 20px -12px rgba(0,0,0,.35)}
.download-action .btn:disabled{opacity:.78}
#download-meta{font-size:12px;color:rgba(255,255,255,.8);margin:11px 0 0}
.password-copy{margin-top:12px;border:1px solid rgba(255,255,255,.5);border-radius:8px;background:transparent;color:#fff;padding:7px 12px;font-size:12px}
#copy-status{font-size:12px;margin-top:6px}
#copy-status:empty{display:none}
.quick-steps{list-style:none;display:flex;justify-content:center;gap:18px;padding:18px 0 0;margin:22px 0 8px;border-top:1px solid rgba(255,255,255,.22);font-size:12px;color:rgba(255,255,255,.88)}
.quick-steps li{display:flex;align-items:center;gap:7px}
.quick-steps span{border:1px solid rgba(255,255,255,.4);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:11px}
.local-note{margin:9px 0 0;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.62)}
#filing-link{display:block;font-size:11px;margin-top:10px}
.stage-footer{position:absolute;bottom:0;left:0;right:0;height:var(--footer-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 34px 10px;z-index:10;background:linear-gradient(transparent,rgba(8,28,33,.3))}
.stage-footer .timebar{justify-self:start;margin:0;padding:3px;background:rgba(14,39,47,.3);border-color:rgba(255,255,255,.3)}
.timebar-label{color:rgba(255,255,255,.74)}
.timebar button{color:#fff}
.timebar button[aria-pressed="true"]{background:rgba(255,255,255,.95);color:#203947}
.scene-navigation{display:flex;align-items:center;gap:15px;color:#fff}
.scene-navigation a{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.65;white-space:nowrap;padding:10px 0}
.scene-navigation a[aria-current="page"]{opacity:1}
.scene-dot{width:5px;height:5px;background:currentColor;border-radius:50%;transition:width .35s}
.scene-navigation a[aria-current="page"] .scene-dot{width:16px;border-radius:9px}
.scene-arrow{width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(20,43,50,.18);color:#fff;transition:background .2s;line-height:1}
.scene-arrow:hover:not(:disabled){background:rgba(255,255,255,.2)}
.scene-arrow:disabled{opacity:.3}
.help-link{justify-self:end;color:rgba(255,255,255,.9);border:0;background:none;font-size:12px;padding:10px 0;white-space:nowrap}
.info-dialog{border:1px solid rgba(255,255,255,.8);border-radius:20px;width:min(650px,calc(100% - 32px));max-height:calc(100dvh - 64px);padding:28px;color:#183442;background:#f5f8f4;box-shadow:0 35px 100px rgba(4,20,35,.25);overscroll-behavior:contain;scrollbar-width:thin}
.info-dialog::backdrop{background:rgba(8,25,40,.4);}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.dialog-heading h2{font-size:26px}
.dialog-close{border:0;border-radius:50%;background:#e6ede7;font-size:26px;width:36px;height:36px;padding:0;line-height:1}
.faq-list details{border-bottom:1px solid #d5dfd6}
.faq-list details:first-child{border-top:1px solid #d5dfd6}
.faq-list summary{padding:18px 0;font-size:14px;cursor:pointer;font-weight:600}
.faq-list p,.steps p{font-size:13px;line-height:1.9;color:#586c63;margin:0 0 18px}
.steps{padding:0;margin:0;list-style:none}
.steps li{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.step-index{width:28px;height:28px;border:1px solid #bbcbbc;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12px}
.steps h3{font-size:15px;margin:3px 0 8px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;border-top:1px solid #d5dfd6;padding-top:18px;font-size:13px}
.specs div{display:flex;gap:12px}.specs dt{color:#667b71}.specs dd{margin:0}
@media (min-width:761px) and (max-height:800px){.hero-copy{top:88px}.hero-copy .pill{display:none}h1{font-size:56px}}
@media (min-width:761px) and (max-height:680px){.hero-copy{top:78px}h1{font-size:44px}.hero .actions{margin-top:12px}.lede{margin-top:8px}.feature-copy h2{font-size:34px}.feature-description{margin:14px 0;min-height:3.8em}.feature-continue{margin-top:10px}.start-card{padding:18px 26px}.download-icon{width:42px;height:42px;margin-bottom:10px}.start-card h2{font-size:32px}}
@media (min-width:761px) and (max-width:1100px){.feature-copy{margin-left:4vw;width:32vw}.feature-copy h2{font-size:32px}.feature-options button{font-size:12px;padding-inline:3px}.header-inner nav{gap:22px}.stage-footer{padding-inline:24px;gap:10px}.scene-navigation{gap:10px}}
@media (max-width:760px){
  :root{--footer-height:108px}
  .wrap{width:calc(100% - 32px)}
  .site-header{height:62px}.header-inner{gap:12px}.header-inner nav{display:none}
  .brand{font-size:19px;gap:8px}.brand img{width:30px;height:30px}.btn-sm{font-size:12px;padding:9px 12px}
  .hero-copy{top:86px}.hero-copy .pill{display:none}
  h1{font-size:clamp(27px,7.7vw,35px);line-height:1.2;white-space:nowrap}h1 span{display:inline}
  .lede{font-size:13px;line-height:1.8;max-width:23em;margin-top:13px}
  .hero .actions{margin-top:18px;gap:8px}.hero .actions .btn{font-size:13px;padding:11px 14px}
  .hero-scene,.hero-poster-image{object-position:46% bottom}.hero[data-view="features"] .hero-scenes{transform:scale(1.035)}
  .hero[data-view="features"] .scene-shade{background:linear-gradient(rgba(9,30,42,.38),transparent 75%);opacity:1}
  .win{border-radius:10px}.win-bar{height:28px;font-size:10px;padding-left:9px}.win-ctl i{width:24px}
  .hero .carousel{height:calc(var(--w)*.5625 + 28px)}.nav-btn{display:none}.play{width:52px;height:52px}.play svg{width:23px;height:23px}
  .showcase-foot{margin-top:12px}.tabs{display:grid;grid-template-columns:1fr 1fr;width:min(350px,calc(100vw - 32px));gap:2px;padding:4px}.tabs button{padding:7px 8px;font-size:11px}.tabs button span{font-size:9px}
  .caption{font-size:11px;padding:5px 8px;gap:6px;max-width:calc(100vw - 32px)}.caption span{font-size:10px}
  .state-panel{inset:62px 0 var(--footer-height)}.home-panel{inset:0}
  .feature-panel{align-items:flex-start;padding:18px 20px 0}
  .feature-copy{margin:0;width:100%;text-align:center}
  .eyebrow{font-size:10px;margin-bottom:9px}
  .feature-copy h2{font-size:28px;line-height:1.25;min-height:2.5em}
  .feature-description{font-size:12px;line-height:1.7;min-height:3.4em;max-width:27em;margin:12px auto}
  .feature-options{max-width:360px;margin:auto;padding:3px;gap:3px}.feature-options button{font-size:12px;padding:9px 5px}
  .interaction-options{justify-content:center;margin-top:6px;height:27px}.interaction-options button{font-size:11px}.feature-continue{display:none}
  .start-panel{padding:14px 16px}.start-card{padding:22px 18px 18px;border-radius:20px}.start-card h2{font-size:29px}
  .download-icon{width:48px;height:48px;margin-bottom:12px}#download-description{font-size:12px;margin-top:12px}.download-action{margin-top:18px}.download-action .btn{font-size:14px;padding:12px 22px;min-width:210px}
  .quick-steps{font-size:10px;gap:12px;margin-top:18px;padding-top:15px}.quick-steps li{gap:4px}.quick-steps span{width:18px;height:18px;font-size:10px}.local-note{font-size:10px}
  .stage-footer{grid-template-columns:1fr auto;grid-template-rows:48px 44px;gap:0 10px;padding:0 18px max(8px,env(safe-area-inset-bottom));height:var(--footer-height)}
  .scene-navigation{grid-row:1;grid-column:1/-1;justify-content:center;gap:17px}.scene-navigation a{font-size:11px}.scene-arrow{width:30px;height:30px}
  .stage-footer .timebar{grid-row:2;grid-column:1;padding:2px}.timebar-label{display:none}.timebar button{padding:8px 11px;font-size:11px}.help-link{grid-row:2;grid-column:2;font-size:11px}
  .info-dialog{padding:22px 18px;max-height:calc(100dvh - 32px)}.dialog-heading h2{font-size:21px}.dialog-close{width:32px;height:32px}
}
@media (max-width:760px) and (max-height:710px){
  .hero-copy{top:76px}h1{font-size:28px}.lede{margin-top:10px}.hero .actions{margin-top:12px}
  .feature-panel{padding-top:10px}.feature-copy h2{font-size:24px}.eyebrow{display:none}.feature-description{margin:9px auto;font-size:11px}.feature-options button{padding:7px 4px}.interaction-options{height:24px}
  .start-card{padding:16px}.start-card h2{font-size:25px}.download-icon{width:38px;height:38px;margin-bottom:10px}#download-description{font-size:11px}.download-action{margin-top:13px}.quick-steps{margin-top:14px;padding-top:12px}.local-note{margin-top:4px}
}
@media (max-height:480px) and (min-width:761px){
  .hero-copy{top:86px;left:4vw;right:auto;width:37vw;text-align:left;align-items:flex-start}h1{font-size:32px}h1 span{display:block}.lede{font-size:12px;margin-top:10px}.hero .actions{margin-top:14px;justify-content:flex-start}.hero .actions .btn{padding:9px 13px;font-size:12px}
  .showcase-foot,.nav-btn{display:none}
  .feature-copy h2{font-size:27px}.feature-description{font-size:12px;min-height:0;margin:10px 0}.eyebrow{margin-bottom:10px}.feature-options button{padding-block:8px}.feature-continue{display:none}.interaction-options{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ===== 首屏动态场景（hero-scene.js）===== */
.hero-gl,.hero-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-scenes.gl-on .hero-scene{visibility:hidden}
.sky-dial{position:absolute;z-index:2;width:82px;height:82px;border:0;padding:0;background:transparent;transform:translate(-50%,-50%);touch-action:none;cursor:grab;border-radius:50%;transition:left .65s ease,top .65s ease;visibility:hidden;color:#f8d58d;-webkit-tap-highlight-color:transparent}
.hero[data-scene-presented="true"][data-view="home"] .sky-dial{visibility:visible}
.sky-dial.is-dragging{cursor:grabbing;transition:none}
.sky-dial::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(255,225,156,.22),rgba(255,225,156,0) 70%);transition:background .8s,transform .35s;pointer-events:none}
.sky-orb{position:relative;display:block;width:100%;height:100%;overflow:visible;transition:transform .35s ease}
.sky-sun,.sky-moon{transform-origin:48px 48px;transition:opacity .7s ease,transform .7s ease}
.sky-sun-rays{transform-origin:48px 48px;transition:transform .6s ease}
.sky-moon{opacity:0;transform:rotate(-18deg) scale(.8)}
html[data-time="dusk"] .sky-dial{color:#ffd1a0}
html[data-time="dusk"] .sky-sun-light{stop-color:#fff0c8}
html[data-time="dusk"] .sky-sun-edge{stop-color:#eaa070}
html[data-time="night"] .sky-dial::before{background:radial-gradient(circle,rgba(200,221,242,.14),rgba(200,221,242,0) 70%)}
html[data-time="night"] .sky-sun{opacity:0;transform:rotate(18deg) scale(.8)}
html[data-time="night"] .sky-moon{opacity:1;transform:rotate(0) scale(1)}
.sky-dial:hover .sky-orb,.sky-dial:focus-visible .sky-orb,.sky-dial.is-dragging .sky-orb{transform:scale(1.09) rotate(-5deg)}
.sky-dial:hover .sky-sun-rays,.sky-dial.is-dragging .sky-sun-rays{transform:rotate(15deg)}
.sky-dial:focus-visible{outline:1px dashed rgba(255,248,220,.8);outline-offset:3px}
.sky-dial-tip{position:absolute;top:86px;left:50%;transform:translateX(-50%) translateY(-3px);white-space:nowrap;padding:5px 10px;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:rgba(29,54,75,.35);font-size:12px;color:#fff8e8;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
html[data-time="night"] .sky-dial-tip{left:auto;right:0;transform:translateY(-3px)}
.sky-dial:hover .sky-dial-tip,.sky-dial:focus-visible .sky-dial-tip,.sky-dial.is-dragging .sky-dial-tip{opacity:1}
.hero:not([data-view="home"]) .sky-dial{visibility:hidden}
@media(max-width:760px){.sky-dial{width:66px;height:66px}.sky-dial-tip{top:69px}}
@media(prefers-reduced-motion:reduce){.sky-dial{display:none}}

/* ===== 首页只留风景，点"看看它怎么动"后轮播才升起 ===== */
.hero-copy{translate:0 clamp(0px,calc(19vh - 60px),150px);transition:translate .8s var(--scene-ease)}
.hero[data-view="home"] .showcase{opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--feature-x),calc(var(--feature-y) + 70px)) scale(.94);transition:transform .7s var(--scene-ease),opacity .35s ease,visibility 0s .35s}
.hero[data-view="features"] .showcase{opacity:1;visibility:visible;transition:transform .95s var(--scene-ease),opacity .6s ease .12s,visibility 0s}
.scene-hint{position:absolute;left:0;right:0;bottom:calc(var(--footer-height,64px) + 22px);margin:0;text-align:center;font-size:13px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);opacity:0;pointer-events:none}
.hero[data-view="home"] .scene-hint{animation:hintIn 1s ease 1.6s forwards}
@keyframes hintIn{to{opacity:.85}}
.hint-touch{display:none}
@media (hover:none){.hint-desktop{display:none}.hint-touch{display:inline}}
@media (max-width:760px){.hero-copy{translate:0 clamp(0px,calc(12vh - 40px),90px)}}
@media (max-height:480px) and (min-width:761px){.hero-copy{translate:none}}

/* Static fallback keeps the original high-resolution artwork and navigation. */
.hero[data-quality="static"] .hero-scenes>:not(.hero-scene):not(.hero-scene-base):not(.hero-scene-poster),
.hero[data-quality="static"] .sparkles,
.hero[data-quality="static"] .sky-dial,
.hero[data-quality="static"] .scene-hint{display:none!important}
.scene-performance-note{position:absolute;z-index:12;right:24px;bottom:calc(var(--footer-height,64px) + 24px);width:min(320px,calc(100% - 48px));padding:13px 36px 13px 15px;border:1px solid #ffffff45;border-radius:12px;background:rgba(27,46,53,.94);color:#f8f6ed;font:12px/1.65 system-ui,sans-serif;box-shadow:0 4px 20px #15273220}
.scene-performance-note[hidden],.hero:not([data-view="home"]) .scene-performance-note{display:none}
.scene-performance-note p{margin:0}.scene-performance-note details{margin-top:5px}.scene-performance-note summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.scene-performance-note details p{margin-top:7px;color:#e3e9e5}
.scene-performance-close{position:absolute;right:4px;top:4px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;cursor:pointer}.scene-performance-close:hover{background:#ffffff18}

/* The cursor is rendered from app.js's existing sparkle path and palette. */
@media (any-hover:hover) and (any-pointer:fine){
  html{--site-cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFLUlEQVR4AdRVbWxTZRQ+773tve3asq7bOhjsA3BlH8AyQeKcwSkaiZLIn0UTEv1Hgv73jzFiTIwxMfGXP4hR4w9jsh9qhIiAuBAQguAQ3WDjYzDGtna0W9eW7t7eD89zt8xBMNstWQw35/Q9fc45z3ne997eSvQ/X4+0ALGfSILzIQr2okwqqotIdHaS/OOWWUdMREWJKEaA6OoiadMIya81r98ARwyMyL2IYgQQ9ZE8vqbSG/BJn1Ss8H6BGBgVcbkW0EUkBaIk+WVFVRVpI++5HjEw5NxqcC2gpZOEmaqSG1eq7aUhRQ0FvRJiYMgttwAxGiPhjwY8AQ89VRUtKa8o98mIgSHHAgT7ks3tCYjBQZJnbM0TLlV3l0d8FK0sCQeDyovAkOPJyyYAT7+IZUhaG5bWSpKIhksVgiteqQ4YcvxrgAA4a1ncFjsBEAl+uORO/t3TCClZf61a6vd2RCv9ihCChBB8Cn4FGHKoQS16eLyYc14ebA8S4DSBYO8W8vCOvNROSk2KVK9c65PEXV+0wreH73+IZ7MAIsRlYWU3cqhBLXrQ63AQyTxezDkv/9r9Apw3XFczOUM9oUo1MFFf4lGrAxsaapq2rvO8vr0l8rnHK6+uiKjEt4EkVoHY7/fGdrRWfIMa1Hr06oDTyxwQ8x5z4mR4NITwMmsLBeAeS/U3yKOVVagYWrsq+GxHk/rhjuYVR2pWB39obY58um1L1UtPP1lVrSiys3vBDIiBtbVWdrZsKPugriZ0eGdH6Ym2OultcIDrbCjiAzefCnfQvAh8IVz8pyKI33CNHesadm2KHHqhZcWl9bXBrxobwvvat1W1Pd+5prq5MUIro35SvHPDmUfABTkYcptbykPPbV9dvvXxaNPmjeX7HqsLfgmurq3RXxra18Yww5mFoezzAjimMj/ZWIlJbbJ1esjLI0thSZJKQGOYdl6WxBw/kFmfF7CfyJ5cR9blU9evHPwr+fKxvkzr0EjujYGrU5+d+yNx6fiJ28mLfcnMeCJPesEkm6ls1us4x8CQQ82xnpEx9Jy/MPHR4ND0q0f7ppu+653YBW5qIXM/z5odTzQvgAG7u5us3BNUUCfvaIY2mvv9dqbnZL/2zuGL6e03b2V29g1Mvnv2XPzQyTPxUV1nERYzsSMG1vvnRA9qbsazrxzsnXzm7HXj4+Gx7K/g2pZJzdyoJwMzMIvdsYUCADgiuvupQKdJL8tMaErsRg4EA1f0S+euG18f/zu1dzqjXbiT0sjiY4Ajnp7Wen/uvbMHNVcm9X4yxrOFVcM5gznA9T5z9vSQyUP4vPhzzu4XABgFdjeReeA8GQcOkAGCW5G4VjCHZyRRks9mjSO3R7NjPN+5FcnkDGVzxlHkUHNLj2vo4d0WwAEuJnZ4eb3HHiRgYYHTBAJH/RrSg/lhLZ0vnEpNaorNCuCj47kkMOSIa1CLHiZy+nn9T1tMwMJG3B57METW0JQ1pBesm1NpneCWZSeAIce7XnToQlI3AtBnx2Jk+oRq8M7PJFMzBJ9Ka98DQ46LIICXpZlrAdWDZOcTOSORLvwUT9xNjo7lRnIG/QYMOR67rAKor4dsORI3L49rp9PTupa9W5AQA0OOBbgytydA/HBZuQRZeVPXTMu+Zpn2VcTAkHM1nYtdC+AeIn6brRyZKKRz5ptTOfMtxMCcnMuPYgTY/KRb421kfNt/bQCOGBjPdnX/uf6eVzG+L9UdEef5RQUvdjiGFXMC6INjtwsdmGt/GAFLGrZY0T8AAAD//yniXLoAAAAGSURBVAMAu3xfX+cNPj8AAAAASUVORK5CYII=") 16 16,auto;cursor:var(--site-cursor)}
  html[data-time="dusk"],html[data-time="night"]{--site-cursor:url("data:image/png;base64,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") 16 16,auto}
  body,a,button,summary,[role="button"],.text-link,.slide:not(.is-active){cursor:var(--site-cursor)}
  input,textarea,[contenteditable="true"]{cursor:text}
  .sky-dial{cursor:grab}.sky-dial.is-dragging{cursor:grabbing}
  button:disabled{cursor:default}
}

/* Fixed handwritten hero title, preserving the approved lettering. */
#hero-title{position:relative;width:min(530px,32vw);max-width:100%;padding:0;margin:-3px 0 0;line-height:0;letter-spacing:normal;text-shadow:none}
#hero-title .hero-title-art{display:block;width:100%;height:auto;overflow:hidden}
#hero-title .hero-title-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){#hero-title{width:min(530px,100%);padding:4px 0}}
@media(max-height:480px) and (min-width:761px){#hero-title{width:100%;max-width:530px}}

/* =====================================================================
   UI 刷新（2026-09-29）：字体、玻璃质感、滑块指示器、切换动效
   配合 ui-motion.js 使用；只做覆盖，不改动上面的布局逻辑。
   ===================================================================== */
@font-face{font-family:"PingjianWenKai";src:url("fonts/pingjian-wenkai.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{
  --ui-font:"PingjianWenKai","LXGW WenKai","Kaiti SC","STKaiti",var(--font);
  --ui-spring:cubic-bezier(.3,1.25,.4,1);
  --glass:rgba(255,251,243,.8); --glass-strong:rgba(255,252,246,.92);
  --glass-ink:#22372f; --glass-muted:#5c6e65; --glass-line:rgba(255,255,255,.8); --rule:rgba(34,55,47,.12);
  --glass-shadow:0 14px 34px -20px rgba(24,48,40,.55);
  --thumb:#22372f; --thumb-ink:#fffaf0;
  --cta-bg:#fffaf0; --cta-ink:#22372f; --accent:#e5a13c;
  --wipe:#fff1c2;
}
html[data-time="dusk"]{
  --glass:rgba(60,40,72,.66); --glass-strong:rgba(58,38,70,.9);
  --glass-ink:#fff3e9; --glass-muted:rgba(255,232,214,.78); --glass-line:rgba(255,214,190,.3); --rule:rgba(255,226,206,.2);
  --glass-shadow:0 14px 34px -20px rgba(28,10,30,.7);
  --thumb:#fff1e2; --thumb-ink:#3a2542; --cta-bg:#fff1e2; --cta-ink:#3a2542; --accent:#ffb27a; --wipe:#ffae7e;
}
html[data-time="night"]{
  --glass:rgba(14,24,52,.66); --glass-strong:rgba(13,22,48,.9);
  --glass-ink:#eef3ff; --glass-muted:rgba(212,224,255,.74); --glass-line:rgba(170,192,255,.24); --rule:rgba(190,206,255,.16);
  --glass-shadow:0 14px 34px -20px rgba(0,4,20,.8);
  --thumb:#eef3ff; --thumb-ink:#0e1a38; --cta-bg:#eef3ff; --cta-ink:#0e1a38; --accent:#a9c1ff; --wipe:#7d98ff;
}

/* 舞台本身不允许被滚动（焦点落到画面外的元素时，overflow:hidden 仍会被浏览器滚动） */
.hero{overflow:clip}

/* ---------- 通用：胶囊容器 + 滑动指示块 ---------- */
.ui-capsule{position:relative;isolation:isolate;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);color:var(--glass-ink);transition:background .7s ease,border-color .7s ease,color .7s ease}
.ui-thumb{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:var(--thumb);pointer-events:none;box-shadow:0 6px 16px -9px rgba(0,0,0,.45);
  transition:transform .5s var(--ui-spring),width .5s var(--ui-spring),height .3s ease,background .7s ease,opacity .3s ease}

/* ---------- 按钮 ---------- */
.btn{position:relative;overflow:hidden;border-radius:999px;font-family:var(--ui-font);font-weight:600;letter-spacing:.02em;transition:transform .35s var(--ui-spring),background .6s,color .6s,box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);transform:translateX(-130%);transition:transform .8s ease;pointer-events:none}
.btn:hover:not(:disabled)::after{transform:translateX(130%)}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97);transition-duration:.12s}
.btn [aria-hidden="true"],.text-link [aria-hidden="true"]{display:inline-block;transition:transform .35s var(--ui-spring)}
.btn:hover [aria-hidden="true"],.text-link:hover [aria-hidden="true"]{transform:translateX(4px)}

/* ---------- 顶栏 ---------- */
.brand span{font-family:var(--ui-font);font-size:25px;font-weight:600;letter-spacing:.08em}
.brand img{transition:transform .5s var(--ui-spring)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.header-inner nav{gap:2px;padding:4px;border-radius:999px;font-family:var(--ui-font);font-size:15px;font-weight:500;text-shadow:none!important}
.header-inner nav a{padding:7px 18px;border-radius:999px;opacity:.8;transition:color .4s ease,opacity .25s}
.header-inner nav a:hover{opacity:1}
.header-inner nav a[aria-current="page"]{opacity:1;color:var(--thumb-ink)}
.header-inner nav a::after{display:none}
.site-header .btn-dark,.site-header:not(.scrolled) .btn-dark{background:var(--thumb);color:var(--thumb-ink);font-size:15px;padding:10px 20px;box-shadow:var(--glass-shadow)}

/* ---------- 首页 ---------- */
.hero-copy .pill{font-family:var(--ui-font);font-size:14px;letter-spacing:.04em;padding:6px 15px 6px 12px;background:var(--glass);border-color:var(--glass-line);color:var(--glass-ink);box-shadow:var(--glass-shadow);text-shadow:none}
.hero .actions .btn-ghost{background:var(--cta-bg);color:var(--cta-ink);border:0;padding:15px 30px;font-size:18px;box-shadow:0 16px 36px -18px rgba(20,40,34,.65),inset 0 -2px 0 rgba(0,0,0,.06)}
.scene-hint{font-family:var(--ui-font);font-size:15px;letter-spacing:.08em}

/* ---------- 玩法页 ---------- */
.feature-copy{font-family:var(--ui-font)}
.feature-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--glass-ink);font-size:13px;font-weight:600;letter-spacing:.1em}
.feature-copy h2{font-family:var(--ui-font);font-weight:600;font-size:clamp(32px,3.2vw,46px);line-height:1.32;letter-spacing:.01em;text-shadow:0 2px 18px rgba(8,26,28,.4)}
.feature-description{font-size:16px;line-height:2;text-shadow:0 1px 8px rgba(8,26,28,.45)}
.feature-options{border-radius:999px;padding:4px;gap:2px}
.feature-options button{border-radius:999px;font-family:var(--ui-font);font-size:15px;font-weight:600;color:var(--glass-ink);background:transparent!important;box-shadow:none!important;transition:color .4s ease}
.feature-options button[aria-pressed="true"]{color:var(--thumb-ink)}
.interaction-options button{font-family:var(--ui-font);font-size:14px;transition:color .3s,border-color .3s}
.feature-continue{font-family:var(--ui-font);font-size:16px}
.caption{font-family:var(--ui-font);font-size:14px;background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);border-radius:999px;padding:6px 8px 6px 16px;box-shadow:var(--glass-shadow)}
.caption span{border-radius:999px;background:var(--rule);color:var(--glass-muted);padding:2px 10px}

/* ---------- 开始使用 ---------- */
.start-card{font-family:var(--ui-font);background:var(--glass-strong);color:var(--glass-ink);border:1px solid var(--glass-line);border-radius:30px;box-shadow:0 34px 80px -34px rgba(16,34,30,.6)}
.start-card h2{font-weight:600;letter-spacing:.02em}
.download-icon{animation:iconFloat 5s ease-in-out infinite}
@keyframes iconFloat{50%{transform:translateY(-5px) rotate(-2deg)}}
#download-description,#download-meta,.local-note{color:var(--glass-muted)}
.download-action .btn{background:var(--thumb);color:var(--thumb-ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.download-action .btn:disabled{opacity:.6}
.password-copy{border-color:var(--rule);color:var(--glass-ink)}
.quick-steps{border-top-color:var(--rule);color:var(--glass-ink);font-size:13px}
.quick-steps li{padding:5px 12px 5px 6px;border-radius:999px;background:var(--rule)}
.quick-steps span{border-color:transparent;background:var(--thumb);color:var(--thumb-ink)}
.start-card .text-link{color:var(--glass-ink);font-size:14px}

/* ---------- 底部：三个胶囊 ---------- */
.stage-footer{background:none;font-family:var(--ui-font)}
.stage-footer .timebar{padding:4px;border-radius:999px;background:var(--glass);border-color:var(--glass-line)}
.stage-footer .timebar-label{color:var(--glass-muted);font-size:13px}
.stage-footer .timebar button{color:var(--glass-ink);background:transparent!important;font-size:14px;font-weight:600;transition:color .4s}
.stage-footer .timebar button[aria-pressed="true"]{color:var(--thumb-ink)}
.stage-footer .timebar{white-space:nowrap}
.stage-footer #motion-toggle{display:grid;place-items:center;flex:0 0 30px;width:30px;padding:6px 0;margin-left:2px;border-left:1px solid var(--rule);border-radius:0;color:var(--glass-ink)}
#motion-toggle svg{width:16px;height:16px}
.stage-footer #motion-toggle:disabled{opacity:.55}
#motion-toggle .motion-play-icon{display:none}
#motion-toggle[aria-pressed="true"] .motion-pause-icon{display:none}
#motion-toggle[aria-pressed="true"] .motion-play-icon{display:block}
html[data-motion-paused="true"] .time-wipe{display:none}
.mobile-next-step{margin-top:18px;font-family:var(--font);font-size:13px;line-height:1.7}
.mobile-next-step>p{color:var(--glass-muted);margin:0 0 16px}
.mobile-next-step .btn{font-family:inherit;font-size:15px;padding:12px 24px}
.mobile-next-step .mobile-site-address{margin:12px 0 0;user-select:text;-webkit-user-select:text;font-size:12px}
#site-copy-status{display:block;min-height:2.8em;margin-top:6px;font-size:12px;color:var(--glass-muted)}
.mobile-visitor .start-card .quick-steps,.mobile-visitor .start-card .local-note{display:none}
@media(min-width:761px) and (max-width:1000px){
  .stage-footer .timebar button[data-time]{font-size:12px;padding-inline:9px}
  .stage-footer .timebar-label{padding-inline:4px;font-size:12px}
}
@media(max-width:380px){
  .stage-footer{padding-inline:14px;column-gap:6px}
  .stage-footer .timebar button[data-time]{padding-inline:6px}
  .stage-footer #motion-toggle{flex-basis:26px;width:26px;margin-left:0}
}
.scene-navigation{padding:4px 6px;border-radius:999px;gap:12px;color:var(--glass-ink)}
.scene-navigation a{font-size:14px;padding:6px 2px}
.scene-arrow{border-color:var(--rule);background:transparent;color:var(--glass-ink);transition:background .25s,transform .35s var(--ui-spring)}
.scene-arrow:hover:not(:disabled){background:var(--rule);transform:scale(1.08)}
.help-link{padding:8px 16px;border-radius:999px;color:var(--glass-ink);font-size:14px}

/* ---------- 对话框 ---------- */
.info-dialog{font-family:var(--ui-font)}
.footer-links{display:flex;align-items:center;justify-self:end;padding:3px;border-radius:999px;font-family:var(--font)}
.footer-links button{border:0;background:none;color:var(--glass-ink);font-size:13px;white-space:nowrap;padding:8px 12px;border-radius:999px}
.footer-links .contact-link{border-radius:999px 0 0 999px;border-right:1px solid var(--rule)}
.footer-links button:hover{background:var(--rule)}
.contact-dialog{width:min(460px,calc(100% - 32px));background:#fffcf5;color:#22372f;font-family:var(--font)}
.contact-dialog .dialog-heading{margin-bottom:10px}
.contact-dialog .dialog-heading h2{font-weight:600;letter-spacing:0}
.contact-intro{font-size:14px;line-height:1.7;color:#5c6e65}
.contact-list{margin:24px 0 0}
.contact-list>div{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #e5e8de}
.contact-list dt{font-size:13px;color:#5c6e65}
.contact-list dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.contact-list a{text-decoration:underline;text-decoration-color:#aab7a4;text-underline-offset:4px}
.contact-copy{border:1px solid #d6dfce;border-radius:999px;padding:7px 12px;background:#eef2e7;color:#22372f;font-size:12px;white-space:nowrap}
.contact-copy:hover{background:#e1e8d8}
.contact-status{min-height:2.8em;margin:12px 0 0;font-size:12px;line-height:1.4;color:#5c6e65}
@media(max-width:760px){
  .footer-links{grid-row:2;grid-column:2;padding:2px}
  .footer-links button{font-size:11px;padding:8px 7px}
  .footer-links .help-link span{display:none}
  .contact-list>div{gap:8px;grid-template-columns:42px minmax(0,1fr) auto}
  .contact-list dd{font-size:13px}
  .contact-copy{padding:7px 9px}
}
@media(max-width:380px){
  .stage-footer .timebar button{padding-inline:8px}
  .contact-list>div{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .contact-list dt{grid-column:1/-1}
}

/* ---------- 切换动效：面板内容依次浮现 ---------- */
.state-panel .panel-content>*{opacity:0;translate:0 16px;transition:opacity .35s ease,translate .6s var(--scene-ease)}
.hero[data-view="home"] .home-panel .panel-content>*,
.hero[data-view="features"] .feature-panel .panel-content>*,
.hero[data-view="start"] .start-panel .panel-content>*{opacity:1;translate:0 0;transition:opacity .6s ease,translate .8s var(--scene-ease);transition-delay:calc(min(var(--i,0),9) * 65ms + 220ms)}
.interaction-options[hidden]{opacity:0!important}

/* 玩法文案切换 */
.ui-swap{animation:uiSwap .6s var(--scene-ease)}
@keyframes uiSwap{from{opacity:0;translate:0 10px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}

/* 切换时刻：一圈光从点击处扫过整个画面 */
@property --wipe-r{syntax:"<length>";inherits:false;initial-value:0px}
.time-wipe{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--wx,50%) var(--wy,15%),transparent calc(var(--wipe-r) - 260px),var(--wipe-c,#fff1c2) calc(var(--wipe-r) - 60px),transparent var(--wipe-r))}
.time-wipe.run{animation:timeWipe 1.5s cubic-bezier(.25,.7,.25,1) forwards}
@keyframes timeWipe{0%{opacity:.9;--wipe-r:0px}70%{opacity:.55}100%{opacity:0;--wipe-r:var(--wipe-max,2600px)}}

/* 首次打开：标题像毛笔写出来 */
html.ui-intro #hero-title .hero-title-art{animation:brushIn 1.6s cubic-bezier(.5,.1,.2,1) .35s both}
html.ui-intro .hero-copy .pill{animation:uiDrop .8s var(--scene-ease) .1s both}
html.ui-intro .hero .actions{animation:uiRise .8s var(--scene-ease) 1.5s both}
html.ui-intro .site-header .header-inner>*{animation:uiDrop .8s var(--scene-ease) both}
html.ui-intro .site-header .header-inner>:nth-child(2){animation-delay:.12s}
html.ui-intro .site-header .header-inner>:nth-child(3){animation-delay:.24s}
html.ui-intro .stage-footer>*{animation:uiRise .8s var(--scene-ease) 1.7s both}
@keyframes brushIn{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes uiDrop{from{opacity:0;translate:0 -12px}}
@keyframes uiRise{from{opacity:0;translate:0 14px}}

@media (max-width:760px){
  .brand span{font-size:21px}
  .site-header .btn-dark,.site-header:not(.scrolled) .btn-dark{font-size:13px;padding:8px 14px}
  .hero .actions .btn-ghost{font-size:16px;padding:13px 24px}
  .feature-copy h2{font-size:30px}
  .feature-description{font-size:13px;line-height:1.8}
  .feature-options button{font-size:13px}
  .stage-footer .timebar button{font-size:12px}
  .scene-navigation a{font-size:12px}
  .help-link{font-size:12px;padding:6px 12px}
  .quick-steps{font-size:11px}.quick-steps li{padding:4px 9px 4px 4px}
}
@media (prefers-reduced-motion:reduce){
  .state-panel .panel-content>*{translate:none}
  .time-wipe{display:none}
  .download-icon{animation:none}
}

/* ===== UI 调整（2026-09-29 第二轮）：首页标题放大；玩法页精简 ===== */
#hero-title{width:min(760px,46vw)}
@media(max-width:760px){#hero-title{width:min(530px,100%)}}
@media(max-height:480px) and (min-width:761px){#hero-title{width:100%;max-width:530px}}
#feature-eyebrow{display:none!important}
.hero[data-view="features"] .showcase-foot .caption{display:none}
.slide .win-bar>span:first-child::after{content:"实际运行画面";margin-left:10px;padding:2px 9px;border-radius:999px;background:rgba(34,55,47,.08);color:#6a7a72;font-size:11px;font-family:var(--ui-font)}
.feature-options button{font-size:14px;padding:11px 2px}
.feature-copy .feature-continue{margin-top:28px;padding:16px 32px;gap:10px;font-size:18px;background:var(--cta-bg);color:var(--cta-ink);border:0;box-shadow:0 16px 36px -18px rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.06)}
.feature-copy .feature-continue:hover{transform:translateY(-2px)}
@media(max-width:760px){.slide .win-bar>span:first-child::after{display:none}}

/* 首页标题下移，按钮与标题拉开距离 */
@media (min-width:761px) and (min-height:481px){#hero-title{margin-top:56px}.hero-copy .actions{margin-top:48px}}
@media (max-width:760px){#hero-title{margin-top:24px}.hero-copy .actions{margin-top:32px}}