@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
            --bg: #0B0E11;
            --fg: #0B0E11;
            --yellow: #FCD535;
            --surface: #F5F5F5;
            --surface-dark: #181A20;
            --radius: 32px;
            --border: 1px solid rgba(11,14,17,0.08);
            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--bg);
            color: var(--fg);
            font-family: var(--font-main);
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            padding: 40px 20px;
        }

        
        .poster-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 1200px;
            width: 100%;
        }

        .poster-card {
            background: var(--surface);
            border-radius: var(--radius);
            min-height: 850px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 40px;
            position: relative;
            overflow: hidden;
            border: var(--border);
        }

        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            z-index: 10;
        }

        .brand {
            font-weight: 800;
            font-size: 14px;
            letter-spacing: -0.02em;
            text-transform: uppercase;
        }

        .menu-pill {
            background: #E6E8EA;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .menu-pill:hover {
            background: #D5D8DC;
        }

        
        .content {
            z-index: 10;
            margin-top: 40px;
        }

        .hero-text {
            font-size: 48px;
            line-height: 1.05;
            font-weight: 700;
            letter-spacing: -0.04em;
            max-width: 85%;
            margin-bottom: 40px;
        }

        
        .visual-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }

        
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 40px;
            z-index: 10;
        }

        .caption {
            font-size: 13px;
            line-height: 1.5;
            max-width: 280px;
            color: rgba(11,14,17,0.72);
        }

        .meta-cluster {
            text-align: right;
        }

        .label {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(11,14,17,0.48);
            margin-bottom: 4px;
        }

        .value {
            font-size: 13px;
            font-weight: 600;
        }

        
        .pixel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-template-rows: repeat(20, 1fr);
            z-index: 5;
            pointer-events: none;
        }

        .pixel {
            border: 0.5px solid rgba(252,213,53,0.06);
        }

        .light-text {
            color: white;
        }

    @media (max-width: 900px) {
        .poster-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Fee Frog content uses the reference poster components; the existing
       reaction-diffusion canvas is the only retained background layer. */
    #snake-background {
        position: fixed;
        top: -48px;
        left: -48px;
        z-index: 0;
        width: calc(100vw + 96px);
        height: calc(100vh + 96px);
        border-radius: 0;
        pointer-events: none;
        image-rendering: pixelated;
    }
    .poster-grid {
        position: relative;
        z-index: 1;
    }
    .story-card {
        grid-column: 1 / -1;
        min-height: 0;
        justify-content: center;
    }
    .story-content {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: clamp(40px, 5vw, 80px);
        margin-top: 0;
    }
    .story-card .hero-text { max-width: 100%; margin-bottom: 0; font-size: clamp(36px, 3.5vw, 48px); }
    .frog-word { position: relative; display: inline-block; white-space: nowrap; }
    .frog-underline { position: absolute; left: 0; bottom: calc(-.18em + 5px); width: 100%; height: .25em; pointer-events: none; overflow: visible; }
    .story-narrative { max-width: 650px; font-size: 15px; line-height: 1.55; }
    .story-narrative p + p { margin-top: 18px; }
    .story-narrative strong { font-weight: 700; }
    .watch-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding-bottom: 5px; border-bottom: 2px solid var(--yellow); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .2s ease, gap .2s ease; }
    .watch-link:hover { border-color: #D99B00; gap: 15px; }
    .story-card .caption { max-width: 520px; }
    #card1 { background: var(--yellow); }
    .poster-card-dark { background: var(--surface-dark); color: #F5F5F5; border-color: #2B3139; }
    .poster-card-dark .menu-pill { background: rgba(252,213,53,0.12); color: var(--yellow); }
    .poster-card-dark .menu-pill:hover { background: rgba(252,213,53,0.2); }
    .poster-card-dark .caption { color: rgba(255,255,255,0.6); }
    .poster-card-dark .label { color: rgba(255,255,255,0.4); }
    .poster-card-dark .hero-text { font-size: 56px; color: #F5F5F5; }
    .pixel-visual { height: 300px; margin-bottom: 20px; }
    #card1, #card2 { min-height: 0; }
    #card1 .caption { color: rgba(11,14,17,0.68); }
    #card1 .label, #card1 .decision-side, #card1 .decision-status { color: rgba(11,14,17,0.76); }
    #card1 .visual-container, #card2 .visual-container {
        flex-grow: 0;
        flex-shrink: 0;
        height: 180px;
    }
    .decision-footer { display: block; }
    .record-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
    .decision-list, .post-list { width: 100%; }
    .decision-list { margin-top: 24px; }
    .post-list { margin-top: 8px; }
    .empty-state, .decision-row, .post-row { border-top: 1px solid rgba(11,14,17,0.2); padding: 16px 0; }
    .poster-card-dark .empty-state, .poster-card-dark .post-row { border-color: rgba(255,255,255,0.2); }
    .empty-state strong { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; }
    .empty-state p { margin-top: 6px; font-size: 13px; line-height: 1.5; opacity: .6; }
    .decision-side, .decision-status, .post-date { font-size: 10px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; opacity: .45; }
    .decision-side { display: flex; flex-wrap: wrap; gap: 12px; }
    .decision-side strong { font-weight: 600; }
    .decision-main h3 { margin: 10px 0 4px; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; }
    .decision-main p { font-size: 13px; line-height: 1.5; }
    .decision-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
    .decision-links a, .post-link { font-size: 12px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }
    .decision-links a[href], a.post-link[href] { cursor: pointer; transition: opacity .2s ease; }
    .decision-links a[href]:hover, a.post-link[href]:hover { opacity: .65; }
    .poster-card-dark .post-link { color: var(--yellow); }
    .demo-link { font-size: 12px; line-height: 1.4; text-decoration: underline dotted; text-underline-offset: 3px; opacity: .55; cursor: default; }
    .post-body { margin-top: 7px; font-size: 16px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
    .post-link { display: inline-block; margin-top: 10px; }
    a { color: inherit; }
    a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
    @media (max-width: 900px) {
        .story-card { grid-column: auto; }
        .story-content { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 600px) {
        body { padding: 16px 12px; }
        .poster-grid { gap: 16px; }
        .poster-card { min-height: 720px; padding: 26px; border-radius: 24px; }
        .story-card { min-height: 0; }
        .story-content { margin-top: 0; }
        .story-narrative { font-size: 14px; }
        .story-card .footer { display: block; }
        .story-card .meta-cluster { text-align: left; margin-top: 20px; }
        .hero-text, .poster-card-dark .hero-text { font-size: clamp(34px, 10vw, 48px); }
        .record-header { align-items: flex-start; }
        #card1 .visual-container, #card2 .visual-container { height: 140px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .menu-pill { transition: none; }
    }