/* The live studio extends the original material library and board. */
.object-stage{min-height:650px;background:#e8eae7;isolation:isolate}
.three-viewport{position:absolute;inset:0;z-index:1;transition:opacity .3s}
.three-viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline-offset:-4px}
.three-viewport canvas:active{cursor:grabbing}
.viewer-loading{position:absolute;inset:45% 20px auto;text-align:center;font-size:12px;color:#747d75}
.stage-top{align-items:flex-start;gap:12px;z-index:4}
.stage-top h2{display:flex;align-items:center;gap:7px;font-size:15px}
.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#304ce8;box-shadow:0 0 0 3px #304ce815;flex-shrink:0}
.render-toggle{display:flex;pointer-events:auto;padding:3px;background:#ffffff8c;border:1px solid #ffffff99;border-radius:6px;backdrop-filter:blur(12px)}
.render-toggle button{background:transparent;font-size:9px;min-height:32px;padding:6px 9px;border-radius:4px;color:#69716b;white-space:nowrap}
.render-toggle button[aria-pressed=true]{background:#fff;color:#242c25;box-shadow:0 2px 6px #152a1710}
.object-stage[data-mode='3d'] .image-window{visibility:hidden}
.object-stage[data-mode='image'] .three-viewport,.object-stage[data-mode='image'] .studio-side-tools,.object-stage[data-mode='image'] .orbit-readout,.object-stage[data-mode='image'] .part-labels,.object-stage[data-mode='image'] .drag-hint{visibility:hidden;pointer-events:none}
.object-stage[data-mode='3d'] .expand-button{display:none}
.studio-side-tools{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:7px}
.studio-side-tools button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #ffffffbb;background:#ffffffb0;backdrop-filter:blur(12px);font-size:19px;color:#455248;transition:background .2s}
.studio-side-tools button:hover{background:#fff}
.studio-side-tools button[aria-pressed=true]{background:#304ce8;color:#fff;border-color:#304ce8}
.studio-side-tools button:after{content:'';position:absolute;width:44px;height:44px}
.orbit-readout{position:absolute;left:26px;bottom:102px;z-index:3;display:flex;gap:9px;align-items:center;color:#7b897f;font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.5px;pointer-events:none}
.axis-glyph{font-size:25px;line-height:1;color:#66776b}
.stage-bottom{bottom:23px;z-index:4}
.drag-hint{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;white-space:nowrap;color:#647268;pointer-events:none;letter-spacing:.3px;background:#ffffffb0;backdrop-filter:blur(8px);padding:5px 9px;border-radius:20px}
.view-toggle{box-shadow:0 5px 22px #1d322314;border-color:#ffffffc0;backdrop-filter:blur(12px)}
.view-toggle button[aria-pressed=true]{background:#283e31}
#zoom-caption{bottom:134px;left:26px;pointer-events:none;font-size:9px;background:#ffffffb8;backdrop-filter:blur(10px)}
.part-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.part-labels>span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;font-size:8px;color:#304ce8;background:#ffffffe0;box-shadow:0 3px 15px #25392d0a;padding:7px 9px;border:1px solid #ffffff;border-radius:3px;white-space:nowrap;will-change:transform}
.part-labels>span:before{content:'';position:absolute;right:100%;width:19px;height:1px;background:#8c9e9166}
.part-labels b{font-size:10px;font-weight:500;color:#4b5c4f}
.studio-controls{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:0 30px;padding:25px 28px 12px;border-top:1px solid var(--line);background:#fff}
.studio-controls fieldset{padding:0 0 17px;margin:0;border:0;min-width:0}
.studio-controls legend{font-size:11px;font-weight:500;margin-bottom:17px;padding:0;letter-spacing:-.2px}
.studio-controls legend>span{font-size:8px;font-weight:400;color:#94a098;margin-right:7px;font-variant-numeric:tabular-nums}
.studio-controls label{display:flex;justify-content:space-between;font-size:10px;color:#89918b;margin-bottom:4px}
.studio-controls output{font-size:10px;color:#3c4c41;font-variant-numeric:tabular-nums}
.studio-controls input[type=range]{display:block;appearance:none;width:100%;height:20px;margin:0;cursor:pointer;background:none;touch-action:pan-y}
.studio-controls input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#405beb var(--fill,32%),#e5e9e3 var(--fill,32%));height:3px;border-radius:3px}
.studio-controls input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:white;border:2px solid #304ce8;margin-top:-4px;box-shadow:0 0 0 3px white}
.studio-controls input[type=range]::-moz-range-track{background:#e5e9e3;height:3px}
.studio-controls input[type=range]::-moz-range-progress{background:#405beb;height:3px}
.studio-controls input[type=range]::-moz-range-thumb{background:white;border:2px solid #304ce8;width:8px;height:8px;border-radius:50%}
.studio-controls input:focus-visible{outline:2px solid #304ce8;outline-offset:5px;border-radius:4px}
.range-ends{display:flex;justify-content:space-between;font-size:8px;color:#a0a89f;letter-spacing:.3px;margin-top:5px}
.light-presets{display:flex;gap:6px}
.light-presets button{padding:8px 9px;min-height:42px;border:1px solid #e5e8e2;background:#fff;display:flex;align-items:center;gap:6px;font-size:10px;border-radius:4px;white-space:nowrap;color:#7a867b}
.light-presets button[aria-pressed=true]{border-color:#c9d2fa;background:#f5f7ff;color:#304ce8}
.light-swatch{display:block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000008}
.light-swatch.studio{background:linear-gradient(135deg,#fff,#bac4c7)}
.light-swatch.warm{background:linear-gradient(135deg,#ffe9a9,#cd7e57)}
.light-swatch.night{background:linear-gradient(135deg,#a9b3ce,#252a41)}
.studio-footnote{grid-column:1/-1;border-top:1px solid #edf0e9;margin:1px 0 0;padding:12px 0 0;display:flex;align-items:center;gap:9px;font-size:9px;color:#949f95;letter-spacing:.4px}
.studio-footnote .live-dot{width:4px;height:4px}
.studio-footnote button{margin-left:auto;background:none;color:#7c877e;font-size:10px;padding:5px 0;min-height:30px}
.studio-controls.is-inactive fieldset{opacity:.4;pointer-events:none}
.studio-controls.is-inactive .studio-footnote:before{content:'3D 스튜디오에서 조작할 수 있어요';color:#66766b}
.object-stage[data-mode='3d'][data-light='night'] .stage-code,.object-stage[data-mode='3d'][data-light='night'] .stage-top h2,.object-stage[data-mode='3d'][data-light='night'] .drag-hint,.object-stage[data-mode='3d'][data-light='night'] .orbit-readout,.object-stage[data-mode='3d'][data-light='night'] .axis-glyph,.object-stage[data-mode='3d'][data-light='night'] #stage-index,.object-stage[data-mode='3d'][data-light='night'] .stage-arrows button{color:#c0c8d3}
.object-stage[data-mode='3d'][data-light='night'] .live-dot{background:#8da2ff}
.material-info{padding-top:33px;padding-bottom:28px}
.intro-copy br{display:block}
.object-stage[data-mode='3d'][data-light='night'] .drag-hint{background:#29303dbd}
@media(min-width:1600px){.object-stage{min-height:730px}.studio-controls{gap:45px}.light-presets button{padding-inline:14px}}
@media(max-width:1150px){.object-stage{min-height:580px}.stage-top{left:19px;right:19px}.stage-top h2{font-size:13px}.render-toggle button{font-size:8px;padding:6px}.studio-controls{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px;padding-inline:20px}.light-presets{gap:4px}.light-presets button{font-size:9px;padding:8px 6px;gap:4px}.light-swatch{width:10px;height:10px}.orbit-readout{left:19px;font-size:8px}.drag-hint{font-size:9px}}
@media(max-width:950px) and (min-width:701px){.object-stage{min-height:540px}.studio-controls{grid-template-columns:1fr 1fr;gap:0 32px}.material-info{grid-row:3}.studio-controls{grid-row:2}.studio-controls fieldset:nth-child(n+3){margin-top:12px}.light-presets button{font-size:11px;padding:8px 12px}.stage-top{left:22px;right:22px}}
@media(max-width:700px){.intro-copy{max-width:none}.intro-copy br{display:block}.eyebrow{font-size:7px;letter-spacing:.65px}.object-stage{min-height:0;height:475px}.three-viewport{inset:0}.stage-top{left:17px;right:17px;top:18px}.stage-code{font-size:7px;letter-spacing:.6px}.stage-top h2{font-size:12px}.render-toggle button{min-height:35px;padding:6px 7px;font-size:8px}.studio-side-tools{right:12px;gap:7px;top:47%}.studio-side-tools button{width:36px;height:36px;font-size:18px}.stage-bottom{left:17px;right:17px;bottom:17px}.stage-arrows{display:none}.stage-bottom>span{font-size:9px}.stage-bottom .view-toggle{margin-left:auto}.view-toggle button{font-size:10px;min-height:42px}.drag-hint{bottom:76px;font-size:9px}.orbit-readout{bottom:114px;left:17px;font-size:8px}.axis-glyph{font-size:20px}#zoom-caption{bottom:142px;left:17px;font-size:8px}.part-labels>span{padding:5px 6px;font-size:7px;gap:5px}.part-labels b{font-size:8px}.studio-controls{order:3;grid-template-columns:1fr 1fr;gap:18px;padding:21px 18px 11px}.material-info{order:4}.studio-controls fieldset{padding-bottom:0}.studio-controls legend{font-size:10px;margin-bottom:12px}.control-light{grid-column:1/-1}.light-presets button{flex:1;justify-content:center;font-size:10px;min-height:40px}.light-presets{gap:7px}.light-swatch{width:12px;height:12px}.control-angle{grid-column:2}.control-assembly{grid-column:1/-1}.studio-controls input[type=range]{height:26px}.studio-controls input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5.5px}.studio-footnote{flex-wrap:wrap;gap:6px;padding-top:11px;font-size:7px;margin-top:0}.studio-footnote button{font-size:9px}.studio-controls.is-inactive .studio-footnote:before{width:100%}.material-info{padding-top:27px}.part-labels>span:before{width:11px}}
@media(max-width:370px){.object-stage{height:430px}.render-toggle button{font-size:7px;padding:5px}.stage-top{gap:7px}.stage-code{font-size:6px}.stage-top h2{font-size:11px}.studio-side-tools button{width:33px;height:33px}.studio-side-tools{right:10px}.studio-controls{gap:17px 14px;padding-inline:16px}.intro .eyebrow{font-size:6px;letter-spacing:.4px}.studio-footnote{font-size:6px}}
@media(max-width:700px){.object-stage{height:clamp(340px,49dvh,420px)}}
@media(prefers-reduced-motion:reduce){.three-viewport{transition:none}}