@font-face {
    font-family: 'Aeonik';
    src: url('Aeonik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
        }

        @font-face {
            font-family: 'Aeonik';
            src: url('Aeonik-RegularItalic.woff') format('woff');
            font-weight: normal;
            font-style: italic;
        }

        html, body {
            margin: 0;
            padding: 1;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: 'Aeonik', sans-serif;
            background-color:  #FDFDFD;
            color: #444444;
        }

        #controls {
            position: absolute;
            top: 2rem;
            left: 24rem;
            right: 24rem;
            z-index: 10;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 1rem;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
            padding: 1.5rem 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            align-items: center;
            justify-content: flex-start;
            
        }


        main {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw !important;
            height: 100vh !important;
            display: block;
            z-index: 1;
            cursor: default;
        }

        canvas.drawing-cursor {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>') 12 12, auto;
        }

        input[type=range] {
            accent-color: #FFC500;
        }

        input[type=range]::-webkit-slider-thumb {
            background: #FFC500;
            border: 2px solid #FFC500;
        }

        input[type=range]::-webkit-slider-runnable-track {
            background: #ffe066;
        }

        input[type=range]::-moz-range-thumb {
            background: #FFC500;
            border: 2px solid #FFC500;
        }

        input[type=range]::-moz-range-track {
            background: #ffe066;
        }

        input[type=range]:focus {
            outline: none;
        }
        button {
            font-family: 'Aeonik', sans-serif;
            font-size: 1rem;
            color: #444444;
            background: none;
            border: 1px solid #444444;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        button:hover {
            background: #f0f0f0;
        }

        select {
            font-family: 'Aeonik', sans-serif;
            font-size: 1rem;
            color: #444444;
            background: none;
            border: 1px solid #444444;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        select:hover {
            background: #f0f0f0;
        }
        #svg-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            pointer-events: none;
        }