*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#ded8ce;background-image:radial-gradient(ellipse at 42% 35%,#eee8dd 0,transparent 65%);color:#5a4c3d;font-family:"Microsoft YaHei",sans-serif;overflow:hidden}.preview-layout{height:100svh;display:flex;justify-content:center;align-items:center;gap:64px;padding:24px;--device-scale:.8}.phone-slot{position:relative;flex-shrink:0;width:calc(414px * var(--device-scale));height:calc(868px * var(--device-scale))}.phone-shell{position:absolute;inset:0 auto auto 0;width:414px;height:868px;padding:11px;border:1px solid #766d62;border-radius:43px;background:linear-gradient(110deg,#665e52,#2e2b26 14%,#39342c 85%,#807465);box-shadow:0 30px 60px #59452b26,0 4px 12px #3c2b1b28,inset 0 0 0 2px #b1a28d44;transform:scale(var(--device-scale));transform-origin:top left}.screen{width:390px;height:844px;border-radius:31px;overflow:hidden;background:#eee9e1;isolation:isolate}.screen iframe{display:block;width:390px;height:844px;border:0;background:#eee9e1}.product-switch{display:flex;flex-direction:column;gap:15px;width:242px;flex-shrink:0}.product-button{width:100%;display:flex;align-items:center;gap:10px;min-height:105px;padding:8px 19px 8px 6px;border:1px solid #a99b8844;background:#e9e2d675;border-radius:15px;color:#857564;text-align:left;font:14px/1.5 "Microsoft YaHei",sans-serif;letter-spacing:1px;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}.product-button img{display:block;width:57px;height:88px;object-fit:contain;flex-shrink:0}.product-button span{white-space:nowrap}.product-button i{width:7px;height:7px;border:1px solid #b4a695;border-radius:50%;margin-left:auto;flex-shrink:0}.product-button[aria-pressed=true]{background:#fbf7ee;border-color:var(--swatch);color:#554535;box-shadow:0 7px 22px #5e4d3920}.product-button[aria-pressed=true] i{background:var(--swatch);border-color:var(--swatch)}.product-button:hover{background:#f6f0e5}.product-button:focus-visible{outline:2px solid #8b7356;outline-offset:5px}.product-button[aria-busy=true]{border-style:dashed}@media(max-width:780px){.preview-layout{flex-direction:column;gap:17px;padding:15px}.product-switch{width:min(100%,400px);flex-direction:row;gap:7px}.product-button{justify-content:center;gap:5px;min-height:53px;padding:8px 5px;border-radius:10px;font-size:11px;letter-spacing:0;flex:1}.product-button img{display:none}.product-button i{width:5px;height:5px;margin-left:0}.product-button span{white-space:normal;text-align:center}}@media(prefers-reduced-motion:reduce){.product-button{transition:none}}
.preview-controls{width:242px;flex-shrink:0;display:flex;flex-direction:column;gap:22px}.auto-scroll{width:100%;min-height:46px;border:1px solid #8d7c66;border-radius:12px;background:#74624b;color:#fff9ee;font:12px "Microsoft YaHei",sans-serif;letter-spacing:2px;cursor:pointer;transition:background .2s}.auto-scroll:hover{background:#65513b}.auto-scroll[aria-pressed=true]{background:#f5eee2;color:#695641}.auto-scroll:disabled{opacity:.45;cursor:wait}.auto-scroll:focus-visible{outline:2px solid #8b7356;outline-offset:5px}@media(max-width:780px){.preview-controls{width:min(100%,400px);gap:10px}.preview-controls .product-switch{width:100%}.auto-scroll{min-height:42px;border-radius:10px}}