:root {
  color-scheme: dark;
  --text: #dce8e3;
  --signal: #13d99b;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
html { background: #030807; }
body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #030807;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
button, input { font: inherit; }

.scene, .darkness, .fog, .mist {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.scene {
  z-index: 0;
  background: url("/assets/palm-night.webp") center center / cover no-repeat;
  filter: blur(10px) brightness(.36) saturate(.78) contrast(1.06);
  transform: scale(1.15);
  transition: filter 1.8s cubic-bezier(.16, 1, .3, 1);
}
.darkness {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(2, 7, 6, 0) 0, rgba(2, 7, 6, .1) 32%, rgba(2, 7, 6, .5) 78%, rgba(2, 7, 6, .78) 100%),
    linear-gradient(180deg, rgba(1, 5, 4, .34), rgba(1, 6, 5, .04) 43%, rgba(1, 5, 4, .52));
}
.fog {
  z-index: 2;
  inset: -18%;
  opacity: .28;
  transform: translate3d(0, 0, 0);
  contain: strict;
}
.fog-one {
  background:
    radial-gradient(ellipse 46% 34% at 18% 66%, rgba(181, 222, 207, .48) 0, rgba(94, 155, 134, .2) 38%, transparent 72%),
    radial-gradient(ellipse 38% 28% at 58% 72%, rgba(19, 217, 155, .24) 0, transparent 74%);
}
.fog-two {
  opacity: .24;
  background:
    radial-gradient(ellipse 42% 32% at 80% 30%, rgba(19, 217, 155, .42) 0, rgba(19, 217, 155, .14) 42%, transparent 74%),
    radial-gradient(ellipse 32% 26% at 54% 46%, rgba(151, 208, 187, .2) 0, transparent 76%);
}
.mist {
  z-index: 2;
  inset: 22% -20% -24%;
  opacity: .2;
  background:
    radial-gradient(ellipse 52% 18% at 20% 58%, rgba(207, 231, 222, .46) 0, rgba(123, 172, 154, .16) 48%, transparent 78%),
    radial-gradient(ellipse 48% 17% at 70% 51%, rgba(19, 217, 155, .36) 0, rgba(19, 217, 155, .1) 50%, transparent 80%);
  transform: translate3d(0, 0, 0);
  contain: strict;
}
.signal-shell {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4vh, 44px);
  padding: clamp(28px, 6vh, 64px) 20px;
}
.brand {
  display: block;
  text-decoration: none;
  animation: appear 1.7s cubic-bezier(.16, 1, .3, 1) both;
}
.brand img {
  display: block;
  width: clamp(190px, 16vw, 250px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .78;
}

.command {
  width: min(390px, calc(100vw - 40px));
  animation: appear 1.5s .28s cubic-bezier(.16, 1, .3, 1) both;
}
.terminal-form {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 6px 5px 15px;
  border: 1px solid rgba(214, 235, 227, .13);
  border-radius: 16px;
  background: rgba(4, 15, 12, .55);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 12px 34px rgba(0, 0, 0, .13);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, opacity .4s ease;
}
.prompt {
  flex: none;
  color: rgba(19, 217, 155, .72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}
.terminal-form input {
  min-width: 0;
  flex: 1;
  padding: 10px 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  caret-color: var(--signal);
  font-size: 13px;
}
.terminal-form input::placeholder { color: rgba(204, 224, 216, .26); }
.terminal-form button {
  flex: none;
  min-width: 62px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(19, 217, 155, .16);
  border-radius: 11px;
  color: rgba(19, 217, 155, .82);
  background: rgba(19, 217, 155, .08);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.terminal-form button:hover {
  color: #03110d;
  border-color: var(--signal);
  background: var(--signal);
  transform: scale(1.04);
}
.terminal-form button:focus-visible { outline: 1px solid var(--signal); outline-offset: 5px; }
.terminal-form input:focus, .terminal-form input:focus-visible { outline: none; }
.command:focus-within .terminal-form {
  border-color: rgba(19, 217, 155, .42);
  background: rgba(5, 20, 15, .68);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 0 0 3px rgba(19, 217, 155, .055), 0 14px 38px rgba(0, 0, 0, .16);
}
.terminal-form.is-solved { opacity: .38; }
.command-status {
  min-height: 18px;
  margin: 8px 12px 0;
  color: rgba(194, 155, 150, .72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.command-status.is-success { color: rgba(19, 217, 155, .78); }
.command-status.is-shaking { animation: status-nudge .28s ease both; }
.discord-invite {
  width: fit-content;
  margin-top: 18px;
  padding: 13px 20px;
  border: 1px solid var(--signal);
  border-radius: 12px;
  color: #03110d;
  background: var(--signal);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.discord-invite[hidden] { display: none; }
.discord-invite.is-visible { display: inline-flex; animation: invite-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.discord-invite:hover { background: #3ce5b0; }
.discord-invite:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.openings {
  position: relative;
  isolation: isolate;
  width: min(940px, calc(100vw - 40px));
  animation: appear 1.5s .45s cubic-bezier(.16, 1, .3, 1) both;
}
.openings::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -90px -120px -105px;
  pointer-events: none;
  opacity: .68;
  background: radial-gradient(ellipse 38% 58% at 50% 54%, rgba(19, 217, 155, .18) 0, rgba(19, 217, 155, .07) 44%, transparent 76%);
  transform: translate3d(-12%, 0, 0);
}
.openings > header { margin-bottom: 16px; }
.openings h1 {
  margin: 0;
  color: rgba(239, 248, 244, .9);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 580;
  letter-spacing: -.035em;
}
.opening-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.opening-grid article {
  min-height: 268px;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 17px;
  overflow: hidden;
  border: 1px solid rgba(214, 235, 227, .14);
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0, rgba(19, 217, 155, .1), transparent 36%),
    rgba(4, 15, 12, .64);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 18px 50px rgba(0, 0, 0, .15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.opening-banner {
  position: relative;
  height: 92px;
  margin: 0 0 15px;
  overflow: hidden;
  border: 1px solid rgba(218, 239, 231, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}
.opening-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(4, 15, 12, .48)),
    linear-gradient(90deg, rgba(4, 15, 12, .15), transparent 22%, transparent 78%, rgba(4, 15, 12, .15));
}
.opening-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) brightness(.82) contrast(1.04);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
}
.opening-grid article:hover .opening-banner img {
  transform: scale(1.035);
  filter: saturate(.95) brightness(.92) contrast(1.03);
}
.opening-grid article:hover {
  border-color: rgba(19, 217, 155, .38);
  background:
    radial-gradient(circle at 100% 0, rgba(19, 217, 155, .14), transparent 40%),
    rgba(5, 20, 15, .74);
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 22px 60px rgba(0, 0, 0, .22);
  transform: translateY(-3px);
}
.opening-grid h2 {
  margin: 0 12px 10px;
  color: rgba(242, 250, 247, .95);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.025em;
}
.opening-grid p {
  margin: 0 12px 20px;
  color: rgba(211, 229, 222, .58);
  font-size: 11px;
  line-height: 1.56;
}
.opening-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 7px;
  margin: auto 8px 0;
}
.opening-actions a,
.opening-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.opening-actions a {
  color: var(--signal);
  border-color: rgba(19, 217, 155, .2);
  background: rgba(19, 217, 155, .09);
}
.opening-actions a svg {
  width: 15px;
  height: 12px;
  flex: none;
}
.opening-actions a:hover {
  color: #03110d;
  border-color: var(--signal);
  background: var(--signal);
  transform: scale(1.035);
}
.opening-actions button {
  justify-content: center;
  color: rgba(225, 238, 233, .7);
  background: rgba(255, 255, 255, .035);
  border-color: rgba(210, 232, 223, .12);
}
.opening-actions button:hover {
  color: #fff;
  border-color: rgba(19, 217, 155, .32);
  background: rgba(19, 217, 155, .08);
  transform: scale(1.035);
}
.opening-actions a:focus-visible,
.opening-actions button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

body.terminal-solved .scene { filter: blur(10px) brightness(.37) saturate(.8) contrast(1.06); }
body.terminal-solved .brand { opacity: 1; }

.role-dialog {
  width: min(700px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 238, 229, .16);
  border-radius: 26px;
  color: var(--text);
  background: rgba(5, 15, 12, .97);
  box-shadow: 0 36px 110px rgba(0, 0, 0, .65);
}
.role-dialog::backdrop {
  background: rgba(1, 5, 4, .76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.role-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: dialog-in .25s cubic-bezier(.16, 1, .3, 1);
}
.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(216, 238, 229, .1);
}
.dialog-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(220, 236, 230, .58);
  font-size: 11px;
}
.dialog-brand img { width: 23px; height: 23px; object-fit: contain; }
.dialog-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(226, 239, 234, .66);
  background: rgba(255, 255, 255, .05);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.dialog-scroll { padding: 28px 32px 20px; overflow-y: auto; }
.dialog-banner {
  position: relative;
  height: clamp(150px, 25vw, 220px);
  margin: -10px -14px 26px;
  overflow: hidden;
  border-radius: 19px;
  background: rgba(19, 217, 155, .04);
}
.dialog-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 46%, rgba(5, 15, 12, .92) 100%),
    linear-gradient(90deg, rgba(5, 15, 12, .38), transparent 15%, transparent 85%, rgba(5, 15, 12, .38));
}
.dialog-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04) brightness(.78);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.role-dialog h2 {
  margin: 0 0 20px;
  color: rgba(244, 251, 248, .96);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 620;
  letter-spacing: -.045em;
}
.dialog-content p,
.dialog-content li {
  color: rgba(211, 229, 222, .68);
  font-size: 13px;
  line-height: 1.68;
}
.dialog-content p { margin: 0 0 14px; }
.dialog-content h3 {
  margin: 26px 0 10px;
  color: rgba(238, 247, 243, .9);
  font-size: 14px;
  font-weight: 600;
}
.dialog-content ul { margin: 0; padding-left: 19px; }
.dialog-content li { margin: 5px 0; padding-left: 4px; }
.dialog-content li::marker { color: var(--signal); }
.dialog-footer {
  padding: 16px 18px;
  border-top: 1px solid rgba(216, 238, 229, .1);
  background: rgba(2, 8, 6, .48);
}
.dialog-footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 13px;
  color: #03110d;
  background: var(--signal);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}
.dialog-footer a:hover { background: #3ce5b0; }
.dialog-footer a svg { width: 17px; height: 14px; }

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

@keyframes appear {
  from { opacity: 0; transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes invite-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes status-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scene-drift {
  from { transform: translate3d(-2.2%, -.8%, 0) scale(1.11); }
  to { transform: translate3d(2.6%, 1%, 0) scale(1.15); }
}
@keyframes fog-one {
  from { transform: translate3d(-8%, 2.5%, 0) scale(.98); }
  to { transform: translate3d(9%, -3%, 0) scale(1.08); }
}
@keyframes fog-two {
  from { transform: translate3d(8%, -3%, 0) scale(1.08); }
  to { transform: translate3d(-9%, 3%, 0) scale(.98); }
}
@keyframes mist-drift {
  0% { opacity: .14; transform: translate3d(-9%, 2%, 0) scale(.98); }
  50% { opacity: .24; }
  100% { opacity: .17; transform: translate3d(10%, -2%, 0) scale(1.08); }
}
@keyframes opening-glow {
  0% { opacity: .46; transform: translate3d(-12%, 0, 0) scale(.94); }
  50% { opacity: .78; }
  100% { opacity: .52; transform: translate3d(12%, 0, 0) scale(1.06); }
}

@media (min-width: 681px) {
  .scene {
    animation: scene-drift 18s ease-in-out infinite alternate;
    will-change: transform;
  }
  .fog-one {
    animation: fog-one 13s ease-in-out infinite alternate;
    will-change: transform;
  }
  .fog-two {
    animation: fog-two 17s ease-in-out infinite alternate;
    will-change: transform;
  }
  .mist {
    animation: mist-drift 21s ease-in-out infinite alternate;
    will-change: transform, opacity;
  }
  .openings::before {
    animation: opening-glow 8s ease-in-out infinite alternate;
    will-change: transform, opacity;
  }
}

@media (max-width: 680px) {
  .scene { background-position: 56% center; }
  .fog { inset: -10%; }
  .fog-two { display: none; }
  .mist { inset: 30% -16% -16%; opacity: .07; }
  .openings::before { display: none; }
  .signal-shell { justify-content: flex-start; gap: 28px; padding: 38px 20px 36px; }
  .brand img { width: 165px; }
  .command, .openings { width: 100%; }
  .opening-grid { grid-template-columns: 1fr; }
  .opening-grid article { min-height: 0; padding: 21px; }
  .dialog-scroll { padding: 24px 21px 18px; }
  .dialog-banner { height: 150px; margin: -8px -7px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}