.viewer{height:calc(100svh - 112px);min-height:520px;margin:16px 24px 20px 0;top:16px;border:0;border-radius:14px;background:#fff;box-shadow:0 18px 45px #182a2110;isolation:isolate}
.viewer:before{content:'';position:absolute;inset:0;pointer-events:none;background:none;z-index:0}
.viewer:after{content:'';position:absolute;width:66%;height:7%;left:21%;bottom:18%;border-radius:50%;background:radial-gradient(ellipse,#182d2020,transparent 67%);filter:blur(14px);opacity:0;transition:opacity .25s;pointer-events:none;z-index:0}
.viewer:has(#canvas[data-current-view=full]):after,.viewer:has(#canvas[data-current-view=back]):after{opacity:1}
.viewer-head{top:21px;left:26px;right:22px;align-items:center;pointer-events:none;z-index:3}
.stage-title{font-size:15px;font-weight:750;color:#25322b;letter-spacing:-.02em}
.stage-tools{display:flex;gap:3px;pointer-events:auto;padding:3px;background:#fff9;border-radius:28px}
.stage-tools button{display:grid;place-items:center;width:38px;height:38px;min-height:38px;border-radius:50%;color:#34473b;transition:background .2s,transform .2s}
.stage-tools button:hover{background:#e5ebe6;transform:translateY(-1px)}
.stage-tools button:focus-visible{outline:2px solid #d6a600;outline-offset:2px}
.stage-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stage-tools button:last-child{margin-left:4px}
.preview-detail{top:68px;left:26px;right:26px;font-size:10px;line-height:1.5;color:#6f7d73;z-index:2}
#canvas{inset:88px 0 90px;z-index:1;outline:0}
#canvas:focus-visible{box-shadow:inset 0 0 0 2px #d8ad2240}
.viewer-bottom{bottom:19px;left:20px;right:20px;display:flex;align-items:center;flex-direction:column;gap:9px;z-index:3}
.view-buttons{display:inline-flex;flex-wrap:nowrap;justify-content:center;width:max-content;max-width:100%;gap:3px;padding:5px;border-radius:32px;background:#fffdfc;box-shadow:0 4px 18px #223b2910}
.view-buttons button{font-size:12px;font-weight:650;min-height:40px;padding:9px 18px;box-shadow:none;background:transparent;color:#637368;white-space:nowrap;border-radius:25px;transition:background .2s,color .2s}
.view-buttons button[aria-pressed=true]{background:#17241c;color:#fff;box-shadow:0 3px 8px #17241c20}
.view-buttons button:hover{transform:none;box-shadow:none;background:#e8eee9;color:#17241c}
.view-buttons button[aria-pressed=true]:hover{background:#17241c;color:#fff}
.view-buttons button:focus-visible{outline:2px solid #d6a600;outline-offset:2px}
.viewer-bottom p{font-size:10px;color:#7c897f;margin:0;line-height:1.4}
.viewer-bottom #render-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.viewer-bottom #render-status:empty{display:none}
@media(min-width:761px) and (max-width:1100px){.viewer{margin-right:16px}.viewer-head{left:20px;right:17px}.preview-detail{left:20px;right:20px}.view-buttons button{padding:9px 11px;font-size:11px}}
@media(max-width:760px){.viewer,.viewer:has([data-view=design]:not([hidden])){height:44svh;min-height:330px;max-height:420px;top:0;width:100%;margin:0;border-radius:0 0 16px 16px;box-shadow:0 10px 24px #17291e0d}.viewer-head{top:12px;left:20px;right:15px}.stage-title{font-size:13px}.stage-tools{padding:0;background:transparent}.stage-tools button{width:34px;height:34px;min-height:34px}.stage-tools svg{width:16px;height:16px}.preview-detail{top:48px;left:20px;right:20px;font-size:9px}#canvas,.viewer:has([data-view=design]:not([hidden])) #canvas{inset:66px 0 64px}.viewer-bottom{bottom:12px;left:12px;right:12px;gap:0}.view-buttons,.viewer:has([data-view=design]:not([hidden])) .view-buttons{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:4px;max-width:100%}.view-buttons button{font-size:10px;min-height:34px;padding:7px 12px}.viewer-bottom p{display:none}.viewer:after{bottom:20%;filter:blur(10px)}#form>fieldset,#label-graphic,.single-panel{scroll-margin-top:calc(min(44svh,420px) + 20px)}}
@media(max-width:360px){.view-buttons button{padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.viewer:after,.stage-tools button,.view-buttons button{transition:none}}
