/* ajiths.in — instrument chrome over a full-bleed digital-rain canvas.
   CSP here is `default-src 'none'; style-src 'self'; img-src 'self' data:`,
   so: no webfonts, no CDN, no remote images. Gradients and one inline SVG
   turbulence (grain) are the entire texture budget.

   The palette is deliberately one hue. Rain green earns its look from
   brightness, not from colour variety. */

:root {
  --bg:        #000305;
  --head:      #eafff4;   /* hottest glyph */
  --hot:       #9dffcd;
  --green:     #19f27a;
  --green-2:   #0cb957;
  --deep:      #076b32;
  --dim:       #4e9d74;
  --dimmer:    #2c6448;
  --warn:      #ffb454;   /* the one non-green: paused state */

  --line:      rgba(25, 242, 122, .17);
  --line-hot:  rgba(25, 242, 122, .6);
  --panel:     rgba(0, 12, 6, .42);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", monospace;

  --pad: clamp(1rem, 3vw, 2.4rem);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--green);
  font-family: var(--mono);
  font-size: 16px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- canvas */

#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
  z-index: 0;
}

/* ------------------------------------------------------------ CRT layers */

.crt { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.crt > * { position: fixed; inset: 0; pointer-events: none; }

/* soft specular sheen, as if light fell across the glass */
.crt__glass {
  background:
    radial-gradient(130% 90% at 16% 4%,  rgba(160, 255, 210, .06), rgba(0,0,0,0) 52%),
    radial-gradient(90%  70% at 88% 96%, rgba(25, 242, 122, .035), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
}

/* fine film grain -- one self-contained SVG, no network fetch */
.crt__grain {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .055;
  mix-blend-mode: overlay;
}

.crt__scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)   0px,
    rgba(0, 0, 0, 0)   2px,
    rgba(0, 0, 0, .36) 2px,
    rgba(0, 0, 0, .36) 3px
  );
  opacity: .4;
  mix-blend-mode: multiply;
}

/* the slow bright band that drifts down a real tube */
.crt__roll {
  inset: auto 0 auto 0;
  height: 42vh;
  background: linear-gradient(to bottom,
    rgba(160, 255, 205, 0)    0%,
    rgba(160, 255, 205, .04)  46%,
    rgba(160, 255, 205, 0)   100%);
  mix-blend-mode: screen;
  animation: roll 9s linear infinite;
}

@keyframes roll {
  from { transform: translateY(-45vh); }
  to   { transform: translateY(145vh); }
}

.crt__vig {
  background:
    radial-gradient(ellipse 84% 80% at 50% 46%,
      rgba(0,0,0,0) 36%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.88) 100%);
}

/* ------------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: var(--pad);
  pointer-events: none;
}

.hud a, .hud kbd { pointer-events: auto; }

.id     { grid-row: 1; grid-column: 1; }
.status { grid-row: 1; grid-column: 2; justify-self: end; align-self: start; }
.tel    { grid-row: 2; grid-column: 1; justify-self: start; align-self: end; }
.meta   { grid-row: 3; grid-column: 1 / -1; }

/* ------------------------------------------------------------- identity */

.prompt {
  margin: 0;
  font-size: clamp(1.5rem, 5.2vw, 3rem);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.1;
  color: var(--head);
  text-shadow:
    0 0 1px  rgba(25, 242, 122, .95),
    0 0 16px rgba(25, 242, 122, .6),
    0 0 46px rgba(12, 185, 87, .35),
    -1px 0 0 rgba(255, 90, 90, .18),
     1px 0 0 rgba(90, 180, 255, .18);
}

.sigil { color: var(--green); opacity: .8; margin-right: .38em; }

.caret {
  display: inline-block;
  width: .5em;
  height: .95em;
  margin-left: .18em;
  background: var(--green);
  vertical-align: -.1em;
  box-shadow: 0 0 16px rgba(25, 242, 122, .9);
  animation: blink 1.15s steps(1) infinite;
}

@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.tag {
  max-width: 46ch;
  margin: .7rem 0 0;
  font-size: clamp(.68rem, 1.8vw, .8rem);
  letter-spacing: .12em;
  line-height: 1.7;
  text-transform: lowercase;
  color: var(--dim);
}

/* --------------------------------------------------------------- status */

.status {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem .7rem .34rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}

.status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(25, 242, 122, .95);
  animation: pulse 2.4s ease-in-out infinite;
}

.status.is-paused { color: var(--warn); border-color: rgba(255, 180, 84, .35); }
.status.is-paused .status__dot {
  background: var(--warn);
  box-shadow: 0 0 10px rgba(255, 180, 84, .9);
  animation: none;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------------- panel */

.panel {
  position: relative;
  padding: .95rem 1.15rem 1.05rem;
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(9px) saturate(118%);
  backdrop-filter: blur(9px) saturate(118%);
}

/* corner brackets, instrument-style */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-hot);
}
.panel::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.panel::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.panel__title {
  margin: 0 0 .7rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ------------------------------------------------------------ telemetry */

.tel dl {
  margin: 0;
  font-size: clamp(.66rem, 1.7vw, .76rem);
  letter-spacing: .07em;
  color: var(--dim);
}

.tel dl > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .55rem;
  line-height: 2.05;
  white-space: nowrap;
}

.tel dt { min-width: 7.2em; }

.tel .lead {
  height: 0;
  border-bottom: 1px dotted rgba(25, 242, 122, .22);
  transform: translateY(-.25em);
}

.tel dd {
  margin: 0;
  color: var(--hot);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(25, 242, 122, .35);
}

/* brightness key; mirrors the LEVELS ramp in matrix.js */
.ramp { margin-top: .95rem; }

.ramp__bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #03301a, #065b2c, #098c44, #0cb957, #12e070, #2bf98a, #7dffbd, #ccffe4, #f2fff8);
  box-shadow: 0 0 14px rgba(25, 242, 122, .28);
}

.ramp__labels {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .4rem;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* --------------------------------------------------------------- footer */

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: clamp(.64rem, 1.6vw, .74rem);
  color: var(--dim);
}

.keys, .contact { margin: 0; letter-spacing: .08em; }

.keys {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .5rem;
  min-width: 0;   /* without this a flex item refuses to wrap below max-content */
}

kbd {
  font: inherit;
  font-size: .92em;
  color: var(--green);
  background: rgba(25, 242, 122, .06);
  border: 1px solid rgba(25, 242, 122, .28);
  border-radius: 3px;
  padding: .1em .45em;
  box-shadow: inset 0 -1px 0 rgba(25, 242, 122, .14);
}

.keys__what { margin-right: .95rem; opacity: .85; }

.ptr { opacity: .72; }
.ptr em { font-style: normal; opacity: .75; }
.ptr--touch { display: none; }

.contact a {
  color: var(--hot);
  text-decoration: none;
  border-bottom: 1px solid rgba(157, 255, 205, .32);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--head);
  border-bottom-color: var(--head);
  text-shadow: 0 0 14px rgba(25, 242, 122, .65);
}

/* ----------------------------------------------------------------- boot */

.boot {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #02120a 0%, var(--bg) 72%);
  transition: opacity .8s ease .1s, visibility 0s linear .9s;
}

.boot.done { opacity: 0; visibility: hidden; }

.boot__inner { width: min(32rem, 86vw); }

.boot pre {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(.64rem, 2.1vw, .8rem);
  line-height: 1.95;
  letter-spacing: .05em;
  color: var(--green);
  text-shadow: 0 0 12px rgba(25, 242, 122, .5);
  white-space: pre-wrap;
  min-height: 9.5em;
}

.boot__bar {
  height: 2px;
  margin-top: 1.1rem;
  background: rgba(25, 242, 122, .13);
  overflow: hidden;
}

.boot__bar i {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(25, 242, 122, 0), var(--green), rgba(25, 242, 122, 0));
  animation: sweep 1.15s ease-in-out infinite;
}

@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}

/* ------------------------------------------------------------- noscript */

.noscript {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: .9rem;
  padding: 2rem;
  background: var(--bg);
  text-align: center;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--dim);
}
.noscript__id { font-size: 1.5rem; color: var(--head); letter-spacing: .05em; }
.noscript a { color: var(--hot); }

/* --------------------------------------------------------- small screens */

@media (max-width: 46rem) {
  .tel { display: none; }
  .meta { gap: .6rem; }
  .ptr { flex-basis: 100%; }
}

@media (max-height: 30rem) {
  .tel { display: none; }
}

@media (max-width: 30rem) {
  .status { display: none; }
}

/* No physical keyboard, or no room for the hints: swap in the touch wording
   rather than advertising keys the visitor cannot press. */
@media (max-width: 34rem), (hover: none) and (pointer: coarse) {
  .keys kbd,
  .keys__what,
  .ptr--fine { display: none; }
  .ptr--touch { display: inline; }
}

/* ----------------------------------------------------- motion preference */

@media (prefers-reduced-motion: reduce) {
  .caret,
  .status__dot,
  .crt__roll,
  .boot__bar i { animation: none; }
  .crt__roll { display: none; }
  .boot { transition: none; }
  .boot__bar i { width: 100%; }
}