body { margin: 0; background: #141013; color: #8b3333; font-family: 'Courier New', monospace; display: flex; height: 100vh; overflow: hidden; }
        #sidebar { width: 320px; padding: 15px; background: #FFFFFF; overflow-y: auto; border-right: 2px solid #444; box-shadow: 2px 0 10px rgba(0,0,0,0.5); }
        #main { flex-grow: 1; display: flex; justify-content: center; align-items: center; background: #111111; position: relative; }
        
        canvas { 
            image-rendering: pixelated;
            box-shadow: 0 0 0 4px #333355, 0 0 4px rgba(0,0,0,0.8);
            max-width: 90%;
            max-height: 90%;
        }

        h2 { margin-top: 0; color: #333355; text-shadow: 2px 2px 0px #CCDDEE; letter-spacing: 1px; }
        h3 { margin: 15px 0 5px 0; color: #556688; border-bottom: 2px dashed #556688; padding-bottom: 2px; font-size: 14px; }
        
        .control-group { margin-bottom: 10px; }
        label { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; color: #556688; }
        input[type="range"] { width: 100%; margin: 0; cursor: pointer; accent-color: #556688; }
        input[type="number"] { width: 100%; background: #CCDDEE; border: 1px solid #FFFFFF; color: #333355; padding: 4px; font-family: inherit; }
        
        button {
            background: #99CCDD; color: white; border: none; padding: 8px; width: 100%;
            font-family: inherit; font-weight: bold; cursor: pointer; margin-top: 10px;
            box-shadow: 0 4px 0 #556688; transition: transform 0.1s;
        }
        button:active { transform: translateY(4px); box-shadow: 0 0 0 #990033; }
        
        .val-display { color: #556688; font-weight: bold; }