:root{font-family:PingFang SC,Microsoft YaHei,Noto Sans CJK SC,system-ui,-apple-system,sans-serif;color:#fff7dd;background:#9d0810;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--gold-soft: #fff5be;--gold: #ffd45d;--gold-deep: #b96a08;--red: #c90f19;--red-deep: #71040a;--site-bg-image: url(/brand/site-bg-xibao-4k.jpg)}*{box-sizing:border-box}html{height:100%;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{width:100%;min-width:320px;height:100%;min-height:100%;margin:0;overflow-x:hidden;overscroll-behavior-y:none;background-color:#87060d}#root{min-height:100%;min-height:100svh;position:relative;isolation:isolate}#root:before,#root:after{content:"";position:fixed;inset:0;pointer-events:none}#root:before{z-index:-2;background-image:linear-gradient(180deg,#ff693414,#81000738 46%,#53000594),var(--site-bg-image),linear-gradient(180deg,#e73524,#b70d16 44%,#7a050b);background-repeat:no-repeat,no-repeat,no-repeat;background-position:center top,center top,center top;background-size:cover,cover,cover}@supports (background-image: image-set(url(/brand/site-bg-xibao-4k.webp) type("image/webp"))){:root{--site-bg-image: image-set(url(/brand/site-bg-xibao-4k.webp) type("image/webp"), url(/brand/site-bg-xibao-4k.jpg) type("image/jpeg"))}}#root:after{z-index:-1;background:radial-gradient(circle at 50% 6%,rgba(255,237,160,.18),transparent 18rem),linear-gradient(90deg,rgba(67,0,4,.3),transparent 18%,transparent 82%,rgba(67,0,4,.3)),linear-gradient(180deg,transparent 0 22rem,rgba(82,0,6,.12) 42rem,rgba(58,0,5,.34) 100%),radial-gradient(circle at 50% 20%,transparent 0 18rem,rgba(68,0,3,.18) 56rem);opacity:.82}@supports (height: 100dvh){#root{min-height:100dvh}}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}button,label,input[type=file]{touch-action:manipulation}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{position:relative;width:min(100%,480px);min-height:100vh;min-height:100svh;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(42px + env(safe-area-inset-bottom));overflow:hidden;animation:pageEnter .18s ease-out both}@supports (min-height: 100dvh){.app-shell{min-height:100dvh}}.loading-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;color:var(--gold-soft);background:radial-gradient(circle at 50% 30%,rgba(255,235,161,.34),transparent 15rem),radial-gradient(circle at 48% 52%,rgba(255,199,79,.16),transparent 20rem),linear-gradient(180deg,#ee3a26,#bd0e18 47%,#7a050b);transition:opacity .36s ease,visibility .36s ease}.loading-screen.is-leaving{opacity:0;visibility:hidden}.loading-orbit{position:absolute;width:190px;height:190px;border:1px solid rgba(255,219,112,.34);border-radius:50%;box-shadow:0 0 0 18px #ffd6670a,0 0 42px #ffcb5733;animation:loadingPulse 1.6s ease-out infinite}.loading-content{position:relative;z-index:1;display:grid;gap:16px;justify-items:center;padding:0 24px;text-align:center;animation:loadingTitleIn .76s ease both}.loading-text{position:relative;color:#fff4c7;font-size:22px;font-weight:900;line-height:1;white-space:nowrap;border:1px solid rgba(255,219,112,.32);border-radius:999px;padding:11px 20px;background:#70040942;box-shadow:0 0 24px #ffd45d38,inset 0 1px #ffffff1f}.loading-particles,.particle-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden}.loading-particles i,.particle-layer i{position:absolute;bottom:-20px;border-radius:999px;background:#ffd76fdb;box-shadow:0 0 12px #ffd76f7a;opacity:0}.loading-particles i{animation:floatGold 3s linear infinite}.particle-layer{z-index:0}.particle-layer i{animation:floatGold 15s linear infinite}.hero{position:relative;z-index:1;padding:54px 4px 28px;text-align:center}.hero:before{content:"";position:absolute;top:24px;left:50%;width:178px;height:46px;border-radius:999px;background:radial-gradient(circle,rgba(255,224,125,.26),transparent 68%);filter:blur(12px);transform:translate(-50%);pointer-events:none}.hero:after{content:"";display:block;width:min(340px,78%);height:1px;margin:15px auto 0;background:linear-gradient(90deg,transparent,rgba(255,222,122,.78),transparent);box-shadow:0 0 18px #ffd26247}.hero-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;border:1px solid rgba(255,225,136,.46);border-radius:999px;padding:7px 16px;color:#fff0b6;font-size:13px;font-weight:800;line-height:1;background:linear-gradient(180deg,#ffea9d29,#ffffff08),#88050c94;box-shadow:0 8px 20px #5300002e,inset 0 1px #ffffff29}.hero-title-art{position:relative;display:block;width:min(112%,468px);max-width:calc(100vw - 32px);margin:0 auto 14px;line-height:0;filter:drop-shadow(0 7px 0 rgba(93,18,0,.56)) drop-shadow(0 14px 16px rgba(71,0,0,.34)) drop-shadow(0 0 13px rgba(255,215,93,.22));isolation:isolate;transform:translateZ(0);animation:heroTitleEnter .28s ease-out both,heroGoldGlow 3.2s ease-in-out .68s infinite}.hero-title-art:before,.hero-title-art:after{content:"";position:absolute;pointer-events:none}.hero-title-art:before{inset:18% -4% 2%;z-index:-1;border-radius:999px;background:radial-gradient(ellipse at center,rgba(255,231,114,.5),rgba(255,151,44,.2) 42%,transparent 72%);filter:blur(14px);opacity:.76;transform:translateY(8px);animation:heroAuraPulse 2.8s ease-in-out infinite}.hero-title-art:after{inset:0;z-index:1;background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.5) 47%,rgba(255,238,149,.28) 52%,transparent 62% 100%);background-size:230% 100%;mix-blend-mode:screen;opacity:.58;-webkit-mask-image:url(/brand/hero-title-gold.webp);mask-image:url(/brand/hero-title-gold.webp);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;animation:heroGoldSweep 3.7s ease-in-out .68s infinite}.hero-title-art picture{position:relative;z-index:0;display:block}.hero-title-image{width:100%;height:auto;user-select:none;-webkit-user-drag:none}.hero p{display:inline-block;max-width:342px;margin:0 auto;border:1px solid rgba(255,224,139,.32);border-radius:999px;padding:9px 15px;color:#fff7deeb;font-size:14px;line-height:1.45;background:linear-gradient(180deg,#ffe79a21,#ffffff05),#74040b7a;box-shadow:0 10px 20px #47000029,inset 0 1px #ffffff1f}.content-grid{position:relative;z-index:1;display:grid;gap:18px}.panel{position:relative;border:1px solid rgba(255,214,103,.45);border-radius:16px;padding:18px;overflow:hidden;background:linear-gradient(180deg,#a90f18e6,#67040af0),#68040aeb;box-shadow:0 14px 30px #41000047,inset 0 1px #ffffff21;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:cardRise .7s ease both}.panel:before{content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 32%),radial-gradient(circle at 85% 0%,rgba(255,216,105,.13),transparent 42%)}.panel h2{position:relative;margin:6px 0 0;color:#fff5d0;font-size:25px;line-height:1.2;text-shadow:0 2px 8px rgba(82,0,0,.28)}.panel>*,.panel-heading,.upload-control,.frame-grid,.result-preview,.action-row{position:relative;z-index:1}.section-kicker{display:inline-flex;align-items:center;border:1px solid rgba(255,222,128,.36);border-radius:999px;padding:5px 10px;color:#ffe5a1;font-size:13px;font-weight:900;line-height:1;background:#ffdb7714}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.status-pill{flex:0 0 auto;border:1px solid rgba(255,222,144,.52);border-radius:999px;padding:6px 11px;color:#ffefbd;font-size:12px;background:#ffda7014}.upload-panel{display:grid;gap:15px}.upload-control{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:14px;min-height:122px;border:1px dashed rgba(255,225,138,.7);border-radius:14px;padding:13px;overflow:hidden;background:linear-gradient(135deg,#ffdf7c33,#ffffff0a),#74070c4d;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.upload-control:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 0 34%,rgba(255,245,190,.13) 46%,transparent 58% 100%);opacity:0;transition:opacity .18s ease}.upload-control:hover,.upload-control:focus-within{border-color:#ffe8a3eb;box-shadow:0 0 0 3px #ffe18a2e,0 0 22px #ffd15e2e}.upload-control:hover:after,.upload-control:focus-within:after{opacity:1}.upload-control:active{transform:scale(.99)}.upload-control input{position:absolute;inset:0;z-index:3;width:100%;height:100%;opacity:0;cursor:pointer}.upload-preview{display:grid;place-items:center;width:96px;aspect-ratio:1;overflow:hidden;border:3px solid rgba(255,225,138,.9);border-radius:999px;background:radial-gradient(circle,#ffe69738,#78080c2e);box-shadow:0 8px 18px #3d000033,inset 0 1px #ffffff2e}.upload-preview img{width:100%;height:100%;object-fit:cover}.upload-preview b{color:#ffe3a1;font-size:18px}.upload-copy{display:grid;gap:7px;min-width:0}.upload-copy strong{overflow-wrap:anywhere;color:#fff7dd;font-size:18px;line-height:1.25}.upload-copy small{color:#fff1cebf;font-size:13px;line-height:1.4}.frame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.frame-card{position:relative;display:grid;gap:9px;border:1px solid rgba(255,218,114,.36);border-radius:14px;padding:9px;color:#fff1bf;background:linear-gradient(180deg,#8b0910db,#5b0308e6),#500407a3;box-shadow:0 8px 18px #31000033,inset 0 1px #ffffff1a;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.frame-card:disabled{cursor:wait;opacity:.72;transform:none}.frame-card:hover:not(:disabled),.frame-card:focus-visible{transform:translateY(-2px);border-color:#ffe28bad}.frame-card.is-selected{border-color:#ffe189;box-shadow:0 0 0 2px #ffd66e33,0 12px 25px #3c000047,0 0 26px #ffca424d,inset 0 1px #ffffff2e;transform:translateY(-3px)}.frame-card em{position:absolute;top:8px;right:8px;z-index:2;border:1px solid rgba(255,243,190,.56);border-radius:999px;padding:4px 8px;color:#7a1a00;font-size:12px;font-style:normal;font-weight:900;line-height:1;background:linear-gradient(180deg,#fff1ad,#f3bd48);box-shadow:0 6px 12px #3f000033}.frame-card img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover;background:#fff8ea;image-rendering:auto;box-shadow:inset 0 0 0 1px #ffffff47}.frame-card span{color:#fff0bc;font-size:14px;font-weight:900;text-align:center;text-shadow:0 1px 5px rgba(60,0,0,.22)}.result-panel{display:grid;gap:14px}.result-preview{padding:8px;overflow:hidden;border:1px solid rgba(255,229,146,.82);border-radius:16px;background:linear-gradient(135deg,#fff5bcf2,#ecae42eb),#fff8ea;box-shadow:0 12px 28px #35000042,inset 0 1px #ffffffb3;animation:resultGlow .9s ease 1}.result-preview img{width:100%;aspect-ratio:1;border-radius:11px;object-fit:contain;background:#fff8ea}.result-note{margin:0;border:1px solid rgba(255,223,128,.34);border-radius:12px;padding:10px 12px;color:#fff4d5e0;font-size:13px;font-weight:700;line-height:1.5;text-align:center;background:#78060c5c}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.primary-action,.ghost-action{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:50px;border-radius:12px;font-weight:900;line-height:1.2;text-align:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.primary-action:active,.ghost-action:active{transform:scale(.98)}.primary-action{border:0;color:#7a1b00;background:linear-gradient(180deg,#fff1ac,#ffd364 48%,#edae36);box-shadow:0 12px 20px #430a0047,inset 0 1px #ffffff8c}.primary-action:hover{filter:brightness(1.04)}.primary-action:focus-visible,.ghost-action:focus-visible,.frame-card:focus-visible,.music-button:focus-visible{outline:3px solid rgba(255,241,178,.9);outline-offset:3px}.ghost-action{border:1px solid rgba(255,225,151,.6);color:#fff0bd;background:#8609107a}.music-shell{position:fixed;z-index:4;top:calc(14px + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}.music-button{position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,230,158,.72);border-radius:999px;background:radial-gradient(circle,#ffeaa4 0 18%,#4e0708 19% 29%,#e2ba61 30% 36%,#7b0710 37% 100%);box-shadow:0 8px 18px #35000042,0 0 18px #ffd26233,inset 0 1px #ffffff26;cursor:pointer}.music-button:disabled{opacity:.72}.music-button:before{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,211,105,.35);border-radius:inherit}.music-button span{width:13px;height:13px;border-radius:999px;background:#ffe8a6}.music-button.is-playing{animation:spin 4s linear infinite}.music-error{width:max-content;max-width:160px;margin:8px 0 0;border:1px solid rgba(255,221,128,.28);border-radius:10px;padding:7px 9px;color:#fff1c4;font-size:12px;background:#3e0000b8}.toast{position:fixed;z-index:5;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));left:16px;max-width:430px;margin:0 auto;border:1px solid rgba(255,225,151,.54);border-radius:12px;padding:12px 14px;color:#fff3ce;font-size:14px;text-align:center;overflow-wrap:anywhere;background:#480206eb;box-shadow:0 10px 26px #23000052}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.panel{background:linear-gradient(180deg,#a90f18f5,#67040afa)}}html.is-ios{height:-webkit-fill-available}html.is-ios body,html.is-ios #root,html.is-ios .app-shell{min-height:-webkit-fill-available}html.is-android .panel,html.brand-huawei .panel,html.brand-xiaomi .panel,html.brand-oppo .panel,html.brand-vivo .panel{background:linear-gradient(180deg,#a90f18f0,#67040af7);-webkit-backdrop-filter:none;backdrop-filter:none}html.browser-wechat .app-shell{min-height:100vh;min-height:-webkit-fill-available;padding-bottom:calc(50px + env(safe-area-inset-bottom))}html.browser-wechat .particle-layer i{display:none}html.browser-wechat .hero-title-art,html.browser-wechat .frame-card,html.browser-wechat .result-preview{transform:translateZ(0)}html.browser-wechat .hero-title-art:before,html.browser-wechat .hero-title-art:after{animation:none}html.browser-wechat .result-preview img{-webkit-touch-callout:default;-webkit-user-select:none;user-select:none}html.brand-samsung .frame-card,html.brand-huawei .frame-card,html.brand-xiaomi .frame-card{transform:translateZ(0)}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes loadingTitleIn{0%{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes loadingPulse{0%{opacity:.7;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}}@keyframes heroTitleEnter{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes titleShine{to{left:112%}}@keyframes heroGoldSweep{0%,40%{background-position:180% 0}70%,to{background-position:-70% 0}}@keyframes heroAuraPulse{0%,to{opacity:.58;transform:translateY(8px) scale(.98)}50%{opacity:.92;transform:translateY(8px) scale(1.03)}}@keyframes heroGoldGlow{0%,to{filter:drop-shadow(0 7px 0 rgba(93,18,0,.56)) drop-shadow(0 14px 16px rgba(71,0,0,.34)) drop-shadow(0 0 13px rgba(255,215,93,.22))}50%{filter:drop-shadow(0 7px 0 rgba(93,18,0,.56)) drop-shadow(0 14px 18px rgba(71,0,0,.4)) drop-shadow(0 0 24px rgba(255,226,105,.44))}}@keyframes cardRise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floatGold{0%{transform:translateZ(0) scale(.7);opacity:0}16%{opacity:.62}to{transform:translate3d(16px,-110vh,0) scale(1.16);opacity:0}}@keyframes resultGlow{0%{box-shadow:0 12px 28px #35000042,0 0 #ffe07a00,inset 0 1px #ffffffb3}42%{box-shadow:0 12px 28px #35000042,0 0 32px #ffe07a61,inset 0 1px #ffffffb3}to{box-shadow:0 12px 28px #35000042,0 0 #ffe07a00,inset 0 1px #ffffffb3}}@media(max-width:360px){.app-shell{padding-right:12px;padding-left:12px}.hero{padding-top:46px}.hero-title-art{max-width:calc(100vw - 30px)}.loading-text{font-size:20px}.hero p{font-size:13px;padding-right:12px;padding-left:12px}.panel{border-radius:14px;padding:15px}.upload-control{grid-template-columns:78px 1fr;gap:12px;min-height:108px;padding:10px}.upload-preview{width:78px}.frame-grid{gap:10px}.frame-card{padding:7px}.action-row{grid-template-columns:1fr}}@media(min-width:430px){.app-shell{padding-right:18px;padding-left:18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.loading-particles i,.particle-layer i,.loading-orbit{display:none}}html.is-android .hero-title-art:after{animation-duration:.001ms;animation-iteration-count:1}html.is-low-power .particle-layer i,html.is-low-power .loading-particles i{display:none}html.is-low-power .hero-title-art:after{animation:none}