:root {
            /* Aura / energy colors */
            --cyan: #63c7e6;
            --cyan-soft: #8295a1;
            --cyan-bright: #d0f7ff;

            /* Lucario gray-black fur */
            --fur: #51414b;
            --fur-deep: #241d27;
            --fur-soft: #7b6874;

            /* Cobalt aura */
            --aura-blue: #4f8dff;
            --aura-bright: #8ed7ff;

            /* Small warm accent */
            --lucario-gold: #f0c75e;

            /* Hue offset for the sanctuary terminal glow */
            --sigil-hue: 42deg;
            --lucario-gold-soft: #f0c75e88;

            /* Main dark surfaces */
            --background: #161316;
            --panel: #0c0b10;

            /* Borders */
            --border: #5b9dff55;
            --borderd: #5b9dff2b;

            /* Visualizer-specific colors */
            --visualizer-bg: #17121b;
            --visualizer-grid: #5b9dff24;
            --visualizer-baseline: #f0c75e99;

            /* Side menu surfaces */
            --menu-bg:
                linear-gradient(
                    180deg,
                    #241d2799,
                    #0c0b107a 42%,
                    #15131694
                );
            --menu-bg-open:
                linear-gradient(
                    180deg,
                    #241d27b3,
                    #0c0b108f 42%,
                    #151316a8
                );
            --menu-hover-bg:
                linear-gradient(90deg, #4f8dff18, transparent),
                #51414b12;
            --menu-active-bg:
                linear-gradient(90deg, #4f8dff25, transparent 82%),
                #51414b18;
        
            /* Extended theme palette: every non-root color is centralized here. */
            --theme-transparent: transparent;
            --shadow-black-transparent-15pct: rgba(0, 0, 0, .15);
            --aura-bright-transparent-13pct: #8ed7ff22;
            --aura-bright-transparent-5pct: #8ed7ff0d;
            --fur-transparent-8pct: #51414b14;
            --aura-blue-transparent-20pct: rgba(79, 141, 255, .2);
            --aura-blue-transparent-50pct: rgba(79, 141, 255, .5);
            --fur-transparent-25pct: rgba(81, 65, 75, .25);
            --aura-blue-transparent-27pct: #4f8dff44;
            --cyan-transparent-55pct: rgba(99, 199, 230, .55);
            --aura-blue-transparent-30pct: rgba(79, 141, 255, .3);
            --aura-blue-transparent-17pct: #4f8dff2b;
            --fur-transparent-13pct: #51414b20;
            --aura-blue-transparent-22pct: #4f8dff38;
            --aura-blue-transparent-19pct: #4f8dff30;
            --text-muted: #789bb8;
            --aura-electric-transparent-6pct: #4f9dff10;
            --aura-electric-transparent-13pct: #4f9dff22;
            --text-bright: #c7f2ff;
            --aura-electric-transparent-15pct: #4f9dff25;
            --aura-electric-transparent-40pct: #4f9dff66;
            --aura-blue-transparent-18pct: rgba(79, 141, 255, .18);
            --cyan-accent: #55c7ff;
            --aura-electric-transparent-53pct: #4f9dff88;
            --aura-blue-transparent-40pct: #4f8dff66;
            --menu-dark: #080d18;
            --aura-electric-transparent-27pct: #4f9dff44;
            --aura-blue-transparent-12pct: rgba(79, 141, 255, .12);
            --fur-transparent-12pct: rgba(81, 65, 75, .12);
            --shadow-black-transparent-50pct: rgba(0, 0, 0, .5);
            --aura-blue-transparent-14pct: rgba(79, 141, 255, .14);
            --fur-transparent-10pct: rgba(81, 65, 75, .1);
            --loading-preview-red: #ff3333;
            --loading-preview-red-transparent-60pct: rgba(255,51,51,0.6);
            --loading-preview-red-dim: #992222;
            --cyan-transparent-40pct: rgba(99, 199, 230, .4);
            --shadow-black-transparent-50pct-deep: #00000080;
            --fur-transparent-9pct: #51414b18;
            --cyan-electric-transparent-12pct: rgba(51, 255, 255, .12);
            --shadow-black-transparent-67pct: #000000aa;
            --aura-blue-transparent-13pct: #4f8dff22;
            --fur-transparent-16pct: #51414b28;
            --aura-electric-transparent-9pct: #4f9dff18;
            --aura-electric-transparent-12pct: #4f9dff20;
            --aura-electric-transparent-67pct: #4f9dffaa;
            --error-red-transparent-27pct: #ff666644;
            --loading-preview-red-transparent-6pct: #ff333310;
            --error-red-bright: #ff8888;
            --error-red-transparent-67pct: #ff6666aa;
            --loading-preview-red-transparent-15pct: #ff333325;
            --error-red-light: #ffaaaa;
            --error-red: #ff6666;
            --visualizer-surface-transparent-95pct: #1b2338f2;
            --aura-blue-transparent-16pct: rgba(79, 141, 255, .16);
            --fur-transparent-14pct: rgba(81, 65, 75, .14);
            --shadow-black-transparent-72pct: #000000b8;
            --cyan-transparent-45pct: rgba(99, 199, 230, .45);
            --aura-blue-transparent-22pct: rgba(79, 141, 255, .22);
            --aura-blue-transparent-15pct: #4f8dff25;
            --aura-bright-transparent-14pct: #8ed7ff24;
            --aura-electric-transparent-3pct: #4f9dff08;
            --cyan-electric-transparent-14pct: rgba(51, 255, 255, 0.14);
            --lucario-gold-transparent-9pct: #f0c75e16;
            --aura-blue-transparent-9pct: #4f8dff18;
            --lucario-gold-transparent-25pct: rgba(240, 199, 94, .25);
            --lucario-gold-transparent-14pct: #f0c75e24;
            --lucario-gold-transparent-8pct: #f0c75e14;
            --cyan-electric-transparent-8pct: rgba(51, 255, 255, 0.08);
            --shadow-black-transparent-60pct: #00000099;
            --cyan-transparent-20pct: rgba(99, 199, 230, .2);
            --panel-transparent-96pct: rgba(12, 11, 16, .96);
            --panel-transparent-94pct: rgba(12, 11, 16, .94);
            --panel-transparent-96pct-deep: #0c0b10f5;
            --cyan-electric-transparent-22pct: rgba(51, 255, 255, 0.22);
            --menu-dark-transparent-87pct: #080d18dd;
            --cyan-electric-transparent-25pct: rgba(51, 255, 255, 0.25);
            --error-red-transparent-40pct: #ff666666;
            --error-surface-transparent-78pct: rgba(35, 0, 0, 0.78);
            --error-red-soft: #ff7777;
            --error-red-transparent-65pct: rgba(255, 80, 80, 0.65);
            --error-red-transparent-14pct: rgba(255, 80, 80, 0.14);
            --success-green-transparent-53pct: #66ff9988;
            --success-surface-transparent-78pct: rgba(0, 45, 25, 0.78);
            --success-green: #66ff99;
            --success-green-transparent-65pct: rgba(80, 255, 140, 0.65);
            --error-red-transparent-53pct: #ff666688;
            --cyan-electric-transparent-18pct: rgba(51, 255, 255, .18);
            --cyan-electric-transparent-12pct: rgba(51, 255, 255, 0.12);
            --aura-bright-transparent-18pct: #8ed7ff2e;
            --lucario-gold-transparent-16pct: #f0c75e28;
            --lucario-gold-transparent-7pct: #f0c75e12;
            --shadow-black-transparent-40pct: #00000066;
            --aura-bright-transparent-40pct: #8ed7ff66;
            --shadow-black-transparent-44pct: #00000070;
            --aura-bright-transparent-9pct: #8ed7ff18;
            --aura-blue-transparent-8pct: #4f8dff14;
            --fur-transparent-9pct-deep: #51414b16;
            --shadow-black-transparent-36pct: #0000005c;
            --aura-bright-transparent-24pct: #8ed7ff3d;
            --shadow-black-transparent-42pct: #0000006b;
            --aura-bright-transparent-7pct: #8ed7ff12;
            --aura-bright-transparent-29pct: #8ed7ff4a;
            --aura-bright-transparent-27pct: #8ed7ff44;
            --aura-bright-transparent-21pct: #8ed7ff35;
            --shadow-black-transparent-38pct: #00000062;
            --aura-blue-transparent-7pct: #4f8dff12;
            --fur-transparent-7pct: #51414b12;
            --aura-bright-transparent-23pct: #8ed7ff3a;
            --shadow-black-transparent-41pct: #00000068;
            --aura-blue-transparent-6pct: #4f8dff0f;
            --aura-blue-transparent-5pct: #4f8dff0c;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { min-width: 1024px; background: var(--background); }

        body {
            min-width: 1024px;
            min-height: 100vh;
            overflow-x: auto;
            position: relative;
            background: var(--background);
            color: var(--cyan);
            font-family: "Fira Code", monospace;
        }

        /* Scanline overlay */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 1000;
            pointer-events: none;
            background: linear-gradient(var(--shadow-black-transparent-15pct) 50%,var(--theme-transparent) 50%);
            background-size: 100% 2px;
        }

        button,
        a,
        input {
            font: inherit;
        }

        button,
        a {
            -webkit-tap-highlight-color: var(--theme-transparent);
        }

        /* (Side menu styles: see "SIDE MENU: HOLOGRAM PROJECTION" near the end) */

        /* ══════════════════════════════════════
           PAGE CONTENT PANELS
           ══════════════════════════════════════ */
        .content-area {
            position: relative; z-index: 1;
            width: auto;
            margin-left: auto;
            margin-right: auto;
            padding: 20px 20px 40px 80px;
            transition: all 0.3s ease;
        }

        .page-panel {
            display: none; opacity: 0;
            animation: panel-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        .page-panel.active { display: block; width: 100%; }

        @keyframes panel-in {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ══════════════════════════════════════
           HOME PAGE
           ══════════════════════════════════════ */
 
        /* ══════════════════════════════════════
           UTIL
           ══════════════════════════════════════ */
        .small-link-btn {
            background: var(--theme-transparent); color: var(--text-muted); border: 1px solid var(--aura-electric-transparent-27pct);
            font-family: 'Fira Code', monospace; font-size: 0.85rem; padding: 10px 24px;
            cursor: pointer; letter-spacing: 2px; text-decoration: none; transition: all 0.3s; display: inline-block;
        }
        .small-link-btn:hover {
            color: var(--text-bright); background: var(--aura-electric-transparent-13pct); border-color: var(--aura-electric-transparent-53pct);
            box-shadow: 0 0 14px var(--aura-blue-transparent-14pct), 0 0 20px var(--fur-transparent-10pct); text-shadow: 0 0 6px var(--cyan-accent);
        }
        .small-link-btn::before { content: '>> '; opacity: 0.4; font-size: 0.65rem; }

        .wip-blink {
            font-size: 1.6rem; color: var(--loading-preview-red); text-align: center; padding: 0 8px; letter-spacing: 5px; user-select: none;
            animation: slow-wip-fade 3.5s ease-in-out infinite;
        }
        @keyframes slow-wip-fade {
            0%, 48% { opacity: 1; color: var(--loading-preview-red); text-shadow: 0 0 12px var(--loading-preview-red-transparent-60pct); }
            50%, 98% { opacity: 0.12; color: var(--loading-preview-red-dim); text-shadow: none; }
            100% { opacity: 1; color: var(--loading-preview-red); text-shadow: 0 0 12px var(--loading-preview-red-transparent-60pct); }
        }

        /* ══════════════════════════════════════
           SECTION PAGE
           ══════════════════════════════════════ */
        .page-heading {
            text-align: center; font-size: 2rem; letter-spacing: 5px;
            color: var(--cyan); margin-bottom: 0.5em;
            text-shadow: 0 0 14px var(--cyan-transparent-40pct), 0 0 24px var(--aura-blue-transparent-20pct);
        }
        .page-subheading {
            text-align: center; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 2em; opacity: 0.6;
        }

        /* ══════════════════════════════════════
           MUSIC PLAYER
           ══════════════════════════════════════ */
        .music-layout {
            display: grid;
            grid-template-columns: 325px  minmax(360px, 1fr) minmax(220px, 420px);
            grid-template-areas:
                "visualizer visualizer visualizer"
                "library player cover";
            align-items: start;
            gap: 18px;
            min-width: 981px;
        }

        .music-library {
            grid-area: library;
            position: sticky;
            top: 20px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel);
            box-shadow: inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
        }
        .library-items {
            width: 100%;
            min-width: 0;
        }
        .library-items > li {
            width: 100%;
            min-width: 0;
        }

        .music-library,
        .library-items,
        .library-item {
            min-width: 0;
        }

        .music-library,
        .music-player,
        .queue-panel,
        .album-cover-panel {
            background:
                linear-gradient(145deg, var(--fur-transparent-9pct), var(--theme-transparent) 48%),
                var(--panel);
            border-color: var(--border);
        }

        /* Album Cover */
        .album-cover-panel {
            position: sticky;
            top: 20px;
            grid-column: auto;
            grid-row: auto;
            padding: 24px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel);
            box-shadow: inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
            grid-area: cover;
            min-width: 240px;
        }

        .album-cover-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
        }

        .album-cover-heading strong {
            color: var(--cyan);
            font-size: .72rem;
            letter-spacing: 2px;
        }

        .album-cover-status {
            overflow: hidden;
            color: var(--cyan-soft);
            font-size: .56rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .album-cover-frame {
            position: relative;
            display: grid;
            width: 100%;
            aspect-ratio: 1 / 1;
            place-items: center;
            overflow: hidden;
            border: 1px solid var(--aura-electric-transparent-27pct);
            border-radius: 4px;
            background: var(--visualizer-bg);
            box-shadow:
                0 0 16px var(--cyan-electric-transparent-12pct),
                inset 0 0 22px var(--shadow-black-transparent-67pct);
        }

        .album-cover-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .album-cover-placeholder {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            padding: 20px;
            color: var(--cyan-soft);
            text-align: center;
            background:
                radial-gradient(circle at center, var(--aura-blue-transparent-13pct), var(--theme-transparent) 48%),
                radial-gradient(circle at center, var(--fur-transparent-16pct), var(--theme-transparent) 72%),
                var(--visualizer-bg);
        }

        .album-cover-placeholder[hidden],
        .album-cover-image[hidden] {
            display: none;
        }

        .album-cover-placeholder-mark {
            color: var(--lucario-gold);
            text-shadow:
                0 0 10px var(--lucario-gold-soft),
                0 0 24px var(--aura-blue-transparent-27pct);
            font-size: 3rem;
            line-height: 1;
        }

        .album-cover-placeholder-text {
            font-size: .62rem;
            letter-spacing: 1.5px;
        }

        .album-cover-meta {
            min-width: 0;
            margin-top: 14px;
            text-align: center;
        }

        .album-cover-album,
        .album-cover-artist {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .album-cover-album {
            color: var(--cyan);
            font-size: .8rem;
        }

        .album-cover-artist {
            margin-top: 5px;
            color: var(--cyan-soft);
            font-size: .65rem;
        }

        @media (max-width: 800px) {
            .music-layout {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "visualizer"
                    "library"
                    "player"
                    "cover";
                min-width: 0;
            }

            .music-library,
            .album-cover-panel {
                position: static;
                min-width: 0;
            }

            .album-cover-panel {
                grid-column: auto;
                grid-row: auto;
            }
        }

        /* Library Setup */
        .library-back,
        .library-home,
        .favourites-shortcut,
        .sort-toggle,
        .library-item-button,
        .queue-button,
        .clear-queue {
            border: 1px solid var(--theme-transparent);
            color: inherit;
            font: inherit;
            cursor: pointer;
        }

        .library-back,
        .favourites-shortcut {
            display: grid;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            place-items: center;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
        }

        .library-back:hover,
        .library-home:hover,
        .favourites-shortcut:hover,
        .sort-toggle:hover,
        .add-track:hover,
        .library-item-button:hover,
        .queue-button:hover,
        .clear-queue:hover {
            border-color: var(--aura-electric-transparent-53pct);
            background: var(--aura-electric-transparent-9pct);
            color: var(--cyan-bright);
        }

        .library-home {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 8px;
            padding: 9px 7px;
            background: var(--theme-transparent);
            color: var(--cyan);
            font-weight: 700;
            text-align: left;
        }

        .library-icon {
            display: grid;
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            place-items: center;
            border-radius: 4px;
            background: var(--aura-electric-transparent-12pct);
            font-size: 1.1rem;
        }

        .library-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5px;
            margin: 8px 0 5px;
            color: var(--cyan-soft);
            font-size: .65rem;
        }

        .library-toolbar > span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sort-toggle {
            padding: 3px 5px;
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan-soft);
            font-size: .62rem;
        }

        .library-items,
        .queue-items {
            display: grid;
            gap: 5px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .library-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 30px;
            width: 100%;
            min-width: 0;
            align-items: stretch;
            gap: 4px;
        }

        .library-item-button {
            display: flex;
            width: 100%;
            min-width: 0;
            max-width: none;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            overflow: hidden;
            padding: 8px;
            background: var(--theme-transparent);
            color: var(--cyan-soft);
            text-align: left;
        }

        .library-item-button > span:first-child {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            margin-top: 2px;
        }

        .library-item-button > span:last-child {
            flex: 0 0 auto;
        }

        .library-item-button strong,
        .library-item-button .item-meta {
            display: block;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .library-item-button strong,
        .queue-track-title {
            display: block;
            overflow: hidden;
            color: inherit;
            font-size: .72rem;
            font-weight: 400;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item-meta,
        .queue-track-artist {
            display: block;
            margin-top: 2px;
            overflow: hidden;
            color: var(--cyan-soft);
            font-size: .61rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item-meta-arrow svg {
            margin-top: 5px;
        }

        .add-track {
            width: 30px;
            min-width: 30px;
            max-width: 30px;
            flex: 0 0 30px;
            border: 1px solid var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            cursor: pointer;
        }

        .library-item > .add-track {
            align-self: stretch;
        }

        .add-track svg {
            margin-top: 5px;
        }

        .music-main {
            grid-area: player;
            min-width: 360px;
        }

        .music-player,
        .queue-panel {
            padding: 24px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel);
            box-shadow: inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
            min-width: 0;
        }

        .now-playing {
            margin-bottom: 20px;
            text-align: center;
        }

        #trackTitle {
            color: var(--cyan);
            font-size: 1.1rem;
        }

        #trackArtist {
            margin-top: 6px;
            color: var(--cyan-soft);
            font-size: .8rem;
        }

        .player-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .player-controls button {
            min-width: 44px;
            min-height: 40px;
            border: 1px solid var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            cursor: pointer;
            font-size: 1rem;
        }

        .player-controls svg {
            margin-top: 5px;
        }

        .player-controls button:hover {
            border-color: var(--aura-electric-transparent-67pct);
            background: var(--aura-electric-transparent-15pct);
        }

        .progress-row,
        .volume-row {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--cyan-soft);
            font-size: .75rem;
        }

        .progress-row {
            margin-bottom: 14px;
        }

        .progress-row input {
            flex: 1;
        }

        .volume-row input {
            width: 140px;
        }

        .queue-panel {
            margin-top: 18px;
        }

        .queue-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            color: var(--cyan);
        }

        .queue-heading h2 {
            font-size: 1rem;
            letter-spacing: 2px;
        }

        .clear-queue {
            padding: 4px 7px;
            border-color: var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan-soft);
            font-size: .65rem;
        }

        .queue-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px solid var(--aura-electric-transparent-13pct);
            color: var(--cyan-soft);
        }

        .queue-button {
            padding: 4px 8px;
            border-color: var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            font-size: .7rem;
        }

        .queue-button svg {
            margin-top: 5px;
        }

        .queue-item > span:first-child {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
        }

        .queue-button,
        .queue-remove {
            flex: 0 0 auto;
            min-width: 30px;
            min-height: 30px;
        }

        .queue-remove {
            padding: 4px 8px;
            border-color: var(--error-red-transparent-27pct);
            background: var(--loading-preview-red-transparent-6pct);
            color: var(--error-red-bright);
            font-size: .7rem;
        }

        .queue-remove:hover {
            border-color: var(--error-red-transparent-67pct);
            background: var(--loading-preview-red-transparent-15pct);
            color: var(--error-red-light);
        }

        .music-error {
            margin-top: 16px;
            color: var(--error-red);
            font-size: .8rem;
            text-align: center;
        }
        .library-topbar {
            display: flex;
            width: 100%;
            min-height: 30px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        /* PAGES */
        .library-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-top: 10px;
            padding-top: 9px;
            border-top: 1px solid var(--aura-electric-transparent-13pct);
        }

        .library-pagination[hidden] {
            display: none;
        }

        .library-pagination button {
            min-width: 0;
            padding: 5px 6px;
            border: 1px solid var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan-soft);
            font: inherit;
            font-size: .58rem;
            cursor: pointer;
            white-space: nowrap;
        }

        .library-pagination button:hover:not(:disabled) {
            border-color: var(--aura-electric-transparent-53pct);
            background: var(--aura-electric-transparent-9pct);
            color: var(--cyan-bright);
        }

        .library-pagination button:disabled {
            cursor: not-allowed;
            opacity: .35;
        }

        .library-page-status {
            flex: 0 0 auto;
            color: var(--cyan-soft);
            font-size: .58rem;
            text-align: center;
            white-space: nowrap;
        }

        /* ══════════════════════════════════════
           AUDIO VISUALIZER
           ══════════════════════════════════════ */
        .visualizer-panel {
            grid-area: visualizer;
            position: relative;
            z-index: 3;
            grid-column: 1 / -1;
            width: 100%;
            
            min-width: 0;
            margin: 20px auto 18px ;
            padding: 13px 16px 14px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: linear-gradient(180deg, var(--visualizer-surface-transparent-95pct), var(--visualizer-bg));
            box-shadow:
                0 0 20px var(--aura-blue-transparent-16pct),
                0 0 28px var(--fur-transparent-14pct),
                inset 0 0 24px var(--shadow-black-transparent-72pct);
            border-top-color: var(--aura-bright);
            overflow: hidden;
        }

        .visualizer-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.35;
            background: linear-gradient(
                var(--fur-transparent-14pct) 50%,
                var(--theme-transparent) 50%
            );
            background-size: 100% 4px;
        }

        .visualizer-toolbar,
        .visualizer-canvas {
            position: relative;
            z-index: 1;
        }

        .visualizer-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 10px;
        }

        .visualizer-title {
            color: var(--cyan);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-shadow:
                0 0 8px var(--cyan-transparent-45pct),
                0 0 16px var(--aura-blue-transparent-22pct);
        }

        .visualizer-title::before {
            content: "◆ ";
            color: var(--lucario-gold);
            text-shadow: 0 0 7px var(--lucario-gold-soft);
        }

        .visualizer-subtitle {
            margin-top: 4px;
            color: var(--fur-soft);
            font-size: 0.58rem;
            letter-spacing: 1.5px;
            opacity: 0.7;
        }

        .visualizer-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .visualizer-status {
            color: var(--fur-soft);
            font-size: 0.58rem;
            letter-spacing: 1.5px;
        }

        .visualizer-toggle {
            padding: 5px 8px;
            border: 1px solid var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            cursor: pointer;
            font-size: 0.62rem;
            letter-spacing: 0.5px;
        }

        .visualizer-toggle:hover {
            border-color: var(--aura-bright);
            background: var(--aura-blue-transparent-15pct);
            color: var(--cyan-bright);
            box-shadow: 0 0 10px var(--aura-bright-transparent-14pct);
        }

        .visualizer-toggle:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }

        .visualizer-canvas {
            display: block;
            width: 100%;
            max-width: 100%;
            height: 168px;
            border: 1px solid var(--borderd);
            background: var(--visualizer-bg);
        }

        .visualizer-panel.is-off .visualizer-canvas {
            opacity: 0.35;
            filter: grayscale(0.4);
        }

        @media (max-width: 800px) {
            .visualizer-panel {
                width: 100%;
                max-width: none;
                margin: 0 0 18px;
            }

            .visualizer-toolbar {
                align-items: flex-start;
                flex-direction: column;
            }

            .visualizer-actions {
                width: 100%;
                justify-content: space-between;
            }
        }
        /* ══════════════════════════════════════
        GALLERY
        ══════════════════════════════════════ */

        .gallery-content {
            min-width: 0;
        }
        .gallery-heading-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
            align-items: center;
            gap: 16px;
            margin-bottom: 0.5em;
        }

        .gallery-heading-row .page-heading {
            grid-column: 2;
            grid-row: 1;
            margin-bottom: 0;
            white-space: nowrap;
        }

        .gallery-category-buttons {
            grid-column: 1;
            grid-row: 1;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            min-width: 0;
        }

        .gallery-category-button {
            display: inline-flex;
            width: auto;
            min-width: 0;
            min-height: 42px;
            align-items: center;
            justify-content: center;
            padding: 9px 13px;

            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--aura-electric-transparent-3pct);
            color: var(--cyan-soft);
            font: inherit;
            font-size: 0.72rem;
            letter-spacing: 1px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .gallery-category-button:hover {
            border-color: var(--aura-electric-transparent-53pct);
            background: var(--aura-electric-transparent-12pct);
            color: var(--cyan-bright);
            box-shadow: 0 0 8px var(--cyan-electric-transparent-14pct);
        }

        .gallery-category-button.active {
            border-color: var(--lucario-gold-soft);
            background:
                linear-gradient(135deg, var(--lucario-gold-transparent-9pct), var(--theme-transparent) 65%),
                var(--aura-blue-transparent-9pct);
            color: var(--lucario-gold);
            text-shadow:
                0 0 7px var(--cyan-transparent-55pct),
                0 0 10px var(--lucario-gold-transparent-25pct);
            box-shadow:
                0 0 10px var(--lucario-gold-transparent-14pct),
                inset 0 0 8px var(--lucario-gold-transparent-8pct);
        }

        @media (max-width: 700px) {
            .gallery-heading-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .gallery-heading-row .page-heading {
                grid-column: 1;
                grid-row: 1;
            }

            .gallery-category-buttons {
                grid-column: 1;
                grid-row: 2;
                justify-content: center;
                flex-wrap: wrap;
            }
        }

        .gallery-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            color: var(--cyan);
        }

        .gallery-toolbar strong {
            font-size: 0.85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .gallery-status-with-page-arrows {
            display: flex;
            min-width: 0;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
        }

        .gallery-status-page-button {
            display: grid;
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            place-items: center;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 3px;
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            font: inherit;
            font-size: 0.8rem;
            line-height: 1;
            cursor: pointer;
        }

        .gallery-status-page-button:hover:not(:disabled) {
            border-color: var(--aura-electric-transparent-53pct);
            background: var(--aura-electric-transparent-12pct);
            color: var(--cyan-bright);
            box-shadow: 0 0 8px var(--cyan-electric-transparent-14pct);
        }

        .gallery-status-page-button:disabled {
            cursor: not-allowed;
            opacity: 0.35;
        }

        .gallery-status-page-button[hidden] {
            display: none;
        }

        .gallery-status-with-page-arrows #galleryStatus {
            min-width: 0;
            white-space: nowrap;
        }

        #galleryStatus {
            color: var(--cyan-soft);
            font-size: 0.62rem;
            letter-spacing: 1px;
        }

        .gallery-grid {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 12px;
        }

        .gallery-pagination {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 18px auto 0;
            padding-top: 12px;
            border-top: 1px solid var(--aura-electric-transparent-13pct);
        }

        .gallery-pagination[hidden] {
            display: none;
        }

        .gallery-pagination button {
            min-width: 105px;
            padding: 7px 10px;
            border: 1px solid var(--border);
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan-soft);
            font: inherit;
            font-size: 0.65rem;
            cursor: pointer;
            white-space: nowrap;
        }

        .gallery-pagination button:hover:not(:disabled) {
            border-color: var(--aura-electric-transparent-53pct);
            background: var(--aura-electric-transparent-9pct);
            color: var(--cyan-bright);
        }

        .gallery-pagination button:disabled {
            cursor: not-allowed;
            opacity: 0.35;
        }

        .gallery-page-status {
            min-width: 90px;
            color: var(--cyan-soft);
            font-size: 0.65rem;
            text-align: center;
            white-space: nowrap;
        }

        @media (max-width: 500px) {
            .gallery-pagination {
                gap: 6px;
            }

            .gallery-pagination button {
                min-width: 0;
                padding: 7px 6px;
            }

            .gallery-page-status {
                min-width: 75px;
                font-size: 0.58rem;
            }
        }

        .gallery-row {
            display: flex;
            width: 100%;
            min-width: 0;
            align-items: stretch;
            gap: 12px;
        }

        .gallery-card,
        .gallery-row-spacer {
            min-width: 0;
            aspect-ratio: var(--gallery-ratio, 1.5);
        }

        .gallery-card {
            position: relative;
            flex: var(--gallery-ratio, 1.5) 1 0;
        }

        .gallery-row-spacer {
            flex: var(--gallery-ratio, 1.5) 1 0;
            visibility: hidden;
            pointer-events: none;
        }

        .gallery-card-button {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            min-width: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 6px;
            background:
                linear-gradient(145deg, var(--fur-transparent-9pct), var(--theme-transparent) 48%),
                var(--panel);
            color: var(--cyan);
            cursor: pointer;
            box-shadow:
                0 0 12px var(--cyan-electric-transparent-8pct),
                inset 0 0 18px var(--shadow-black-transparent-60pct);
            transition:
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
        }

        .gallery-card-button:hover,
        .gallery-card-button:focus-visible {
            z-index: 2;
            border-color: var(--aura-bright);
            box-shadow:
                0 0 16px var(--cyan-transparent-20pct),
                0 0 22px var(--aura-blue-transparent-14pct),
                inset 0 0 18px var(--shadow-black-transparent-60pct);
            transform: translateY(-2px);
        }

        .gallery-card-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: var(--panel);
            transition: transform 0.35s ease;
        }

        .gallery-card-button:hover .gallery-card-image,
        .gallery-card-button:focus-visible .gallery-card-image {
            transform: scale(1.035);
        }

        .gallery-card-overlay {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;

            display: flex;
            flex-direction: column;
            gap: 3px;

            padding: 25px 9px 8px;
            background: linear-gradient(
                var(--theme-transparent),
                var(--panel-transparent-96pct)
            );

            opacity: 0;
            text-align: left;
            transform: translateY(8px);
            transition:
                opacity 0.25s ease,
                transform 0.25s ease;
            pointer-events: none;
        }

        .gallery-card-button:hover .gallery-card-overlay,
        .gallery-card-button:focus-visible .gallery-card-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .gallery-card-title {
            overflow: hidden;
            color: var(--cyan-bright);
            font-size: 0.7rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .gallery-card-description {
            display: block;
            overflow: hidden;
            color: var(--cyan-soft);
            font-size: 0.58rem;
            line-height: 1.35;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Empty gallery/error messages */
        .gallery-empty,
        .gallery-error {
            padding: 30px 12px;
            border: 1px solid var(--borderd);
            color: var(--cyan-soft);
            font-size: 0.75rem;
            text-align: center;
        }

        .gallery-error {
            color: var(--error-red);
        }

        /* ══════════════════════════════════════
        GALLERY LIGHTBOX
        ══════════════════════════════════════ */

        .gallery-lightbox {
            position: fixed;
            inset: 0;
            z-index: 1100;

            display: grid;
            place-items: center;
            padding: 24px;

            background: var(--panel-transparent-94pct);
        }

        body.gallery-lightbox-open {
            overflow: hidden;
        }

        .gallery-lightbox[hidden] {
            display: none;
        }

        .gallery-lightbox-backdrop {
            position: absolute;
            inset: 0;
            cursor: pointer;
        }

        .gallery-lightbox-dialog {
            position: relative;
            z-index: 1;
            display: flex;
            width: auto;
            max-height: calc(100vh - 48px);
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel-transparent-96pct-deep);
            box-shadow:
                0 0 30px var(--cyan-electric-transparent-22pct),
                inset 0 0 28px var(--shadow-black-transparent-67pct);
            overflow-y: auto; overflow-x: hidden;
        }

        .gallery-lightbox-close {
            position: absolute;
            top: 7px;
            right: 9px;
            z-index: 2;
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            background: var(--menu-dark-transparent-87pct);
            color: var(--cyan);
            font: inherit;
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
        }

        .gallery-lightbox-close:hover {
            border-color: var(--aura-electric-transparent-67pct);
            background: var(--aura-electric-transparent-15pct);
            color: var(--cyan-bright);
        }

        .gallery-lightbox-image {
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: contain;
            border: 1px solid var(--aura-electric-transparent-13pct);
            background: var(--panel);
        }

        .gallery-lightbox-caption-row {
            display: grid;
            width: 100%;
            min-width: 0;
            grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
            align-items: start;
            gap: 12px;
        }

        .gallery-lightbox-source {
            grid-column: 3;
            font-size: 0.62rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .gallery-lightbox-caption {
            grid-column: 2;
            width: 100%;
            min-width: 0;
            max-height: none;
            overflow: visible;
            text-align: center;
        }

        .gallery-lightbox-caption h2 {
            color: var(--cyan);
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .gallery-lightbox-caption p {
            margin-top: 5px;
            color: var(--cyan-soft);
            font-size: 0.68rem;
            line-height: 1.5;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        /* ═══ ARROWS ═══ */
        .gallery-lightbox-nav {
            position: static;
            top: auto;
            right: auto;
            left: auto;

            display: grid;
            width: 44px;
            height: 44px;
            place-items: center;
            justify-self: center;
            padding: 0;

            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            font: inherit;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;

            transition:
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                color 0.25s ease,
                opacity 0.25s ease;
        }

        .gallery-lightbox-nav[hidden] {
            display: none;
        }

        .gallery-lightbox-previous {
            grid-column: 1;
        }

        .gallery-lightbox-next {
            grid-column: 4;
        }

        .gallery-lightbox-nav:hover:not(:disabled),
        .gallery-lightbox-nav:focus-visible:not(:disabled) {
            border-color: var(--aura-electric-transparent-67pct);
            background: var(--aura-electric-transparent-15pct);
            color: var(--cyan-bright);
            box-shadow: 0 0 14px var(--cyan-electric-transparent-25pct);
            outline: none;
        }

        .gallery-lightbox-nav:disabled {
            cursor: not-allowed;
            opacity: 0.25;
        }

        @media (max-width: 700px) {

            .gallery-lightbox-previous {
                left: 8px;
            }

            .gallery-lightbox-next {
                right: 8px;
            }

            .gallery-lightbox-dialog {
                padding: 12px;
            }

            .gallery-lightbox-caption-row {
                grid-template-columns: 40px minmax(0, 1fr) 40px 40px;
                gap: 8px;
            }

            .gallery-lightbox-nav {
                width: 40px;
                height: 40px;
                font-size: 1.35rem;
            }
        }
        /* ══════════════════════════════════════
        GALLERY LOADER
        ══════════════════════════════════════ */
        .gallery-lightbox-image-box {
            position: relative;
            display: flex;
            width: var(--lightbox-image-width, auto);
            height: var(--lightbox-image-height, auto);
            min-width: 0;
            max-width: 100%;
            max-height: calc(100vh - 150px);
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: var(--visualizer-bg);
        }

        .gallery-fullres-loader {
            position: absolute;
            right: 10px;
            bottom: 10px;
            left: 10px;
            z-index: 2;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: max-content;
            max-width: calc(100% - 20px);
            margin: 0 auto;
            padding: 5px 9px 6px;

            border: 1px solid var(--error-red-transparent-40pct);
            border-radius: 3px;
            background: var(--error-surface-transparent-78pct);
            color: var(--error-red-soft);
            font-size: 0.58rem;
            letter-spacing: 1px;
            line-height: 1;
            text-align: center;
            text-shadow: 0 0 7px var(--error-red-transparent-65pct);
            pointer-events: none;
            transform: translateY(0);
            opacity: 1;
            transition:
                opacity 0.3s ease,
                transform 0.3s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                background 0.2s ease;
        }

        .gallery-fullres-loader[hidden] {
            display: none;
        }

        .gallery-fullres-loader-animation {
            position: relative;
            display: block;
            width: 78px;
            height: 4px;
            overflow: hidden;
            border: 1px solid currentColor;
            background: var(--error-red-transparent-14pct);
        }

        .gallery-fullres-loader-animation::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 38%;
            background: currentColor;
            box-shadow: 0 0 7px currentColor;
            transform: translateX(-130%);
            animation: gallery-fullres-loading 0.85s linear infinite;
        }

        @keyframes gallery-fullres-loading {
            from {
                transform: translateX(-130%);
            }

            to {
                transform: translateX(290%);
            }
        }

        .gallery-fullres-loader.is-loaded {
            border-color: var(--success-green-transparent-53pct);
            background: var(--success-surface-transparent-78pct);
            color: var(--success-green);
            text-shadow: 0 0 7px var(--success-green-transparent-65pct);
        }

        .gallery-fullres-loader.is-loaded
        .gallery-fullres-loader-animation::before {
            width: 100%;
            transform: translateX(0);
            animation: none;
        }

        .gallery-fullres-loader.is-error {
            border-color: var(--error-red-transparent-53pct);
            color: var(--error-red);
        }

        .gallery-fullres-loader.is-error
        .gallery-fullres-loader-animation::before {
            width: 100%;
            transform: translateX(0);
            animation: none;
        }

        .gallery-fullres-loader.is-fading {
            opacity: 0;
            transform: translateY(5px);
        }

        /* ══════════════════════════════════════
            KICIA MUSIC
        ══════════════════════════════════════ */
        .kicia-music-button {
            display: block;
            margin: 0 auto 2em;
            padding: 10px 24px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--aura-electric-transparent-6pct);
            color: var(--cyan);
            font: inherit;
            font-size: .75rem;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all .25s ease;
        }

        .kicia-music-button[hidden] {
            display: none;
        }

        .kicia-music-button:hover:not(:disabled),
        .kicia-music-button:focus-visible:not(:disabled) {
            border-color: var(--aura-electric-transparent-67pct);
            background: var(--aura-electric-transparent-15pct);
            color: var(--cyan-bright);
            box-shadow: 0 0 12px var(--cyan-electric-transparent-18pct);
        }

        .kicia-music-button:disabled {
            cursor: not-allowed;
            opacity: .45;
        }
        /* ══════════════════════════════════════
            JXL SUPPORT WARNING
        ══════════════════════════════════════ */

        .gallery-content[hidden],
        .gallery-jxl-fallback[hidden] {
            display: none;
        }

        .gallery-jxl-fallback {
            display: flex;
            min-height: clamp(320px, calc(100vh - 240px), 620px);
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
            padding: 30px 20px;
            text-align: center;
        }

        .gallery-jxl-fallback img {
            display: block;
            width: auto;
            max-width: min(100%, 460px);
            max-height: 46vh;
            object-fit: contain;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel);
            box-shadow:
                0 0 16px var(--cyan-electric-transparent-12pct),
                inset 0 0 18px var(--shadow-black-transparent-60pct);
        }

        .gallery-jxl-fallback p {
            max-width: 680px;
            color: var(--cyan-soft);
            font-size: 0.8rem;
            line-height: 1.6;
        }

        .gallery-category-button:disabled {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.35;
            filter: grayscale(0.35);
            box-shadow: none;
        }
        


.page-heading {
    color: var(--cyan);
    text-shadow:
        0 0 14px var(--cyan-transparent-40pct),
        0 0 24px var(--aura-blue-transparent-20pct);
}

.album-cover-frame,
.gallery-card-image,
.gallery-lightbox-image {
    background: var(--panel);
}

.gallery-lightbox-image-box {
    background: var(--visualizer-bg);
}

.gallery-card-overlay {
    background: linear-gradient(
        var(--theme-transparent),
        var(--panel-transparent-96pct)
    );
}

.gallery-lightbox {
    background: var(--panel-transparent-94pct);
}

.gallery-lightbox-dialog {
    background: var(--panel-transparent-96pct-deep);
    box-shadow:
        0 0 30px var(--aura-blue-transparent-22pct),
        0 0 22px var(--fur-transparent-14pct),
        inset 0 0 28px var(--shadow-black-transparent-67pct);
}

/* ══════════════════════════════════════
   SELECTIVE AURA-BRIGHT / GOLD ACCENTS
   ══════════════════════════════════════ */

/* Gold is reserved for keyboard focus and selected states */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 1px solid var(--lucario-gold-soft);
    outline-offset: 3px;
}

/* General controls use aura-bright on hover */
.library-back:hover,
.library-home:hover,
.favourites-shortcut:hover,
.sort-toggle:hover,
.add-track:hover,
.library-item-button:hover,
.queue-button:hover,
.clear-queue:hover,
.player-controls button:hover,
.library-pagination button:hover:not(:disabled),
.gallery-pagination button:hover:not(:disabled),
.gallery-status-page-button:hover:not(:disabled) {
    border-color: var(--aura-bright);
}

.gallery-card-button:focus-visible {
    outline: 1px solid var(--lucario-gold-soft);
    outline-offset: 2px;
}

/* Album cover frame gets a quiet aura outline */
.album-cover-frame {
    border-color: var(--aura-bright);
    box-shadow:
        0 0 16px var(--aura-bright-transparent-13pct),
        0 0 20px var(--fur-transparent-9pct),
        inset 0 0 22px var(--shadow-black-transparent-67pct);
}

.visualizer-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    z-index: 1;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--theme-transparent),
        var(--aura-bright),
        var(--lucario-gold-soft),
        var(--theme-transparent)
    );
    opacity: .75;
}

.visualizer-toggle:focus-visible {
    border-color: var(--lucario-gold-soft);
}

/* Lightbox controls */
.gallery-lightbox-nav:hover:not(:disabled),
.gallery-lightbox-nav:focus-visible:not(:disabled) {
    border-color: var(--aura-bright);
    box-shadow:
        0 0 12px var(--aura-bright-transparent-18pct),
        0 0 16px var(--fur-transparent-9pct);
}

.gallery-lightbox-nav:focus-visible {
    outline-color: var(--lucario-gold-soft);
}

/* A playing Kicia button can use gold as a current-state indicator */
.kicia-music-button[aria-pressed="true"] {
    border-color: var(--lucario-gold-soft);
    color: var(--lucario-gold);
    box-shadow:
        0 0 12px var(--lucario-gold-transparent-16pct),
        inset 0 0 8px var(--lucario-gold-transparent-7pct);
}

.kicia-music-button:hover:not(:disabled),
.kicia-music-button:focus-visible:not(:disabled) {
    border-color: var(--aura-bright);
}

/* ══════════════════════════════════════
   MUSIC PANEL DEPTH
   ══════════════════════════════════════ */

.music-library,
.music-player,
.queue-panel,
.album-cover-panel {
    box-shadow:
        0 9px 22px var(--shadow-black-transparent-40pct),
        0 0 18px var(--fur-transparent-9pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);

transition:
    border-color 180ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Slightly stronger focus around the active music area */
.music-library:focus-within,
.music-player:focus-within,
.queue-panel:focus-within,
.album-cover-panel:focus-within {
    border-color: var(--aura-bright-transparent-40pct);
    box-shadow:
        0 10px 26px var(--shadow-black-transparent-44pct),
        0 0 18px var(--aura-bright-transparent-9pct),
        0 0 22px var(--fur-transparent-9pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

/* The player is the main focal panel */
.music-player {
    box-shadow:
        0 11px 28px var(--shadow-black-transparent-44pct),
        0 0 20px var(--aura-blue-transparent-8pct),
        0 0 18px var(--fur-transparent-9pct-deep),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

/* Album cover gets a quiet aura edge */
.album-cover-panel {
    box-shadow:
        0 10px 25px var(--shadow-black-transparent-44pct),
        0 0 20px var(--aura-blue-transparent-9pct),
        0 0 16px var(--fur-transparent-9pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

/* Keep the queue visually subordinate */
.queue-panel {
    box-shadow:
        0 7px 18px var(--shadow-black-transparent-36pct),
        0 0 14px var(--fur-transparent-8pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

/* ══════════════════════════════════════
   MUSIC PANEL HOVER DEPTH
   ══════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
    .music-library:hover,
    .music-player:hover,
    .queue-panel:hover,
    .album-cover-panel:hover {
        border-color: var(--aura-bright-transparent-24pct);
        box-shadow:
            0 9px 22px var(--shadow-black-transparent-42pct),
            0 0 14px var(--aura-bright-transparent-7pct),
            0 0 16px var(--fur-transparent-8pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    /*
     * Keep the player as the primary music focal point.
     * This is still weaker than :focus-within.
     */
    .music-player:hover {
        border-color: var(--aura-bright-transparent-29pct);
        box-shadow:
            0 10px 25px var(--shadow-black-transparent-44pct),
            0 0 17px var(--aura-blue-transparent-9pct),
            0 0 16px var(--fur-transparent-9pct-deep),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    .album-cover-panel:hover {
        border-color: var(--aura-bright-transparent-27pct);
        box-shadow:
            0 9px 23px var(--shadow-black-transparent-42pct),
            0 0 17px var(--aura-blue-transparent-9pct),
            0 0 15px var(--fur-transparent-9pct-deep),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    /*
     * Keep the queue slightly more subdued.
     */
    .queue-panel:hover {
        border-color: var(--aura-bright-transparent-21pct);
        box-shadow:
            0 8px 19px var(--shadow-black-transparent-38pct),
            0 0 12px var(--aura-blue-transparent-7pct),
            0 0 13px var(--fur-transparent-7pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    /*
     * The library gets a balanced fur/aura treatment.
     */
    .music-library:hover {
        border-color: var(--aura-bright-transparent-23pct);
        box-shadow:
            0 9px 21px var(--shadow-black-transparent-41pct),
            0 0 14px var(--aura-blue-transparent-8pct),
            0 0 16px var(--fur-transparent-9pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    /*
     * Preserve the stronger keyboard/focus state when a panel
     * is both hovered and focused.
     */
    .music-library:hover:focus-within,
    .music-player:hover:focus-within,
    .queue-panel:hover:focus-within,
    .album-cover-panel:hover:focus-within {
        border-color: var(--aura-bright-transparent-40pct);
        box-shadow:
            0 10px 26px var(--shadow-black-transparent-44pct),
            0 0 18px var(--aura-bright-transparent-9pct),
            0 0 22px var(--fur-transparent-9pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }
}

/* ══════════════════════════════════════
   SMOOTH LIBRARY / QUEUE HOVER GLOW
   ══════════════════════════════════════ */

.music-library,
.queue-panel {
    transition:
        border-color 180ms cubic-bezier(.4, 0, .2, 1),
        box-shadow 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Four shadow layers in the normal state, matching hover */
.music-library {
    box-shadow:
        0 9px 22px var(--shadow-black-transparent-40pct),
        0 0 14px var(--aura-blue-transparent-6pct),
        0 0 16px var(--fur-transparent-9pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

.queue-panel {
    box-shadow:
        0 7px 18px var(--shadow-black-transparent-36pct),
        0 0 12px var(--aura-blue-transparent-5pct),
        0 0 13px var(--fur-transparent-8pct),
        inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
}

@media (hover: hover) and (pointer: fine) {
    .music-library:hover {
        border-color: var(--aura-bright-transparent-23pct);
        box-shadow:
            0 9px 21px var(--shadow-black-transparent-41pct),
            0 0 14px var(--aura-blue-transparent-8pct),
            0 0 16px var(--fur-transparent-9pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }

    .queue-panel:hover {
        border-color: var(--aura-bright-transparent-21pct);
        box-shadow:
            0 8px 19px var(--shadow-black-transparent-38pct),
            0 0 12px var(--aura-blue-transparent-7pct),
            0 0 13px var(--fur-transparent-7pct),
            inset 0 0 30px var(--shadow-black-transparent-50pct-deep);
    }
}

/* ══════════════════════════════════════
   HOME: INTRO + JOURNAL + INDEX
   Fills the whole width: side columns
   scale with the window, the journal
   takes everything in between.
   ══════════════════════════════════════ */
.home-layout {
    display: grid;
    grid-template-columns:
        clamp(240px, 17vw, 340px)
        minmax(0, 1fr)
        clamp(220px, 16vw, 320px);
    grid-template-areas: "intro journal archive";
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
    padding: 12px 4px 0 8px;
}

.home-intro { grid-area: intro; position: sticky; top: 20px; }
.home-journal { grid-area: journal; min-width: 0; }
.home-archive { grid-area: archive; position: sticky; top: 20px; }

/* ── Intro column ── */
.home-name {
    margin-bottom: 18px;
    color: var(--cyan);
    font-size: 1.5rem;
    letter-spacing: 3px;
    white-space: pre;
    text-shadow: 0 0 10px var(--cyan-transparent-40pct), 0 0 22px var(--aura-blue-transparent-20pct);
}

.home-bio {
    margin-bottom: 10px;
    color: var(--text-bright, var(--cyan-bright));
    font-size: .82rem;
    line-height: 1.7;
    opacity: .9;
}
.home-bio-aside {
    margin-bottom: 22px;
    color: var(--cyan-soft);
    font-style: italic;
    opacity: .8;
}

.home-stats {
    list-style: none;
    margin-bottom: 10px;
    color: var(--cyan-soft);
    font-size: .72rem;
    line-height: 1.75;
    opacity: .75;
}

.home-now {
    padding-top: 12px;
    border-top: 1px dashed var(--borderd);
    font-size: .72rem;
    line-height: 1.55;
}
.home-now-label { color: var(--cyan-soft); margin-bottom: 2px; }
.home-now-icon { display: inline-block; color: var(--fur-soft); }
.home-now-track,
.home-now-artist { overflow-wrap: anywhere; }
.home-now-track { color: var(--fur-soft); }
.home-now-artist { color: var(--cyan-soft); opacity: .75; }
.home-now-artist:empty { display: none; }
.home-now.is-playing .home-now-icon { color: var(--lucario-gold); animation: home-now-bob 1.2s ease-in-out infinite; }
.home-now.is-playing .home-now-track { color: var(--cyan-bright); }
@keyframes home-now-bob { 50% { transform: translateY(-2px); } }

/* ── Journal column ── */
.journal-header {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--borderd);
}
.journal-title {
    color: var(--cyan);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 3px;
    white-space: pre;
}

.journal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.journal-tag {
    padding: 2px 8px;
    border: 1px solid var(--borderd);
    background: transparent;
    color: var(--cyan-soft);
    font-size: .7rem;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.journal-tag:hover,
.journal-tag:focus-visible { color: var(--cyan-bright); border-color: var(--border); outline: none; }
.journal-tag[aria-pressed="true"] {
    color: var(--lucario-gold);
    border-color: var(--lucario-gold-soft);
    background: #f0c75e10;
}

.journal-feed { display: grid; gap: 14px; }

.journal-entry {
    position: relative;
    padding: 16px 20px 14px 22px;
    border: 1px solid var(--borderd);
    border-radius: 6px;
    background: var(--panel);
    scroll-margin-top: 20px;
    cursor: pointer;
    transition:
        border-color .3s,
        box-shadow .3s,
        padding .45s var(--ease-out-expo),
        transform .45s var(--ease-spring);
}
.journal-entry[hidden] { display: none; }
.journal-entry::before {
    /* aura rail on the left, brightens on hover / when open */
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 2px;
    background: linear-gradient(var(--aura-blue), var(--fur));
    opacity: .45;
    transition: opacity .3s;
}
.journal-entry.is-pinned::before { background: linear-gradient(var(--lucario-gold), var(--fur)); opacity: .8; }
.journal-entry:not(.is-open):hover,
.journal-entry:not(.is-open):focus-within {
    border-color: var(--border);
    box-shadow: 0 0 18px var(--aura-blue-transparent-12pct);
    transform: translateX(3px);
}
.journal-entry:hover::before,
.journal-entry:focus-within::before,
.journal-entry.is-open::before { opacity: 1; }

.journal-entry.is-open {
    padding: 24px 32px 22px 34px;
    border-color: var(--border);
    box-shadow:
        0 0 24px var(--aura-blue-transparent-12pct),
        inset 0 0 40px #00000059;
    cursor: auto;
}

.journal-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
    color: var(--cyan-soft);
    font-size: .68rem;
    letter-spacing: 1px;
}
.journal-entry-meta time { color: var(--fur-soft); }
.journal-entry-tag { color: var(--aura-blue); }
.journal-pin {
    padding: 0 6px;
    border: 1px solid var(--lucario-gold-soft);
    color: var(--lucario-gold);
    font-size: .6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.journal-entry-title {
    margin-bottom: 8px;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.35;
    transition: font-size .45s var(--ease-out-expo), margin .45s var(--ease-out-expo);
}
.journal-entry-title a { color: var(--cyan-bright); text-decoration: none; }
.journal-entry-title a:focus-visible { outline: none; text-shadow: 0 0 8px var(--aura-bright); }
.journal-entry.is-open .journal-entry-title { margin: 6px 0 18px; font-size: 1.6rem; letter-spacing: .5px; }
.journal-entry.is-open .journal-entry-title a {
    color: var(--cyan);
    text-shadow: 0 0 12px var(--cyan-transparent-40pct);
}

.journal-entry-cover {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--borderd);
    border-radius: 4px;
    aspect-ratio: 16 / 6;
    transition: aspect-ratio .45s var(--ease-out-expo);
}
.journal-entry.is-open .journal-entry-cover { aspect-ratio: 16 / 8; margin-bottom: 20px; }
.journal-entry-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.journal-entry-summary {
    color: var(--cyan-soft);
    font-size: .8rem;
    line-height: 1.65;
}
.journal-entry-more {
    display: inline-block;
    margin-top: 8px;
    color: var(--aura-bright);
    font-size: .7rem;
    letter-spacing: 1.5px;
}
.journal-entry-more::after { content: "→"; display: inline-block; margin-left: .6ch; transition: transform .45s var(--ease-spring); }
.journal-entry:hover .journal-entry-more::after { transform: translateX(4px); }
.journal-entry.is-open .journal-entry-summary,
.journal-entry.is-open .journal-entry-more { display: none; }

/* The body unfolds with a 0fr → 1fr grid-row transition,
   which animates to the content's real height. */
.journal-entry-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .5s var(--ease-out-expo),
        opacity .35s ease;
}
.journal-entry.is-open .journal-entry-body {
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows .55s var(--ease-out-expo),
        opacity .45s .1s ease;
}
.journal-entry-body-inner { min-height: 0; overflow: hidden; }
.journal-entry:not(.is-open) .journal-entry-body-inner { visibility: hidden; }

.journal-entry-close {
    display: inline-block;
    margin-top: 28px;
    padding: 3px 10px;
    border: 1px solid var(--borderd);
    color: var(--cyan-soft);
    font-size: .7rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.journal-entry-close::before { content: "↑ "; }
.journal-entry-close:hover,
.journal-entry-close:focus-visible { color: var(--cyan-bright); border-color: var(--border); outline: none; }

.journal-loading,
.journal-empty,
.journal-error { color: var(--cyan-soft); font-size: .78rem; opacity: .75; }
.journal-error { color: #ff5f5f; opacity: 1; }

/* ── Post text ── */
.journal-prose {
    /* Grows with wide screens, but stops at a comfortable line length */
    max-width: clamp(92ch, 50vw, 128ch);
    color: var(--text-bright, var(--cyan-bright));
    font-size: .88rem;
    line-height: 1.85;
}
.journal-prose > * + * { margin-top: 1em; }
.journal-prose h2,
.journal-prose h3,
.journal-prose h4 {
    margin-top: 1.8em;
    color: var(--cyan);
    font-weight: 400;
    letter-spacing: 1px;
}
.journal-prose h2 { font-size: 1.12rem; }
.journal-prose h2::before { content: "## "; color: var(--fur-soft); }
.journal-prose h3 { font-size: 1rem; }
.journal-prose h3::before { content: "### "; color: var(--fur-soft); }
.journal-prose a { color: var(--aura-bright); text-underline-offset: 3px; }
.journal-prose a:hover { color: var(--cyan-bright); }
.journal-prose strong { color: var(--cyan-bright); }
.journal-prose em { color: var(--lucario-gold); }
.journal-prose ul,
.journal-prose ol { padding-left: 1.6em; }
.journal-prose li + li { margin-top: .3em; }
.journal-prose ul li::marker { content: "› "; color: var(--aura-blue); }
.journal-prose blockquote {
    padding: 8px 14px;
    border-left: 2px solid var(--lucario-gold-soft);
    background: #f0c75e08;
    color: var(--cyan-soft);
}
.journal-prose code {
    padding: 1px 5px;
    border: 1px solid var(--borderd);
    border-radius: 3px;
    background: var(--background);
    color: var(--lucario-gold);
    font-size: .92em;
}
.journal-prose pre {
    padding: 12px 14px;
    border: 1px solid var(--borderd);
    border-radius: 4px;
    background: var(--background);
    overflow-x: auto;
    line-height: 1.55;
}
.journal-prose pre code { padding: 0; border: 0; background: none; color: var(--cyan-soft); }
.journal-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--borderd);
    border-radius: 4px;
}
.journal-prose hr { border: 0; border-top: 1px dashed var(--borderd); margin: 2em 0; }

/* ── Index column ── */
.home-archive-title {
    margin: 10px 0 12px;
    color: var(--cyan-soft);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.home-archive-title::before { content: "// "; color: var(--fur-soft); }
.journal-index { list-style: none; font-size: .76rem; line-height: 1.85; }
.journal-index a {
    display: block;
    overflow: hidden;
    color: #6fd7b8;
    font-style: italic;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s, transform .4s var(--ease-spring);
}
.journal-index-number { color: var(--lucario-gold); font-style: normal; }
.journal-index a:hover,
.journal-index a:focus-visible { color: var(--cyan-bright); transform: translateX(3px); outline: none; }
.journal-index a[aria-current="page"] { color: var(--cyan-bright); }
.journal-index a[aria-current="page"]::before { content: "▸ "; color: var(--aura-bright); font-style: normal; }

/* Narrower windows: the index tucks under the intro */
@media (max-width: 1279px) {
    .home-layout {
        grid-template-columns: clamp(220px, 22vw, 280px) minmax(0, 1fr);
        grid-template-areas:
            "intro journal"
            "archive journal";
    }
    .home-intro,
    .home-archive { position: static; }
}

/* ══════════════════════════════════════
   MUSIC SANCTUARY (SEAL)
   A compact card that unfolds out of the
   Music button while the tab is sealed.
   ══════════════════════════════════════ */
:root {
    /* Spring easing via linear() (damping ≈ 0.55, ~12% overshoot) */
    --ease-spring: linear(0, 0.037, 0.13, 0.259, 0.405, 0.553, 0.692, 0.815, 0.917, 0.998, 1.057, 1.096, 1.118, 1.126, 1.123, 1.112, 1.097, 1.078, 1.06, 1.042, 1.026, 1.012, 1.002, 0.994, 0.988, 0.985, 0.984, 0.984, 0.986, 0.987, 0.99, 0.992, 0.994, 0.996, 0.998, 1, 1.001, 1.001, 1.002, 1.002, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --seal-gap: 30px;
    --seal-beam-y: 30px;
}

/* The player stays visible behind the seal, dimmed and out of reach */
.music-layout {
    transition: filter .6s ease, opacity .6s ease;
}
#panel-music.is-locked .music-layout {
    filter: blur(5px) saturate(.5);
    opacity: .32;
    pointer-events: none;
    user-select: none;
}

.music-seal {
    position: fixed;
    z-index: 790;
    /* 52px = right edge of the menu's icon tiles */
    left: calc(52px + var(--seal-gap));
    top: calc(var(--seal-anchor, 290px) - var(--seal-beam-y));
    width: 372px;
}
.music-seal[hidden] { display: none; }

/* Projection cone: from a point at the Music icon, widening to the
   card's full height, like the menu's own hologram cones. */
.music-seal::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: var(--seal-gap);
    pointer-events: none;
    background: linear-gradient(90deg, #8ed7ff70, #4f8dff12);
    clip-path: polygon(
        0 calc(var(--seal-beam-y) - 4px),
        100% 0,
        100% 100%,
        0 calc(var(--seal-beam-y) + 4px)
    );
    opacity: .55;
    transform-origin: left var(--seal-beam-y);
    animation: seal-cone-in .3s ease-out both;
}
/* Bright core line of the projection */
.music-seal::after {
    content: "";
    position: absolute;
    top: var(--seal-beam-y);
    right: 100%;
    width: var(--seal-gap);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--cyan-bright), #8ed7ff33);
    box-shadow: 0 0 6px var(--aura-bright);
    transform-origin: left center;
    animation: seal-beam-in .22s ease-out both;
}

/* The card is a hologram too: translucent, scanlined, aura-edged */
.music-seal-card {
    position: relative;
    padding: 14px 16px 14px;
    border: 1px solid #8ed7ff47;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, #8ed7ff0a 0 1px, transparent 1px 3px),
        linear-gradient(var(--sigil-hue), #4f8dff1f, transparent 60%),
        linear-gradient(90deg, #16243fe8, #0c0b10ed 65%);
    box-shadow:
        0 0 18px #4f8dff2e,
        0 10px 30px #00000099,
        inset 0 0 22px #8ed7ff0f;
    transform-origin: left var(--seal-beam-y);
    animation: seal-card-in .55s .14s var(--ease-out-expo) backwards;
}
.music-seal-title {
    /* faint chromatic split, like an imperfect projection */
    text-shadow:
        -.5px 0 #ff5fa233,
        .5px 0 #5fe1ff55,
        0 0 8px var(--aura-blue-transparent-30pct, #4f8dff4d) !important;
}

.music-seal.is-closing::before { animation: seal-cone-out .25s .28s ease-in both; }
.music-seal.is-closing::after { animation: seal-beam-out .2s .3s ease-in both; }
.music-seal.is-closing .music-seal-card { animation: seal-card-out .36s cubic-bezier(.7, 0, .84, 0) both; }
.music-seal.is-shaking .music-seal-card { animation: seal-shake .4s ease; }

@keyframes seal-cone-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .55; } }
@keyframes seal-cone-out { from { transform: scaleX(1); opacity: .55; } to { transform: scaleX(0); opacity: 0; } }
@keyframes seal-beam-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes seal-beam-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes seal-card-in {
    0% { clip-path: inset(calc(var(--seal-beam-y) - 1px) 100% calc(100% - var(--seal-beam-y) - 1px) 0 round 6px); opacity: .6; }
    45% { clip-path: inset(calc(var(--seal-beam-y) - 1px) 0 calc(100% - var(--seal-beam-y) - 1px) 0 round 6px); opacity: 1; }
    100% { clip-path: inset(0 0 0 0 round 6px); opacity: 1; }
}
@keyframes seal-card-out {
    0% { clip-path: inset(0 0 0 0 round 6px); opacity: 1; }
    50% { clip-path: inset(calc(var(--seal-beam-y) - 1px) 0 calc(100% - var(--seal-beam-y) - 1px) 0 round 6px); opacity: 1; }
    100% { clip-path: inset(calc(var(--seal-beam-y) - 1px) 100% calc(100% - var(--seal-beam-y) - 1px) 0 round 6px); opacity: .4; }
}
@keyframes seal-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.music-seal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--borderd);
}
.music-seal-title {
    color: var(--cyan);
    font-size: .72rem;
    letter-spacing: 2.5px;
    white-space: pre;
    text-shadow: 0 0 8px var(--aura-blue-transparent-30pct, #4f8dff4d);
}
.music-seal-title::before {
    content: "◆ ";
    color: var(--lucario-gold);
}
.music-seal-note {
    margin-bottom: 12px;
    color: var(--cyan-soft);
    font-size: .62rem;
    letter-spacing: 2px;
    opacity: .75;
    white-space: pre;
}

.music-seal-row {
    display: grid;
    /* Same prompt column on every row ("user@sanctuary:~$" is 17 chars) */
    grid-template-columns: 17ch 1fr;
    font-size: .74rem;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.music-seal-prompt {
    color: var(--cyan);
    font-size: .74rem;
    text-align: right;
    white-space: pre;
}
.music-seal-row input {
    width: 100%;
    min-width: 0;
    padding: 4px 4px;
    border: none;
    border-bottom: 1px solid var(--borderd);
    background: transparent;
    color: var(--cyan-bright);
    font-size: .76rem;
    caret-color: var(--lucario-gold);
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}
.music-seal-row input:focus {
    border-bottom-color: var(--aura-bright);
    box-shadow: 0 1px 0 var(--aura-bright-transparent-14pct, #8ed7ff24);
}
.music-seal-row input::placeholder { color: var(--cyan-soft); opacity: .5; }
/* Masked without type="password", so password managers stay out of it */
.music-seal-row input.is-secret { -webkit-text-security: disc; }
.music-seal-row input.is-secret:placeholder-shown { -webkit-text-security: none; }

.music-seal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.music-seal-status {
    color: var(--cyan-soft);
    font-size: .64rem;
    letter-spacing: 1px;
    white-space: pre;
    opacity: .7;
}
.music-seal-status[data-tone="error"] { color: #ff5f5f; opacity: 1; text-shadow: 0 0 8px #ff444466; }
.music-seal-status[data-tone="success"] { color: var(--lucario-gold); opacity: 1; text-shadow: 0 0 8px var(--lucario-gold-soft); }

.music-seal-enter {
    padding: 5px 14px;
    border: 1px solid var(--border);
    background: var(--aura-electric-transparent-6pct);
    color: var(--cyan);
    font-size: .68rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.music-seal-enter:hover,
.music-seal-enter:focus-visible {
    border-color: var(--aura-bright);
    background: var(--aura-blue-transparent-15pct);
    color: var(--cyan-bright);
    box-shadow: 0 0 10px var(--aura-bright-transparent-14pct);
    outline: none;
}
.music-seal-enter:disabled { cursor: progress; opacity: .6; }

/* Tip button + panel */
.music-seal-tip-anchor { position: relative; }
.music-seal-tip-btn {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--borderd);
    background: transparent;
    color: var(--cyan-soft);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color .25s, border-color .25s, box-shadow .25s, transform .45s var(--ease-spring);
}
.music-seal-tip-btn:hover,
.music-seal-tip-btn:focus-visible {
    border-color: var(--aura-bright);
    color: var(--cyan-bright);
    box-shadow: 0 0 10px var(--aura-bright-transparent-14pct);
    transform: rotate(-10deg) scale(1.12);
    outline: none;
}
/* The tip window is projected from the "?" button, styled like the card */
.music-seal-tip-panel {
    --tip-gap: 30px;
    --tip-beam-y: 25px; /* the "?" button's centre, from the panel's top */
    position: absolute;
    top: -15px;
    left: calc(100% + var(--tip-gap));
    width: 300px;
    padding-bottom: 12px;
    border: 1px solid #8ed7ff47;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, #8ed7ff0a 0 1px, transparent 1px 3px),
        linear-gradient(var(--sigil-hue), #4f8dff1f, transparent 60%),
        linear-gradient(90deg, #16243fe8, #0c0b10ed 65%);
    box-shadow:
        0 0 18px #4f8dff2e,
        0 10px 30px #00000099,
        inset 0 0 22px #8ed7ff0f;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
/* Projection cone from the "?" button to the window */
.music-seal-tip-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 100%;
    width: var(--tip-gap);
    pointer-events: none;
    background: linear-gradient(90deg, #8ed7ff70, #4f8dff12);
    clip-path: polygon(
        0 calc(var(--tip-beam-y) - 3px),
        100% 0,
        100% 100%,
        0 calc(var(--tip-beam-y) + 3px)
    );
    opacity: .55;
}
/* Bright core line */
.music-seal-tip-panel::after {
    content: "";
    position: absolute;
    top: calc(var(--tip-beam-y) - 1px);
    right: 100%;
    width: var(--tip-gap);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--cyan-bright), #8ed7ff33);
    box-shadow: 0 0 6px var(--aura-bright);
}
.music-seal-tip-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: tip-materialize .5s var(--ease-out-expo) both;
}
/* Same build-up as the card: the beam reaches out, a line opens
   along it, then the window unfolds to full height. */
@keyframes tip-materialize {
    0% {
        clip-path: inset(calc(var(--tip-beam-y) - 2px) 100% calc(100% - var(--tip-beam-y) - 2px) calc(-1 * var(--tip-gap)));
    }
    45% {
        clip-path: inset(calc(var(--tip-beam-y) - 2px) -2px calc(100% - var(--tip-beam-y) - 2px) calc(-1 * var(--tip-gap)));
    }
    100% {
        clip-path: inset(-20px -20px -20px calc(-1 * var(--tip-gap)));
    }
}
.music-seal-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #8ed7ff2e;
    color: var(--cyan);
    font-size: .68rem;
    letter-spacing: 3px;
    text-shadow:
        -.5px 0 #ff5fa233,
        .5px 0 #5fe1ff55,
        0 0 8px #4f8dff4d;
}
.music-seal-tip-header > span::before {
    content: "◆ ";
    color: var(--lucario-gold);
    text-shadow: 0 0 7px var(--lucario-gold-soft);
}
.music-seal-tip-close {
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--cyan-soft);
    cursor: pointer;
}
.music-seal-tip-close:hover,
.music-seal-tip-close:focus-visible { color: var(--cyan-bright); outline: none; }
.music-seal-tip-text { padding: 0 12px; color: var(--cyan-bright); font-size: .72rem; line-height: 1.6; }
.music-seal-tip-counter {
    padding: 8px 12px 0;
    color: var(--cyan-soft);
    font-size: .6rem;
    letter-spacing: 2px;
    text-align: right;
}

/* Nav icon "boop": a springy nudge on hover */
.nav-icon svg { transition: transform .5s var(--ease-spring); }
.nav-item:hover .nav-icon svg { transform: rotate(-8deg) scale(1.12); transition-duration: .35s; }

/* Small padlock on the Music nav icon while sealed */
.nav-item.is-locked .nav-icon::before {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    background: var(--lucario-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 3px var(--lucario-gold-soft));
}

/* ══════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════
   STARFIELD + DECODE BOOT
   ══════════════════════════════════════ */
:root {
    /* How strongly the sky shows through: 0 = off, 1 = full */
    --starfield-opacity: .42;
}

.starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: var(--starfield-opacity);
}

/* Hidden only until the first decode has blanked the text */
.decode-boot #contentArea { opacity: 0; }

/* ══════════════════════════════════════
   MUSIC PLAYER REFRESH
   Same layout, sharper HUD details:
   corner brackets, status chip, themed
   sliders, springy controls.
   ══════════════════════════════════════ */

/* HUD corner brackets on the music panels */
/* (library + cover are already sticky, which also anchors the corners) */
.music-player,
.queue-panel { position: relative; }

.music-library::before,
.music-player::before,
.queue-panel::before,
.album-cover-panel::before {
    --corner: var(--aura-bright);
    --arm: 12px;
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: .55;
    background:
        linear-gradient(var(--corner) 0 0) top left / var(--arm) 1px,
        linear-gradient(var(--corner) 0 0) top left / 1px var(--arm),
        linear-gradient(var(--corner) 0 0) top right / var(--arm) 1px,
        linear-gradient(var(--corner) 0 0) top right / 1px var(--arm),
        linear-gradient(var(--corner) 0 0) bottom left / var(--arm) 1px,
        linear-gradient(var(--corner) 0 0) bottom left / 1px var(--arm),
        linear-gradient(var(--corner) 0 0) bottom right / var(--arm) 1px,
        linear-gradient(var(--corner) 0 0) bottom right / 1px var(--arm);
    background-repeat: no-repeat;
    transition: opacity .3s ease;
}
.music-player::before { --corner: var(--lucario-gold); opacity: .6; }
.music-library:hover::before,
.music-player:hover::before,
.queue-panel:hover::before,
.album-cover-panel:hover::before { opacity: .95; }

/* Section labels share the visualizer's ◆ marker */
.queue-heading h2::before,
.album-cover-heading strong::before {
    content: "◆ ";
    color: var(--lucario-gold);
    font-size: .8em;
    text-shadow: 0 0 7px var(--lucario-gold-soft);
}
.queue-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borderd);
}

/* ── Visualizer chrome ── */
.visualizer-canvas {
    border-radius: 4px;
    border-color: var(--aura-electric-transparent-13pct, var(--borderd));
}

.visualizer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--borderd);
    border-radius: 999px;
    background: #0c0b1099;
    color: var(--fur-soft);
}
.visualizer-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fur-soft);
    box-shadow: 0 0 0 2px #7b687422;
}
.visualizer-status[data-state="live"] { color: var(--lucario-gold); border-color: var(--lucario-gold-soft); }
.visualizer-status[data-state="live"]::before {
    background: var(--lucario-gold);
    box-shadow: 0 0 8px var(--lucario-gold);
    animation: status-pulse 1.4s ease-in-out infinite;
}
.visualizer-status[data-state="paused"],
.visualizer-status[data-state="ready"] { color: var(--cyan-soft); }
.visualizer-status[data-state="paused"]::before,
.visualizer-status[data-state="ready"]::before { background: var(--aura-blue); box-shadow: 0 0 6px var(--aura-blue); }
.visualizer-status[data-state="off"] { opacity: .6; }
@keyframes status-pulse { 50% { opacity: .35; } }

.visualizer-toggle {
    border-radius: 4px;
    transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .45s var(--ease-spring);
}
.visualizer-toggle:hover { transform: translateY(-1px); }
.visualizer-toggle:active { transform: translateY(0) scale(.97); }
#visualizerToggle[aria-pressed="true"] {
    border-color: var(--aura-bright-transparent-24pct, var(--border));
    box-shadow: inset 0 0 10px var(--aura-blue-transparent-12pct);
}
#musicRelock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#musicRelock::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#musicRelock:hover { color: var(--lucario-gold); border-color: var(--lucario-gold-soft); }

/* ── Now playing ── */
.now-playing-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--fur-soft);
    font-size: .6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#trackTitle {
    font-size: 1.2rem;
    letter-spacing: .5px;
    text-shadow: 0 0 12px var(--cyan-transparent-40pct);
}

/* ── Transport buttons ── */
.player-controls { gap: 12px; align-items: center; }
.player-controls button {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 42px;
    padding: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #4f9dff14, #4f9dff05);
    transition:
        color .2s,
        border-color .2s,
        background .2s,
        box-shadow .25s,
        transform .45s var(--ease-spring);
}
.player-controls svg { margin: 0; }
.player-controls button:hover {
    color: var(--cyan-bright);
    box-shadow: 0 0 14px var(--aura-blue-transparent-20pct);
    transform: translateY(-2px);
}
.player-controls button:active { transform: translateY(0) scale(.95); transition-duration: .1s; }

#playPause {
    width: 58px;
    height: 50px;
    border-color: var(--lucario-gold-soft);
    color: var(--lucario-gold);
    background: radial-gradient(circle at 50% 120%, #f0c75e22, transparent 70%), #0c0b10;
}
#playPause:hover { border-color: var(--lucario-gold); box-shadow: 0 0 16px var(--lucario-gold-soft); }
#playPause::after {
    /* breathing ring while music plays (opacity only = cheap) */
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid var(--lucario-gold-soft);
    border-radius: 9px;
    opacity: 0;
    pointer-events: none;
}
.music-player.is-playing #playPause::after { animation: play-breathe 2.4s ease-in-out infinite; }
@keyframes play-breathe {
    0%, 100% { opacity: 0; transform: scale(.96); }
    50% { opacity: .9; transform: scale(1); }
}

/* ── Time + volume ── */
.progress-row,
.volume-row { font-variant-numeric: tabular-nums; }
.progress-row span { min-width: 4.5ch; }
.progress-row span:last-child { text-align: right; }
.volume-row label { min-width: 4.5ch; letter-spacing: 1px; }

/* ── Themed range sliders ── */
.progress-row input[type="range"],
.volume-row input[type="range"] {
    --fill: 0%;
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.progress-row input[type="range"]::-webkit-slider-runnable-track,
.volume-row input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, var(--aura-blue), var(--aura-bright)) 0 0 / var(--fill) 100% no-repeat,
        #4f9dff1f;
    box-shadow: inset 0 0 0 1px var(--borderd);
}
.progress-row input[type="range"]::-webkit-slider-thumb,
.volume-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: none;
    border-radius: 50%;
    background: var(--lucario-gold);
    box-shadow: 0 0 0 3px #f0c75e26, 0 0 10px var(--lucario-gold-soft);
    transition: transform .4s var(--ease-spring);
}
.progress-row input[type="range"]:hover::-webkit-slider-thumb,
.volume-row input[type="range"]:hover::-webkit-slider-thumb,
.progress-row input[type="range"]:focus-visible::-webkit-slider-thumb,
.volume-row input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.3); }

.progress-row input[type="range"]::-moz-range-track,
.volume-row input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #4f9dff1f;
    box-shadow: inset 0 0 0 1px var(--borderd);
}
.progress-row input[type="range"]::-moz-range-progress,
.volume-row input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--aura-blue), var(--aura-bright));
}
.progress-row input[type="range"]::-moz-range-thumb,
.volume-row input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: var(--lucario-gold);
    box-shadow: 0 0 0 3px #f0c75e26, 0 0 10px var(--lucario-gold-soft);
    transition: transform .4s var(--ease-spring);
}
.progress-row input[type="range"]:hover::-moz-range-thumb,
.volume-row input[type="range"]:hover::-moz-range-thumb { transform: scale(1.3); }

/* ── Small buttons around the player ── */
.clear-queue,
.sort-toggle,
.queue-button,
.queue-remove,
.library-pagination button {
    border-radius: 4px;
    transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .45s var(--ease-spring);
}
.clear-queue:hover,
.sort-toggle:hover,
.queue-button:hover,
.library-pagination button:hover:not(:disabled) {
    box-shadow: 0 0 10px var(--aura-blue-transparent-12pct);
    transform: translateY(-1px);
}
.queue-remove:hover { transform: translateY(-1px); }

.queue-item {
    padding-inline: 6px;
    border-radius: 4px;
    transition: background .2s;
}
.queue-item:hover { background: #4f9dff0d; }

/* Reduced motion: the global rule stops the loops; keep things still */

/* ══════════════════════════════════════
   ENTRY SONG BUTTON
   ══════════════════════════════════════ */
.journal-song {
    position: relative;
    isolation: isolate; /* keeps the hint glow (z-index -1) inside the button */
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--borderd);
    border-radius: 50%;
    background: #0c0b10;
    color: var(--cyan-soft);
    cursor: pointer;
    transition: color .2s, border-color .2s, box-shadow .25s, transform .45s var(--ease-spring);
}
.journal-song[hidden] { display: none; }
.journal-song svg { display: block; }
.journal-song:hover,
.journal-song:focus-visible {
    color: var(--cyan-bright);
    border-color: var(--border);
    box-shadow: 0 0 10px var(--aura-blue-transparent-20pct);
    outline: none;
    transform: scale(1.1);
}
/* Selected but paused: gold outline only */
.journal-song.is-active { color: var(--lucario-gold); border-color: var(--lucario-gold-soft); }
/* Playing: gold, glowing, with an orbiting arc around it */
.journal-song.is-playing {
    color: var(--lucario-gold);
    border-color: var(--lucario-gold);
    box-shadow: 0 0 10px var(--lucario-gold-soft);
}
.journal-song::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--lucario-gold);
    border-right-color: var(--lucario-gold-soft);
    opacity: 0;
    pointer-events: none;
}
.journal-song.is-playing::after {
    opacity: 1;
    animation: song-orbit 1.6s linear infinite;
}
@keyframes song-orbit { to { transform: rotate(1turn); } }

/* Hint on an unfolded entry: a slow blue pulse under the button while
   it's off, so it reads as "press me", not as a decorative icon.
   Only opacity/transform animate, so it stays cheap. */
.journal-song::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aura-blue-transparent-50pct) 0%, transparent 70%);
    box-shadow: 0 0 12px var(--aura-blue-transparent-30pct);
    opacity: 0;
    pointer-events: none;
}
.journal-entry.is-open .journal-song:not(.is-playing)::before {
    animation: song-hint 9s ease-in-out infinite;
}
.journal-entry.is-open .journal-song:not(.is-playing) {
    border-color: var(--aura-electric-transparent-27pct, var(--border));
}
@keyframes song-hint {
    0%, 100% { opacity: .1; transform: scale(.95); }
    50% { opacity: .6; transform: scale(1.15); }
}

/* ══════════════════════════════════════
   SPRINGS ONLY ON THE WAY BACK
   Hover / press move quickly and settle
   once; the springy overshoot plays only
   when the pointer leaves.
   ══════════════════════════════════════ */
.journal-entry:not(.is-open):hover,
.journal-entry:not(.is-open):focus-within,
.journal-entry:hover .journal-entry-more::after,
.journal-index a:hover,
.journal-index a:focus-visible,
.music-seal-tip-btn:hover,
.music-seal-tip-btn:focus-visible,
.nav-item:hover .nav-icon svg,
.visualizer-toggle:hover,
.player-controls button:hover,
.clear-queue:hover,
.sort-toggle:hover,
.queue-button:hover,
.queue-remove:hover,
.library-pagination button:hover:not(:disabled),
.journal-song:hover,
.journal-song:focus-visible {
    transition-timing-function: cubic-bezier(.2, .7, .3, 1);
    transition-duration: .18s;
}
/* (WebKit and Firefox selectors must be separate rules) */
.progress-row input[type="range"]:hover::-webkit-slider-thumb,
.volume-row input[type="range"]:hover::-webkit-slider-thumb {
    transition-timing-function: cubic-bezier(.2, .7, .3, 1);
    transition-duration: .18s;
}
.progress-row input[type="range"]:hover::-moz-range-thumb,
.volume-row input[type="range"]:hover::-moz-range-thumb {
    transition-timing-function: cubic-bezier(.2, .7, .3, 1);
    transition-duration: .18s;
}
.visualizer-toggle:active,
.player-controls button:active,
.journal-song:active {
    transition-duration: .06s;
    transition-timing-function: ease-out;
}

/* ══════════════════════════════════════
   SIDE MENU: HOLOGRAM PROJECTION
   No panel behind the icons. A thin aura
   emitter runs down the left edge and
   projects each icon as a hologram. The
   name of the hovered icon (or long-
   pressed, on touch) materialises beside it.
   ══════════════════════════════════════ */
.side-menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 800;
    width: 64px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: 0;
    overflow: visible;
}

/* The emitter: a light rail that is strongest by the icons and frays
   out further down. (Static: no travelling light.) */
.side-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0,
            var(--aura-bright) 6%,
            var(--aura-blue) 38%,
            #4f8dff55 52%,
            transparent 78%);
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 26px, #0008 26px 30px, #000 30px 44px, transparent 44px 47px);
    mask: repeating-linear-gradient(180deg, #000 0 26px, #0008 26px 30px, #000 30px 44px, transparent 44px 47px);
    box-shadow: 0 0 8px #4f8dff66, 0 0 18px #4f8dff22;
    opacity: .85;
}

/* Brand */
.nav-brand {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 18px 0 0 12px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid #8ed7ff33;
    border-radius: 6px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    box-shadow: 0 0 12px #4f8dff26;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.nav-brand:hover,
.nav-brand:focus-visible {
    border-color: var(--aura-bright);
    box-shadow: 0 0 18px var(--aura-blue-transparent-30pct);
    outline: none;
}
.nav-brand img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-divider {
    width: 30px;
    height: 1px;
    margin: 16px 0 10px 17px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent, #8ed7ff55, transparent);
}

/* Items: only as wide as the icon column, so hover is per icon */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 64px;
    padding: 9px 0 9px 12px;
    flex-shrink: 0;
    color: var(--cyan-soft);
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-touch-callout: none; /* long-press shows the name instead */
    user-select: none;
    transition: color .3s ease;
}
/* Projection cone from the rail to the icon */
.nav-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 40px;
    transform: translateY(-50%);
    pointer-events: none;
    background: linear-gradient(90deg, #8ed7ffaa, #4f8dff22);
    clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
    opacity: .28;
    transition: opacity .35s ease;
}
.nav-item:is(:hover, :focus-visible, .show-label)::before { opacity: .7; }
.nav-item.active::before {
    background: linear-gradient(90deg, var(--lucario-gold), #4f8dff33);
    opacity: .7;
}
/* Active marker on the rail */
.nav-item.active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    width: 3px;
    height: 26px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--lucario-gold);
    box-shadow: 0 0 10px var(--lucario-gold), 0 0 18px var(--lucario-gold-soft);
}
.nav-item:is(:hover, :focus-visible, .show-label) { color: var(--aura-bright); outline: none; }
.nav-item.active {
    color: var(--cyan-bright);
    text-shadow: 0 0 8px var(--cyan-transparent-55pct), 0 0 14px var(--aura-blue-transparent-30pct);
}

/* The icon: a translucent, scanlined hologram tile, angled slightly
   away from the emitter; it turns to face you when it's in use. */
.nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid #8ed7ff2e;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, #8ed7ff0f 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #4f8dff24, #4f8dff08);
    box-shadow: 0 0 10px #4f8dff1f, inset 0 0 10px #8ed7ff12;
    transform: perspective(220px) rotateY(16deg);
    transform-origin: left center;
    transition:
        transform .45s var(--ease-out-expo),
        border-color .35s ease,
        box-shadow .35s ease;
}
.nav-icon svg {
    filter: drop-shadow(0 0 2px #8ed7ff55);
    transition: filter .35s ease;
}
/* Glow up on hover (no flicker, no scan) */
.nav-item:is(:hover, :focus-visible, .show-label) .nav-icon {
    transform: perspective(220px) rotateY(0deg);
    border-color: #8ed7ff80;
    box-shadow: 0 0 18px #4f8dff59, inset 0 0 14px #8ed7ff26;
}
.nav-item:is(:hover, :focus-visible, .show-label) .nav-icon svg {
    filter: drop-shadow(0 0 5px #8ed7ffcc);
}
.nav-item.active .nav-icon {
    transform: perspective(220px) rotateY(0deg);
    border-color: #f0c75e66;
    background:
        repeating-linear-gradient(0deg, #8ed7ff14 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #f0c75e1f, #4f8dff12);
    box-shadow: 0 0 12px #4f8dff33, inset 0 0 12px #f0c75e14;
}

/* Labels: the hovered icon's name materialises as a holo chip:
   first a thin line along the beam, then it opens to full height. */
.nav-label {
    position: relative;
    padding: 4px 10px;
    border: 1px solid #8ed7ff4d;
    border-radius: 4px;
    background:
        repeating-linear-gradient(0deg, #8ed7ff0d 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #16243ff2, #0c0b10f2 70%);
    box-shadow: 0 0 14px #4f8dff33, 0 4px 14px #00000080;
    color: var(--cyan-bright);
    text-shadow: -.5px 0 #ff5fa233, .5px 0 #5fe1ff55, 0 0 8px #8ed7ff55;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.nav-label::before {
    /* beam from the icon to the chip */
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 12px;
    height: 1px;
    background: linear-gradient(90deg, #8ed7ff00, #8ed7ffcc);
    box-shadow: 0 0 4px #8ed7ff88;
}
.nav-item.active .nav-label { border-color: #f0c75e66; }

@media (hover: hover) {
    .nav-item:is(:hover, :focus-visible) .nav-label {
        visibility: visible;
        opacity: 1;
        animation: holo-materialize .38s var(--ease-out-expo) both;
    }
}
.nav-item.show-label .nav-label {
    visibility: visible;
    opacity: 1;
    animation: holo-materialize .38s var(--ease-out-expo) both;
}
@keyframes holo-materialize {
    0% { opacity: 0; clip-path: inset(46% 100% 46% -14px); }
    45% { opacity: 1; clip-path: inset(46% 0 46% -14px); }
    100% { opacity: 1; clip-path: inset(-3px -3px -3px -14px); }
}

/* While the seal is open, it already names the Music tab */
body:has(#musicSeal:not([hidden])) .nav-item[data-tab="music"] .nav-label { display: none; }

/* ══════════════════════════════════════
   HOME CONTACT
   ══════════════════════════════════════ */
.home-contact {
    margin-bottom: 22px;
    font-size: .78rem;
}
.home-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 6px;
}
.home-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lucario-gold);
    text-decoration: none;
    transition: color .2s, text-shadow .2s;
}
.home-contact-links a:hover,
.home-contact-links a:focus-visible {
    color: var(--cyan-bright);
    text-shadow: 0 0 8px var(--aura-bright);
    outline: none;
}
.home-contact-mail { color: var(--cyan-soft); }
.home-contact-mail-label { opacity: .7; }
.home-contact-mail-address {
    color: var(--cyan-bright);
    letter-spacing: .5px;
    user-select: all; /* one click selects the whole address for copying */
    cursor: text;
}

/* ══════════════════════════════════════
   HOME: BROWSER SUPPORT CHIPS
   Quiet by default: tiny bracketed
   labels with a status dot. The
   explanation decodes in underneath
   on hover / focus / tap.
   ══════════════════════════════════════ */
.home-support { margin-bottom: 18px; }

.home-support-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.home-support-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 6px 1px 5px;
    border: 1px solid #8ed7ff1f;
    border-radius: 3px;
    background: transparent;
    color: var(--cyan-soft);
    font: inherit;
    font-size: .64rem;
    letter-spacing: 1px;
    cursor: help;
    opacity: .8;
    transition: color .2s, border-color .2s, background .2s, opacity .2s, box-shadow .25s;
}
.home-support-chip:hover,
.home-support-chip:focus-visible,
.home-support-chip.is-current {
    opacity: 1;
    border-color: #8ed7ff59;
    background: #4f8dff12;
    box-shadow: 0 0 10px #4f8dff26;
    outline: none;
}

.home-support-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--fur-soft);
}
.home-support-chip[data-state="yes"] .home-support-dot {
    background: var(--aura-bright);
    box-shadow: 0 0 5px var(--aura-bright);
}
.home-support-chip[data-state="partial"] .home-support-dot {
    background: var(--lucario-gold);
    box-shadow: 0 0 5px var(--lucario-gold-soft);
}
.home-support-chip[data-state="no"] { color: var(--fur-soft); }
.home-support-chip[data-state="no"] .home-support-name {
    text-decoration: line-through;
    text-decoration-color: #7b687499;
}
.home-support-chip[data-state="no"] .home-support-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--fur-soft);
}
.home-support-chip[data-state="checking"] .home-support-dot {
    animation: support-checking 1s ease-in-out infinite;
}
@keyframes support-checking { 50% { opacity: .25; } }

/* The explanation line: collapsed until needed, then slides open */
.home-support-info {
    display: grid;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    padding-left: 8px;
    border-left: 1px solid #8ed7ff33;
    color: var(--cyan-soft);
    font-size: .68rem;
    line-height: 1.6;
    opacity: 0;
    transition: max-height .3s var(--ease-out-expo), margin-top .3s var(--ease-out-expo), opacity .2s ease;
}
.home-support-info.is-visible {
    max-height: 10em;
    margin-top: 8px;
    opacity: .9;
}
.home-support-info[data-state="yes"] { border-left-color: #8ed7ff66; }
.home-support-info[data-state="partial"] { border-left-color: var(--lucario-gold-soft); }
.home-support-info[data-state="no"] { border-left-color: #7b687499; }