:root {
            /* VIA tokens (light-only system) */
            --primary: #4b70e2;
            --on-primary: #f9f9f9;
            --background: #ecf0f3;
            --surface: #ecf0f3;
            --surface-hover: #e6ebef;
            --track: #dde3ec;
            --text-strong: #181818;
            --text: #444444;
            --text-muted: #666666;
            --text-subtle: #a0a5a8;
            --shadow-dark: #d1d9e6;
            --shadow-light: #f9f9f9;
            --raised-md: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
            --raised-md-pressed: 4px 4px 12px #d1d9e6, -4px -4px 12px #f9f9f9;
            --inset-sm: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
            --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Noto Sans KR", system-ui, sans-serif;
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 10px;
            --space-4: 15px;
            --space-5: 20px;
            --space-6: 25px;
            --space-7: 50px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-pill: 999px;
            /* scene backdrop shown before the first frame (dusk idle #E87A5D; noon #6aa0d8 kept as dummy reference) */
            --scene: #E87A5D;

            box-sizing: border-box;
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        /* VIA is light-only: the control card keeps its light surface in every theme. */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --scene: #2b2a4e;
            }
        }

        :root[data-theme="dark"] {
            --scene: #2b2a4e;
        }

        *,
        *::before,
        *::after {
            box-sizing: inherit;
        }

        html {
            scroll-padding-top: env(safe-area-inset-top, 0px);
        }

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

        body {
            background: var(--scene);
            font-family: var(--font-sans);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
        }

        #scene,
        #fg {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* WebGL copy of the floor, shown only while a click ripple is alive;
     top and height are set from the horizon in script */
        #ripple {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            display: none;
        }

        .dock {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
            pointer-events: none;
        }

        .panel {
            /* night palette: same neumorphic shadow recipe, re-tinted for a dark surface */
            --night-surface: #20252f;
            --night-shadow-dark: #161a21;
            --night-shadow-light: #2b313d;
            --night-track: #1b1f27;
            --night-disabled: #4a5160;

            pointer-events: auto;
            width: auto;
            display: flex;
            align-items: center;
            background: var(--surface);
            border-radius: var(--radius-pill);
            box-shadow: 0 10px 10px var(--shadow-dark);
            padding: 10px;
            animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
            transition: background-color 1.25s ease, box-shadow 1.25s ease;
        }

        .panel.is-night {
            --surface: var(--night-surface);
            --track: var(--night-track);
            --text-subtle: var(--night-disabled);
            box-shadow: 0 10px 10px var(--night-shadow-dark);
            --raised-md: 8px 8px 16px var(--night-shadow-dark), -8px -8px 16px var(--night-shadow-light);
            --raised-md-pressed: 4px 4px 12px var(--night-shadow-dark), -4px -4px 12px var(--night-shadow-light);
            --inset-sm: inset 2px 2px 4px var(--night-shadow-dark), inset -2px -2px 4px var(--night-shadow-light);
        }

        .icongroup {
            display: flex;
            gap: 4px;
            padding: 4px;
            border-radius: var(--radius-pill);
            background: var(--track);
            box-shadow: var(--inset-sm);
            transition: background-color 1.25s ease, box-shadow 1.25s ease;
        }

        .icongroup button {
            width: 46px;
            height: 46px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            font-size: 19px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
        }

        .icongroup button:hover {
            transform: translateY(-1px);
        }

        .icongroup button:active {
            transform: none;
        }

        .icongroup button.on {
            background: var(--primary);
            color: var(--on-primary);
            box-shadow: var(--raised-md);
        }

        .icongroup button:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        .panel.is-night .icongroup button:not(.on) {
            color: #9aa0ae;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        /* mobile: icon card stays centred at the bottom */
        @media (max-width: 460px),
        (pointer: coarse) and (max-height: 500px) {
            .dock {
                justify-content: center;
                padding: 0 0 calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
            }

            .panel {
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
            }

            .icongroup button {
                width: 48px;
                height: 48px;
            }

            .icongroup button:active {
                transform: scale(0.94);
                transition-duration: 0.1s;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .panel {
                animation: none;
            }

            .panel,
            .icongroup,
            .icongroup button {
                transition: none;
            }
        }