*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark;--sidebar-bg: #1e1610;--sidebar-text: #e0d5c8;--sidebar-muted: #9a8b7a;--sidebar-accent: #c19a6b;--sidebar-border: #3a2a1a;--sidebar-input-bg: #2a1f15;--sidebar-input-border: #4a3828;--sidebar-hover: #2e2218;--sidebar-width: 320px;--viewport-bg: #e8e2d8;--highlight: #ff8c42;--danger: #c0392b;--danger-hover: #e74c3c;--btn-primary-bg: #8b6914;--btn-primary-hover: #a07a1a}body{min-height:100dvh;background:var(--sidebar-bg)}#app{max-width:none;margin-inline:0;padding:0;height:100dvh;overflow:hidden}.workspace{display:flex;height:100dvh;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);height:100dvh;overflow-y:auto;background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column}.sidebar-header{padding:1.25rem 1rem 1rem;border-bottom:1px solid var(--sidebar-border)}.sidebar-header h1{font-size:1.25rem;font-weight:700;color:var(--sidebar-accent);letter-spacing:.02em}.sidebar-subtitle{font-size:.75rem;color:var(--sidebar-muted);margin-top:.15rem}.sidebar-section{padding:1rem;border-bottom:1px solid var(--sidebar-border)}.sidebar-section h3{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-muted);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.sidebar-section h4{font-size:.8rem;font-weight:600;color:var(--sidebar-accent);margin-bottom:.5rem}.count-badge{background:var(--sidebar-input-bg);color:var(--sidebar-muted);font-size:.7rem;padding:.1rem .45rem;border-radius:8px;font-weight:500}.field-label{display:flex;flex-direction:column;font-size:.75rem;color:var(--sidebar-muted);gap:.3rem}.dimension-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.75rem}input[type=number],select{width:100%;padding:.45rem .5rem;background:var(--sidebar-input-bg);border:1px solid var(--sidebar-input-border);border-radius:4px;color:var(--sidebar-text);font-size:.85rem;transition:border-color .15s}input[type=number]:focus,select:focus{outline:none;border-color:var(--sidebar-accent)}input[type=number]::-webkit-inner-spin-button{opacity:.5}.rotation-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.75rem}.snap-controls{margin-bottom:.75rem}.snap-controls h4{font-size:.75rem;color:var(--sidebar-muted);margin-bottom:.5rem}.snap-controls .field-label{margin-bottom:.5rem}.btn-primary{width:100%;padding:.55rem 1rem;background:var(--btn-primary-bg);color:#fff;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-primary:hover{background:var(--btn-primary-hover)}.btn-danger{width:100%;padding:.45rem .75rem;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:4px;font-size:.8rem;cursor:pointer;transition:background .15s,color .15s;margin-top:.75rem}.btn-danger:hover{background:var(--danger);color:#fff}.btn-icon{background:none;border:none;color:var(--sidebar-muted);font-size:1.1rem;cursor:pointer;padding:.15rem .4rem;border-radius:3px;line-height:1;transition:background .15s,color .15s}.btn-icon:hover{background:var(--danger);color:#fff}.error-message{color:var(--danger-hover);font-size:.78rem;margin-bottom:.5rem}.empty-text{color:var(--sidebar-muted);font-size:.8rem;font-style:italic}.piece-list,.connection-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.3rem}.piece-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .5rem;border-radius:4px;cursor:pointer;transition:background .15s}.piece-item:hover{background:var(--sidebar-hover)}.piece-item-selected{background:var(--sidebar-hover);outline:1px solid var(--highlight)}.piece-color-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}.piece-item-info{flex:1;min-width:0;display:flex;flex-direction:column}.piece-item-name{font-size:.82rem;font-weight:500}.piece-item-dims{font-size:.7rem;color:var(--sidebar-muted)}.connection-item{display:flex;flex-direction:column;gap:.15rem;padding:.45rem .5rem;border-radius:4px;cursor:pointer;transition:background .15s}.connection-item:hover{background:var(--sidebar-hover)}.connection-item-selected{background:var(--sidebar-hover);outline:1px solid var(--highlight)}.connection-pieces{font-size:.82rem;font-weight:500}.connection-joint-type{font-size:.7rem;color:var(--sidebar-accent)}.joint-inspector{display:flex;flex-direction:column;gap:.5rem}.joint-connection-info{display:flex;align-items:center;gap:.4rem;font-size:.82rem}.joint-piece-name{font-weight:500;color:var(--sidebar-accent)}.joint-arrow{color:var(--sidebar-muted)}.joint-faces{font-size:.72rem;color:var(--sidebar-muted);margin-bottom:.25rem}.joint-faces-selectors{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.25rem}.joint-params{display:flex;flex-direction:column;gap:.5rem}.joint-preview-3d{position:relative;width:100%;height:200px;border-radius:6px;overflow:hidden;background:#1a120c;border:1px solid var(--sidebar-input-border);cursor:grab}.joint-preview-3d:active{cursor:grabbing}.joint-preview-3d canvas{display:block;width:100%!important;height:100%!important}.joint-preview-label{position:absolute;top:6px;left:8px;z-index:1;font-size:.68rem;font-weight:600;color:var(--sidebar-accent);background:#1a120ccc;padding:2px 6px;border-radius:3px;pointer-events:none;letter-spacing:.03em}.joint-preview-hint{position:absolute;bottom:5px;right:7px;z-index:1;font-size:.6rem;color:var(--sidebar-muted);opacity:.6;pointer-events:none}.new-piece-preview{position:relative;width:100%;height:150px;margin-top:10px;border-radius:6px;overflow:hidden;background:#1a120c;border:1px solid var(--sidebar-input-border);cursor:grab}.new-piece-preview:active{cursor:grabbing}.new-piece-preview canvas{display:block;width:100%!important;height:100%!important}.new-piece-preview-empty{display:flex;align-items:center;justify-content:center;height:100%;padding:0 12px;font-size:.72rem;color:var(--sidebar-muted);text-align:center}.viewport{flex:1;position:relative;background:var(--viewport-bg)}.viewport canvas{display:block}.viewport-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.viewport-empty-content{text-align:center;color:#6b5d4f}.viewport-empty-icon{font-size:2.5rem;margin-bottom:.5rem;opacity:.5}.viewport-empty-content h2{font-size:1.2rem;font-weight:600;margin-bottom:.35rem}.viewport-empty-content p{font-size:.85rem;max-width:280px;opacity:.7}.piece-label-3d{background:#1e1610d9;color:#e0d5c8;padding:3px 8px;border-radius:4px;font-size:11px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:system-ui,sans-serif}.piece-dims{font-size:9px;opacity:.7}.connection-label-3d{background:#1e1610d9;color:var(--sidebar-accent, #c19a6b);padding:2px 7px;border-radius:3px;font-size:10px;white-space:nowrap;font-family:system-ui,sans-serif}.exploded-view-control{position:absolute;top:12px;right:12px;z-index:10;background:#1e1610e6;color:var(--sidebar-text);padding:10px 14px;border-radius:6px;display:flex;flex-direction:column;gap:6px;font-size:.75rem;min-width:150px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.exploded-view-control label{font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-muted)}.exploded-view-control input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--sidebar-input-border);border-radius:2px;outline:none;cursor:pointer}.exploded-view-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--sidebar-accent);cursor:pointer;border:2px solid var(--sidebar-bg)}.exploded-view-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--sidebar-accent);cursor:pointer;border:2px solid var(--sidebar-bg)}.exploded-view-value{font-size:.72rem;color:var(--sidebar-accent);text-align:right}.selection-toolbar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:12px;background:#1e1610e6;color:var(--sidebar-text);padding:8px 14px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 16px #0000004d}.selection-toolbar-name{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--sidebar-accent);white-space:nowrap}.selection-toolbar-btn{display:flex;align-items:center;gap:6px;background:var(--btn-primary-bg);color:#fff;border:none;border-radius:6px;padding:7px 12px;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap}.selection-toolbar-btn:hover{background:var(--btn-primary-hover)}.popover-overlay{position:absolute;z-index:20;pointer-events:auto;animation:popover-appear .15s ease-out}@keyframes popover-appear{0%{opacity:0}to{opacity:1}}.popover-panel{position:relative;background:var(--sidebar-bg);color:var(--sidebar-text);border:1px solid var(--sidebar-border);border-radius:10px;padding:1.5rem 1.5rem 1.25rem;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;box-shadow:0 10px 40px #00000073}.popover-close{position:absolute;top:.6rem;right:.7rem;background:none;border:none;color:var(--sidebar-muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .45rem;border-radius:4px;transition:background .15s,color .15s}.popover-close:hover{background:var(--sidebar-hover);color:var(--sidebar-text)}.popover-arrow{position:absolute;width:0;height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}.popover-overlay[data-placement=above] .popover-arrow{bottom:-10px;transform:translate(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--sidebar-bg);border-bottom:none}.popover-overlay[data-placement=below] .popover-arrow{top:-10px;transform:translate(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid var(--sidebar-bg);border-top:none}.popover-overlay[data-placement=left] .popover-arrow{right:-10px;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid var(--sidebar-bg);border-right:none}.popover-overlay[data-placement=right] .popover-arrow{left:-10px;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--sidebar-bg);border-left:none}.piece-size-popover{width:300px}.piece-size-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.piece-size-name{font-size:.9rem;font-weight:600;color:var(--sidebar-accent)}.piece-size-title{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-muted);margin-bottom:.5rem}.piece-size-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.75rem}.piece-size-popover .field-label{display:flex;flex-direction:column;font-size:.72rem;color:var(--sidebar-muted);gap:.25rem}.piece-size-popover input[type=number]{width:100%;padding:.4rem;background:var(--sidebar-input-bg);border:1px solid var(--sidebar-input-border);border-radius:4px;color:var(--sidebar-text);font-size:.82rem}.piece-size-popover input[type=number]:focus{outline:none;border-color:var(--sidebar-accent)}.piece-size-popover .btn-primary{padding:.45rem .75rem;font-size:.8rem}.piece-size-popover .error-message{margin-bottom:.5rem}@media(max-width:640px){.workspace{flex-direction:column}.viewport{order:1;min-height:55dvh}.sidebar{order:2;width:100%;min-width:0;height:auto;flex:1;border-right:none;border-top:1px solid var(--sidebar-border)}}@media(prefers-color-scheme:dark){:root{--viewport-bg: #2a2520}.viewport-empty-content{color:#9a8b7a}}
