:root{color-scheme:light;--ink:#30264e;--orange:#ff8959;--cream:#fff8e8;--line:rgba(48,38,78,.12)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,"Microsoft YaHei",sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 10%,#fff0b9,transparent 34%),radial-gradient(circle at 90% 15%,#cef5ec,transparent 32%),#fbfaf4}header{height:72px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px}.brand,.console{text-decoration:none;color:inherit}.brand{display:flex;gap:10px;align-items:center;font-weight:900}.brand b{display:grid;place-items:center;width:42px;height:42px;color:#fff;background:linear-gradient(135deg,#ffb24b,#ff6f59);border-radius:14px}.console{padding:11px 17px;border:1px solid var(--line);border-radius:99px;background:#fff9}main{max-width:1180px;margin:auto;padding:48px 24px 100px}.hero{padding:64px 0 50px;max-width:780px}.hero p,.packs>div>p{letter-spacing:.18em;color:#d65e3d;font-weight:800;font-size:13px}.hero h1{font-size:clamp(42px,7vw,82px);line-height:.98;margin:16px 0 24px;letter-spacing:-.06em}.hero span{font-size:18px;line-height:1.8;color:#6b6478}nav{display:flex;gap:8px;margin:0 0 28px}nav button{border:1px solid var(--line);background:#fff9;padding:10px 18px;border-radius:99px;color:inherit;font-weight:700}nav button.active{background:var(--ink);color:#fff}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{padding:0;text-align:left;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 18px 60px #53422f12;color:inherit}.card img{display:block;width:100%;aspect-ratio:9/12;object-fit:cover}.card div{padding:20px}.card small{color:#d65e3d;font-weight:800}.card h2{font-size:24px;margin:8px 0}.card p{min-height:50px;color:#71697a;line-height:1.6}.card span{font-weight:800}.packs{margin-top:80px;padding:44px;border:1px solid var(--line);border-radius:32px;background:#ffffffa8}.packs h2{font-size:34px;margin:8px 0 28px}.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.pack-grid article{display:flex;gap:16px;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line)}.pack-grid b{font-size:30px}.pack-grid h3,.pack-grid p{margin:0 0 7px}.pack-grid p,.pack-grid span{color:#746d7d}.pack-grid span{font-size:13px}dialog{border:0;border-radius:32px;padding:24px;max-width:820px;width:calc(100% - 32px);color:var(--ink);grid-template-columns:330px 1fr;gap:28px;background:#fff}dialog[open]{display:grid}dialog::backdrop{background:#1e1836cc;backdrop-filter:blur(8px)}.close{position:absolute;right:16px;top:12px;border:0;background:#eee8;width:38px;height:38px;border-radius:50%;font-size:25px}.phone{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#eee}.phone img{width:100%;height:100%;object-fit:cover}.phone-title{position:absolute;top:24px;left:20px;right:20px;color:#fff;font-weight:900;text-shadow:0 2px 12px #000;text-align:center}.phone-actions{position:absolute;left:14px;right:14px;bottom:18px;display:flex;gap:6px;padding:9px;border-radius:99px;background:#fffbd}.phone-actions i{flex:1;text-align:center;font-style:normal;font-size:11px}.detail{align-self:center}.detail small{color:#d65e3d}.detail h2{font-size:38px;margin:10px 0}.detail p{line-height:1.8;color:#71697a}.detail a{display:inline-block;margin-top:16px;padding:14px 20px;border-radius:14px;background:linear-gradient(90deg,#ffad45,#ff6557);color:#fff;text-decoration:none;font-weight:900}@media(max-width:720px){header{height:60px;padding:0 14px}.console{font-size:13px;padding:9px 12px}main{padding:18px 14px 70px}.hero{padding:34px 0}.hero h1{font-size:45px}.grid{grid-template-columns:1fr}.card{display:grid;grid-template-columns:42% 58%;border-radius:22px}.card img{height:100%;aspect-ratio:auto}.card div{padding:16px}.card h2{font-size:20px}.card p{font-size:14px}.pack-grid{grid-template-columns:1fr}.packs{padding:22px;margin-top:45px}dialog[open]{display:block}.phone{max-height:58vh;width:auto;margin:auto}.detail h2{font-size:28px}.detail p{display:none}}

/* V83: the catalog preview uses the same layered entrance contract as the companion player. */
nav{flex-wrap:wrap}
.close{z-index:120}.phone{background:#171329;box-shadow:0 20px 60px #1e18364d}.preview-stage,.preview-background,.preview-depth,.preview-container-back,.preview-container-front,.preview-foreground{position:absolute;inset:0}.preview-background,.preview-container-back,.preview-container-front,.preview-foreground{background-size:cover;background-position:center}.preview-background{z-index:0}.preview-depth{z-index:10;pointer-events:none;background:radial-gradient(circle at 70% 18%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 28% 34%,#fff 0 1px,transparent 2px),linear-gradient(165deg,transparent 15%,#fff3 45%,transparent 65%);background-size:43px 43px,61px 61px,100% 100%;mix-blend-mode:screen}.preview-container-back{z-index:20}.phone .preview-character{position:absolute;z-index:30;left:50%;bottom:12%;width:76%;height:auto;max-height:72%;object-fit:contain;transform:translate3d(-50%,38%,0) scale(.72);opacity:0;filter:drop-shadow(0 12px 14px #271d3a55)}.preview-container-front{z-index:50}.preview-foreground{z-index:60;pointer-events:none}.preview-stage .phone-title{z-index:80;opacity:0;transition:opacity .45s}.preview-stage .phone-actions{z-index:80;opacity:0;transform:translateY(14px);transition:.5s}.preview-progress{position:absolute;z-index:90;left:18px;right:18px;top:18px;color:#fff;font-size:11px;text-shadow:0 1px 5px #000}.preview-progress::before{content:"";display:block;height:3px;margin-bottom:6px;border-radius:5px;background:#ffffff45}.preview-progress i{position:absolute;left:0;top:0;width:0;height:3px;border-radius:5px;background:linear-gradient(90deg,#fff,var(--preview-accent))}.preview-stage.is-playing .preview-progress i{animation:preview-progress var(--preview-duration) linear both}.preview-stage.is-playing.cue-shake .preview-container-front,.preview-stage.is-playing.cue-shake .preview-container-back{animation:preview-shake .55s ease-in-out}.preview-stage.cue-open .preview-container-front{animation:preview-open .9s cubic-bezier(.2,.8,.2,1) both}.preview-stage.cue-greeting .phone-title,.preview-stage:not(.is-playing) .phone-title{opacity:1}.preview-stage.cue-greeting .phone-actions,.preview-stage:not(.is-playing) .phone-actions{opacity:1;transform:none}.preview-replay{position:absolute;z-index:95;right:14px;top:42px;border:1px solid #fff8;background:#241d4aa8;color:#fff;border-radius:99px;padding:7px 10px;font-size:11px;backdrop-filter:blur(6px)}@keyframes preview-progress{to{width:100%}}@keyframes preview-shake{0%,100%{transform:none}25%{transform:translateX(-2%)}50%{transform:translateX(2%)}75%{transform:translateX(-1%)}}@keyframes preview-open{0%{transform:none;filter:brightness(1)}45%{transform:translateY(-2%) scale(1.01);filter:brightness(1.35)}100%{transform:translateY(1%);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.preview-stage *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.preview-stage .phone-title{top:66px}
@media(max-width:720px){nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}}