:root {
            --p5-pink: #ff71ce;
            --p5-cyan: #01cdfe;
            --p5-yellow: #fffb96;
            --p5-purple: #b967ff;
            --p5-bg: #0e0320;
        }

        body {
            background-color: var(--p5-bg);
            color: #ffffff;
            overflow: hidden;
            font-family: 'Space Grotesk', sans-serif;
            user-select: none;
            cursor: default;
        }

        /* Scanlines Overlay */
        .vhs-scanlines {
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%, 
                rgba(0, 0, 0, 0.35) 50%
            ), linear-gradient(
                90deg,
                rgba(255, 113, 206, 0.03),
                rgba(5, 255, 161, 0.01),
                rgba(1, 205, 254, 0.03)
            );
            background-size: 100% 4px, 6px 100%;
            pointer-events: none;
        }

        /* Three WebGL Layer */
        #webgl-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* Dynamic Halftone Dot Pattern */
        .p5-halftone {
            background-image: radial-gradient(#ff71ce 20%, transparent 20%), radial-gradient(#01cdfe 20%, transparent 20%);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
            opacity: 0.15;
        }

        /* Extreme Asymmetrical Skews & Clip Paths */
        .skew-p5-left { transform: skewX(-14deg) rotate(-1deg); }
        .skew-p5-right { transform: skewX(16deg) rotate(2deg); }
        .unskew { transform: skewX(14deg) rotate(1deg); }

        .clip-p5-banner {
            clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 92%);
        }

        .clip-p5-card {
            clip-path: polygon(0 0, 100% 4%, 93% 98%, 3% 100%);
        }

        .clip-p5-slash {
            clip-path: polygon(12% 0, 100% 0, 88% 100%, 0% 100%);
        }

        .clip-p5-star {
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

        /* Persona 5 Cutout Letter Styling */
        .p5-letter {
            display: inline-block;
            padding: 0.08em 0.22em;
            margin: 0 0.04em;
            line-height: 1.1;
            font-weight: 900;
            text-transform: uppercase;
            box-shadow: 4px 4px 0px #000;
            transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        html:not([data-motion-paused="true"]) .p5-letter:hover {
            transform: scale(1.25) rotate(8deg) translateY(-4px) !important;
            z-index: 50;
            box-shadow: 6px 6px 0px #ff71ce;
        }

        /* Letter Style Variants for Ransom Cutout Engine */
        .var-style-0 { font-family: 'Press Start 2P'; background: #000; color: #fffb96; transform: rotate(-5deg) scale(0.9); border: 2px solid #ff71ce; }
        .var-style-1 { font-family: 'Space Grotesk'; background: #ff71ce; color: #000; transform: rotate(4deg) scale(1.1); }
        .var-style-2 { font-family: 'Cinzel'; background: #01cdfe; color: #000; transform: rotate(-3deg); border-bottom: 4px solid #000; }
        .var-style-3 { font-family: 'VT323'; background: #000; color: #05ffa1; transform: rotate(6deg) scale(1.15); border: 1px dashed #05ffa1; }
        .var-style-4 { font-family: 'Special Elite'; background: #fffb96; color: #000; transform: rotate(-6deg); }
        .var-style-5 { font-family: 'Monoton'; background: #b967ff; color: #fff; transform: rotate(3deg) scale(1.05); }
        .var-style-6 { font-family: 'Fredoka'; background: #000; color: #ff71ce; transform: rotate(-4deg); outline: 2px solid #01cdfe; }
        .var-style-7 { font-family: 'Rubik Glitch'; background: #05ffa1; color: #000; transform: rotate(5deg); }

        /* Menu Button Hover Dynamics */
        .p5-menu-item {
            position: relative;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }

        .p5-menu-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.2);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.2s ease;
        }

        .p5-menu-item:hover::after {
            transform: scaleX(1);
        }

        .p5-menu-item:hover {
            transform: skewX(-16deg) translateX(24px) scale(1.05);
            z-index: 40;
        }

        .p5-menu-item.active-menu {
            transform: skewX(-16deg) translateX(30px) scale(1.08);
            z-index: 40;
            box-shadow: 10px 10px 0px #ff71ce;
        }

        /* Diagonal Slash Overlay for Panel Switches */
        #slashTransition {
            position: fixed;
            inset: 0;
            z-index: 100;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
        }

        .slash-stripe {
            height: 20vh;
            width: 140%;
            margin-left: -20%;
            transform: skewY(-8deg) translateX(-110%);
            transition: transform 0.22s cubic-bezier(0.77, 0, 0.175, 1);
        }

        /* Floating Animation */
        .floating-p5 {
            animation: floatP5 4s ease-in-out infinite alternate;
        }

        @keyframes floatP5 {
            0% { transform: translateY(0px) rotate(-2deg); }
            100% { transform: translateY(-16px) rotate(3deg); }
        }

        /* Pulse Glitch Effect */
        .glitch-bar {
            animation: barGlitch 2s infinite alternate;
        }

        @keyframes barGlitch {
            0% { clip-path: inset(0 0 0 0); }
            5% { clip-path: inset(20% 0 50% 0); }
            10% { clip-path: inset(0 0 0 0); }
            95% { clip-path: inset(60% 0 10% 0); }
            100% { clip-path: inset(0 0 0 0); }
        }

        /* Custom Scrollbar for Ransom Generator */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0e0320; }
        ::-webkit-scrollbar-thumb { background: #ff71ce; border-radius: 3px; }
    /* Usability pass: keep the cutout shapes, give content room to breathe. */
html { overflow-x:clip; }
body.matrix-page { overflow:visible; min-height:100svh; font-weight:500; user-select:text; }
#webgl-bg { position:fixed; }
.site-header { flex-wrap:wrap; gap:24px; align-items:center; padding:24px 32px; }
.header-controls button, .synth-key, #beatToggleBtn, #clearStickerCanvas { min-height:44px; min-width:44px; }
.header-controls { flex-wrap:wrap; }
.matrix-page main { padding:12px 36px 68px; gap:72px; align-items:center; }
.matrix-page main > section { min-width:0; }
.p5-menu-item { text-align:left; width:100%; }
.p5-menu-item::after { pointer-events:none; }
.p5-menu-item .p5-ransom-inline { font-size:20px; white-space:nowrap; }
#panelRansomTitle { font-size:clamp(13px,1.4vw,18px); line-height:1.9; }
#mainDisplayPanel > div:first-child + div { flex-wrap:wrap; gap:6px; padding-right:12%; }
#mainDisplayPanel { scroll-margin-top:20px; padding-bottom:108px; }
#panelContentArea { min-height:300px; }
#panelContentArea h2 { font-size:clamp(22px,2.2vw,30px); line-height:1.2; letter-spacing:.025em; }
#panelContentArea .text-xs { font-size:13px; line-height:1.5; }
#panelContentArea .font-p5Pixel { font-size:16px; }
.mascot-badge { position:absolute; bottom:-40px; right:-12px; margin:0; }
.matrix-page footer { margin-top:auto; }
.audio-status { text-align:center; color:#01cdfe; font:14px 'VT323',monospace; margin-top:12px; }
#beatToggleBtn { min-width:196px; padding-left:28px; padding-right:28px; font-size:13px; }
body:not([data-audio-playing=true]) #footerVinyl,
body:not([data-audio-playing=true]) #panelContentArea .animate-spin { animation-play-state:paused; }
.slash-stripe { height:20%; flex:1; }
.skip-link { position:fixed; top:8px; left:16px; padding:12px 20px; background:#fffb96; color:#120024; z-index:100; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
#interactiveStickerCanvas { display:flex; width:100%; text-align:center; padding:24px; touch-action:manipulation; }
#interactiveStickerCanvas .stamp { position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
#customRansomInput { font-size:16px; min-height:48px; }
#customRansomOutput { overflow-wrap:anywhere; line-height:2.3; max-width:100%; }
.system-row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.system-row button { min-height:44px; border:1px solid #b967ff; padding:8px 12px; color:#fffb96; }
@media (max-width:1023px) {
 .matrix-page main { max-width:720px; padding:20px 36px 72px; gap:40px; }
 .p5-menu-item .p5-ransom-inline { font-size:clamp(14px,3vw,20px); }
 #mainDisplayPanel { box-shadow:8px 8px 0 #01cdfe; }
 #panelRansomTitle { font-size:14px; }
 .p5-menu-item.active-menu { transform:skewX(-14deg) rotate(-1deg) translateX(8px) scale(1.02); }
}
@media (max-width:600px) {
 .site-header { padding:22px 22px 10px; gap:20px; }
 .calendar-badge { max-width:100%; }
 .calendar-badge .p5-ransom-inline { font-size:11px; }
 .calendar-badge .font-p5jp { font-size:9px; }
 .header-controls { width:100%; justify-content:flex-end; }
 .matrix-page main { padding:20px 26px 72px; gap:36px; }
 .matrix-page main > section:first-child { padding-left:6px; padding-right:6px; }
 .p5-menu-item:hover { transform:skewX(-14deg) rotate(-1deg); }
 .p5-menu-item .p5-ransom-inline { font-size:14px; }
 .p5-menu-item .px-4 { padding-left:10px; padding-right:10px; }
 .p5-menu-item .fa-solid { font-size:16px; }
 #panelContentArea .grid-cols-2 { grid-template-columns:1fr; }
 #panelContentArea { min-height:280px; }
 #panelContentArea > div > .flex { gap:12px; flex-wrap:wrap; }
 #panelRansomTitle { font-size:11px; }
 .mascot-badge { right:-4px; }
 .matrix-page footer .p5-ransom-inline { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.mascot-badge .p5-ransom-inline { font-size:11px; white-space:nowrap; }
.mascot-badge .font-p5Pixel { font-family:'VT323',monospace; font-size:11px; gap:8px; }
@media (max-width:359px) {
 .calendar-badge .p5-ransom-inline { font-size:9px; white-space:nowrap; }
 .calendar-badge .p5-ransom-inline + span { font-size:10px; }
}