:root {
    --bg:#030704;
    --panel:rgba(3, 12, 8, .72);
    --panel2:rgba(8, 24, 14, .58);
    --green:#a7ff5c;
    --green2:#62ff9d;
    --cyan:#7fffe9;
    --gold:#d9c36a;
    --text:#f3ffe8;
    --muted:#b6c9a7;
    --line:rgba(167, 255, 92, .32);
    --lime:#9bef7f;
    --soft:#d8e1de;
    --max:1180px;}

* {
    box-sizing:border-box}

 body {
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:radial-gradient(circle at 20% 20%, rgba(74, 255, 128, .11), transparent 32%), radial-gradient(circle at 80% 10%, rgba(127, 255, 233, .10), transparent 32%), linear-gradient(180deg, #020302, #06110a 55%, #010201);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x:hidden}

body:before {
    content:"";
    position:fixed;
    inset:0;
    background-image:linear-gradient(rgba(167, 255, 92, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 255, 92, .035) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at center, black 0%, transparent 80%);
    pointer-events:none}

.hero {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:48px 24px;
    position:relative}

.hero-card {
    width:min(1180px, 94vw);
    border:1px solid var(--line);
    background:linear-gradient(135deg, rgba(6, 16, 10, .8), rgba(2, 4, 3, .92));
    box-shadow:0 0 80px rgba(92, 255, 130, .12), inset 0 0 70px rgba(167, 255, 92, .04);
    border-radius:28px;
    padding:clamp(28px, 5vw, 72px);
    position:relative;
    overflow:hidden}

.hero-card:after {
    content:"";
    position:absolute;
    inset:-30%;
    background:radial-gradient(circle, rgba(167, 255, 92, .12), transparent 42%);
    animation:drift 12s linear infinite;
    pointer-events:none}

@keyframes drift {
    from {
    transform:translateX(-12%) rotate(0)}

to {
    transform:translateX(12%) rotate(360deg)}

}

.eyebrow {
    color:var(--green2);
    letter-spacing:.34em;
    text-transform:uppercase;
    font-size:.78rem;
    margin-bottom:18px}

h1 {
    font-size:clamp(3rem, 8vw, 8.2rem);
    line-height:.84;
    margin:0 0 24px;
    letter-spacing:-.075em;
    text-transform:uppercase}

h1 span {
    display:block;
    color:var(--green);
    text-shadow:0 0 32px rgba(167, 255, 92, .24)}

.hero p {
    max-width:820px;
    color:var(--muted);
    font-size:clamp(1.05rem, 2vw, 1.35rem);
    line-height:1.65;
    margin:0 0 34px}

.cta-row {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    position:relative;
    z-index:2}

button, .btn {
    border:1px solid var(--line);
    background:rgba(167, 255, 92, .10);
    color:var(--text);
    padding:13px 18px;
    border-radius:999px;
    cursor:pointer;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-decoration:none}

.btn.primary {
    background:linear-gradient(90deg, rgba(167, 255, 92, .35), rgba(127, 255, 233, .18))}

.archive {
    padding:40px 24px 70px}

.viewer {
    max-width:1500px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:24px}

.viewer-left {
    display: contents;
}

.frame {
    position:relative;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#000;
    box-shadow:0 30px 120px rgba(0, 0, 0, .55);
    order: 1;
    max-height: 84vh;
}

.info-panel {
    border: 1px solid var(--line);
    background: var(--panel2);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(167, 255, 92, 0.03);
    border-radius: 16px;
    padding: 10px 18px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    order: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.frame img {
    width:100%;
    height: 100%;
    display:block;
    aspect-ratio:16/9;
    object-fit:contain}

.kicker {
    color: var(--gold);
    letter-spacing: .22em;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.kicker::after {
    content: "•";
    color: var(--line);
    margin: 0 10px;
}

.slide-title {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--green);
    display: inline-flex;
    align-items: center;
}

.slide-title::after {
    content: "—";
    color: var(--line);
    margin: 0 10px;
}

.caption {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    display: inline;
}

.controls {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px;
    order: 3;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.counter {
    color:var(--green2);
    font-variant-numeric:tabular-nums;
    letter-spacing:.12em}

.thumbs {
    max-width:1500px;
    margin:22px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:10px}

.thumb {
    border:1px solid rgba(167, 255, 92, .18);
    border-radius:14px;
    overflow:hidden;
    background:#000;
    cursor:pointer;
    opacity:.72;
    transition:.2s ease;
    position:relative}

.thumb.active, .thumb:hover {
    opacity:1;
    border-color:var(--green);
    box-shadow:0 0 24px rgba(167, 255, 92, .18)}

.thumb img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    display:block}

.thumb span {
    position:absolute;
    left:6px;
    bottom:5px;
    font-size:.68rem;
    background:rgba(0, 0, 0, .65);
    padding:2px 5px;
    color:var(--green);
    border-radius:4px}

.story {
    max-width:1180px;
    margin:40px auto 0;
    padding:28px;
    border-radius:24px;
    border:1px solid var(--line);
    background:var(--panel2)}

.story h2 {
    margin-top:0;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.08em}

.story p {
    color:var(--muted);
    line-height:1.75}



@media(max-width:720px) {
    .hero {
        padding: 32px 16px;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .hero-card {
        width: 100%;
        padding: 32px 20px;
        border-radius: 20px;
    }
    .viewer {
        gap: 12px;
    }
    .frame {
        height: 76dvh;
        max-height: none;
        border-radius: 16px;
    }
    .info-panel {
        height: auto;
        min-height: auto;
        box-sizing: border-box;
        border-radius: 12px;
    }
    .controls {
        flex-direction: row;
        justify-content: center;
        margin-top: 12dvh;
    }
    .counter {
        display: none;
    }

.frame img {
    aspect-ratio:3/4;
    object-fit:cover}

.thumbs {
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}

.thumb img {
    aspect-ratio:3/4;
    object-fit:cover}

}

/* Welcome Overlay */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 3, 2, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.welcome-overlay.active {
    opacity: 1;
    visibility: visible;
}

.welcome-card {
    width: min(560px, 92vw);
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(6, 16, 10, 0.95), rgba(2, 4, 3, 0.98));
    box-shadow: 0 0 100px rgba(92, 255, 130, 0.16), inset 0 0 60px rgba(167, 255, 92, 0.05);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.welcome-overlay.active .welcome-card {
    transform: scale(1) translateY(0);
}

.welcome-card h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.1;
    margin: 10px 0 20px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text);
}

.welcome-card p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.welcome-card p.highlight-text {
    color: var(--green);
    font-weight: 500;
    border-top: 1px dashed rgba(167, 255, 92, 0.2);
    border-bottom: 1px dashed rgba(167, 255, 92, 0.2);
    padding: 12px 0;
    margin: 20px 0 20px;
}

.welcome-card p.kbd-tip {
    font-size: 0.88rem;
    color: var(--muted);
    opacity: 0.85;
    margin-bottom: 28px;
}

.welcome-card kbd {
    background: rgba(167, 255, 92, 0.12);
    border: 1px solid rgba(167, 255, 92, 0.35);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--green);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.welcome-card .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--green2);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.overlay-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

@media (min-width: 480px) {
    .overlay-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
}

.exit-zone {
    text-align: center;
    padding: 60px 24px;
    max-width: 1180px;
    margin: 40px auto 0;
    border-top: 1px dashed var(--line);
}

.exit-zone .btn:hover {
    background: rgba(167, 255, 92, .22);
    box-shadow: 0 0 24px rgba(167, 255, 92, .18);
    border-color: var(--green);
}