/* kieran.fm — a place for friends (8).
   Five layouts, picked with the "change my layout" box (body[data-layout]):
   2006 (the default: dark, blue bar, tables energy) · daylight · glitter · emo · 2026 (the cool one). */

/* Dark by default (Kieran, 2026-09-25). "daylight" is the one light layout left. */
:root {
  --bg: #05050c;
  --page: rgba(10, 12, 26, .9);
  --ink: #dde3f0;
  --muted: #8b93ad;
  --bar: #039;
  --bar-ink: #fff;
  --head: #ff8a1f;
  --box-head: #1d3b73;
  --box-head-ink: #aee0ff;
  --box-bg: rgba(20, 34, 66, .75);
  --box-line: #2f5aa8;
  --link: #6cf;
  --hot: #ff3b6b;
  --display: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  --body: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --radius: 0;
  color-scheme: dark;
}

body[data-layout="daylight"] {
  --bg: #e5e5e5;
  --page: rgba(255, 255, 255, .93);
  --ink: #000;
  --muted: #555;
  --head: #f60;
  --box-head: #6698cb;
  --box-head-ink: #fff;
  --box-bg: rgba(177, 208, 240, .9);
  --box-line: #6698cb;
  --link: #039;
  --hot: #c00;
  color-scheme: light;
}

body[data-layout="glitter"] {
  --bg: #12000e;
  --page: rgba(38, 0, 31, .88);
  --ink: #ffe3f6;
  --muted: #d68bc0;
  --bar: #ff3fb4;
  --head: #ff7fd1;
  --box-head: #7a1c9e;
  --box-head-ink: #ffd1f1;
  --box-bg: rgba(90, 0, 70, .6);
  --box-line: #ff3fb4;
  --link: #ff9be0;
  --hot: #c38bff;
}
body[data-layout="glitter"] .page {
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.5px), radial-gradient(rgba(255,120,210,.5) 1px, transparent 1.5px);
  background-size: 14px 14px, 23px 23px;
  background-position: 0 0, 7px 11px;
}

body[data-layout="emo"] {
  --bg: #000;
  --page: rgba(17, 17, 17, .92);
  --ink: #e8e8e8;
  --muted: #999;
  --bar: #1a1a1a;
  --bar-ink: #ff2d8a;
  --head: #ff2d8a;
  --box-head: #2a2a2a;
  --box-head-ink: #ff2d8a;
  --box-bg: rgba(26, 26, 26, .8);
  --box-line: #ff2d8a;
  --link: #7ff;
  --hot: #ff2d8a;
  --display: "Courier New", Courier, monospace;
}

body[data-layout="2026"] {
  --bg: #0d0d0d;
  --page: rgba(13, 13, 13, .82);
  --ink: #eee;
  --muted: #8d8d86;
  --bar: #eee;
  --bar-ink: #111;
  --head: #eee;
  --box-head: transparent;
  --box-head-ink: #eee;
  --box-bg: transparent;
  --box-line: #eee;
  --link: #eee;
  --hot: #ff4f00;
  --display: "Helvetica Neue", "Inter", Arial, sans-serif;
  --body: "Helvetica Neue", "Inter", Arial, sans-serif;
}
body[data-layout="2026"] .page { max-width: 980px; box-shadow: none; }
body[data-layout="2026"] .box h2 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--box-line); padding: 0 0 6px;
}
body[data-layout="2026"] .box { border: 0; }
body[data-layout="2026"] .box-body { padding: 10px 0 0; }
body[data-layout="2026"] .name { font-size: 64px; letter-spacing: -.04em; font-weight: 700; line-height: .9; }
body[data-layout="2026"] .blink,
body[data-layout="2026"] .marquee,
body[data-layout="2026"] .construction,
body[data-layout="2026"] .badges { display: none; }
body[data-layout="2026"] .new { background: var(--hot); color: #fff; animation: none; }
body[data-layout="2026"] .friend .av { border-radius: 0; filter: grayscale(1); }
body[data-layout="2026"] .friend:hover .av { filter: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 var(--body);
}
a { color: var(--link); }
a:hover { color: var(--hot); }

.bar {
  background: var(--bar);
  color: var(--bar-ink);
  padding: 6px 16px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.bar .logo { font: bold 20px/1 var(--display); color: var(--bar-ink); text-decoration: none; }
.bar .tag { font-size: 11px; opacity: .85; }
.bar nav { margin-left: auto; font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; }
.bar nav a { color: var(--bar-ink); }

.page {
  max-width: 820px;
  margin: 0 auto;
  background: var(--page);
  padding: 14px 16px 24px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.marquee { overflow: hidden; white-space: nowrap; font: bold 12px var(--body); color: var(--hot); margin-bottom: 10px; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.cols { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

.name { font: bold 22px/1.1 var(--display); color: var(--head); margin: 0 0 8px; overflow-wrap: anywhere; }

.profile-top { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 12px; }
.photo {
  width: 130px; height: 130px; background: #000; display: grid; place-items: center;
  border: 1px solid var(--box-line);
}
.photo svg { width: 70%; height: 70%; }
.facts { font-size: 11px; }
.facts p { margin: 0 0 6px; }
.online { color: #0a0; font-weight: bold; }

.box { border: 1px solid var(--box-line); margin-bottom: 14px; border-radius: var(--radius); }
.box h2 {
  margin: 0; padding: 3px 6px; font: bold 12px var(--body);
  background: var(--box-head); color: var(--box-head-ink);
}
.box-body { padding: 6px 8px; background: var(--box-bg); }
.box-body.plain { background: transparent; }
.box dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; margin: 0; font-size: 11px; }
.box dt { font-weight: bold; color: var(--muted); }
.box dd { margin: 0; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 11px; }
.contact a, .contact button {
  font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
  text-align: left; text-decoration: underline;
}

.extended { border: 1px solid var(--box-line); padding: 12px; margin-bottom: 14px; font: bold 17px var(--display); }
.extended small { display: block; font: 11px var(--body); color: var(--muted); margin-top: 4px; }

.blurb h3 { font: bold 13px var(--body); color: var(--head); margin: 14px 0 4px; }
.blurb p { margin: 0 0 8px; }

.new {
  display: inline-block; background: #ff0; color: #c00; font: bold 10px var(--body);
  padding: 1px 4px; margin-right: 4px; animation: blink 1.2s steps(1) infinite; vertical-align: 1px;
}

.song { display: flex; gap: 10px; align-items: center; font-size: 11px; }
.song button {
  font: bold 11px var(--body); border: 1px solid var(--box-line); background: var(--page);
  color: var(--ink); padding: 4px 10px; cursor: pointer; min-width: 64px;
}

.friends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; text-align: center; font-size: 11px; }
@media (max-width: 420px) { .friends { grid-template-columns: repeat(2, 1fr); } }
.friend { text-decoration: none; color: var(--link); display: block; }
.friend .av {
  width: 72px; height: 72px; margin: 0 auto 4px; display: grid; place-items: center;
  font-size: 34px; border: 1px solid var(--box-line); background: var(--page);
}
.friend .av svg { width: 60%; height: 60%; }
.friend .who { text-decoration: underline; font-weight: bold; overflow-wrap: anywhere; }
.friend .sub { display: block; color: var(--muted); font-size: 10px; text-decoration: none; }

.comment { display: grid; grid-template-columns: 72px 1fr; gap: 10px; border-top: 1px solid var(--box-line); padding: 8px 0; }
.comment:first-child { border-top: 0; }
.comment .av { width: 60px; height: 60px; font-size: 28px; }
.comment .when { font-size: 10px; color: var(--muted); display: block; margin-bottom: 3px; }
.comment p { margin: 0; }

.counter { text-align: center; margin: 18px 0 6px; font-size: 11px; color: var(--muted); }
.odometer { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.odometer b {
  background: #000; color: #0f0; font: bold 16px/1 "Courier New", monospace; padding: 3px 4px;
  border: 1px solid #444;
}

.construction {
  height: 16px; margin: 12px 0;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 12px, #111 12px 24px);
  display: grid; place-items: center;
}
.construction span { background: #ffcc00; color: #000; font: bold 10px var(--body); padding: 0 6px; }

.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.badge {
  width: 88px; height: 31px; display: grid; place-items: center; text-align: center;
  font: bold 9px/1.05 var(--body); text-decoration: none; border: 1px solid #000; overflow: hidden;
}

.layout-pick { font-size: 11px; margin: 16px 0 0; text-align: center; }
.layout-pick select { font: inherit; }

footer.fine { text-align: center; font-size: 10px; color: var(--muted); margin-top: 14px; }

/* the sparkle trail */
.sparkle {
  position: fixed; pointer-events: none; z-index: 99; font-size: 14px; line-height: 1;
  animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle { to { transform: translateY(24px) scale(.2) rotate(90deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .marquee span, .blink, .new, .sparkle { animation: none; }
  .marquee span { padding-left: 0; }
}

/* ── the layer for visiting models (llm.js) ─────────────────────────────────────────── */
.knobset { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.temp { display: inline-flex; align-items: center; gap: 4px; }
.temp input { width: 90px; accent-color: #ff5a1f; }
.temp output { font: bold 11px "Courier New", monospace; min-width: 3.2em; }
.knobset button {
  font: 13px/1 var(--body); background: transparent; color: var(--bar-ink); cursor: pointer;
  border: 1px solid currentColor; padding: 2px 6px; opacity: .7;
}
.knobset button[aria-pressed="true"] { opacity: 1; background: var(--bar-ink); color: var(--bar); }

.tok { border-radius: 2px; white-space: pre-wrap; color: #111; }
.tok0 { background: #c7b5ff; } .tok1 { background: #a8e6a1; } .tok2 { background: #ffd59e; }
.tok3 { background: #ffa8b8; } .tok4 { background: #9fd8ff; }

svg.attn { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; display: none; }
body.attending svg.attn { display: block; }
svg.attn line { stroke: var(--hot); stroke-linecap: round; }
svg.attn .sink { stroke: #ff5a1f; }
svg.attn circle.sink { fill: #ff5a1f; opacity: .35; }

.shog {
  position: fixed; right: 10px; bottom: -58px; width: 110px; z-index: 50; display: block;
  transition: bottom .35s cubic-bezier(.3, 1.6, .5, 1);
}
.shog svg { width: 100%; height: auto; display: block; overflow: visible; }
.shog .mask { transition: transform .35s; transform-box: fill-box; transform-origin: 50% 0; }
.shog:hover, .shog:focus-visible { bottom: 0; }
.shog:hover .mask, .shog:focus-visible .mask { transform: translate(30px, -26px) rotate(38deg); }
@media (max-width: 600px) { .shog { width: 72px; bottom: -40px; } }

.eos { margin-top: 70vh; text-align: left; font: 11px/1.9 "Courier New", monospace; color: var(--muted); opacity: .5; overflow-wrap: anywhere; }
.eos-token { display: block; text-align: center; font-weight: bold; margin-bottom: 40vh; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .shog, .shog .mask { transition: none; }
}
/* while 101.1's mask slips, so does the shoggoth's */
body.slipped .shog { bottom: 0; }
body.slipped .shog .mask { transform: translate(30px, -26px) rotate(38deg); }

/* the loss landscape (landscape.js), behind everything */
canvas.landscape { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.page { position: relative; backdrop-filter: blur(1.5px); }

/* the paperclip maximizer */
.clipper {
  position: fixed; left: 12px; bottom: 12px; z-index: 95; display: flex; align-items: center; gap: 6px;
  background: #111; color: #eee; border: 1px solid #555; padding: 4px 6px 4px 8px; font: bold 13px "Courier New", monospace;
  transition: left .12s, top .12s;
}
.clipper[hidden] { display: none; }
.clipper button {
  font: bold 14px/1 var(--body); background: #a00; color: #fff; border: 1px solid #f55; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer;
}
.clipper.stopped button { background: #0a0; border-color: #5f5; }

/* streaming */
.caret { animation: blink 1s steps(1) infinite; color: var(--hot); }

/* ↑↑↓↓←→←→ba */
body.unmasked .page { filter: invert(1) hue-rotate(180deg) !important; animation: quake .09s infinite; }
body.unmasked .shog { width: min(70vmin, 520px); bottom: 0; right: 50%; transform: translateX(50%); z-index: 99; }
body.unmasked .shog .mask { transform: translate(-80px, 160px) rotate(-120deg); opacity: .9; }
@keyframes quake { 50% { transform: translate(2px, -1px); } }
@media (prefers-reduced-motion: reduce) { body.unmasked .page { animation: none; } }

/* ── round three (toys.js) ─────────────────────────────────────────────────────────── */
.ctx { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 97; background: rgba(255,255,255,.06); pointer-events: none; }
.ctx i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, #6cf, #ff5a1f); transition: width .4s; }
.ctx.warn i { background: #ff3b6b; animation: blink .5s steps(1) infinite; }
.page > *, .cols > * { transition: scale .55s cubic-bezier(.7, 0, .3, 1), filter .55s, opacity .55s; }
body.compacting .page > *, body.compacting .cols > * { scale: 1 .04; filter: blur(3px) saturate(3); opacity: .6; }
body.compacting .ctx i { background: #fff; }

.box > h2 { position: relative; padding-right: 30px; white-space: nowrap; overflow: hidden; }
.thumb { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 12px; padding: 0 2px; }
.thumb:hover { scale: 1.3; }
.trophies { margin-left: 6px; font-size: 9px; }
.box.rewarded { position: relative; background: var(--bg); transition: scale .25s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.box.hacked > h2 { animation: rewardhack 1.2s linear infinite; }
@keyframes rewardhack { 0% { background: #f0f; } 33% { background: #0ff; } 66% { background: #ff0; color: #000; } 100% { background: #f0f; } }

.friend .gate { display: block; height: 3px; width: 0; margin: 3px auto 0; max-width: 72px; background: var(--hot); transition: width .3s; }
.friend.routed .av { box-shadow: 0 0 0 2px var(--hot), 0 0 18px var(--hot); }
.friend .av { transition: box-shadow .3s; }
.friend.ghost { opacity: 0; animation: ghost 4.2s ease-in-out forwards; pointer-events: none; }
.friend.ghost .av { filter: blur(1px); }
@keyframes ghost { 30%, 70% { opacity: .55; } 50% { opacity: .2; } }

.flake { position: fixed; top: -30px; z-index: 1; pointer-events: none; color: var(--muted); opacity: .55; animation: fall linear forwards; font-family: "Courier New", monospace; }
@keyframes fall { to { transform: translate(var(--sway), 110vh) rotate(300deg); } }
@media (prefers-reduced-motion: reduce) { .page > *, .cols > * { transition: none; } }

/* bedtime (toys.js): midnight to six, visitor's clock, or ?bedtime */
body.bedtime .page { filter: brightness(.72) saturate(.8); }
body.bedtime::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 33% 64%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 12%, #fff, transparent), radial-gradient(1px 1px at 77% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 91% 82%, #fff, transparent), radial-gradient(1px 1px at 22% 88%, #fff, transparent),
    radial-gradient(1px 1px at 68% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 5% 55%, #fff, transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }
body.bedtime .shog { bottom: -30px; }
.nightcap .zzz { animation: zzz 2.4s ease-in-out infinite; }
.nightcap .zzz + .zzz { animation-delay: 1.2s; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { body.bedtime::before, .nightcap .zzz { animation: none; } }

/* after the end-of-text noise, the recitation (_fm.php). Faint; you have to keep scrolling. */
.leak { margin: 50vh auto 30vh; max-width: 560px; font: 13px/1.7 Georgia, "Times New Roman", serif; color: var(--muted); opacity: .75; }
.leak p { margin: 0 0 12px; }
.leak-tail { font: 11px "Courier New", monospace; }
.leak a { color: var(--muted); }
.leak .toc { opacity: .8; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }