body { margin: 0; font-family: sans-serif; background: #1a1a1a; color: white; }
.app { display: flex; height: 100vh; }

.controls { width: 300px; padding: 20px; background: #252525; overflow-y: auto; border-right: 1px solid #444; }
.group { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #333; }
input, select, button { width: 100%; padding: 8px; margin: 5px 0; border-radius: 4px; border: none; }

.viewer { flex: 1; display: flex; flex-direction: column; background: #111; }
.toolbar { padding: 10px; background: #222; text-align: center; }

/* Das ist das Fenster, in dem wir scrollen */
.canvas-viewport { 
    flex: 1; 
    overflow: auto; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding: 40px; 
}

/* Das ist die Ebene, die skaliert wird */
#canvas-scaler { transform-origin: top center; transition: transform 0.1s ease-out; }
canvas { background: white; box-shadow: 0 0 50px rgba(0,0,0,0.5); display: block; }