/* HarkNote site — the app's terminal/phosphor skin, on the web. */
:root{
  --chassis:#131314; --panel:#2a2b2d; --panel-hi:#414246;
  --well:#041109; --phos:#34e24a; --phos-mute:rgba(52,226,74,.6);
  --phos-dim:rgba(52,226,74,.16); --steel-hi:#6b7682; --steel-lo:#2e343b;
  --ink:#d9d9dc;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--chassis); color:var(--phos);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; line-height:1.65; padding:20px;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}
.wrap{max-width:780px;margin:0 auto}
.titlebar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:48px;color:var(--ink);font-weight:700;letter-spacing:.35em;
  font-size:14px;text-transform:uppercase;
  background:linear-gradient(180deg,var(--steel-hi),var(--steel-lo));
  border:1px solid #000;border-top-color:#5e5e5e;border-left-color:#5e5e5e;
}
.titlebar .d{color:var(--steel-hi);font-size:9px}
.panel{
  background:var(--well);border:1px solid #000;border-top-color:#000;
  border-left-color:#000;border-right-color:#5e5e5e;border-bottom-color:#5e5e5e;
  padding:22px;margin:14px 0;
  box-shadow:inset 0 0 0 0 #000;
}
.label{
  color:var(--phos-mute);letter-spacing:.28em;font-size:11px;
  text-transform:uppercase;margin-bottom:12px;display:block;
}
h1.hero{
  font-size:clamp(34px,9vw,64px);letter-spacing:.12em;
  text-shadow:0 0 14px rgba(52,226,74,.55);margin:8px 0
}
.tag{color:var(--phos-mute);letter-spacing:.22em;text-transform:uppercase;font-size:13px}
h2{
  color:var(--phos-mute);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;margin:26px 0 8px
}
h3{color:var(--phos);font-size:14px;margin:18px 0 4px;letter-spacing:.06em}
p,li{color:var(--ink);margin:8px 0}
strong{color:var(--phos)}
ul{margin:8px 0 8px 20px}
a{color:var(--phos);text-decoration:none;border-bottom:1px dotted var(--phos-mute)}
a:hover{text-shadow:0 0 8px rgba(52,226,74,.6)}
.cta{
  display:inline-block;margin:8px 8px 8px 0;padding:14px 22px;
  background:var(--phos);color:#000;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid #000;border-top-color:#7be58c;
  border-left-color:#7be58c;
}
.cta:hover{text-shadow:none;filter:brightness(1.05)}
.feat{display:flex;gap:14px;align-items:baseline;margin:10px 0}
.feat .b{color:var(--phos-mute)}
.muted{color:var(--phos-mute);font-size:13px}
.foot{
  border-top:1px dashed var(--phos-dim);margin-top:34px;padding-top:16px;
  color:var(--phos-mute);font-size:12px;letter-spacing:.06em
}
.nav{margin:16px 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav a{margin-right:18px}
hr{border:0;border-top:1px dashed var(--phos-dim);margin:22px 0}