/* ============================================================
   teLLeM — the alanj.dev treatment.
   Terminal phosphor on near-black, diamond labels with fading
   lines, corner-bracketed panels. Same design language as the
   author's site, because they are the same shelf.
   ============================================================ */

:root{
  --bg:        #04070a;
  --bg-2:      #070c11;
  --panel:     rgba(10,18,24,.66);
  --line:      rgba(90,255,190,.16);
  --line-hard: rgba(90,255,190,.34);
  --fg:        #b9d6cc;
  --fg-dim:    #5d7b73;
  --fg-faint:  #33473f;
  --acc:       #4dffb0;
  --acc-2:     #ffb347;
  --acc-3:     #6cc5ff;
  --danger:    #ff5f6d;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut: clamp(1rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; background:var(--bg); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--mono);
  font-size:15px; line-height:1.65;
  color:var(--fg);
  background:
    radial-gradient(1100px 700px at 75% -10%, rgba(77,255,176,.05), transparent 60%),
    radial-gradient(800px 600px at 10% 110%, rgba(108,197,255,.04), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

::selection{ background:var(--acc); color:#02100a; }

a{ color:var(--acc); text-decoration:none; }
a:hover{ color:#8dffcf; }
a:focus-visible, button:focus-visible, textarea:focus-visible{
  outline:2px solid var(--acc-2); outline-offset:3px;
}

/* ---------- atmosphere ---------- */

.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.2) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply; opacity:.45;
}
.grain{
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(0,0,0,.7) 100%);
}

/* ---------- layout ---------- */

.wrap{ position:relative; z-index:5; max-width:1060px; margin:0 auto; padding:0 var(--gut) 4rem; }

header.site{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 0 1rem;
  border-bottom:1px solid var(--line);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
/* The wordmark hides LLM inside "tell them", so it must keep its own case: the header's
   uppercase would flatten it to TELLEM and take the joke with it. */
.brand{ color:#e6fff5; font-weight:600; letter-spacing:.08em; text-transform:none;
        font-size:14px; }
.brand::before{ content:"◆ "; color:var(--acc); animation:pulse 3.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.brand b{ color:var(--acc); font-weight:600; }
nav.site{ display:flex; gap:1.5em; align-items:center; }
nav.site a{ color:var(--fg-dim); transition:color .2s; }
nav.site a:hover{ color:var(--acc); }
nav.site a.author{ color:var(--acc-2); }
nav.site a.author:hover{ color:#ffd08a; }

/* ---------- the label: diamond, number, fading line ---------- */

.label{
  display:flex; align-items:center; gap:1em;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 1.1rem;
}
.label .n{ color:var(--acc); }
.label::after{ content:""; flex:1; height:1px;
  background:linear-gradient(to right, var(--line-hard), rgba(90,255,190,0)); }

/* ---------- type ---------- */

h1,h2{ font-weight:600; line-height:1.1; letter-spacing:-.02em; color:#e6fff5; margin:0 0 .5em; }
h1{ font-size:clamp(1.9rem, 5.4vw, 3.1rem); line-height:1.04;
    text-shadow:0 0 26px rgba(77,255,176,.2); }
h1 em{ font-style:normal; color:var(--acc); }
h2{ font-size:clamp(1.3rem, 3vw, 1.8rem); }
p{ margin:0 0 1.1em; max-width:64ch; }
.lede{ color:#cfe9e0; }
code.inline{
  font-family:var(--mono); font-size:.9em;
  background:rgba(77,255,176,.09); border:1px solid var(--line);
  padding:.08em .4em; border-radius:2px; color:var(--acc);
}

section{ margin:4.5rem 0; }

/* ---------- hero ---------- */

.hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center; padding-top:3.5rem; }
.hero .prompt{
  font-size:12.5px; color:var(--fg-dim); margin-bottom:1.2rem;
  display:flex; gap:.6em; align-items:baseline;
}
.hero .prompt .sym{ color:var(--acc); }
.hero .prompt .cmd{ color:var(--acc-3); }
.caret{ display:inline-block; width:.55em; height:1em; background:var(--acc);
        vertical-align:-.14em; animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .caret{ animation:none; } }

.actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:.8em 1.3em; border:1px solid var(--line-hard); border-radius:2px;
  color:var(--acc); background:rgba(77,255,176,.04);
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
  cursor:pointer; font-family:var(--mono);
}
.btn:hover{ background:rgba(77,255,176,.13); border-color:var(--acc);
            transform:translateY(-2px); box-shadow:0 6px 26px -10px var(--acc); color:var(--acc); }
.btn.ghost{ color:var(--fg-dim); border-color:var(--line); background:none; }
.btn.ghost:hover{ color:var(--acc-2); border-color:var(--acc-2);
                  box-shadow:0 6px 26px -10px var(--acc-2); }

/* the hero specimen: a lint readout as ornament */
.specimen{
  border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(9px); border-radius:3px; padding:1.1rem 1.2rem;
  font-size:11.5px; line-height:1.75; color:var(--fg-dim); position:relative;
  box-shadow:0 20px 60px -30px rgba(77,255,176,.35);
}
.specimen::before, .specimen::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border-color:var(--acc); border-style:solid; opacity:.65;
}
.specimen::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.specimen::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.specimen .rid{ color:var(--acc); }
.specimen .rng{ color:var(--fg-faint); }
.specimen .qt{ color:var(--acc-2); }
.specimen .why{ color:var(--fg-faint); }
.specimen .sum{ color:#cfe9e0; }

/* ---------- reveal ---------- */

.settle{ opacity:0; transform:translateY(14px); animation:settle .8s cubic-bezier(.2,.7,.2,1) forwards; }
.settle:nth-child(2){ animation-delay:.12s } .settle:nth-child(3){ animation-delay:.24s }
@keyframes settle{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .settle{ opacity:1; transform:none; animation:none; } }

/* ---------- bench ---------- */

.bench{
  border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(9px); border-radius:3px; position:relative;
}
.bench::before, .bench::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border-color:var(--acc); border-style:solid; opacity:.65;
}
.bench::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.bench::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

.bench-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.7rem 1.1rem; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint);
}
#status{ color:var(--acc); }

textarea{
  width:100%; border:0; background:rgba(2,6,9,.55); color:var(--fg);
  font-family:var(--mono); font-size:14px; line-height:1.6;
  padding:1rem 1.1rem; resize:vertical; min-height:9.5em; display:block;
}
textarea::placeholder{ color:var(--fg-faint); }
textarea:focus{ outline:none; background:rgba(2,6,9,.75); }

.bench-actions{
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:.8rem 1.1rem; border-top:1px solid var(--line);
}
.bench-actions button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:.6em 1.1em; border:1px solid var(--line-hard); border-radius:2px;
  color:var(--acc); background:rgba(77,255,176,.05); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.bench-actions button:hover{ background:rgba(77,255,176,.14); border-color:var(--acc); }
.bench-actions button#sample{ color:var(--fg-dim); border-color:var(--line); background:none; }
.bench-actions button#sample:hover{ color:var(--acc-2); border-color:var(--acc-2); }

.bench-out{
  padding:1rem 1.1rem; font-size:12.5px; line-height:1.8;
  white-space:pre-wrap; word-break:break-word;
  color:var(--fg); min-height:2.5em; border-top:1px solid var(--line);
}
.bench-out:empty{ display:none; }
.bench-out .rule, .bench-out b{ color:var(--acc); }
.bench-out .quote{ color:var(--acc-2); }
.bench-out .dim{ color:var(--fg-faint); }

/* ---------- numbers: stat tiles ---------- */

.numbers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.num{ background:var(--bg-2); padding:1.3rem 1.2rem; }
.num b{ display:block; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--acc);
        line-height:1; letter-spacing:-.03em; font-weight:600; }
.num span{ display:block; font-size:10.5px; letter-spacing:.18em;
           text-transform:uppercase; color:var(--fg-faint); margin-top:.7em; }

/* ---------- atlas ---------- */

.atlas{ border-top:1px solid var(--line); }
.atlas-row{
  display:grid; grid-template-columns:9em 1fr 6.5em; gap:1.2em; align-items:center;
  padding:.75rem .2rem; border-bottom:1px solid var(--line);
  font-size:12px;
}
.atlas-row > span:first-child{ color:#dcf5ec; letter-spacing:.06em; }
.atlas-row > span:last-child{ color:var(--fg-faint); text-align:right; font-size:11px; }
.drop{
  height:5px; border-radius:1px; position:relative;
  background:linear-gradient(to right, var(--acc), var(--acc-3));
  box-shadow:0 0 12px -2px var(--acc);
}
.drop::after{
  content:""; position:absolute; right:-3px; top:50%; width:6px; height:6px;
  transform:translateY(-50%) rotate(45deg); background:var(--acc-3);
}

/* ---------- refusal ---------- */

.refusal{
  border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(9px);
  border-radius:3px; padding:1.6rem 1.7rem; position:relative;
  display:grid; grid-template-columns:1fr 1.6fr; gap:2rem;
}
.refusal::before, .refusal::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border-color:var(--acc-2); border-style:solid; opacity:.65;
}
.refusal::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.refusal::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.refusal blockquote{
  margin:0; padding-left:1.1rem; border-left:2px solid var(--acc-2);
  color:#ffd8a3; font-size:1.05rem; line-height:1.5;
}
.refusal p{ font-size:13px; color:var(--fg-dim); }
.refusal p:last-child{ margin-bottom:0; }

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

footer.site{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6em;
  border-top:1px solid var(--line); padding-top:1.1rem; margin-top:4rem;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint);
}
footer.site a{ color:var(--fg-dim); }
footer.site a:hover{ color:var(--acc); }
footer.site .author{ color:var(--acc-2); }

/* ---------- responsive ---------- */

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
  .specimen{ display:none; }
  .refusal{ grid-template-columns:1fr; }
  nav.site{ gap:1em; }
}