:root {
     --bg: #070707;
     --panel: #111;
     --panel2: #171717;
     --ink: #f3f0e9;
     --muted: #98938b;
     --acid: #d7ff45;
     --orange: #ff6433;
     --blue: #4b6fff;
     --red: #ff0000;
     --pink: #ff4ba0;
     --line: rgba(255, 255, 255, .14);
     --pad: clamp(18px, 4vw, 64px);
     --max: 1500px;
     --sans: Inter, Arial, sans-serif;
     --mono: "DM Mono", monospace;
     --serif: "Playfair Display", Georgia, serif
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: auto
 }

 body {
     margin: 0;
     background: var(--bg);
     color: var(--ink);
     font-family: var(--sans);
     overflow-x: hidden
 }

 body.loading {
     overflow: hidden
 }

 a {
     color: inherit;
     text-decoration: none
 }

 button {
     font: inherit;
     color: inherit
 }

 img {
     display: block;
     max-width: 100%
 }

 ::selection {
     background: var(--acid);
     color: #111
 }

 .noise {
     position: fixed;
     inset: 0;
     z-index: 200;
     pointer-events: none;
     opacity: .04;
     mix-blend-mode: soft-light;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
 }

 .cursor,
 .cursor-dot {
     position: fixed;
     left: 0;
     top: 0;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%)
 }

 .cursor {
     width: 42px;
     height: 42px;
     border: 1px solid rgba(255, 255, 255, .7);
     border-radius: 50%;
     mix-blend-mode: difference
 }

 .cursor-dot {
     width: 5px;
     height: 5px;
     background: #fff;
     border-radius: 50%
 }

 .cursor.active {
     width: 90px;
     height: 90px;
     background: #fff
 }

 .loader {
     position: fixed;
     inset: 0;
     z-index: 1000;
     background: var(--acid);
     color: #111;
     display: grid;
     grid-template-rows: auto 1fr auto;
     padding: 24px var(--pad)
 }

 .loader-top,
 .loader-bottom {
     display: flex;
     justify-content: space-between;
     font: 500 10px/1 var(--mono);
     text-transform: uppercase;
     letter-spacing: .14em
 }

 .loader-main {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px
 }

 .loader-name {
     font-size: clamp(58px, 13vw, 190px);
     font-weight: 900;
     line-height: .76;
     letter-spacing: -.08em;
     text-transform: uppercase
 }

 .loader-num {
     font: 500 clamp(48px, 8vw, 110px)/1 var(--mono)
 }

 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     height: 66px;
     padding: 0 var(--pad);
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--line);
     background: rgba(7, 7, 7, .5);
     backdrop-filter: blur(14px)
 }

 .brand {
     font-size: 13px;
     font-weight: 800;
     display: flex;
     align-items: center;
     gap: 10px
 }

 .brand i {
     width: 9px;
     height: 9px;
     background: var(--acid);
     border-radius: 50%
 }

 .nav {
     display: flex;
     gap: 24px;
     font: 500 10px/1 var(--mono);
     text-transform: uppercase;
     letter-spacing: .1em
 }

 .progress {
     position: fixed;
     left: 0;
     top: 65px;
     height: 2px;
     background: var(--acid);
     z-index: 120;
     transform-origin: left;
     transform: scaleX(0)
 }

 .wrap {
     max-width: var(--max);
     margin: 0 auto
 }

 .section {
     padding: 130px var(--pad)
 }

 .eyebrow {
     font: 500 10px/1.3 var(--mono);
     text-transform: uppercase;
     letter-spacing: .13em;
     color: var(--muted);
     display: flex;
     align-items: center;
     gap: 12px
 }

 .eyebrow:before {
     content: "";
     width: 34px;
     height: 1px;
     background: currentColor
 }

 .hero {
     min-height: 100svh;
     padding: 120px var(--pad) 42px;
     display: flex;
     align-items: flex-end;
     position: relative;
     overflow: hidden
 }

 .hero-grid {
     position: absolute;
     inset: 66px 0 0;
     opacity: .4;
     background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
     background-size: 25% 25%
 }

 .hero-orb {
     position: absolute;
     width: min(60vw, 900px);
     aspect-ratio: 1;
     border: 1px solid var(--line);
     border-radius: 50%;
     right: -18vw;
     top: 8vh
 }

 .hero-orb:before,
 .hero-orb:after {
     content: "";
     position: absolute;
     border: 1px solid var(--line);
     border-radius: 50%;
     inset: 15%
 }

 .hero-orb:after {
     inset: 32%
 }

 .hero-orb-dot {
     position: absolute;
     width: 22px;
     height: 22px;
     background: var(--orange);
     border-radius: 50%;
     left: 50%;
     top: -11px
 }

 .hero-inner {
     width: 100%;
     position: relative;
     z-index: 2
 }

 .hero-meta {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-bottom: 38px;
     border-top: 1px solid var(--line);
     padding-top: 18px;
     font: 400 10px/1.55 var(--mono);
     text-transform: uppercase;
     color: var(--muted)
 }

 .hero-title {
     margin: 0;
     font-size: clamp(70px, 14.5vw, 220px);
     line-height: .72;
     letter-spacing: -.08em;
     font-weight: 900;
     text-transform: uppercase
 }

 .hero-title .line {
     display: block;
     overflow: hidden
 }

 .hero-title .word {
     display: block
 }

 .hero-title .ghost {
     color: transparent;
     -webkit-text-stroke: 1px var(--ink)
 }

 .hero-bottom {
     margin-top: 38px;
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     gap: 30px;
     border-top: 1px solid var(--line);
     padding-top: 20px
 }

 .hero-role {
     font-size: clamp(22px, 3vw, 44px);
     font-weight: 700;
     letter-spacing: -.05em
 }

 .hero-role em {
     font-family: var(--serif);
     font-style: italic;
     color: var(--acid);
     font-weight: 600
 }

 .hero-copy {
     color: var(--muted);
     font-size: 13px;
     line-height: 1.7;
     max-width: 500px;
     justify-self: end
 }

 .hero-chips {
     position: absolute;
     left: var(--pad);
     top: 100px;
     display: flex;
     gap: 7px;
     flex-wrap: wrap
 }

 .chip {
     border: 1px solid var(--line);
     padding: 7px 10px;
     border-radius: 999px;
     font: 500 9px/1 var(--mono);
     text-transform: uppercase;
     background: rgba(7, 7, 7, .5);
     backdrop-filter: blur(8px)
 }

 .manifesto {
     background: var(--ink);
     color: #111
 }

 .manifesto-grid {
     display: grid;
     grid-template-columns: .7fr 2.3fr;
     gap: 50px
 }

 .manifesto .eyebrow {
     color: #69655f
 }

 .manifesto h2 {
     margin: 0;
     font-size: clamp(50px, 8.7vw, 136px);
     line-height: .95;
     letter-spacing: -.065em;
     font-weight: 700
 }

 .manifesto .word {
     display: inline-block;
     opacity: .12
 }

 .manifesto em {
     font-family: var(--serif);
     font-style: italic;
     color: var(--orange)
 }

 .manifesto-notes {
     margin-top: 100px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     border-top: 1px solid rgba(0, 0, 0, .2);
     padding-top: 24px
 }

 .manifesto-notes p {
     margin: 0;
     color: #69655f;
     font-size: 13px;
     line-height: 1.7
 }

 .marquee-zone {
     overflow: hidden;
     background: var(--pink);
     color: white;
     padding: 22px 0
 }

 .marquee {
     display: flex;
     width: max-content;
     gap: 32px;
     white-space: nowrap
 }

 .marquee span {
     font-size: clamp(42px, 7vw, 105px);
     font-weight: 900;
     letter-spacing: -.06em;
     text-transform: uppercase
 }

 .marquee b {
     font-weight: 400;
     color: #3a1308
 }

 .capabilities {
     background: #0b0b0b
 }

 .cap-head {
     display: grid;
     grid-template-columns: .7fr 2.3fr;
     gap: 40px;
     align-items: end;
     margin-bottom: 80px
 }

 .cap-head h2 {
     margin: 0;
     font-size: clamp(58px, 9vw, 140px);
     line-height: .84;
     letter-spacing: -.07em;
     text-transform: uppercase
 }

 .cap-head h2 em {
     font-family: var(--serif);
     font-style: italic;
     text-transform: none;
     color: var(--acid)
 }

 .cap-stage {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 .cap-card {
     min-height: 420px;
     border: 1px solid var(--line);
     border-radius: 28px;
     padding: 26px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
     background: var(--panel)
 }

 .cap-card:before {
     content: "";
     position: absolute;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     right: -110px;
     bottom: -110px;
     background: var(--c, var(--acid));
     transition: transform .5s ease
 }

 .cap-card:hover:before {
     transform: scale(8)
 }

 .cap-card>* {
     position: relative;
     z-index: 2
 }

 .cap-num {
     font: 500 10px/1 var(--mono);
     color: var(--muted)
 }

 .cap-card h3 {
     margin: 0;
     font-size: clamp(34px, 4.3vw, 66px);
     line-height: .92;
     letter-spacing: -.05em
 }

 .cap-card p {
     margin: 0;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.65;
     max-width: 500px
 }

 .cap-card:hover,
 .cap-card:hover p {
     color: #111
 }

 .cap-card:nth-child(2) {
     --c: var(--blue)
 }

 .cap-card:nth-child(3) {
     --c: var(--pink)
 }

 .cap-card:nth-child(4) {
     --c: var(--orange)
 }

 .lab-intro {
     background: var(--acid);
     color: #111;
     padding: 95px var(--pad)
 }

 .lab-intro h2 {
     margin: 0;
     font-size: clamp(62px, 10vw, 155px);
     line-height: .8;
     letter-spacing: -.075em;
     text-transform: uppercase
 }

 .lab {
     background: #0e0e0e;
     padding-top: 80px;
     padding-bottom: 140px
 }

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

 .lab-instructions {
     font: 400 10px/1.5 var(--mono);
     text-transform: uppercase;
     color: var(--muted)
 }

 .mode-buttons {
     display: flex;
     gap: 8px
 }

 .mode-btn {
     background: none;
     border: 1px solid var(--line);
     padding: 9px 12px;
     border-radius: 999px;
     cursor: pointer;
     font: 500 9px/1 var(--mono);
     text-transform: uppercase
 }

 .mode-btn.active {
     background: var(--acid);
     color: #111;
     border-color: var(--acid)
 }

 .project-board {
     position: relative;
     min-height: 900px;
     height: auto;
     border: 1px solid var(--line);
     border-radius: 34px;
     overflow: hidden;
     background: radial-gradient(circle at 50% 40%, #1a1a1a, #0b0b0b 72%)
 }

 .project-card {
     position: absolute;
     width: min(430px, 75vw);
     border-radius: 26px;
     border: 1px solid var(--line);
     overflow: hidden;
     background: #171717;
     box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
     touch-action: none;
     user-select: none;
     cursor: grab
 }

 .project-card:active {
     cursor: grabbing
 }

 .project-card:focus-visible {
     outline: 3px solid var(--acid);
     outline-offset: 4px
 }

 .project-image {
     height: 270px;
     display: grid;
     place-items: center;
     overflow: hidden;
     background: #171717
 }

 .project-visual-text {
     width: 100%;
     height: 100%;
     display: grid;
     place-items: center;
     padding: 28px;
     white-space: pre-line;
     text-align: center;
     font-size: clamp(34px, 4vw, 58px);
     font-weight: 900;
     line-height: .82;
     letter-spacing: -.06em
 }

 .project-theme-adler {
     background: linear-gradient(145deg, #980000, #240000);
     color: #fff
 }

 .project-theme-bench {
     background: #eee8da;
     color: #111
 }

 .project-theme-blue {
     background: linear-gradient(145deg, #17202d, #29374b);
     color: #fff
 }

 .project-theme-acid {
     background: var(--acid);
     color: #111
 }

 .project-theme-orange {
     background: var(--orange);
     color: #111
 }

 .project-theme-pink {
     background: var(--pink);
     color: #111
 }

 .project-theme-dark {
     background: linear-gradient(145deg, #111, #282828);
     color: #fff
 }

 .project-theme-green {
     background: linear-gradient(145deg, #103b29, #071a12);
     color: var(--acid)
 }

 .project-info {
     padding: 22px
 }

 .project-index {
     font: 500 9px/1 var(--mono);
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 10px
 }

 .project-info h3 {
     margin: 0 0 10px;
     font-size: 28px;
     letter-spacing: -.05em
 }

 .project-info p {
     margin: 0;
     color: var(--muted);
     font-size: 12px;
     line-height: 1.55
 }

 .project-board.tidy .project-card {
     width: 30%
 }

 .stats-game {
     background: var(--blue);
     padding: 90px var(--pad);
     color: white
 }

 .stats-head {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     align-items: end;
     margin-bottom: 40px
 }

 .stats-head h2 {
     margin: 0;
     font-size: clamp(52px, 8vw, 120px);
     line-height: .85;
     letter-spacing: -.06em
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border-top: 1px solid rgba(255, 255, 255, .4)
 }

 .stat {
     padding: 26px 20px 0 0;
     border-right: 1px solid rgba(255, 255, 255, .4)
 }

 .stat:last-child {
     border-right: 0;
     padding-left: 22px
 }

 .stat strong {
     display: block;
     font-size: clamp(56px, 8vw, 120px);
     line-height: .9;
     letter-spacing: -.07em
 }

 .stat span {
     display: block;
     margin-top: 16px;
     font: 500 10px/1.5 var(--mono);
     text-transform: uppercase
 }

 .stat button {
     margin-top: 20px;
     background: #fff;
     color: #111;
     border: 0;
     padding: 9px 12px;
     border-radius: 999px;
     cursor: pointer;
     font: 500 9px/1 var(--mono);
     text-transform: uppercase
 }

 .experience {
     background: #0a0a0a
 }

 .exp-head {
     display: grid;
     grid-template-columns: .7fr 2.3fr;
     gap: 40px;
     margin-bottom: 90px
 }

 .exp-head h2 {
     margin: 0;
     font-size: clamp(58px, 9vw, 140px);
     line-height: .84;
     letter-spacing: -.07em;
     text-transform: uppercase
 }

 .exp-head em {
     font-family: var(--serif);
     font-style: italic;
     text-transform: none;
     color: var(--pink)
 }

 .jobs {
     display: grid;
     gap: 18px
 }

 .job {
     position: sticky;
     top: 90px;
     min-height: 430px;
     border: 1px solid var(--line);
     border-radius: 30px;
     padding: 30px;
     background: var(--panel2);
     display: grid;
     grid-template-columns: 170px 1fr 1.3fr;
     gap: 30px;
     box-shadow: 0 25px 70px rgba(0, 0, 0, .25)
 }

 .job:nth-child(2) {
     top: 108px
 }

 .job:nth-child(3) {
     top: 126px
 }

 .job:nth-child(4) {
     top: 144px
 }

 .job:nth-child(5) {
     top: 162px
 }

 .job-date {
     font: 500 10px/1.5 var(--mono);
     text-transform: uppercase;
     color: var(--acid)
 }

 .job-company {
     font-size: clamp(34px, 4.7vw, 72px);
     font-weight: 800;
     line-height: .9;
     letter-spacing: -.055em
 }

 .job-detail h3 {
     margin: 0 0 14px;
     font-size: 18px
 }

 .job-detail p {
     margin: 0;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.72
 }

 .terminal-section {
     background: var(--ink);
     color: #111
 }

 .terminal-wrap {
     display: grid;
     grid-template-columns: .8fr 2.2fr;
     gap: 50px
 }

 .terminal-section .eyebrow {
     color: #6e6961
 }

 .terminal {
     background: #101010;
     color: #f0eee8;
     border-radius: 28px;
     overflow: hidden;
     border: 1px solid #000
 }

 .terminal-bar {
     padding: 13px 16px;
     border-bottom: 1px solid rgba(255, 255, 255, .12);
     display: flex;
     gap: 7px
 }

 .terminal-bar i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #555
 }

 .terminal-body {
     padding: 24px;
     font: 400 13px/1.8 var(--mono);
     min-height: 390px
 }

 .term-line {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 .term-prompt {
     color: var(--acid)
 }

 .term-muted {
     color: #777
 }

 .skill-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 22px
 }

 .skill-btn {
     background: none;
     border: 1px solid #444;
     border-radius: 999px;
     padding: 9px 11px;
     cursor: pointer;
     font: 500 10px/1 var(--mono);
     text-transform: uppercase
 }

 .skill-btn:hover,
 .skill-btn.active {
     background: var(--acid);
     color: #111;
     border-color: var(--acid)
 }

 .term-output {
     margin-top: 22px;
     padding-top: 18px;
     border-top: 1px solid #333;
     color: #bbb;
     min-height: 90px
 }

 .terminal-cursor {
     display: inline-block;
     margin-left: 2px;
     color: var(--acid);
     animation: terminalBlink .7s steps(1) infinite
 }

 @keyframes terminalBlink {

     0%,
     49% {
         opacity: 1
     }

     50%,
     100% {
         opacity: 0
     }
 }

 .philosophy {
     background: #101010;
     overflow: hidden
 }

 .philosophy-track {
     display: flex;
     width: max-content;
     gap: 40px;
     padding-left: var(--pad);
     padding-right: var(--pad)
 }

 .philosophy-card {
     width: min(78vw, 900px);
     min-height: 520px;
     border: 1px solid var(--line);
     border-radius: 32px;
     padding: 34px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background: #151515
 }

 .philosophy-card small {
     font: 500 10px/1 var(--mono);
     text-transform: uppercase;
     color: var(--muted)
 }

 .philosophy-card blockquote {
     margin: 0;
     font-size: clamp(36px, 5vw, 74px);
     line-height: 1.02;
     letter-spacing: -.05em;
     font-weight: 700
 }

 .philosophy-card em {
     font-family: var(--serif);
     font-style: italic;
     color: var(--acid)
 }

 .secret {
     background: var(--pink);
     color: #111;
     padding: 70px var(--pad);
     text-align: center
 }

 .secret button {
     background: #111;
     color: #fff;
     border: 0;
     border-radius: 999px;
     padding: 14px 18px;
     cursor: pointer;
     font: 500 10px/1 var(--mono);
     text-transform: uppercase
 }

 .secret-message {
     font-size: clamp(34px, 6vw, 84px);
     font-weight: 900;
     line-height: .9;
     letter-spacing: -.06em;
     margin: 30px auto 0;
     max-width: 1100px;
     display: none
 }

 .contact {
     min-height: 100svh;
     padding: 130px var(--pad) 38px;
     background: #060606;
     display: flex;
     flex-direction: column;
     justify-content: space-between
 }

 .contact-main {
     display: grid;
     grid-template-columns: .7fr 2.3fr;
     gap: 40px
 }

 .contact h2 {
     margin: 0;
     font-size: clamp(70px, 13vw, 195px);
     line-height: .74;
     letter-spacing: -.08em;
     text-transform: uppercase
 }

 .contact h2 em {
     font-family: var(--serif);
     font-style: italic;
     text-transform: none;
     color: var(--acid)
 }

 .contact-links {
     margin-top: 90px;
     border-top: 1px solid var(--line);
     padding-top: 22px;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 24px
 }

 .contact-email {
     font-size: clamp(20px, 2.5vw, 38px);
     font-weight: 800;
     letter-spacing: -.04em
 }

 .small-links {
     font: 500 10px/1.8 var(--mono);
     text-transform: uppercase;
     color: var(--muted)
 }

 .small-links a {
     display: block;
     color: var(--ink)
 }

 .footer {
     margin-top: 70px;
     padding-top: 16px;
     border-top: 1px solid var(--line);
     display: flex;
     justify-content: space-between;
     font: 500 9px/1.4 var(--mono);
     text-transform: uppercase;
     color: var(--muted)
 }

 .project-modal {
     position: fixed;
     inset: 0;
     z-index: 5000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px
 }

 .project-modal.open {
     display: flex
 }

 .project-modal-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .78);
     backdrop-filter: blur(14px)
 }

.project-modal-panel {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);

    max-height: 88vh;

    overflow: hidden;

    background: #111;

    border: 1px solid var(--line);

    border-radius: 30px;

    padding: clamp(28px, 5vw, 60px);

    box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
 .project-modal-close {
     position: absolute;
     right: 22px;
     top: 22px;
     width: 44px;
     height: 44px;
     display: grid;
     place-items: center;
     border: 1px solid var(--line);
     background: transparent;
     color: var(--ink);
     border-radius: 50%;
     cursor: pointer;
     font-size: 26px;
     line-height: 1
 }

 .project-modal-close:hover {
     background: var(--acid);
     color: #111;
     border-color: var(--acid)
 }

 .project-modal-index {
     margin-bottom: 22px;
     color: var(--acid);
     font: 500 10px/1 var(--mono);
     text-transform: uppercase;
     letter-spacing: .1em
 }

 .project-modal-panel h2 {
     margin: 0;
     max-width: 760px;
     font-size: clamp(48px, 8vw, 100px);
     line-height: .84;
     letter-spacing: -.07em
 }

 .project-modal-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 28px
 }

 .project-modal-tag {
     padding: 8px 11px;
     border: 1px solid var(--line);
     border-radius: 999px;
     font: 500 9px/1 var(--mono);
     text-transform: uppercase
 }

 .project-modal-intro {
     max-width: 720px;
     margin: 36px 0 0;
     color: var(--muted);
     font-size: 17px;
     line-height: 1.7
 }

 .project-modal-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 48px;
     padding-top: 28px;
     border-top: 1px solid var(--line)
 }

 .project-modal-grid p {
     margin: 10px 0 0;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.7
 }

 .project-modal-label {
     font: 500 9px/1 var(--mono);
     text-transform: uppercase;
     color: var(--acid)
 }

 .project-modal-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 42px
 }

 .project-modal-link {
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     padding: 0 18px;
     background: var(--acid);
     color: #111;
     border-radius: 999px;
     font: 500 10px/1 var(--mono);
     text-transform: uppercase
 }

 .project-modal-link.secondary {
     background: transparent;
     color: var(--ink);
     border: 1px solid var(--line)
 }
/* =========================================================
   PROJECT MODAL GALLERY
========================================================= */

.project-gallery {
    margin-top: 36px;
    display: none;
}

.project-gallery.active {
    display: block;
}

.project-gallery-stage {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: #080808;

    border: 1px solid var(--line);
    border-radius: 20px;
}

.project-gallery-stage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    cursor: zoom-in;

}


/* arrows */

.project-gallery-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(7,7,7,.75);

    backdrop-filter: blur(8px);

    color: white;

    cursor: pointer;

    font-size: 18px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.project-gallery-arrow:hover {
    background: var(--acid);
    color: #111;
}

.project-gallery-prev {
    left: 18px;
}

.project-gallery-next {
    right: 18px;
}


/* counter */

.project-gallery-count {
    position: absolute;

    right: 18px;
    bottom: 18px;

    padding: 8px 10px;

    border-radius: 999px;

    background: rgba(7,7,7,.75);

    color: white;

    font: 500 9px/1 var(--mono);

    backdrop-filter: blur(8px);
}


/* thumbnails */

.project-gallery-thumbs {
    display: flex;

    gap: 8px;

    margin-top: 10px;

    overflow-x: auto;

    scrollbar-width: thin;
}

.project-gallery-thumb {
    flex: 0 0 100px;

    height: 65px;

    padding: 0;

    border: 1px solid var(--line);

    border-radius: 10px;

    overflow: hidden;

    background: #111;

    cursor: pointer;

    opacity: .5;

    transition:
        opacity .2s ease,
        border-color .2s ease;
}

.project-gallery-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.project-gallery-thumb.active {
    opacity: 1;

    border-color: var(--acid);
}


/* only one image */

.project-gallery.single-image
.project-gallery-arrow,

.project-gallery.single-image
.project-gallery-count,

.project-gallery.single-image
.project-gallery-thumbs {
    display: none;
}


@media(max-width:700px) {

    .project-gallery-stage {
        aspect-ratio: 4 / 3;
    }

    .project-gallery-arrow {
        width: 44px;
        height: 44px;
    }

    .project-gallery-prev {
        left: 10px;
    }

    .project-gallery-next {
        right: 10px;
    }

    .project-gallery-thumb {
        flex-basis: 80px;
        height: 55px;
    }
}
 @media(max-width:980px) {
     body {
         cursor: auto
     }

     .cursor,
     .cursor-dot {
         display: none
     }

     .nav a:not(:last-child) {
         display: none
     }

     .hero-meta {
         display: block
     }

     .hero-meta>div+div {
         margin-top: 10px
     }

     .hero-bottom,
     .manifesto-grid,
     .cap-head,
     .exp-head,
     .terminal-wrap,
     .contact-main {
         grid-template-columns: 1fr
     }

     .manifesto-notes {
         grid-template-columns: 1fr
     }

     .cap-stage {
         grid-template-columns: 1fr
     }

     .project-card {
         width: 82%;
         left: 9% !important;
         transform: none !important
     }

     .project-board.tidy .project-card {
         width: 82%
     }

     .stats-grid {
         grid-template-columns: 1fr 1fr
     }

     .stat:nth-child(2) {
         border-right: 0
     }

     .stat {
         border-bottom: 1px solid rgba(255, 255, 255, .4)
     }

     .job {
         position: relative !important;
         top: auto !important;
         grid-template-columns: 1fr;
         min-height: auto
     }

     .contact-links {
         grid-template-columns: 1fr
     }
 }

 @media(max-width:700px) {
     .project-modal {
         padding: 12px
     }

     .project-modal-panel {
         max-height: 92vh;
         border-radius: 22px;
         padding: 28px 22px
     }

     .project-modal-grid {
         grid-template-columns: 1fr;
         gap: 24px
     }
 }

 @media(prefers-reduced-motion:reduce) {

     *,
     *:before,
     *:after {
         animation: none !important;
         transition: none !important
     }

     .cursor,
     .cursor-dot {
         display: none
     }

     .terminal-cursor {
         animation: none
     }
 }

/* =========================================================
   FULLSCREEN PROJECT IMAGE LIGHTBOX
========================================================= */

.image-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: clamp(14px, 3vw, 40px);
}

.image-lightbox.open {
    display: flex;
}

.image-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .94);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.image-lightbox-panel {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    overflow: hidden;
}


/* =========================================================
   FULLSCREEN IMAGE
========================================================= */

.image-lightbox-panel img {
    display: block;

    width: auto;
    height: auto;

    max-width: min(1400px, 92vw);
    max-height: 88vh;

    object-fit: contain;

    border-radius: 14px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .6);

    user-select: none;
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
========================================================= */

.image-lightbox-close {
    position: fixed;

    top: 24px;
    right: 24px;

    z-index: 10;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background: rgba(10, 10, 10, .72);

    color: #fff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

    font-size: 28px;
    line-height: 1;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.image-lightbox-close:hover {
    background: var(--acid);

    color: #111;

    border-color: var(--acid);

    transform: rotate(8deg);
}

.image-lightbox-close:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: 4px;
}


/* =========================================================
   LIGHTBOX NAVIGATION
========================================================= */

.image-lightbox-arrow {
    position: fixed;

    top: 50%;

    z-index: 10;

    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    padding: 0;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background: rgba(10, 10, 10, .72);

    color: #fff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

    font-size: 20px;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.image-lightbox-arrow:hover {
    background: var(--acid);

    color: #111;

    border-color: var(--acid);
}

.image-lightbox-arrow:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: 4px;
}

.image-lightbox-prev {
    left: 24px;
}

.image-lightbox-next {
    right: 24px;
}


/* =========================================================
   LIGHTBOX IMAGE COUNTER
========================================================= */

.image-lightbox-count {
    position: fixed;

    left: 50%;
    bottom: 24px;

    z-index: 10;

    transform: translateX(-50%);

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, .16);

    border-radius: 999px;

    background: rgba(10, 10, 10, .72);

    color: #fff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font: 500 10px/1 var(--mono);

    letter-spacing: .08em;
}


/* =========================================================
   PROJECT GALLERY CLICK / ZOOM STATE
========================================================= */

.project-gallery-stage {
    cursor: zoom-in;
}

.project-gallery-stage img {
    cursor: zoom-in;
}

.project-gallery-stage img:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: -6px;
}


/* =========================================================
   PROJECT MODAL FIXED LAYOUT
========================================================= */

.project-modal-panel {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);

    max-height: 88vh;

    overflow: hidden;

    background: #111;

    border: 1px solid var(--line);

    border-radius: 30px;

    padding: clamp(28px, 4vw, 48px);

    box-shadow:
        0 40px 120px rgba(0, 0, 0, .5);
}


/*
Keep the screenshot preview compact enough that
the project modal does not need to scroll.
*/

.project-gallery {
    margin-top: 24px;
}

.project-gallery-stage {
    aspect-ratio: 16 / 8.5;

    max-height: 300px;
}

.project-gallery-stage img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
Compact the content slightly now that
the modal itself does not scroll.
*/

.project-modal-index {
    margin-bottom: 14px;
}

.project-modal-panel h2 {
    font-size: clamp(42px, 6vw, 76px);
}

.project-modal-tags {
    margin-top: 18px;
}

.project-modal-intro {
    margin-top: 22px;

    font-size: 15px;
    line-height: 1.6;
}

.project-modal-grid {
    gap: 22px;

    margin-top: 28px;
    padding-top: 22px;
}

.project-modal-grid p {
    font-size: 12px;
    line-height: 1.6;
}

.project-modal-actions {
    margin-top: 24px;
}


/* =========================================================
   LIGHTBOX SINGLE IMAGE
========================================================= */

.image-lightbox.single-image
.image-lightbox-arrow,

.image-lightbox.single-image
.image-lightbox-count {
    display: none;
}


/* =========================================================
   LIGHTBOX MOBILE
========================================================= */

@media (max-width: 700px) {

    .image-lightbox {
        padding: 10px;
    }

    .image-lightbox-panel img {
        max-width: 96vw;
        max-height: 82vh;

        border-radius: 10px;
    }

    .image-lightbox-arrow {
        width: 46px;
        height: 46px;
    }

    .image-lightbox-prev {
        left: 10px;
    }

    .image-lightbox-next {
        right: 10px;
    }

    .image-lightbox-close {
        top: 12px;
        right: 12px;

        width: 46px;
        height: 46px;
    }

    .image-lightbox-count {
        bottom: 12px;
    }


    /*
    Keep project modal reasonably compact
    on smaller screens.
    */

    .project-modal-panel {
        max-height: 94vh;

        padding: 24px 20px;

        border-radius: 22px;
    }

    .project-modal-panel h2 {
        font-size: clamp(38px, 11vw, 64px);
    }

    .project-gallery {
        margin-top: 18px;
    }

    .project-gallery-stage {
        max-height: 220px;

        aspect-ratio: 16 / 10;
    }

    .project-gallery-thumbs {
        margin-top: 8px;
    }

    .project-gallery-thumb {
        flex-basis: 70px;

        height: 46px;
    }

    .project-modal-intro {
        margin-top: 18px;

        font-size: 13px;
    }

    .project-modal-grid {
        grid-template-columns: 1fr 1fr 1fr;

        gap: 14px;

        margin-top: 20px;
        padding-top: 18px;
    }

    .project-modal-grid p {
        font-size: 10px;
        line-height: 1.5;
    }

    .project-modal-actions {
        margin-top: 18px;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 520px) {

    .project-modal {
        padding: 8px;
    }

    .project-modal-panel {
        padding: 22px 16px;
    }

    .project-modal-close {
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;
    }

    .project-modal-panel h2 {
        padding-right: 42px;

        font-size: clamp(34px, 10vw, 52px);
    }

    .project-modal-tags {
        gap: 5px;
    }

    .project-modal-tag {
        padding: 6px 8px;

        font-size: 8px;
    }

    /*
    Three text columns become too tight here.
    Use one compact row per item instead.
    */

    .project-modal-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .project-modal-grid p {
        margin-top: 5px;

        font-size: 11px;
    }

    .project-gallery-stage {
        max-height: 190px;
    }

    .image-lightbox-arrow {
        top: auto;
        bottom: 16px;

        transform: none;
    }

    .image-lightbox-prev {
        left: 16px;
    }

    .image-lightbox-next {
        right: 16px;
    }

    .image-lightbox-count {
        bottom: 29px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .image-lightbox-close,
    .image-lightbox-arrow {
        transition: none;
    }
}

/* =========================================================
   SECRET BUTTON / CHAOS EFFECTS
========================================================= */

.confetti-piece {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    border-radius: 2px;
    will-change: transform, opacity;
}

.chaos-word {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    font-family: var(--sans);
    font-size: clamp(24px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: -.06em;
    color: var(--acid);
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(215, 255, 69, .3);
}

.giant-chaos-warning {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: var(--acid);
    color: #111;
    text-align: center;
}

.giant-chaos-warning span {
    font-size: clamp(70px, 15vw, 220px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -.08em;
}

@media (prefers-reduced-motion: reduce) {
    .confetti-piece,
    .chaos-word,
    .giant-chaos-warning {
        display: none !important;
    }
}


/* =========================================================
   SECRET DEEP SCROLL
========================================================= */

.deep-scroll {
    position: relative;
    height: 6500px;
    background:
        linear-gradient(
            to bottom,
            #060606 0%,
            #060606 70%,
            #0d0d0d 100%
        );
    overflow: hidden;
}

.deep-message {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: min(90%, 900px);

    text-align: center;

    font-family: var(--mono);
    font-size: clamp(14px, 2vw, 22px);
    line-height: 1.5;

    color: var(--muted);

    opacity: .45;
}

.deep-message-1 {
    top: 1200px;
}

.deep-message-2 {
    top: 2400px;
}

.deep-message-3 {
    top: 3600px;

    color: var(--pink);
}

.deep-message-4 {
    top: 4800px;

    color: var(--acid);

    font-size: clamp(24px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -.04em;
}


/* =========================================================
   SECRET GAME
========================================================= */

.secret-game-wrap {
    position: absolute;

    left: var(--pad);
    right: var(--pad);
    bottom: 100px;

    max-width: var(--max);
    margin: auto;

    border: 1px solid var(--line);

    border-radius: 32px;

    overflow: hidden;

    background: #101010;
}

.secret-game-intro {
    padding: clamp(30px, 6vw, 80px);
}

.secret-game-intro h2 {
    margin: 35px 0 20px;

    font-size: clamp(70px, 13vw, 190px);
    line-height: .74;

    letter-spacing: -.08em;
}

.secret-game-intro h2 em {
    color: var(--acid);

    font-family: var(--serif);
    font-weight: 600;
}

.secret-game-intro p {
    max-width: 500px;

    color: var(--muted);

    line-height: 1.7;
}

.secret-game-intro button,
.game-restart {
    margin-top: 25px;

    border: 0;

    padding: 14px 20px;

    border-radius: 999px;

    background: var(--acid);

    color: #111;

    cursor: pointer;

    font: 500 10px/1 var(--mono);

    text-transform: uppercase;
}


/* GAME */

.secret-game {
    display: none;

    padding: 20px;
}

.secret-game.active {
    display: block;
}

.game-hud {
    display: flex;
    justify-content: space-between;

    margin-bottom: 15px;

    font: 500 11px/1 var(--mono);

    color: var(--acid);
}

.game-area {
    position: relative;

    height: 500px;

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: 20px;

    background:
        linear-gradient(
            rgba(215, 255, 69, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(215, 255, 69, .035) 1px,
            transparent 1px
        ),
        #070707;

    background-size: 40px 40px;
}


/* PLAYER */

.game-player {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    width: 70px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: var(--acid);

    color: #111;

    font-family: var(--mono);
    font-weight: 900;

    user-select: none;
}


/* FALLING OBJECTS */

.game-object {
    position: absolute;

    top: -70px;

    min-width: 60px;

    padding: 10px 12px;

    text-align: center;

    border-radius: 8px;

    font: 700 10px/1 var(--mono);

    text-transform: uppercase;

    user-select: none;
}

.game-object.good {
    background: var(--blue);

    color: white;
}

.game-object.bad {
    background: var(--red);

    color: #111;
}


/* MESSAGES */

.game-message {
    display: none;

    padding: 30px 10px;

    text-align: center;

    font-size: clamp(30px, 6vw, 80px);

    font-weight: 900;

    letter-spacing: -.06em;
}

.game-restart {
    display: none;
}


/* MOBILE */

@media (max-width: 700px) {

    .deep-scroll {
        height: 5700px;
    }

    .game-area {
        height: 420px;
    }

}

/* =========================================================
   MOBILE GAME CONTROLS
========================================================= */

.game-touch-controls {
    display: none;
    gap: 12px;
    margin-top: 14px;
}

.game-touch-controls button {
    flex: 1;

    min-height: 58px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: #171717;
    color: var(--acid);

    font-size: 24px;
    font-weight: 900;

    cursor: pointer;

    touch-action: manipulation;
}

.game-touch-controls button:active {
    background: var(--acid);
    color: #111;
}

@media (max-width: 980px), (pointer: coarse) {

    .game-touch-controls {
        display: flex;
    }

    .game-player {
        width: 82px;
        height: 58px;
    }

    .game-object {
        min-width: 72px;

        padding: 12px 14px;

        font-size: 11px;
    }
}


.game-area {
    touch-action: none;
}

@media (max-width: 700px) {

    .loader {
        padding:
            20px
            18px;
    }

    .loader-main {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 28px;

        min-width: 0;
    }

    .loader-name {
        width: 100%;

        font-size: clamp(
            50px,
            16vw,
            86px
        );

        line-height: .78;

        letter-spacing: -.075em;

        overflow-wrap: anywhere;
    }

    .loader-num {
        align-self: flex-end;

        font-size: clamp(
            42px,
            15vw,
            70px
        );
    }

    .loader-top,
    .loader-bottom {
        gap: 15px;

        font-size: 8px;

        line-height: 1.4;
    }

    .loader-top span:last-child,
    .loader-bottom span:last-child {
        text-align: right;
    }
}