* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:#070a10;
    color:#edf2f7;
    font-family:Inter,system-ui,sans-serif;
    overflow-x:hidden
}
.noise {
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:50;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.cursor-glow {
    position:fixed;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,#79f2c012,transparent 65%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:1
}
.nav {
    height:76px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(20px,4vw,65px);
    border-bottom:1px solid #ffffff12;
    background:#070a10d9;
    backdrop-filter:blur(18px)
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:inherit;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.12em;
    font-size:13px
}
.brand-mark {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid #79f2c0;
    border-radius:9px;
    color:#79f2c0;
    font-family:"JetBrains Mono"
}
.dim {
    opacity:.35
}
.main-nav {
    display:flex;
    gap:22px;
    align-items:center
}
.main-nav a {
    color:#8f9ba6;
    text-decoration:none;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    transition:.2s
}
.main-nav a:hover {
    color:#79f2c0
}
.theme,.menu {
    background:none;
    border:0;
    color:inherit;
    cursor:pointer
}
.theme {
    font-size:19px
}
.menu {
    display:none
}
.hero {
    min-height:900px;
    position:relative;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    padding:140px clamp(20px,8vw,130px) 90px;
    overflow:hidden
}
.hero-grid {
    position:absolute;
    inset:0;
    background-image:linear-gradient(#79f2c00b 1px,transparent 1px),linear-gradient(90deg,#79f2c00b 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(#000,transparent 80%)
}
.hero-copy {
    position:relative;
    z-index:3
}
.eyebrow {
    font:600 11px "JetBrains Mono";
    letter-spacing:.2em;
    color:#79f2c0
}
.pulse {
    display:inline-block;
    width:7px;
    height:7px;
    background:#79f2c0;
    border-radius:50%;
    box-shadow:0 0 18px #79f2c0;
    margin-right:8px
}
.hero h1,.page-hero h1 {
    font-size:clamp(55px,7vw,105px);
    line-height:.92;
    letter-spacing:-.065em;
    margin:25px 0
}
.hero h1 em,.page-hero h1 em,h2 em,.cinema-title em {
    font-style:normal;
    color:#79f2c0
}
.lead {
    max-width:650px;
    color:#a8b1bd;
    font-size:18px;
    line-height:1.65
}
.hero-actions {
    display:flex;
    gap:12px;
    margin:34px 0
}
.btn {
    display:inline-block;
    padding:15px 20px;
    text-decoration:none;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
    border-radius:4px
}
.primary {
    background:#79f2c0;
    color:#07100c
}
.ghost {
    border:1px solid #28313b;
    color:#dce2e8
}
.terminal {
    max-width:600px;
    border:1px solid #202832;
    background:#0b1017;
    border-radius:7px;
    margin-top:40px;
    font:12px "JetBrains Mono"
}
.term-top {
    height:30px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 12px;
    border-bottom:1px solid #202832
}
.term-top span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#2b3540
}
.term-top b {
    margin-left:8px;
    color:#687481;
    font-weight:400
}
.term-body {
    padding:16px;
    line-height:1.8
}
.green,.cyan {
    color:#79f2c0
}
.caret {
    animation:blink 1s infinite;
    color:#79f2c0
}
.hero-orbit {
    height:550px;
    position:relative;
    display:grid;
    place-items:center
}
.orbit {
    position:absolute;
    border:1px solid #79f2c024;
    border-radius:50%
}
.o1 {
    width:470px;
    height:180px;
    transform:rotate(-25deg)
}
.o2 {
    width:350px;
    height:350px;
    transform:rotate(25deg)
}
.o3 {
    width:500px;
    height:500px;
    border-style:dashed;
    animation:spin 24s linear infinite
}
.core {
    width:180px;
    height:180px;
    border-radius:50%;
    display:grid;
    place-items:center;
    align-content:center;
    background:#0b1115;
    border:1px solid #315648;
    box-shadow:0 0 80px #79f2c01f;
    z-index:2
}
.core span {
    font-size:80px;
    font-weight:800;
    color:#79f2c0
}
.core small {
    font:10px "JetBrains Mono";
    color:#5e7c70
}
.ticker {
    overflow:hidden;
    border-block:1px solid #1b242c;
    padding:15px 0;
    white-space:nowrap;
    font:600 11px "JetBrains Mono";
    color:#697682;
    letter-spacing:.16em
}
.ticker div {
    animation:marquee 28s linear infinite
}
.section {
    max-width:1240px;
    margin:auto;
    padding:125px 30px
}
.section-head {
    display:grid;
    grid-template-columns:70px 1fr;
    gap:20px;
    margin-bottom:65px
}
.num {
    font:12px "JetBrains Mono";
    color:#46515d
}
.section h2 {
    font-size:clamp(40px,5vw,72px);
    line-height:.98;
    letter-spacing:-.055em
}
.page-hero {
    padding:190px clamp(25px,8vw,120px) 80px;
    border-bottom:1px solid #1b252d;
    background-image:linear-gradient(#79f2c007 1px,transparent 1px),linear-gradient(90deg,#79f2c007 1px,transparent 1px);
    background-size:70px 70px
}
.page-hero h1 {
    max-width:1050px
}
.prose {
    max-width:850px;
    font-size:18px;
    line-height:1.8;
    color:#aeb8c1
}
.prose h2 {
    font-size:clamp(42px,5vw,70px);
    line-height:1;
    letter-spacing:-.05em;
    color:#edf2f7
}
.prose .lead {
    font-size:27px
}
.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.card {
    display:block;
    text-decoration:none;
    color:inherit;
    border:1px solid #202a34;
    background:#0a0f15;
    padding:32px;
    min-height:210px;
    transition:.3s
}
.card:hover {
    border-color:#456657;
    transform:translateY(-5px)
}
.card b,.tag {
    font:10px "JetBrains Mono";
    letter-spacing:.16em;
    color:#79f2c0
}
.card h3 {
    font-size:25px;
    margin:35px 0 10px
}
.card p {
    color:#788590;
    line-height:1.7;
    font-size:14px
}
.project-cards {
    grid-template-columns:1fr 1fr
}
.big {
    min-height:300px
}
.timeline {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:90px
}
.tl {
    border-top:1px solid #31404a;
    padding:25px
}
.tl b {
    font:11px "JetBrains Mono";
    color:#79f2c0
}
.tl h3 {
    font-size:25px
}
.tl p {
    color:#77838e;
    line-height:1.6
}
.cinema {
    height:500px;
    display:grid;
    place-items:center;
    align-content:center;
    text-align:center;
    background:radial-gradient(circle at center,#17231f,#090d12 60%);
    border-block:1px solid #26323a
}
.cinema-title {
    font-size:clamp(55px,9vw,120px);
    font-weight:800;
    line-height:.82;
    letter-spacing:-.07em
}
.cinema-sub {
    font:10px "JetBrains Mono";
    letter-spacing:.3em;
    color:#667681;
    margin-top:30px
}
.process,.feature-list,.spec-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:70px
}
.architecture {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin:90px 0;
    font:700 13px "JetBrains Mono";
    color:#79f2c0
}
.architecture div {
    border:1px solid #315648;
    padding:20px 25px;
    background:#0a1111
}
.architecture span {
    color:#45545e
}
.hardware-visual {
    height:400px;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#15221e,#080c11 60%);
    border-block:1px solid #202d35
}
.server-box {
    width:400px;
    height:210px;
    border:1px solid #46685b;
    background:linear-gradient(#121c21,#080c11);
    box-shadow:0 0 70px #79f2c018;
    display:grid;
    place-items:center;
    align-content:center
}
.server-box span {
    font:11px "JetBrains Mono";
    color:#697681
}
.server-box b {
    font-size:70px;
    color:#79f2c0
}
.server-box small {
    font:9px "JetBrains Mono";
    color:#52625f
}
.contact-large {
    padding:40px 0 120px;
    max-width:1000px
}
.contact-large h2 {
    font-size:clamp(60px,9vw,120px);
    line-height:.86;
    letter-spacing:-.07em
}
.contact-large p {
    max-width:650px;
    color:#788590;
    font-size:18px;
    line-height:1.7
}
.contact-btn {
    display:inline-block;
    margin-top:30px;
    border:1px solid #79f2c0;
    color:#79f2c0;
    padding:22px 35px;
    text-decoration:none;
    font:11px "JetBrains Mono";
    letter-spacing:.15em
}
footer {
    border-top:1px solid #1b252d;
    padding:25px 5vw;
    display:flex;
    justify-content:space-between;
    color:#56626e;
    font:9px "JetBrains Mono";
    letter-spacing:.12em
}
.reveal {
    opacity:0;
    transform:translateY(30px);
    transition:.8s
}
.reveal.show {
    opacity:1;
    transform:none
}
@keyframes spin {
    to {
        transform:rotate(335deg)
    }
}
@keyframes marquee {
    to {
        transform:translateX(-50%)
    }
}
@keyframes blink {
    50% {
        opacity:0
    }
}
@media(max-width:1050px) {
    .main-nav {
        display:none
    }
    .menu {
        display:block
    }
    .hero {
        grid-template-columns:1fr
    }
    .hero-orbit {
        height:430px;
        order:-1
    }
    .cards,.timeline,.process,.feature-list,.spec-grid {
        grid-template-columns:1fr 1fr
    }
    .project-cards {
        grid-template-columns:1fr
    }
    .o1 {
        width:300px
    }
    .o2 {
        width:260px;
        height:260px
    }
    .o3 {
        width:350px;
        height:350px
    }
    .core {
        width:130px;
        height:130px
    }
    .core span {
        font-size:55px
    }
}
@media(max-width:650px) {
    .hero h1,.page-hero h1 {
        font-size:50px
    }
    .section {
        padding:85px 20px
    }
    .page-hero {
        padding:145px 20px 60px
    }
    .cards,.timeline,.process,.feature-list,.spec-grid {
        grid-template-columns:1fr
    }
    .section-head {
        grid-template-columns:40px 1fr
    }
    .stack-list {
        overflow:hidden
    }
    .contact-large h2 {
        font-size:55px
    }
    footer {
        flex-wrap:wrap;
        gap:12px
    }
    .cursor-glow {
        display:none
    }
}


/* ================================================================
   EXTENDED EDITION · shared components and accessibility
   ================================================================ */
:root {
    --site-bg: #070a10;
    --site-panel: #0a0f15;
    --site-panel-raised: #0d141b;
    --site-text: #edf2f7;
    --site-muted: #9aa6b2;
    --site-soft: #788590;
    --site-border: #202a34;
    --site-accent: #79f2c0;
    --site-accent-ink: #07100c;
    --site-nav: #070a10e8;
    --site-shadow: 0 24px 80px #00000030;
}

body {
    background: var(--site-bg);
    color: var(--site-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.light {
    --site-bg: #f1f5f3;
    --site-panel: #ffffff;
    --site-panel-raised: #e6eeea;
    --site-text: #14211d;
    --site-muted: #42534b;
    --site-soft: #5b6c64;
    --site-border: #cad9d1;
    --site-accent: #087c54;
    --site-accent-ink: #ffffff;
    --site-nav: #f1f5f3ed;
    --site-shadow: 0 24px 70px #173c2b18;
}

body.light .nav {
    background: var(--site-nav);
    border-color: var(--site-border);
}

body.light .main-nav a,
body.light .lead,
body.light .prose,
body.light .card p,
body.light .tl p,
body.light .contact-large p {
    color: var(--site-muted);
}

body.light .card,
body.light .mini-card,
body.light .fact-card,
body.light .note-card,
body.light .lab-controls,
body.light .lab-stage,
body.light .code-panel,
body.light .project-search,
body.light .empty-state {
    background: var(--site-panel);
    border-color: var(--site-border);
}

body.light .ghost,
body.light .filter-button,
body.light .control-row select,
body.light .control-row input[type="range"] {
    color: var(--site-text);
}

body.light .ghost,
body.light .filter-button {
    border-color: var(--site-border);
}

body.light .terminal {
    background: #e9f0ec;
    border-color: var(--site-border);
}

body.light .term-top {
    border-color: var(--site-border);
}

body.light .term-body,
body.light .term-top b {
    color: #33483e;
}

body.light .core,
body.light .architecture div,
body.light .server-box {
    background: #e2eee7;
}

body.light .page-hero,
body.light footer,
body.light .site-footer {
    border-color: var(--site-border);
}

body.light .cinema,
body.light .hardware-visual {
    background: radial-gradient(circle at center, #dbe9e1, #f1f5f3 66%);
    border-color: var(--site-border);
}

body.light .fact-card span,
body.light .footer-meta,
body.light .footer-brand p {
    color: var(--site-soft);
}

body.light .code-panel pre,
body.light .mini-card pre {
    background: #e9f0ec;
    color: #273b31;
}

body.light .noise {
    opacity: 0.018;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    transform: translateY(-150%);
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--site-accent);
    color: var(--site-accent-ink);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reading-progress {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 2px;
    z-index: 100;
    background: var(--site-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--site-accent) 40%, transparent);
}

.nav {
    background: var(--site-nav);
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: 16px;
}

.main-nav a.is-current {
    color: var(--site-accent);
}

.theme,
.menu {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--site-border);
    border-radius: 5px;
    color: var(--site-text);
    background: var(--site-panel);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.theme:hover,
.menu:hover {
    border-color: var(--site-accent);
    color: var(--site-accent);
}

.menu {
    gap: 5px;
    align-content: center;
}

.menu i {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.2s ease;
}

.menu[aria-expanded="true"] i:first-child {
    transform: translateY(3px) rotate(45deg);
}

.menu[aria-expanded="true"] i:last-child {
    transform: translateY(-3px) rotate(-45deg);
}

.btn,
.filter-button,
.back-top {
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.primary {
    background: var(--site-accent);
    color: var(--site-accent-ink);
}

.ghost {
    color: var(--site-text);
    border-color: var(--site-border);
}

.eyebrow,
.card b,
.card .tag,
.card-tags i,
.filter-button.is-active {
    color: var(--site-accent);
}

.project-page-hero .lead {
    max-width: 780px;
    margin-top: 28px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 34px;
    color: var(--site-soft);
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.06em;
}

.breadcrumbs a {
    color: var(--site-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--site-accent);
}

.section-intro {
    max-width: 650px;
    color: var(--site-muted);
    font-size: 16px;
    line-height: 1.7;
}

.section-compact {
    padding-top: 30px;
    padding-bottom: 95px;
}

.project-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr);
    gap: 18px;
    margin: 0 0 28px;
}

.project-search {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
}

.project-search > span:first-of-type {
    font-size: 24px;
    color: var(--site-accent);
}

.project-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--site-text);
    font: inherit;
}

.project-search input::placeholder {
    color: var(--site-soft);
}

.filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-button {
    padding: 10px 14px;
    border: 1px solid var(--site-border);
    border-radius: 3px;
    background: transparent;
    color: var(--site-muted);
    cursor: pointer;
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.04em;
}

.filter-button:hover,
.filter-button.is-active {
    border-color: var(--site-accent);
    color: var(--site-accent);
    background: color-mix(in srgb, var(--site-accent) 7%, transparent);
}

.filter-result {
    margin: 0;
    color: var(--site-soft);
    font: 10px "JetBrains Mono", monospace;
}

.project-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 330px;
}

.project-item h3 {
    margin-top: 30px;
}

.card-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 28px;
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.04em;
}

.card-more span {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.project-item:hover .card-more span {
    transform: translate(3px, -3px);
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.card-tags i {
    padding: 5px 7px;
    border: 1px solid var(--site-border);
    font: normal 9px "JetBrains Mono", monospace;
}

[hidden] {
    display: none !important;
}

.empty-state {
    padding: 65px 24px;
    border: 1px dashed var(--site-border);
    text-align: center;
    background: var(--site-panel);
}

.empty-state > span {
    color: var(--site-accent);
    font-size: 44px;
}

.empty-state p {
    color: var(--site-muted);
}

.detail-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding: clamp(28px, 5vw, 60px);
    border: 1px solid var(--site-border);
    background: linear-gradient(120deg, var(--site-panel), transparent);
}

.detail-cta > div {
    max-width: 720px;
}

.detail-cta h2 {
    margin: 20px 0 14px;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.detail-cta p {
    max-width: 620px;
    color: var(--site-muted);
    line-height: 1.7;
}

.case-section {
    padding-top: 90px;
}

.case-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: clamp(35px, 6vw, 90px);
    align-items: start;
}

.case-main {
    max-width: 800px;
}

.case-main h2 {
    margin-top: 20px;
}

.case-main h3 {
    margin: 42px 0 12px;
    color: var(--site-text);
    font-size: 22px;
    letter-spacing: -0.03em;
}

.case-main p,
.case-main li {
    color: var(--site-muted);
}

.numbered-list {
    display: grid;
    gap: 22px;
    padding-left: 24px;
}

.numbered-list li {
    padding-left: 7px;
}

.numbered-list li::marker {
    color: var(--site-accent);
    font-family: "JetBrains Mono", monospace;
}

.numbered-list strong,
.numbered-list span {
    display: block;
}

.numbered-list strong {
    margin-bottom: 5px;
    color: var(--site-text);
}

.check-list {
    display: grid;
    gap: 13px;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 29px;
    line-height: 1.7;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--site-accent);
    font-family: "JetBrains Mono", monospace;
}

.case-sidebar {
    display: grid;
    gap: 10px;
}

.fact-card,
.note-card {
    padding: 20px;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
}

.fact-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--site-soft);
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
}

.fact-card b {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.note-card {
    margin-top: 12px;
    background: color-mix(in srgb, var(--site-accent) 5%, var(--site-panel));
}

.note-card p,
.warning-note {
    color: var(--site-muted);
    font-size: 13px;
    line-height: 1.8;
}

.warning-note {
    margin-top: 30px;
    padding: 18px 20px;
    border-left: 2px solid var(--site-accent);
    background: var(--site-panel);
}

.warning-note strong {
    color: var(--site-text);
}

.flow-diagram {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin: 42px 0;
}

.flow-diagram > div {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 22px 18px;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
}

.flow-diagram > div > b {
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
}

.flow-diagram strong {
    margin: 18px 0 8px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.flow-diagram span {
    color: var(--site-soft);
    font-size: 11px;
    line-height: 1.6;
}

.flow-diagram > i {
    align-self: center;
    color: var(--site-accent);
    font-style: normal;
}

.three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-card {
    padding: 28px;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
}

.mini-card > span {
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
}

.mini-card h3 {
    margin: 28px 0 12px;
    font-size: 20px;
}

.mini-card p {
    color: var(--site-muted);
    line-height: 1.75;
    font-size: 13px;
}

.mini-card pre,
.code-panel pre {
    overflow: auto;
    padding: 15px;
    background: #070b10;
    color: #c9d8cf;
    font: 11px/1.8 "JetBrains Mono", monospace;
    white-space: pre-wrap;
}

.process-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.process-cards > div {
    padding: 25px;
    border-top: 1px solid var(--site-accent);
    background: var(--site-panel);
}

.process-cards b {
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
}

.process-cards h3 {
    margin: 32px 0 10px;
    font-size: 20px;
}

.process-cards p {
    color: var(--site-muted);
    font-size: 13px;
    line-height: 1.7;
}

.extended-server-visual {
    min-height: 440px;
    height: auto;
    padding: 55px 20px;
}

.server-rack {
    width: min(520px, 100%);
    padding: 20px;
    border: 1px solid #456657;
    background: linear-gradient(145deg, #101a1d, #070a10);
    box-shadow: 0 0 80px #79f2c01b;
}

.rack-unit {
    display: grid;
    grid-template-columns: repeat(3, 12px) 1fr;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    margin-bottom: 10px;
    padding: 0 14px;
    border: 1px solid #263b34;
    background: #0b1116;
}

.rack-unit i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--site-accent);
    box-shadow: 0 0 12px #79f2c070;
}

.rack-unit span,
.rack-label {
    color: #8ca398;
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.12em;
}

.rack-label {
    padding-top: 12px;
    text-align: right;
}

body.light .server-rack {
    background: linear-gradient(145deg, #e2eee7, #d8e7df);
    border-color: #9fb7a8;
}

body.light .rack-unit {
    background: #edf5f0;
    border-color: #bdd0c4;
}

body.light .rack-unit span,
body.light .rack-label {
    color: #3f6654;
}

.project-cinema {
    height: auto;
    min-height: 430px;
    padding: 50px 20px;
}

.film-frame {
    position: relative;
    display: flex;
    width: min(850px, 100%);
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #41594d;
    background: radial-gradient(circle at 50% 45%, #1b3228, #080c10 68%);
}

.film-frame > span:first-child,
.film-subtitle {
    color: #8da99a;
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.3em;
}

.film-title {
    z-index: 1;
    margin: 28px 0;
    font-size: clamp(44px, 8vw, 98px);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.08em;
    text-align: center;
}

.film-title em {
    color: var(--site-accent);
    font-style: normal;
}

.film-grain {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff 4px);
    mask-image: linear-gradient(transparent, #000, transparent);
}

.resume-intro {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 45px;
    align-items: center;
    margin-bottom: 120px;
}

.resume-mark {
    display: grid;
    align-content: center;
    justify-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--site-accent);
    color: var(--site-accent);
    font-size: 105px;
    font-weight: 800;
    line-height: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--site-accent) 9%, transparent), transparent 68%);
}

.resume-mark span {
    margin-top: 12px;
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.14em;
}

.resume-timeline {
    display: grid;
    gap: 0;
    margin-top: 60px;
    border-left: 1px solid var(--site-border);
}

.resume-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 30px;
    padding: 0 0 52px 32px;
    position: relative;
}

.resume-item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--site-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--site-accent) 50%, transparent);
}

.resume-date,
.resume-tag,
.skill-matrix > div > span {
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
    letter-spacing: 0.07em;
}

.resume-item h3 {
    margin: -5px 0 12px;
    font-size: 24px;
}

.resume-item p {
    max-width: 800px;
    margin: 0 0 14px;
    color: var(--site-muted);
    line-height: 1.8;
}

.resume-tag {
    font-size: 8px;
    opacity: 0.8;
}

.skill-matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.skill-matrix > div {
    padding: 25px 0;
    border-top: 1px solid var(--site-border);
}

.skill-matrix h3 {
    margin: 24px 0 12px;
    font-size: 20px;
}

.skill-matrix p,
.muted-note {
    color: var(--site-muted);
    font-size: 13px;
    line-height: 1.8;
}

.skill-track {
    height: 3px;
    margin-top: 24px;
    background: var(--site-border);
}

.skill-track i {
    display: block;
    height: 100%;
    background: var(--site-accent);
}

.muted-note {
    margin-top: 28px;
    font-size: 11px;
}

.lab-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
    gap: 22px;
    align-items: start;
}

.lab-controls,
.lab-stage {
    min-width: 0;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
}

.lab-controls {
    padding: clamp(22px, 3vw, 38px);
}

.lab-controls h2 {
    margin: 20px 0 35px;
    font-size: clamp(31px, 3vw, 46px);
    letter-spacing: -0.055em;
    line-height: 1;
}

.control-row {
    display: grid;
    gap: 12px;
    margin: 23px 0;
}

.control-row > span {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--site-text);
    font-size: 12px;
}

.control-row code,
.control-row strong {
    color: var(--site-accent);
    font: 10px "JetBrains Mono", monospace;
}

.control-row input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid var(--site-border);
    background: var(--site-panel-raised);
    cursor: pointer;
}

.control-row input[type="range"] {
    width: 100%;
    accent-color: var(--site-accent);
}

.control-row select {
    width: 100%;
    min-height: 42px;
    padding: 10px;
    border: 1px solid var(--site-border);
    background: var(--site-panel-raised);
    color: var(--site-text);
}

.lab-controls .btn {
    margin-top: 10px;
    cursor: pointer;
    font-family: inherit;
}

.stage-header,
.code-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--site-border);
    color: var(--site-soft);
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
}

.stage-dot {
    color: var(--site-accent);
}

.stage-surface {
    display: grid;
    min-height: 390px;
    place-items: center;
    padding: clamp(20px, 4vw, 55px);
    background-image: linear-gradient(color-mix(in srgb, var(--site-border) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--site-border) 35%, transparent) 1px, transparent 1px);
    background-size: 25px 25px;
}

.demo-card {
    width: min(420px, 100%);
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--demo-accent, #79f2c0) 45%, var(--site-border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--site-panel-raised) 82%, transparent);
    box-shadow: 0 16px 40px #00000022;
    backdrop-filter: blur(12px);
    transition: all 0.2s ease;
}

.demo-card[data-mode="flat"] {
    background: var(--site-panel-raised);
    box-shadow: none;
    backdrop-filter: none;
}

.demo-card[data-mode="outline"] {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    border-width: 2px;
}

.demo-index {
    color: var(--demo-accent, #79f2c0);
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.12em;
}

.demo-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 28px 0;
    border: 1px solid var(--demo-accent, #79f2c0);
    border-radius: 12px;
    color: var(--demo-accent, #79f2c0);
    font-size: 24px;
    font-weight: 800;
}

.demo-card h3 {
    margin: 0 0 12px;
    font-size: clamp(23px, 3vw, 31px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.demo-card p {
    color: var(--site-muted);
    font-size: 12px;
    line-height: 1.75;
}

.demo-action {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 24px;
    padding: 14px 15px;
    border: 1px solid var(--demo-accent, #79f2c0);
    background: transparent;
    color: var(--site-text);
    cursor: pointer;
    font: 10px "JetBrains Mono", monospace;
}

.demo-action span {
    color: var(--demo-accent, #79f2c0);
}

.demo-action[data-active="true"] {
    background: var(--demo-accent, #79f2c0);
    color: var(--site-accent-ink);
}

.demo-action[data-active="true"] span {
    color: inherit;
}

.code-panel-title button {
    border: 0;
    background: transparent;
    color: var(--site-accent);
    cursor: pointer;
    font: inherit;
}

.code-panel pre {
    margin: 0;
    min-height: 120px;
}

.copy-status {
    min-height: 18px;
    margin: 0;
    padding: 0 15px 12px;
    color: var(--site-accent);
    font-size: 10px;
}

.gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.visual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.visual-tile {
    position: relative;
    display: flex;
    min-height: 350px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    padding: 25px;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
    color: var(--site-text);
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.visual-tile:hover {
    transform: translateY(-4px);
    border-color: var(--site-accent);
}

.visual-tile::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.95;
}

.visual-meta {
    position: absolute;
    top: 22px;
    left: 22px;
    color: var(--site-accent);
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
}

.visual-tile > strong {
    margin-top: auto;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.visual-tile > small {
    margin-top: 8px;
    color: var(--site-muted);
    font-size: 11px;
}

.visual-orbit::before {
    background: radial-gradient(circle at 50% 46%, #173128, #0a0e13 65%);
}

.tile-orbit {
    position: absolute;
    top: 35%;
    left: 50%;
    border: 1px solid #79f2c044;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.tile-orbit-a {
    width: 220px;
    height: 220px;
}

.tile-orbit-b {
    width: 270px;
    height: 100px;
    transform: translate(-50%, -50%) rotate(-30deg);
}

.tile-core {
    position: absolute;
    top: 35%;
    left: 50%;
    display: grid;
    width: 75px;
    height: 75px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid var(--site-accent);
    border-radius: 50%;
    background: #0b1411;
    color: var(--site-accent);
    font-size: 42px;
    font-weight: 800;
}

.visual-terminal::before {
    background: radial-gradient(circle at 50% 40%, #202b35, #090d12 72%);
}

.terminal-art {
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    display: grid;
    grid-template-columns: repeat(3, 7px) 1fr;
    gap: 7px;
    padding: 15px;
    border: 1px solid #35424b;
    background: #090e13e8;
    box-shadow: 0 18px 45px #00000045;
}

.terminal-art i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34434c;
}

.terminal-art b {
    align-self: center;
    margin-left: 10px;
    color: #85958b;
    font: 9px "JetBrains Mono", monospace;
}

.terminal-art code {
    grid-column: 1 / -1;
    padding: 22px 2px 5px;
    color: var(--site-accent);
    font: 12px/2 "JetBrains Mono", monospace;
}

.visual-cinema::before {
    background: radial-gradient(circle at 50% 35%, #3d2d1e, #11100f 72%);
}

.book-art {
    position: absolute;
    top: 17%;
    left: 21%;
    display: grid;
    width: 58%;
    height: 180px;
    place-items: center;
    transform: rotate(-5deg);
    border: 1px solid #a78a62;
    background: linear-gradient(90deg, #473826 0 49%, #241e18 50% 100%);
    box-shadow: 15px 20px 35px #00000055;
}

.book-art::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 49%;
    width: 2px;
    background: #be9c70;
}

.book-art b {
    z-index: 1;
    color: #e7d8bd;
    font-size: clamp(13px, 2vw, 23px);
    text-align: center;
    line-height: 0.95;
}

.book-art i {
    position: absolute;
    inset: 12px;
    border: 1px solid #a88a62;
}

.book-art i:last-child {
    inset: 20px;
    opacity: 0.6;
}

.visual-rack::before {
    background: radial-gradient(circle at 50% 35%, #183128, #070b0f 72%);
}

.mini-rack {
    position: absolute;
    top: 20%;
    left: 23%;
    right: 23%;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #456657;
    background: #0a1111e8;
}

.mini-rack i {
    padding: 17px 12px;
    border: 1px solid #2b463a;
    color: var(--site-accent);
    font: normal 9px "JetBrains Mono", monospace;
}

.visual-layout::before {
    background: radial-gradient(circle at 50% 40%, #24352f, #090d12 72%);
}

.layout-art {
    position: absolute;
    top: 22%;
    left: 12%;
    right: 12%;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 56px 65px 42px;
    gap: 7px;
}

.layout-art i {
    border: 1px solid #79f2c04a;
    background: #79f2c00a;
}

.layout-art i:first-child {
    grid-column: span 2;
}

.layout-art i:nth-child(4) {
    grid-column: span 2;
}

.visual-wave::before {
    background: radial-gradient(circle at 50% 40%, #26362d, #090d11 72%);
}

.wave-art {
    position: absolute;
    top: 30%;
    left: 10%;
    right: 10%;
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: space-between;
}

.wave-art i {
    width: 5px;
    height: 30%;
    background: var(--site-accent);
    opacity: 0.75;
    border-radius: 5px;
}

.wave-art i:nth-child(3n) {
    height: 90%;
}

.wave-art i:nth-child(3n + 1) {
    height: 54%;
}

.lightbox {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 25px;
    background: #020405dd;
    backdrop-filter: blur(12px);
}

.lightbox-content {
    width: min(620px, 100%);
    padding: clamp(30px, 6vw, 65px);
    border: 1px solid var(--site-border);
    background: var(--site-panel);
    box-shadow: var(--site-shadow);
}

.lightbox-content h2 {
    margin: 25px 0 15px;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.lightbox-content p {
    color: var(--site-muted);
    line-height: 1.7;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid #56635d;
    background: #0a0f15;
    color: #fff;
    cursor: pointer;
    font-size: 28px;
}

body.modal-open {
    overflow: hidden;
}

.site-footer {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    padding: 35px clamp(20px, 5vw, 70px) 22px;
    border-top: 1px solid var(--site-border);
}

.footer-brand p {
    max-width: 340px;
    color: var(--site-soft);
    font-size: 11px;
    line-height: 1.7;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: start;
    gap: 14px 22px;
}

.footer-links a {
    color: var(--site-muted);
    text-decoration: none;
    font-size: 11px;
}

.footer-links a:hover {
    color: var(--site-accent);
}

.footer-meta {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--site-border);
    color: #56626e;
    font: 9px "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
}

.back-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    transform: translateY(15px);
    border: 1px solid var(--site-border);
    background: var(--site-panel);
    color: var(--site-accent);
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}

.back-top.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.error-content {
    display: flex;
    min-height: 78vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 150px clamp(25px, 9vw, 140px) 80px;
}

.error-code {
    color: var(--site-accent);
    font: 700 clamp(100px, 22vw, 260px)/0.8 "JetBrains Mono", monospace;
    letter-spacing: -0.1em;
}

.error-content h1 {
    max-width: 900px;
    font-size: clamp(42px, 7vw, 86px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.error-content h1 em {
    color: var(--site-accent);
    font-style: normal;
}

.error-content p {
    max-width: 600px;
    color: var(--site-muted);
    font-size: 16px;
    line-height: 1.8;
}

:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 4px;
}

@media (max-width: 1180px) {
    .nav {
        padding-right: 20px;
        padding-left: 20px;
    }

    .main-nav {
        gap: 13px;
    }

    .main-nav a {
        font-size: 9px;
    }
}

@media (max-width: 1120px) {
    .nav-tools {
        margin-left: auto;
    }

    .menu {
        display: inline-grid;
    }

    .main-nav {
        position: absolute;
        top: 76px;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 22px 20px;
        border-bottom: 1px solid var(--site-border);
        background: var(--site-nav);
        backdrop-filter: blur(18px);
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--site-border);
        font-size: 11px;
    }

    .case-grid {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 35px;
    }

    .visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .case-grid,
    .lab-layout,
    .resume-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .note-card {
        grid-column: 1 / -1;
    }

    .flow-diagram {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .flow-diagram > i {
        transform: rotate(90deg);
        justify-self: center;
    }

    .process-cards,
    .skill-matrix,
    .three-up {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .resume-mark {
        width: 180px;
    }

    .resume-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .site-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .case-sidebar,
    .process-cards,
    .skill-matrix,
    .three-up,
    .visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .visual-tile {
        min-height: 320px;
    }

    .project-toolbar {
        gap: 14px;
    }

    .filter-button {
        padding: 9px 10px;
        font-size: 9px;
    }

    .stage-surface {
        min-height: 320px;
        padding: 18px;
    }

    .site-footer {
        padding-right: 20px;
        padding-left: 20px;
    }

    .footer-meta {
        flex-direction: column;
    }

    .error-content {
        padding-right: 22px;
        padding-left: 22px;
    }
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}