/* Keep the reference site's 500px / 10rem layout and original raster assets. */
html{font-size:min(10vw,50px);min-height:100%;background:#f5f8fa}
body{margin:0;min-height:100vh;line-height:1.4286;color:#202124;font-size:.346667rem;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Segoe UI",Arial,Roboto,"PingFang SC",miui,"Hiragino Sans GB","Microsoft Yahei",sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
#page-view{position:relative;max-width:500px;width:100%;min-height:100vh;margin:0 auto;background:#fefefe}
.content{padding-bottom:1.6rem}
.image-module{display:inline-block;vertical-align:baseline;margin:0;padding:0;width:100%}
.image-button{color:inherit;text-decoration:none;cursor:pointer;position:relative}
picture{display:block}
.page-image{display:block;width:100%;height:auto;border:0}
.footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;height:1.6rem;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);color:white;letter-spacing:.026667rem;z-index:10}
.footer-button{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:.906667rem;margin:0 .253333rem;padding:0 .253333rem;border-radius:.213333rem;color:white;text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.footer-button::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:100%;min-height:44px}
.play{background:#1678ff}.download{background:#ffaa09}
a:focus-visible{outline:3px solid #202124;outline-offset:-3px}
.footer-button:focus-visible{outline-color:white;outline-offset:3px}
a[aria-disabled="true"]{cursor:not-allowed;filter:grayscale(1);opacity:.65}
.config-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 8px;background:rgba(0,0,0,.8);color:#fff;font-size:14px;line-height:1.4;border-radius:4px;pointer-events:none;white-space:nowrap}
@supports(padding-bottom:env(safe-area-inset-bottom)){.footer{padding-bottom:env(safe-area-inset-bottom);height:calc(1.6rem + env(safe-area-inset-bottom))}.content{padding-bottom:calc(1.6rem + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* The original JPEG stays byte-identical; only its old masthead is clipped in the DOM.
   The lower illustration (including hair/face) starts below this 180/728 boundary. */
.hero{position:relative}
.hero-art{clip-path:inset(24.7252747253% 0 0 0)}
.brand-lockup{position:absolute;top:0;left:0;width:100%;height:24.7252747253%;display:flex;align-items:center;justify-content:center;gap:.22rem;background:#fff;line-height:1.15;padding:0 .25rem}
.brand-logo{display:block;width:1.8rem;height:1.8rem;max-height:94%;object-fit:contain;flex:none}
.brand-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.07rem;white-space:nowrap}
.brand-title{font-size:.64rem;font-weight:800;letter-spacing:.01rem;color:#c79531;background:linear-gradient(180deg,#f9d984 0%,#b5781d 45%,#ecca70 67%,#a76c17 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .012rem .008rem rgba(105,62,7,.24))}
.brand-domain{font-size:.5rem;font-weight:750;letter-spacing:.012rem;color:#b6882e}