:root{--pico-font-family: 'Geist Mono', monospace}body.viewer{overflow:hidden;position:fixed;width:100%;height:100%;margin:0}#container{width:100%;height:100%;display:flex;flex-direction:column}#controls{padding:0.75rem;padding-top:max(0.75rem, env(safe-area-inset-top));background:rgba(0,0,0,0.95);border-bottom:1px solid var(--pico-muted-border-color);z-index:10;flex-shrink:0}@media (min-width: 768px){#controls{padding:1.25rem}}#controls .controls-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}.button-group{display:flex;align-items:center;gap:0.75rem}.logo-wrapper{display:flex;align-items:center;gap:0.5rem}.logo-link{display:flex;align-items:center;justify-content:center;width:3rem;min-width:3rem;height:3rem;flex-shrink:0;color:var(--pico-color);text-decoration:none;font-size:1.5rem;transition:color 0.3s}.logo-link:hover{color:var(--pico-primary)}.logo-link .logo-img{width:1.5rem;height:1.5rem;object-fit:contain}.info-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:1rem;color:var(--pico-primary);background:transparent;border:none;cursor:pointer;transition:all 0.2s;margin:0;padding:0}.info-btn:hover{color:var(--pico-primary-hover, #3b9eff);transform:scale(1.1)}.open-button{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0 1rem;height:3rem;flex-shrink:0;background:var(--pico-primary);border:2px solid var(--pico-primary);border-radius:var(--pico-border-radius);color:#fff;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.3s;margin:0}.open-button i{font-size:1rem}.open-button:hover{background:var(--pico-primary-hover);border-color:var(--pico-primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,123,255,0.3)}.error{color:var(--pico-del-color);margin-top:0.5rem;font-size:0.875rem;padding:0.5rem;background:rgba(255,68,68,0.1);border-radius:var(--pico-border-radius)}#viewer{flex:1;position:relative;min-height:0;overflow:hidden}#viewer canvas{touch-action:none;user-select:none;-webkit-user-select:none}.settings-btn,.toggle-controls-btn,.pan-arrow,.zoom-button,.ruler-point,#target-indicator,#download-btn,#grid-btn,#rotate-btn{touch-action:manipulation}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:1rem;text-align:center;display:none;padding:1.5rem 2rem;background:rgba(0,0,0,0.9);border-radius:var(--pico-border-radius);border:1px solid var(--pico-muted-border-color);min-width:250px;white-space:nowrap}.spinner{border:3px solid var(--pico-muted-border-color);border-top:3px solid var(--pico-primary);border-radius:50%;width:2.5rem;height:2.5rem;animation:spin 1s linear infinite;margin:0 auto 0.625rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#top-left-controls{position:absolute;top:1rem;left:1rem;display:flex;flex-direction:column;gap:0.5rem;z-index:5}.settings-btn{width:3rem;height:3rem;background:rgba(0,0,0,0.7);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);color:var(--pico-color);font-size:1.25rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;margin:0;padding:0}.settings-btn:hover,.settings-btn:active{background:rgba(0,0,0,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.settings-btn:active{transform:scale(0.95)}.settings-btn.active{background:rgba(0,123,255,0.3);border-color:var(--pico-primary);color:var(--pico-primary)}.toggle-controls-btn{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;background:rgba(0,0,0,0.7);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);color:var(--pico-color);font-size:1.25rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;margin:0;padding:0;z-index:5}.toggle-controls-btn:hover,.toggle-controls-btn:active{background:rgba(0,0,0,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.toggle-controls-btn:active{transform:scale(0.95)}.viewer-control.hidden{display:none !important}#pan-controls{position:absolute;inset:0;pointer-events:none}.pan-arrow{position:absolute;width:3rem;height:3rem;background:rgba(0,0,0,0.7);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);color:var(--pico-color);font-size:1.25rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;pointer-events:auto;margin:0;padding:0}.pan-arrow:hover,.pan-arrow:active{background:rgba(0,0,0,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.pan-arrow:active{transform:scale(0.95)}.pan-arrow.pan-up{top:1rem;left:50%;transform:translateX(-50%)}.pan-arrow.pan-up:active{transform:translateX(-50%) scale(0.95)}.pan-arrow.pan-down{bottom:1rem;left:50%;transform:translateX(-50%)}.pan-arrow.pan-down:active{transform:translateX(-50%) scale(0.95)}.pan-arrow.pan-left{left:1rem;top:50%;transform:translateY(-50%)}.pan-arrow.pan-left:active{transform:translateY(-50%) scale(0.95)}.pan-arrow.pan-right{right:1rem;top:50%;transform:translateY(-50%)}.pan-arrow.pan-right:active{transform:translateY(-50%) scale(0.95)}#zoom-controls{position:absolute;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:0.5rem}.zoom-button{width:3rem;height:3rem;background:rgba(0,0,0,0.7);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);color:var(--pico-color);font-size:1.25rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;margin:0;padding:0}.zoom-button:hover,.zoom-button:active{background:rgba(0,0,0,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.zoom-button:active{transform:scale(0.95)}.zoom-button.active{background:rgba(0,123,255,0.3);border-color:var(--pico-primary);color:var(--pico-primary)}#target-indicator{position:absolute;width:20px;height:20px;background:rgba(255,0,0,0.8);border:2px solid rgba(255,255,255,0.9);border-radius:50%;cursor:move;z-index:10;pointer-events:auto;box-shadow:0 0 10px rgba(255,0,0,0.5);transition:transform 0.1s}#target-indicator:hover{transform:scale(1.2)}#target-indicator:active{transform:scale(0.9)}#left-controls{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:0.5rem}#rotate-btn{position:absolute;bottom:1rem;left:1rem;z-index:5}.bg-toggle-btn.light-bg{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.3);color:#333}.bg-toggle-btn.light-bg:hover,.bg-toggle-btn.light-bg:active{background:rgba(255,255,255,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.ruler-point{position:absolute;width:20px;height:20px;background:rgba(255,0,0,0.8);border:2px solid rgba(255,255,255,0.9);border-radius:50%;cursor:move;z-index:10;pointer-events:auto;box-shadow:0 0 10px rgba(255,0,0,0.5);transition:transform 0.1s}.ruler-point:hover{transform:scale(1.2)}.ruler-point:active{transform:scale(0.9)}.ruler-point.dragging{transform:scale(1.3)}.ruler-point.selected{background:rgba(0,200,255,0.9);box-shadow:0 0 15px rgba(0,200,255,0.7)}.ruler-line{position:absolute;height:2px;background:rgba(255,0,0,0.8);transform-origin:left center;z-index:9;pointer-events:none;box-shadow:0 0 4px rgba(255,0,0,0.5)}.ruler-line.selected{background:rgba(0,200,255,0.9);box-shadow:0 0 6px rgba(0,200,255,0.7)}.ruler-line.selected .ruler-measurement{border-color:rgba(0,200,255,0.7)}.ruler-measurement{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-family:'Geist Mono', monospace;white-space:nowrap;border:1px solid rgba(255,0,0,0.5);pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ruler-measurement:hover{background:rgba(40,40,40,0.95);border-color:rgba(255,0,0,0.8)}.ruler-measurement:active{background:rgba(60,60,60,0.95)}#ruler-controls{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:0.5rem;z-index:5}.ruler-control-btn{width:2.5rem;height:2.5rem;background:rgba(0,0,0,0.7);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);color:var(--pico-color);font-size:1rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;margin:0;padding:0;touch-action:manipulation}.ruler-control-btn:hover:not(:disabled){background:rgba(0,0,0,0.9);border-color:var(--pico-primary);color:var(--pico-primary)}.ruler-control-btn:active:not(:disabled){transform:scale(0.95)}.ruler-control-btn:disabled{opacity:0.4;cursor:not-allowed}dialog header{display:flex;justify-content:space-between;align-items:center}dialog header h3{margin:0;font-size:1.1rem}.modal-close{background:none;border:none;color:var(--pico-muted-color);font-size:1.25rem;cursor:pointer;padding:0.25rem 0.5rem;margin:-0.25rem -0.5rem -0.25rem 0;transition:color 0.2s}.modal-close:hover{color:var(--pico-color)}#open-modal article{max-width:28rem}#open-modal .modal-content{padding:0}#about-modal article{max-width:32rem}.about-logo{display:flex;align-items:center;gap:0.75rem;padding:1.5rem 0 1rem 0}.about-logo-icon{font-size:2rem;color:var(--pico-primary)}.about-logo-name{font-size:1.25rem;font-weight:600;color:var(--pico-color)}.about-content{font-size:0.875rem;line-height:1.6;max-height:60vh;overflow-y:auto;padding-right:0.5rem}.about-content h4{margin-top:1.5rem;margin-bottom:0.5rem;font-size:0.9375rem;color:var(--pico-primary)}.about-content h4:first-of-type{margin-top:1rem}.about-content p{margin-bottom:0.75rem}.about-content ol,.about-content ul{margin:0.5rem 0;padding-left:2rem}.about-content li{margin-bottom:0.5rem}.model-credit{margin-top:1rem;font-size:0.75rem;color:var(--pico-muted-color);text-align:center}.legal-links{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--pico-muted-border-color);display:flex;justify-content:center;gap:1.5rem}.legal-links a{font-size:0.75rem;color:var(--pico-muted-color);text-decoration:none}.legal-links a:hover{color:var(--pico-primary)}.modal-body{font-size:0.875rem;line-height:1.6;max-height:60vh;overflow-y:auto;padding-right:0.5rem}.modal-body h4{margin-top:1.5rem;margin-bottom:0.5rem;font-size:0.9375rem;color:var(--pico-primary)}.modal-body h4:first-of-type{margin-top:0.5rem}.modal-body p{margin-bottom:0.75rem}.modal-body ul{margin:0.5rem 0;padding-left:2rem}.modal-body li{margin-bottom:0.5rem}.modal-body .updated{font-size:0.75rem;color:var(--pico-muted-color);margin-bottom:1rem}.file-upload-wrapper-modal{position:relative}.file-upload-wrapper-modal input[type="file"]#file-input-modal{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:1}.file-upload-label-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;background:var(--pico-card-background-color);border:2px dashed var(--pico-muted-border-color);border-radius:var(--pico-border-radius);text-align:center;cursor:pointer;transition:all 0.3s;gap:0.75rem;min-height:15rem}.file-upload-label-modal:hover{border-color:var(--pico-primary);background:rgba(255,255,255,0.02)}.file-upload-label-modal:hover .upload-icon{color:var(--pico-primary)}.file-upload-label-modal.drag-over{border-color:var(--pico-primary);background:rgba(0,123,255,0.1)}.upload-icon{font-size:3rem;color:var(--pico-muted-color);transition:color 0.3s}.file-types{font-size:0.6875rem;color:var(--pico-muted-color)}.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;gap:0.75rem}.not-found .not-found-icon{font-size:2.5rem;color:var(--pico-primary)}.not-found h1{font-size:5rem;font-weight:600;margin:0;line-height:1;color:var(--pico-primary)}.not-found p{margin:0;color:var(--pico-muted-color)}.not-found a{margin-top:0.5rem;font-size:0.875rem;color:var(--pico-muted-color);text-decoration:none}.not-found a:hover{color:var(--pico-primary)}