*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#080b13;color:#f6f2e8;font-family:Arial,"Microsoft YaHei",sans-serif}button{font:inherit;cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid #bdfaff;outline-offset:6px}
/* ===== Single-page live picture-in-picture interaction ===== */
.fantasy-zone,.order-zone{appearance:none;-webkit-appearance:none;padding:0;border:0;background:transparent;font:inherit;text-align:left}
.fantasy-zone:focus-visible,.order-zone:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.alter-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(3,4,10,.28);backdrop-filter:blur(2px);align-items:center;justify-content:center;padding:3vh 4vw;overflow:hidden}
.alter-overlay.active{display:flex;animation:overlayIn .28s ease both}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.world-particles{position:absolute;z-index:1;inset:-8%;overflow:hidden;pointer-events:none;opacity:0;animation:worldReveal .8s ease .08s both}
@keyframes worldReveal{to{opacity:1}}
.world-particles:before,.world-particles:after{content:"";position:absolute;inset:0;pointer-events:none}
.world-particle{position:absolute;width:var(--particle-size);height:var(--particle-size);background:var(--particle-color);border-radius:50%;box-shadow:0 0 15px var(--particle-color),0 0 34px color-mix(in srgb,var(--particle-color),transparent 38%);opacity:0;mix-blend-mode:screen;animation:worldParticleDrift var(--particle-time) ease-in var(--particle-delay) infinite}
@keyframes worldParticleDrift{0%{opacity:0;transform:translate3d(0,25px,0) scale(.35)}15%{opacity:.9}75%{opacity:.7}100%{opacity:0;transform:translate3d(var(--particle-x),var(--particle-y),0) scale(1.25)}}
.world-streak{position:absolute;width:var(--streak-length);height:2px;background:linear-gradient(90deg,transparent,var(--streak-color),transparent);filter:drop-shadow(0 0 8px var(--streak-color));opacity:0;transform:rotate(-28deg);animation:streakTravel var(--streak-time) ease-in var(--streak-delay) infinite}
@keyframes streakTravel{0%{opacity:0;translate:-50px 40px;scale:.3 1}20%{opacity:.85}100%{opacity:0;translate:90px -150px;scale:1.3 1}}
.camera-pip.alter-pip{display:none;position:relative;z-index:3;inset:auto;width:min(860px,90vw);min-width:0;max-height:94vh;padding:20px 22px 16px;background:#11121a;color:#f5ead2;border:1px solid #d7cda9;transform:none;box-shadow:12px 13px 0 #f05b20,0 24px 90px #000b;isolation:isolate;overflow:visible}
.camera-pip.alter-pip.active{display:block}
.alter-overlay.fantasy-mode .camera-pip.alter-pip.active{transform-origin:left center;animation:pipExpandFromLeft .92s cubic-bezier(.18,.76,.24,1) both}
.alter-overlay.order-mode .camera-pip.alter-pip.active{transform-origin:right center;animation:pipExpandFromRight .92s cubic-bezier(.18,.76,.24,1) both}
@keyframes pipExpandFromLeft{0%{opacity:.35;transform:translateX(-48vw) scale(.12) rotate(-7deg);filter:blur(7px)}65%{opacity:1;transform:translateX(2vw) scale(1.035) rotate(1deg);filter:blur(0)}100%{opacity:1;transform:translateX(0) scale(1) rotate(0);filter:blur(0)}}
@keyframes pipExpandFromRight{0%{opacity:.35;transform:translateX(48vw) scale(.12) rotate(7deg);filter:blur(7px)}65%{opacity:1;transform:translateX(-2vw) scale(1.035) rotate(-1deg);filter:blur(0)}100%{opacity:1;transform:translateX(0) scale(1) rotate(0);filter:blur(0)}}
.alter-pip:before{content:"";position:absolute;inset:9px;border:1px solid #ffffff25;pointer-events:none;z-index:7}
.alter-pip:after{content:"";position:absolute;inset:-9px;z-index:-1;pointer-events:none}
.pip-header{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;margin:0 0 13px}
.pip-kicker{font:700 10px/1.2 Arial,sans-serif;letter-spacing:.2em;color:#a8a4b4}
.pip-header h2{margin-top:6px;font:900 30px/1 Impact,Arial,sans-serif;letter-spacing:.1em}
.pip-close{width:34px;height:34px;border:1px solid #fff7;background:#17131d;color:white;font:28px/1 Arial;cursor:pointer}
.camera-screen{position:relative;width:100%;height:min(61vh,540px);min-height:300px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#473256,#15121b 72%);border:1px solid #ffffff35;isolation:isolate}
.camera-screen video,.camera-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.camera-screen video{object-fit:cover;transform:scaleX(-1);z-index:0}
#fantasy-face-3d{z-index:2;pointer-events:none}#fantasy-hand-fx{z-index:1;pointer-events:none}
.pip-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#15101b22 0%,transparent 35%,#110b1b44 100%),radial-gradient(ellipse,transparent 48%,#11101b66 100%);box-shadow:inset 0 0 45px #100d18a0}
.camera-caption{position:absolute;z-index:5;left:11px;top:11px;padding:7px 9px;background:#17131dcc;color:#f5ead2;font:800 8px Arial,sans-serif;letter-spacing:.12em}
.camera-caption b{color:#ff8a35}.rec-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fa5a3a;margin-right:5px;box-shadow:0 0 8px #fa5a3a;animation:recPulse 1s infinite}
@keyframes recPulse{50%{opacity:.32}}
.camera-crosshair{position:absolute;z-index:4;right:12px;top:12px;color:#f3e8d1a8;font:18px Arial,sans-serif}
.pip-controls{position:absolute;z-index:8;right:70px;top:24px;display:flex;gap:8px}
.pip-control{min-height:36px;padding:8px 11px;background:#25232ce8;color:#f5ead2;border:1px solid #ffffff50;font:700 11px/1.2 Arial,sans-serif;letter-spacing:.04em;cursor:pointer;transition:.2s}
.pip-control:hover,.pip-control[aria-pressed="true"]{background:#ff621d;color:#141118;border-color:#ff621d}
.pip-control.fire-btn[aria-pressed="true"]{box-shadow:0 0 18px #ff5a00}
.pip-note{position:relative;z-index:8;margin:10px 0 0;color:#c3bfcb;font:11px/1.4 Arial,sans-serif}
.pip-index{position:absolute;right:-12px;bottom:14px;z-index:9;padding:7px 9px;background:#f4dd67;color:#211921;border:1px solid #17131b;font:900 9px Impact,Arial,sans-serif;letter-spacing:.1em;transform:rotate(-6deg)}
.alter-pip[data-mode="fantasy"]{border:0;background:#17131a;box-shadow:0 24px 90px #000b}
.alter-pip[data-mode="fantasy"]:after{inset:-13px;padding:13px;background:linear-gradient(115deg,#f16a22 0%,#ffd168 27%,#b840ae 52%,#2878d1 78%,#ff812c 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;clip-path:polygon(0 3%,5% 1%,10% 2%,16% 0,22% 2%,29% 1%,35% 3%,42% 0,49% 2%,56% 0,63% 2%,70% 1%,77% 3%,84% 0,91% 2%,97% 0,100% 4%,98% 12%,100% 20%,98% 28%,100% 36%,98% 44%,100% 53%,98% 61%,100% 70%,98% 78%,100% 87%,97% 94%,100% 99%,93% 98%,86% 100%,78% 98%,70% 100%,63% 98%,56% 100%,49% 98%,42% 100%,34% 98%,27% 100%,20% 98%,13% 100%,6% 98%,1% 100%,2% 91%,0 83%,2% 74%,0 65%,2% 57%,0 48%,2% 39%,0 30%,2% 22%,0 13%);filter:drop-shadow(0 7px 5px #0009)}
.alter-pip[data-mode="fantasy"]:before{inset:8px;border:1px dashed #ffd17b70;clip-path:polygon(0 0,100% 1%,99% 100%,1% 99%);background:radial-gradient(circle at 0 0,#ff8a3320,transparent 40%),radial-gradient(circle at 100% 100%,#b936cb20,transparent 42%)}
.alter-pip[data-mode="fantasy"] .pip-header h2{color:#ff9851;text-shadow:2px 2px #6f26bd}
.alter-pip[data-mode="fantasy"] .pip-kicker{color:#ffbf71}
.alter-pip[data-mode="fantasy"] .camera-screen{border:2px solid #f47a2c;box-shadow:5px 5px 0 #632774,10px 10px 0 #f4c64c}
.alter-pip[data-mode="fantasy"] .pip-close{border:2px solid #f4c64c;background:#f15127;color:#17131a;box-shadow:3px 3px 0 #5a2b91;transform:rotate(4deg)}
.alter-pip[data-mode="fantasy"] .pip-index{right:-19px;bottom:24px;background:#f4dd67;color:#211921;border:2px solid #17131b;box-shadow:3px 4px 0 #f05b20;transform:rotate(-8deg)}
.alter-pip[data-mode="fantasy"] .pip-control{border:2px solid #ed7636;box-shadow:3px 3px 0 #572878;transform:rotate(-1deg)}
.alter-pip[data-mode="fantasy"] .pip-control:nth-child(2){transform:rotate(1deg)}
.alter-overlay.fantasy-mode .world-particles:before{background:radial-gradient(ellipse at 22% 52%,#ff6d2529,transparent 40%),radial-gradient(ellipse at 76% 40%,#a433ff29,transparent 44%);mix-blend-mode:screen}
.alter-overlay.fantasy-mode .world-particles:after{background:repeating-linear-gradient(158deg,transparent 0 72px,#ff913014 74px,transparent 79px 130px);animation:paintSweep 6s ease-in-out infinite alternate}
@keyframes paintSweep{to{transform:translate3d(4%,-2%,0) skewX(-7deg);filter:hue-rotate(28deg)}}
.alter-overlay.fantasy-mode .world-streak{height:5px;filter:blur(.3px) drop-shadow(0 0 12px var(--streak-color));transform:rotate(-22deg)}
.alter-pip[data-mode="order"]{border:1px solid #6bf2ff;background:linear-gradient(145deg,#081b28f7,#06101df7 70%);box-shadow:0 0 0 1px #0b93b8,0 0 22px #00dfff72,0 26px 75px #000c}
.alter-pip[data-mode="order"]:after{inset:-8px;padding:8px;background:linear-gradient(135deg,#75f8ff,#087cb5 25%,#122d54 25%,#122d54 75%,#087cb5 75%,#75f8ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;clip-path:polygon(0 0,22px 0,22px 4px,calc(100% - 22px) 4px,calc(100% - 22px) 0,100% 0,100% 22px,calc(100% - 4px) 22px,calc(100% - 4px) calc(100% - 22px),100% calc(100% - 22px),100% 100%,calc(100% - 22px) 100%,calc(100% - 22px) calc(100% - 4px),22px calc(100% - 4px),22px 100%,0 100%,0 calc(100% - 22px),4px calc(100% - 22px),4px 22px,0 22px);box-shadow:0 0 22px #00eaff88}
.alter-pip[data-mode="order"]:before{inset:8px;border:1px solid #43eaff55;background:repeating-linear-gradient(0deg,transparent 0 23px,#35dfff0b 24px 25px),linear-gradient(90deg,#26dfff08,transparent 20%,transparent 80%,#26dfff08);box-shadow:inset 0 0 18px #04cfff13}
.alter-pip[data-mode="order"] .pip-header{border-bottom:1px solid #58eaff55;padding-bottom:10px}
.alter-pip[data-mode="order"] .pip-kicker{font-family:monospace;color:#53eaff;letter-spacing:.24em}
.alter-pip[data-mode="order"] .pip-header h2{font-family:monospace;color:#a5faff;text-shadow:0 0 18px #00aaff;letter-spacing:.13em}
.alter-pip[data-mode="order"] .camera-screen{border:1px solid #39dcff;box-shadow:0 0 0 4px #09263b,0 0 18px #00dcff6e}
.alter-pip[data-mode="order"] .pip-close{border:1px solid #58eaff;background:#061b2a;color:#8ffaff;box-shadow:0 0 12px #00cfff88;border-radius:0}
.alter-pip[data-mode="order"] .pip-index{right:-5px;bottom:17px;background:#071d2a;color:#75f5ff;border:1px solid #51eaff;box-shadow:0 0 13px #00dfff77;transform:none;font-family:monospace}
.alter-pip[data-mode="order"] .pip-control{background:#082534;border:1px solid #31d5f7;color:#a9faff;box-shadow:inset 0 0 10px #14c9f52a;font-family:monospace;text-transform:uppercase}
.alter-pip[data-mode="order"] .pip-control:hover,.alter-pip[data-mode="order"] .pip-control[aria-pressed="true"]{background:#00c6ef;border-color:#00c6ef}
.alter-overlay.order-mode .world-particles:before{background-image:linear-gradient(#26dfff15 1px,transparent 1px),linear-gradient(90deg,#26dfff15 1px,transparent 1px),radial-gradient(ellipse at 70% 42%,#00bfff1f,transparent 52%);background-size:52px 52px,52px 52px,auto;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)}
.alter-overlay.order-mode .world-particles:after{height:20%;inset:-20% 0 auto;background:linear-gradient(180deg,transparent,#25eaff37,transparent);border-bottom:1px solid #52edff99;animation:orderSweep 4.6s linear infinite}
@keyframes orderSweep{to{transform:translateY(700%)}}
.alter-overlay.order-mode .world-particle{border-radius:1px;box-shadow:0 0 13px var(--particle-color),0 0 29px var(--particle-color)}
.alter-overlay.order-mode .world-streak{width:2px;height:var(--streak-length);background:linear-gradient(180deg,transparent,var(--streak-color),transparent);transform:none}
.camera-help{display:none;position:fixed;z-index:1200;left:50%;bottom:20px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));padding:14px 16px;background:#17131d;color:#f5ead2;border:2px solid #f05b20;box-shadow:6px 6px 0 #f4dd67;font:13px/1.5 Arial,sans-serif}
.camera-help.visible{display:block}
@media(max-width:700px){.alter-overlay{justify-content:center;padding:10px}.camera-pip.alter-pip{width:min(94vw,620px);max-height:95vh;padding:14px}.pip-header{margin-bottom:10px}.pip-header h2{font-size:22px}.pip-kicker{font-size:8px}.pip-controls{position:relative;right:auto;top:auto;display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.pip-control{min-height:40px;font-size:10px}.camera-screen{height:min(58vh,480px);min-height:250px}.pip-note{font-size:9px;margin-top:8px}.pip-index{bottom:11px}.alter-overlay.fantasy-mode .camera-pip.alter-pip.active{animation:pipExpandFromLeft .8s cubic-bezier(.18,.76,.24,1) both}.alter-overlay.order-mode .camera-pip.alter-pip.active{animation:pipExpandFromRight .8s cubic-bezier(.18,.76,.24,1) both}}