:root {
  --black: #030304;
  --black-2: #09090b;
  --ink: #f0eadb;
  --paper: #d8cfb8;
  --muted: #8f897b;
  --line: rgba(240, 234, 219, 0.22);
  --line-strong: rgba(240, 234, 219, 0.54);
  --panel: rgba(11, 11, 14, 0.92);
  --panel-hard: #121216;
  --blue: #b7f5ff;
  --blue-dim: rgba(183, 245, 255, 0.18);
  --red: #ff4266;
  --shadow: rgba(0, 0, 0, 0.72);
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Courier New", monospace;
}

html[data-theme="light"] {
  --black: #e7deca;
  --black-2: #ccc0a7;
  --ink: #181613;
  --paper: #181613;
  --muted: #5d5649;
  --line: rgba(24, 22, 19, 0.22);
  --line-strong: rgba(24, 22, 19, 0.54);
  --panel: rgba(246, 238, 216, 0.92);
  --panel-hard: #f5ecd5;
  --blue: #006f7e;
  --blue-dim: rgba(0, 111, 126, 0.12);
  --red: #9d1730;
  --shadow: rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  background:
    radial-gradient(circle at 14% 10%, var(--blue-dim), transparent 22rem),
    linear-gradient(135deg, var(--black), var(--black-2));
  overflow-x: hidden;
  transition: opacity 240ms ease, transform 240ms ease;
}
body.leaving { opacity: 0; transform: translateX(-10px); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  background: linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.34) 48% 48.2%, transparent 48.2%), repeating-linear-gradient(to bottom, transparent 0 6px, rgba(255,255,255,0.22) 6px 7px, transparent 7px 12px);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 99; background: var(--ink); color: var(--black); padding: 10px 14px; }
.skip:focus { top: 12px; }
.shell { position: relative; z-index: 3; width: min(1180px, calc(100% - 26px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--black) 84%, transparent); backdrop-filter: blur(14px); }
.nav { min-height: 70px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.brand { display: grid; grid-template-columns: 42px auto; gap: 11px; align-items: center; text-transform: uppercase; letter-spacing: -0.06em; font-weight: 1000; }
.brand-mark { height: 42px; border: 2px solid var(--line-strong); background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 42%), var(--panel-hard); box-shadow: 6px 6px 0 var(--shadow); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%); display: grid; place-items: center; }
.brand-mark::before { content: ""; width: 17px; height: 17px; border: 2px solid var(--ink); box-shadow: 10px 7px 0 -4px var(--blue); transform: rotate(8deg); }
.nav-tabs { display: flex; justify-content: flex-end; gap: 8px; }
.nav-tabs a, .ui-button, .small-button { border: 1px solid var(--line); color: var(--muted); background: var(--panel); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.nav-tabs a { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; font: 0.82rem var(--mono); text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.nav-tabs a:hover, .nav-tabs a.active, .ui-button:hover, .ui-button:focus-visible, .small-button:hover, .small-button:focus-visible { outline: none; color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,0.08); transform: translateY(-2px); box-shadow: 5px 5px 0 var(--shadow); }
.nav-actions { display: flex; gap: 8px; justify-content: flex-end; }
.small-button { min-height: 38px; min-width: 42px; padding: 0 11px; cursor: pointer; font: 0.82rem var(--mono); color: var(--ink); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.menu-button { display: none; }
main { padding: 44px 0 82px; }
.hero { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr); gap: 28px; align-items: center; }
.kicker { color: var(--blue); font: 0.82rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(3.8rem, 9vw, 8.8rem); line-height: 0.78; letter-spacing: -0.105em; text-transform: uppercase; text-shadow: 6px 6px 0 var(--shadow); }
h2 { margin-bottom: 16px; font-size: clamp(2.5rem, 5.8vw, 5.4rem); line-height: 0.82; letter-spacing: -0.095em; text-transform: uppercase; text-shadow: 5px 5px 0 var(--shadow); }
h3 { margin-bottom: 10px; font-size: 1.34rem; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
p { color: var(--muted); line-height: 1.68; }
.lead { max-width: 620px; font-size: clamp(1.02rem, 2vw, 1.22rem); }
.action-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.ui-button { min-height: 45px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: 6px 6px 0 var(--shadow); }
.ui-button.primary { color: var(--black); background: var(--ink); border-color: var(--ink); }
.console { border: 2px solid var(--line-strong); background: linear-gradient(135deg, rgba(255,255,255,0.11), transparent 42%), var(--panel); box-shadow: 14px 14px 0 var(--shadow); min-height: 540px; position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.console-bar { min-height: 46px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font: 0.78rem var(--mono); color: var(--muted); background: rgba(255,255,255,0.045); }
.console-grid { min-height: 494px; display: grid; place-items: center; padding: 32px; position: relative; }
.console-grid::before { content: ""; position: absolute; width: min(70%, 360px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, var(--blue-dim), transparent 58%), repeating-conic-gradient(from 0deg, rgba(255,255,255,0.08) 0 7deg, transparent 7deg 18deg); animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.title-card { position: relative; width: min(78%, 360px); aspect-ratio: 4 / 3; border: 2px solid var(--ink); background: linear-gradient(135deg, var(--panel-hard), transparent), repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 10px); box-shadow: 12px 12px 0 var(--shadow); display: grid; place-items: center; transform: rotate(-3deg); }
.title-card span { font-size: clamp(3rem, 7vw, 6.2rem); font-weight: 1000; letter-spacing: -0.13em; text-transform: uppercase; text-shadow: 2px 0 var(--blue), -2px 0 var(--red); }
.console-note { position: absolute; left: 18px; bottom: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 0.78rem var(--mono); padding: 9px 10px; }
.section { padding-top: 74px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: 22px; align-items: end; margin-bottom: 20px; }
.card-grid { display: grid; gap: 16px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel, .project, .log, .link-card, .game-embed { border: 2px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 38%), var(--panel); box-shadow: 9px 9px 0 var(--shadow); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease; }
.panel:hover, .project:hover, .log:hover, .link-card:hover, .game-embed:hover { transform: translateY(-4px); box-shadow: 12px 13px 0 var(--shadow); border-color: var(--line-strong); }
.panel { padding: clamp(20px, 3vw, 32px); }
.project { overflow: hidden; }
.thumb { min-height: 176px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 66% 28%, var(--blue-dim), transparent 30%), linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,0.2) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 0 47%, rgba(255,255,255,0.16) 47% 53%, transparent 53%), linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01)); position: relative; }
.thumb::before { content: ""; position: absolute; inset: 30px; border: 1px solid var(--line-strong); transform: perspective(400px) rotateX(62deg) rotateZ(-14deg); box-shadow: 0 24px 30px var(--shadow); }
.body { padding: 17px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.tag { border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,0.04); padding: 5px 8px; font: 0.72rem var(--mono); text-transform: uppercase; }
.log { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 17px; }
.date { color: var(--blue); font: 0.8rem var(--mono); }
.link-card { min-height: 130px; padding: 17px; display: flex; flex-direction: column; justify-content: space-between; }
.link-card strong { text-transform: uppercase; font-size: 1.12rem; letter-spacing: -0.04em; }
.link-card span { color: var(--muted); font: 0.8rem var(--mono); overflow-wrap: anywhere; }
.game-embed { padding: 16px; }
.game-frame { aspect-ratio: 4 / 3; border: 1px solid var(--line-strong); background: #000; margin-bottom: 15px; display: grid; place-items: center; color: var(--muted); font: 0.84rem var(--mono); overflow: hidden; }
.game-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.codebox { display: block; overflow-x: auto; border: 1px solid var(--line); background: rgba(0,0,0,0.28); color: var(--muted); padding: 14px; font: 0.82rem/1.55 var(--mono); white-space: pre; }
footer { position: relative; z-index: 3; border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font: 0.8rem var(--mono); }
.footer-row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal.show { opacity: 1; transform: translateY(0); }
@media (max-width: 980px) { .hero, .section-head, .cards-2 { grid-template-columns: 1fr; } .hero { min-height: auto; } .console { min-height: 420px; } .console-grid { min-height: 374px; } .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav { grid-template-columns: auto auto; } .nav-tabs { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; } }
@media (max-width: 680px) { .shell { width: min(100% - 20px, 1180px); } main { padding-top: 32px; } .menu-button { display: inline-flex; } .nav { grid-template-columns: auto auto; } .nav-tabs { position: fixed; top: 78px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel-hard); padding: 10px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity 190ms ease, transform 190ms ease; } .nav-tabs.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .cards-3 { grid-template-columns: 1fr; } h1 { font-size: clamp(3.5rem, 20vw, 5.6rem); } .action-row { display: grid; } .ui-button { width: 100%; } .log { grid-template-columns: 1fr; } .console { min-height: 340px; } .console-grid { min-height: 294px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }