@font-face {font-family:'Jishu Sans';src:url('./jishu-sans.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root {
  color-scheme:dark;
  --canvas:#030507;--surface:#101317;--paper:#f4f6fa;--muted:#a6adb8;--quiet:#7e8896;
  --line:rgba(220,228,240,.12);--glass-fill:rgba(28,31,38,.76);--glass-hover:rgba(38,41,49,.84);
  --glass-rim:conic-gradient(from var(--glass-angle,210deg),#e6edfa0e,#e6edfa17 35deg,#ffffff57 85deg,#ffffff2b 110deg,#ffffff09 160deg,#ffffff0b 205deg,#e5edfa42 265deg,#e5edfa1c 295deg,#e6edfa0e);
  --font-ui:'Jishu Sans','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --type-label:13px;--type-meta:11px;--type-section:clamp(28px,3vw,40px);
  --gutter:clamp(24px,5vw,88px);--panel-radius:16px;--cell-radius:4px;--control-height:44px;
  --space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;
  --ease-settle:cubic-bezier(.2,.8,.2,1);
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html,body {margin:0;min-height:100%;background:var(--canvas)}
body {font-family:var(--font-ui);color:var(--paper);-webkit-font-smoothing:antialiased}
button,a {font:inherit} button {color:inherit} a {color:inherit;text-decoration:none}
:focus-visible {outline:2px solid #d4e6ff;outline-offset:5px}
.js-render-pending .scene-poster {visibility:hidden}
.opening {position:relative;isolation:isolate;min-height:760px;min-height:max(760px,100vh);min-height:max(760px,100svh);overflow:hidden;background:var(--canvas)}
.header {position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:32px var(--gutter)}
.identity {display:flex;align-items:center;gap:var(--space-2)}
.identity img {width:58px;height:auto;display:block}
.identity-text {white-space:nowrap;display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:600;letter-spacing:.08em}
.identity-text small {font-size:9px;letter-spacing:.22em;font-weight:500;color:var(--quiet)}
.nav-pill {cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-height);padding:0 18px;font-size:12px;font-weight:550;letter-spacing:.02em}
.art {position:absolute;z-index:0;inset:0;pointer-events:none}
.optical-frame {position:absolute;top:68px;left:0;width:100%;height:calc(100% - 260px);min-height:450px;pointer-events:none}
#prism-scene,.scene-poster {position:absolute;width:100%;height:100%;display:block;inset:0}
.scene-poster {object-fit:cover;object-position:50% 50%}
#prism-scene {opacity:0;transition:opacity .3s}
#prism-scene.ready {opacity:1}
.scene-ready .scene-poster {visibility:hidden}
/* An asymmetric typographic composition balances the single optical scene. */
.copy {position:absolute;z-index:2;bottom:100px;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;text-align:left}
h1 {font-size:clamp(48px,5.8vw,96px);font-weight:450;letter-spacing:-.035em;line-height:1.12;margin:0;color:#eceef3}
/* Keep the reveal mask clear of Latin descenders without moving the baselines. */
.hero-line {display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero-line>span {display:block;animation:type-arrive .85s cubic-bezier(.16,1,.3,1) .15s both}
.hero-line:nth-child(2)>span {animation-delay:.3s}
.hero-support {width:384px;padding-bottom:8px;animation:support-arrive .75s var(--ease-settle) .65s both}
.subtitle {max-width:280px;color:var(--muted);font-size:14px;letter-spacing:.02em;line-height:1.85;margin:0}
.hero-support .actions {justify-content:flex-start}
@keyframes type-arrive {from {transform:translateY(112%)}to {transform:translateY(0)}}
@keyframes support-arrive {from {opacity:0;transform:translateY(10px)}to {opacity:1;transform:translateY(0)}}
.actions {display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.primary,.channel {display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-height);padding:0 22px;font-size:var(--type-label);font-weight:550;line-height:1.4;letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.action-icon {width:12px;height:12px;flex:none;margin-left:8px;stroke:currentColor;stroke-width:1.3;fill:none}
.footer {display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;color:var(--quiet);font-size:var(--type-meta);letter-spacing:.04em}
.site-footer {position:relative;margin:0;padding:var(--space-4) var(--gutter)}
@media (max-width:600px) {
  :root {--gutter:22px;--type-label:12px;--type-meta:10px;--type-section:27px;--panel-radius:14px}
  .opening {min-height:660px;min-height:max(660px,100vh);min-height:max(660px,100svh)}
  .header {padding-block:24px}.identity-text {font-size:13px}.identity img {width:50px}.nav-pill {padding-inline:14px;font-size:11px}
  .optical-frame {top:84px;height:calc(100% - 330px);min-height:315px}
  .copy {bottom:100px;left:var(--gutter);right:var(--gutter);display:block}
  h1 {font-size:clamp(36px,10.8vw,58px);letter-spacing:-.025em;line-height:1.1}
  .hero-support {width:auto;padding:0;margin-top:24px}.subtitle {font-size:12px;max-width:290px}
  .hero-support .actions {margin-top:20px}
  .actions {gap:8px;flex-wrap:nowrap}.primary,.channel {padding-inline:16px}
  .site-footer {font-size:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:360px) {
  :root {--gutter:16px;--type-label:11px;--type-section:24px}
  .primary,.channel {padding-inline:12px}.action-icon {margin-left:6px}
}
@media (min-width:601px) and (max-height:760px) {
  .opening {min-height:650px}.header {padding-block:24px}.optical-frame {top:52px;height:420px;min-height:0}.copy {bottom:86px}h1 {font-size:clamp(44px,5.4vw,72px)}
}
@media (min-width:601px) and (max-width:1000px) {
  .copy {grid-template-columns:1fr;gap:20px;bottom:86px}
  h1 {font-size:clamp(42px,6vw,58px)}
  .hero-support {width:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0}
  .hero-support .actions {margin-top:0;flex-wrap:nowrap}.subtitle {max-width:260px;font-size:12px}
}
@media (max-width:600px) and (max-height:700px) {
  .header {padding-block:16px}
  .copy {bottom:80px}.hero-support {margin-top:16px}.hero-support .actions {margin-top:16px}
  h1 {font-size:34px}.subtitle {font-size:11px}
}
html:lang(en) .hero-title {letter-spacing:-.045em}
@media (max-width:600px) {html:lang(en) .hero-title {font-size:clamp(31px,8.7vw,48px)}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important}}