:root{
  --bg:#dce6e9;
  --panel:#d8e0e4;
  --panel2:#edf2f4;
  --line:#84949d;
  --line2:#aebbc1;
  --text:#5f707a;
  --text2:#2f3d45;

  /* idle color for the dot-loader, overridden in dark mode below */
  --dot-idle:#c3cdd3;

  /* chrome-sweep hover highlight, dimmed in dark mode */
  --sweep-highlight:rgba(255,255,255,.6);

  /* signature accent — "powered on" states: active nav, hover, counter digits */
  --accent:#6c74cf;
  --accent-soft:rgba(108,116,207,.4);
  --accent-glow:rgba(108,116,207,.7);

  /* pixel font for brand title + nav labels only, body stays Verdana */
  --font-pixel:'VT323',Consolas,monospace;

  /* replace this with your own big abstract background png */
  --bg-img:url("backgrounds/reality-bg.png");
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow:hidden;
}

body{
  background:var(--bg);
  font-family:Verdana,Arial,sans-serif;
  font-size:10px;
  color:var(--text);
}

/* set while a pull-out is open, blocks background-scroll on mobile */
body.locked{ overflow:hidden; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(255,255,255,.48),transparent 23%,transparent 78%,rgba(82,105,115,.16));
  opacity:.62;
}

body::after{
  content:"";
  position:fixed;
  right:0;
  top:0;
  width:76vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  background:
    var(--bg-img) center/cover no-repeat,
    radial-gradient(circle at 72% 24%,rgba(255,255,255,.68),transparent 28%),
    radial-gradient(circle at 88% 70%,rgba(128,148,158,.4),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.35),rgba(117,137,147,.18));
  opacity:.78;
}

*{
  scrollbar-width:thin;
  scrollbar-color:#a8b7d6 transparent;
}

::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c7d5ee;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#aebfdf}

.flash-wrap{
  position:relative;
  width:641px;
  height:100vh;
  min-height:760px;
  margin-left:38px;
  display:flex;
  z-index:2;
}

/* LEFT DVD RAIL */
.nav-tower{
  position:relative;
  z-index:10;
  width:76px;
  height:1026px;
  flex:0 0 76px;
  background:linear-gradient(90deg,#edf5f7 0%,#cdd9de 56%,#96a8b1 100%);
  border-left:1px solid rgba(255,255,255,.8);
  border-right:1px solid #74858e;
  box-shadow:
    inset -9px 0 18px rgba(46,70,80,.17),
    5px 0 12px rgba(40,60,70,.13);
  overflow:hidden;
}

.nav-tower::before{
  content:"";
  position:absolute;
  left:41px;
  top:0;
  width:1px;
  height:100%;
  background:rgba(255,255,255,.72);
  box-shadow:1px 0 #82939b;
}

.nav-tower::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:10px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(85,103,112,.22));
}

.nav-btn{
  position:absolute;
  left:12px;
  width:47px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#647680;
  cursor:pointer;
  user-select:none;
  z-index:5;
}

.nav-btn .disc{
  width:25px;
  height:25px;
  margin:0 auto 7px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff 0 14%,#dce5e8 20%,#a8b8c0 48%,#f6fafb 72%,#93a3ac 100%);
  border:1px solid #778991;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.5),
    inset -3px -4px 5px rgba(96,115,124,.18),
    0 1px 2px rgba(0,0,0,.25);
  position:relative;
}

.nav-btn .disc::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid #99a9b1;
  background:radial-gradient(circle,#eef4f6 0 25%,#bac8cf 55%,#e7eef1 100%);
}

.nav-btn .disc::after{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#7e8f98;
  box-shadow:0 0 0 1px #dce6ea;
  transition:background .2s ease, box-shadow .2s ease;
}

.nav-btn span{
  display:block;
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:1px;
  line-height:1;
  color:#61727c;
  text-shadow:0 1px rgba(255,255,255,.8);
  transition:color .2s ease;
}

.nav-btn:hover .disc{
  filter:brightness(1.08);
  box-shadow:
    0 0 8px var(--accent-soft),
    inset 0 0 0 3px rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.25);
}

.nav-btn:hover span{color:var(--accent)}

.nav-btn.active .disc{
  box-shadow:
    0 0 9px var(--accent-glow),
    inset 0 0 0 3px rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.22);
}

.nav-btn.active .disc::after{
  background:var(--accent);
  box-shadow:0 0 4px 1px var(--accent-glow);
}

.nav-btn.active span{
  color:var(--accent);
  text-shadow:0 0 6px var(--accent-soft);
}

.nav-btn.vacant .disc{
  opacity:.25;
  filter:grayscale(.5);
}

.nav-main{top:42px}
.nav-about{top:103px}
.nav-gallery{top:164px}
.nav-blog{top:225px}
.nav-contact{top:286px}
.nav-recs{top:347px}

.nav-port{
  position:absolute;
  right:0;
  width:18px;
  height:31px;
  z-index:3;
  pointer-events:none;
  border-top:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(97,116,124,.32);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(107,128,137,.18));
  opacity:.38;
}

.nav-port::after{
  content:"";
  position:absolute;
  right:-1px;
  top:10px;
  width:12px;
  height:8px;
  border:1px solid #8798a1;
  border-right:0;
  background:#eaf0f2;
  box-shadow:inset 0 0 4px rgba(70,90,98,.28);
}

.port-main{top:39px}
.port-about{top:100px}
.port-gallery{top:161px}
.port-blog{top:222px}
.port-contact{top:283px}
.port-recs{top:344px}

.blog-link-card{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  max-width:100%;
  margin:8px 0;
  padding:5px 9px;
  border:1px solid #aebbc1;
  background:linear-gradient(180deg,#f8fbfc,#e1e9ed);
  color:#5d6d76 !important;
  text-decoration:none !important;
  border-bottom:1px solid #aebbc1 !important;
  font-size:9px;
  line-height:1.3;
  text-align:left;
}

.blog-link-card b{
  text-transform:uppercase;
  color:#53646e;
  font-size:10px;
  letter-spacing:.4px;
}

.blog-link-card:hover{
  background:linear-gradient(180deg,#fff,#dce7ec);
  border-color:#7c8d96 !important;
  box-shadow:0 0 8px rgba(255,255,255,.6);
}

.blog-meta-line{
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
}

.blog-tag-list{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #d7dee2;
  text-align:left;
}

.blog-tag-chip{
  display:inline-block;
  margin:0 6px 6px 0;
  border:1px solid #b8c3c9;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#6b7c86;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  padding:3px 9px;
  font-family:Verdana,Arial,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.blog-tag-chip:hover,
.blog-tag-chip:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

.blog-tag-chip.active{
  background:linear-gradient(180deg,#d9e2e6,#f8fafb);
  color:#35454e;
  box-shadow:0 0 6px rgba(255,255,255,.9) inset;
}

.games-folder{
  height:100%;
  padding:28px 22px;
  overflow:auto;
  text-align:left;
}

.games-folder-title{
  text-align:center;
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
  color:#53646e;
  letter-spacing:.8px;
  margin-bottom:18px;
}

.games-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.game-card{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:10px;
  padding:9px;
  border:1px solid #aebbc1;
  background:linear-gradient(180deg,#f8fbfc,#e3ebef);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.game-thumb{
  width:72px;
  height:54px;
  border:1px solid #c8d1d6;
  background:
    linear-gradient(135deg,#eef4f6,#c5d4da 60%,#f8fbfc);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#82939b;
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
}

.game-info{
  min-width:0;
}

.game-name{
  text-transform:uppercase;
  font-weight:bold;
  color:#43545e;
  font-size:10px;
  letter-spacing:.7px;
  margin-bottom:4px;
}

.game-status{
  display:inline-block;
  margin-bottom:6px;
  padding:2px 6px;
  border:1px solid #b8c3c9;
  background:#eef3f5;
  color:#7d8d96;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.game-status.fav{
  color:#2f3d45;
  border-color:rgba(47,61,69,.45);
  font-weight:bold;
}

.game-stars{
  color:var(--accent);
  text-shadow:0 0 4px var(--accent-soft);
  font-size:10px;
  letter-spacing:1px;
  margin-bottom:4px;
}

.game-note{
  color:#5d6d76;
  font-size:9px;
  line-height:1.35;
}

.game-mini-links{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #c8d1d6;
  text-align:center;
  color:#7d8d96;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* tiny decorative rail details */
.tiny-side-label{
  position:absolute;
  left:55px;
  top:390px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#667982;
  opacity:.72;
  z-index:4;
}

.tiny-side-bar{
  position:absolute;
  left:17px;
  top:386px;
  width:28px;
  height:116px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 8px rgba(85,105,114,.18);
}

.tiny-side-dot{
  position:absolute;
  left:25px;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid #81939b;
  background:linear-gradient(180deg,#f6fbfc,#b8c7ce);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  opacity:.8;
}

.dot-a{top:516px}
.dot-b{top:535px}
.dot-c{top:554px}

.tiny-side-meter{
  position:absolute;
  left:42px;
  top:517px;
  width:5px;
  height:51px;
  border:1px solid #81939b;
  background:
    linear-gradient(180deg,#ffffff 0 32%,#c9d4d9 32% 100%);
  opacity:.8;
}

/* P5 RAIL PANEL — status LEDs, audio VU meter, scrolling hex ticker */
.rail-leds{
  position:absolute;
  left:18px;
  top:508px;
  width:24px;
  height:58px;
  z-index:4;
  pointer-events:none;
}

.rail-vu{
  position:absolute;
  left:39px;
  top:513px;
  width:11px;
  height:56px;
  z-index:4;
  pointer-events:none;
}

.rail-ticker{
  position:absolute;
  left:12px;
  top:608px;
  width:52px;
  height:400px;
  z-index:4;
  pointer-events:none;
  opacity:.9;
}

.rail-leds canvas,
.rail-vu canvas,
.rail-ticker canvas{
  display:block;
}

/* MAIN MACHINE */
.app-frame{
  position:relative;
  z-index:20;
  width:565px;
  height:1026px;
  flex:0 0 565px;
  background:linear-gradient(180deg,#e5ebee 0,#d4dde1 50%,#b7c4ca 100%);
  border-left:1px solid #8798a0;
  border-right:1px solid #788a93;
  box-shadow:
    7px 0 18px rgba(39,57,65,.18),
    inset 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}



.app-frame::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  width:16px;
  height:100%;
  z-index:80;
  background:linear-gradient(90deg,#7c8e97,#dbe4e7 38%,rgba(255,255,255,.7) 55%,rgba(160,176,184,.7));
  box-shadow:3px 0 8px rgba(60,80,88,.18);
  pointer-events:none;
}

.top-cap{
  position:absolute;
  left:8px;
  top:0;
  width:546px;
  height:57px;
  border-left:1px solid #8d9da5;
  border-right:1px solid #8d9da5;
  border-bottom:1px solid #7f9098;
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.22) 0px,rgba(120,130,140,.22) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#f7fafa 0,#dfe7ea 52%,#b5c2c8 100%);
  box-shadow:inset 0 1px 7px rgba(255,255,255,.95);
}

.logo-mark{
  position:absolute;
  left:24px;
  top:28px;
  width:72px;
  height:18px;
  color:var(--accent);
  font-size:9px;
}

.logo-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:37px;
  height:8px;
  border-top:2px solid var(--accent);
  border-left:14px solid var(--accent);
  transform:skewX(-25deg);
}

.logo-mark::after{
  content:"leafy.exe";
  position:absolute;
  left:38px;
  top:8px;
}

/* site-wide login status, mirrors .top-cap-actions on the right */
.site-login-status{
  position:absolute;
  left:24px;
  top:8px;
  z-index:5;
  font-family:Verdana,Arial,sans-serif;
  font-size:8px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#74858e;
}

.site-login-account b{
  color:#53656f;
  font-style:normal;
}

.site-login-link{
  border:none;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:var(--accent);
  cursor:pointer;
}

.site-login-link:hover{
  text-decoration:underline;
}

.machine{
  position:absolute;
  left:8px;
  top:57px;
  width:546px;
  height:884px;
  border-left:1px solid #8999a1;
  border-right:1px solid #8999a1;
  background:rgba(220,227,231,.7);
  perspective:900px;
}

/* faint film-grain layer over the machine screen, above the disc layer
   (z-index 15) but below the transition flash/wipe (98/99) */
.machine::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

.top-grid{
  display:grid;
  grid-template-columns:274px 1fr;
  gap:7px;
  margin:0 7px 7px;
}

.hero-screen{
  position:relative;
  height:200px;
  border:2px solid #80919a;
  border-radius:4px;
  overflow:hidden;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 24px rgba(140,165,175,.22);
}

.hero-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(128deg,transparent 0 43%,rgba(255,255,255,.8) 44%,transparent 58%),
    repeating-linear-gradient(0deg,rgba(70,100,112,.045) 0 1px,transparent 1px 5px);
}

.hero-p5{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .6s ease;
}

.hero-p5.active{opacity:1}

.hero-p5 canvas{
  display:block;
}

.hero-title{
  position:absolute;
  left:42px;
  top:82px;
  font-size:36px;
  letter-spacing:.5px;
  color:#788a93;
  line-height:.9;
  font-family:var(--font-pixel);
  z-index:2;
}

.hero-sub{
  position:absolute;
  left:120px;
  top:112px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#667780;
  z-index:2;
}

.hero-module-tag{
  position:absolute;
  left:12px;
  top:9px;
  font-family:Consolas,"Courier New",monospace;
  font-size:7px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#8a9aa3;
  opacity:.85;
  z-index:2;
  white-space:nowrap;
}

.hero-module-tag.tag-reveal{
  animation:tagReveal .5s ease both;
}

@keyframes tagReveal{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:.85;transform:translateX(0)}
}

.hero-loader{
  position:absolute;
  right:14px;
  bottom:13px;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #778991;
  background:
    radial-gradient(circle at 35% 30%,#fff 0 14%,#dce5e8 20%,#a8b8c0 48%,#f6fafb 72%,#93a3ac 100%);
  box-shadow:
    0 0 6px rgba(255,255,255,.7),
    inset 0 0 0 3px rgba(255,255,255,.45);
  opacity:0;
  transform:scale(.7);
  pointer-events:none;
  z-index:5;
}

.hero-loader::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid #99a9b1;
  background:radial-gradient(circle,#eef4f6 0 25%,#bac8cf 55%,#e7eef1 100%);
}

.detail-text a{
  color:#2f3d45;
  text-decoration:none;
  border-bottom:1px solid rgba(47,61,69,.45);
}

.detail-text a:hover{
  color:#12181c;
  border-bottom-color:#12181c;
}

.machine.rebuild .hero-loader{
  animation:loaderDisc .9s ease both;
}

@keyframes loaderDisc{
  0%{opacity:0;transform:scale(.55) rotate(0deg)}
  20%{opacity:1;transform:scale(1) rotate(40deg)}
  75%{opacity:1;transform:scale(1) rotate(250deg)}
  100%{opacity:0;transform:scale(.7) rotate(320deg)}
}

.right-stack{
  display:block;
  height:200px;
}

.news-full{
  height:200px;
}

.box{
  position:relative;
  border:1px solid #98a7af;
  background:rgba(222,230,234,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden;
}

/* faint CRT scanline texture, toned down, on other screen surfaces */
.info-panel::after,
.box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:repeating-linear-gradient(0deg,rgba(70,100,112,.028) 0 1px,transparent 1px 5px);
}

.box-head{
  height:20px;
  border-bottom:1px solid #a8b5bb;
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.22) 0px,rgba(120,130,140,.22) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#eff3f5,#ccd6db);
  padding:4px 6px 0;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#6e808a;
  font-size:9px;
  font-family:Consolas,"Courier New",monospace;
}

.box-body{
  margin:5px;
  border:1px solid #a1aeb5;
  background:rgba(255,255,255,.72);
  height:calc(100% - 30px);
  padding:8px;
  overflow:auto;
}

.news-item{
  font-size:10px;
  line-height:1.25;
  margin-bottom:8px;
}

.news-item b{
  display:block;
  color:#475864;
}

.news-item span{
  display:block;
  color:#667780;
}

.news-item .news-date{
  display:block;
  font-size:9px;
  color:#8a97a0;
  margin-top:2px;
}

.news-item-link{
  cursor:pointer;
  border-radius:3px;
  margin-left:-4px;
  margin-right:-4px;
  padding:2px 4px;
  transition:background .15s ease;
}

.news-item-link:hover,
.news-item-link:focus-visible{
  background:rgba(71,88,100,.08);
  outline:none;
}

.news-item-link b{
  text-decoration:underline;
  text-decoration-color:rgba(71,88,100,.35);
  text-underline-offset:2px;
}

.news-pulse{
  animation:newsPulse .9s ease both;
}

@keyframes newsPulse{
  0%{box-shadow:0 0 0 rgba(255,255,255,0), inset 0 0 0 rgba(255,255,255,0)}
  35%{box-shadow:0 0 14px rgba(255,255,255,.7), inset 0 0 20px rgba(255,255,255,.65)}
  100%{box-shadow:0 0 0 rgba(255,255,255,0), inset 0 0 0 rgba(255,255,255,0)}
}

.mid-zone{
  position:relative;
  margin:0 7px;
  height:598px;
  overflow:hidden;
}

.info-panel{
  position:absolute;
  left:0;
  width:100%;
  border:2px solid #80919a;
  border-radius:4px;
  background:rgba(255,255,255,.78);
  overflow:hidden;
  box-shadow:inset 0 0 24px rgba(145,165,174,.18);
  transition:
    top .62s cubic-bezier(.15,.82,.22,1),
    height .62s cubic-bezier(.15,.82,.22,1),
    opacity .35s,
    transform .62s cubic-bezier(.15,.82,.22,1);
}

.info-head{
  height:22px;
  border-bottom:1px solid #c2ccd1;
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.22) 0px,rgba(120,130,140,.22) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#eef3f5,#d2dbe0);
  padding:5px 7px 0;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#687a84;
  font-size:9px;
  font-family:Consolas,"Courier New",monospace;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  overflow:hidden;
}

/* ascii terminal-title flourish: lead glyph + dash rule fills the width */
.info-head::before{
  content:"╾";
  opacity:.55;
  font-family:Consolas,"Courier New",monospace;
}

.info-head::after{
  content:"────────────────────────────────────────────────────────────────";
  flex:1;
  overflow:hidden;
  opacity:.3;
  font-family:Consolas,"Courier New",monospace;
  letter-spacing:0;
}

.info-body{
  padding:18px 18px;
  font-size:10px;
  line-height:1.55;
  color:#30404a;
  max-height:100%;
  overflow:auto;
  white-space:pre-line;
}

/* taller description area so it fits without its own scrollbar */
.p-desc{top:21px;height:255px}
.p-desc .info-body{
  padding:12px 16px;
  font-size:9px;
  line-height:1.42;
  overflow:hidden;
}

.p-mission{top:292px;height:82px}
.p-mission .info-body{
  padding:10px 14px;
  font-size:9px;
  line-height:1.35;
  overflow:hidden;
}

.p-work{top:380px;height:218px}

/* bottom video-style module strip */
.module-strip{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:7px;
  padding:30px 8px 8px;
}

.module-tile{
  height:160px;
  border:1px solid #9ba9b0;
  background:rgba(255,255,255,.66);
  padding:8px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.module-tile:hover{
  background:rgba(255,255,255,.88);
  transform:translateY(-2px);
  box-shadow:
    0 0 8px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.module-thumb{
  height:58px;
  border:1px solid #c8d1d6;
  background:
    linear-gradient(135deg,#edf5f7,#b8cbd2 58%,#f4f8fa);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#74858e;
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  margin-bottom:8px;
}

.module-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.module-thumb-code{
  font-family:Consolas,"Courier New",monospace;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8a9aa3;
  opacity:.7;
}

.guestbook-thumb{
  background:
    linear-gradient(135deg,#eef4f6,#c8d7dd 58%,#f8fbfc);
}

.guestbook-gif,
.blog-gif{
  object-fit:contain !important;
  padding:8px;
  filter:drop-shadow(0 0 5px rgba(120,140,150,.25));
}

.blog-thumb{
  background:
    linear-gradient(135deg,#eef4f6,#c8d7dd 58%,#f8fbfc);
}

/* video-of-the-week tile: YouTube thumbnail behind a breathing play
   button, reuses pulloutCornerBreathe's glow rhythm */
.video-thumb{
  position:relative;
  background:
    linear-gradient(135deg,#1c2226,#3a4348 58%,#1c2226);
}

.video-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff 0 14%,#dce5e8 20%,#a8b8c0 48%,#f6fafb 72%,#93a3ac 100%);
  border:1px solid #778991;
  box-shadow:0 0 4px rgba(255,255,255,.6);
  animation:pulloutCornerBreathe 6s ease-in-out infinite;
}

.video-play-btn::after{
  content:"";
  border-style:solid;
  border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #43545e;
  margin-left:2px;
}

.video-thumb-empty{
  font-family:Consolas,"Courier New",monospace;
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8a9aa3;
  opacity:.7;
}

.module-label{
  color:#94a2a9;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-family:Consolas,"Courier New",monospace;
  border-bottom:1px solid #c8d1d6;
  padding-bottom:4px;
  margin-bottom:5px;
}

.module-title{
  color:#53646e;
  font-size:9px;
  line-height:1.05;
  font-weight:bold;
  text-transform:uppercase;
  margin-bottom:6px;
}

.module-copy{
  color:#5d6d76;
  font-size:8px;
  line-height:1.2;
}

.module-disc{
  position:absolute;
  right:7px;
  bottom:7px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff 0 14%,#dce5e8 20%,#a8b8c0 48%,#f6fafb 72%,#93a3ac 100%);
  border:1px solid #778991;
  box-shadow:0 0 4px rgba(255,255,255,.6);
}

.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  padding:35px 9px 9px;
}

.feature-card{
  height:236px;
  border:1px solid #9ba9b0;
  border-radius:4px;
  background:rgba(255,255,255,.68);
  padding:28px 10px 10px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.feature-img{
  width:96px;
  height:70px;
  margin:0 auto 20px;
  background:linear-gradient(135deg,#edf5f7,#b8cbd2 58%,#f4f8fa);
  border:1px solid #d9e2e6;
}

.feature-title{
  text-transform:uppercase;
  font-weight:bold;
  color:#60717b;
  font-size:10px;
  margin-bottom:14px;
}

.feature-text{
  text-align:left;
  font-size:10px;
  line-height:1.25;
  color:#52636d;
}

/* .tabbed-panel stacks tabs-strip + portfolio-layout as flex children so
   the tab header wraps to fit and portfolio-layout gets the rest */
.tabbed-panel{
  display:flex;
  flex-direction:column;
}

.tabs-strip{
  flex:0 0 auto;
  border-bottom:1px solid #a6b3ba;
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.22) 0px,rgba(120,130,140,.22) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#edf2f4,#cad4d9);
  padding:8px 7px;
  z-index:3;
}

.tabs-label{
  font-size:9px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#687a84;
  margin-bottom:6px;
}

.tabs-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.tabs-strip-head .tabs-label{ margin-bottom:0; }

.rec-submit-btn{
  min-width:auto;
  white-space:nowrap;
  margin-bottom:6px;
}

.tabs-strip-note{
  font-size:8.5px;
  line-height:1.4;
  color:#8a9ca5;
  margin:2px 0 8px;
}

[data-theme="dark"] .tabs-strip-note{ color:#6c7880; }

.rec-submit-success p{
  margin:0 0 10px;
  font-size:10px;
  line-height:1.4;
  color:#566873;
}

[data-theme="dark"] .rec-submit-success p{ color:#c3ced3; }

/* rec list rows: title + small category subtitle underneath */
.list-row-title{
}

.list-row-category{
  margin-top:3px;
  font-size:7.5px;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
}

[data-theme="dark"] .list-row-category{ color:#6c7880; }

.list-row-meta{
  margin-top:2px;
  font-size:7px;
  font-weight:normal;
  text-transform:none;
  letter-spacing:.2px;
  color:#a3b2ba;
}

[data-theme="dark"] .list-row-meta{ color:#57646b; }

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px 5px;
}

/* pinned outside the category-derived tab list, pushed to the far right */
.tab-pinned{
  margin-left:auto;
}

.tab{
  min-width:58px;
  border:1px solid #b8c3c9;
  background:
    radial-gradient(circle at 30% 15%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f7fafb,#d5dde1);
  font-size:9px;
  text-transform:uppercase;
  color:#6b7c86;
  cursor:pointer;
  padding:4px 10px;
  text-align:center;
  line-height:1.3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  font-family:Verdana,Arial,sans-serif;
}

.tab:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:
    radial-gradient(circle at 30% 15%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#fff,#e3eaee);
}

.tab.active{
  background:
    radial-gradient(circle at 30% 15%,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#d9e2e6,#f8fafb);
  box-shadow:0 0 6px rgba(255,255,255,.9) inset;
  color:#35454e;
}

.portfolio-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:7px;
  padding:7px;
  flex:1 1 auto;
  min-height:0;
}

/* bottom controls, stacked right of the app frame. fixed "left" so it
   stays flush against the machine regardless of viewport width. */
.bottom-controls{
  position:fixed;
  left:700px;
  bottom:5vh;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
}

@media(max-width:1080px){
  .bottom-controls{display:none}
}

.music-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;

  border:1px solid #8798a1;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;

  font-family:Verdana,Arial,sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.9px;

  padding:11px 18px;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(40,60,70,.14),
    0 0 0 rgba(108,116,207,0);
  transition:color .2s ease, border-color .2s ease;
  animation:musicToggleBreathe 6s ease-in-out infinite;
}

.music-toggle:hover{
  color:var(--accent);
  border-color:var(--accent);
}

@keyframes musicToggleBreathe{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 2px 8px rgba(40,60,70,.14),
      0 0 0 var(--accent-soft);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 2px 8px rgba(40,60,70,.14),
      0 0 11px var(--accent-soft);
  }
}

.music-toggle-bars{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:11px;
}

.music-toggle-bars span{
  width:3px;
  border-radius:1px;
  background:var(--accent);
  animation:musicToggleBar 1.2s ease-in-out infinite;
}

.music-toggle-bars span:nth-child(1){ height:5px; animation-delay:0s; }
.music-toggle-bars span:nth-child(2){ height:10px; animation-delay:.2s; }
.music-toggle-bars span:nth-child(3){ height:7px; animation-delay:.4s; }

@keyframes musicToggleBar{
  0%,100%{ transform:scaleY(.35); }
  50%{ transform:scaleY(1); }
}

/* faster/brighter once something's actually playing, toggled from script.js */
.music-toggle.playing{
  border-color:var(--accent);
  color:var(--accent);
}

.chat-toggle.open{
  border-color:var(--accent);
  color:var(--accent);
}

.music-toggle.playing .music-toggle-bars span{
  animation-duration:.55s;
}

@media(prefers-reduced-motion: reduce){
  .music-toggle,
  .music-toggle-bars span{
    animation:none !important;
  }
}

/* leafy.exe's own 88x31 webring-style badge — sits inline next to the
   music toggle at the bottom of the main section */
.site-badge-wrap{
  position:relative;
  z-index:20;
}

.site-badge-88x31{
  position:relative;
  display:block;
  width:88px;
  height:31px;
  line-height:0;
  box-shadow:0 2px 8px rgba(40,60,70,.14);
}

.site-badge-88x31 img{
  display:block;
  width:88px;
  height:31px;
  image-rendering:pixelated;
  filter:grayscale(1);
  transition:filter .2s ease;
}

.site-badge-88x31:hover img{
  filter:grayscale(0);
}

/* "grab this button" embed-code box, pops out right of the badge on hover */
.badge-grab{
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  width:150px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease;

  border:1px solid #8798a1;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(40,60,70,.14);
  padding:6px;
  font-family:Verdana,Arial,sans-serif;
}

.site-badge-wrap:hover .badge-grab{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.badge-grab-label{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#5f707a;
  margin-bottom:4px;
}

.badge-grab textarea{
  width:100%;
  height:60px;
  resize:none;
  border:1px solid #99a7af;
  background:rgba(255,255,255,.75);
  color:#2f3d45;
  font-family:"Courier New",monospace;
  font-size:7px;
  line-height:1.3;
  padding:3px;
  box-sizing:border-box;
  margin-bottom:4px;
}

.badge-grab button{
  width:100%;
  border:1px solid #8798a1;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;
  font-family:Verdana,Arial,sans-serif;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:4px 0;
  cursor:pointer;
}

.badge-grab button:hover{
  color:var(--accent);
  border-color:var(--accent);
}

[data-theme="dark"] .badge-grab{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
}

[data-theme="dark"] .badge-grab-label{
  color:#8b98a0;
}

[data-theme="dark"] .badge-grab textarea{
  background:rgba(0,0,0,.35);
  border-color:#454c52;
  color:#c3ced3;
}

[data-theme="dark"] .badge-grab button{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

.list-panel,
.detail-panel{
  border:1px solid #99a7af;
  background:rgba(255,255,255,.65);
  overflow:hidden;
}

.list-row{
  min-height:31px;
  height:auto;
  border-bottom:1px solid #c8d1d6;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  padding:8px 10px 7px;
  text-transform:uppercase;
  font-size:9px;
  font-weight:bold;
  color:#657680;
  letter-spacing:.45px;
  line-height:1.25;
  cursor:pointer;
  word-break:normal;
  overflow-wrap:break-word;
  transition:background .15s ease, color .15s ease;
}

.list-row:hover:not(.active){
  background:linear-gradient(180deg,#fff,#e3eaed);
  color:#41525b;
}

.list-panel{
  overflow:auto;
}

.list-row.active{
  background:linear-gradient(180deg,#fff,#e8eef1);
  color:#35454e;
}

/* left-aligned, document-style detail card, thumbnail top-left */
.detail-panel{
  text-align:left;
  padding:24px 22px;
}

.detail-img{
  width:150px;
  height:92px;
  margin:0 0 20px;
  border:1px solid #dde6ea;
  background:linear-gradient(135deg,#f8fbfb,#c4d5dc);
  box-shadow:0 8px 22px rgba(100,120,130,.14);
}

.detail-title{
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
  color:#53646e;
  margin-bottom:17px;
  line-height:1.2;
  overflow-wrap:break-word;
}

.detail-text{
  font-size:10px;
  line-height:1.4;
  color:#566873;
  text-align:left;
}

/* hand-authored HTML blog posts render real tags inside .detail-text,
   give the common ones sane sizing */
.detail-text h1,
.detail-text h2,
.detail-text h3{
  font-size:12px;
  line-height:1.3;
  margin:12px 0 6px;
  color:#2f3d45;
}

.detail-text p{
  margin:0 0 10px;
}

.detail-text strong,
.detail-text b{
  color:#2f3d45;
}

/* about-tab split layout: photo/title pinned top, body scrolls below,
   one frame with a hairline divider. only when the file has an image. */
.detail-panel-split{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:20px 22px;
  text-align:left;
}

.detail-photo-box{
  flex:0 0 auto;
  padding:0 0 16px;
  border-bottom:1px solid #c8d1d6;
  margin-bottom:16px;
}

.detail-photo{
  display:block;
  max-width:150px;
  max-height:110px;
  margin:0 0 14px;
  border:1px solid #dce5e9;
  object-fit:contain;
  background:#fff;
}

.detail-body-box{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0;
}

.detail-panel-split .detail-title{
  margin-bottom:0;
}

/* games' bottom box holds card rows, not centered prose — left-align it */
.detail-body-box-left{
  text-align:left;
}

.contact-panel{
  padding:7px;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:7px;
  flex:1 1 auto;
  min-height:0;
}

.chat-list,
.chat-form{
  border:1px solid #99a7af;
  background:rgba(255,255,255,.68);
  padding:8px;
  overflow:auto;
}

.chat-list{
  font-size:10px;
  line-height:1.3;
}

/* guestbook chatroom: adds a third "chatters" column next to message
   list + form. only the guestbook tab uses this modifier. */
.chat-panel-3col{
  grid-template-columns:190px 1fr 150px;
}

.members-panel{
  border:1px solid #99a7af;
  background:rgba(255,255,255,.68);
  padding:8px;
  overflow:auto;
  font-size:9px;
}

.members-head{
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
  font-size:8px;
  border-bottom:1px solid #c8d2d6;
  padding-bottom:5px;
  margin-bottom:6px;
}

.member-row{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 0;
  color:#43545e;
}

.member-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c3ced3;
  flex:0 0 auto;
}

.member-dot.online{
  background:#4caf6c;
  box-shadow:0 0 3px rgba(76,175,108,.8);
}

.member-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.member-empty{
  color:#8a9ca5;
  line-height:1.4;
}

/* login/signup mini-form, shown in the chat-form column instead of the
   message composer whenever nobody's logged in yet. */
.chat-auth-tabs{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  clear:both;
}

.chat-form .chat-auth-tab{
  float:none;
  flex:1 1 auto;
  border:1px solid #99a7af;
  background:rgba(255,255,255,.6);
  padding:4px 6px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#5c6d75;
}

.chat-form .chat-auth-tab.active{
  background:linear-gradient(180deg,#fff,#e8eef1);
  color:#35454e;
  font-weight:bold;
}

.chat-auth-copy{
  font-size:9px;
  line-height:1.4;
  color:#5c6d75;
  margin-bottom:8px;
}

.chat-auth-error{
  font-size:9px;
  color:#b34848;
  margin:-3px 0 8px;
}

.chat-logged-in{
  font-size:9px;
  color:#43545e;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid #c8d2d6;
  overflow:hidden;
}

.chat-form .chat-logout-btn{
  font-size:8px;
  padding:2px 8px;
}

.chat-guest-head{
  font-size:9px;
  color:#43545e;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid #c8d2d6;
}

.chat-inline-link{
  all:unset;
  cursor:pointer;
  font-size:9px;
  color:#0091ab;
  text-decoration:underline;
}

.chat-form .chat-inline-link{
  float:none;
  display:inline;
  margin-top:0;
}

#cwBackToGuestBtn{
  display:block;
  margin-top:8px;
}

.chat-card{
  border-bottom:1px solid #c8d2d6;
  padding:5px 0;
}

.chat-card-date{
  display:block;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
  font-size:8px;
  margin-bottom:2px;
}

/* owner reply, filled in manually via the Supabase table editor, no
   public write path. shared between .chat-card and .comment-item-body. */
.reply-block{
  margin-top:6px;
  margin-left:8px;
  padding:6px 8px;
  border-left:2px solid #99a7af;
  background:rgba(153,167,175,.12);
}

.reply-meta{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
  margin-bottom:2px;
}

.reply-message{
  font-size:10px;
  line-height:1.4;
  color:#43545e;
}

[data-theme="dark"] .reply-block{
  border-left-color:#454c52;
  background:rgba(69,76,82,.18);
}

[data-theme="dark"] .reply-meta{ color:#6c7880; }
[data-theme="dark"] .reply-message{ color:#c3ced3; }

.chat-card b{
  display:block;
  text-transform:uppercase;
  color:#43545e;
  font-size:9px;
}

.website-link{
  display:inline-block;
  margin-top:3px;
  color:#2f3d45;
  text-decoration:none;
  border-bottom:1px solid rgba(47,61,69,.45);
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:.5px;
}

.website-link:hover{
  color:#12181c;
  border-bottom-color:#12181c;
}

/* 88x31 style link button for guestbook website links */
.site-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:31px;
  margin-top:6px;
  padding:0 6px;
  border:1px solid #8798a1;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f7fafb,#d5dde1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  text-decoration:none !important;
  color:#53656f !important;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.4px;
  line-height:1.1;
  text-align:center;
}

.site-button:hover{
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#fff,#dce7ec);
  border-color:var(--accent);
}

.site-button-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* chrome sweep — diagonal highlight glides across on hover, shared
   treatment across every clickable chrome surface */
.module-tile,
.feature-card,
.tab,
.site-button,
.neocities-follow-btn,
.theme-toggle{
  position:relative;
  overflow:hidden;
}

.module-tile::after,
.feature-card::after,
.tab::after,
.site-button::after,
.neocities-follow-btn::after,
.theme-toggle::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-60%;
  width:35%;
  height:220%;
  background:linear-gradient(115deg,transparent 10%,var(--sweep-highlight) 45%,transparent 80%);
  transform:translateX(-60%);
  opacity:0;
  pointer-events:none;
  transition:transform .6s ease, opacity .6s ease;
}

.module-tile:hover::after,
.feature-card:hover::after,
.tab:hover::after,
.site-button:hover::after,
.neocities-follow-btn:hover::after,
.theme-toggle:hover::after{
  transform:translateX(340%);
  opacity:1;
}

/* contact > links tab — "my links", "sites i like" badge rows, and the
   webring nav strip (currently a coming-soon placeholder) */
.links-panel{
  padding:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  flex:1 1 auto;
  min-height:0;
}

.links-block-title{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#687a84;
  margin-bottom:8px;
  padding-bottom:4px;
  border-bottom:1px solid #c8d1d6;
}

.links-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}

.webring-strip{
  display:flex;
  align-items:center;
  gap:8px;
}

.webring-nav-btn{
  border:1px solid #b8c3c9;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#a3aeb4;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:6px 10px;
  cursor:default;
}

.webring-slot{
  border:1px dashed #99a7af;
  background:rgba(255,255,255,.4);
  color:#8798a1;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-align:center;
  padding:6px 12px;
  flex:1;
}

/* guestbook "add a face" kaomoji picker, scoped with .chat-form to
   out-specificity the generic ".chat-form button" rule */
.chat-form .face-toggle-btn{
  display:flex;
  align-items:center;
  gap:6px;
  float:none;
  width:100%;
  box-sizing:border-box;
  border:1px solid #b8c3c9;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  font-family:Verdana,Arial,sans-serif;
  font-size:9px;
  text-transform:none;
  letter-spacing:.3px;
  color:#53656f;
  padding:6px 10px;
  margin-bottom:7px;
  cursor:pointer;
}

.chat-form .face-toggle-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

.chat-form .face-toggle-btn.active{
  border-color:#5f707a;
  background:linear-gradient(180deg,#d9e2e6,#f8fafb);
}

.face-toggle-emoji{
  font-size:13px;
  line-height:1;
}

.chat-form .faces-grid,
.face-window .faces-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(66px,1fr));
  gap:5px;
  margin-bottom:8px;
}

.chat-form .faces-grid[hidden]{
  display:none;
}

.chat-form .face-chip,
.face-window .face-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  float:none;
  width:auto;
  box-sizing:border-box;
  border:1px solid #b8c3c9;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  font-family:Verdana,Arial,sans-serif;
  text-transform:none;
  padding:6px 3px;
  cursor:pointer;
}

.chat-form .face-chip:hover,
.face-window .face-chip:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

.chat-form .face-chip.used,
.face-window .face-chip.used{
  border-color:#5f707a;
  background:linear-gradient(180deg,#d9e2e6,#f8fafb);
}

.face-glyph{
  display:block;
  font-family:"Segoe UI Symbol","Apple Color Emoji","Noto Sans Symbols",Verdana,Arial,sans-serif;
  font-size:13px;
  color:#43545e;
  line-height:1.2;
  white-space:nowrap;
}

.face-label{
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8798a1;
}

[data-theme="dark"] .links-block-title{
  color:#8b98a0;
  border-bottom-color:#3a4046;
}

[data-theme="dark"] .webring-nav-btn{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#5c666c;
}

[data-theme="dark"] .webring-slot{
  border-color:#454c52;
  background:rgba(0,0,0,.25);
  color:#8b98a0;
}

[data-theme="dark"] .chat-form .face-toggle-btn{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .chat-form .face-toggle-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .chat-form .face-toggle-btn.active{
  border-color:#8b98a0;
  background:linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .chat-form .face-chip,
[data-theme="dark"] .face-window .face-chip{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
}

[data-theme="dark"] .chat-form .face-chip:hover,
[data-theme="dark"] .face-window .face-chip:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .chat-form .face-chip.used,
[data-theme="dark"] .face-window .face-chip.used{
  border-color:#8b98a0;
  background:linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .face-glyph{
  color:#d3dbde;
}

[data-theme="dark"] .face-label{
  color:#8b98a0;
}

/* top-cap visitor counter */
.visit-counter{
  position:absolute;
  right:24px;
  top:32px;
  font-size:8px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#8798a1;
  z-index:5;
  font-family:Consolas,"Courier New",monospace;
}

/* small persistent HUD readout, matches the ambient background labels */
.hud-node-tag{
  position:absolute;
  right:24px;
  top:44px;
  font-family:Consolas,"Courier New",monospace;
  font-size:7px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#8798a1;
  opacity:.45;
  z-index:5;
  animation:hudTagBreathe 6s ease-in-out infinite;
}

@keyframes hudTagBreathe{
  0%,100%{opacity:.32}
  50%{opacity:.6}
}

.visit-counter-digits{
  color:var(--accent);
  text-shadow:0 0 5px var(--accent-soft);
  letter-spacing:.5px;
}

/* top-cap right-side action row (follow button + dark mode switch) */
.top-cap-actions{
  position:absolute;
  right:24px;
  top:8px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:6px;
}

.theme-toggle,
.neocities-follow-btn{
  position:relative;
  overflow:hidden;
  border:1px solid #8798a1;
  background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f7fafb,#d5dde1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  padding:3px 10px;
  margin:0;
  font-family:Verdana,Arial,sans-serif;
  font-size:8px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#53656f;
  cursor:pointer;
  display:inline-block;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
}

.theme-toggle:hover,
.neocities-follow-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#fff,#dce7ec);
}

/* ambient cursor trail confined to the app window */
#cursorTrail{
  position:absolute;
  left:0;
  top:0;
  z-index:500;
  pointer-events:none;
}

.chat-form input,
.chat-form textarea{
  width:100%;
  border:1px solid #a4b1b8;
  background:#f8fafb;
  font-family:Verdana,Arial,sans-serif;
  font-size:10px;
  color:#43545e;
  margin-bottom:7px;
  padding:6px;
}

.chat-form textarea{
  height:105px;
  resize:none;
}

/* wraps the message textarea so submit can sit tucked into its
   bottom-right corner instead of floating below the whole form */
.cw-message-wrap{
  position:relative;
  margin-bottom:7px;
}

.cw-message-wrap textarea{
  margin-bottom:0;
  padding-right:64px;
  padding-bottom:28px;
}

.chat-form .cw-submit-inline{
  position:absolute;
  right:6px;
  bottom:6px;
  float:none;
  margin:0;
}

/* pairs the two optional rec-submission fields (link/name) side by side */
.rec-submit-row{
  display:flex;
  gap:7px;
}

.rec-submit-row input{
  width:auto;
  flex:1 1 0;
  min-width:0;
}

.chat-form button{
  float:right;
  border:1px solid #8798a1;
  background:#dfe6e9;
  font-size:8px;
  text-transform:uppercase;
  color:#53656f;
  padding:4px 16px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.chat-form button:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

/* "watch video" CTA in the video archive detail panel, standalone
   chrome-button styling */
.archive-watch-btn{
  display:inline-block;
  margin:10px 0 14px;
  border:1px solid #8798a1;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:7px 16px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .15s ease, border-color .15s ease;
}

.archive-watch-btn:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

[data-theme="dark"] .archive-watch-btn{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .archive-watch-btn:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg,#31383d,#20262b);
}

/* "watch timelapse" CTA in the gallery detail panel. qualified as
   ".detail-text a.timelapse-watch-btn" to out-specificity the generic
   ".detail-text a" link rule, which was overriding its color/underline. */
.detail-text a.timelapse-watch-btn{
  display:inline-block;
  margin:10px 0 4px;
  border:1px solid #8798a1;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;
  font-size:9px;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:7px 16px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .15s ease, border-color .15s ease;
}

.detail-text a.timelapse-watch-btn:hover,
.detail-text a.timelapse-watch-btn:focus-visible{
  border-color:#5f707a;
  background:linear-gradient(180deg,#fff,#e3eaee);
}

[data-theme="dark"] .detail-text a.timelapse-watch-btn{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .detail-text a.timelapse-watch-btn:hover,
[data-theme="dark"] .detail-text a.timelapse-watch-btn:focus-visible{
  border-color:#8b98a0;
  background:linear-gradient(180deg,#31383d,#20262b);
}



/* VIDEO-STYLE TRANSITIONS */
.hero-screen,
.right-stack .box,
.info-panel{
  will-change:transform,opacity,clip-path;
  transform-origin:left center;
}

.machine.preload .hero-screen,
.machine.rebuild .hero-screen{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
}

.machine.preload .right-stack .box{
  animation:sideEject .42s cubic-bezier(.55,.02,.4,.98) forwards .08s;
}

.machine.preload .info-panel{
  animation:panelEject .48s cubic-bezier(.55,.02,.4,.98) forwards;
}

@keyframes sideEject{
  0%{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:translateX(10px);clip-path:inset(0 0 0 72%)}
}

@keyframes panelEject{
  0%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:translateY(8px);clip-path:inset(0 100% 0 0)}
}

.machine.rebuild .right-stack .box{
  animation:sideInsert .58s cubic-bezier(.18,.78,.22,1) both .22s;
}

.machine.rebuild .info-panel{
  animation:panelInsert .68s cubic-bezier(.18,.78,.22,1) both;
}

.machine.rebuild .info-panel:nth-child(2){animation-delay:.18s}
.machine.rebuild .info-panel:nth-child(3){animation-delay:.32s}

@keyframes sideInsert{
  0%{opacity:0;transform:translateX(16px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}
}

@keyframes panelInsert{
  0%{opacity:0;transform:translateY(10px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
}

/* three-dot bounce loader, pure CSS animation, no JS frame-timer */
.dot-loader{
  display:inline-flex;
  align-items:center;
  gap:3px;
  vertical-align:middle;
}

.dot-loader span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--dot-idle);
  display:inline-block;
  animation:dotBounce 1.1s ease-in-out infinite;
}

.dot-loader span:nth-child(1){animation-delay:0s}
.dot-loader span:nth-child(2){animation-delay:.16s}
.dot-loader span:nth-child(3){animation-delay:.32s}

@keyframes dotBounce{
  0%,80%,100%{background:var(--dot-idle);box-shadow:none;transform:scale(1)}
  40%{background:var(--accent);box-shadow:0 0 4px 1px var(--accent-glow);transform:scale(1.3)}
}

/* GREY BARS BEFORE TEXT LOAD */
.loading-shell{
  position:relative;
  color:transparent !important;
}

.loading-shell::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  height:8px;
  background:linear-gradient(90deg,#c8d3d9,#f9fbfc,#c8d3d9);
  opacity:.75;
  animation:shellPulse .42s ease infinite alternate;
}

.loading-shell .ghost-line{
  height:7px;
  margin:8px 0;
  background:#cfdadf;
  border-top:1px solid #edf3f5;
  opacity:.65;
}

@keyframes shellPulse{
  from{opacity:.35;transform:translateX(-3px)}
  to{opacity:.85;transform:translateX(3px)}
}

.hero-title,
.hero-sub{
  will-change:transform,opacity;
}

.machine.rebuild .hero-title{
  animation:titleTextIn .38s ease both .48s;
}

.machine.rebuild .hero-sub{
  animation:titleTextIn .38s ease both .64s;
}

@keyframes titleTextIn{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:translateY(0)}
}

.machine.rebuild .reveal-text{
  animation:textLoad .46s ease both .32s;
}

@keyframes textLoad{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:translateY(0)}
}

.row-load{
  animation:rowLoad .46s ease both;
}

.row-load:nth-child(2){animation-delay:.06s}
.row-load:nth-child(3){animation-delay:.12s}
.row-load:nth-child(4){animation-delay:.18s}
.row-load:nth-child(5){animation-delay:.24s}
.row-load:nth-child(6){animation-delay:.3s}

@keyframes rowLoad{
  from{opacity:0;transform:translateX(-18px)}
  to{opacity:1;transform:translateX(0)}
}

.machine.rebuild .tabs-strip{
  animation:tabBarSlide .5s cubic-bezier(.18,.78,.22,1) both .34s;
}

.machine.rebuild .tab{
  animation:tabPop .34s ease both;
}

.machine.rebuild .tab:nth-child(2){animation-delay:.08s}
.machine.rebuild .tab:nth-child(3){animation-delay:.14s}
.machine.rebuild .tab:nth-child(4){animation-delay:.2s}
.machine.rebuild .tab:nth-child(5){animation-delay:.26s}

@keyframes tabBarSlide{
  from{opacity:0;transform:translateX(-35px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes tabPop{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.machine.rebuild .module-tile,
.machine.rebuild .feature-card{
  animation:cardLoad .48s cubic-bezier(.18,.78,.22,1) both .48s;
}

.machine.rebuild .module-tile:nth-child(2),
.machine.rebuild .feature-card:nth-child(2){animation-delay:.62s}

.machine.rebuild .module-tile:nth-child(3),
.machine.rebuild .feature-card:nth-child(3){animation-delay:.76s}

@keyframes cardLoad{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* diagonal wipe */
.screen-flash{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:99;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-120%);
  opacity:0;
}

.game-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.machine.rebuild .screen-flash{
  animation:screenScan .78s ease both .08s;
}

@keyframes screenScan{
  0%{opacity:0;transform:translateX(-120%)}
  25%{opacity:.8}
  100%{opacity:0;transform:translateX(120%)}
}

@keyframes screenScanRev{
  0%{opacity:0;transform:translateX(120%)}
  25%{opacity:.8}
  100%{opacity:0;transform:translateX(-120%)}
}

/* each disc gets its own sweep direction on the flash + wipe layer */
.machine[data-disc="gallery"].rebuild .screen-flash,
.machine[data-disc="contact"].rebuild .screen-flash{
  animation-name:screenScanRev;
}

.diagonal-wipe{
  position:absolute;
  inset:-80px;
  z-index:98;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(135deg,
      transparent 0 35%,
      rgba(255,255,255,.92) 36% 48%,
      rgba(210,218,222,.85) 49% 58%,
      transparent 59% 100%);
  transform:translateX(-120%);
}

.machine.preload .diagonal-wipe{
  animation:diagonalWipe .9s cubic-bezier(.25,.7,.12,1) both;
}

@keyframes diagonalWipe{
  0%{opacity:0;transform:translateX(-120%)}
  18%{opacity:1}
  100%{opacity:0;transform:translateX(120%)}
}

@keyframes diagonalWipeRev{
  0%{opacity:0;transform:translateX(120%)}
  18%{opacity:1}
  100%{opacity:0;transform:translateX(-120%)}
}

@keyframes diagonalWipeVert{
  0%{opacity:0;transform:translateY(-120%)}
  18%{opacity:1}
  100%{opacity:0;transform:translateY(120%)}
}

@keyframes diagonalWipeVertRev{
  0%{opacity:0;transform:translateY(120%)}
  18%{opacity:1}
  100%{opacity:0;transform:translateY(-120%)}
}

/* per-disc wipe angle/axis — about + contact reverse, gallery + recs
   sweep vertically, blog mirrors the angle */
.machine[data-disc="blog"] .diagonal-wipe{
  background:
    linear-gradient(45deg,
      transparent 0 35%,
      rgba(255,255,255,.92) 36% 48%,
      rgba(210,218,222,.85) 49% 58%,
      transparent 59% 100%);
}

.machine[data-disc="gallery"] .diagonal-wipe,
.machine[data-disc="recs"] .diagonal-wipe{
  background:
    linear-gradient(205deg,
      transparent 0 35%,
      rgba(255,255,255,.92) 36% 48%,
      rgba(210,218,222,.85) 49% 58%,
      transparent 59% 100%);
}

.machine[data-disc="about"].preload .diagonal-wipe,
.machine[data-disc="contact"].preload .diagonal-wipe{
  animation-name:diagonalWipeRev;
}

.machine[data-disc="gallery"].preload .diagonal-wipe{
  animation-name:diagonalWipeVert;
}

.machine[data-disc="recs"].preload .diagonal-wipe{
  animation-name:diagonalWipeVertRev;
}

/* PIXI DISC LAYER */
#pixiLayer{
  position:absolute;
  left:0;
  top:0;
  width:641px;
  height:1026px;
  pointer-events:none;
  z-index:15;
  overflow:hidden;
}

#pixiLayer canvas{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:block;
}

#flareCanvas{
  position:fixed;
  right:0;
  top:0;
  width:76vw;
  height:100vh;
  z-index:1;
  pointer-events:none;
  transition:opacity .6s ease;
}

/* dimmed, not hidden, while the gallery pull-out is open */
#flareCanvas.flare-dimmed{opacity:.32}

/* ---------- GALLERY PULL-OUT ----------
   lives in the fixed right-side free area next to flareCanvas. two
   children side by side: the enlarged photo and a p5 ascii rendering.
   clip-path wipe + slide + overshoot makes it read as pulled out from
   behind the machine; closing reverses it. */
.gallery-pullout{
  position:fixed;
  left:679px;
  right:0;
  top:0;
  height:100vh;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,3vw,48px);
  padding:6vh 4vw;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  transform-origin:left center;
  transform:translateX(-70px) scale(.9) rotate(-1.4deg);
  clip-path:inset(0 100% 0 0);
}

.gallery-pullout.active{
  visibility:visible;
  pointer-events:auto;
}

.gallery-pullout.opening{
  animation:pulloutInsert .72s cubic-bezier(.16,.84,.2,1.14) both;
}

.gallery-pullout.closing{
  pointer-events:none;
  animation:pulloutEject .4s cubic-bezier(.55,.02,.4,.98) both;
}

@keyframes pulloutInsert{
  0%{
    opacity:0;
    transform:translateX(-70px) scale(.9) rotate(-1.4deg);
    clip-path:inset(0 100% 0 0);
  }
  45%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1) rotate(0deg);
    clip-path:inset(0 0% 0 0);
  }
}

@keyframes pulloutEject{
  0%{
    opacity:1;
    transform:translateX(0) scale(1) rotate(0deg);
    clip-path:inset(0 0% 0 0);
  }
  100%{
    opacity:0;
    transform:translateX(-70px) scale(.9) rotate(-1.4deg);
    clip-path:inset(0 100% 0 0);
  }
}

@media(prefers-reduced-motion: reduce){
  .gallery-pullout,
  .gallery-pullout.opening,
  .gallery-pullout.closing{
    animation:none !important;
    transition:opacity .12s linear !important;
    transform:none !important;
    clip-path:none !important;
  }

  /* keyframes disabled above, so set the resting visible state explicitly */
  .gallery-pullout.active{opacity:1 !important}
}

/* reuses the music player's Win98/Winamp window chrome, this file only
   needs the bordered panel + body + enlarged image + close-button accent */
.pullout-frame{
  position:relative;
  max-width:56vw;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  border:1px solid #7c8087;
  border-radius:6px;
  background:linear-gradient(180deg,#d7dade,#b9bec4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 20px 50px -12px rgba(10,14,16,.55);
  overflow:hidden;
  pointer-events:auto;
}

.pullout-body{
  position:relative;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:auto;
}

.pullout-frame img{
  display:block;
  max-width:54vw;
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border:1px solid #8f959c;
  background:rgba(20,24,27,.3);
  opacity:0;
  transition:opacity .35s ease;
}

.pullout-frame img.loaded{opacity:1}

.pullout-close:hover,
#pulloutClose:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.pullout-caption{
  margin-top:9px;
  text-align:center;
  font-size:9px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#5c6b74;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* no pullout uses corner brackets anymore, but .video-play-btn's
   breathing glow still reuses this keyframe */
@keyframes pulloutCornerBreathe{
  0%,100%{opacity:.5;filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}
}

/* small "view larger" affordance on the in-panel gallery thumbnail */
.detail-panel .gallery-thumb-btn{
  all:unset;
  display:block;
  cursor:pointer;
  position:relative;
}

/* desktop only, visible at rest not just on hover, magnifier glyph */
@media(min-width:1081px){
  .detail-panel .gallery-thumb-btn::after{
    content:"\26F6 view larger \2197";
    position:absolute;
    left:0;right:0;bottom:0;
    padding:3px 0;
    font-size:7px;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-align:center;
    color:#fff;
    background:rgba(28,27,25,.68);
    opacity:.85;
    transition:opacity .15s ease, background .15s ease;
  }

  .detail-panel .gallery-thumb-btn:hover::after,
  .detail-panel .gallery-thumb-btn:focus-visible::after{
    opacity:1;
    background:rgba(28,27,25,.85);
  }
}

@media(max-width:1080px){
  .gallery-pullout{display:none}
}

/* ---------- BLOG LIKE / COMMENT BUTTONS ----------
   sit under the post's date/tag meta-line, top of the detail pane.
   styled to match .blog-tag-chip. */
.blog-engagement{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid #d7dee2;
}

.like-btn,
.comment-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid #b8c3c9;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#6b7c86;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-family:Verdana,Arial,sans-serif;
  padding:4px 10px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.like-btn:hover,
.comment-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#fff,#e3eaee);
}

.like-btn.liked{
  color:#35454e;
  background:linear-gradient(180deg,#d9e2e6,#f8fafb);
  box-shadow:0 0 6px rgba(255,255,255,.9) inset;
  cursor:default;
}

/* bigger + black, not a red accent, matches the rest of the HUD ink */
.like-btn .heart{
  font-size:13px;
  line-height:1;
  color:#000;
}

[data-theme="dark"] .blog-engagement{ border-bottom-color:#3a4147; }

[data-theme="dark"] .like-btn,
[data-theme="dark"] .comment-btn{
  border-color:#3a4147;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#9aa7ad;
}

[data-theme="dark"] .like-btn:hover,
[data-theme="dark"] .comment-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#2c333a,#181c1f);
}

[data-theme="dark"] .like-btn.liked{
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#eef2f3;
}

/* black is invisible on a dark panel, invert to near-white for contrast */
[data-theme="dark"] .like-btn .heart{ color:#eef2f3; }

/* ---------- BLOG COMMENTS PULL-OUT ----------
   bordered card that pops in centered over the viewport, works at every
   breakpoint. reuses .chat-list/.chat-form/.face-toggle-btn/.face-chip
   so the comment form is pixel-identical to the guestbook. */
.comments-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,14,16,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:940;
}

.comments-backdrop.active{
  opacity:1;
  pointer-events:auto;
}

.comments-pullout{
  position:fixed;
  inset:0;
  z-index:950;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  visibility:hidden;
  pointer-events:none;
}

.comments-pullout.active{
  visibility:visible;
  pointer-events:auto;
}

.comments-pullout.opening{
  animation:commentsInsert .46s cubic-bezier(.18,.78,.22,1) both;
}

.comments-pullout.closing{
  pointer-events:none;
  animation:commentsEject .32s cubic-bezier(.55,.02,.4,.98) both;
}

/* scale+fade with a slight tilt, no side-wipe since it's not edge-anchored */
@keyframes commentsInsert{
  0%{opacity:0;transform:scale(.93) rotate(-1deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}

@keyframes commentsEject{
  0%{opacity:1;transform:scale(1) rotate(0deg)}
  100%{opacity:0;transform:scale(.93) rotate(1deg)}
}

@media(prefers-reduced-motion: reduce){
  .comments-pullout,
  .comments-pullout.opening,
  .comments-pullout.closing{
    animation:none !important;
    transition:opacity .12s linear !important;
    transform:none !important;
  }

  .comments-pullout.active{opacity:1 !important}
}

/* reuses the music player's Win98/Winamp window chrome, matching the
   gallery pullout treatment */
.comments-frame{
  position:relative;
  width:min(92vw, 480px);
  max-height:82vh;
  display:flex;
  flex-direction:column;
  border:1px solid #7c8087;
  border-radius:6px;
  background:linear-gradient(180deg,#d7dade,#b9bec4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 20px 50px -12px rgba(10,14,16,.45);
  overflow:hidden;
}

[data-theme="dark"] .comments-frame{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
}

.comments-clip{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,.94);
}

[data-theme="dark"] .comments-clip{
  background:rgba(20,24,27,.92);
}

/* dynamic subtitle line (post/video title), its own row under the
   titlebar. :empty hides it before JS fills it in. */
.comments-subhead{
  flex:0 0 auto;
  padding:9px 10px 0;
  font-size:10px;
  font-weight:bold;
  color:#43545e;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comments-subhead:empty{ display:none; }

[data-theme="dark"] .comments-subhead{ color:#d3dbde; }

/* video-of-the-week pull-out, reuses the comments-* frame/backdrop
   widened for a 16:9 embed */
.video-pullout-frame{
  width:min(92vw, 620px);
}

/* standalone login popout, same comments-* frame/backdrop, narrowed
   for an auth-only form */
.login-pullout-frame{
  width:min(90vw, 300px);
}

.login-pullout-form{
  margin:14px;
}

.login-pullout-form .chat-auth-tabs{
  margin-bottom:10px;
}

.video-embed-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-embed-frame > div{
  width:100%;
  height:100%;
}

/* shown in place of the iframe when embedding is disabled, same pill
   styling as the blog link cards */
.video-fallback-link{
  margin:0;
}

.video-embed-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video-pullout-note{
  padding:10px 14px 12px;
  font-size:9px;
  line-height:1.45;
  color:#5d6d76;
}

[data-theme="dark"] .video-pullout-note{ color:#9aa7ad; }

/* .chat-list supplies border/background/padding, this adds flex sizing */
.comments-list{
  flex:1 1 auto;
  min-height:90px;
  margin:10px 10px 0;
}

.comments-empty{
  color:#8a9ca5;
  font-size:10px;
}

[data-theme="dark"] .comments-empty{ color:#6c7880; }

/* ---------- comment list rows: avatar left, name + date, message below ---------- */
.comment-item{
  display:flex;
  gap:9px;
  padding:9px 0;
  border-bottom:1px solid #c8d2d6;
}

.comment-item:last-child{ border-bottom:none; }

.comment-avatar{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #99a7af;
  background:linear-gradient(180deg,#eef3f5,#d2dbe0);
  color:#43545e;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:bold;
  text-transform:uppercase;
}

.comment-item-body{
  flex:1 1 auto;
  min-width:0;
}

.comment-item-meta{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
}

.comment-item-name{
  font-size:9px;
  font-weight:bold;
  text-transform:uppercase;
  color:#43545e;
}

.comment-item-date{
  font-size:8px;
  color:#8a9ca5;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.comment-item-message{
  font-size:10px;
  line-height:1.4;
  color:#43545e;
  margin-top:2px;
  word-break:break-word;
}

[data-theme="dark"] .comment-item{ border-bottom-color:#2c3237; }

[data-theme="dark"] .comment-avatar{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#d3dbde;
}

[data-theme="dark"] .comment-item-name{ color:#d3dbde; }
[data-theme="dark"] .comment-item-date{ color:#6c7880; }
[data-theme="dark"] .comment-item-message{ color:#c3ced3; }

/* .chat-form supplies the styling, this adds flex sizing like
   .comments-list above */
.comments-form{
  flex:0 0 auto;
  margin:8px 10px 10px;
}

@media(max-width:520px){
  .comments-frame{ width:96vw; max-height:88vh; }
}

@media(max-width:720px){
  html,body{overflow:auto}
  .flash-wrap{
    margin-left:0;
    transform-origin:top left;
    transform:scale(.8);
    height:820px;
  }
  #flareCanvas{display:none}
  #cursorTrail{display:none}
}

/* ================= DARK MODE =================
   structural surfaces get a dark gunmetal palette. chrome sphere
   gradients are left untouched, they read fine on a dark panel. */

[data-theme="dark"]{
  --dot-idle:#3a4147;
  --sweep-highlight:rgba(255,255,255,.16);
}

[data-theme="dark"] body{
  background:#14171a;
  color:#9aa7ad;
}

[data-theme="dark"] body::before{
  opacity:.3;
}

[data-theme="dark"] body::after{
  opacity:.55;
  filter:brightness(.5) saturate(.85);
}

[data-theme="dark"] .nav-tower{
  background:linear-gradient(90deg,#20262b 0%,#181c1f 56%,#0d1012 100%);
  border-left-color:rgba(255,255,255,.08);
  border-right-color:#05070a;
  box-shadow:
    inset -9px 0 18px rgba(0,0,0,.55),
    5px 0 12px rgba(0,0,0,.45);
}

[data-theme="dark"] .nav-tower::before{
  background:rgba(255,255,255,.1);
  box-shadow:1px 0 #05070a;
}

[data-theme="dark"] .nav-tower::after{
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.45));
}

[data-theme="dark"] .nav-btn{
  color:#8b98a0;
}

[data-theme="dark"] .nav-btn span{
  color:#94a1a8;
  text-shadow:0 1px rgba(0,0,0,.6);
}

[data-theme="dark"] .nav-btn:hover span{color:var(--accent)}

[data-theme="dark"] .nav-btn.active span{
  color:var(--accent);
  text-shadow:0 0 6px var(--accent-soft);
}

[data-theme="dark"] .nav-port{
  border-top-color:rgba(255,255,255,.14);
  border-bottom-color:rgba(0,0,0,.5);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(0,0,0,.35));
}

[data-theme="dark"] .nav-port::after{
  border-color:#3a4147;
  background:#1b2024;
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);
}

[data-theme="dark"] .tiny-side-label{
  color:#8b98a0;
}

[data-theme="dark"] .tiny-side-bar{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}

[data-theme="dark"] .tiny-side-dot{
  border-color:#3a4147;
  background:linear-gradient(180deg,#2b3136,#14171a);
}

[data-theme="dark"] .tiny-side-meter{
  border-color:#3a4147;
  background:linear-gradient(180deg,#3a4147 0 32%,#181c1f 32% 100%);
}

[data-theme="dark"] .app-frame{
  background:linear-gradient(180deg,#1c2024 0,#15181b 50%,#0c0e10 100%);
  border-left-color:#3a4147;
  border-right-color:#05070a;
  box-shadow:
    7px 0 18px rgba(0,0,0,.5),
    inset 1px 0 rgba(255,255,255,.06);
}

[data-theme="dark"] .app-frame::before{
  background:linear-gradient(90deg,#0e1113,#22272b 38%,rgba(255,255,255,.14) 55%,rgba(60,68,74,.5));
  box-shadow:3px 0 8px rgba(0,0,0,.5);
}

[data-theme="dark"] .top-cap{
  border-left-color:#3a4147;
  border-right-color:#3a4147;
  border-bottom-color:#05070a;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#22272b 0,#181c1f 52%,#0c0e10 100%);
  box-shadow:inset 0 1px 7px rgba(255,255,255,.08);
}

/* .logo-mark needs no dark-mode override, it uses var(--accent) already */

[data-theme="dark"] .site-login-status{
  color:#8b98a0;
}

[data-theme="dark"] .site-login-account b{
  color:#c3ced3;
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .neocities-follow-btn{
  border-color:#454c52;
  background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .neocities-follow-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .visit-counter{
  color:#6c7880;
}

[data-theme="dark"] .hud-node-tag{
  color:#5e6a70;
}

[data-theme="dark"] .detail-text{
  color:#8b98a0;
}

[data-theme="dark"] .detail-text h1,
[data-theme="dark"] .detail-text h2,
[data-theme="dark"] .detail-text h3,
[data-theme="dark"] .detail-text strong,
[data-theme="dark"] .detail-text b{
  color:#c3ced3;
}

[data-theme="dark"] .machine{
  border-left-color:#2c3237;
  border-right-color:#2c3237;
  background:rgba(15,18,20,.75);
}

[data-theme="dark"] .machine::before{
  mix-blend-mode:overlay;
  opacity:.06;
}

[data-theme="dark"] .hero-screen{
  border-color:#454c52;
  background:rgba(10,12,14,.7);
  box-shadow:inset 0 0 24px rgba(0,0,0,.55);
}

[data-theme="dark"] .hero-screen::before{
  background:
    linear-gradient(128deg,transparent 0 43%,rgba(255,255,255,.12) 44%,transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 5px);
}

[data-theme="dark"] .hero-title{
  color:#c7d0d4;
}

[data-theme="dark"] .hero-sub{
  color:#8b98a0;
}

[data-theme="dark"] .hero-module-tag{
  color:#7c8890;
}

[data-theme="dark"] .detail-text a{
  color:#d7dee1;
  border-bottom-color:rgba(215,222,225,.45);
}

[data-theme="dark"] .detail-text a:hover{
  color:#fff;
  border-bottom-color:#fff;
}

[data-theme="dark"] .box,
[data-theme="dark"] .info-panel{
  border-color:#454c52;
  background:rgba(20,24,27,.82);
  box-shadow:inset 0 0 24px rgba(0,0,0,.4);
}

[data-theme="dark"] .info-panel::after,
[data-theme="dark"] .box::after{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px);
}

[data-theme="dark"] .box-head,
[data-theme="dark"] .info-head{
  border-bottom-color:#3a4147;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#262b2f,#181c1f);
  color:#9aa7ad;
}

[data-theme="dark"] .box-body{
  border-color:#3a4147;
  background:rgba(10,12,14,.68);
}

[data-theme="dark"] .info-body{
  color:#c3ced3;
}

[data-theme="dark"] .news-item b{
  color:#dbe3e6;
}

[data-theme="dark"] .news-item span{
  color:#8b98a0;
}

[data-theme="dark"] .news-item .news-date{
  color:#5f6a70;
}

[data-theme="dark"] .news-item-link:hover,
[data-theme="dark"] .news-item-link:focus-visible{
  background:rgba(219,227,230,.08);
}

[data-theme="dark"] .news-item-link b{
  text-decoration-color:rgba(219,227,230,.35);
}

[data-theme="dark"] .module-tile,
[data-theme="dark"] .feature-card{
  border-color:#3a4147;
  background:rgba(20,24,27,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

[data-theme="dark"] .module-tile:hover{
  background:rgba(30,35,39,.9);
  box-shadow:
    0 0 8px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.1);
}

[data-theme="dark"] .module-thumb,
[data-theme="dark"] .feature-img{
  background:linear-gradient(135deg,#20262b,#0f1214 58%,#181c1f);
  border-color:#3a4147;
}

[data-theme="dark"] .module-label{
  color:#6c7880;
  border-bottom-color:#3a4147;
}

[data-theme="dark"] .module-thumb-code{
  color:#7c8890;
}

[data-theme="dark"] .module-title,
[data-theme="dark"] .feature-title{
  color:#d3dbde;
}

[data-theme="dark"] .module-copy,
[data-theme="dark"] .feature-text{
  color:#9aa7ad;
}

[data-theme="dark"] .tabs-strip{
  border-bottom-color:#3a4147;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#20262b,#14171a);
}

[data-theme="dark"] .tabs-label{
  color:#8b98a0;
}

[data-theme="dark"] .tab{
  border-color:#3a4147;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#9aa7ad;
}

[data-theme="dark"] .tab:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#2c333a,#181c1f);
}

[data-theme="dark"] .tab.active{
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#eef2f3;
}

[data-theme="dark"] .list-panel,
[data-theme="dark"] .detail-panel{
  border-color:#3a4147;
  background:rgba(15,18,20,.65);
}

[data-theme="dark"] .list-row{
  border-bottom-color:#2c3237;
  background:linear-gradient(180deg,#20262b,#181c1f);
  color:#9aa7ad;
}

[data-theme="dark"] .list-row.active{
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#eef2f3;
}

[data-theme="dark"] .list-row:hover:not(.active){
  background:linear-gradient(180deg,#262b2f,#1c2226);
  color:#c3ced3;
}

[data-theme="dark"] .detail-title{
  color:#d3dbde;
}

[data-theme="dark"] .detail-text{
  color:#9aa7ad;
}

[data-theme="dark"] .detail-photo-box{
  border-bottom-color:#3a4147;
}

[data-theme="dark"] .games-folder-title{
  color:#d3dbde;
}

[data-theme="dark"] .game-card{
  border-color:#3a4147;
  background:linear-gradient(180deg,#20262b,#181c1f);
}

[data-theme="dark"] .game-thumb{
  background:linear-gradient(135deg,#20262b,#0f1214 60%,#181c1f);
  border-color:#3a4147;
  color:#8b98a0;
}

[data-theme="dark"] .game-name{
  color:#d3dbde;
}

[data-theme="dark"] .game-status{
  border-color:#454c52;
  background:#20262b;
  color:#8b98a0;
}

[data-theme="dark"] .game-status.fav{
  color:#eef2f3;
  border-color:rgba(238,242,243,.4);
}

[data-theme="dark"] .game-note{
  color:#9aa7ad;
}

[data-theme="dark"] .game-mini-links{
  border-top-color:#3a4147;
  color:#8b98a0;
}

[data-theme="dark"] .blog-link-card{
  border-color:#3a4147;
  background:linear-gradient(180deg,#20262b,#181c1f);
  color:#9aa7ad !important;
  border-bottom-color:#3a4147 !important;
}

[data-theme="dark"] .blog-link-card b{
  color:#d3dbde;
}

[data-theme="dark"] .blog-link-card:hover{
  background:linear-gradient(180deg,#262b2f,#181c1f);
  border-color:#5c646b !important;
}

[data-theme="dark"] .blog-meta-line{
  color:#8b98a0;
}

[data-theme="dark"] .blog-tag-list{
  border-top-color:#3a4147;
}

[data-theme="dark"] .blog-tag-chip{
  border-color:#3a4147;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#9aa7ad;
}

[data-theme="dark"] .blog-tag-chip:hover,
[data-theme="dark"] .blog-tag-chip:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#2c333a,#181c1f);
}

[data-theme="dark"] .blog-tag-chip.active{
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#eef2f3;
}

[data-theme="dark"] .chat-list,
[data-theme="dark"] .chat-form{
  border-color:#3a4147;
  background:rgba(15,18,20,.68);
}

[data-theme="dark"] .chat-card{
  border-bottom-color:#2c3237;
}

[data-theme="dark"] .chat-card b{
  color:#d3dbde;
}

[data-theme="dark"] .chat-form input,
[data-theme="dark"] .chat-form textarea{
  border-color:#3a4147;
  background:#101315;
  color:#d3dbde;
}

[data-theme="dark"] .chat-form button{
  border-color:#454c52;
  background:#20262b;
  color:#c3ced3;
}

[data-theme="dark"] .chat-form button:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:linear-gradient(180deg,#31383d,#20262b);
}

[data-theme="dark"] .members-panel{
  border-color:#3a4147;
  background:rgba(15,18,20,.68);
}

[data-theme="dark"] .members-head{
  border-bottom-color:#2c3237;
  color:#6c7880;
}

[data-theme="dark"] .member-row{ color:#d3dbde; }
[data-theme="dark"] .member-dot{ background:#454c52; }
[data-theme="dark"] .member-empty{ color:#6c7880; }

[data-theme="dark"] .chat-form .chat-auth-tab{
  border-color:#454c52;
  background:#20262b;
  color:#c3ced3;
}

[data-theme="dark"] .chat-form .chat-auth-tab.active{
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#eef2f3;
}

[data-theme="dark"] .chat-auth-copy{ color:#9aa7ad; }
[data-theme="dark"] .chat-auth-error{ color:#d17a7a; }
[data-theme="dark"] .chat-logged-in{
  color:#d3dbde;
  border-bottom-color:#2c3237;
}

[data-theme="dark"] .chat-guest-head{
  color:#d3dbde;
  border-bottom-color:#2c3237;
}

[data-theme="dark"] .chat-inline-link{
  color:#4fc3d9;
}

[data-theme="dark"] .site-button{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3 !important;
}

[data-theme="dark"] .site-button:hover{
  background:linear-gradient(180deg,#31383d,#20262b);
  border-color:var(--accent);
}

[data-theme="dark"] .loading-shell::after{
  background:linear-gradient(90deg,#2c3237,#3a4147,#2c3237);
}

[data-theme="dark"] .loading-shell .ghost-line{
  background:#20262b;
  border-top-color:#2c3237;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background:#3a4147;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background:#4c545b;
}

[data-theme="dark"] .music-toggle{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .music-toggle:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ============================================================
   retro media player — floating window for the music_tracks playlist.
   Windows-98/Winamp-skin pastiche, not the site's usual chrome. toggle
   open/close only, anchored above .bottom-controls. */
.music-window{
  position:fixed;
  left:700px;
  bottom:calc(5vh + 150px);
  z-index:9998;
  width:372px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.97);
  transform-origin:bottom left;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.music-window.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease;
}

@media(max-width:1080px){
  .music-window{display:none !important;}
}

/* ============================================================
   floating chat popout — restyle of the guestbook chatroom. reuses
   .mw-frame/.mw-titlebar/.mw-tbtn chrome but keeps the site's own
   guestbook colors, not the music player's Winamp palette. draggable
   via the titlebar, and the open/close transition is a bouncy scale-up
   pop instead of the music player's slide-up-and-settle. */
.chat-window{
  position:fixed;
  left:1090px;
  bottom:calc(5vh + 40px);
  z-index:9998;
  width:560px;
  height:460px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.15);
  transform-origin:bottom left;
  transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .3s;
}

.chat-window.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
  transition:opacity .2s ease, transform .34s cubic-bezier(.34,1.56,.64,1);
}

@media(max-width:1400px){
  .chat-window{ left:auto; right:18px; }
}

@media(max-width:1080px){
  .chat-window{display:none !important;}
}

/* rounder than the music player's 6px, reads more like a chat bubble.
   scoped to this window only. */
.chat-window .mw-frame{
  border-radius:18px;
}

/* draggable via the titlebar, close button keeps its own pointer cursor,
   touch-action:none so pointermove isn't fought by touch-scroll */
.chat-window .mw-titlebar{
  cursor:move;
  touch-action:none;
  user-select:none;
}

.chat-window .mw-titlebar .mw-tbtn{
  cursor:pointer;
}

.cw-frame{
  display:flex;
  flex-direction:column;
  height:100%;
}

.cw-channel-tag{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#8a9ca5;
  white-space:nowrap;
}

.cw-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 150px;
  gap:7px;
  padding:7px;
}

.cw-main{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:7px;
}

.cw-list{
  flex:1 1 auto;
  min-height:0;
}

.cw-composer{
  flex:0 0 auto;
  max-height:230px;
}

.cw-members{
  overflow:auto;
}

/* ============================================================
   face picker popout — "add a face" kaomoji grid, own small floating
   window instead of an inline dropdown. anchored just left of chatWindow.
   .fw-grid caps its height and scrolls. */
.face-window{
  position:fixed;
  left:912px;
  bottom:calc(5vh + 40px);
  z-index:9999;
  width:168px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.97);
  transform-origin:bottom left;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.face-window.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease;
}

.fw-frame{
  display:flex;
  flex-direction:column;
}

/* smaller titlebar than the other popouts, this is a small utility picker */
.face-window .mw-titlebar{
  height:20px;
  padding:0 4px 0 6px;
  gap:4px;
}

.face-window .mw-logo-mark{
  width:12px;
  height:8px;
}

.face-window .mw-title-text{
  font-size:10px;
}

.face-window .mw-tbtn{
  width:15px;
  height:13px;
  font-size:9px;
}

.fw-grid{
  margin:5px;
  max-height:130px;
  overflow-y:auto;
}

/* denser grid + smaller chips, scoped to .face-window only */
.face-window .faces-grid{
  grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
  gap:3px;
  margin-bottom:0;
}

.face-window .face-chip{
  padding:3px 2px;
  gap:1px;
}

.face-window .face-glyph{
  font-size:10px;
}

.face-window .face-label{
  font-size:5.5px;
}

@media(max-width:1400px){
  .face-window{ left:auto; right:588px; }
}

@media(max-width:1080px){
  .face-window{display:none !important;}
}

.cw-counter{
  font-size:8px;
  text-align:right;
  color:#8a9ca5;
  margin:-4px 0 7px;
}

[data-theme="dark"] .cw-channel-tag,
[data-theme="dark"] .cw-counter{
  color:#6c7880;
}

.mw-frame{
  border:1px solid #7c8087;
  border-radius:6px;
  background:linear-gradient(180deg,#d7dade,#b9bec4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 26px rgba(20,26,32,.32);
  overflow:hidden;
  font-family:Verdana,Arial,sans-serif;
}

.mw-titlebar{
  display:flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:0 6px 0 10px;
  background:
    repeating-linear-gradient(180deg,rgba(120,130,140,.35) 0px,rgba(120,130,140,.35) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#f3f5f6,#dfe3e6);
  border-bottom:1px solid #9aa0a6;
}

/* mini version of the site's .logo-mark bracket, scaled for the titlebar */
.mw-logo-mark{
  position:relative;
  flex:0 0 auto;
  width:16px;
  height:10px;
}

.mw-logo-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:15px;
  height:5px;
  border-top:1.5px solid #4a55c9;
  border-left:6px solid #4a55c9;
  transform:skewX(-25deg);
}

.mw-title-text{
  flex:1 1 auto;
  font-family:"Baloo 2",Verdana,Arial,sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.3px;
  color:#4a55c9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mw-title-btns{
  display:flex;
  gap:4px;
}

.mw-tbtn{
  width:20px;
  height:18px;
  border:1px solid #8798a1;
  border-radius:3px;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.mw-tbtn:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.mw-body{
  display:flex;
  gap:10px;
  padding:10px;
}

.mw-cover{
  position:relative;
  flex:0 0 110px;
  width:110px;
  height:110px;
  border:1px solid #8f959c;
  border-radius:3px;
  background:linear-gradient(135deg,#eef1f3,#c4cad0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 2px 6px rgba(40,50,60,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.mw-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mw-cover-fallback{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#7c8790;
  text-align:center;
  line-height:1.4;
}

.mw-right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.mw-nowplaying{
  font-size:11px;
  font-weight:bold;
  color:#3a474e;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px dotted #9aa4aa;
  padding-bottom:5px;
}

.mw-toprow{
  display:flex;
  gap:5px;
}

.mw-btn{
  flex:1 1 auto;
  border:1px solid #8798a1;
  border-radius:3px;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#53656f;
  font-family:Verdana,Arial,sans-serif;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:6px 4px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.mw-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.mw-btn-accent{
  background:linear-gradient(180deg,#a7aef0,#7b83dd);
  border-color:#5b62b8;
  color:#fff;
}

.mw-btn-accent:hover{
  border-color:#3f458f;
  color:#fff;
}

.mw-btn-small{
  flex:0 0 auto;
  padding:3px 6px;
  font-size:9px;
}

.mw-btn-small.active{
  background:linear-gradient(180deg,#8b93e6,#6c74cf);
  border-color:#4d539f;
  color:#fff;
  box-shadow:inset 0 1px 3px rgba(20,24,60,.45);
}

.mw-progress-row{
  display:flex;
  align-items:center;
  gap:5px;
}

.mw-progress-track{
  position:relative;
  flex:1 1 auto;
  height:13px;
  border:1px solid #8f959c;
  border-radius:2px;
  background:#e7eaec;
  box-shadow:inset 0 1px 3px rgba(40,50,60,.3);
  overflow:hidden;
}

.mw-progress-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  width:0%;
  background:linear-gradient(180deg,#a7aef0,#6c74cf);
}

.mw-seek{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.mw-eq{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:13px;
  flex:0 0 auto;
}

.mw-eq span{
  width:3px;
  height:3px;
  background:#6c74cf;
  transform-origin:bottom;
  transition:transform .06s linear;
}

.mw-time-row{
  display:flex;
  justify-content:space-between;
  font-family:"VT323",Verdana,monospace;
  font-size:13px;
  color:#5c6b74;
  letter-spacing:.5px;
}

/* volume row — iTunes/Winamp-style dotted slider. dots are a repeating
   radial-gradient background, range input is fully visible with custom
   ::-webkit/-moz-range-thumb styling. */
.mw-volume-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.mw-vol-btn{
  flex:0 0 auto;
  width:20px;
  height:20px;
  padding:0;
  border-radius:50%;
  border:1px solid #8f97a0;
  background:radial-gradient(circle at 35% 30%, #fdfefe, #cfd7dc 60%, #aab3ba);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 1px 2px rgba(30,38,46,.25);
  color:#4a5860;
  font-size:9px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mw-vol-btn:hover{
  border-color:var(--accent);
}

.mw-volume-track{
  position:relative;
  flex:0 0 auto;
  width:72px;
  height:16px;
  background-image:radial-gradient(circle, var(--accent) 1px, transparent 1.3px);
  background-size:8px 100%;
  background-repeat:repeat-x;
  background-position:1px center;
}

.mw-volume-slider{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:16px;
  margin:0;
  background:transparent;
  cursor:pointer;
}

.mw-volume-slider::-webkit-slider-runnable-track{
  height:16px;
  background:transparent;
}

.mw-volume-slider::-moz-range-track{
  height:16px;
  background:transparent;
  border:none;
}

.mw-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  margin-top:0;
  border-radius:50%;
  border:1px solid #5b62b8;
  background:radial-gradient(circle at 35% 30%, #c7cbf5, var(--accent) 55%, #5b62b8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 1px 2px rgba(30,38,46,.3);
}

.mw-volume-slider::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid #5b62b8;
  background:radial-gradient(circle at 35% 30%, #c7cbf5, var(--accent) 55%, #5b62b8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 1px 2px rgba(30,38,46,.3);
}

.mw-transport{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px 9px;
}

.mw-tbtn2{
  width:28px;
  height:24px;
  border:1px solid #7c8790;
  border-radius:3px;
  background:linear-gradient(180deg,#eef1f3,#c7ccd1);
  color:#3a474e;
  font-size:10px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.mw-tbtn2:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.mw-tbtn2:active,
.mw-tbtn2.active{
  box-shadow:inset 0 2px 4px rgba(30,38,46,.4);
  background:linear-gradient(180deg,#c7ccd1,#eef1f3);
}

.mw-chevron{
  width:18px;
  height:24px;
  border:1px solid #7c8790;
  border-radius:3px;
  background:linear-gradient(180deg,#eef1f3,#c7ccd1);
  color:#3a474e;
  font-size:9px;
  cursor:pointer;
}

.mw-shuffle,
.mw-repeat{
  flex:1 1 auto;
}

.mw-playlist{
  max-height:0;
  overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height .2s ease, border-color .2s ease;
}

.mw-playlist.open{
  max-height:190px;
  border-top:1px solid #9aa0a6;
}

.mw-playlist-empty{
  padding:12px 10px;
  font-size:10px;
  color:#7c8790;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mw-playlist-list{
  list-style:none;
  margin:0;
  padding:4px;
  max-height:190px;
  overflow-y:auto;
}

.mw-playlist-list li{
  padding:6px 7px;
  font-size:11px;
  color:#44525a;
  cursor:pointer;
  border-radius:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mw-playlist-list li:hover{
  background:rgba(108,116,207,.14);
}

.mw-playlist-list li.active{
  background:linear-gradient(180deg,#8b93e6,#6c74cf);
  color:#fff;
  font-weight:bold;
}

.mw-footer{
  text-align:center;
  font-size:9px;
  font-style:italic;
  color:#8a9299;
  padding:6px 0 8px;
}

/* gallery pullout window — dark-mode chrome, same recipe as .mw-frame */
[data-theme="dark"] .pullout-frame{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
}

[data-theme="dark"] .pullout-frame img{
  border-color:#454c52;
}

[data-theme="dark"] .pullout-caption{
  color:#9aa7ad;
}

/* dark mode — same darker-chrome recipe used for .music-toggle/.site-button */
[data-theme="dark"] .mw-frame{
  border-color:#454c52;
  background:linear-gradient(180deg,#262b2f,#181c1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.5);
}

[data-theme="dark"] .mw-titlebar{
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#2b3136,#1c2023);
  border-bottom-color:#3a4147;
}

[data-theme="dark"] .mw-title-text{ color:#8b93e6; }
[data-theme="dark"] .mw-logo-mark::before{ border-top-color:#8b93e6; border-left-color:#8b93e6; }

[data-theme="dark"] .mw-tbtn,
[data-theme="dark"] .mw-btn,
[data-theme="dark"] .mw-tbtn2,
[data-theme="dark"] .mw-chevron{
  border-color:#454c52;
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#c3ced3;
}

[data-theme="dark"] .mw-tbtn:hover,
[data-theme="dark"] .mw-btn:hover,
[data-theme="dark"] .mw-tbtn2:hover{
  border-color:var(--accent);
  color:var(--accent);
}

[data-theme="dark"] .mw-btn-accent{
  background:linear-gradient(180deg,#6b73c9,#4a4f9e);
  border-color:#383c7d;
  color:#fff;
}

[data-theme="dark"] .mw-nowplaying{ color:#d3dbde; border-bottom-color:#3a4147; }
[data-theme="dark"] .mw-cover{ background:linear-gradient(135deg,#31383d,#181c1f); border-color:#454c52; }
[data-theme="dark"] .mw-cover-fallback{ color:#7c878e; }
[data-theme="dark"] .mw-progress-track{ background:#14171a; border-color:#454c52; }
[data-theme="dark"] .mw-time-row{ color:#9aa7ad; }
[data-theme="dark"] .mw-playlist.open{ border-top-color:#3a4147; }

[data-theme="dark"] .mw-vol-btn{
  border-color:#6c74cf;
  background:radial-gradient(circle at 35% 30%, #4a5157, #262b2f 60%, #181c1f);
  color:#c3ced3;
}

[data-theme="dark"] .mw-vol-btn:hover{ border-color:var(--accent); }

/* light-mode gray dots are near-invisible on dark chrome, swap in the
   purple accent instead */
[data-theme="dark"] .mw-volume-track{
  background-image:radial-gradient(circle, #8b93e6 1px, transparent 1.3px);
}

[data-theme="dark"] .mw-volume-slider::-webkit-slider-thumb{
  border-color:#8b93e6;
  background:radial-gradient(circle at 35% 30%, #b9bdf5, #6c74cf 55%, #4d539f);
}

[data-theme="dark"] .mw-volume-slider::-moz-range-thumb{
  border-color:#8b93e6;
  background:radial-gradient(circle at 35% 30%, #b9bdf5, #6c74cf 55%, #4d539f);
}
[data-theme="dark"] .mw-playlist-empty{ color:#7c878e; }
[data-theme="dark"] .mw-playlist-list li{ color:#c3ced3; }
[data-theme="dark"] .mw-playlist-list li:hover{ background:rgba(108,116,207,.22); }
[data-theme="dark"] .mw-footer{ color:#5c646a; }