@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap');
:root {
    --bg:#0d1117;
    --panel:#151b24;
    --panel2:#1d2632;
    --line:#344155;
    --text:#eaf1ff;
    --muted:#9aa7bb;
    --green:#8dff8a;
    --gold:#f0bd4f;
    --blue:#63b3ff;
    --red:#ff6262;
    --shadow:6px 6px 0 #05070a;
    --pixel:'Press Start 2P',monospace;
    --mono:'Space Mono',monospace
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--mono);
    line-height:1.65;
    overflow-x:hidden
}
a {
    color:inherit;
    text-decoration:none
}
img {
    max-width:100%;
    display:block
}
button,input,select,textarea {
    font:inherit
}
.noise {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.035;
    z-index:999;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")
}
.boot {
    position:fixed;
    inset:0;
    background:#05070a;
    z-index:5000;
    display:grid;
    place-items:center;
    transition:.55s
}
.boot.hide {
    opacity:0;
    visibility:hidden
}
.boot-box {
    width:min(520px,88vw);
    font-family:var(--pixel);
    font-size:11px
}
.boot-track {
    height:18px;
    border:3px solid var(--text);
    margin:24px 0
}
.boot-track span {
    display:block;
    width:0;
    height:100%;
    background:var(--green);
    transition:width .2s
}
.site-header {
    height:82px;
    padding:0 4vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:3px solid var(--line);
    background:rgba(13,17,23,.92);
    backdrop-filter:blur(16px);
    position:sticky;
    top:0;
    z-index:100
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--pixel);
    font-size:13px
}
.brand>span:last-child>span {
    color:var(--green)
}
.brand-cube {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:var(--green);
    color:#08100a;
    box-shadow:4px 4px 0 #2c6530
}
.site-header nav {
    display:flex;
    gap:26px;
    font-family:var(--pixel);
    font-size:9px
}
.site-header nav a:hover {
    color:var(--green)
}
.menu-toggle {
    display:none
}
.icon-btn,.menu-toggle {
    background:none;
    color:var(--text);
    border:2px solid var(--line);
    padding:10px 12px;
    font-family:var(--pixel);
    font-size:8px
}
.hero {
    min-height:calc(100vh - 82px);
    padding:8vw 5vw 6vw;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:5vw;
    position:relative;
    overflow:hidden
}
.hero-grid {
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(99,179,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,179,255,.07) 1px,transparent 1px);
    background-size:40px 40px;
    mask-image:linear-gradient(to bottom,black,transparent)
}
.eyebrow,.section-heading>span,.page-hero>span,.join-panel>div>span,.admin-kicker {
    font-family:var(--pixel);
    font-size:9px;
    color:var(--gold);
    letter-spacing:1px
}
.hero h1,.page-hero h1 {
    font-family:var(--pixel);
    font-size:clamp(36px,6vw,78px);
    line-height:1.25;
    margin:24px 0
}
.hero h1 span {
    color:var(--green);
    text-shadow:6px 6px 0 #1d4d24
}
.hero p {
    font-size:18px;
    color:var(--muted);
    max-width:720px
}
.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:34px
}
.pixel-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:3px solid var(--text);
    padding:15px 18px;
    background:var(--panel);
    color:var(--text);
    font-family:var(--pixel);
    font-size:9px;
    box-shadow:4px 4px 0 #000;
    cursor:pointer
}
.pixel-btn:hover {
    transform:translate(2px,2px);
    box-shadow:2px 2px 0 #000
}
.pixel-btn.primary {
    background:var(--green);
    color:#08100a;
    border-color:var(--green)
}
.hero-tags {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px
}
.hero-tags span,.badge {
    font-family:var(--pixel);
    font-size:7px;
    border:2px solid var(--line);
    padding:8px 10px;
    background:#0f141b
}
.workshop-scene {
    height:520px;
    position:relative;
    background:linear-gradient(#172334 0 62%,#222b34 62%);
    border:5px solid #344155;
    box-shadow:12px 12px 0 #05070a;
    image-rendering:pixelated
}
.window {
    position:absolute;
    left:8%;
    top:8%;
    width:42%;
    height:34%;
    background:#102943;
    border:8px solid #4e5c6e;
    overflow:hidden
}
.window:before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(155deg,transparent 45%,rgba(99,179,255,.35) 46% 51%,transparent 52%)
}
.window i {
    position:absolute;
    width:5px;
    height:5px;
    background:white;
    animation:twinkle 2s infinite
}
.window i:nth-child(1) {
    left:20%;
    top:25%
}
.window i:nth-child(2) {
    left:70%;
    top:18%;
    animation-delay:.7s
}
.window i:nth-child(3) {
    left:56%;
    top:70%;
    animation-delay:1.2s
}
.desk {
    position:absolute;
    left:12%;
    right:8%;
    bottom:24%;
    height:10%;
    background:#714c2f;
    border:5px solid #2c1c14
}
.monitor {
    position:absolute;
    left:38%;
    bottom:34%;
    width:31%;
    height:29%;
    background:#687584;
    border:7px solid #262e37
}
.screen {
    position:absolute;
    inset:12%;
    background:#07100b;
    color:var(--green);
    display:grid;
    place-items:center;
    font-family:var(--pixel);
    text-align:center;
    box-shadow:inset 0 0 30px rgba(141,255,138,.22);
    animation:screenGlow 2s infinite
}
.screen b {
    font-size:30px
}
.screen small {
    font-size:7px
}
.lamp {
    position:absolute;
    right:12%;
    top:12%;
    width:18px;
    height:120px;
    background:#697482
}
.lamp:before {
    content:'';
    position:absolute;
    right:-35px;
    top:-8px;
    border-left:45px solid transparent;
    border-right:45px solid transparent;
    border-bottom:60px solid var(--gold);
    transform:rotate(180deg)
}
.cabinet {
    position:absolute;
    left:9%;
    bottom:0;
    width:18%;
    height:34%;
    background:#242c38;
    border:6px solid #455163;
    display:grid;
    place-items:center;
    font-family:var(--pixel);
    font-size:9px;
    color:var(--blue)
}
.robot {
    position:absolute;
    right:14%;
    bottom:8%;
    width:64px;
    height:82px;
    background:#aeb9c5;
    border:5px solid #313a44;
    display:grid;
    place-items:center;
    color:#26313d;
    font-size:28px;
    animation:robotBob 1.6s steps(2) infinite
}
.robot i {
    position:absolute;
    bottom:-14px;
    width:34px;
    height:14px;
    background:#4b5662
}
.floor-glow {
    position:absolute;
    right:8%;
    bottom:1%;
    width:150px;
    height:20px;
    background:rgba(99,179,255,.18);
    filter:blur(8px)
}
.scroll-cue {
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--pixel);
    font-size:7px;
    color:var(--muted);
    animation:bounce 1s infinite
}
.ticker {
    overflow:hidden;
    border-block:3px solid var(--line);
    background:var(--green);
    color:#07100a;
    font-family:var(--pixel);
    font-size:9px;
    white-space:nowrap
}
.ticker div {
    padding:13px 0;
    display:inline-block;
    animation:ticker 25s linear infinite
}
.section {
    padding:100px 5vw;
    max-width:1500px;
    margin:auto
}
.section-heading {
    max-width:850px;
    margin-bottom:46px
}
.section-heading h2,.split-panel h2,.join-panel h2 {
    font-family:var(--pixel);
    font-size:clamp(25px,3.5vw,48px);
    line-height:1.35;
    margin:16px 0
}
.section-heading p,.join-panel p {
    color:var(--muted);
    font-size:17px
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
}
.project-card {
    background:var(--panel);
    border:3px solid var(--line);
    box-shadow:var(--shadow);
    transition:.25s
}
.project-card:hover {
    transform:translateY(-8px);
    border-color:var(--green)
}
.card-image {
    aspect-ratio:16/10;
    background:#0b0f14;
    position:relative;
    overflow:hidden
}
.card-image img {
    width:100%;
    height:100%;
    object-fit:cover
}
.card-image .badge {
    position:absolute;
    left:12px;
    bottom:12px;
    background:var(--gold);
    color:#111;
    border-color:#111
}
.placeholder-art {
    height:100%;
    display:grid;
    place-items:center;
    font-family:var(--pixel);
    font-size:16px;
    text-align:center;
    background:repeating-linear-gradient(45deg,#151b24,#151b24 12px,#1b2430 12px,#1b2430 24px)
}
.card-body {
    padding:24px
}
.card-meta {
    font-family:var(--pixel);
    font-size:7px;
    color:var(--blue)
}
.card-body h3 {
    font-family:var(--pixel);
    font-size:15px;
    line-height:1.5
}
.card-body p {
    color:var(--muted)
}
.card-body a,.news-card a {
    color:var(--green);
    font-family:var(--pixel);
    font-size:8px
}
.center {
    text-align:center;
    margin-top:44px
}
.split-panel {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:28px
}
.panel {
    border:3px solid var(--line);
    background:var(--panel);
    box-shadow:var(--shadow)
}
.terminal-head {
    height:45px;
    background:#293342;
    border-bottom:3px solid var(--line);
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 14px
}
.terminal-head span {
    width:11px;
    height:11px;
    background:var(--red)
}
.terminal-head span:nth-child(2) {
    background:var(--gold)
}
.terminal-head span:nth-child(3) {
    background:var(--green)
}
.terminal-head b {
    font-family:var(--pixel);
    font-size:7px;
    margin-left:10px
}
.terminal-body {
    padding:30px
}
.green {
    color:var(--green)
}
.news-line {
    display:grid;
    grid-template-columns:60px 1fr;
    gap:10px;
    padding:14px 0;
    border-bottom:1px dashed var(--line)
}
.news-line time {
    color:var(--blue)
}
.news-line b {
    color:var(--gold)
}
.terminal-link {
    display:block;
    color:var(--green);
    margin-top:24px
}
.arcade-promo {
    padding:42px;
    text-align:center;
    background:radial-gradient(circle at 50% 25%,#273b51,#151b24 65%)
}
.pixel-controller {
    width:220px;
    height:120px;
    background:#9ca8b6;
    margin:35px auto;
    position:relative;
    border:6px solid #333d49;
    box-shadow:8px 8px 0 #080b0e;
    border-radius:18px
}
.pixel-controller b {
    position:absolute;
    left:38px;
    top:38px;
    font-size:42px;
    line-height:1;
    color:#24303b
}
.pixel-controller em {
    position:absolute;
    right:38px;
    top:35px;
    background:var(--red);
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#111;
    font-weight:bold
}
.pixel-controller em:last-child {
    right:76px;
    top:58px
}
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.gallery-grid.large {
    grid-template-columns:repeat(3,1fr)
}
.gallery-item {
    border:3px solid var(--line);
    background:var(--panel);
    padding:0;
    color:inherit;
    text-align:left;
    cursor:pointer;
    position:relative;
    overflow:hidden
}
.gallery-item img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:.3s
}
.gallery-item:hover img {
    transform:scale(1.05)
}
.gallery-item span {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px;
    background:linear-gradient(transparent,rgba(0,0,0,.9));
    display:flex;
    justify-content:space-between;
    align-items:end
}
.gallery-item small {
    font-family:var(--pixel);
    font-size:6px;
    color:var(--green)
}
.join-panel {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--panel2);
    border:4px solid var(--green);
    box-shadow:10px 10px 0 #15361b
}
.site-footer {
    border-top:3px solid var(--line);
    padding:70px 5vw 30px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
    background:#090c11
}
.site-footer h3 {
    font-family:var(--pixel);
    font-size:9px;
    color:var(--gold)
}
.site-footer a {
    display:block;
    margin:8px 0
}
.site-footer p {
    color:var(--muted)
}
.footer-status {
    grid-column:1/-1;
    font-family:var(--pixel);
    font-size:8px
}
.footer-status span {
    display:inline-block;
    width:10px;
    height:10px;
    background:var(--green);
    box-shadow:0 0 12px var(--green)
}
.copyright {
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:20px
}
.to-top {
    position:fixed;
    right:22px;
    bottom:22px;
    background:var(--green);
    border:0;
    width:42px;
    height:42px;
    font-family:var(--pixel);
    opacity:0;
    pointer-events:none
}
.to-top.show {
    opacity:1;
    pointer-events:auto
}
.page-hero {
    padding:100px 5vw 70px;
    max-width:1500px;
    margin:auto;
    border-bottom:3px solid var(--line)
}
.page-hero p {
    max-width:760px;
    color:var(--muted);
    font-size:18px
}
.filters {
    display:grid;
    grid-template-columns:1fr 250px;
    gap:14px;
    margin-bottom:35px
}
.filters input,.filters select,.pixel-form input,.pixel-form select,.pixel-form textarea {
    width:100%;
    background:#0b1016;
    border:3px solid var(--line);
    color:var(--text);
    padding:16px
}
.news-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px
}
.news-card {
    display:grid;
    grid-template-columns:220px 1fr;
    background:var(--panel);
    border:3px solid var(--line)
}
.news-card img {
    width:100%;
    height:100%;
    object-fit:cover
}
.news-card>div {
    padding:24px
}
.news-card time {
    display:block;
    color:var(--muted);
    margin:12px 0
}
.news-card h2 {
    font-family:var(--pixel);
    font-size:15px;
    line-height:1.5
}
.detail-page,.article-page {
    max-width:1400px;
    margin:auto;
    padding:70px 5vw
}
.detail-hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center
}
.detail-hero img,.article-page header>img {
    width:100%;
    max-height:600px;
    object-fit:cover;
    border:4px solid var(--line);
    box-shadow:var(--shadow)
}
.detail-hero h1,.article-page h1 {
    font-family:var(--pixel);
    font-size:clamp(30px,4vw,58px);
    line-height:1.3
}
.detail-meta {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    font-family:var(--pixel);
    font-size:7px;
    color:var(--blue)
}
.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:50px;
    margin-top:60px
}
.article-content {
    font-size:17px
}
.article-content h2,.article-content h3,.text-page h2 {
    font-family:var(--pixel);
    line-height:1.5;
    margin-top:44px
}
.article-content a {
    color:var(--green);
    text-decoration:underline
}
.article-content img {
    border:3px solid var(--line)
}
.source-box {
    position:sticky;
    top:110px;
    background:var(--panel);
    border:3px solid var(--line);
    padding:25px
}
.source-box h3 {
    font-family:var(--pixel);
    font-size:10px;
    color:var(--gold)
}
.fine {
    font-size:12px;
    color:var(--muted)
}
.article-page header {
    max-width:1000px
}
.lead {
    font-size:20px;
    color:var(--muted)
}
.byline {
    font-family:var(--pixel);
    font-size:7px;
    color:var(--blue)
}
.arcade-layout {
    display:grid;
    grid-template-columns:1fr 340px;
    gap:35px
}
.game-shell {
    background:#090d12;
    border:4px solid var(--line);
    box-shadow:var(--shadow)
}
.game-top {
    display:flex;
    justify-content:space-between;
    padding:15px;
    font-family:var(--pixel);
    font-size:9px
}
.game-shell canvas {
    width:100%;
    background:#121a24;
    display:block;
    image-rendering:pixelated
}
.game-controls {
    display:none;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:10px
}
.game-controls button {
    background:var(--panel2);
    border:2px solid var(--line);
    color:white;
    padding:16px
}
.game-info {
    background:var(--panel);
    border:3px solid var(--line);
    padding:28px;
    height:max-content
}
.game-info h2 {
    font-family:var(--pixel);
    line-height:1.5
}
.text-page {
    max-width:900px
}
.form-wrap {
    max-width:850px
}
.pixel-form {
    display:grid;
    gap:22px
}
.pixel-form label {
    font-family:var(--pixel);
    font-size:8px
}
.pixel-form label input,.pixel-form label select,.pixel-form label textarea {
    margin-top:10px;
    font-family:var(--mono)
}
.honeypot {
    position:absolute!important;
    left:-9999px!important
}
.success,.error {
    padding:18px;
    border:3px solid
}
.success {
    border-color:var(--green);
    background:#102416
}
.error {
    border-color:var(--red);
    background:#2a1111
}
dialog {
    max-width:900px;
    width:90%;
    background:var(--panel);
    color:white;
    border:4px solid var(--line);
    padding:24px
}
dialog::backdrop {
    background:rgba(0,0,0,.85)
}
dialog img {
    max-height:70vh;
    margin:auto
}
#closeLightbox {
    float:right;
    background:var(--red);
    border:0;
    width:38px;
    height:38px;
    font-size:24px
}
.reveal {
    opacity:0;
    transform:translateY(25px);
    transition:.7s
}
.reveal.visible {
    opacity:1;
    transform:none
}
.empty-card {
    border:3px dashed var(--line);
    padding:40px;
    color:var(--muted)
}
@keyframes ticker {
    to {
        transform:translateX(-50%)
    }
}
@keyframes twinkle {
    50% {
        opacity:.2
    }
}
@keyframes screenGlow {
    50% {
        filter:brightness(1.35)
    }
}
@keyframes robotBob {
    50% {
        transform:translateY(-8px)
    }
}
@keyframes bounce {
    50% {
        transform:translate(-50%,6px)
    }
}
@media(max-width:1000px) {
    .site-header nav {
        display:none;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        background:#0d1117;
        padding:24px;
        flex-direction:column;
        border-bottom:3px solid var(--line)
    }
    .site-header nav.open {
        display:flex
    }
    .menu-toggle {
        display:block
    }
    .header-actions {
        display:none
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:80px
    }
    .workshop-scene {
        height:430px
    }
    .project-grid,.gallery-grid,.gallery-grid.large {
        grid-template-columns:repeat(2,1fr)
    }
    .split-panel,.detail-hero,.arcade-layout {
        grid-template-columns:1fr
    }
    .detail-layout {
        grid-template-columns:1fr
    }
    .source-box {
        position:static
    }
    .news-grid {
        grid-template-columns:1fr
    }
    .site-footer {
        grid-template-columns:1fr 1fr
    }
    .game-controls {
        display:grid
    }
}
@media(max-width:650px) {
    .site-header {
        height:68px
    }
    .brand {
        font-size:10px
    }
    .brand-cube {
        width:32px;
        height:32px
    }
    .hero {
        min-height:auto;
        padding:70px 20px
    }
    .hero h1,.page-hero h1 {
        font-size:34px
    }
    .hero p {
        font-size:15px
    }
    .workshop-scene {
        height:330px
    }
    .section,.detail-page,.article-page {
        padding:65px 20px
    }
    .project-grid,.gallery-grid,.gallery-grid.large {
        grid-template-columns:1fr
    }
    .split-panel {
        padding:65px 20px
    }
    .join-panel {
        margin:0 20px 65px;
        display:block
    }
    .join-panel .pixel-btn {
        margin-top:22px
    }
    .filters {
        grid-template-columns:1fr
    }
    .news-card {
        grid-template-columns:1fr
    }
    .news-card img {
        height:220px
    }
    .detail-hero {
        gap:25px
    }
    .detail-meta {
        display:grid
    }
    .site-footer {
        grid-template-columns:1fr;
        padding:55px 20px 25px
    }
    .page-hero {
        padding:75px 20px 55px
    }
    .arcade-layout {
        padding:50px 12px
    }
    .game-info {
        margin:0 8px
    }
    .window {
        width:50%
    }
    .monitor {
        left:36%;
        width:36%
    }
}