:root{font-family:Arial,Helvetica,sans-serif;color:#181818;background:#f6f6f3;font-synthesis:none;--yellow:#FFCC00;--line:#deded8;--muted:#73736c}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{font-size:13px}button,input,a{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;color:inherit;min-height:42px;padding:10px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;font-weight:500;transition:background .15s,border-color .15s}button:hover{background:#f4f4ee;border-color:#9e9e94}button[aria-pressed=true],button.active,button.selected{background:var(--yellow);border-color:var(--yellow);color:#181818}button:disabled,input:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #181818;outline-offset:3px}a{color:inherit;text-decoration:underline;text-underline-offset:3px}h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin:0 0 12px}.studio-viewer{display:grid;grid-template-columns:272px minmax(0,1fr);height:100dvh;min-height:480px}.control-panel{background:#fff;border-right:1px solid var(--line);overflow:auto;padding:25px 22px;z-index:2}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:26px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:-.2px}.reset-button{font-size:11px;min-height:35px;padding:8px 12px;background:#f5f5ef;border:0}.control-panel section{border-top:1px solid var(--line);padding-top:20px;margin-top:21px}.choice-grid{display:grid;gap:6px}.unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.unit-grid button:first-child{grid-column:1/-1}.floor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.floor-grid button:last-child:nth-child(odd){grid-column:1/-1}.choice-grid button{font-size:11px;padding:9px 6px}.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:39px;font-size:12px;cursor:pointer}.toggle-row input{appearance:none;width:31px;height:19px;background:#e4e4dd;border:1px solid #d3d3ca;border-radius:12px;position:relative;cursor:pointer;margin:0;flex:none}.toggle-row input:after{content:"";position:absolute;width:13px;height:13px;top:2px;left:2px;background:#fff;border-radius:50%;box-shadow:0 1px 2px #0002}.toggle-row input:checked{background:var(--yellow);border-color:#d5ae00}.toggle-row input:checked:after{left:14px;background:#181818}.range-label{display:flex;justify-content:space-between;gap:10px;margin:17px 0 10px;font-size:12px}.range-label output{font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{width:100%;accent-color:#181818;margin:3px 0 8px;cursor:pointer}.model-note{color:var(--muted);font-size:11px;line-height:1.7;margin:25px 0 0}.model-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#f8f9f7,#e9ece7)}.scene-canvas,.scene-surface,#scene,#canvas{position:absolute;inset:0;width:100%;height:100%}canvas{display:block;width:100%;height:100%;touch-action:none}.view-status{position:absolute;top:21px;left:24px;right:24px;display:flex;gap:8px;align-items:center;pointer-events:none;font-size:11px;color:#42463e;z-index:1}.status-dot{width:6px;height:6px;border-radius:50%;background:#b5b9b1;flex:none}.status-dot.ready{background:#777d54}.gesture-hint{position:absolute;bottom:21px;left:24px;right:24px;margin:0;font-size:10px;color:#61675d;pointer-events:none;text-align:center}.loader-overlay,#loading,#error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#f4f5ef;z-index:3;padding:25px;text-align:center;font-size:13px}.loader-content{width:min(280px,85%)}.loading-track{height:3px;background:#dcded4;margin-top:14px;overflow:hidden}.loading-track>span{display:block;height:100%;background:#181818}.loader-content strong{font-weight:600}.error-notice p,#error p{color:var(--muted);line-height:1.6;font-size:12px;max-width:320px}.error-notice button,#retry,#reload-model{margin-top:15px;background:var(--yellow);border-color:var(--yellow)}.hidden,[hidden]{display:none!important}.zoom{position:absolute;bottom:48px;right:22px;display:flex;gap:5px}.zoom button{background:#fffffff0;font-size:11px;min-height:36px;padding:8px 11px}.detail{font-size:11px;color:var(--muted);line-height:1.7;margin-top:20px}.detail p{margin:5px 0 0}.secondary-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.secondary-actions button,.secondary-actions a{font-size:11px;min-height:38px;padding:10px;border-radius:8px;border:1px solid var(--line);text-decoration:none}.scene-note{position:absolute;right:24px;bottom:43px;font-size:10px;color:#61675d;pointer-events:none}dialog{border:1px solid var(--line);border-radius:14px;padding:26px;max-width:min(520px,90vw);color:#181818;line-height:1.7}dialog::backdrop{background:#0005}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{font-size:14px;letter-spacing:0;text-transform:none;margin:0}dialog p,dialog dl{font-size:12px}dialog dt{font-weight:600;float:left;clear:left;margin-right:15px}dialog dd{margin-left:170px}.muted{color:var(--muted)}
@media(max-width:760px){.studio-viewer{height:auto;min-height:100dvh;display:flex;flex-direction:column}.model-stage{order:-1;height:52dvh;min-height:330px;flex:none;border-bottom:1px solid var(--line)}.control-panel{border-right:0;overflow:visible;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel-heading{grid-column:1/-1;margin:0}.control-panel section{margin:0;padding-top:17px;min-width:0}.control-panel section:nth-of-type(1){grid-column:1/-1}.unit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.unit-grid button:first-child{grid-column:auto}.model-note,.secondary-actions,.detail{grid-column:1/-1;margin:0}.control-panel section:last-of-type{grid-column:1/-1}.view-status{top:18px;left:20px;right:20px;font-size:10px}.gesture-hint{font-size:9px;bottom:17px}.choice-grid button{font-size:10px}.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scene-note{bottom:37px;right:20px}.zoom{bottom:45px;right:16px}.model-note{padding-top:3px}}
@media(max-width:360px){.control-panel{padding:16px;gap:15px}.unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.model-stage{min-height:300px}.view-status{left:16px}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}