:root {
    color-scheme: dark;
    --bg: #17181d;
    --surface: #202229;
    --surface-raised: #282b33;
    --text: #ecebea;
    --muted: #aaaeb9;
    --line: #464a56;
    --cyan: #56d9e9;
    --magenta: #ef79b7;
    --amber: #f2c14e;
    --green: #78d98b;
    --red: #ef7067;
    --page: 68rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Consolas, Monaco, "Courier New", monospace; font-size: 1rem; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cyan); text-underline-offset: .22em; }
a:hover { color: var(--amber); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 18ch; margin-bottom: 1rem; font-size: clamp(2.1rem, 6vw, 4.8rem); line-height: 1.05; letter-spacing: -.045em; }
h2 { margin-bottom: .75rem; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; }
h3 { margin-bottom: .65rem; font-size: 1.3rem; line-height: 1.25; }
p:last-child { margin-bottom: 0; }
.shell { width: min(calc(100% - 2rem), var(--page)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; z-index: 10; top: .75rem; left: .75rem; padding: .55rem .8rem; color: var(--bg); background: var(--amber); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { padding: 1.5rem 0 1.25rem; border-top: 4px solid var(--cyan); border-bottom: 1px solid var(--line); background: #1b1c22; }
.wordmark { display: inline-flex; gap: .65rem; align-items: baseline; color: var(--text); font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.wordmark:hover { color: var(--text); }
.bbs-mark { padding: .05rem .3rem; border: 1px solid var(--magenta); color: var(--magenta); font-size: .72em; letter-spacing: .12em; }
.status { margin: .35rem 0 1rem; color: var(--muted); font-size: .85rem; }
.status-light { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .65rem color-mix(in srgb, var(--green) 70%, transparent); }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-nav a { padding: .2rem 0; color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--amber); }

.hero { margin-top: clamp(2.5rem, 7vw, 5rem); padding: clamp(1.5rem, 5vw, 3.5rem); }
.hero h1 { max-width: 15ch; }
.lede, .page-intro > p:last-child { max-width: 65ch; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.18rem); }
.page-intro { padding: clamp(3rem, 8vw, 6rem) 0 1rem; border-bottom: 1px solid var(--line); }
.page-intro h1 { margin-bottom: .75rem; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section + .section { border-top: 1px dashed var(--line); }
.section-heading { max-width: 50rem; margin-bottom: 1.6rem; }
.section-heading > p:last-child { color: var(--muted); }
.eyebrow { margin-bottom: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
.cyan { color: var(--cyan); }
.magenta { color: var(--magenta); }
.amber { color: var(--amber); }
.green { color: var(--green); }

.panel, .card { position: relative; border: 1px solid var(--line); background: var(--surface); box-shadow: .45rem .45rem 0 #0e0f12; }
.panel::before, .card::before { position: absolute; top: -.7rem; left: 1rem; padding: 0 .45rem; color: var(--line); background: var(--bg); content: "┌─[ DPS ]─┐"; font-size: .7rem; letter-spacing: .08em; }
.accent-cyan { border-top: 3px solid var(--cyan); }
.accent-magenta { border-top: 3px solid var(--magenta); }
.accent-amber { border-top: 3px solid var(--amber); }
.accent-green { border-top: 3px solid var(--green); }
.accent-red { border-top: 3px solid var(--red); }
.feature { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: clamp(1.4rem, 4vw, 2.3rem); }
.feature > div { flex: 1 1 auto; min-width: 0; max-width: 42rem; }
.feature > .button { flex: 0 0 auto; white-space: nowrap; }
.feature-art { width: min(40%, 23rem); border: 1px solid var(--line); }
.compact { padding: 1.5rem; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; border-top: 0 !important; }
.about > p { max-width: 72ch; color: var(--muted); }
.actions, .tag-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.actions { margin-top: 1.7rem; }
.button { display: inline-flex; gap: .5rem; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem .9rem; border: 1px solid var(--cyan); color: var(--cyan); background: transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { color: var(--bg); background: var(--cyan); }
.button.primary { border-color: var(--amber); color: var(--bg); background: var(--amber); }
.button.primary:hover { border-color: var(--text); background: var(--text); }
.tag { padding: .18rem .45rem; border: 1px solid var(--line); color: var(--muted); font-size: .7rem; letter-spacing: .08em; }
.text-link { font-weight: 700; }
.link-list { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; padding: 0; list-style: none; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.card { overflow: hidden; }
.card-body { padding: 1.35rem; }
.card-body > p:not(.tag-row) { color: var(--muted); }
.preview-frame { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--line); background: #0d0e11; }
.preview-frame img { width: 100%; height: 100%; object-fit: cover; }
.preview-frame.static-preview img { object-fit: contain; }
.preview-toggle { display: none; position: absolute; right: .75rem; bottom: .75rem; min-height: 2.4rem; padding: .35rem .65rem; border: 1px solid var(--amber); color: var(--bg); background: var(--amber); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.has-js .preview-toggle { display: block; }
.preview-toggle:hover { background: var(--text); }
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-card .card-body { height: 100%; display: flex; flex-direction: column; }
.project-card .text-link { margin-top: auto; }
.archive-link { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 2rem; }

.legal-document { max-width: 52rem; padding-block: clamp(3rem, 7vw, 5rem); }
.legal-document > header { margin-bottom: 2.5rem; }
.legal-document h1 { max-width: none; font-size: clamp(2rem, 5vw, 3.5rem); }
.legal-document h2 { margin-top: 2.8rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.legal-document p, .legal-document li { color: #d3d3d6; }
.effective-date { color: var(--muted) !important; }
.legal-notice { margin-bottom: 2.5rem; padding: 1.2rem; border-left: 4px solid var(--amber); background: var(--surface); }

.site-footer { margin-top: 2rem; padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.footer-inner p { margin: 0; }
.footer-inner nav { display: flex; gap: 1rem; }
.signoff { color: var(--red); }

@media (max-width: 700px) {
    .feature, .archive-link { align-items: flex-start; flex-direction: column; }
    .feature-art { width: 100%; }
    .split, .card-grid, .project-grid { grid-template-columns: 1fr; }
    .game-card { max-width: 35rem; margin-inline: auto; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@media print {
    :root { color-scheme: light; }
    body { color: #111; background: #fff; font-family: Georgia, "Times New Roman", serif; }
    .site-header, .site-footer, .skip-link { display: none; }
    .legal-document { max-width: none; padding: 0; }
    .legal-document p, .legal-document li, .effective-date { color: #111 !important; }
    .legal-notice { border: 1px solid #777; background: transparent; }
    .legal-document h2 { border-color: #777; page-break-after: avoid; }
    a { color: #111; }
}