:root{--brown:#4b1c10;--accent:#d49a3a;--cream:#fffaf4;--ink:#2a120c;--line:#ead8c7}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#f8f1ea}.studioHead{height:74px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.studioHead a{color:#5a2416;text-decoration:none}.studioHead div{text-align:center}.studioHead b{display:block;font:700 27px Georgia;color:#542113}.studioHead small{font-size:9px;letter-spacing:2px;color:#a26d45}.studioHead button,.viewerTools button{border:1px solid #d9bca5;background:white;border-radius:999px;padding:9px 14px;color:#552113;cursor:pointer}.progress{height:68px;display:flex;justify-content:center;align-items:center;gap:5vw;background:#fff}.progress span{display:flex;align-items:center;gap:9px;font-size:13px;color:#927d72}.progress b{width:30px;height:30px;border:1px solid #c9aa94;border-radius:50%;display:grid;place-items:center}.progress .active{font-weight:800;color:#4b1c10}.progress .active b{background:#4b1c10;color:#fff}.studio{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 142px)}.controls{background:#fff;padding:24px;border-right:1px solid var(--line);overflow:auto}.controls section{padding-bottom:24px;border-bottom:1px solid #eee0d4;margin-bottom:22px}.controls h2{font:700 19px Georgia;margin:0 0 13px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice{border:1px solid #ead9cb;background:#fff;border-radius:10px;padding:8px;cursor:pointer}.choice.active{outline:2px solid #6a2918}.choice b,.choice small{display:block;margin-top:5px}.mini{height:55px;display:block;border-radius:5px;background:#4b1c10;box-shadow:inset 0 0 0 3px #bd8136,0 5px 9px #0002}.mini.magnetic{background:#1d1816}.mini.window{background:linear-gradient(135deg,#4b1c10 50%,#a46a38)}.themes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme{padding:12px;border:1px solid #e4d1c2;background:#fff;border-radius:8px;cursor:pointer}.theme.active{background:#4b1c10;color:white}.controls label{display:grid;grid-template-columns:1fr 70px;align-items:center;gap:10px;margin:10px 0;font-size:13px;font-weight:700}.controls input[type=color]{width:70px;height:38px;border:1px solid #ddd;background:white}.controls input[type=text],#lidText{grid-column:1/-1;width:100%;padding:11px;border:1px solid #d8c0ae;border-radius:7px}.viewer{position:relative;min-width:0;background:radial-gradient(circle at 60% 25%,#a95b32 0,#5c2615 34%,#2d1009 75%);padding:20px 28px 26px;display:flex;flex-direction:column}.viewerTools{display:flex;gap:8px;justify-content:flex-end;position:relative;z-index:3}.scene{min-height:520px;display:grid;place-items:center;perspective:1100px;touch-action:none}.box3d{position:relative;width:460px;height:300px;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-28deg);transition:transform .25s ease}.base{position:absolute;inset:55px 25px 15px;background:linear-gradient(135deg,var(--brown),#1f0a06);border:8px solid var(--accent);box-shadow:0 35px 45px #0008;transform:translateZ(0)}.tray{position:absolute;inset:17px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#28100b;padding:12px}.choc{display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 35% 25%,#9b5533,#3a130b 70%);border:2px solid #b57a43;color:#f6c873;font-size:20px;box-shadow:inset 0 0 15px #0007}.c1{border-radius:50%;background:radial-gradient(circle at 35% 25%,#c78655,#54200f 70%)}.c2{border-radius:7px;background:linear-gradient(145deg,#d8c3a3,#7a3c23 48%,#35120a)}.lid{position:absolute;inset:15px 0 55px;transform-origin:50% 100%;transform-style:preserve-3d;transform:translateZ(45px) rotateX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:4}.lid.open{transform:translateZ(45px) rotateX(-118deg)}.lidFace{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,color-mix(in srgb,var(--brown),#fff 8%),var(--brown));border:8px double var(--accent);color:var(--accent);box-shadow:0 15px 30px #0008}.lidFace strong{font:italic 700 44px Georgia;text-shadow:0 2px 0 #301008}.lidFace small{letter-spacing:5px;margin-top:8px}.ornament{font-size:35px;align-self:flex-start;margin-left:25px}.ornament.bottom{align-self:flex-end;margin:0 25px 0 0}.hint{text-align:center;color:#f1d9c8;font-size:12px;margin:-6px 0 18px}.summary{margin-top:auto;background:#fffaf4;border-radius:18px;padding:18px 22px;display:grid;grid-template-columns:1fr auto auto auto;gap:25px;align-items:center}.summary h2{margin:3px 0;font:700 22px Georgia}.summary p{margin:0;color:#826b60;font-size:12px}.price strong{font:800 28px Georgia}.price small{display:block}.qty{display:flex;align-items:center;gap:10px}.qty button{width:32px;height:32px;border-radius:50%;border:1px solid #ddc7b5;background:white;cursor:pointer}.cartBtn{background:#571f10;color:white;border:0;border-radius:999px;padding:16px 28px;font-weight:800;cursor:pointer}@media(max-width:900px){.progress{gap:10px;overflow:auto;justify-content:flex-start;padding:0 15px}.progress span{white-space:nowrap}.studio{grid-template-columns:1fr}.controls{border-right:0}.scene{min-height:430px;overflow:hidden}.box3d{width:350px;height:235px}.summary{grid-template-columns:1fr auto}.cartBtn{grid-column:1/-1}.viewer{min-height:650px}}
#webglStudio{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}#webglStudio:active{cursor:grabbing}.scene.webgl-ready .webglFallback{display:none}.webglFallback{display:contents}.viewerTools button.active{background:#4b1c10;color:#fff}.scene:has(#webglStudio){position:relative}.webglBadge{position:absolute;left:14px;bottom:14px;background:#fff9;color:#4b1c10;border:1px solid #d8c0ae;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;z-index:2}
.premiumNote{font-size:10px;font-weight:900;letter-spacing:.16em;color:#9a661d;background:#fff5dc;border:1px solid #ecd29c;border-radius:999px;padding:6px 10px;display:inline-block;margin:0 0 12px}.viewer{background:radial-gradient(circle at 52% 35%,#fffdf8 0,#f7eee4 58%,#ead8c7 100%)}.scene.webgl-ready{background:radial-gradient(ellipse at center,#fffaf2 0,#efe0d0 70%,#e2cbb7 100%);border:1px solid #dfc6b2;box-shadow:inset 0 0 70px #9c623018}