/* CyLabs.art v0.4 — retro personal website // interface clean-up */
:root {
  --base: #0a0d0a;
  --shell: #151a16;
  --dark: #111912;
  --panel: #29312b;
  --panel-2: #333c35;
  --inset: #1b251e;
  --border: #050906;
  --base-green: #15300e;
  --green: #5bb858;
  --green-bright: #a2ec80;
  --teal: #79c9b1;
  --text: #edf3ec;
  --dim: #c0cfc1;
  /* Change these four variables to try other typefaces. */
  --font-title: "Geist Pixel", "Courier New", monospace;
  --font-subtitle: "DotGothic16", "Courier New", monospace;
  --font-ticker: "Bitcount Prop Single", "Courier New", monospace;
  --font-body: "Space Mono", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative; isolation: isolate;
  margin: 0; min-height: 100vh; color: var(--text);
  font: 12px/1.55 var(--font-body);
  background: radial-gradient(ellipse at 50% 12%, #152516 0, #070e09 50%, #030705 100%);
}
#ambient-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: var(--green-bright); }
a:hover { color: white; }
:focus-visible { outline: 2px solid #d6fc84; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: fixed; z-index: 100; left: 8px; top: 8px; transform: translateY(calc(-100% - 16px)); background: #fff; color: #12200f; padding: 10px; white-space: nowrap; }
.skip-link:focus { transform: none; }

.site-frame {
  width: min(1160px, calc(100% - 28px)); margin: 24px auto 50px;
  border: 3px solid #59695a; background: var(--shell);
  box-shadow: 0 0 0 3px #060a06, 0 10px 46px #000d, 0 0 55px #2a6b2d20;
}
.topline {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px;
  background: linear-gradient(90deg, #1b2d1d, #354237);
  border-bottom: 2px solid #080e08; color: #cce5cc;
  font: 700 10px/1.4 var(--font-body); letter-spacing: .35px;
}
.hero {
  height: 169px; padding: 23px 16px; overflow: hidden; text-align: center;
  position: relative; isolation: isolate; border-bottom: 3px solid #080e09;
  background: radial-gradient(ellipse at 50% 114%, #356438 0, #233a29 35%, #111c16 75%, #0a120d 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #0002 4px 5px),
    linear-gradient(125deg, transparent 0 18%, #99ff8620 18.2% 19.1%, transparent 19.4% 79%, #99ff861c 79.2% 80.1%, transparent 80.4%);
}
.hero::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid #6b946d50;
  box-shadow: inset 0 0 0 1px #03090380; pointer-events: none; z-index: -1;
}
.hero-glow {
  position: absolute; width: 65%; height: 180px; left: 17.5%; top: 10px; z-index: -1;
  background: radial-gradient(ellipse, #6ba45d1f 0, transparent 72%);
}
.hero-title {
  display: flex; justify-content: center; align-items: baseline;
  font: 400 clamp(70px, 10.5vw, 118px)/1.15 var(--font-title);
  font-variation-settings: "ELSH" 1; /* Geist Pixel: square-based texture */
  transform: skewX(-5deg); white-space: nowrap;
}
.brand-name {
  color: #e6f8de; letter-spacing: clamp(3px, .55vw, 8px);
  -webkit-text-stroke: 1px #25442b;
  text-shadow: 1px 2px #b3cdb0, 2px 4px #557b51, 3px 6px #274a2a,
    4px 8px #102a17, 7px 11px 6px #000c, 0 0 26px #84d06a60;
}
.brand-tld {
  margin-left: 4px; color: #7be46e; font-size: .36em; letter-spacing: 0;
  text-shadow: 1px 1px #335f39, 2px 3px #1a3922, 3px 5px #000b;
}
.main-nav { display: flex; flex-wrap: wrap; gap: 1px; padding: 2px; background: #060b07; border-bottom: 2px solid #607963; }
.nav-button {
  flex: 1 1 auto; min-height: 33px; padding: 6px 10px; white-space: nowrap;
  border: 1px solid #09110a; border-top-color: #7b987d; border-left-color: #7b987d;
  background: linear-gradient(#435749, #283e2d);
  color: #b1f2a5; text-shadow: 1px 1px #08150a; font: 400 13px/1.25 var(--font-subtitle);
}
.nav-button:hover, .nav-button.active { background: linear-gradient(#5b845a, #385c3c); color: #fff; }
.nav-button small { font-size: 8px; color: #f4d994; }
.ticker {
  height: 25px; overflow: hidden; white-space: nowrap;
  background: #040b07; border-bottom: 2px solid #3d5840;
  /* Low-glare phosphor display with a fine dot raster inside the glyphs. */
  color: #5f9b5f; font: 650 20px/22px var(--font-ticker);
  font-variation-settings: "ELSH" 0, "ELXP" 0; letter-spacing: .9px;
}
.ticker-motion { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker-motion span { flex: none; padding-left: 8px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.layout {
  display: grid; grid-template-columns: 175px minmax(0,1fr) 235px;
  gap: 4px; padding: 5px; align-items: start; background: var(--shell);
}
.sidebar { display: grid; gap: 6px; min-width: 0; }
.side-panel {
  padding: 7px 8px; border: 2px solid var(--border);
  background: #2e3930; box-shadow: inset 1px 1px #7a927d, inset -1px -1px #152018;
  color: var(--text);
}
.side-panel h2 {
  margin: -5px -6px 10px; padding: 4px 3px; text-align: center; text-transform: uppercase;
  background: linear-gradient(#253c2a, #182c1d); color: #e6f7e3;
  border-bottom: 1px solid #080d09; text-shadow: 1px 1px #000;
  font: 400 13px/1.35 var(--font-subtitle);
  overflow-wrap: break-word;
}
.side-panel p { font-size: 11px; margin: 6px 0; }
.side-panel b { color: #f2f6f0; }
.side-links { display: flex; flex-direction: column; align-items: stretch; }
.side-links button, .side-link-button {
  background: none; color: #a5f2a0; text-decoration: underline;
  border: 0; text-align: left; padding: 4px 3px; font-size: 12px; line-height: 1.2;
}
.side-links button:hover, .side-link-button:hover { color: white; }
.dot-online { display: inline-block; width: 7px; height: 7px; background: #79ec65; border-radius: 50%; box-shadow: 0 0 5px #72ec77; }
.smile-panel { text-align: center; }
.stamp {
  margin: 8px auto 11px; width: 123px; padding: 6px 2px;
  border: 3px ridge #a1c4a0; font: 400 22px/1.1 var(--font-title);
  letter-spacing: -1px; color: #f6fff4; transform: rotate(-3deg);
  background: #112718; box-shadow: 0 3px 0 #000;
}
.stamp span { color: #7fda78; } .stamp small { font-size: 9px; letter-spacing: 1px; color: #a6f7a0; }
.sparkle { color: #8ddfa3; font-weight: bold; }
.under-construction {
  display: inline-block; padding: 5px; margin: 9px 0; transform: rotate(2deg);
  border: 3px dashed #ffd36b; background: #171a13;
  color: #ffd978; font: 700 10px/1.3 var(--font-body); letter-spacing: 1px;
}
.main-area {
  min-width: 0; min-height: 600px; padding: 0 0 20px;
  border: 2px solid #070d09; background: #303a32;
  box-shadow: inset 1px 1px #849b85;
}
.breadcrumbs { height: 27px; padding: 5px 9px; font-size: 11px; font-weight: bold; color: #d7e4d6; background: #2d4231; border-bottom: 3px solid #142418; }
.breadcrumbs span:last-child { color: #a9f19d; }
.view { padding: 7px 7px 0; }
.window-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 37px; padding: 4px 8px; margin-bottom: 7px;
  border: 1px solid #08120a; border-top-color: #8aa18c; border-left-color: #8aa18c;
  background: linear-gradient(90deg, #25452a, #46724a 85%, #355b3a);
}
.window-heading h1, .window-heading h2 {
  margin: 0; color: #eff9e9; text-shadow: 1px 1px #041707, 2px 2px #1a3b1d, 3px 3px #000a;
  font: 400 22px/1.25 var(--font-title);
  font-variation-settings: "ELSH" 1; letter-spacing: .4px;
}
.window-heading h2 { font-size: 18px; }
.intro-box {
  display: flex; gap: 14px; padding: 12px 15px; margin: 7px 0;
  border: 1px solid #0c170e; box-shadow: inset 1px 1px #829687;
  background: linear-gradient(#3d4e41, #354338);
}
.intro-icon { color: #9ce888; text-shadow: 0 0 10px #70bf64; font-size: 57px; line-height: 1.5; }
.intro-box p { margin: 3px 0 11px; font-size: 12px; }
.intro-box .intro-lead { color: #edffea; font-size: 16px; }
.intro-box .notice { color: #c7ebc6; font-size: 11px; margin-bottom: 0; }
.mini-heading {
  padding: 5px; margin: 13px 0 9px; text-align: center;
  border-bottom: 2px ridge #657768; color: #ecf4e9;
  font: 400 15px/1.3 var(--font-subtitle); letter-spacing: .7px;
}
.mini-heading span { color: #a6ed93; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feature-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 5px; border: 2px solid #08130a;
  background: #39463c; color: #fff; box-shadow: inset 1px 1px #88a18a;
  transition: filter .15s;
}
.feature-card:hover { filter: brightness(1.18); }
.feature-card img, .feature-music-art { width: 100%; height: 155px; display: block; border: 1px solid #101a12; background: #101713; }
.feature-card img { object-fit: contain; }
.feature-card span { display: block; padding: 2px 4px 5px; }
.feature-card strong { color: #a1f197; text-decoration: underline; font-size: 12px; }
.feature-card small { display: block; margin-top: 4px; color: #d6e0d5; font-size: 10px; }
.feature-music-art {
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #080d09, #152719);
}
.feature-music-art>span { color: #abefa0; text-shadow: 0 0 20px #55bb63; font-size: 66px; z-index: 2; }
.bulletin { margin: 6px 0; padding: 10px 12px; border: 1px solid #17251a; background: #3b4b40; }
.bulletin p { margin: 5px 0; }
.bulletin-date { color: #b5e79f; font-size: 10px; font-weight: bold; letter-spacing: 1px; }
.subheading { padding: 5px 7px; margin: 4px 0 9px; color: #e4ede3; font-size: 12px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px; background: #1d2b21; border: 2px inset #637e66; }
.toolbar label { color: #c4f1c1; font-size: 11px; font-weight: bold; }
.toolbar input { flex: 1; min-width: 145px; padding: 6px; border: 2px inset #8f9d8f; background: #f1f6ef; color: #102212; font-size: 12px; }
.result-count { color: #d3e8cc; font-size: 10px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 11px 0 8px; }
.tag-list button, .retro-button { padding: 5px 9px; border: 2px outset #72977a; background: linear-gradient(#42694b, #27482e); color: #effff0; font-size: 11px; font-weight: bold; }
.tag-list button[aria-pressed="true"], .tag-list button:hover, .retro-button:hover { background: linear-gradient(#5d9b5e, #34703b); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.art-tile { min-width: 0; padding: 5px; text-align: left; border: 2px solid #08110a; background: #3c4d40; box-shadow: inset 1px 1px #899e8b; color: #fff; }
.art-tile:hover { background: #4b6450; }
.art-tile img { display: block; width: 100%; aspect-ratio: 4/4.1; object-fit: contain; background: #121b15; border: 1px solid #0f1c12; }
.art-tile strong { display: block; margin: 7px 2px 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4f9a4; font-size: 12px; }
.art-tile small { display: block; margin: 1px 2px 3px; color: #d9e6d9; font-size: 10px; line-height: 1.6; }
.empty-msg { padding: 30px 12px; text-align: center; color: #ffe4ad; }
.album-box { display: flex; align-items: center; gap: 14px; padding: 15px; margin: 10px 0; background: linear-gradient(135deg, #374b3b, #192b1e); border: 2px inset #78947c; }
.album-icon { display: grid; place-items: center; flex-shrink: 0; width: 96px; height: 96px; border: 3px ridge #8da88c; background: repeating-linear-gradient(45deg,#0b150f 0 15px,#233928 15px 28px); color: #c1f5b1; font-size: 58px; text-shadow: 3px 3px #33623b; }
.album-box h2 { margin: 3px 0; color: #ddffce; font: 400 19px/1.25 var(--font-subtitle); text-shadow: 2px 2px #0a150c; }
.album-box p { margin: 6px 0 10px; color: #e0eddf; font-size: 11px; }
.eyebrow { color: #a2e8ac; font-size: 9px; letter-spacing: 1px; font-weight: bold; }
.music-list { display: grid; gap: 6px; }
.music-row { display: grid; grid-template-columns: 33px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 8px; border: 2px solid #0b150e; background: #3b4b3f; color: #fff; }
.music-row.current { border-color: #83c87b; background: #405e42; }
.music-row button { display: grid; place-items: center; width: 32px; height: 32px; border: 2px outset #7ca984; background: #23462a; color: #d2fac9; font-size: 14px; }
.music-row button:hover { background: #3b7844; }
.music-row-details { min-width: 0; }
.music-row strong, .music-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.music-row strong { font-size: 12px; }
.music-row small { margin-top: 2px; color: #bde8bc; font-size: 10px; }
.music-row .track-note { margin: 6px 0 0; color: #e1e9e0; font-size: 11px; line-height: 1.5; }
.music-row .row-time { align-self: start; padding-top: 4px; color: #d2f5c6; font: 12px var(--font-body); }
.text-page { padding: 18px; background: #394a3d; border: 2px solid #0d1a10; }
.text-page h2 { margin-top: 0; color: #d7ffc9; font: 400 19px/1.3 var(--font-subtitle); }
.text-page p { margin: 8px 0 15px; font-size: 12px; }
/* Sidebar audio deck */
.player-panel { padding-bottom: 8px; }
.player-face { padding: 7px; background: #101e14; border: 3px inset #638369; color: #f2fff3; text-align: center; }
.now-badge { color: #a1f28f; font: 10px var(--font-body); letter-spacing: 2px; }
.now-title { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #b3f69f; font: 700 12px var(--font-body); }
.now-artist { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #bdcfbd; font-size: 10px; }
.time-readout { display: flex; justify-content: space-between; margin-top: 12px; color: #c0e7bc; font: 11px var(--font-body); }
.player-face input[type="range"] { width: 100%; height: 17px; cursor: pointer; accent-color: #71c666; }
.player-controls { display: flex; justify-content: center; gap: 5px; margin: 7px 0; }
.player-controls button { min-width: 42px; height: 32px; background: linear-gradient(#4a7850,#24512d); border: 2px outset #8aae8b; color: #fff; font-size: 13px; }
.player-controls .play-primary { width: 50px; color: #ddffd2; font-size: 18px; }
.player-controls button:hover,.player-extra button:hover { filter: brightness(1.25); }
.player-extra { display: flex; justify-content: center; gap: 6px; }
.player-extra button { padding: 4px 5px; border: 1px solid #5a855e; background: #26402b; color: #d6e9d2; font-size: 9px; font-weight: bold; }
.player-extra button[aria-pressed="true"] { color: #baffac; box-shadow: 0 0 0 1px #81db7b inset; }
.volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #d4ecd4; font: 10px var(--font-body); }
.volume-row input { flex: 1; min-width: 0; }
.player-status { min-height: 29px; margin: 6px 0 0; color: #bcd0bb; font: 10px/1.4 var(--font-body); }
.quick-tracks { display: grid; gap: 4px; }
.quick-tracks button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; padding: 7px 5px; border: 1px solid #507356; background: #1e3824; color: #adf4a7; font-size: 10px; line-height: 1.3; }
.quick-tracks button:hover { background: #376441; color: white; }
.quick-tracks button.active { color: #e2ffd0; border-color: #adeda2; }
footer { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; padding: 12px; border-top: 2px solid #57705b; background: #1b2e20; color: #c7e1c3; font-size: 10px; text-shadow: 1px 1px #000; }
/* Gallery lightbox */
.lightbox { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: #010703ef; }
.lightbox-window { width: min(1020px, 100%); max-height: 95vh; display: flex; flex-direction: column; padding: 6px; background: #304335; border: 3px outset #97b69a; box-shadow: 0 10px 90px #000; }
.lightbox-window .window-heading { margin-bottom: 5px; }
.lightbox-close { flex: none; width: 28px; height: 27px; background: #884e53; border: 2px outset #d8a5a0; color: #fff; font-size: 22px; font-weight: bold; line-height: 1; }
.lightbox-image-wrap { display: flex; align-items: center; justify-content: center; min-height: 120px; min-width: 0; overflow: hidden; background: #0d1710; }
.lightbox-image-wrap img { width: auto; height: auto; max-width: calc(100% - 76px); max-height: calc(95vh - 200px); object-fit: contain; }
.lightbox-arrow { align-self: stretch; flex: none; width: 36px; background: #213d28; border: 0; border-right: 1px solid #719575; color: #d4f6cf; font-size: 19px; }
.lightbox-arrow:last-child { border-right: 0; border-left: 1px solid #719575; }
.lightbox-arrow:hover { background: #3a6643; }
.lightbox-details { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 8px 3px; color: #eaf4e8; font-size: 11px; overflow: auto; }
.lightbox-details p { margin: 0; }
.lightbox-details span { white-space: nowrap; color: #b1eaa0; }
@media(max-width: 940px) {
  .layout { grid-template-columns: 152px minmax(0,1fr); }
  .sidebar-right { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .sidebar-right .tiny-update { grid-column: 1/-1; }
  .main-area { grid-column: 2; }
  .sidebar-left { grid-row: 1/3; }
}
@media(max-width: 640px) {
  body { font-size: 12px; }
  .site-frame { width: calc(100% - 12px); margin: 7px auto 25px; }
  .hero { height: 135px; padding: 12px 6px; }
  .hero-title { font-size: clamp(46px, 14vw, 65px); }
  .brand-name { letter-spacing: clamp(2px, .75vw, 5px); }
  .main-nav .nav-button { flex: 1 1 33%; font-size: 12px; white-space: normal; }
  .layout { grid-template-columns: minmax(0,1fr); }
  .main-area { grid-column: 1; grid-row: 1; min-height: 0; }
  .sidebar-right { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .sidebar-right .player-panel { grid-column: 1; }
  .sidebar-left { grid-column: 1; grid-row: 3; grid-template-columns: 1fr 1fr; }
  .sidebar-left .smile-panel { grid-column: 1/-1; }
  .window-heading h1 { font-size: 19px; }
  .intro-icon { font-size: 40px; }
  .feature-card img, .feature-music-art { height: 130px; }
  .gallery-grid { gap: 5px; }
  .art-tile strong { font-size: 11px; }
  .album-box { gap: 10px; }
  .album-icon { width: 64px; height: 85px; }
  .album-box h2 { font-size: 15px; }
  .lightbox { padding: 7px; }
  .lightbox-window { max-height: 96vh; }
  .lightbox-image-wrap img { max-height: calc(96vh - 225px); }
}
@media(max-width: 360px) {
  .feature-grid,.gallery-grid,.sidebar-left,.sidebar-right { grid-template-columns: 1fr; }
  .feature-card img,.feature-music-art { height: 145px; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }

/* v0.3 typography finishing passes */
.side-panel h2, .mini-heading, .album-box h2, .text-page h2 { font-family: var(--font-subtitle); font-weight: 400; }
.breadcrumbs { font-family: var(--font-subtitle); font-size: 12px; font-weight: 400; }
.window-heading h1, .window-heading h2 { overflow-wrap: anywhere; }
.intro-box .intro-lead { font-size: 15px; }
.feature-card strong, .art-tile strong, .music-row strong { line-height: 1.4; }
.music-row .track-note { line-height: 1.65; }
.now-title, .now-artist, .quick-tracks button { overflow-wrap: normal; }
@media (max-width: 940px) and (min-width: 641px) {
  .side-links button { font-size: 11px; }
  .side-panel { padding-inline: 6px; }
}
@media (max-width: 640px) {
  .topline { font-size: 9px; letter-spacing: 0; }
  .ticker { font-size: 17px; }
  .side-panel h2 { font-size: 12px; }
  .mini-heading { font-size: 14px; }
}
@media (max-width: 400px) {
  .hero-title { font-size: clamp(43px, 13.2vw, 54px); }
  .topline { gap: 4px; }
  .topline span:first-child { min-width: 0; }
  .window-heading h1 { font-size: 17px; }
}


/* v0.4 — a dot-matrix phosphor ticker instead of bright flat lettering */
.ticker-motion span {
  background-image: radial-gradient(circle, #6da16b 41%, transparent 52%);
  background-position: 0 0;
  background-size: 3px 3px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Subtle phosphor bloom on individual dots. */
  filter: drop-shadow(0 0 1px #3c813d88);
}
/* The music shortcut also uses bars now — no record artwork. */
.feature-equalizer {
  position: absolute; inset: 26px 10px 13px;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  opacity: .75;
}
.feature-equalizer i {
  flex: 1; max-width: 11px; height: var(--bar-height);
  border: 1px solid #101b11;
  background: repeating-linear-gradient(to top, #5bb858 0 5px, #112014 5px 8px);
  box-shadow: 0 0 12px #5bb85833;
}
.feature-equalizer i:nth-child(12n + 1) { --bar-height: 46%; }
.feature-equalizer i:nth-child(12n + 2) { --bar-height: 71%; }
.feature-equalizer i:nth-child(12n + 3) { --bar-height: 39%; }
.feature-equalizer i:nth-child(12n + 4) { --bar-height: 87%; }
.feature-equalizer i:nth-child(12n + 5) { --bar-height: 62%; }
.feature-equalizer i:nth-child(12n + 6) { --bar-height: 100%; }
.feature-equalizer i:nth-child(12n + 7) { --bar-height: 56%; }
.feature-equalizer i:nth-child(12n + 8) { --bar-height: 78%; }
.feature-equalizer i:nth-child(12n + 9) { --bar-height: 34%; }
.feature-equalizer i:nth-child(12n + 10) { --bar-height: 66%; }
.feature-equalizer i:nth-child(12n + 11) { --bar-height: 92%; }
.feature-equalizer i:nth-child(12n + 12) { --bar-height: 49%; }
.feature-music-art > span { font-size: 43px; opacity: .35; align-self: start; padding-top: 11px; }
/* Audio-reactive pixel spectrum drawn by Web Audio, while playback is active only. */
.spectrum-display {
  height: 104px; width: 100%; position: relative; overflow: hidden;
  background: #050e08;
  border: 1px solid #305235;
  margin: 9px 0 10px;
  box-shadow: inset 0 0 15px #000a;
}
.spectrum-display::before {
  content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(to right, transparent 0 10px, #08130a55 10px 11px),
    repeating-linear-gradient(to bottom, transparent 0 6px, #0005 6px 7px);
}
#spectrum { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.spectrum-label {
  position: absolute; left: 6px; top: 4px; z-index: 2;
  color: #67966c; background: #041007cc;
  font: 700 8px/1.2 var(--font-body); letter-spacing: .5px;
  pointer-events: none;
}
@media(prefers-reduced-motion: reduce) {
  .ticker-motion { animation: none; transform: none; }
}

/* CyLabs v0.5 — a moderated guestbook, styled as a retro personal-site page. */
.guestbook-intro { background:#14271a; border:1px solid #5bb858; padding:15px 17px; margin:8px 0 12px; box-shadow:inset 0 0 0 2px #223d28; }
.guestbook-intro strong { font:400 19px/1.2 var(--font-subtitle); color:#b5ff98; letter-spacing:.5px; }
.guestbook-intro p {font-size:12px; line-height:1.7; margin:9px 0 0; color:#d4e6d4;}
.guestbook-columns {display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:14px;}
.guestbook-card {background:#26362a;border:2px solid #142019;box-shadow:inset 1px 1px #557260,inset -1px -1px #0a120c;padding:12px 13px; min-width:0;}
.guestbook-card h2 {font:400 18px/1.3 var(--font-subtitle); background:#102315; color:#9bf37f; padding:7px 10px; border-left:3px solid #5bb858; margin:0 0 10px;}
.guestbook-hint {font-size:11px;line-height:1.65;color:#c8d7c8;margin:0 0 13px;}
#guestbook-form label {display:block;font:400 14px/1.4 var(--font-subtitle); color:#b4e8a6; margin:11px 0 6px;}
#guestbook-name, #guestbook-message {font:12px/1.55 var(--font-body); width:100%;border:1px solid #618466;border-bottom-color:#152b1b; background:#0b190f;color:#edffee;border-radius:0; padding:10px; outline-offset:2px; box-sizing:border-box;}
#guestbook-name:focus, #guestbook-message:focus {outline:2px solid #89e78b;}
#guestbook-name:disabled, #guestbook-message:disabled {opacity:.67;}
#guestbook-message {resize:vertical;min-height:104px;}
.gb-required {color:#81f474;}
.guestbook-bottom {display:flex;justify-content:space-between;gap:9px; flex-wrap:wrap;font-size:10px;color:#bed2be;margin:7px 0 13px;}
.guestbook-turnstile {min-height:0; max-width:100%; margin:10px 0 12px;}
.guestbook-submit {width:100%;max-width:350px;padding:10px 12px;}
.guestbook-status {font-size:11px;line-height:1.55; color:#d5e6d3; margin:12px 0 0; overflow-wrap:anywhere;}
.guestbook-status[data-kind="error"] {color:#ffb5ab;}
.guestbook-status[data-kind="success"] {color:#b7ff9d;}
.guestbook-entry {background:#142119;border:1px solid #36533b; margin:0 0 10px;padding:11px 12px;overflow-wrap:anywhere;}
.guestbook-entry-head {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px dashed #42664c;}
.guestbook-entry-name {font:400 15px/1.4 var(--font-subtitle); color:#aaff96;overflow-wrap:anywhere;}
.guestbook-entry-time {color:#9bc7a0;font-size:10px;}
.guestbook-entry-message {font-size:12px;line-height:1.75;white-space:pre-wrap; overflow-wrap:anywhere; margin:9px 0 0;}
.guestbook-empty {background:#142119;border:1px dashed #5b7d62;color:#d3e3d2;font-size:12px;line-height:1.65;padding:15px;margin:0;}
.guestbook-pagination {display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0 0;flex-wrap:wrap;font:400 12px/1.4 var(--font-subtitle);}
.guestbook-pagination button {font-size:10px;}
.guestbook-pagination button:disabled, .guestbook-submit:disabled {opacity:.5;cursor:not-allowed;}
@media(max-width:480px){.guestbook-card{padding:9px;}.guestbook-pagination{justify-content:center;}.guestbook-intro{padding:11px;}}

/* v0.6: a sustained, readable confirmation (rather than a brief transient status). */
.guestbook-status[data-kind="success"] {
  padding: 12px 13px; border: 2px solid #74cc6a; background: #0e2b18;
  box-shadow: inset 0 0 0 1px #315d39; color:#ccffbd;
  font-size:12px; font-weight:700;
}