* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            font-family: Arial, sans-serif;

            background: #171717;
            color: #eee;
        }

        .app {
            display: flex;
            width: 100%;
            height: 100%;
        }

        /* ================================
           Sidebar
        ================================= */

        .sidebar {
            width: 320px;
            min-width: 320px;

            padding: 20px;

            background: #222;
            border-right: 1px solid #444;

            overflow-y: auto;
        }

        .sidebar h1 {
            margin: 0 0 20px;
            font-size: 20px;
        }

        .section {
            margin-bottom: 24px;
        }

        .section-title {
            margin-bottom: 10px;

            font-size: 13px;
            color: #aaa;

            text-transform: uppercase;
            letter-spacing: .08em;
        }

        label {
            display: block;
            margin-bottom: 6px;

            font-size: 13px;
            color: #ccc;
        }

        input[type="text"] {
            width: 100%;

            padding: 9px 10px;

            border: 1px solid #555;
            border-radius: 4px;

            background: #111;
            color: #fff;

            outline: none;
        }

        input[type="range"] {
            width: 100%;
        }

        input[type="color"] {
            width: 100%;
            height: 40px;

            padding: 2px;

            border: 1px solid #555;
            border-radius: 4px;

            background: #111;
        }

        button {
            width: 100%;

            padding: 10px;

            border: 1px solid #555;
            border-radius: 4px;

            background: #333;
            color: white;

            cursor: pointer;
        }

        button:hover {
            background: #444;
        }

        button.primary {
            background: #315f91;
            border-color: #4679b3;
        }

        button.primary:hover {
            background: #3c71a8;
        }

        button.danger {
            background: #542525;
            border-color: #703737;
        }

        button.danger:hover {
            background: #6a2d2d;
        }

        .value-display {
            float: right;
            color: #aaa;
        }

        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;

            margin: 12px 0;
        }

        .checkbox-row label {
            margin: 0;
        }

        .help {
            margin-top: 8px;

            font-size: 12px;
            line-height: 1.5;

            color: #888;
        }

        /* ================================
           Layer List
        ================================= */

        .layer-list {
            display: flex;
            flex-direction: column;
            gap: 5px;

            max-height: 250px;
            overflow-y: auto;
        }

        .layer-item {
            display: flex;
            align-items: center;
            gap: 6px;

            padding: 6px;

            border: 1px solid #444;
            border-radius: 4px;

            background: #292929;
        }

        .layer-item.selected {
            border-color: #4da3ff;
            background: #303b47;
        }

        .layer-name {
            flex: 1;

            overflow: hidden;

            white-space: nowrap;
            text-overflow: ellipsis;

            font-size: 13px;

            cursor: pointer;
        }

        .layer-visibility {
            width: auto;
            margin: 0;
        }

        .layer-delete {
            width: auto;

            padding: 4px 7px;

            font-size: 12px;
        }

        /* ================================
           Workspace
        ================================= */

        .workspace {
            position: relative;

            flex: 1;

            overflow: hidden;

            background-color: #999;

            background-image:
                linear-gradient(
                    45deg,
                    #777 25%,
                    transparent 25%
                ),
                linear-gradient(
                    -45deg,
                    #777 25%,
                    transparent 25%
                ),
                linear-gradient(
                    45deg,
                    transparent 75%,
                    #777 75%
                ),
                linear-gradient(
                    -45deg,
                    transparent 75%,
                    #777 75%
                );

            background-size: 32px 32px;

            background-position:
                0 0,
                0 16px,
                16px -16px,
                -16px 0;
        }

        .image-layer {
            position: absolute;

            cursor: grab;

            user-select: none;
            touch-action: none;

            transform-origin: top left;
        }

        .image-layer.dragging {
            cursor: grabbing;
        }

        .image-layer.selected {
            outline: 2px solid #4da3ff;
            outline-offset: 3px;
        }

        .image-layer canvas {
            display: block;

            pointer-events: none;
        }

        .empty-message {
            position: absolute;

            left: 50%;
            top: 50%;

            transform: translate(-50%, -50%);

            padding: 20px 30px;

            color: rgba(255,255,255,.5);

            text-align: center;

            pointer-events: none;
        }

        .coordinates {
            position: absolute;

            right: 10px;
            bottom: 10px;

            padding: 6px 9px;

            border-radius: 4px;

            background: rgba(0,0,0,.6);

            font-size: 12px;
            color: #aaa;

            pointer-events: none;
        }