@font-face { font-family:"Shouzhong Brand"; src:url("/assets/shouzhong-web-brand-2eba05c5be7f09d8925fa6bdf6ae82e3c174a3471f2af1e9a65bd9e471cc1d0b.woff") format("woff"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Shouzhong Display"; src:url("/assets/shouzhong-web-kai-462e37c8dfb024b0bcc4f9958d78440455d4e89bce692889bab49a45d5b54e24.woff") format("woff"); font-style:normal; font-weight:400; font-display:swap; }
:root {
  color-scheme:light; --paper:#F3EBDD; --ink:#29251F; --muted:#676057; --line:#B9AB98; --on-pigment:#FCF8F1;
  --gutter:clamp(32px,6vw,96px); --rhythm:32px; --action-width:180px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:100%; font-synthesis:none; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
a { color:inherit; text-decoration:none; touch-action:manipulation; }
img,svg { display:block; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid #386B93; outline-offset:5px; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:10; padding:14px 20px; background:var(--ink); color:white; }
.skip-link:focus { top:20px; }
.opening { position:relative; height:100vh; height:100svh; min-height:390px; overflow:clip; isolation:isolate; background:var(--paper); }
.opening-stage { display:contents; }
.opening-art {
  position:absolute; left:86%; top:100%; transform:translate(-50%,-50%);
  width:min(199vw,314vh); width:min(199vw,314svh); aspect-ratio:3/2; user-select:none;
  -webkit-mask-image:radial-gradient(ellipse closest-side at center,#000 82%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at center,#000 82%,transparent 100%);
}
.opening-art img { width:100%; height:100%; object-fit:contain; }
.opening-still { position:relative; }
.motion-scene { position:absolute; inset:0; opacity:0; pointer-events:none; isolation:isolate; }
.motion-scene>img,.pigment-layer,.light-layer { position:absolute; inset:0; width:100%; height:100%; }
.shadow-layer { mix-blend-mode:multiply; opacity:.38; will-change:transform; }
.light-layer { background:radial-gradient(ellipse at 44% 38%,#fff8e4a3,transparent 68%); opacity:.11; mix-blend-mode:soft-light; will-change:transform; }
.motion-enabled .opening-still { opacity:0; }
.motion-enabled .motion-scene { opacity:1; }
.ring-symbols { --symbol-optical-scale:1; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; color:var(--on-pigment); }
.ring-symbols path { fill:none; stroke:currentColor; stroke-width:1.280487805; stroke-linecap:round; stroke-linejoin:round; transform:scale(var(--symbol-optical-scale)); transform-origin:0 0; transform-box:view-box; }
.motion-enabled .ring-symbols>g { opacity:var(--symbol-visible,1); }
/* Only the illustration is positioned freely. All information shares one grid. */
.home-ui { position:relative; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; row-gap:var(--rhythm); padding:32px var(--gutter); }
.home-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; grid-row:1; }
.brand { display:flex; align-items:baseline; gap:18px; flex-shrink:0; }
.brand-name { font-family:"Shouzhong Brand","Kaiti SC",serif; font-weight:500; font-size:1.625rem; line-height:1.1; }
.category { margin:0; padding-left:18px; border-left:1px solid var(--line); font-size:.8125rem; line-height:1.4; letter-spacing:.04em; color:var(--muted); }
.utility { display:flex; flex-shrink:0; align-items:center; gap:12px; }
.utility nav { display:flex; gap:8px; }
.utility nav a { min-width:44px; min-height:44px; display:grid; place-items:center; color:var(--muted); font-size:.875rem; }
.utility nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.motion-controls { display:flex; gap:8px; padding-right:12px; border-right:1px solid var(--line); }
.motion-controls button { display:grid; flex-shrink:0; place-items:center; width:44px; height:44px; padding:0; border:0; color:var(--muted); background:transparent; cursor:pointer; touch-action:manipulation; }
.motion-controls button:hover { color:var(--ink); }
.motion-controls svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.motion-toggle .play-icon { display:none; }
.motion-toggle[data-paused="true"] .pause-icon { display:none; }
.motion-toggle[data-paused="true"] .play-icon { display:block; }
/* The headline itself holds the optical middle. Supporting copy sits below
   that centre rather than pulling the entire headline up toward the header. */
.home-bottom { grid-row:2; display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); width:min(42vw,640px); min-height:0; }
h1 { grid-row:2; font-family:"Shouzhong Display","Kaiti SC",serif; font-size:clamp(2.5rem,4.25vw,4.375rem); font-weight:400; line-height:1.28; letter-spacing:0; margin:0; }
h1>span { display:block; }
.description { grid-row:3; align-self:start; margin:30px 0 0; font-size:1rem; line-height:1.75; color:var(--muted); }
.home-actions { grid-row:3; align-self:end; width:var(--action-width); max-width:100%; }
.download { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 0; border-bottom:1px solid var(--ink); font-size:1.125rem; line-height:1.4; }
.download>svg { width:20px; height:24px; flex-shrink:0; }
.download-arrow { margin-left:auto; font-size:1.125rem; }
.download:hover { color:#855536; border-color:#855536; }
.download:active { opacity:.75; }
.platform { margin:10px 0 0; font-size:.75rem; line-height:1.5; color:var(--muted); white-space:nowrap; }
@media (max-aspect-ratio:1/1) {
  .home-ui { grid-template-rows:auto auto minmax(0,1fr) auto; }
  .home-bottom { display:block; align-self:start; width:min(100%,620px); margin-top:clamp(32px,5svh,64px); }
  .home-actions { grid-row:4; }
}
@media (min-width:641px) and (max-aspect-ratio:1/1) {
  .opening-art { left:calc(var(--gutter) + var(--action-width) * .5); top:calc(100% - 80px); width:min(230vw,179svh); }
  h1 { font-size:clamp(2.6rem,6.6vw,4.5rem); }
}
@media (max-width:640px) {
  :root { --gutter:24px; --rhythm:16px; --poster-unit:calc(100vw / 851); }
  .opening { display:grid; grid-template-rows:auto minmax(0,1fr) auto; row-gap:var(--rhythm); min-height:215vw; padding:24px var(--gutter) 40px; }
  .home-ui { display:contents; }
  .home-header { gap:12px; z-index:1; }
  .brand { display:block; }
  .brand-name { font-size:1.625rem; }
  .category { border:0; padding:0; margin-top:4px; font-size:.75rem; white-space:nowrap; }
  .utility { gap:8px; }
  .motion-controls { padding-right:8px; }
  /* The user-selected crop shows the upper/left arcs, not their lower return.
     Keep the top near the copy while the larger circle continues below screen. */
  .opening-stage { display:contents; }
  .opening-art { left:102%; top:88%; width:calc(3400 * var(--poster-unit)); }
  .ring-symbols { --symbol-optical-scale:1.35; }
  .home-bottom { width:100%; margin-top:0; z-index:1; }
  h1 { font-size:min(3rem,calc(108 * var(--poster-unit)),calc((100vw - 48px) / 7)); line-height:1.25; }
  .description { display:block; margin-top:18px; line-height:1.5; }
  .home-actions { grid-row:3; z-index:1; }
  .home-actions .platform { color:var(--ink); }
}
@media (min-width:641px) and (max-height:650px) {
  :root { --gutter:24px; --rhythm:16px; }
  .home-ui { padding:20px var(--gutter); }
  .opening-art { left:84%; top:104%; width:292svh; }
  .home-bottom { width:40vw; }
  h1 { font-size:clamp(1.6rem,3.3vw,2.25rem); line-height:1.25; }
  .description { margin-top:20px; line-height:1.5; }
  .platform { margin-top:6px; }
}
.large-text .opening { display:flex; flex-direction:column; height:auto; min-height:100svh; overflow:visible; padding:24px var(--gutter); gap:24px; }
.large-text .home-ui { display:contents; }
.large-text .home-header { order:0; flex-wrap:wrap; }
.large-text .home-bottom { display:block; order:1; width:100%; margin-top:0; }
.large-text .opening-stage { display:contents; position:static; overflow:visible; }
.large-text .opening-art { order:2; position:relative; left:auto; top:auto; transform:none; width:min(100%,650px); margin:0 auto; }
.large-text .home-actions { order:3; width:max-content; max-width:100%; }
.large-text .download { min-height:52px; height:auto; }
.large-text .platform { white-space:normal; }
@media (prefers-reduced-motion:reduce) {
  .motion-enabled .opening-still { opacity:1; }
  .motion-scene,.motion-controls { display:none!important; }
  .ring-symbols>g { opacity:1!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}