:root {
  --black: #000;
  --ink: #eef1e4;          /* törtfehér szöveg */
  --dim: rgba(238, 241, 228, .55);
  --faint: rgba(238, 241, 228, .32);
  --line: rgba(238, 241, 228, .12);
  --glow: #cdfd02;         /* neon lime – fény, kiemelés */
  --bottle: #34470a;       /* mély olívzöld – árnyék */
  --film: #0b0e03;         /* filmszalag alap */
  --glass: rgba(14, 17, 6, .55);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(18px, 3vw, 36px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--black);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  letter-spacing: -.011em;
  font-feature-settings: 'ss01', 'cv11';
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

canvas.gl {
  position: fixed;
  inset: 0;
  display: block;
}

button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 6px; }

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

/* üvegfelület – menü, szűrők, ablakok közös alapja */
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- fejléc ---------- */
.top {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .8s .5s var(--ease), transform .8s .5s var(--ease);
}
body.ready .top { opacity: 1; transform: none; }
.top > * { pointer-events: auto; }
.logo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 99px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 40px rgba(205, 253, 2, .07);
}
.menu button {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: var(--faint);
  transition: color .4s;
}
.menu button:hover, .menu button.on { color: var(--ink); }
.menu-wave { width: 44px; height: 12px; overflow: visible; }
.menu-wave path { fill: none; stroke: var(--glow); stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--glow)); }

/* ---------- írisz-fázis: amíg az objektív nincs nyitva, csak az látszik ---------- */
body.iris .top, body.iris .panel, body.iris .rail { opacity: 0 !important; pointer-events: none !important; }
body.iris .panel > *, body.iris .top > * { pointer-events: none !important; }
.top, .panel, .rail { transition: opacity .9s var(--ease) !important; }

/* ---------- bal panel ---------- */
.panel {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  width: min(560px, calc(100vw - 2 * var(--pad)));
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.panel > * { pointer-events: auto; }
body.is-focus .panel { opacity: 0; }
body.is-focus .panel > * { pointer-events: none; }

.now { margin-bottom: 26px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
body.ready:not(.iris) .now { opacity: 1; }
.now-cat { margin: 0 0 8px; color: var(--glow); font-size: 13px; font-weight: 500; }
.now-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
}
.now-meta { margin: 10px 0 0; color: var(--dim); }
.now.swap > * { animation: swap .8s var(--ease-out) both; }
.now.swap > :nth-child(2) { animation-delay: 50ms; }
.now.swap > :nth-child(3) { animation-delay: 100ms; }
@keyframes swap { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

.filters { opacity: 0; transition: opacity .8s 1.1s var(--ease); }
body.ready .filters { opacity: 1; }
.filters p { margin: 0 0 10px; color: var(--faint); font-size: 13px; }
.filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 6px; }   /* asztalon egy sorban */
.filters li { flex: none; }
.filters li.br { display: none; }
.filters button {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 14px;
  color: var(--dim);
  background: rgba(14, 17, 6, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .3s, box-shadow .3s, background-color .3s;
}
.filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(205, 253, 2, .4); }
.filters button[aria-current="true"] { color: var(--black); background: var(--glow); box-shadow: 0 0 24px rgba(205, 253, 2, .35); }

/* ---------- jobb oldali sáv: kattintható blokkok, projektenként egy ---------- */
.rail {
  position: fixed;
  right: calc(var(--pad) - 8px);
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  opacity: 0;
  transition: opacity .6s;
}
body.ready .rail { opacity: 1; }
body.is-focus .rail { opacity: 0; pointer-events: none; }
.rail-num { color: var(--ink); }
.rail-segs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rail-segs li.gap { height: 6px; }                 /* kategóriák között kis szünet */
.rail-seg {
  position: relative;
  display: block;
  width: 20px;
  height: 22px;
  border-radius: 4px;
}
.rail-seg::before {                                /* maga a blokk – a gomb nagyobb, hogy könnyű legyen eltalálni */
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 1px; bottom: 1px;
  border-radius: 2px;
  background: rgba(238, 241, 228, .18);
  transition: background-color .3s, left .35s var(--ease-out), right .35s var(--ease-out), box-shadow .3s;
}
.rail-seg:hover::before { background: rgba(238, 241, 228, .5); left: 6px; right: 6px; }
.rail-seg[aria-current="true"]::before { background: var(--glow); left: 5px; right: 5px; box-shadow: 0 0 12px rgba(205, 253, 2, .6); }
.rail-seg .tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 6px -50%;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink);
  background: rgba(14, 17, 6, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .3s var(--ease-out);
}
.rail-seg:hover .tip, .rail-seg:focus-visible .tip { opacity: 1; translate: 0 -50%; }
.rail-seg .tip small { color: var(--glow); margin-right: 6px; font-size: 11px; }

/* ---------- vissza az elejére ---------- */
.totop {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(14, 17, 6, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), box-shadow .3s, color .3s;
}
.totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.totop:hover { color: var(--glow); box-shadow: inset 0 0 0 1px var(--glow); }
.totop:hover svg { transform: translateY(-2px); }
body.far .totop { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.iris .totop, body.is-focus .totop { opacity: 0 !important; pointer-events: none !important; }

.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 30;
  display: none;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--glow);
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  scale: .6;
  transition: opacity .2s, scale .3s var(--ease-out);
}
.cursor.on { opacity: 1; scale: 1; }
@media (pointer: fine) { .cursor { display: block; } }

/* ---------- betöltő ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--black);
  transition: opacity 1s .2s var(--ease), visibility 0s 1.2s;
}
/* a korong középpontja = a képernyő közepe = az írisz középpontja */
.loader-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.loader-glyphs {
  margin: 0;
  font: 500 11px/13px ui-monospace, 'SF Mono', Consolas, monospace;
  letter-spacing: .5px;
  color: rgba(205, 253, 2, .13);
  white-space: pre;
}
.loader-glyphs b { font-weight: 500; color: var(--glow); text-shadow: 0 0 8px rgba(205, 253, 2, .65); }
.loader-glyphs i { font-style: normal; color: #f4ffc8; }
.loader-count {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 6px;
  background: var(--black);
  font: 600 12px/1 ui-monospace, 'SF Mono', Consolas, monospace;
  color: #f6ffd8;
  letter-spacing: .06em;
}
.loader-name { position: absolute; left: 0; right: 0; top: calc(50% + 118px); margin: 0; text-align: center; font-size: 13px; color: var(--faint); letter-spacing: -.01em; }
body.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- megnyitott projekt: mögötte a weboldal elmosva, elsötétítve ---------- */
.detail {
  position: fixed;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
body.is-open .detail { visibility: visible; opacity: 1; transition: opacity .6s var(--ease); }
.detail-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75) 100%),
    rgba(0, 0, 0, .25);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
.detail-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sw, 60vw);
  height: var(--sh, 34vw);
  transform: translate(-50%, -50%) scale(.94);
  border-radius: 16px;
  overflow: hidden;
  background: var(--film);
  box-shadow: 0 0 0 1px rgba(205, 253, 2, .3), 0 0 90px rgba(205, 253, 2, .1), 0 40px 120px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease);
}
body.is-open .detail-stage { transform: translate(-50%, -50%); opacity: 1; }
.detail-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.detail-sound {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  background: var(--glow);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .4);
}
.detail-sound[hidden] { display: none; }
.detail-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-x {
  position: absolute;
  top: calc(var(--pad) + env(safe-area-inset-top, 0px));
  right: var(--pad);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(14, 17, 6, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, transform .4s var(--ease-out), box-shadow .3s;
}
.detail-x:hover { background: rgba(205, 253, 2, .14); box-shadow: inset 0 0 0 1px var(--glow); transform: rotate(90deg); }
.detail-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.detail-info {
  position: absolute;
  left: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  width: min(340px, calc(100vw - 2 * var(--pad)));
  transform: translateY(16px);
  opacity: 0;
  filter: blur(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
body.is-open .detail-info { opacity: 1; transform: none; filter: none; transition-delay: .45s; transition-duration: .9s; }
.detail-cat { margin: 0 0 8px; color: var(--glow); font-size: 13px; font-weight: 500; }
.detail-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
}
.detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0 0 16px; }
.detail-facts dt { color: var(--faint); }
.detail-facts dd { margin: 0; }
.detail-desc { margin: 0 0 22px; color: var(--dim); max-width: 42ch; }
.detail-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 99px;
  font-weight: 500;
  background: rgba(14, 17, 6, .5);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s, color .3s;
}
.detail-close:hover { color: var(--glow); box-shadow: inset 0 0 0 1px var(--glow); }
.detail-close kbd { font: inherit; font-size: 12px; color: var(--dim); padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); }

/* ---------- kapcsolat ---------- */
.contact {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 24px;
  color: var(--ink);
  background: transparent;
  overflow: visible;
}
.contact[open] { animation: pop .7s var(--ease-out); }
.contact.closing { animation: unpop .35s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(10px); } }
@keyframes unpop { to { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(6px); } }
.contact::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .5s var(--ease); }
.contact.closing::backdrop { animation: fade .35s var(--ease) reverse forwards; }
@keyframes fade { from { opacity: 0; } }

/* forgó, zöld fényű keret */
.contact::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1px;
  background: conic-gradient(from var(--a, 0deg), transparent 0 25%, rgba(205, 253, 2, .9) 38%, transparent 50% 75%, rgba(205, 253, 2, .4) 88%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 6s linear infinite;
  pointer-events: none;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }

.contact-inner {
  position: relative;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(205, 253, 2, .12), transparent 60%),
    rgba(10, 12, 5, .82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 120px rgba(0, 0, 0, .7);
}
.contact-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.contact-head h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--dim); letter-spacing: -.01em; }
.contact-x {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, transform .4s var(--ease-out);
}
.contact-x:hover { background: rgba(205, 253, 2, .14); transform: rotate(90deg); }
.contact-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.contact-lead { margin: 0 0 22px; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }

.contact-mail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.contact-mail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--glow);
  -webkit-user-select: text;
  user-select: text;
}
.contact-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-copy {
  flex: none;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  background: var(--glow);
  transition: filter .3s, transform .3s var(--ease-out);
}
.contact-copy:hover { filter: brightness(1.1); }
.contact-copy:active { transform: scale(.96); }

.contact-social { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-social a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, box-shadow .3s;
}
.contact-social a:hover { background: rgba(205, 253, 2, .08); box-shadow: inset 0 0 0 1px rgba(205, 253, 2, .45); }
.contact-social .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-social .ext { width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; transition: stroke .3s, transform .3s var(--ease-out); }
.contact-social a:hover .ext { stroke: var(--glow); transform: translate(2px, -2px); }
.contact-social strong { display: block; font-weight: 500; }
.contact-social small { display: block; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- lábléc: billentyűzet-konzol ---------- */
.foot {
  --fp: 0;                                       /* 0 = rejtve, 1 = teljesen fent (JS állítja görgetésre) */
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 6;
  transform: translateY(calc((1 - var(--fp)) * 115%));
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 0%;
}
body.at-foot .foot { pointer-events: auto; }
body.at-foot .panel, body.at-foot .rail, body.at-foot .totop { opacity: 0 !important; pointer-events: none !important; }
.foot-glow {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 55%;
  height: 420px;
  background: radial-gradient(48% 62% at 50% 100%, rgba(205, 253, 2, .42), rgba(205, 253, 2, .12) 50%, transparent 76%);
  filter: blur(10px);
  opacity: calc(var(--fp) * 1);
  pointer-events: none;
}

.console {
  position: relative;
  padding: 16px var(--pad) calc(14px + env(safe-area-inset-bottom, 0px));   /* széltől szélig, a képernyő aljára ül */
  border-radius: 26px 26px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),      /* csiszolt fém */
    linear-gradient(180deg, #1c1e18 0%, #121410 55%, #0b0c09 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .8),
    0 0 0 1px rgba(0, 0, 0, .9),
    0 -30px 60px rgba(0, 0, 0, .55);
  transform: rotateX(16deg);                      /* hátrafelé dől, mint egy asztali billentyűzet */
  transform-origin: 50% 100%;
}
.screw {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4c44, #16170f 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06);
}
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 1px; background: rgba(0, 0, 0, .7); transform: rotate(35deg); }
.screw:nth-child(1) { left: 10px; top: 10px; }
.screw:nth-child(2) { right: 10px; top: 10px; }
.screw:nth-child(3) { left: 10px; bottom: 10px; }
.screw:nth-child(4) { right: 10px; bottom: 10px; }

.console-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 10px 12px; }
.lcd {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 250px;
  padding: 7px 14px;
  border-radius: 9px;
  font: 500 12px/1 ui-monospace, 'SF Mono', Consolas, monospace;
  letter-spacing: .04em;
  color: var(--glow);
  text-shadow: 0 0 6px rgba(205, 253, 2, .6);
  background: linear-gradient(180deg, #050603, #0b0d06);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
}
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.console-body { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: stretch; }

/* billentyűk: szobrozott mechanikus sapkák.
   .key::before = a sapka teste (lefelé szélesedő, magas elülső fal – perspektívával trapézzá döntve),
   .cap         = a sapka teteje (keskenyebb, domború). Lenyomáskor a tető süllyed (--p), az elülső fal rövidül. */
@property --p { syntax: '<length>'; inherits: true; initial-value: 0px; }
.keys {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  grid-auto-rows: 96px;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #040503, #0c0e09);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .05);
}
.key {
  --p: 0px;                                       /* mennyire van lenyomva */
  --body-hi: #34362f; --body: #1d1f19; --body-lo: #0a0b08;
  --top-hi: #45483e; --top: #2b2d26; --top-lo: #23251f;
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  outline-offset: 4px;
  border-radius: 16px;
  -webkit-tap-highlight-color: transparent;
  transition: --p .3s cubic-bezier(.22, .8, .3, 1);
}
.key-wide { grid-column: span 2; }
/* test: elülső fal + oldalak; a perspektíva miatt felül keskenyebb */
.key::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--p);
  bottom: 0;
  border-radius: 16px 16px 18px 18px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 16%, transparent 84%, rgba(0, 0, 0, .55)),   /* lekerekített oldalak */
    linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px),                         /* alsó élfény */
    linear-gradient(180deg, var(--body-hi) 0%, var(--body) 42%, var(--body-lo) 100%);
  box-shadow: 0 10px 16px rgba(0, 0, 0, .75), 0 2px 3px rgba(0, 0, 0, .9);
  transform: perspective(260px) rotateX(16deg);
  transform-origin: 50% 100%;
}
/* tető: keskenyebb, domború, felül fényes él */
.key .cap {
  position: absolute;
  left: 9px; right: 9px;
  top: calc(var(--p) + 3px);
  height: 58%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: center;
  gap: 0 6px;
  padding: 7px 10px 8px;
  border-radius: 12px;
  text-align: left;
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(180deg, var(--top-hi) 0%, var(--top) 45%, var(--top-lo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .28),           /* felső élfény */
    inset 0 -5px 9px rgba(0, 0, 0, .3),                 /* domború tető alja */
    inset 6px 0 8px -6px rgba(0, 0, 0, .35), inset -6px 0 8px -6px rgba(0, 0, 0, .35),
    0 3px 4px rgba(0, 0, 0, .45);                       /* a tető árnyéka a falon */
  transition: box-shadow .3s var(--ease);
}
.key .cap small { flex-basis: 100%; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: rgba(238, 241, 228, .42); }
.key .cap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.key .cap b { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
/* sima gombok: betűjel balra fent, ikon jobbra fent, felirat alul */
.key:not(.key-accent) .cap small { flex: 1; flex-basis: auto; }
.key:not(.key-accent) .cap b { flex-basis: 100%; }
/* ráállva: lágyan félig lesüllyed, lime peremfény */
.key:hover, .key:focus-visible { --p: 7px; }
.key:hover .cap, .key:focus-visible .cap {
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .28), inset 0 -5px 9px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(205, 253, 2, .45), 0 3px 4px rgba(0, 0, 0, .45), 0 0 18px rgba(205, 253, 2, .14);
}
/* kattintva / billentyűvel: mélyebbre */
.key:active, .key.down { --p: 13px; transition-duration: .16s; }

/* Hire me: lime sapka, sötétebb lime fal */
.key-accent { --body-hi: #d4fb1c; --body: #9fc400; --body-lo: #4c5f00; --top-hi: #f0ff8a; --top: #d2fd10; --top-lo: #bde600; color: #0b0d02; }
.key-accent::before { box-shadow: 0 10px 26px rgba(205, 253, 2, .25), 0 10px 16px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .8); }
.key-accent .cap { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 -5px 9px rgba(80, 100, 0, .28), 0 3px 4px rgba(40, 50, 0, .45); }
.key-accent .cap small { color: rgba(11, 13, 2, .55); }
.key-accent .cap .big { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-transform: none; }
.key-accent .cap svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.key-accent:hover .cap, .key-accent:focus-visible .cap { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 -5px 9px rgba(80, 100, 0, .28), 0 3px 4px rgba(40, 50, 0, .45), 0 0 34px rgba(205, 253, 2, .45); }

/* renderelt billentyűzet: a .kimg képek a Blenderben renderelt sapkák (7 lenyomási fázis egy szalagon),
   a HTML-gombok átlátszó, kattintható rétegek fölöttük */
.keys.sprite { display: block; position: relative; padding: 0; overflow: hidden; }
.kimg { position: absolute; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; transition: filter .3s var(--ease); }
.kimg.lit { filter: drop-shadow(0 0 12px rgba(205, 253, 2, .28)); }
.keys.sprite .key { position: absolute; border-radius: 14px; --p: 0px; }
.keys.sprite .key::before { display: none; }
.keys.sprite .key .cap { opacity: 0; }
.keys.sprite .key:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* hangszórórács */
.grille {
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, #040503 0 3px, #1a1c16 3px 4px, #0a0b08 4px 7px),
    #0a0b08;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .05);
  opacity: .9;
}

/* képernyő: modern, lekerekített kijelző lime hullámformával */
.scope {
  position: relative;
  width: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 40%, #11160a, #040502 70%);
  box-shadow: inset 0 0 0 1px rgba(205, 253, 2, .14), inset 0 2px 14px rgba(0, 0, 0, .9), 0 0 0 5px #0a0b08, 0 0 0 6px rgba(255, 255, 255, .05);
}
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope::after {                                   /* üveg-csillanás a kijelzőn */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 35%);
  pointer-events: none;
}
.scope-label {
  position: absolute;
  left: 14px; bottom: 10px;
  font: 500 11px/1 ui-monospace, 'SF Mono', Consolas, monospace;
  letter-spacing: .06em;
  color: rgba(205, 253, 2, .75);
  text-shadow: 0 0 6px rgba(205, 253, 2, .5);
}

.console-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 10px 0; font-size: 12px; color: rgba(238, 241, 228, .32); }

@media (max-width: 980px) {
  .scope { width: 220px; }
}
@media (max-width: 760px) {
  .console { padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; transform: rotateX(10deg); }
  .console-body { grid-template-columns: 1fr; }
  .grille, .scope { display: none; }
  .keys { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 84px; }
  .lcd { min-width: 0; }
}

/* ---------- WebGL nélkül ---------- */
.fallback { position: relative; z-index: 4; height: 100%; overflow: auto; touch-action: auto; padding: 120px var(--pad) 60px; display: grid; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fallback video { width: 100%; border-radius: 12px; background: var(--film); }
.fallback h3 { margin: 12px 0 0; font-weight: 600; letter-spacing: -.03em; font-size: 22px; }
body.no-webgl { overflow: auto; touch-action: auto; }
body.no-webgl .panel, body.no-webgl .rail, body.no-webgl .totop, body.no-webgl .loader { display: none; }

.nojs { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; }

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .rail { display: none; }
  .totop { left: auto; right: var(--pad); bottom: auto; top: calc(78px + env(safe-area-inset-top, 0px)); padding: 10px; transform: translateY(-6px); }
  .totop span { display: none; }
  body.far .totop { transform: none; }
  .now { margin-bottom: 18px; }
  /* mobilon két, nagyjából egyforma hosszú sor */
  .filters ul { flex-wrap: wrap; }
  .filters li.br { display: block; flex-basis: 100%; height: 0; }
  .menu-wave { width: 28px; }
  .detail-stage { top: 38%; }
  .detail-desc { display: none; }
  .contact-inner { padding: 22px; }
  .contact-lead { font-size: 19px; }
  .contact-social { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}