/* SPDX-FileCopyrightText: 2026 P2000C SASI Distribution contributors */
/* SPDX-License-Identifier: GPL-3.0-or-later */

:root {
  color-scheme: dark;
  --black: #010403;
  --panel: #06100b;
  --green: #67ff8b;
  --phosphor: #61ffc7;
  --green-dim: #259849;
  --green-faint: #0d3b21;
  --glow: rgba(75, 255, 118, .45);
  --mono: "Courier New", "Lucida Console", monospace;
}
* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px;
  background: radial-gradient(circle at 50% 22%, rgba(18, 80, 42, .18), transparent 32rem), var(--black);
  color: var(--green); font-family: var(--mono); letter-spacing: .035em;
}
a { color: inherit; }
button, select { font: inherit; }
.masthead {
  width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.4rem 0;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--green-faint);
}
.wordmark { font-size: 1.1rem; font-weight: 700; text-decoration: none; text-shadow: 0 0 12px var(--glow); }
.prompt { color: #d5ffe0; }
.cursor-mark { animation: blink 1s steps(1) infinite; }
.header-actions {
  display: flex; align-items: center; gap: clamp(.8rem, 3vw, 2.4rem);
}
nav { display: flex; gap: clamp(.8rem, 3vw, 2.4rem); }
nav a { color: var(--green-dim); font-size: .72rem; text-decoration: none; }
nav a:hover, nav a:focus { color: var(--green); }
nav { align-items: center; }
.gallery-open {
  font-size: .72rem; padding: .4rem .55rem; color: var(--green);
  border: 1px solid #255636; border-radius: .2rem; background: #07140c;
}
.gallery-open:hover, .gallery-open:focus { border-color: var(--green); }
.gallery {
  width: min(1060px, calc(100% - 2rem)); margin: 0 auto 5rem;
  padding: clamp(.65rem, 2vw, 1.25rem); scroll-margin-top: 1rem;
  border: 1px solid var(--green-dim); border-radius: .6rem;
  color: var(--green); background: var(--black); box-shadow: 0 0 45px #000;
}
.gallery:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.gallery button { min-width: 44px; min-height: 44px; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gallery-header h2 { margin: 0; font-size: clamp(.8rem, 2vw, 1rem); }
.gallery-figure { margin: 1rem 0; }
.gallery-stage { background: #151719; border: 1px solid var(--green-faint); }
.gallery-stage img {
  display: block; width: 100%; height: auto; max-height: min(58dvh, 700px); object-fit: contain;
  touch-action: pan-y;
}
.gallery-figure figcaption { margin-top: .85rem; font-size: .8rem; line-height: 1.5; color: #aaffbd; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gallery-positions { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.gallery-positions button { font-size: .7rem; padding: .45rem .6rem; }
.gallery-positions button[aria-pressed="true"] { color: var(--black); background: var(--green); }
.gallery-hint { margin: .85rem 0 0; color: #6eaa7b; text-align: center; font-size: .65rem; }
main { overflow: hidden; }
.machine {
  width: min(1360px, calc(100% - 1rem)); margin: 1rem auto 0; padding: clamp(.5rem, 1vw, 1rem);
  border: 1px solid #173d26; border-radius: 1rem;
  background: linear-gradient(145deg, #0b1a11, #030805 70%);
  box-shadow: 0 35px 100px #000, inset 0 1px rgba(255,255,255,.04);
}
.machine-top, .machine-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.machine-top { justify-content: flex-end; }
.drive-lights { display: flex; gap: 1rem; color: #7b9982; font-size: .62rem; }
.drive-lights i {
  display: inline-block; width: .58rem; height: .58rem; margin-right: .35rem;
  border-radius: 50%; background: #16311e; box-shadow: inset 0 0 3px #000;
}
.drive-lights i.on { background: var(--green); box-shadow: 0 0 10px var(--green); }
.drive-lights #disk-light.on { background: #ffb84d; box-shadow: 0 0 10px #ff9d2e; }
.terminal {
  position: relative; margin: .75rem 0; padding: .75rem;
  border: 2px solid #17231b; border-radius: 1.5rem; outline: none; background: #000;
  box-shadow: inset 0 0 50px #000, 0 0 0 5px #050806;
}
.terminal:focus { border-color: #2f7043; }
.glass {
  position: relative; width: 1280px; max-width: 100%; aspect-ratio: 20 / 9;
  margin: 0 auto; overflow: hidden; border-radius: .25rem;
  background: #000403; box-shadow: 0 0 24px rgba(97, 255, 199, .12);
}
.display-screen {
  z-index: 2; position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}
.display-screen.graphics-mode {
  inset: auto; left: 10%; top: 6.25%; width: 80%; height: 87.5%;
}

.loading[hidden] { display: none; }
.loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: 1rem;
  color: var(--green); font-size: clamp(.65rem, 2vw, 1rem); text-align: center;
}
.loading-bar { width: min(22rem, 65vw); height: .35rem; border: 1px solid var(--green-dim); }
.loading-bar i { display: block; width: 2%; height: 100%; background: var(--green); transition: width .2s; }
.machine-controls { color: #66806c; font-size: .68rem; }
.machine-controls p { flex: 1; margin: 0; }
.machine-controls label { display: flex; align-items: center; gap: .5rem; }
button, select {
  border: 1px solid #255636; border-radius: .2rem; background: #07140c;
  color: var(--green); padding: .55rem .75rem;
}
button:hover, button:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 10px rgba(65,255,110,.15); }
button:active { color: #001407; background: var(--green); }
.language-toggle {
  display: inline-flex; align-items: center; gap: .28rem; padding: .25rem;
  color: #456f50; font-size: .65rem; line-height: 1;
}
.language-toggle .lang-option {
  min-width: 1.7rem; padding: .32rem .28rem; border-radius: .12rem;
  text-align: center; transition: color .15s, background .15s, box-shadow .15s;
}
.language-toggle .lang-divider { color: #255636; }
.language-toggle[aria-checked="false"] .lang-nl,
.language-toggle[aria-checked="true"] .lang-en {
  color: #001407; background: var(--green); box-shadow: 0 0 8px var(--glow);
}
.about {
  width: min(760px, calc(100% - 2rem)); margin: 3rem auto 5rem;
  border-top: 1px solid var(--green-faint); padding-top: 1.25rem;
}
.about h2 { margin: 0 0 .8rem; color: #b6ebc0; font-size: 1rem; }
.about p { margin: .6rem 0; color: #6eaa7b; font-size: .82rem; line-height: 1.7; }
.about strong { color: #aaffbd; font-weight: 400; }
footer {
  width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0;
  display: flex; justify-content: space-between; border-top: 1px solid var(--green-faint);
  color: #376844; font-size: .65rem;
}
footer span { color: var(--green); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 700px) {
  .machine-controls { flex-wrap: wrap; }
  .machine-controls p { flex-basis: 100%; }
  footer { display: block; }
  .masthead { align-items: flex-start; }
  .header-actions { flex-direction: column; align-items: flex-end; gap: .7rem; }
  .masthead { gap: .75rem; flex-wrap: wrap; }
  .wordmark { font-size: clamp(.8rem, 3vw, 1.1rem); }
}