*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:#ffc227;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;display:flex;position:relative}#app canvas{flex:1;display:block}.panel{position:absolute;top:0;right:0;width:360px;height:100%;background:#eceae4;color:#181818;border-left:1px solid #CECBC2;overflow-y:auto;z-index:10;display:flex;flex-direction:column;gap:0;font-size:12px}.panel-brand{padding:24px;border-bottom:1px solid #CECBC2;display:flex;justify-content:space-between;align-items:center}.panel-brand-name{font-size:16px;font-weight:700;letter-spacing:-.02em}.panel-brand-pill{font-size:9px;padding:2px 6px;border:1px solid #181818;border-radius:10px;text-transform:uppercase}.panel-section{padding:32px 24px;border-bottom:1px solid #CECBC2}.panel-section-header{display:block;margin-bottom:24px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#181818;cursor:default;-webkit-user-select:none;user-select:none}.icon-btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}.icon-btn{aspect-ratio:1;border:1px solid #CECBC2;background:transparent;color:#555;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:8px;transition:all .2s}.icon-btn:hover{border-color:#181818;color:#181818}.icon-btn.active{background:#181818;color:#eceae4;border-color:#181818}.icon-btn svg{width:20px;height:20px}.icon-btn-label{font-size:9px;text-transform:uppercase;letter-spacing:.05em}.slider-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.slider-row label{font-size:9px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#181818;flex-shrink:0}.slider-group{width:60%;display:flex;align-items:center;gap:12px}.slider-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;background:transparent;outline:none;width:100%}.slider-row input[type=range]::-webkit-slider-runnable-track{width:100%;height:1px;background:#555;cursor:pointer}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#181818;border:1px solid #181818;border-radius:0;cursor:pointer;margin-top:-5px;transition:transform .1s ease}.slider-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-row .slider-value{width:32px;text-align:right;font-size:9px;font-family:monospace;font-variant-numeric:tabular-nums;color:#555;flex-shrink:0}.slider-divider{margin:16px 0;height:1px;background:#cecbc2;opacity:.5}.accordion-item{border:1px solid #CECBC2;margin-bottom:-1px;background:#ffffff1a}.accordion-header{display:flex;align-items:center;padding:12px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}.accordion-header:hover{background:#00000005}.accordion-toggle{width:14px;height:14px;border:1px solid #555555;margin-right:12px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;cursor:pointer;background:transparent;padding:0}.accordion-toggle.active{background:#181818;border-color:#181818}.accordion-title{flex:1;font-size:9px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.accordion-chevron{width:16px;height:16px;color:#555;transition:transform .3s}.accordion-chevron.open{transform:rotate(180deg)}.accordion-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .25s ease,opacity .2s ease}.accordion-body.open{max-height:400px;opacity:1;padding:0 16px 16px;border-top:1px solid #CECBC2}.import-btn{width:100%;height:80px;border:1px dashed #555555;border-radius:2px;background:#fff3;color:#555;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-family:monospace;font-variant-numeric:tabular-nums;transition:all .2s ease}.import-btn:hover{border-color:#181818;background:#ffffff80}.import-btn svg{width:20px;height:20px}.preset-buttons{display:flex;gap:8px}.preset-btn{width:48px;height:48px;border:1px solid #CECBC2;background:transparent;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.preset-btn:hover{border-color:#181818}.preset-btn.active{background:#181818;border-color:#181818}.preset-btn.active svg{filter:invert(1)}.preset-btn svg{width:100%;height:100%}.input-source-row{display:flex;gap:8px;align-items:stretch}.input-source-row .import-btn{flex:1;height:48px}.renderer-mode-label{position:fixed;top:12px;left:12px;z-index:30;padding:4px 6px;border:1px solid #181818;background:#eceae4f2;color:#181818;font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-family:monospace;pointer-events:none}.debug-overlay{position:fixed;inset:0;z-index:29;pointer-events:none}.debug-marker{position:absolute;transform:translate(-50%,-50%)}.debug-marker-center{width:16px;height:16px}.debug-marker-center:before,.debug-marker-center:after{content:"";position:absolute;background:#096cffe6}.debug-marker-center:before{left:50%;top:0;width:2px;height:16px;transform:translate(-50%)}.debug-marker-center:after{left:0;top:50%;width:16px;height:2px;transform:translateY(-50%)}.debug-marker-origin{width:10px;height:10px;border:2px solid rgba(220,40,40,.95);border-radius:50%;background:#dc282833}.debug-readout{position:fixed;top:38px;left:12px;z-index:31;padding:4px 6px;border:1px solid #181818;background:#181818d9;color:#eceae4;font-size:9px;letter-spacing:.02em;font-family:monospace;pointer-events:none}.canvas-controls{position:fixed;bottom:24px;right:384px;display:flex;flex-direction:column;gap:2px;z-index:15}.canvas-ctrl-btn{width:28px;height:28px;border-radius:0;border:1px solid #CECBC2;background:#eceae4;color:#555;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s}.canvas-ctrl-btn:hover{border-color:#181818}.rotation-knob{width:28px;height:28px;border-radius:50%;border:1px solid #CECBC2;background:#eceae4;cursor:grab;position:relative;transition:border-color .15s}.rotation-knob:hover{border-color:#181818}.rotation-knob.grabbing{cursor:grabbing}.rotation-knob-dot{position:absolute;top:50%;left:50%;width:4px;height:4px;background:#181818;border-radius:50%;transform-origin:0 0;transform:rotate(0) translateY(-9px);margin-left:-2px;margin-top:-2px}.export-btn{width:100%;padding:10px 16px;border:1px solid #181818;background:#181818;color:#eceae4;cursor:pointer;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.export-btn:hover{background:#333;border-color:#333}.fps-counter{margin-top:auto;padding:24px;border-top:1px solid #CECBC2;font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-family:monospace;font-variant-numeric:tabular-nums;color:#555;display:flex;justify-content:space-between}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#0000001a}.drop-zone{position:fixed;inset:0 360px 0 0;background:#18181814;border:3px dashed #181818;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;opacity:0;transition:opacity .2s ease}.drop-zone.visible{opacity:1}.drop-zone-text{font-size:18px;color:#181818;font-weight:600}