:root{--bg: #120708;--bg-2: #1d0a0b;--cream: #f2e5ce;--cream-dim: rgba(242, 229, 206, .62);--cream-faint: rgba(242, 229, 206, .34);--red: #e53422;--red-deep: #9d1717;--gold: #e2b566;--line: rgba(242, 229, 206, .16);--glass: rgba(24, 11, 12, .52);--sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif;--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "WenQuanYi Zen Hei", serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0e0506;color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}body{position:fixed;inset:0;touch-action:none}button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}#app{position:fixed;inset:0;isolation:isolate;background:radial-gradient(ellipse 52% 46% at 60% 36%,rgba(139,39,24,.34) 0%,rgba(68,18,16,.12) 48%,transparent 72%),radial-gradient(ellipse 46% 42% at 24% 52%,rgba(29,56,66,.16) 0%,transparent 70%),radial-gradient(ellipse 80% 70% at 50% 108%,rgba(38,9,10,.9) 0%,transparent 62%),linear-gradient(155deg,#120a0c,#0b0608 52%,#060304)}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:grab;touch-action:none}body.is-grabbing #stage{cursor:grabbing}body.is-target #stage{cursor:pointer}body.is-tearing #stage{cursor:ew-resize}.scene-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 74% 74% at 50% 46%,transparent 48%,rgba(4,1,1,.56) 100%),linear-gradient(to bottom,rgba(6,2,2,.48),transparent 18%,transparent 76%,rgba(6,2,2,.4));z-index:2}.scene-grain{position:absolute;inset:-20%;pointer-events:none;opacity:.055;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;animation:grain 1.4s steps(3) infinite;mix-blend-mode:soft-light}@keyframes grain{0%{transform:translate(0)}33%{transform:translate(-1.5%,1%)}66%{transform:translate(1%,-1.5%)}to{transform:translate(0)}}.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:26px 32px;pointer-events:none}.brand{display:flex;align-items:center;gap:13px;pointer-events:auto}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:5px;background:linear-gradient(150deg,#d92a1d,#8e1215);color:#f7ead2;font-family:var(--serif);font-weight:900;font-size:27px;line-height:1;box-shadow:0 1px #ffffff2e inset,0 8px 24px #00000061;transform:rotate(-3deg)}.brand-copy h1{margin:0;font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.1em;color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.4)}.brand-copy p{margin:4px 0 0;font-size:9px;letter-spacing:.24em;color:var(--cream-dim)}.brand-copy p span{color:var(--red)}.top-actions{display:flex;align-items:center;gap:10px;pointer-events:auto}.icon-btn,.line-btn{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#13080966;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:11px;letter-spacing:.12em;color:var(--cream-dim);transition:.18s ease}.icon-btn:hover,.line-btn:hover{color:var(--cream);border-color:#f2e5ce59;background:#220d0ea6}.sound-bars{display:flex;align-items:flex-end;gap:2px;width:13px;height:12px}.sound-bars i{display:block;width:2px;background:currentColor;border-radius:2px;animation:bars 1.1s ease-in-out infinite}.sound-bars i:nth-child(1){height:4px;animation-delay:-.2s}.sound-bars i:nth-child(2){height:9px;animation-delay:-.5s}.sound-bars i:nth-child(3){height:6px;animation-delay:-.8s}.sound-bars i:nth-child(4){height:11px;animation-delay:-.35s}@keyframes bars{0%,to{transform:scaleY(.5);opacity:.55}50%{transform:scaleY(1);opacity:1}}#soundBtn[aria-pressed=false] .sound-bars i{animation:none;opacity:.28;height:2px}#soundBtn[aria-pressed=false]{color:var(--cream-faint)}.pack-rail{position:absolute;left:32px;top:50%;transform:translateY(-48%);z-index:9;width:214px;padding:18px 16px 14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#1f0e0ea8,#0c05058f);backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 24px 70px #00000052,0 1px #ffffff0d inset}.rail-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 13px;font-size:10px;letter-spacing:.18em;color:var(--cream-dim);border-bottom:1px solid rgba(242,229,206,.09)}.rail-count{color:var(--gold);font-size:9px;letter-spacing:.1em}.pack-list{display:flex;flex-direction:column;gap:6px;padding-top:12px}.pack-card{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:11px;width:100%;padding:8px 10px 8px 8px;border:1px solid transparent;border-radius:11px;text-align:left;transition:.2s ease;overflow:hidden}.pack-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,rgba(255,255,255,.075),transparent 58%);opacity:0;transition:opacity .2s ease}.pack-card:hover{background:#ffffff0b}.pack-card:hover:before{opacity:1}.pack-card.is-active{border-color:#e2b5667a;background:linear-gradient(100deg,#75261875,#42151029);box-shadow:0 0 0 1px #e2b56614 inset,0 6px 18px #0000002e}.pack-card.is-active:after{content:"";position:absolute;right:9px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--gold);transform:translateY(-50%);box-shadow:0 0 10px #e2b566e6}.mini-pack{position:relative;width:36px;height:48px;border-radius:3px 3px 4px 4px;background:var(--mc, #b31a1b);box-shadow:0 4px 10px #00000057,0 1px #fff3 inset;transform:rotate(var(--mr, -2deg));overflow:hidden;flex:0 0 auto}.mini-pack:before{content:"";position:absolute;left:-2px;right:-2px;top:0;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px);opacity:.65}.mini-pack:after{content:"";position:absolute;left:5px;right:5px;bottom:10px;height:19px;border-radius:1px;background:var(--mw, rgba(255, 245, 219, .9));opacity:.92}.mini-pack i{position:absolute;left:7px;right:7px;top:10px;height:3px;background:var(--ma, #f4dfb2);opacity:.9;z-index:1}.mini-pack em{position:absolute;left:0;right:0;top:17px;height:11px;background:var(--mc2, #e6c274);opacity:.8;z-index:0}.pack-mini-clear .mini-pack:after{background:linear-gradient(160deg,#ffffff80,#ffffff1f);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(1px)}.pc-copy{min-width:0;position:relative;z-index:1}.pc-name{display:block;font-family:var(--serif);font-weight:700;font-size:13.5px;letter-spacing:.05em;color:var(--cream);white-space:nowrap}.pc-style{display:block;margin-top:3px;font-size:9px;letter-spacing:.06em;color:var(--cream-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack-card.is-active .pc-style{color:#f2e5ce94}.rail-foot{margin:13px 4px 0;padding-top:11px;border-top:1px solid rgba(242,229,206,.08);font-size:8.5px;letter-spacing:.12em;color:#f2e5ce40}.pack-meta{position:absolute;right:34px;bottom:116px;z-index:8;width:230px;pointer-events:none;text-align:right}.meta-kicker{font-size:8.5px;letter-spacing:.28em;color:var(--gold);opacity:.72}.meta-name-row{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin-top:7px}.meta-name-row h2{margin:0;font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:.06em}.meta-name-row span{font-size:10px;color:var(--cream-dim);letter-spacing:.08em}#metaFlavor{margin:6px 0 0;font-size:11px;letter-spacing:.08em;color:var(--cream-dim)}.meta-specs{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:12px}.meta-specs span{padding:4px 8px;border:1px solid rgba(242,229,206,.13);border-radius:999px;font-size:8px;letter-spacing:.1em;color:#f2e5ce73;background:#0c050538}.bottombar{position:absolute;left:50%;bottom:26px;z-index:10;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:28px;width:min(720px,calc(100% - 48px));padding:12px 14px 12px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#1f0e0ec7,#0d0606b8);backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);box-shadow:0 22px 60px #00000061,0 1px #ffffff0e inset}.step-block{display:flex;align-items:center;gap:13px;min-width:0}.step-no{font-family:var(--serif);font-size:30px;line-height:1;color:#e2b56673;font-weight:700}.step-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.step-copy strong{font-size:13px;font-weight:600;letter-spacing:.06em;white-space:nowrap}.step-copy span{font-size:10px;color:var(--cream-dim);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.primary-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 17px 0 20px;border-radius:999px;background:linear-gradient(150deg,#e13a22,#a81718);color:#fff5e0;font-size:12px;font-weight:600;letter-spacing:.08em;box-shadow:0 1px #ffffff38 inset,0 10px 22px #9713104d;transition:.18s ease;white-space:nowrap}.primary-btn svg{width:17px;height:17px;transition:transform .18s ease}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 1px #ffffff40 inset,0 14px 26px #9713106b}.primary-btn:hover svg{transform:translate(2px)}.primary-btn:active{transform:translateY(0) scale(.985)}.primary-btn:disabled{opacity:.45;cursor:default;transform:none}.ghost-btn{height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:11px;letter-spacing:.08em;color:var(--cream-dim);transition:.18s ease}.ghost-btn:hover{color:var(--cream);border-color:#f2e5ce57}.camera-note{position:absolute;left:50%;bottom:112px;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:8px;font-size:8.5px;letter-spacing:.16em;color:#f2e5ce3d;pointer-events:none;white-space:nowrap}.camera-note span{width:15px;height:15px;border:1px solid rgba(242,229,206,.22);border-radius:50%;position:relative}.camera-note span:after{content:"";position:absolute;left:50%;top:3px;width:1px;height:4px;background:#f2e5ce66;transform-origin:bottom;transform:rotate(32deg)}.corner-note{position:absolute;right:34px;top:108px;z-index:5;text-align:right;font-size:8px;line-height:1.8;letter-spacing:.16em;color:#f2e5ce33;pointer-events:none}.hotspot{position:absolute;z-index:7;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .26s ease}.hotspot.is-visible{opacity:1}.hotspot-ring{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,232,190,.64);transform:translate(-50%,-50%);animation:hotspot-pulse 2s ease-out infinite;box-shadow:0 0 #ffdcaa2e}.hotspot-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(255,232,190,.34)}@keyframes hotspot-pulse{0%{transform:translate(-50%,-50%) scale(.72);opacity:.9}70%{transform:translate(-50%,-50%) scale(1.25);opacity:0}to{transform:translate(-50%,-50%) scale(1.25);opacity:0}}.hotspot-core{position:absolute;left:50%;top:50%;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#ffeecff0;color:#49100d;font-family:var(--serif);font-weight:800;font-size:12px;transform:translate(-50%,-50%);box-shadow:0 4px 18px #0006}.hotspot-tip{position:absolute;left:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:7px 11px;border:1px solid rgba(255,232,190,.18);border-radius:8px;background:#140808c7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap;font-size:9px;letter-spacing:.04em;color:#f2e5cea6;box-shadow:0 10px 30px #0000004d}.hotspot-tip b{color:var(--cream);font-size:10.5px;font-weight:600;letter-spacing:.05em}.hotspot-tip:before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:1px;background:linear-gradient(to right,transparent,rgba(255,232,190,.3))}.hotspot.flip .hotspot-tip{left:auto;right:40px;align-items:flex-end;text-align:right}.hotspot.flip .hotspot-tip:before{left:auto;right:-14px;background:linear-gradient(to left,transparent,rgba(255,232,190,.3))}.pull-hotspot .hotspot-ring{width:64px;height:64px;border-color:#ffb28899}.pull-hotspot .hotspot-core{background:#ea4824f2;color:#fff0d8}.tear-meter{position:absolute;left:50%;bottom:117px;transform:translate(-50%);z-index:8;width:190px;padding:8px 12px 9px;border:1px solid rgba(242,229,206,.12);border-radius:10px;background:#12070799;backdrop-filter:blur(12px);opacity:0;transition:opacity .22s ease;pointer-events:none}.tear-meter.is-visible{opacity:1}.tm-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:var(--cream-dim);margin-bottom:6px}.tm-label b{color:var(--gold);font-weight:500}.tm-track{height:2px;background:#f2e5ce1f;border-radius:2px;overflow:hidden}.tm-track i{display:block;width:0%;height:100%;background:linear-gradient(90deg,#b2231d,#f0b768);border-radius:inherit}.toast{position:absolute;left:50%;top:28px;z-index:30;transform:translate(-50%,-16px);padding:9px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#160909d1;backdrop-filter:blur(16px);font-size:11px;letter-spacing:.06em;color:var(--cream);opacity:0;pointer-events:none;transition:.26s ease;box-shadow:0 10px 30px #00000057}.toast.is-visible{opacity:1;transform:translate(-50%)}.loader{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse 50% 50% at 50% 48%,rgba(99,24,18,.5),transparent 70%),#0e0506;transition:opacity .7s ease,visibility .7s}.loader.is-hidden{opacity:0;visibility:hidden}.loader-inner{display:flex;flex-direction:column;align-items:center}.loader-mark{width:64px;height:64px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(150deg,#dd2e1e,#861014);color:#f8ecd4;font-family:var(--serif);font-size:38px;font-weight:900;transform:rotate(-3deg);box-shadow:0 18px 50px #a71f1459,0 1px #fff3 inset;animation:loader-breathe 2.4s ease-in-out infinite}@keyframes loader-breathe{0%,to{transform:rotate(-3deg) scale(1)}50%{transform:rotate(-1deg) scale(1.03)}}.loader-brand{margin:22px 0 0;font-family:var(--serif);font-size:18px;letter-spacing:.24em;color:var(--cream)}.loader-status{margin:9px 0 0;font-size:9px;letter-spacing:.14em;color:var(--cream-faint)}.loader-bar{width:140px;height:1px;margin-top:22px;background:#f2e5ce1f;overflow:hidden}.loader-bar i{display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,183,104,.9),transparent);animation:loader-slide 1.3s ease-in-out infinite}@keyframes loader-slide{0%{transform:translate(-110%)}to{transform:translate(320%)}}@media(max-width:1120px){.pack-meta{display:none}.pack-rail{width:198px}}@media(max-width:860px){.topbar{padding:17px 18px}.brand-mark{width:38px;height:38px;font-size:23px}.brand-copy h1{font-size:17px;letter-spacing:.08em}.brand-copy p{font-size:7.5px}.icon-btn .icon-label{display:none}.icon-btn{width:36px;padding:0;justify-content:center}.line-btn{padding:0 12px;font-size:10px}.pack-rail{inset:auto 14px 118px;width:auto;transform:none;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}.rail-head,.rail-foot{display:none}.pack-list{flex-direction:row;gap:5px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:none}.pack-list::-webkit-scrollbar{display:none}.pack-card{flex:0 0 auto;width:66px;grid-template-columns:1fr;justify-items:center;gap:5px;padding:6px 4px 7px;border-radius:10px;background:#1409096b;border-color:#f2e5ce14;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.pack-card.is-active{background:linear-gradient(160deg,#7526188c,#4215104d)}.pack-card:after{display:none}.mini-pack{width:24px;height:32px}.mini-pack:after{bottom:7px;height:14px;left:4px;right:4px}.mini-pack i{left:5px;right:5px;top:8px}.mini-pack em{top:13px;height:8px}.pack-card .pc-copy{text-align:center;width:100%}.pc-name{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis}.pc-style{display:none}.bottombar{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);padding:9px 9px 9px 13px;gap:10px;border-radius:14px}.step-block{gap:9px}.step-no{font-size:22px}.step-copy strong{font-size:11.5px}.step-copy span{font-size:8.5px;max-width:150px}.primary-btn{height:37px;padding:0 13px 0 15px;font-size:10.5px;gap:6px}.primary-btn svg{width:14px;height:14px}.ghost-btn{height:37px;padding:0 12px;font-size:9.5px}.camera-note,.corner-note{display:none}.tear-meter{bottom:176px}.hotspot-tip{display:none}.hotspot-ring{width:46px;height:46px}.pull-hotspot .hotspot-ring{width:54px;height:54px}}@media(max-width:480px){.step-copy span{display:none}.bottombar{gap:6px}.primary-btn{padding:0 11px 0 13px}.ghost-btn{padding:0 9px}.action-arrow{display:none}}@media(max-height:700px)and (min-width:861px){.pack-rail{padding-top:12px;padding-bottom:10px}.pack-card{padding-top:6px;padding-bottom:6px}.rail-foot{display:none}.pack-meta{bottom:100px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}