/* Decimal Seven — a small, dependency-free desktop from a better timeline. */
:root {
  --void: #03050d;
  --desktop: #070a19;
  --panel: #10101c;
  --panel-deep: #070910;
  --purple: #493085;
  --purple-hi: #7957c9;
  --purple-lo: #201543;
  --mint: #69f5b7;
  --cyan: #55d9f3;
  --pink: #ec55df;
  --gold: #d8be72;
  --ink: #e7e2ee;
  --muted: #aaa0ba;
  --danger: #ff6f91;
  --line: #7e7190;
  --shadow: #000;
  --maxw: 58rem;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  color-scheme: dark;
  background: var(--void);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font: 16px/1.55 "Courier New", Courier, monospace;
  background:
    radial-gradient(circle at 14% 22%, rgba(85, 217, 243, .13) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 17%, rgba(236, 85, 223, .17) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 68%, rgba(105, 245, 183, .09) 0 1px, transparent 2px),
    linear-gradient(rgba(15, 18, 44, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 18, 44, .3) 1px, transparent 1px),
    var(--desktop);
  background-size: 137px 131px, 173px 149px, 211px 193px, 24px 24px, 24px 24px, auto;
  overflow-wrap: anywhere;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

a { color: var(--mint); }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.desktop {
  width: min(calc(100% - 2rem), var(--maxw));
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 5rem) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}

.brand-mark { color: var(--cyan); letter-spacing: -.08em; text-shadow: 2px 0 var(--pink); }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }

.window {
  border: 2px solid #9185a5;
  border-right-color: #292336;
  border-bottom-color: #292336;
  background: var(--panel);
  box-shadow: 8px 9px 0 rgba(0,0,0,.58), 0 0 32px rgba(92,61,159,.13);
}

.window-bar {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem .45rem .3rem .7rem;
  background: linear-gradient(90deg, var(--purple-lo), var(--purple), #2f1d62);
  color: #e9dff7;
  font-size: .78rem;
  letter-spacing: .06em;
}

.window-buttons { display: flex; gap: 4px; }
.window-buttons span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #b4a7c8;
  border-right-color: #2c2437;
  border-bottom-color: #2c2437;
  background: #81738e;
  color: #15111d;
  font: 700 11px/1 sans-serif;
}

.window-body { padding: clamp(1.35rem, 5vw, 3.5rem); background: linear-gradient(135deg, rgba(39,24,61,.2), transparent 40%), var(--panel-deep); }
.prompt, .eyebrow { margin: 0 0 .7rem; color: var(--mint); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
h1 { max-width: 18ch; margin: 0; font-size: clamp(2.1rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -.055em; text-shadow: 3px 3px 0 #33205c; }
.lede { max-width: 43rem; margin: 1.25rem 0; color: var(--ink); font-size: clamp(1rem, 2vw, 1.2rem); }
.copy { max-width: 42rem; color: var(--muted); }
.blink { display: inline-block; width: .62em; height: 1.05em; vertical-align: -.12em; background: var(--mint); animation: blink 1.05s steps(1) infinite; }

.gate-panel[hidden] { display: none; }
.gate-panel h1 { font-size: clamp(1.8rem, 6vw, 3.5rem); }
.notice { margin: 1.4rem 0; padding: .8rem 1rem; border: 1px solid var(--gold); background: rgba(216,190,114,.08); color: var(--gold); }
.fineprint { margin: 1.7rem 0 0; padding-top: 1rem; border-top: 1px dashed #373044; color: var(--muted); font-size: .78rem; }

.terminal {
  margin: 1.7rem 0;
  border: 1px solid #41574f;
  background: #030a08;
  color: var(--mint);
  box-shadow: inset 0 0 22px rgba(105,245,183,.045);
}
.terminal-head { display: flex; justify-content: space-between; padding: .45rem .65rem; border-bottom: 1px solid #263d35; color: var(--gold); font-size: .74rem; }
.terminal-body { margin: 0; padding: .8rem; list-style: none; font-size: .82rem; }
.terminal-body li + li { margin-top: .4rem; }
.ok { color: var(--mint); }
.warning { color: var(--gold); }
.error { color: var(--danger); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  border: 1px solid var(--purple-hi);
  background: #25164d;
  color: #fff;
  text-decoration: none;
  box-shadow: 3px 3px 0 #09050f;
}
.button:hover { background: #3b2474; color: #fff; }

.apple-signin-button {
  display: inline-flex;
  min-width: 210px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: .42em;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font: 500 19px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
}
.apple-signin-button:hover { color: #000; opacity: .86; }
.apple-signin-button__logo { width: auto; height: 19px; margin-top: -.12em; }

.footer-line { margin-top: 1.4rem; color: #716780; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.error-code { color: var(--pink); }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }
@media (max-width: 520px) {
  .desktop { width: min(calc(100% - 1rem), var(--maxw)); padding: 1rem 0; }
  .window-body { padding: 1.35rem 1rem 1.7rem; }
  .apple-signin-button, .button { width: 100%; }
}