* { box-sizing: border-box; }
@font-face { font-family:"Source Han Serif CN Heavy"; src:url("assets/SourceHanSerifCN-Heavy.otf") format("opentype"); font-style:normal; font-weight:900; font-display:swap; }
@font-face { font-family:"Source Han Serif CN"; src:url("assets/SourceHanSerifCN-Medium.otf") format("opentype"); font-style:normal; font-weight:500; font-display:swap; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#031b5d; font-family:"PingFang SC","Microsoft YaHei",sans-serif; text-size-adjust:100%; text-size-adjust:none; -webkit-text-size-adjust:100%; -webkit-text-size-adjust:none; }
button,input { font:inherit; }
.app { position:relative; width:100vw; aspect-ratio:750 / 1624; height:calc(100vw * 1624 / 750); min-height:0; margin:auto; overflow:hidden; background:#052b8f; overscroll-behavior:none; container-type:size; isolation:isolate; }
.screen { position:absolute; inset:0; display:none; pointer-events:none; }
.screen.active { display:block; pointer-events:auto; }
.screen-modal { z-index:10; }
.frame-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center top; }
.image-hotspot { position:absolute; border:0; background:transparent; cursor:pointer; }
.hotspot-enter { left:24.5%; top:73.7%; width:51%; height:5%; }
.mastergo-field { position:absolute; z-index:2; left:22.53%; width:54.8%; height:5.05%; margin:0; padding:0; border:0; background:transparent; }
.mastergo-field > img { display:block; width:100%; height:100%; }
.page2-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.page2-logos { position:absolute; z-index:1; left:27.33%; top:11.8%; width:45.34%; height:auto; object-fit:contain; }
.mastergo-name-field { top:47.78%; }
.mastergo-year-field { top:55.85%; cursor:pointer; }
.mastergo-input,.mastergo-year-field span { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0 16%; border:0; outline:0; color:#00349d; background:transparent; font-family:"STSong","SimSun",serif; font-size:clamp(16px,4.4vw,20px); font-weight:700; line-height:1; text-align:center; }
.mastergo-input::placeholder { color:#00349d; opacity:1; }
.mastergo-input:focus { box-shadow:none; }
.mastergo-year-field span { display:flex; align-items:center; justify-content:center; pointer-events:none; white-space:nowrap; }
.mastergo-claim { position:absolute; z-index:2; left:24.67%; top:73.71%; width:50.67%; height:5.36%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.mastergo-claim img { display:block; width:100%; height:100%; }
.form-error { position:absolute; left:15%; right:15%; top:70.5%; min-height:20px; margin:0; color:#ffe9a7; font-size:13px; text-align:center; pointer-events:none; }
.page-back { position:absolute; z-index:4; top:max(10px,env(safe-area-inset-top)); left:8px; width:38px; height:38px; border:0; opacity:0; background:transparent; cursor:pointer; }
.hotspot-share { left:29.5%; top:83.5%; width:41%; height:4.1%; }
.dynamic-letter { position:absolute; inset:0; pointer-events:none; color:#00349d; font-family:"Source Han Serif CN Heavy","Source Han Serif CN","STSong","SimSun",serif; font-weight:900; }
.dynamic-name { position:absolute; left:18.4%; top:23.9%; width:64%; margin:0; font-family:"Source Han Serif CN","STSong","SimSun",serif; font-size:clamp(14px,3.45vw,17px); font-size:clamp(14px,3.45cqw,17px); font-weight:500; line-height:1.3; white-space:nowrap; }
.dynamic-years { position:absolute; left:14%; top:27.7%; width:72%; margin:0; color:#d3a54a; font-family:"Source Han Serif CN","STSong","SimSun",serif; font-size:clamp(27px,7.05vw,34px); font-size:clamp(27px,7.05cqw,34px); font-weight:500; line-height:1.12; letter-spacing:.01em; text-align:center; white-space:nowrap; }
.letter-body { position:absolute; left:18.4%; top:33.9%; width:66%; max-width:66%; max-height:29%; margin:0; overflow:hidden; font-family:"Source Han Serif CN Heavy","Source Han Serif CN","STSong","SimSun",serif; font-size:clamp(14px,3.45vw,16px); font-size:clamp(14px,3.45cqw,16px); font-weight:900; line-height:1.82; letter-spacing:0; text-align:justify; text-justify:inter-ideograph; }
.letter-body span { font:inherit; color:inherit; }
.body-paragraph { margin:0; white-space:normal; text-align:justify; text-align-last:left; text-justify:inter-ideograph; }
.body-paragraph.first-paragraph { text-indent:2em; }
.body-paragraph.second-paragraph { text-indent:0 !important; }
.body-paragraph.second-paragraph::before { content:""; display:inline-block; width:2em; height:1px; }
.share-image { user-select:auto; -webkit-user-select:auto; -webkit-touch-callout:default; }
.screen:not([data-screen="4"]) img { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.poster-modal-mask { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(2,16,67,.76); cursor:pointer; }
.poster-modal-panel { position:absolute; z-index:1; left:50%; top:50%; width:min(82%,380px); max-height:88%; transform:translate(-50%,-50%); }
.poster-artboard { position:relative; width:100%; aspect-ratio:652 / 1412; }
.poster-dialog-image { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:none; border-radius:14px; object-fit:contain; box-shadow:0 8px 30px rgba(0,0,0,.38); }
.poster-share-hint { position:absolute; left:30.21%; top:83.78%; width:39.88%; height:auto; pointer-events:none; user-select:none; -webkit-user-select:none; }
.poster-modal-close { top:8px; left:auto; right:8px; width:34px; height:34px; border-radius:50%; opacity:.01; }
.year-sheet { position:absolute; inset:0; z-index:20; visibility:hidden; pointer-events:none; }
.year-sheet.open { visibility:visible; pointer-events:auto; }
.sheet-mask { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; background:rgba(0,0,0,.55); transition:opacity .2s; }
.year-sheet.open .sheet-mask { opacity:1; }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; overflow:hidden; border-radius:18px 18px 0 0; background:#fff; transform:translateY(105%); transition:transform .3s ease; }
.year-sheet.open .sheet-panel { transform:translateY(0); }
.sheet-toolbar { display:grid; grid-template-columns:64px 1fr 64px; align-items:center; height:54px; border-bottom:1px solid #edf0f4; }
.sheet-toolbar h2 { margin:0; color:#202631; font-size:16px; text-align:center; }
.sheet-toolbar button { height:100%; border:0; color:#707987; background:transparent; }
.sheet-toolbar button:last-child { color:#0a57c7; font-weight:600; }
.year-list { height:min(42vh,342px); overflow:auto; padding:8px 0; -webkit-overflow-scrolling:touch; }
.year-option { display:block; width:100%; height:48px; border:0; color:#333b47; background:#fff; font-size:17px; text-align:center; }
.year-option.selected { color:#0a57c7; background:#f0f6ff; font-size:19px; font-weight:600; }
.sheet-safe-area { height:env(safe-area-inset-bottom); }
@media (min-width:463px) { body { background:#081846; } .app { box-shadow:0 0 45px rgba(0,0,0,.38); } }
@media (hover:hover) and (pointer:fine) { .app { width:min(100vw,462px); height:calc(min(100vw,462px) * 1624 / 750); } }