/* ================================================================
   RED ROBOT RESOURCE — Nothing OS × iOS design system
   ================================================================ */

:root {
    --bg: #050505;
    --bg-raise: #0c0c0d;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #f5f5f7;
    --text-dim: rgba(245, 245, 247, 0.55);
    --text-faint: rgba(245, 245, 247, 0.32);
    --red: #ff2d2d;
    --red-soft: rgba(255, 45, 45, 0.14);
    --red-glow: rgba(255, 45, 45, 0.45);
    --gold: #ffcc4d;
    --cyan: #5ad7ff;
    --purple: #b98aff;
    --green: #4dffa1;
    --radius-xl: 28px;
    --radius: 20px;
    --radius-sm: 12px;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-dot: 'Doto', 'Inter', monospace;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
    min-height: 100%;
    background: var(--bg);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.ndot {
    font-family: var(--font-dot);
    font-weight: 900;
    letter-spacing: 0.06em;
}

/* film grain */
.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glass {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.muted { color: var(--text-dim); }

/* ================= buttons ================= */

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-spring), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
.pill-btn:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
.pill-btn:active { transform: scale(0.96); }
.pill-btn.solid { background: var(--text); color: #0a0a0a; border-color: transparent; }
.pill-btn.solid:hover { background: #ffffff; }
.pill-btn.solid.red { background: var(--red); color: #fff; box-shadow: 0 8px 28px var(--red-glow); }
.pill-btn.solid.red:hover { background: #ff4444; }
.pill-btn .arrow { transition: transform 0.35s var(--ease-spring); }
.pill-btn:hover .arrow { transform: translateX(3px); }

.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.35s var(--ease-spring), background 0.2s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(0.9); }

/* ================================================================
   BOOT SCREEN
   ================================================================ */

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    cursor: pointer;
    transition: opacity 0.5s ease;
}
.boot-screen.fade { opacity: 0; pointer-events: none; }

.boot-glyph { display: flex; gap: 14px; }
.glyph-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 18px var(--red-glow);
    animation: glyphPulse 1.4s infinite;
}
.glyph-dot.d2 { animation-delay: 0.15s; }
.glyph-dot.d3 { animation-delay: 0.3s; }
.glyph-dot.d4 { animation-delay: 0.45s; }
@keyframes glyphPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.55); opacity: 0.35; }
}

.boot-title {
    font-size: clamp(38px, 9vw, 84px);
    line-height: 1.02;
    text-align: center;
    color: var(--text);
}

.boot-progress {
    width: min(320px, 70vw);
    height: 4px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
.boot-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 0 14px var(--red-glow);
}
.boot-pct { font-size: 22px; color: var(--text-dim); }
.boot-hint {
    font-size: 12px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* ================================================================
   GAME SCREEN
   ================================================================ */

.game-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 18px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 14px var(--red-glow);
    flex: none;
    animation: glyphPulse 2.6s infinite;
}
.brand-name {
    font-size: 16px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.skip-btn { border-color: rgba(255, 45, 45, 0.5); background: var(--red-soft); }
.skip-btn:hover { background: rgba(255, 45, 45, 0.24); }

/* layout */
.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
    flex: 1;
}

.game-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* stats */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-faint);
}
.stat-value { font-size: 26px; line-height: 1; color: var(--text); transition: color 0.2s ease; }
.stat-value.hot { color: var(--red); }

/* canvas */
.canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #070708;
}
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* active effect chips */
.effect-chips {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}
.chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(8px);
    animation: chipIn 0.35s var(--ease-spring);
}
@keyframes chipIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* overlays */
.overlay-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 24px;
    animation: overlayIn 0.45s var(--ease-spring);
}
@keyframes overlayIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

.overlay-card h2 { font-size: clamp(28px, 6vw, 44px); }
.overlay-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--red);
    font-weight: 700;
}
.overlay-sub { color: var(--text-dim); font-size: 14px; }
.overlay-unlock { color: var(--text-faint); font-size: 12px; margin-top: 8px; }

.run-stats { display: flex; gap: 26px; margin: 6px 0 4px; }
.run-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.run-stats span { font-size: 24px; }
.run-stats small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); }

.achievement { color: var(--red); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
.achievement.gold { color: var(--gold); }

#top10Message input {
    width: min(260px, 80%);
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    text-align: center;
    outline: none;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#top10Message input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.gameover-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* power-up legend */
.powerup-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.dot.yellow { background: #ffe14d; box-shadow: 0 0 8px #ffe14d; }
.dot.cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.dot.purple { background: var(--purple); box-shadow: 0 0 8px var(--purple); }
.dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.white { background: #fff; box-shadow: 0 0 8px #fff; }

/* d-pad (touch only) */
.dpad { display: none; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.dpad-mid { display: flex; gap: 64px; }
.dpad-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), background 0.15s ease;
    touch-action: manipulation;
}
.dpad-btn:active { transform: scale(0.88); background: var(--red-soft); border-color: var(--red); }
@media (pointer: coarse) { .dpad { display: flex; } }

/* leaderboard */
.leaderboard { padding: 22px; position: sticky; top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-head h2 { font-size: 18px; letter-spacing: 0.12em; }
.panel-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--red);
    border: 1px solid rgba(255, 45, 45, 0.4);
    background: var(--red-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

.leaderboard-list { display: flex; flex-direction: column; }
.leaderboard-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.leaderboard-entry:last-child { border-bottom: none; }
.leaderboard-entry .rank {
    font-family: var(--font-dot);
    font-weight: 900;
    color: var(--text-faint);
    width: 30px;
    flex: none;
}
.leaderboard-entry.top3 .rank { color: var(--red); }
.leaderboard-entry .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-entry .score { font-family: var(--font-dot); font-weight: 900; font-size: 16px; }

/* footer */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 6px 8px;
    font-size: 12px;
    color: var(--text-faint);
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

.desktop-only { display: block; }
.mobile-only { display: none; }

/* ================================================================
   PROJECTS PAGE
   ================================================================ */

.projects-page { max-width: 1200px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 18px 60px; }

.projects-hero { padding: 46px 4px 30px; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 18px;
}
.hero-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px var(--red-glow);
    animation: glyphPulse 2.6s infinite;
}
.projects-hero h1 {
    font-size: clamp(44px, 9vw, 96px);
    line-height: 0.98;
    margin-bottom: 16px;
}
.projects-hero p { color: var(--text-dim); font-size: 16px; max-width: 560px; line-height: 1.6; }

/* filter segmented control (iOS style) */
.filters {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 8px 0 28px;
}
.filters::-webkit-scrollbar { display: none; }
.filter-btn {
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.35s var(--ease-spring);
}
.filter-btn:active { transform: scale(0.94); }
.filter-btn.active { background: var(--text); color: #0a0a0a; }

/* project grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: transform 0.4s var(--ease-spring), border-color 0.25s ease, background 0.25s ease;
    animation: cardIn 0.5s var(--ease-spring) backwards;
}
.project-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
a.project-card:hover { border-color: rgba(255, 45, 45, 0.45); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-glyph {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-dot);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0.04em;
    background: var(--red-soft);
    border: 1px solid rgba(255, 45, 45, 0.3);
    color: var(--red);
    flex: none;
}

.status-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.live { color: var(--green); border-color: rgba(77, 255, 161, 0.35); background: rgba(77, 255, 161, 0.08); }
.status-badge.beta { color: var(--gold); border-color: rgba(255, 204, 77, 0.35); background: rgba(255, 204, 77, 0.08); }
.status-badge.dev { color: var(--cyan); border-color: rgba(90, 215, 255, 0.35); background: rgba(90, 215, 255, 0.08); }
.status-badge.private { color: var(--text-dim); }
.status-badge.oss { color: var(--purple); border-color: rgba(185, 138, 255, 0.35); background: rgba(185, 138, 255, 0.08); }

.project-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.project-card .card-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-faint);
    margin-top: -8px;
}
.project-card p { color: var(--text-dim); font-size: 14px; line-height: 1.55; flex: 1; }

.card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.card-link .arrow { transition: transform 0.35s var(--ease-spring); }
.project-card:hover .card-link .arrow { transform: translateX(4px); }

.projects-footer {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--text-faint);
    font-size: 13px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {
    .game-layout { grid-template-columns: 1fr; }
    .leaderboard { position: static; }
}

@media (max-width: 600px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    .brand-name { font-size: 13px; letter-spacing: 0.1em; }
    .game-card { padding: 14px; }
    .stat-strip { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .stat { padding: 8px 8px; }
    .stat-value { font-size: 19px; }
    .skip-btn { padding: 10px 14px; font-size: 13px; }
    .icon-btn { width: 38px; height: 38px; }
    .projects-hero { padding-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ================================================================
   RED ROBOT RESOURCE 2.0 — connected studio, project lab, arcade
   ================================================================ */

:root {
    --shell: 1280px;
    --ease-out: cubic-bezier(.2, .75, .25, 1);
}

html { scroll-behavior: smooth; }
body { background-color: #050505; }
.noise {
    opacity: .3;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.065) 0 .6px, transparent .7px),
        radial-gradient(circle at 75% 64%, rgba(255,255,255,.045) 0 .5px, transparent .65px);
    background-size: 7px 9px, 11px 13px;
}

a { color: inherit; }
button, input { font: inherit; }
.shell { width: min(var(--shell), calc(100% - 36px)); margin-inline: auto; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(245,245,247,.5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.eyebrow > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 13px var(--red-glow);
}

.site-nav {
    min-height: 84px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 50;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    width: max-content;
}
.brand > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.brand small { color: var(--text-faint); font-size: 8px; font-weight: 800; letter-spacing: .28em; }
.brand-mark {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    display: grid;
    place-items: center;
    position: relative;
    background: #0b0b0c;
    box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.brand-mark::before,
.brand-mark::after,
.brand-mark i {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}
.brand-mark::before { transform: translate(-6px,-6px); }
.brand-mark::after { transform: translate(6px,6px); }
.brand-mark i:first-child { transform: translate(6px,-6px); opacity: .45; }
.brand-mark i:last-child { transform: translate(-6px,6px); opacity: .45; }
.nav-links { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.035); }
.nav-links a { padding: 9px 16px; border-radius: 999px; text-decoration: none; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.075); }
.nav-cta { justify-self: end; }
.menu-toggle { display: none; color: var(--text); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); padding: 9px 14px; cursor: pointer; }

/* landing */
.landing-page { background-image: radial-gradient(circle at 68% 8%, rgba(255,45,45,.1), transparent 30%), radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); }
.hero {
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
    padding-block: 70px 90px;
}
.hero-copy h1 { font-size: clamp(54px, 7.6vw, 112px); line-height: .86; letter-spacing: -.045em; margin: 28px 0; }
.hero-copy h1 span { color: var(--red); text-shadow: 0 0 45px rgba(255,45,45,.2); }
.hero-lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65; color: rgba(245,245,247,.64); max-width: 680px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 40px; }
.hero-proof { display: flex; gap: clamp(20px, 4vw, 58px); border-top: 1px solid var(--border); padding-top: 22px; }
.hero-proof div { display: flex; flex-direction: column; gap: 5px; }
.hero-proof strong { font-size: 28px; color: var(--text); }
.hero-proof span { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }

.hero-console { min-height: 520px; padding: 12px; border-radius: 30px; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.console-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--text-faint); font-size: 9px; letter-spacing: .12em; }
.traffic { display: flex; gap: 6px; }
.traffic i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.traffic i:first-child { background: var(--red); }
.live-dot { justify-self: end; color: var(--green); font-weight: 800; }
.console-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #060607; border: 1px solid var(--border); border-radius: 14px; }
.console-tab { border: 0; border-radius: 10px; padding: 11px 8px; background: transparent; color: var(--text-faint); font-size: 11px; font-weight: 800; cursor: pointer; }
.console-tab.active { color: #090909; background: var(--text); }
.console-stage { min-height: 370px; display: flex; flex-direction: column; padding: 28px; margin-top: 8px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid var(--border); border-radius: 22px; animation: stageIn .35s var(--ease-out); }
@keyframes stageIn { from { opacity: .4; transform: translateY(6px); } }
.console-prompt, .console-output { display: flex; flex-direction: column; gap: 7px; }
.console-prompt span, .console-output span { color: var(--text-faint); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; }
.console-prompt strong { max-width: 330px; font-size: 18px; line-height: 1.4; }
.signal-map { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr; align-items: center; gap: 6px; margin: auto 0; }
.signal-map > i { height: 1px; background: linear-gradient(90deg, var(--border), var(--red)); position: relative; }
.signal-map > i::after { content: ''; width: 4px; height: 4px; background: var(--red); position: absolute; right: 0; top: -1.5px; border-radius: 50%; }
.signal-node { min-height: 64px; display: grid; place-items: center; border: 1px solid var(--border); background: rgba(0,0,0,.3); border-radius: 13px; color: var(--text-dim); font: 900 10px var(--font-dot); letter-spacing: .08em; }
.signal-node.large { min-height: 90px; }
.signal-node.hot { color: var(--red); border-color: rgba(255,45,45,.4); background: var(--red-soft); box-shadow: 0 0 24px rgba(255,45,45,.08); }
.console-output { padding: 15px 16px; border-radius: 12px; background: rgba(77,255,161,.07); border: 1px solid rgba(77,255,161,.13); }
.console-output strong { color: var(--green); font-size: 12px; }
.console-hint { color: var(--text-faint); font-size: 10px; padding: 10px 12px 2px; text-align: center; }

.ticker { overflow: hidden; border-block: 1px solid var(--border); background: rgba(255,255,255,.025); transform: rotate(-1deg) scale(1.01); }
.ticker > div { width: max-content; display: flex; align-items: center; gap: 26px; padding-block: 14px; animation: tickerMove 35s linear infinite; }
.ticker span { font: 900 12px var(--font-dot); letter-spacing: .14em; }
.ticker i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@keyframes tickerMove { to { transform: translateX(-50%); } }

.featured, .process { padding-block: 130px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 44px; }
.section-head h2 { max-width: 760px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.045em; margin-top: 16px; }
.section-head h2 em { color: var(--red); font-style: normal; }
.section-head > p { max-width: 390px; color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.text-link { color: var(--text-dim); font-size: 12px; font-weight: 800; text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid var(--border-strong); }
.text-link span { color: var(--red); margin-left: 7px; }

.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-card { min-height: 620px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); position: relative; overflow: hidden; opacity: .35; transform: translateY(22px); transition: opacity .65s ease, transform .65s var(--ease-out), border-color .25s ease; }
.feature-card.in-view { opacity: 1; transform: translateY(0); }
.feature-card:hover { border-color: rgba(255,255,255,.2); }
.feature-wide { min-height: 560px; grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; }
.feature-copy { display: flex; flex-direction: column; }
.card-meta { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
.card-meta b { color: var(--red); }
.feature-card h3 { font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -.045em; margin: 30px 0 18px; }
.feature-card p { color: var(--text-dim); line-height: 1.7; max-width: 550px; }
.feature-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; }
.card-arrow { position: absolute; right: 26px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); text-decoration: none; font-size: 20px; transition: .25s var(--ease-out); }
.card-arrow:hover { background: var(--text); color: #050505; transform: rotate(-10deg); }

.product-window { min-height: 420px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: #09090b; box-shadow: 0 36px 70px rgba(0,0,0,.45); position: relative; overflow: hidden; transform: translate(5%, 7%) rotate(1deg); transition: transform .7s var(--ease-out); }
.feature-card:hover .product-window { transform: translate(2%, 3%) rotate(0); }
.small-window { min-height: 310px; margin-top: auto; margin-bottom: 48px; transform: translateY(18px); }
.feature-card:hover .small-window { transform: translateY(8px); }
.preview-reviq { display: grid; grid-template-columns: 58px 1fr; background: #f3f5f8; color: #192231; }
.mini-sidebar { background: #182131; padding: 18px 13px; display: flex; flex-direction: column; gap: 17px; align-items: center; }
.mini-sidebar b { width: 28px; height: 28px; background: var(--red); color: white; border-radius: 8px; display: grid; place-items: center; }
.mini-sidebar i { width: 22px; height: 6px; border-radius: 8px; background: rgba(255,255,255,.16); }
.mini-app { padding: 30px; display: flex; flex-direction: column; gap: 24px; }
.mini-title { font-weight: 800; font-size: 18px; }
.mini-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mini-metrics i { height: 62px; border-radius: 12px; background: white; box-shadow: 0 8px 20px rgba(15,23,42,.05); }
.mini-chart { height: 135px; background: white; border-radius: 13px; padding: 20px; display: flex; align-items: end; }
.mini-chart span { width: 100%; height: 55%; border-top: 3px solid var(--red); transform: skewY(-9deg); }
.mini-list { display: grid; gap: 8px; }
.mini-list i { height: 12px; width: 100%; border-radius: 9px; background: rgba(15,23,42,.08); }
.mini-list i:nth-child(2) { width: 76%; }
.preview-matte { padding: 17px; background: #141816; }
.browser-tabs { display: flex; gap: 6px; }
.browser-tabs i { width: 70px; height: 17px; background: rgba(155,196,180,.13); border-radius: 7px 7px 3px 3px; }
.browser-search { margin-top: 10px; border: 1px solid rgba(155,196,180,.24); background: #0f1210; color: rgba(255,255,255,.4); border-radius: 10px; padding: 11px 15px; font-size: 10px; }
.browser-orbit { height: 205px; display: grid; place-items: center; position: relative; }
.browser-orbit::before, .browser-orbit::after { content: ''; position: absolute; border: 1px solid rgba(155,196,180,.18); border-radius: 50%; width: 180px; height: 80px; transform: rotate(24deg); }
.browser-orbit::after { transform: rotate(-24deg); }
.browser-orbit span { color: #9bc4b4; letter-spacing: .38em; font-weight: 800; }
.preview-olympus { display: grid; place-items: center; background: radial-gradient(circle, #152038, #080a0f 55%); }
.olympus-core { width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(96,165,250,.6); border-radius: 50%; color: #93c5fd; font: 900 40px var(--font-dot); box-shadow: 0 0 45px rgba(96,165,250,.2); }
.orbit { position: absolute; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.4); border-radius: 999px; padding: 7px 10px; font-size: 8px; letter-spacing: .12em; }
.orbit::after { content: ''; position: absolute; height: 1px; background: rgba(96,165,250,.3); }
.o1 { top: 50px; left: 34px; }.o1::after { width: 85px; left: 100%; top: 50%; transform: rotate(23deg); transform-origin: left; }
.o2 { top: 52px; right: 34px; }.o2::after { width: 85px; right: 100%; top: 50%; transform: rotate(-23deg); transform-origin: right; }
.o3 { bottom: 36px; left: 50%; transform: translateX(-50%); }.o3::after { width: 70px; left: 50%; bottom: 100%; transform: rotate(90deg); transform-origin: left; }

.process { border-top: 1px solid var(--border); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; }
.process-grid article { min-height: 330px; padding: 28px; border-right: 1px solid var(--border); display: flex; flex-direction: column; opacity: .35; transform: translateY(18px); transition: .55s var(--ease-out); }
.process-grid article:last-child { border-right: 0; }
.process-grid article.in-view { opacity: 1; transform: none; }
.step-no { color: var(--text-faint); font-size: 11px; }
.step-icon { margin: auto 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,45,45,.35); background: var(--red-soft); color: var(--red); font-style: normal; font-weight: 800; font-size: 21px; }
.process-grid h3 { font-size: 17px; margin-bottom: 10px; }
.process-grid p { color: var(--text-dim); font-size: 13px; line-height: 1.65; }

.arcade-callout { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-block: 20px 140px; padding: clamp(35px, 6vw, 78px); border: 1px solid rgba(255,45,45,.22); border-radius: 32px; overflow: hidden; position: relative; background: radial-gradient(circle at 85% 45%, rgba(255,45,45,.18), transparent 33%), #090909; opacity: .4; transform: translateY(22px); transition: .7s var(--ease-out); }
.arcade-callout.in-view { opacity: 1; transform: none; }
.arcade-copy h2 { font-size: clamp(48px, 6vw, 84px); line-height: .88; margin: 24px 0; }
.arcade-copy p { color: var(--text-dim); max-width: 520px; line-height: 1.7; margin-bottom: 28px; }
.arcade-stack { min-height: 410px; position: relative; perspective: 1000px; }
.cabinet-card { position: absolute; width: 260px; height: 350px; border-radius: 20px; border: 1px solid var(--border-strong); background: #0c0c0d; box-shadow: 0 30px 60px rgba(0,0,0,.55); padding: 20px; display: flex; flex-direction: column; }
.cabinet-card > span { font: 900 17px var(--font-dot); text-align: center; letter-spacing: .1em; }
.cabinet-card > div { flex: 1; margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; position: relative; overflow: hidden; background: #050508; }
.snake-art { left: 0; top: 30px; transform: rotateY(12deg) rotateZ(-6deg); }
.maze-art { left: 50%; top: 0; transform: translateX(-50%) translateZ(35px); z-index: 2; border-color: rgba(255,225,77,.3); }
.invader-art { right: 0; top: 36px; transform: rotateY(-12deg) rotateZ(6deg); }
.snake-art i { position: absolute; width: 18px; height: 18px; border-radius: 5px; background: #d52626; left: calc(28px + var(--i, 0) * 18px); top: calc(110px + var(--y,0) * 18px); }
.snake-art i:nth-child(1){left:35px}.snake-art i:nth-child(2){left:53px}.snake-art i:nth-child(3){left:71px}.snake-art i:nth-child(4){left:89px;top:92px}.snake-art b{position:absolute;width:15px;height:15px;border-radius:50%;background:#ffcc4d;right:30px;top:55px;box-shadow:0 0 15px #ffcc4d}
.maze-art b { position:absolute;width:45px;height:45px;border-radius:50%;background:#ffe14d;left:55px;top:95px;clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%); }
.maze-art i { position:absolute;width:7px;height:7px;border-radius:50%;background:#ffe5b4;top:115px; }.maze-art i:nth-child(2){left:115px}.maze-art i:nth-child(3){left:140px}.maze-art i:nth-child(4){left:165px}
.invader-art div > i { position:absolute;width:24px;height:18px;background:#5ad7ff;clip-path:polygon(20% 0,80% 0,80% 20%,100% 20%,100% 80%,75% 80%,75% 100%,55% 100%,55% 80%,45% 80%,45% 100%,25% 100%,25% 80%,0 80%,0 20%,20% 20%); }
.invader-art i:nth-child(1){left:30px;top:45px}.invader-art i:nth-child(2){left:75px;top:45px}.invader-art i:nth-child(3){left:120px;top:45px}.invader-art i:nth-child(4){left:30px;top:85px}.invader-art b{position:absolute;bottom:30px;left:50%;width:38px;height:25px;transform:translateX(-50%);background:var(--red);clip-path:polygon(50% 0,100% 100%,60% 75%,50% 100%,40% 75%,0 100%)}

.main-footer { min-height: 180px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; border-top: 1px solid var(--border); position: relative; }
.footer-brand { display: flex; align-items: center; gap: 15px; }
.footer-brand p { color: var(--text-faint); font-size: 11px; margin-top: 5px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--text-dim); font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.copyright { position: absolute; left: 53px; bottom: 20px; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.compact-footer { margin-top: 90px; }

/* project lab */
.lab-page { background-image: radial-gradient(circle at 18% 4%, rgba(255,45,45,.075), transparent 24%), radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }
.lab-main { padding-top: 65px; }
.lab-hero { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 70px; padding-bottom: 62px; border-bottom: 1px solid var(--border); }
.lab-hero h1 { font-size: clamp(48px, 7.2vw, 100px); line-height: .88; letter-spacing: -.04em; margin-top: 25px; }
.lab-hero h1 span { color: var(--red); }
.lab-hero > p { color: var(--text-dim); font-size: 15px; line-height: 1.75; padding-bottom: 6px; }
.lab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; position: sticky; top: 0; z-index: 40; background: rgba(5,5,5,.86); backdrop-filter: blur(18px); }
.lab-toolbar .filters { margin: 0; }
.filter-btn span { margin-left: 5px; opacity: .5; }
.project-search { width: min(320px, 30vw); min-height: 46px; border: 1px solid var(--border); border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 4px 16px; background: var(--surface); }
.project-search > span { color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.project-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.project-search input::placeholder { color: var(--text-faint); }
.lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.results-line { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; padding: 5px 4px 14px; }
.interactive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.interactive-card { min-height: 480px; padding: 17px; gap: 10px; outline: 0; border-radius: 22px; cursor: default; }
.interactive-card:hover, .interactive-card:focus-within, .interactive-card.selected { border-color: color-mix(in srgb, var(--accent) 52%, transparent); }
.interactive-card.selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.interactive-card .card-top { order: 2; margin-top: 4px; }
.interactive-card .card-glyph { width: 35px; height: 35px; border-radius: 10px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 13px; }
.interactive-card .card-tag { order: 3; margin: 5px 0 -5px; }
.interactive-card h3 { order: 4; font-size: 22px; }
.interactive-card > p { order: 5; font-size: 12px; line-height: 1.55; }
.card-actions { order: 6; margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); }
.inspect-action, .mini-action { border: 0; background: transparent; color: var(--text-dim); font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; padding: 8px 0; }
.inspect-action:hover { color: var(--text); }
.mini-action { color: var(--accent); }
.mini-action.unavailable { color: var(--text-faint); cursor: default; }
.project-preview-wrap { order: 1; height: 190px; border-radius: 15px; overflow: hidden; background: #08080a; border: 1px solid var(--border); }
.interactive-card:hover .app-preview { transform: scale(1.025); }

.app-preview { width: 100%; height: 100%; position: relative; overflow: hidden; background: #0a0b0e; transition: transform .6s var(--ease-out); }
.preview-brand { position: absolute; top: 12px; left: 13px; z-index: 5; font: 900 9px var(--font-dot); color: var(--accent); }
.preview-live { position: absolute; top: 13px; right: 13px; z-index: 5; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.dashboard-ui { display: grid; grid-template-columns: 40px 1fr; padding-top: 34px; background: #eef1f4; }
.dash-side { background: #19202b; padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.dash-side b { color: white; font-size: 8px; width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); }
.dash-side i { width: 17px; height: 4px; border-radius: 5px; background: rgba(255,255,255,.17); }
.dash-main { padding: 11px; }
.dash-title { display:flex;justify-content:space-between}.dash-title span{width:70px;height:8px;background:#263041;border-radius:8px}.dash-title i{width:27px;height:10px;background:var(--accent);border-radius:7px;opacity:.8}
.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:11px}.dash-metrics span{height:35px;background:#fff;border-radius:6px;box-shadow:0 3px 8px rgba(20,25,35,.05)}
.dash-chart{height:56px;background:#fff;border-radius:6px;margin-top:7px;display:flex;align-items:center;padding:9px}.dash-chart i{width:100%;height:24px;border-top:2px solid var(--accent);transform:skewY(-8deg)}
.dash-table{display:grid;gap:4px;margin-top:7px}.dash-table span{height:6px;background:rgba(25,32,43,.1);border-radius:5px}.dash-table span:nth-child(2){width:80%}
.security .dash-main{background:#10161c}.security .dash-title span{background:#d8e2eb}.security .dash-metrics span,.security .dash-chart{background:#18222b}.security .dash-table span{background:rgba(255,255,255,.12)}
.document-ui { padding: 34px 14px 10px 45px; background: #202125; display: grid; grid-template-columns: 1fr 58px; gap: 9px; }
.doc-tools { position:absolute;left:0;top:34px;bottom:0;width:35px;background:#17181b;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:11px}.doc-tools i{width:15px;height:15px;border:1px solid rgba(255,255,255,.18);border-radius:4px}.doc-tools i:first-child{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.doc-page { background:#f6f3ed;padding:22px 15px;box-shadow:0 8px 18px rgba(0,0,0,.35)}.doc-page span{display:block;height:5px;background:#9da0a5;border-radius:4px;margin-bottom:7px}.doc-page span:nth-child(2){width:78%}.doc-page span:nth-child(3){width:90%}.doc-page b{display:block;height:45px;background:color-mix(in srgb,var(--accent) 16%,#eee);margin:13px 0}
.doc-panel { background:#17181b;border-radius:6px;padding:8px}.doc-panel i{display:block;height:20px;border:1px solid rgba(255,255,255,.1);border-radius:4px;margin-bottom:5px}
.agent-ui { background:radial-gradient(circle at 52% 48%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 38%),#080a0e; }
.agent-core { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font:900 17px var(--font-dot);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 18%,transparent)}
.agent-node { position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:#11151b}.agent-node.n1{left:16%;top:34%}.agent-node.n2{right:16%;top:30%}.agent-node.n3{right:22%;bottom:18%}
.agent-line { position:absolute;height:1px;background:color-mix(in srgb,var(--accent) 36%,transparent);transform-origin:left}.agent-line.l1{width:74px;left:22%;top:40%;transform:rotate(13deg)}.agent-line.l2{width:72px;left:57%;top:48%;transform:rotate(-27deg)}.agent-line.l3{width:75px;left:53%;top:58%;transform:rotate(31deg)}
.agent-log { position:absolute;left:14px;bottom:10px;display:grid;gap:3px}.agent-log span{display:block;width:60px;height:3px;background:rgba(255,255,255,.11);border-radius:2px}.agent-log span:nth-child(2){width:87px}.agent-log span:last-child{background:var(--accent);width:42px}
.browser-ui { padding:34px 11px 10px;background:#151a17}.browser-chrome{height:24px;border-radius:7px;background:#0c100e;display:flex;align-items:center;gap:4px;padding:5px}.browser-chrome i{width:5px;height:5px;border-radius:50%;background:#59635d}.browser-chrome span{margin-left:7px;flex:1;border:1px solid rgba(155,196,180,.12);border-radius:5px;color:rgba(255,255,255,.25);font-size:6px;padding:3px 6px}.browser-home{height:115px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.browser-home b{color:var(--accent);letter-spacing:.35em;font-size:14px}.browser-home>span{color:rgba(255,255,255,.38);font-size:6px}.browser-home div{display:flex;gap:7px;margin-top:8px}.browser-home i{width:28px;height:20px;background:rgba(155,196,180,.08);border:1px solid rgba(155,196,180,.12);border-radius:5px}
.game-ui { background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 42%),#050508}.pixel-score{position:absolute;left:14px;top:35px;color:var(--accent);font:900 9px var(--font-dot)}.pixel-field i{position:absolute;width:11px;height:11px;background:var(--accent);border-radius:3px;left:calc(65px + var(--x,0));top:95px}.pixel-field i:nth-child(1){left:65px}.pixel-field i:nth-child(2){left:76px}.pixel-field i:nth-child(3){left:87px}.pixel-field i:nth-child(4){left:98px;top:84px}.pixel-field i:nth-child(5){left:109px;top:84px}.pixel-field i:nth-child(6){left:120px;top:73px}.pixel-field b{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffe14d;right:58px;top:65px;box-shadow:0 0 12px #ffe14d}.press-start{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.45);font:900 7px var(--font-dot);letter-spacing:.18em;animation:glyphPulse 1.3s infinite}
.website-ui { padding:35px 12px 10px;background:#06120e}.web-nav{height:18px;display:flex;align-items:center;gap:7px}.web-nav i{width:24px;height:7px;background:var(--accent);border-radius:2px}.web-nav span{width:30px;height:3px;background:rgba(255,255,255,.2);margin-left:auto}.web-nav span+span{margin-left:0}.web-hero{height:90px;display:flex;align-items:center;justify-content:space-between;padding:12px}.web-hero b{color:#eefcf6;font-size:15px;line-height:.95}.web-hero i{width:68px;height:65px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--accent),#043b26)}.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.web-cards span{height:28px;border:1px solid rgba(255,255,255,.12);border-radius:5px}

.project-inspector { position: sticky; top: 94px; min-height: 710px; padding: 20px; border-radius: 24px; }
.inspector-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.inspector-head .ndot { color: var(--text-faint); font-size: 10px; }
.inspector-visual { height: 285px; border: 1px solid var(--border); border-radius: 17px; overflow: hidden; background:#08080a; }
.inspector-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.project-inspector h2 { font-size: 34px; letter-spacing: -.04em; margin: 16px 0 10px; }
.project-inspector > p { color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.capability-list { display: grid; gap: 7px; margin: 19px 0; }
.capability-list span { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; color: rgba(245,245,247,.72); font-size: 11px; }
.capability-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.inspector-actions .pill-btn { width: 100%; justify-content: center; }
.pill-btn.disabled { opacity: .55; cursor: default; }
.project-inspector .inspector-note { font-size: 9px; color: var(--text-faint); line-height: 1.5; margin-top: 14px; }
.empty-state { min-height: 300px; border: 1px dashed var(--border-strong); border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--text-dim); }
.empty-state[hidden] { display: none; }
.empty-state button { background: transparent; cursor: pointer; }
.status-badge.new { color:#f9a8d4;border-color:rgba(249,168,212,.3);background:rgba(249,168,212,.08) }

/* arcade hub */
.arcade-page { background-image: radial-gradient(circle at 50% 8%, rgba(255,45,45,.1), transparent 27%), radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }
.arcade-main { padding-top: 60px; }
.arcade-hero { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 70px; padding-bottom: 70px; }
.arcade-hero h1 { font-size: clamp(58px, 8.5vw, 118px); line-height: .84; letter-spacing: -.04em; margin-top: 26px; }
.arcade-hero h1 span { color: var(--red); }
.arcade-hero > p { color: var(--text-dim); font-size: 16px; line-height: 1.75; padding-bottom: 6px; }
.arcade-flagship { position: relative; min-height: 660px; margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, .8fr); overflow: hidden; border: 1px solid rgba(224,180,89,.3); border-radius: 28px; background: #171009; box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.arcade-flagship::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,235,183,.08), inset 0 0 90px rgba(0,0,0,.28); }
.flagship-screen { position: relative; min-width: 0; min-height: 660px; display: block; overflow: hidden; color: #fff; background: #21180f; text-decoration: none; }
.flagship-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgba(20,12,7,.7)), linear-gradient(0deg, rgba(10,6,3,.62), transparent 28%); }
.flagship-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.91) contrast(1.02); transition: transform .7s var(--ease-out), filter .35s ease; }
.flagship-screen:hover img { transform: scale(1.025); filter: saturate(1.08) contrast(1.03); }
.flagship-screen > b { position: absolute; z-index: 3; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(255,244,213,.24); border-radius: 8px; color: #fff3cc; background: rgba(24,14,8,.82); backdrop-filter: blur(10px); font: 800 10px/1 var(--font-sans); letter-spacing: .12em; }
.flagship-screen > b span { color: #e8b84c; font-size: 16px; transition: transform .2s ease; }.flagship-screen:hover > b span { transform: translateX(4px); }
.flagship-curtain { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 10px; background: linear-gradient(90deg, #79231f, #bd3a31 42%, #471511); opacity: .9; }
.flagship-copy { position: relative; z-index: 3; padding: clamp(34px, 4vw, 62px); display: flex; flex-direction: column; justify-content: center; color: #f5e6bc; background: radial-gradient(circle at 50% 28%, rgba(195,56,43,.18), transparent 33%), linear-gradient(145deg, #281a10, #120d09 68%); }
.flagship-copy::before { content: ''; position: absolute; inset: 15px; pointer-events: none; border: 1px solid rgba(231,197,118,.15); border-radius: 18px; }
.flagship-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }.flagship-meta em { color: rgba(245,230,188,.44); font-size: 8px; font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.flagship-copy .eyebrow { color: #d9bc79; }.flagship-copy .eyebrow::before { background: #d6a542; }
.flagship-copy h2 { margin: 17px 0 21px; font: 800 clamp(67px, 7vw, 108px)/.69 var(--font-dot); letter-spacing: -.075em; color: #f3dfaa; transform: rotate(-1deg); }
.flagship-copy h2 i { color: #d33a31; font-style: normal; text-shadow: 0 4px 0 #411611; }
.flagship-copy > p { max-width: 480px; margin: 0; color: rgba(245,230,188,.67); font-size: 12px; line-height: 1.72; }
.flagship-features { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-block: 1px solid rgba(231,197,118,.16); }.flagship-features span { padding: 16px 8px 16px 0; color: rgba(245,230,188,.5); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }.flagship-features span + span { padding-left: 13px; border-left: 1px solid rgba(231,197,118,.16); }.flagship-features b { display: block; margin-bottom: 5px; color: #e8b84c; font: 800 18px/1 var(--font-dot); }
.flagship-actions { position: relative; z-index: 1; margin-top: 28px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }.flagship-details { padding: 8px 0; border: 0; color: rgba(245,230,188,.65); background: none; font-size: 9px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.flagship-detail-panel { position: relative; z-index: 1; margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(231,197,118,.17); border-radius: 8px; color: rgba(245,230,188,.58); background: rgba(255,255,255,.025); font-size: 8px; line-height: 1.7; }.flagship-detail-panel b { color: #f0d99e; }
.flagship-resume { border-color: rgba(232,184,76,.28); background: linear-gradient(135deg, rgba(232,184,76,.11), rgba(181,46,39,.08)); }.flagship-resume > span { color: #e8b84c; border-color: rgba(232,184,76,.35); }
.arcade-resume { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 8px; margin-bottom: 18px; padding: 9px; border: 1px solid rgba(255,45,45,.28); border-radius: 18px; background: linear-gradient(115deg, rgba(255,45,45,.11), rgba(255,255,255,.025) 42%, rgba(255,255,255,.015)); }
.arcade-resume > div { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 16px; }
.arcade-resume > .resume-intro { grid-row: span 2; }
.arcade-resume > div strong { font-size: 17px; letter-spacing: -.025em; }
.arcade-resume > div span { color: var(--text-faint); font-size: 9px; line-height: 1.4; }
.resume-card { min-width: 0; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 72px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; background: rgba(5,5,7,.45); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.resume-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.resume-card > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--red); border: 1px solid rgba(255,45,45,.28); font: 800 9px var(--font-dot); }
.resume-card > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.resume-card small { color: var(--text-faint); font-size: 8px; }
.resume-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 9px var(--font-dot); }
.resume-card b { color: var(--text-dim); font-size: 9px; white-space: nowrap; }
.cabinet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.game-cabinet { min-width: 0; border: 1px solid var(--border); border-radius: 28px; padding: 18px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); display: flex; flex-direction: column; transition: transform .45s var(--ease-out), border-color .25s ease; }
.game-cabinet:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.2); }
.progression-cabinet { border-color: rgba(255,45,45,.3); background: linear-gradient(155deg, rgba(255,45,45,.09), rgba(255,255,255,.025) 45%, rgba(255,255,255,.012)); }
.progression-cabinet .cabinet-screen { border-color: rgba(255,45,45,.22); }
.signal-cabinet { border-color: rgba(81,230,171,.24); background: linear-gradient(155deg, rgba(81,230,171,.075), rgba(255,255,255,.02) 50%); }
.orbit-cabinet { border-color: rgba(107,167,255,.24); background: linear-gradient(155deg, rgba(107,167,255,.075), rgba(255,255,255,.02) 50%); }
.redline-cabinet { border-color: rgba(255,91,70,.28); background: linear-gradient(155deg, rgba(255,75,55,.1), rgba(126,36,107,.055) 55%, rgba(255,255,255,.015)); }
.drop-cabinet { border-color: rgba(89,216,255,.25); background: linear-gradient(155deg, rgba(89,216,255,.085), rgba(200,121,255,.04) 55%, rgba(255,255,255,.015)); }
.salvage-cabinet { border-color: rgba(125,255,188,.24); background: linear-gradient(155deg, rgba(125,255,188,.08), rgba(107,167,255,.04) 55%, rgba(255,255,255,.015)); }
.cabinet-shelf-label { grid-column: 1 / -1; min-height: 108px; display: grid; grid-template-columns: .75fr 1fr 1fr; align-items: center; gap: 34px; padding: 22px 26px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.025); }
.cabinet-shelf-label strong { font-size: 24px; letter-spacing: -.035em; }
.cabinet-shelf-label small { max-width: 520px; color: var(--text-dim); font-size: 11px; line-height: 1.55; }
.cabinet-shelf-label.campaign-shelf { margin-top: 20px; border-color: rgba(255,45,45,.26); background: linear-gradient(100deg, rgba(255,45,45,.09), rgba(255,255,255,.02)); }
.cabinet-top { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 14px; }
.cabinet-no { color: var(--text-faint); font-size: 10px; }
.cabinet-screen { height: 310px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: #050508; position: relative; overflow: hidden; box-shadow: inset 0 0 55px rgba(0,0,0,.9), 0 20px 35px rgba(0,0,0,.25); }
.cabinet-screen > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform .5s var(--ease-out), filter .3s ease; }
.game-cabinet:hover .cabinet-screen > img { transform: scale(1.035); filter: saturate(1.08); }
.scanlines { position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px) }
.screen-label { position:absolute;z-index:6;left:12px;right:12px;bottom:10px;padding:8px 10px;border-radius:8px;text-align:center;color:rgba(255,255,255,.72);background:rgba(3,3,5,.76);backdrop-filter:blur(7px);font:900 7px var(--font-dot);letter-spacing:.18em }
.snake-demo,.maze-demo,.invader-demo{position:absolute;inset:0}.snake-demo i{position:absolute;width:19px;height:19px;border-radius:5px;background:#cf2626;top:140px}.snake-demo i:nth-child(1){left:60px}.snake-demo i:nth-child(2){left:80px}.snake-demo i:nth-child(3){left:100px}.snake-demo i:nth-child(4){left:120px;top:120px}.snake-demo i:nth-child(5){left:140px;top:100px;background:#ff4040;box-shadow:0 0 18px rgba(255,45,45,.6)}.snake-demo b{position:absolute;width:15px;height:15px;border-radius:50%;background:#ffcc4d;right:60px;top:70px;box-shadow:0 0 14px #ffcc4d}.snake-demo em{position:absolute;inset:25px;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px}
.maze-demo::before,.maze-demo::after{content:'';position:absolute;border:3px solid #5367ff;border-radius:10px}.maze-demo::before{inset:40px}.maze-demo::after{inset:80px 75px}.maze-player{position:absolute;width:42px;height:42px;border-radius:50%;background:#ffe14d;left:55px;top:125px;clip-path:polygon(0 0,100% 0,56% 50%,100% 100%,0 100%);z-index:2}.maze-ghost{position:absolute;width:32px;height:32px;border-radius:50% 50% 8px 8px;z-index:2}.maze-ghost.g1{right:70px;top:80px;background:#ff4a43}.maze-ghost.g2{right:110px;bottom:70px;background:#5ad7ff}.maze-demo i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe5b4;top:145px;z-index:2}.maze-demo i:nth-of-type(1){left:120px}.maze-demo i:nth-of-type(2){left:155px}.maze-demo i:nth-of-type(3){left:190px}.maze-demo i:nth-of-type(4){left:225px}.maze-demo b{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff4c2;right:48px;bottom:48px;box-shadow:0 0 10px #fff4c2}
.invader-demo>div{position:absolute;inset:55px 45px 130px;display:grid;grid-template-columns:repeat(3,1fr);place-items:center}.invader-demo i{width:33px;height:24px;background:#5ad7ff;clip-path:polygon(20% 0,80% 0,80% 20%,100% 20%,100% 80%,75% 80%,75% 100%,55% 100%,55% 80%,45% 80%,45% 100%,25% 100%,25% 80%,0 80%,0 20%,20% 20%)}.invader-demo i:nth-child(-n+3){background:#ff6b6b}.invader-demo i:nth-child(n+4):nth-child(-n+6){background:#ffe14d}.invader-demo b{position:absolute;bottom:50px;left:50%;width:44px;height:31px;transform:translateX(-50%);background:var(--red);clip-path:polygon(50% 0,100% 100%,62% 76%,50% 100%,38% 76%,0 100%)}.invader-demo span{position:absolute;left:50%;bottom:88px;width:3px;height:30px;background:white;box-shadow:0 0 10px white}
.cabinet-copy { padding: 25px 5px 18px; }
.cabinet-copy h2 { min-height: 90px; font-size: clamp(36px, 4vw, 54px); line-height: .83; letter-spacing: -.025em; margin: 17px 0 18px; }
.cabinet-copy p { color: var(--text-dim); font-size: 13px; line-height: 1.65; min-height: 66px; }
.cabinet-stats { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--border); padding: 14px 5px; gap: 14px; }
.cabinet-stats span { display: flex; flex-direction: column; gap: 5px; }
.cabinet-stats small { color: var(--text-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }
.cabinet-stats strong { font-size: 11px; }
.cabinet-stats .ndot { color: var(--red); font-size: 16px; }
.cabinet-play { margin-top: 16px; min-height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; background: var(--text); color:#050505; text-decoration:none; font:900 12px var(--font-dot);letter-spacing:.08em;transition:.25s var(--ease-out) }
.cabinet-play:hover { background: var(--red); color:white; }
.cabinet-play span { font: 20px var(--font-body); }
.arcade-rules { margin-top: 24px; padding: 34px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: center; }
.arcade-rules h2 { font-size: 28px; margin-top: 12px; }
.rule-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rule-list span { border-left: 1px solid var(--border); padding-left: 13px; color:var(--text-dim);font-size:11px;line-height:1.5;display:flex;flex-direction:column;gap:7px }.rule-list b{color:var(--red);font:900 9px var(--font-dot)}

/* standalone games */
.play-page { background-image: radial-gradient(circle at 50% 5%, rgba(255,45,45,.09), transparent 26%), radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }
.play-shell { padding-top: max(12px,env(safe-area-inset-top)); }
.play-shell .topbar, .game-screen .topbar { min-height: 72px; }
.icon-btn { width: auto; min-width: 56px; padding: 0 12px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.compact-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 34px 5px 26px; }
.compact-intro h1 { font-size: clamp(40px, 6vw, 72px); line-height: .9; margin-top: 12px; }
.compact-intro > p { color: var(--text-dim); max-width: 430px; font-size: 13px; line-height: 1.6; }
.solo-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.standalone-game { padding: 16px; }
.standalone-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.standalone-hud.hud-five { grid-template-columns: repeat(5, 1fr); }
.standalone-hud > div { min-height: 56px; border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025);padding:8px 11px;display:flex;flex-direction:column;gap:5px }.standalone-hud span{color:var(--text-faint);font-size:8px;text-transform:uppercase;letter-spacing:.12em}.standalone-hud strong{font-size:17px}.standalone-hud>div:first-child strong{color:var(--red)}
.standalone-canvas { position: relative; width: 100%; min-height: 600px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background:#050508;border:1px solid var(--border) }
.standalone-canvas canvas { display:block; max-width:100%; touch-action:none; }
.maze-canvas-wrap { min-height: 660px; }
.invader-canvas-wrap { min-height: 720px; }
.breakout-canvas-wrap, .pong-canvas-wrap { min-height: 590px; }
.breakout-canvas-wrap canvas, .pong-canvas-wrap canvas { width: 100%; height: auto; }
.runner-canvas-wrap, .orbit-canvas-wrap { min-height: 590px; }
.runner-canvas-wrap canvas, .orbit-canvas-wrap canvas { width: 100%; height: auto; }
.redline-canvas-wrap, .salvage-canvas-wrap { min-height: 650px; }
.redline-canvas-wrap canvas, .salvage-canvas-wrap canvas { width: 100%; height: auto; }
.drop-canvas-wrap { min-height: 710px; }
.drop-canvas-wrap canvas { width: min(100%, 760px); height: auto; }
.signal-stage { position: relative; min-height: 590px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at 50% 45%, rgba(81,230,171,.1), transparent 34%), radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px), #050508; background-size: auto, 24px 24px, auto; }
.signal-grid { width: min(84%, 470px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(7px, 1vw, 11px); padding: 14px; border: 1px solid rgba(81,230,171,.14); border-radius: 22px; background: rgba(4,7,7,.68); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.signal-cell { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease; }
.signal-cell:hover { border-color: rgba(255,255,255,.24); }
.signal-cell:active { transform: scale(.94); }
.signal-cell i { position: absolute; inset: 34%; border-radius: 50%; background: #32383a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: .18s ease; }
.signal-cell.on { border-color: rgba(81,230,171,.5); background: rgba(81,230,171,.12); box-shadow: inset 0 0 26px rgba(81,230,171,.08), 0 0 20px rgba(81,230,171,.05); }
.signal-cell.on i { inset: 27%; background: #51e6ab; box-shadow: 0 0 16px rgba(81,230,171,.9), 0 0 36px rgba(81,230,171,.38); }
.arcade-overlay { position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;background:rgba(3,3,5,.76);backdrop-filter:blur(6px);padding:30px;transition:opacity .25s ease }.arcade-overlay.hidden{opacity:0;pointer-events:none}.arcade-overlay h2{font-size:clamp(28px,5vw,52px)}.arcade-overlay p{color:var(--text-dim);font-size:12px}.arcade-overlay .pill-btn{margin-top:8px}
.arcade-overlay[hidden] { display: none; }
.game-brief { position:sticky;top:18px;padding:25px; }
.game-brief h2 { font-size: 29px; margin: 15px 0 20px; }
.game-brief ol { list-style:none;display:grid;gap:8px;margin-bottom:24px }.game-brief li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:11px;border:1px solid var(--border);border-radius:11px;color:var(--text-dim);font-size:11px;line-height:1.5}.game-brief li b{color:var(--red);font:900 9px var(--font-dot)}.game-brief .pill-btn{width:100%;justify-content:center}
.level-switcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -4px 0 16px; }
.level-switcher-twelve { grid-template-columns: repeat(6, 1fr); }
.level-switcher-ten { grid-template-columns: repeat(5, 1fr); }
.level-switcher button { min-width: 0; min-height: 34px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--text-dim); cursor: pointer; font: 800 9px var(--font-dot); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.level-switcher button:hover:not(:disabled) { border-color: rgba(255,255,255,.3); color: #fff; }
.level-switcher button.active { border-color: rgba(255,45,45,.5); background: rgba(255,45,45,.15); color: #ff6964; }
.level-switcher button:disabled { opacity: .24; cursor: not-allowed; }
.mobile-game-controls { display:none; margin-top:12px; align-items:center;justify-content:center;gap:8px }.mobile-game-controls>div{display:flex;gap:7px}.mobile-game-controls button{width:54px;height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:800}.mobile-game-controls button:active{background:var(--red);transform:scale(.94)}.invader-touch .fire-control{width:100px;background:var(--red-soft);border-color:rgba(255,45,45,.35);color:var(--red)}
.mobile-game-controls.wide-controls button, .mobile-game-controls.vertical-controls button { width: 132px; font: 800 11px var(--font-body); }
.mobile-game-controls.drive-controls button { width: 104px; font: 800 10px var(--font-body); }
.mobile-game-controls.block-controls, .mobile-game-controls.salvage-controls { flex-wrap: wrap; }
.mobile-game-controls.block-controls button { width: 88px; font: 800 9px var(--font-body); }
.mobile-game-controls.salvage-controls button { width: 105px; font: 800 9px var(--font-body); }
.mobile-game-controls .fire-control { color: var(--red); border-color: rgba(255,45,45,.38); background: var(--red-soft); }

/* upgraded snake page */
.game-screen { max-width: 1280px; }
.game-intro { width: 100%; }
.mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border:1px solid var(--border);border-radius:16px;background:var(--surface) }
.mode-btn { min-width: 100px; border:0;border-radius:11px;background:transparent;color:var(--text-dim);padding:9px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px }.mode-btn strong{font-size:11px}.mode-btn small{font-size:8px;color:var(--text-faint)}.mode-btn.active{background:var(--text);color:#050505}.mode-btn.active small{color:rgba(0,0,0,.5)}
.stat-strip.five-up { grid-template-columns: repeat(5,1fr); }
.five-up .stat:last-child .stat-value { font-size: 12px; line-height: 26px; }
.mission-card { padding:14px;border:1px solid var(--border);background:rgba(255,45,45,.045);border-radius:12px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px }.mission-card strong{font-size:11px;line-height:1.5;color:var(--text-dim)}

/* responsiveness */
@media (max-width: 1100px) {
    .site-nav { grid-template-columns: 1fr auto; }
    .site-nav .nav-links { position: absolute; top: 72px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; border-radius: 18px; padding: 8px; background: rgba(10,10,11,.97); box-shadow: 0 22px 50px rgba(0,0,0,.5); }
    .site-nav .nav-links.open { display: flex; }
    .nav-links a { text-align:center; }
    .site-nav .nav-cta { display:none; }
    .menu-toggle { display:block; justify-self:end; }
    .hero { grid-template-columns: 1fr 450px; gap: 40px; }
    .lab-layout { grid-template-columns: minmax(0,1fr) 350px; }
    .interactive-grid { grid-template-columns: 1fr; }
    .cabinet-screen { height: 270px; }
}

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 80px; }
    .hero-console { min-height: 480px; transform:none; }
    .feature-wide { grid-template-columns:1fr; }
    .feature-wide .product-window { min-height:350px; }
    .process-grid { grid-template-columns: repeat(2,1fr); }
    .process-grid article:nth-child(2) { border-right:0; }
    .process-grid article:nth-child(-n+2) { border-bottom:1px solid var(--border); }
    .arcade-callout { grid-template-columns:1fr; }
    .arcade-stack { width:min(620px,100%);margin:auto; }
    .lab-hero,.arcade-hero { grid-template-columns:1fr;gap:30px; }
    .lab-hero > p,.arcade-hero > p { max-width:620px; }
    .arcade-flagship { min-height: 0; grid-template-columns: 1fr; }
    .flagship-screen { min-height: min(62vw, 520px); }
    .flagship-screen::after { background: linear-gradient(0deg, rgba(15,9,5,.75), transparent 42%); }
    .flagship-copy { padding: 42px; }
    .lab-toolbar { flex-direction:column;align-items:stretch; }
    .project-search { width:100%; }
    .lab-layout { grid-template-columns:1fr; }
    .interactive-grid { grid-template-columns:repeat(2,1fr); }
    .project-inspector { position:static;min-height:0;order:-1; }
    .lab-layout { display:flex;flex-direction:column-reverse; }
    .project-inspector { width:100%; }
    .cabinet-grid { grid-template-columns:1fr; }
    .cabinet-shelf-label { grid-template-columns: .7fr 1fr; }
    .cabinet-shelf-label small { grid-column: 1 / -1; }
    .arcade-resume { grid-template-columns: repeat(2, 1fr); }
    .arcade-resume > div { grid-column: 1 / -1; }
    .game-cabinet { display:grid;grid-template-columns:1fr 1fr;column-gap:20px; }
    .cabinet-top,.cabinet-screen { grid-column:1; }.cabinet-copy,.cabinet-stats,.cabinet-play{grid-column:2}.cabinet-copy{grid-row:1 / span 2;padding-top:45px}.cabinet-stats{align-self:end}.cabinet-play{align-self:end}.cabinet-screen{grid-row:2 / span 2}
    .cabinet-copy h2 { min-height: 0; }
    .arcade-rules { grid-template-columns:1fr;gap:25px; }
    .solo-game-layout { grid-template-columns:1fr; }
    .game-brief { position:static; }
    .mobile-game-controls { display:flex; }
}

@media (max-width: 650px) {
    .shell { width:min(100% - 24px,var(--shell)); }
    .site-nav { min-height:70px; }
    .brand-mark { width:34px;height:34px; }
    .brand-name { font-size:12px; }
    .hero { padding-block:55px 75px; }
    .hero-copy h1 { font-size:clamp(48px,16vw,76px); }
    .hero-lede { font-size:15px; }
    .hero-proof { justify-content:space-between;gap:10px; }
    .hero-proof strong { font-size:22px; }
    .hero-proof span { font-size:7px; }
    .hero-console { min-height:430px;padding:8px; }
    .console-stage { min-height:325px;padding:18px; }
    .console-tab { font-size:9px; }
    .signal-map { grid-template-columns:1fr 12px 1fr 12px 1fr;gap:2px; }
    .signal-node { font-size:7px;min-height:52px; }
    .signal-node.large { min-height:66px; }
    .featured,.process { padding-block:85px; }
    .section-head { align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:30px; }
    .section-head h2 { font-size:36px; }
    .featured-grid { grid-template-columns:1fr; }
    .feature-wide { grid-column:auto; }
    .feature-card { min-height:560px;padding:20px; }
    .feature-card h3 { font-size:36px; }
    .product-window,.feature-wide .product-window { min-height:290px;transform:none; }
    .feature-wide .preview-reviq { min-height:300px; }
    .mini-app { padding:18px;gap:14px; }
    .mini-chart { height:90px; }
    .process-grid { grid-template-columns:1fr; }
    .process-grid article { min-height:250px;border-right:0;border-bottom:1px solid var(--border); }
    .process-grid article:last-child { border-bottom:0; }
    .arcade-callout { margin-bottom:90px;padding:28px 20px;min-height:720px; }
    .arcade-copy h2 { font-size:52px; }
    .arcade-stack { min-height:330px;transform:scale(.78);transform-origin:top center;width:540px;left:50%;margin-left:-270px; }
    .main-footer { grid-template-columns:1fr;align-content:center;padding-block:40px; }
    .footer-links { flex-wrap:wrap; }
    .copyright { position:static;grid-column:1; }
    .lab-main,.arcade-main { padding-top:45px; }
    .lab-hero h1,.arcade-hero h1 { font-size:clamp(48px,15vw,76px); }
    .arcade-flagship { border-radius: 18px; }
    .flagship-screen { min-height: 58vw; }
    .flagship-screen > b { left: 14px; bottom: 13px; padding: 10px 12px; font-size: 8px; }
    .flagship-copy { padding: 33px 25px; }
    .flagship-copy::before { inset: 9px; }
    .flagship-copy h2 { font-size: clamp(62px, 21vw, 92px); }
    .flagship-features span { font-size: 7px; }.flagship-features b { font-size: 15px; }
    .lab-toolbar { top:0;padding-block:14px; }
    .filters { border-radius:14px; }
    .filter-btn { padding:8px 13px; }
    .interactive-grid { grid-template-columns:1fr; }
    .project-inspector { padding:14px; }
    .inspector-visual { height:230px; }
    .interactive-card { min-height:460px; }
    .game-cabinet { display:flex; }
    .cabinet-shelf-label { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; min-height: 0; padding: 20px; }
    .arcade-resume { grid-template-columns: 1fr; padding: 7px; }
    .arcade-resume > div { padding: 10px 8px; }
    .resume-card { min-height: 66px; }
    .cabinet-screen { height:280px; }
    .cabinet-copy { padding-top:25px; }
    .arcade-rules { padding:24px; }
    .rule-list { grid-template-columns:1fr; }
    .topbar-actions { gap:6px; }
    .topbar-actions .pill-btn { padding:9px 12px;font-size:11px; }
    .compact-intro { align-items:flex-start;flex-direction:column;gap:18px;padding-top:25px; }
    .compact-intro h1 { font-size:43px; }
    .standalone-game { padding:9px; }
    .standalone-hud,
    .standalone-hud.hud-five { grid-template-columns:repeat(2,1fr); }
    .standalone-hud.hud-five > div:last-child { grid-column: 1 / -1; }
    .standalone-canvas,.maze-canvas-wrap,.invader-canvas-wrap,.runner-canvas-wrap,.orbit-canvas-wrap,.redline-canvas-wrap,.salvage-canvas-wrap,.drop-canvas-wrap { min-height:0; }
    .signal-stage { min-height: 430px; }
    .signal-grid { width: min(92%, 390px); padding: 9px; gap: 6px; border-radius: 16px; }
    .signal-cell { border-radius: 10px; }
    .level-switcher-twelve { grid-template-columns: repeat(6, 1fr); }
    .mode-picker { width:100%; }
    .mode-btn { min-width:0;padding:8px; }
    .stat-strip.five-up { grid-template-columns:repeat(5,1fr); }
    .five-up .stat { padding:7px 4px;text-align:center;align-items:center; }
    .five-up .stat-label { font-size:8px; }
    .five-up .stat-value { font-size:16px; }
    .five-up .stat:last-child .stat-value { font-size:8px; }
}

@media (pointer: coarse) {
    .mobile-game-controls { display:flex; }
}

.redirect-page { background:#050505;color:#f5f5f7;font-family:system-ui,sans-serif;display:grid;place-items:center;min-height:100vh;margin:0; }
.redirect-page a { color:#ff2d2d; }

/* ================================================================
   RED ROBOT / MODERN STUDIO
   Restrained editorial system for the company and product index.
   The arcade keeps its own game-specific visual language.
   ================================================================ */

body.modern-site {
    --studio-bg: #0b0b0b;
    --studio-panel: #131313;
    --studio-panel-2: #181818;
    --studio-line: rgba(255,255,255,.12);
    --studio-muted: rgba(248,247,243,.62);
    --studio-faint: rgba(248,247,243,.38);
    --red: #ed322b;
    --red-glow: transparent;
    background: var(--studio-bg);
    background-image: none;
    color: #f8f7f3;
}

.modern-site .noise { display: none; }
.modern-site .shell { width: min(1360px, calc(100% - 56px)); }
.modern-site .site-nav { min-height: 76px; border-bottom: 1px solid var(--studio-line); }
.modern-site .brand { gap: 10px; }
.modern-site .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border-color: var(--studio-line);
    background: #151515;
    box-shadow: none;
}
.modern-site .brand-mark::before,
.modern-site .brand-mark::after,
.modern-site .brand-mark i { width: 6px; height: 6px; box-shadow: none; animation: none; }
.modern-site .brand-name { font-family: Inter, sans-serif; font-size: 13px; font-weight: 650; letter-spacing: -.01em; text-transform: none; }
.modern-site .brand small { color: var(--studio-faint); font-size: 7px; letter-spacing: .19em; text-transform: uppercase; }
.modern-site .nav-links { gap: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.modern-site .nav-links a { padding: 9px 2px; border-radius: 0; color: var(--studio-muted); font-size: 12px; font-weight: 500; }
.modern-site .nav-links a:hover,
.modern-site .nav-links a.active { color: #fff; background: transparent; }
.nav-live-dot { width: 5px; height: 5px; display: inline-block; margin-left: 4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(237,50,43,.1); vertical-align: middle; }
.modern-site .menu-toggle { border-radius: 8px; border-color: var(--studio-line); background: #151515; font-size: 11px; }
.modern-site .pill-btn {
    min-height: 42px;
    padding: 10px 16px;
    gap: 10px;
    border-radius: 8px;
    border-color: var(--studio-line);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.modern-site .pill-btn:hover { transform: translateY(-1px); background: #1c1c1c; }
.modern-site .pill-btn.solid { background: #f8f7f3; color: #0b0b0b; }
.modern-site .pill-btn.solid.red { background: var(--red); color: white; box-shadow: none; }
.modern-site .pill-btn.solid.red:hover { background: #ff443c; }
.modern-site .eyebrow {
    color: var(--studio-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
}

/* landing */
.arcade-ribbon { min-height: 48px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: clamp(18px, 4vw, 56px); margin-top: 14px; padding-inline: 17px; border: 1px solid rgba(237,50,43,.28); border-radius: 9px; color: #f8f7f3; text-decoration: none; background: linear-gradient(100deg, rgba(237,50,43,.12), rgba(255,255,255,.02) 42%, transparent); transition: border-color .2s ease, background .2s ease; }
.arcade-ribbon:hover { border-color: rgba(237,50,43,.55); background: linear-gradient(100deg, rgba(237,50,43,.17), rgba(255,255,255,.035) 42%, transparent); }
.arcade-ribbon > span { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 650; }
.arcade-ribbon > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(237,50,43,.8); }
.arcade-ribbon strong, .arcade-ribbon em { color: var(--studio-faint); font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.arcade-ribbon b { display: flex; align-items: center; gap: 14px; color: #f8f7f3; font-size: 10px; font-weight: 650; }
.arcade-ribbon b span { color: var(--red); font-size: 16px; }
.modern-site .hero-modern {
    min-height: auto;
    grid-template-columns: minmax(380px, .82fr) minmax(520px, 1.18fr);
    gap: clamp(48px, 7vw, 110px);
    padding-block: 105px 96px;
}
.modern-site .hero-copy h1 {
    max-width: 720px;
    margin: 28px 0 30px;
    font-size: clamp(54px, 6.8vw, 104px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 600;
}
.modern-site .hero-copy h1 span { color: #f8f7f3; text-shadow: none; }
.modern-site .hero-copy h1 .play-word { color: var(--red); }
.modern-site .hero-lede { max-width: 630px; color: var(--studio-muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; }
.modern-site .hero-actions { margin: 34px 0 0; }
.hero-workboard { min-width: 0; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.work-frame { min-width: 0; min-height: 210px; position: relative; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 12px; background: #151515; color: white; text-decoration: none; }
.work-frame-main { grid-row: 1 / 3; min-height: 510px; }
.work-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.work-frame:hover img { transform: scale(1.018); }
.work-frame > span,
.arcade-product-shot > span { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 7px; background: rgba(9,9,9,.88); color: white; backdrop-filter: blur(10px); }
.work-frame > span b,
.arcade-product-shot > span b { font-size: 12px; }
.work-frame > span small,
.arcade-product-shot > span small { color: rgba(255,255,255,.6); font-size: 10px; }
.studio-strip { min-height: 90px; border-block: 1px solid var(--studio-line); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.studio-strip > p { font-size: 13px; font-weight: 600; }
.studio-strip > div { display: flex; gap: clamp(22px, 5vw, 70px); color: var(--studio-faint); font-size: 11px; }
.studio-strip span { display: flex; align-items: baseline; gap: 7px; }
.studio-strip b { color: #f8f7f3; font-size: 14px; }

.home-arcade-live { padding-block: 120px 128px; border-bottom: 1px solid var(--studio-line); }
.home-arcade-live .section-head > p { max-width: 520px; }
.arcade-feature-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 10px; }
.arcade-feature-card { min-width: 0; min-height: 540px; position: relative; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 13px; background: #101010; color: #fff; text-decoration: none; }
.arcade-feature-card::after { content: ''; position: absolute; inset: 34% 0 0; background: linear-gradient(transparent, rgba(5,5,5,.7) 35%, rgba(5,5,5,.98)); pointer-events: none; }
.arcade-feature-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; filter: saturate(.92); transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.reel-feature-card img { object-fit: contain; object-position: center; background: #21170f; }
.arcade-feature-card:hover img { transform: scale(1.025); filter: saturate(1.1); }
.arcade-feature-main { min-height: 610px; }
.arcade-feature-top { position: absolute; z-index: 2; inset: 12px 12px auto; display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 7px; background: rgba(6,6,6,.82); backdrop-filter: blur(8px); }
.arcade-feature-top b { color: var(--red); font-size: 9px; }
.arcade-feature-top em { color: rgba(255,255,255,.58); font-size: 8px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.arcade-feature-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 23px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.arcade-feature-copy small { color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.arcade-feature-copy strong { font-size: clamp(31px, 3.4vw, 52px); font-weight: 600; line-height: .92; letter-spacing: -.045em; }
.arcade-feature-copy i { margin-top: 8px; color: rgba(255,255,255,.8); font-size: 10px; font-style: normal; font-weight: 650; }
.arcade-feature-footer { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0 0; }
.arcade-feature-footer > span { max-width: 720px; color: var(--studio-faint); font-size: 10px; line-height: 1.6; }

.modern-site .featured,
.modern-site .process { padding-block: 120px; }
.modern-site .section-head { margin-bottom: 40px; }
.modern-site .section-head h2 { max-width: 760px; margin-top: 15px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.01; font-weight: 600; letter-spacing: -.052em; }
.modern-site .section-head > p { color: var(--studio-muted); }
.modern-site .text-link { color: #f8f7f3; font-size: 11px; font-weight: 600; border-color: var(--studio-line); }
.modern-site .text-link span { color: var(--red); }
.modern-featured { gap: 12px; }
.modern-site .feature-card {
    min-height: 520px;
    padding: 18px;
    gap: 0;
    border-radius: 14px;
    border-color: var(--studio-line);
    background: var(--studio-panel);
    opacity: 1;
    transform: none;
    transition: border-color .2s ease, transform .25s ease;
}
.modern-site .feature-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
.modern-site .feature-wide { min-height: 590px; grid-template-columns: 1.15fr .85fr; gap: 36px; }
.modern-site .feature-wide .feature-shot { grid-column: 1; }
.modern-site .feature-wide .feature-copy { grid-column: 2; padding: 12px 6px 8px 0; }
.feature-shot { height: 310px; overflow: hidden; display: block; border: 1px solid var(--studio-line); border-radius: 9px; background: #0d0d0d; }
.feature-wide .feature-shot { height: 100%; min-height: 550px; }
.feature-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.feature-shot:hover img { transform: scale(1.018); }
.modern-site .feature-card .card-meta { margin-top: 22px; color: var(--studio-faint); font-size: 9px; letter-spacing: .1em; }
.modern-site .feature-wide .card-meta { margin-top: 0; }
.modern-site .feature-card h3 { margin: 28px 0 15px; font-size: clamp(32px, 3.8vw, 56px); font-weight: 600; }
.modern-site .feature-card p { color: var(--studio-muted); font-size: 14px; line-height: 1.65; }
.modern-site .feature-card > .text-link { margin-top: auto; align-self: flex-start; }

.modern-site .process { border-top-color: var(--studio-line); }
.modern-site .process-grid { border-radius: 12px; border-color: var(--studio-line); }
.modern-site .process-grid article { min-height: 270px; padding: 26px; border-color: var(--studio-line); opacity: 1; transform: none; }
.modern-site .process-grid .step-no { color: var(--studio-faint); font-size: 10px; }
.modern-site .process-grid h3 { margin-top: auto; font-size: 19px; font-weight: 600; }
.modern-site .process-grid p { color: var(--studio-muted); }
.modern-site .modern-arcade-callout {
    min-height: 610px;
    grid-template-columns: .8fr 1.2fr;
    margin-block: 0 120px;
    padding: 28px;
    border-radius: 14px;
    border-color: var(--studio-line);
    background: var(--studio-panel);
    opacity: 1;
    transform: none;
}
.modern-site .modern-arcade-callout .arcade-copy { padding: clamp(14px, 3vw, 42px); }
.modern-site .arcade-copy h2 { margin: 25px 0; font-size: clamp(48px, 5vw, 76px); line-height: .95; letter-spacing: -.055em; font-weight: 600; }
.arcade-product-shot { height: 100%; min-height: 540px; position: relative; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 10px; background: #080808; text-decoration: none; }
.arcade-product-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.arcade-product-shot:hover img { transform: scale(1.018); }

/* product index */
.modern-site.lab-page { background-image: none; }
.modern-site .lab-main { padding-top: 92px; }
.modern-site .lab-hero { grid-template-columns: 1.25fr .75fr; gap: 80px; padding-bottom: 75px; border-bottom-color: var(--studio-line); }
.modern-site .lab-hero h1 { margin-top: 24px; font-size: clamp(62px, 8vw, 116px); line-height: .9; letter-spacing: -.065em; font-weight: 600; }
.modern-site .lab-hero > p { max-width: 530px; color: var(--studio-muted); font-size: 15px; line-height: 1.7; }
.release-rail { display: grid; grid-template-columns: 1.05fr repeat(4, 1fr); gap: 7px; padding-block: 14px; border-bottom: 1px solid var(--studio-line); }
.release-rail-intro { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 14px 10px 0; }
.release-rail-intro strong { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.release-chip { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 72px; position: relative; padding: 10px 12px; border: 1px solid var(--studio-line); border-radius: 8px; color: #f8f7f3; text-decoration: none; background: var(--studio-panel); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.release-chip:hover { transform: translateY(-2px); border-color: rgba(237,50,43,.42); background: var(--studio-panel-2); }
.release-chip > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(237,50,43,.35); color: var(--red); font-size: 8px; }
.release-chip > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.release-chip small { overflow: hidden; color: var(--studio-faint); font-size: 7px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.release-chip b { font-size: 11px; font-weight: 600; }
.release-chip i { grid-column: 2; color: var(--studio-faint); font-size: 8px; font-style: normal; }
.reel-release-chip { border-color: rgba(226,176,73,.28); background: linear-gradient(135deg, rgba(185,49,42,.12), rgba(226,176,73,.07)); }.reel-release-chip > span { color: #e4b348; border-color: rgba(228,179,72,.38); }
.modern-site .lab-toolbar { top: 0; padding-block: 18px; background: rgba(11,11,11,.94); backdrop-filter: blur(14px); }
.modern-site .filters { gap: 3px; padding: 3px; border-radius: 9px; border-color: var(--studio-line); background: var(--studio-panel); }
.modern-site .filter-btn { padding: 9px 13px; border-radius: 6px; color: var(--studio-muted); font-size: 11px; font-weight: 500; transition: background .2s ease, color .2s ease; }
.modern-site .filter-btn.active { background: #f8f7f3; color: #0b0b0b; }
.modern-site .project-search { width: min(340px, 31vw); min-height: 43px; border-radius: 8px; border-color: var(--studio-line); background: var(--studio-panel); }
.modern-site .project-search > span { color: var(--studio-faint); font-size: 8px; letter-spacing: .1em; }
.modern-site .project-search input { color: #f8f7f3; font-size: 11px; }
.modern-site .lab-layout { grid-template-columns: minmax(0, 1fr) 430px; gap: 14px; }
.modern-site .results-line { color: var(--studio-faint); font-size: 8px; letter-spacing: .1em; }
.modern-site .interactive-grid { gap: 10px; }
.modern-site .interactive-card {
    min-height: 460px;
    padding: 12px;
    gap: 9px;
    border-radius: 12px;
    border-color: var(--studio-line);
    background: var(--studio-panel);
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    transition: transform .24s ease, border-color .2s ease, background .2s ease;
}
.modern-site .interactive-card:hover,
.modern-site .interactive-card:focus-within,
.modern-site .interactive-card.selected { transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: var(--studio-panel-2); box-shadow: none; }
.modern-site .project-preview-wrap { height: 210px; border-radius: 8px; border-color: var(--studio-line); background: #0d0d0d; }
.project-shot { width: 100%; height: 100%; position: relative; margin: 0; overflow: hidden; background: #0d0d0d; }
.project-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.project-shot.game-capture { background: #08090c; }
.project-shot.game-capture img { object-fit: contain; object-position: center; }
.interactive-card:hover .project-shot img { transform: scale(1.018); }
.project-shot figcaption { position: absolute; inset: auto 6px 6px; display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 5px; background: rgba(8,8,8,.86); color: rgba(255,255,255,.7); font-size: 8px; backdrop-filter: blur(8px); }
.project-shot figcaption span:last-child { color: rgba(255,255,255,.4); }
.project-access-cover { height: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; overflow: hidden; background: linear-gradient(135deg, #191919, #101010); }
.project-access-cover::before { content: ''; position: absolute; inset: auto -30px -55px auto; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.access-index { color: var(--studio-faint); font-size: 8px; letter-spacing: .12em; }
.access-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.access-copy > span { color: var(--accent); font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.access-copy strong { font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.access-copy p { color: var(--studio-faint); font-size: 9px; }
.access-glyph { position: absolute; right: 15px; bottom: 5px; color: rgba(255,255,255,.045); font-size: 78px; font-weight: 700; letter-spacing: -.09em; }
.modern-site .interactive-card .card-top { margin-top: 3px; }
.card-index { color: var(--studio-faint); font-size: 9px; }
.modern-site .status-badge { padding: 4px 8px; border-radius: 5px; color: var(--studio-faint); font-size: 7px; letter-spacing: .08em; background: transparent; border-color: var(--studio-line); }
.modern-site .status-badge::before { width: 4px; height: 4px; }
.modern-site .status-badge.live { color: #8fc49d; border-color: rgba(143,196,157,.3); background: transparent; }
.modern-site .status-badge.oss { color: #aaa1d3; border-color: rgba(170,161,211,.3); background: transparent; }
.modern-site .status-badge.dev { color: #89aec0; border-color: rgba(137,174,192,.3); background: transparent; }
.modern-site .status-badge.new { color: #d3a9bf; border-color: rgba(211,169,191,.3); background: transparent; }
.modern-site .interactive-card .card-tag { margin: 5px 0 -4px; color: var(--studio-faint); font-size: 8px; letter-spacing: .12em; }
.modern-site .interactive-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.modern-site .interactive-card > p { color: var(--studio-muted); font-size: 11px; line-height: 1.55; }
.modern-site .card-actions { border-top-color: var(--studio-line); }
.modern-site .inspect-action,
.modern-site .mini-action { color: var(--studio-muted); font-size: 9px; font-weight: 600; }
.modern-site .mini-action:not(.unavailable) { color: #f8f7f3; }
.modern-site .project-inspector { min-height: 706px; padding: 14px; border: 1px solid var(--studio-line); border-radius: 12px; background: var(--studio-panel); }
.modern-site .inspector-head { min-height: 28px; margin-bottom: 12px; }
.modern-site .inspector-head #inspectorIndex { color: var(--studio-faint); font-size: 9px; }
.modern-site .inspector-visual { height: 315px; border-radius: 8px; border-color: var(--studio-line); }
.modern-site .inspector-meta { margin-top: 17px; color: var(--studio-faint); font-size: 8px; letter-spacing: .1em; }
.modern-site .project-inspector h2 { margin: 18px 0 9px; font-size: 36px; font-weight: 600; letter-spacing: -.045em; }
.modern-site .project-inspector > p { color: var(--studio-muted); font-size: 12px; line-height: 1.6; }
.modern-site .capability-list { gap: 5px; margin: 16px 0; }
.modern-site .capability-list span { min-height: 32px; padding: 7px 9px; border-radius: 6px; border-color: var(--studio-line); color: var(--studio-muted); font-size: 10px; }
.modern-site .capability-list i { width: 4px; height: 4px; background: var(--accent); box-shadow: none; }
.modern-site .project-inspector .inspector-note { color: var(--studio-faint); font-size: 8px; }
.modern-site .empty-state { border-radius: 10px; border-color: var(--studio-line); }

.modern-site .main-footer { border-top-color: var(--studio-line); }
.modern-site .footer-brand strong { font-size: 13px; font-weight: 600; }
.modern-site .footer-brand p,
.modern-site .footer-links a,
.modern-site .copyright { color: var(--studio-faint); }

@media (max-width: 1100px) {
    .modern-site .shell { width: min(100% - 36px, 1360px); }
    .modern-site .site-nav .nav-links { top: 68px; padding: 12px; border: 1px solid var(--studio-line); border-radius: 9px; background: #111; }
    .modern-site .site-nav .nav-links a { text-align: left; }
    .modern-site .hero-modern { grid-template-columns: 1fr; }
    .hero-workboard { min-height: 560px; }
    .arcade-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .arcade-feature-main { grid-column: 1 / -1; }
    .release-rail { grid-template-columns: repeat(3, 1fr); }
    .release-rail-intro { grid-column: 1 / -1; padding-left: 0; }
    .modern-site .lab-layout { grid-template-columns: minmax(0,1fr) 370px; }
}

@media (max-width: 900px) {
    .modern-site .hero-modern { padding-block: 76px; }
    .arcade-ribbon { grid-template-columns: 1fr auto auto; }
    .arcade-ribbon em { display: none; }
    .modern-site .feature-wide { grid-template-columns: 1fr; }
    .modern-site .feature-wide .feature-shot,
    .modern-site .feature-wide .feature-copy { grid-column: 1; }
    .modern-site .feature-wide .feature-shot { min-height: 400px; }
    .modern-site .modern-arcade-callout { grid-template-columns: 1fr; }
    .arcade-product-shot { min-height: 430px; }
    .modern-site .lab-hero { grid-template-columns: 1fr; gap: 28px; }
    .modern-site .lab-toolbar { align-items: stretch; }
    .modern-site .project-search { width: 100%; }
    .modern-site .lab-layout { display: flex; flex-direction: column; }
    .modern-site .project-inspector { width: 100%; min-height: 0; position: static; }
    .modern-site .inspector-visual { height: 430px; }
}

@media (max-width: 650px) {
    .modern-site .shell { width: min(100% - 24px, 1360px); }
    .modern-site .site-nav { min-height: 68px; }
    .arcade-ribbon { min-height: 52px; grid-template-columns: 1fr auto; gap: 10px; margin-top: 10px; padding-inline: 12px; }
    .arcade-ribbon > strong { display: none; }
    .arcade-ribbon b { font-size: 9px; }
    .modern-site .hero-modern { padding-block: 58px 70px; }
    .modern-site .hero-copy h1 { font-size: clamp(48px, 15vw, 72px); line-height: .95; }
    .hero-workboard { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
    .work-frame,
    .work-frame-main { grid-row: auto; min-height: 250px; }
    .work-frame-main { min-height: 390px; }
    .studio-strip { align-items: flex-start; flex-direction: column; padding-block: 25px; }
    .studio-strip > div { width: 100%; justify-content: space-between; gap: 12px; }
    .studio-strip span { flex-direction: column; gap: 3px; }
    .home-arcade-live { padding-block: 84px; }
    .arcade-feature-grid { grid-template-columns: 1fr; }
    .arcade-feature-main { grid-column: auto; }
    .arcade-feature-card,
    .arcade-feature-main { min-height: 440px; }
    .arcade-feature-copy { left: 18px; right: 18px; bottom: 18px; }
    .arcade-feature-copy strong { font-size: 36px; }
    .arcade-feature-footer { align-items: flex-start; flex-direction: column; padding-top: 20px; }
    .release-rail { grid-template-columns: 1fr; padding-block: 12px 20px; }
    .release-rail-intro { grid-column: auto; }
    .modern-site .featured,
    .modern-site .process { padding-block: 84px; }
    .modern-site .featured-grid { grid-template-columns: 1fr; }
    .modern-site .feature-card,
    .modern-site .feature-wide { min-height: 510px; padding: 12px; }
    .modern-site .feature-wide .feature-shot { min-height: 340px; }
    .modern-site .feature-card h3 { font-size: 34px; }
    .modern-site .process-grid { grid-template-columns: 1fr; }
    .modern-site .process-grid article { min-height: 210px; }
    .modern-site .modern-arcade-callout { min-height: 0; margin-bottom: 80px; padding: 12px; }
    .modern-site .modern-arcade-callout .arcade-copy { padding: 26px 12px; }
    .arcade-product-shot { min-height: 390px; }
    .modern-site .lab-main { padding-top: 58px; }
    .modern-site .lab-hero h1 { font-size: clamp(54px, 17vw, 82px); }
    .modern-site .interactive-grid { grid-template-columns: 1fr; }
    .modern-site .interactive-card { min-height: 445px; }
    .modern-site .project-preview-wrap { height: 230px; }
    .modern-site .inspector-visual { height: 260px; }
    .modern-site .main-footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .modern-site *, .modern-site *::before, .modern-site *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}