/* default palette = Solarized Light (overridden by JS per ?t=) */
:root{
  --base:#fdf6e3; --mantle:#eee8d5;
  --text:#586e75; --subtext1:#657b83; --subtext0:#93a1a1; --overlay0:#93a1a1;
  --surface0:#eee8d5; --surface1:#ddd6c1; --surface2:#c9c2ad;
  --title:#073642; --mauve:#268bd2; --peach:#cb4b16; --green:#859900;
  --red:#dc322f; --blue:#268bd2; --teal:#2aa198; --sky:#0a8ea0; --sapphire:#268bd2;
  --glowA:rgba(38,139,210,.10); --glowB:rgba(42,161,152,.08);
  --scanline:rgba(0,0,0,.32); --scanOpacity:.75;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"Cascadia Code NF","Cascadia Code",ui-monospace,"JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
}
html[data-mode="light"]{--scanline:rgba(0,0,0,.17); --scanOpacity:.9}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--base); color:var(--text);
  font-family:var(--serif); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 75% -10%, var(--glowA), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, var(--glowB), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom,
    var(--scanline) 0, var(--scanline) 1px, transparent 1px, transparent 3px);
  opacity:var(--scanOpacity);
}
/* CRT phosphor glow only for the amber theme */
html[data-theme="amber-crt"] .term,
html[data-theme="amber-crt"] .prose,
html[data-theme="amber-crt"] h1{text-shadow:0 0 .6px rgba(255,176,0,.45)}

.wrap{max-width:1080px; margin:0 auto; padding:clamp(1.5rem,5vw,4rem) 1.5rem 4rem; position:relative}

.term{font-family:var(--mono); font-size:.92rem; color:var(--subtext0); margin-bottom:2.5rem}
.term .u{color:var(--green)} .term .at{color:var(--overlay0)}
.term .h{color:var(--sapphire)} .term .p{color:var(--peach)} .term .d{color:var(--overlay0)}
.term .cmd{color:var(--text)}
.cursor{display:inline-block; width:.55ch; height:1.05em; vertical-align:-.18em;
         background:var(--green); margin-left:.15ch; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

h1{font-family:var(--serif); font-weight:600; letter-spacing:.2px;
   font-size:clamp(2.4rem,7vw,3.6rem); margin:0 0 .15em; color:var(--title)}
h1 .tld{color:var(--mauve)}
.status{font-family:var(--mono); font-size:.9rem; color:var(--subtext1); margin:0 0 1.4rem}
.dot{color:var(--green); text-shadow:0 0 8px var(--green); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rule{border:0; border-top:1px solid var(--surface1); margin:1.6rem 0 2.2rem}

.prose{position:relative; max-width:42rem}
.prose p{margin:0 0 1.15rem}
.prose p.lead::first-letter{font-size:3.1em; float:left; line-height:.78; padding:.06em .12em 0 0; color:var(--peach); font-weight:600}
a{color:var(--blue); text-decoration:none; border-bottom:1px solid var(--surface2)}
a:hover{color:var(--sky); border-color:var(--sky)}
code{font-family:var(--mono); font-size:.86em; background:var(--surface0); color:var(--teal); padding:.1em .4em; border-radius:5px}

.sidenote{font-family:var(--mono); font-size:.78rem; line-height:1.5; color:var(--subtext0)}
@media(min-width:1000px){.sidenote{position:absolute; left:44rem; width:13rem; top:.2rem; border-left:2px solid var(--surface1); padding-left:1rem; margin:0}}
@media(max-width:999px){.sidenote{display:block; margin:.4rem 0 1.4rem; padding:.7rem .9rem; background:var(--mantle); border-left:2px solid var(--surface1); border-radius:0 6px 6px 0}}
.sidenote .num{color:var(--peach)}

.swatches{display:flex; gap:.45rem; margin:2.4rem 0 2.6rem}
.swatches i{width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:0 0 6px rgba(0,0,0,.25)}

.fetch{display:flex; gap:1.6rem; flex-wrap:wrap; align-items:flex-start;
  font-family:var(--mono); font-size:.8rem; line-height:1.35;
  background:var(--mantle); border:1px solid var(--surface0); border-radius:12px;
  padding:1.3rem 1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.18); max-width:42rem}
.fetch pre{margin:0; color:var(--red); font-size:.72rem; line-height:1.05; white-space:pre}
.fetch .info{margin:0; min-width:15rem}
.fetch .info .who{color:var(--green)}
.fetch .info .sep{color:var(--surface2)}
.fetch .k{color:var(--mauve)} .fetch .v{color:var(--text)}
.fetch .bar{margin-top:.5rem; letter-spacing:1px}

footer{font-family:var(--mono); font-size:.74rem; color:var(--overlay0); margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--surface0)}
footer a{color:var(--overlay0); border:0}
footer a:hover{color:var(--subtext0)}