/* ==========================================================================
   EDWIN'S HOME PAGE - stylesheet
   Base: page shell, pixelated cursors, sparkle trail
   ========================================================================== */

*{box-sizing:border-box}
html{height:100%;overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  min-height:100%;
  background:#101010;
  font-family:"Times New Roman",Times,serif;
  cursor:url("cursor_arrow.png") 0 0, auto;
}
a,button,summary,label,input[type=range]{cursor:url("cursor_hand.png") 7 0, pointer;}
input[type=text],input:not([type]),textarea{cursor:url("cursor_text.png") 7 15, text;}
.wait-cursor,.wait-cursor *{cursor:url("cursor_wait.png") 11 15, wait !important;}

img.pix,.pix{image-rendering:pixelated;image-rendering:-moz-crisp-edges;}

:focus-visible{
  outline:3px solid #ffef00;
  outline-offset:2px;
  box-shadow:0 0 0 5px #000;
}
#page a:focus-visible{background:#ffef00;color:#000}

/* ------------------------------ cursor trail ----------------------------- */
#trail{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
#trail img{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;image-rendering:pixelated}

#crt{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:0;transition:opacity .3s;
  background:repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
}
#crt.on{opacity:1}

/* ==========================================================================
   THE WEB PAGE
   Every theme is a different set of these variables.
   ========================================================================== */

#page{
  --bg-color:#ffffff;
  --bg-img:none;
  --bg-size:auto;
  --fg:#000000;
  --link:#0000ee;
  --visited:#551a8b;
  --hover:#ff0000;
  --accent:#ff00ff;
  --accent2:#00ffff;
  --font-body:"Times New Roman",Times,serif;
  --font-head:Georgia,"Times New Roman",serif;
  --body-size:15px;
  --line:1.6;
  --letter:normal;
  --panel-bg:rgba(255,255,255,.9);
  --panel-fg:inherit;
  --panel-border:3px double #4169e1;
  --panel-shadow:none;
  --panel-pad:10px 13px;
  --head-bg:#4169e1;
  --head-fg:#ffffff;
  --head-font:var(--font-head);
  --head-transform:uppercase;
  --head-letter:1px;
  --head-shadow:1px 1px 0 rgba(0,0,0,.45);
  --head-border:none;
  --title-fill:linear-gradient(#3b6ef5,#8a2be2 60%,#ff2fd0);
  --title-stroke:2px #ffffff;
  --title-shadow:drop-shadow(3px 3px 0 rgba(0,0,0,.5));
  --title-size:clamp(26px,5.6vw,54px);
  --title-font:Impact,"Arial Black",Haettenschweiler,sans-serif;
  --title-spacing:1px;
  --quote-fg:#8a2be2;
  --input-bg:#ffffff;
  --input-fg:#000000;
  --input-border:2px inset #808080;
  --btn-face:#c0c0c0;
  --btn-fg:#000000;
  --rule-display:block;
  --hr-color:#4169e1;
  --bg-blend:normal;
  --plate:var(--panel-bg);

  min-height:100%;
  padding:0 0 26px;
  background-color:var(--bg-color);
  background-image:var(--bg-img);
  background-size:var(--bg-size);
  background-blend-mode:var(--bg-blend);
  background-attachment:scroll;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--body-size);
  line-height:var(--line);
  letter-spacing:var(--letter);
  image-rendering:pixelated;
}
#page a{color:var(--link);text-decoration:underline}
#page a:visited{color:var(--visited)}
#page a:hover{color:var(--hover);background:var(--accent2)}
#page p{margin:.55em 0}
#page b,#page strong{font-weight:bold}
.center{text-align:center}
.tiny{font-size:11.5px;line-height:1.45}
.float-left{float:left;margin:0 8px 4px 0}

/* ------------------------------ marquee ---------------------------------- */
.top-marquee{
  overflow:hidden;
  white-space:nowrap;
  background:var(--head-bg);
  color:var(--head-fg);
  border-bottom:2px solid var(--fg);
  padding:3px 0;
  font-weight:bold;
  font-size:13px;
  letter-spacing:1px;
}
.mq-track{display:inline-block;animation:marquee 22s linear infinite;will-change:transform}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------ titles ----------------------------------- */
.ucbanner{max-width:min(96%,372px);margin:12px auto 6px;display:block}
.wordart{
  margin:6px auto 4px;
  font-family:var(--title-font);
  font-size:var(--title-size);
  line-height:1.05;
  letter-spacing:var(--title-spacing);
  text-transform:uppercase;
  background:var(--title-fill);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:var(--title-stroke);
  filter:var(--title-shadow);
  animation:huepan 8s linear infinite;
  padding:0 8px;
  text-wrap:balance;
}
@keyframes huepan{to{background-position:200% 0}}
.subtitle{font-size:14px;font-weight:bold;color:var(--accent);margin:2px auto 8px}

/* These three sit straight on the background tile. Without a surface behind
   them no single text colour survives 99 different backgrounds. */
.wordart-sub,.subtitle,.theme-readout,.ticker{
  background:var(--plate);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.wordart-sub,.subtitle,.theme-readout{
  display:table;
  margin-left:auto;
  margin-right:auto;
  max-width:min(96%,760px);
  padding:3px 14px;
}
.wordart-sub{
  font-family:var(--font-head);
  font-size:clamp(12px,2.1vw,17px);
  font-weight:bold;
  letter-spacing:2px;
  color:var(--fg);
  margin:-2px auto 4px;
  text-wrap:balance;
}
.wxmeta{opacity:.75;margin-top:3px;font-size:10.5px;line-height:1.3}

.rainbow-text{
  background:linear-gradient(90deg,#f00,#f80,#ff0,#0c0,#08f,#60f,#f0f,#f00);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:bold;
  animation:huepan 3s linear infinite;
}
.blink{animation:blink 1s steps(1,end) infinite}
.blink-slow{animation:blink 1.8s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.divider{
  display:var(--rule-display);
  width:min(94%,560px);
  margin:11px auto;
  background-repeat:repeat-x;
  background-position:center;
  image-rendering:pixelated;
}
/* Tiled at exactly 2x native so the pixel art stays crisp at any page width. */
.divider-rainbow{height:14px;background-image:url("divider_rainbow.gif");background-size:96px 14px}
.divider-fire{height:24px;background-image:url("divider_fire.gif");background-size:128px 24px}

/* ------------------------------ theme bar -------------------------------- */
.themebar{margin:10px auto 8px}
.big-button{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;
  font:bold 15px var(--font-head);
  letter-spacing:1px;
  color:var(--btn-fg);
  background:var(--btn-face);
  border:3px outset #fff;
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
  text-transform:uppercase;
}
.big-button:hover{filter:brightness(1.12) saturate(1.3)}
.big-button:active{border-style:inset;transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.mini-button{
  padding:3px 10px;
  font:bold 12px var(--font-body);
  color:var(--btn-fg);background:var(--btn-face);
  border:2px outset #fff;
}
.mini-button:active{border-style:inset}
.theme-readout{margin:7px auto 0;font-size:12px;font-weight:bold;letter-spacing:.5px}
#themeName{color:var(--accent)}

/* ------------------------------ layout ----------------------------------- */
table.layout{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:4px}
.col-side{width:196px;vertical-align:top;padding:0 8px 0 12px}
.col-main{vertical-align:top;padding:0 14px 0 6px}

.panel{
  margin:0 0 14px;
  background:var(--panel-bg);
  color:var(--panel-fg);
  border:var(--panel-border);
  box-shadow:var(--panel-shadow);
}
h2.panel-head{margin:0;font-size:15px}
.panel-head{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:5px 10px;
  background:var(--head-bg);
  color:var(--head-fg);
  font-family:var(--head-font);
  font-weight:bold;
  font-size:15px;
  text-transform:var(--head-transform);
  letter-spacing:var(--head-letter);
  text-shadow:var(--head-shadow);
  border-bottom:var(--head-border);
}
.panel-body{padding:var(--panel-pad)}
.panel-body::after{content:"";display:block;clear:both}
.nav-panel .panel-head,.side-panel .panel-head{font-size:13px;justify-content:center}

.navlist,.fancylist{list-style:none;margin:8px 0;padding:0 8px}
.navlist li{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:14px}
.navlist a{font-weight:bold}
.fancylist li{display:flex;align-items:flex-start;gap:7px;padding:4px 0}
.fancylist li > img:first-child{flex:0 0 auto;margin-top:.32em}
.side-panel .panel-body,.side-panel center{padding:8px}
.btn31{margin:2px 0;width:88px;height:31px}

.bigquote{
  margin:10px auto;
  padding:8px 14px;
  font-size:clamp(19px,3.2vw,27px);
  font-style:italic;
  font-family:var(--font-head);
  color:var(--quote-fg);
  max-width:520px;
}
.attrib{font-size:15px;font-style:normal;font-weight:bold;margin-top:5px;color:var(--fg)}
.spin-globe{margin:4px auto 0;display:block}

.factbox{margin:10px 0;border-collapse:collapse;font-size:13px}
.factbox td{border:1px solid var(--fg);padding:3px 8px}
.fkey{font-weight:bold;background:var(--head-bg);color:var(--head-fg);white-space:nowrap}

.foodpic{display:block;margin:2px auto 0}
.foodline{
  font-size:clamp(16px,2.6vw,22px);
  font-family:var(--font-head);
  font-weight:bold;
  margin:6px 0 2px;
  text-wrap:balance;
}
#fsqCuisine{color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.codypic{display:block;margin:0 auto 2px}
.codyline{font-weight:bold;font-size:13px;margin:6px 0;color:var(--accent);min-height:1.3em}
#petCount{margin-top:5px}

.ad-label{font-size:10px;letter-spacing:2px;opacity:.8;margin-top:8px}
.banner{max-width:100%;width:468px;height:auto;margin:4px auto;display:block;border:2px solid var(--fg)}
#bannerAd{display:block}


/* ------------------------------ guestbook -------------------------------- */
.gbform{margin:8px 0 12px}
.gbrow{display:flex;gap:8px;align-items:flex-start;margin-bottom:7px;flex-wrap:wrap}
.gbrow label{flex:0 0 96px;font-weight:bold;font-size:12px;padding-top:4px;letter-spacing:.5px}
.gbrow input,.gbrow textarea{
  flex:1;min-width:150px;
  padding:4px 6px;
  font:13px var(--font-body);
  background:var(--input-bg);color:var(--input-fg);
  border:var(--input-border);
  resize:vertical;
}
.gbactions{align-items:center;gap:10px}
.gbactions label{flex:0 0 96px}
.gbentries{margin-top:10px}
.gbentry{
  margin:0 0 9px;padding:7px 10px;
  background:var(--panel-bg);
  border:2px ridge var(--accent);
  font-size:13px;
}
.gbentry .gbwho{font-weight:bold;color:var(--accent)}
.gbentry .gbmeta{font-size:11px;opacity:.75}
.gbentry .gbmsg{margin-top:3px;word-wrap:break-word;overflow-wrap:anywhere}
.gbentry .gbnum{float:right;font-size:11px;opacity:.6}
.gbmore{margin:10px auto 2px;display:inline-block}
.gbmore[hidden]{display:none}

/* ------------------------------ footer ----------------------------------- */
.footer{padding:6px 14px 10px;text-align:center}
.counterbox{margin:8px auto}
.odometer{
  display:inline-block;
  padding:4px 8px;margin:3px 0;
  background:#000;color:#39ff6a;
  font:bold 24px "Courier New",monospace;
  letter-spacing:5px;
  border:3px inset #888;
}
.dancerow{display:flex;gap:14px;justify-content:center;align-items:flex-end;margin:10px 0;flex-wrap:wrap}

/* ==========================================================================
   THE TEN THEMES
   ========================================================================== */

/* 1 ---------- SKY BLUE DREAMS ---------- */
#page[data-theme="clouds"]{
  --bg-img:url("bg_clouds.png");
  --bg-size:170px;
  --fg:#00126b;
  --quote-fg:#7b2ff7;
  --accent:#d5008f;
}

/* 2 ---------- BUBBLEGUM PALACE ---------- */
#page[data-theme="sugar"]{
  --bg-color:#ffd9ef;
  --bg-img:url("bg_rainbow.png");
  --bg-size:110px;
  --fg:#b3005e;
  --link:#e0007b;--visited:#8a2be2;--hover:#000;
  --accent:#ff2d95;--accent2:#fff36b;
  --font-body:"Comic Sans MS","Chalkboard SE",Chalkboard,"Segoe UI",sans-serif;
  --font-head:"Comic Sans MS","Chalkboard SE",Chalkboard,"Segoe UI",sans-serif;
  --title-font:"Comic Sans MS","Chalkboard SE",Chalkboard,"Segoe UI",sans-serif;
  --letter:.3px;
  --panel-bg:rgba(255,250,253,.94);
  --panel-border:5px ridge #ff69b4;
  --panel-shadow:4px 4px 0 rgba(255,105,180,.45);
  --head-bg:linear-gradient(90deg,#ff8ecb,#ffc2e6,#ff8ecb);
  --head-fg:#a1005a;
  --head-shadow:1px 1px 0 #fff;
  --title-fill:linear-gradient(90deg,#ff2d95,#ffb400,#ffe74c,#4dd6ff,#b06bff,#ff2d95);
  --title-stroke:2.5px #ffffff;
  --title-shadow:drop-shadow(3px 3px 0 #ff69b4);
  --quote-fg:#e0007b;
  --btn-face:#ffe3f3;
  --hr-color:#ff69b4;
}

/* 3 ---------- DEEP SPACE 9600 ---------- */
#page[data-theme="space"]{
  --bg-color:#05041f;
  --bg-img:url("bg_stars.gif");
  --bg-size:96px;
  --fg:#cfe6ff;
  --link:#4df3ff;--visited:#ff6bf0;--hover:#fff700;
  --accent:#00ffc8;--accent2:#3a2a80;
  --font-body:Verdana,Geneva,"DejaVu Sans",sans-serif;
  --font-head:Verdana,Geneva,sans-serif;
  --body-size:13.5px;
  --panel-bg:rgba(4,8,52,.84);
  --panel-border:2px solid #23e6ff;
  --panel-shadow:0 0 14px rgba(0,220,255,.5),inset 0 0 18px rgba(0,90,255,.35);
  --head-bg:linear-gradient(90deg,#0a1a6b,#26007a);
  --head-fg:#5cffd0;
  --head-letter:3px;
  --head-shadow:0 0 8px #00ffc8;
  --title-fill:linear-gradient(90deg,#4df3ff,#a56bff,#ff6bf0,#4df3ff);
  --title-stroke:2px #04061f;
  --title-shadow:drop-shadow(0 0 10px #4df3ff) drop-shadow(0 0 22px #b46bff);
  --quote-fg:#7cffe0;
  --input-bg:#0b1240;--input-fg:#cfe6ff;--input-border:2px solid #23e6ff;
  --btn-face:#171a5c;--btn-fg:#9ff8ff;
  --plate:rgba(4,8,52,.93);
}
#page[data-theme="space"] .big-button{border-color:#4df3ff;box-shadow:0 0 12px #4df3ff}

/* 4 ---------- THE MAINFRAME ---------- */
#page[data-theme="matrix"]{
  --bg-color:#000700;
  --bg-img:url("bg_matrix.gif");
  --bg-size:120px;
  --fg:#39ff70;
  --link:#b6ffb6;--visited:#1fbf4f;--hover:#ffffff;
  --accent:#00ff41;--accent2:#003b10;
  --font-body:"Courier New",Courier,monospace;
  --font-head:"Courier New",Courier,monospace;
  --title-font:"Courier New",Courier,monospace;
  --body-size:14px;
  --letter:.5px;
  --panel-bg:rgba(0,14,0,.88);
  --panel-border:1px solid #00ff41;
  --panel-shadow:0 0 10px rgba(0,255,65,.35),inset 0 0 26px rgba(0,255,65,.07);
  --head-bg:#002b0c;
  --head-fg:#00ff41;
  --head-letter:4px;
  --head-shadow:0 0 7px #00ff41;
  --head-border:1px dashed #00ff41;
  --title-fill:linear-gradient(#9dff9d,#00ff41 45%,#008f22);
  --title-stroke:0 transparent;
  --title-shadow:drop-shadow(0 0 8px #00ff41) drop-shadow(0 0 20px #00c832);
  --title-spacing:4px;
  --quote-fg:#7dff9e;
  --input-bg:#001400;--input-fg:#39ff70;--input-border:1px solid #00ff41;
  --btn-face:#001d06;--btn-fg:#00ff41;
  --rule-display:none;
  --plate:rgba(0,14,0,.94);
}
#page[data-theme="matrix"] .big-button{border:1px solid #00ff41;box-shadow:0 0 10px #00ff41}
#page[data-theme="matrix"] .panel-head::before{content:"> "}
#page[data-theme="matrix"] .bigquote::before{content:"C:\\> "}

/* 5 ---------- THE LAGOON ---------- */
#page[data-theme="aqua"]{
  --bg-color:#1eb0d6;
  --bg-img:url("bg_aqua.png");
  --bg-size:210px;
  --fg:#00202b;
  --link:#0000cc;--visited:#7a007a;--hover:#cc0000;
  --accent:#004a63;--accent2:#b9ecff;
  --font-body:"Times New Roman",Times,serif;
  --font-head:"Times New Roman",Times,serif;
  --title-font:"Times New Roman",Times,serif;
  --body-size:16px;
  --panel-bg:transparent;
  --panel-border:none;
  --panel-pad:2px 4px 12px;
  --head-bg:transparent;
  --head-fg:#00354a;
  --head-transform:none;
  --head-letter:normal;
  --head-shadow:none;
  --head-border:2px solid #00354a;
  --title-fill:linear-gradient(#001c26,#001c26);
  --title-stroke:0 transparent;
  --title-shadow:none;
  --title-spacing:normal;
  --quote-fg:#00354a;
  --btn-face:#d8f4ff;
  --hr-color:#00354a;
  --plate:rgba(255,255,255,.78);
}
#page[data-theme="aqua"] .panel-head{justify-content:center;font-size:23px;font-weight:normal;padding-bottom:2px}
#page[data-theme="aqua"] .panel-body{text-align:center}
#page[data-theme="aqua"] .fancylist li,#page[data-theme="aqua"] .navlist li{justify-content:center}
#page[data-theme="aqua"] .factbox{margin-left:auto;margin-right:auto}
#page[data-theme="aqua"] .wordart{font-weight:bold}

/* 6 ---------- INFERNO ---------- */
#page[data-theme="inferno"]{
  --bg-color:#120200;
  --bg-img:url("bg_embers.gif");
  --bg-size:88px;
  --fg:#ffc46b;
  --link:#ff8a1f;--visited:#c8442a;--hover:#fff200;
  --accent:#ff3b00;--accent2:#4d0f00;
  --font-body:Arial,Helvetica,sans-serif;
  --font-head:"Arial Black",Impact,sans-serif;
  --title-font:Impact,"Arial Black",sans-serif;
  --panel-bg:rgba(24,3,0,.9);
  --panel-border:3px outset #ff4500;
  --panel-shadow:0 0 18px rgba(255,69,0,.45);
  --head-bg:linear-gradient(#ff7a00,#a81100);
  --head-fg:#fff5cc;
  --head-letter:2px;
  --head-shadow:1px 1px 0 #4d0f00;
  --title-fill:linear-gradient(#fff36b,#ff9500 45%,#e01b00);
  --title-stroke:2.5px #1a0300;
  --title-shadow:drop-shadow(0 0 12px #ff5a00) drop-shadow(2px 3px 0 #000);
  --title-spacing:2px;
  --quote-fg:#ff9d3c;
  --input-bg:#2a0700;--input-fg:#ffc46b;--input-border:2px solid #ff4500;
  --btn-face:#5c1400;--btn-fg:#ffd28a;
}

/* 7 ---------- MIDNIGHT VELVET ---------- */
#page[data-theme="velvet"]{
  --bg-color:#170436;
  --bg-img:url("bg_night.png");
  --bg-size:190px;
  --fg:#f3e3b3;
  --link:#ffd700;--visited:#c9a227;--hover:#fff8dc;
  --accent:#ffcf40;--accent2:#3d1470;
  --font-body:Georgia,"Times New Roman",serif;
  --font-head:Georgia,"Times New Roman",serif;
  --title-font:Georgia,"Times New Roman",serif;
  --body-size:15.5px;
  --panel-bg:rgba(28,7,58,.88);
  --panel-border:4px ridge #b8860b;
  --panel-shadow:0 3px 16px rgba(0,0,0,.6);
  --head-bg:linear-gradient(90deg,#4b0082,#7a2fb5);
  --head-fg:#ffd700;
  --head-transform:none;
  --head-letter:1.5px;
  --head-shadow:1px 1px 2px #1a0033;
  --title-fill:linear-gradient(#fff6cf,#ffd700 40%,#a9760a);
  --title-stroke:2px #2a0550;
  --title-shadow:drop-shadow(2px 3px 0 #12002b);
  --quote-fg:#ffd700;
  --input-bg:#241046;--input-fg:#f3e3b3;--input-border:2px inset #b8860b;
  --btn-face:#3a1170;--btn-fg:#ffd700;
}
#page[data-theme="velvet"] .panel-head{font-style:italic;font-variant:small-caps;font-size:18px}

/* 8 ---------- CONSTRUCTION ZONE ---------- */
#page[data-theme="hazard"]{
  --bg-color:#ffce00;
  --bg-img:url("bg_hazard.png");
  --bg-size:46px;
  --fg:#111111;
  --link:#0033cc;--visited:#6b0080;--hover:#cc0000;
  --accent:#d40000;--accent2:#ffe680;
  --font-body:Arial,Helvetica,sans-serif;
  --font-head:"Arial Black",Impact,sans-serif;
  --title-font:"Arial Black",Impact,sans-serif;
  --body-size:14.5px;
  --panel-bg:#f4f4f4;
  --panel-border:5px solid #111111;
  --panel-shadow:6px 6px 0 rgba(0,0,0,.45);
  --head-bg:#111111;
  --head-fg:#ffce00;
  --head-letter:2px;
  --head-shadow:none;
  --title-fill:linear-gradient(#ffe985,#ffce00 55%,#e0a800);
  --title-stroke:3px #111111;
  --title-shadow:drop-shadow(4px 4px 0 #111);
  --title-spacing:2px;
  --quote-fg:#111111;
  --btn-face:#ffce00;
  --hr-color:#111;
}
#page[data-theme="hazard"] .panel-body{background:#fff}

/* 9 ---------- EMERALD MARBLE ---------- */
#page[data-theme="marble"]{
  --bg-color:#1d3b28;
  --bg-img:url("bg_marble.png");
  --bg-size:200px;
  --fg:#10331f;
  --link:#0b6b3a;--visited:#7a4a12;--hover:#a80000;
  --accent:#996515;--accent2:#e8f5e0;
  --font-body:Georgia,"Times New Roman",serif;
  --font-head:Georgia,"Times New Roman",serif;
  --title-font:Georgia,"Times New Roman",serif;
  --body-size:15.5px;
  --panel-bg:rgba(255,253,242,.93);
  --panel-border:5px double #b8860b;
  --panel-shadow:3px 3px 10px rgba(0,0,0,.4);
  --head-bg:linear-gradient(90deg,#0b4a2b,#146b3d);
  --head-fg:#ffe08a;
  --head-transform:none;
  --head-letter:2px;
  --head-shadow:1px 1px 0 #04240f;
  --title-fill:linear-gradient(#f7e9b0,#b8860b 50%,#0b4a2b);
  --title-stroke:1.5px #fffdf2;
  --title-shadow:drop-shadow(3px 3px 2px rgba(0,0,0,.55));
  --quote-fg:#0b4a2b;
  --btn-face:#e9e0c4;
  --hr-color:#b8860b;
}
#page[data-theme="marble"] .panel-head{font-variant:small-caps;font-size:19px}

/* 10 ---------- HTML 2.0 ---------- */
#page[data-theme="vanilla"]{
  --bg-color:#ffffff;
  --bg-img:none;
  --fg:#000000;
  --link:#0000ee;--visited:#551a8b;--hover:#ee0000;
  --accent:#000080;--accent2:#ffff00;
  --font-body:"Times New Roman",Times,serif;
  --font-head:"Times New Roman",Times,serif;
  --title-font:"Times New Roman",Times,serif;
  --body-size:16px;
  --line:1.45;
  --panel-bg:#ffffff;
  --panel-border:1px solid #000000;
  --panel-shadow:none;
  --panel-pad:8px 10px;
  --head-bg:#c0c0c0;
  --head-fg:#000000;
  --head-transform:none;
  --head-letter:normal;
  --head-shadow:none;
  --head-border:1px solid #000;
  --title-fill:linear-gradient(#000,#000);
  --title-stroke:0 transparent;
  --title-shadow:none;
  --title-spacing:normal;
  --title-size:clamp(24px,4.4vw,38px);
  --quote-fg:#000000;
  --btn-face:#d4d0c8;
  --rule-display:none;
}
#page[data-theme="vanilla"] .wordart{font-weight:bold;animation:none}
#page[data-theme="vanilla"] .top-marquee{background:#c0c0c0;color:#000;border-bottom:1px solid #000}
#page[data-theme="vanilla"] .subtitle{color:#000}
#page[data-theme="vanilla"] .panel{margin-bottom:10px}
#page[data-theme="vanilla"] .blink,#page[data-theme="vanilla"] .blink-slow{animation-duration:1.2s}

/* ------------------------------ responsive -------------------------------- */
@media (max-width:820px){
  .col-side{width:170px;padding-left:8px}
  .col-main{padding-right:8px}
}
@media (max-width:760px){
  /* The sidebar used to sit above everything, so you scrolled past the dog,
     the jukebox and six badges before reaching "Welcome". Flatten the table
     and interleave: nav, then the real content, then the side furniture. */
  table.layout,table.layout tbody{display:block}
  /* Gutter lives on the container, so a child at width:100% plus its own
     side margins can never exceed the viewport. */
  table.layout tr{display:flex;flex-direction:column;padding:0 6px}
  .col-side,.col-main{display:contents}

  .col-main > *{order:2}
  .col-side > *{order:3;max-width:340px;align-self:center;width:100%}
  .col-side > .nav-panel{order:1;max-width:none}

  /* Vertical margins only: the .panel shorthand used to reset the side
     margins that centred the sidebar modules, leaving them flush left. */
  .panel{margin-top:0;margin-bottom:12px}
  .panel-body{padding:9px 11px}

  /* Compact header so the first panel is nearly above the fold. */
  .ucbanner{max-width:min(97%,372px);margin:8px auto 4px}
  .wordart{--title-size:clamp(30px,10vw,44px);padding:0 6px}
  .wordart-sub{letter-spacing:1px;margin:0 0 3px}
  .subtitle{font-size:12px;margin:2px 6px 6px}
  .themebar{margin:7px auto 5px}
  .big-button{padding:6px 13px;font-size:14px}
  .theme-readout{margin-top:5px;font-size:11px;padding:0 8px}
  .ticker{margin:7px auto 3px;font-size:11px;padding:3px 9px}
  .divider{margin:8px auto}

  .nav-panel .navlist{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 12px;padding:6px}
  .nav-panel .navlist li{padding:2px 0}
  .gbrow label{flex:1 1 100%}
  .footer{padding:6px 10px 10px}
  .factbox{width:100%}
  .factbox td{padding:3px 6px;font-size:12.5px}
  .banner{width:100%}
}
@media (max-width:430px){
  table.layout tr{padding:0 4px}
  .panel{margin-top:0;margin-bottom:10px}
  .bigquote{font-size:19px;padding:6px 8px}
  .btn31{transform:scale(.9)}
  .dancerow{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .mq-track,.wordart,.rainbow-text,.blink,.blink-slow{animation:none!important}
  #trail{display:none}
}

/* ==========================================================================
   Components added when the Win95 chrome came out
   ========================================================================== */

/* ------------------------------ status ticker ---------------------------- */
.ticker{
  display:block;
  width:min(94%,620px);
  margin:9px auto 4px;
  padding:4px 12px;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:bold;
  letter-spacing:.6px;
  color:var(--fg);
  border:2px inset var(--accent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ------------------------------ MIDI jukebox ----------------------------- */
.jukebox .np{
  width:100%;
  max-width:100%;
  font-family:"Courier New",Courier,monospace;
  font-weight:bold;font-size:11.5px;
  letter-spacing:0;
  margin:4px 0 2px;
  white-space:nowrap;overflow:hidden;
  color:var(--accent);
}
.jukebox .viz{
  display:flex;align-items:flex-end;gap:2px;
  height:26px;margin:5px auto;padding:2px;
  background:var(--head-bg);
  border:2px inset var(--accent);
}
.jukebox .viz i{flex:1;display:block;height:2px;background:var(--accent);transition:height .09s linear}
.jbtns{display:flex;gap:5px;justify-content:center;margin:5px 0 3px;flex-wrap:wrap}
.jbtns .mini-button{font-size:11px;padding:2px 7px}
.vol{display:flex;align-items:center;gap:6px;justify-content:center;margin:4px 0}
.vol input{width:88px;accent-color:var(--accent)}
.spin-cd{display:block;margin:0 auto}

/* ------------------------------ the pop-up ------------------------------- */
.popup{
  position:fixed;
  left:50%;top:14%;
  transform:translateX(-50%);
  width:370px;max-width:90vw;
  z-index:100;
  background:var(--panel-bg);
  color:var(--fg);
  border:var(--panel-border);
  box-shadow:7px 7px 0 rgba(0,0,0,.5);
  font-family:var(--font-body);
  font-size:14px;
}
.popup[hidden]{display:none}
.popup-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 8px 5px 12px;
  background:var(--head-bg);
  color:var(--head-fg);
  font-family:var(--head-font);
  font-weight:bold;
  font-size:14px;
  letter-spacing:var(--head-letter);
  text-shadow:var(--head-shadow);
}
.popup-x{
  width:22px;height:20px;
  font:bold 13px var(--font-head);
  line-height:1;
  color:var(--btn-fg);
  background:var(--btn-face);
  border:2px outset #fff;
}
.popup-x:active{border-style:inset}
.popup-body{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 8px;line-height:1.5}
.popup-actions{display:flex;justify-content:center;gap:10px;padding:4px 0 14px}

@media (max-width:700px){
  .popup{top:8%}
}

/* ==========================================================================
   DIAL-UP COLD OPEN
   Deliberately Windows 95 rather than themed - it is the "browser", not the
   page, so it stays the same whichever of the 99 themes is loading behind it.
   ========================================================================== */
#dialup{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000d1a;
  font-family:"MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
}
#dialup[hidden]{display:none}
#dialup.closing{opacity:0;transition:opacity .5s ease}

.du-box{
  width:min(94vw,392px);
  padding:2px;
  background:#c0c0c0;
  color:#000;
  border:2px solid;
  border-color:#fff #000 #000 #fff;
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 6px 6px 0 rgba(0,0,0,.5);
}
.du-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 4px 3px 7px;
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff;font-weight:bold;font-size:12px;
}
.du-x{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:16px;font-size:11px;
  background:#c0c0c0;color:#000;
  border:1px solid;border-color:#fff #000 #000 #fff;
}
.du-body{display:flex;gap:12px;padding:14px 14px 8px}
.du-icon img{image-rendering:pixelated}
.du-fields{flex:1;min-width:0}
.du-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0}
.du-row label{flex:0 0 96px;text-align:right;line-height:20px}
.du-row span,.du-row .du-input{
  flex:1;min-width:0;
  box-sizing:border-box;
  height:20px;
  line-height:14px;
  padding:1px 5px;
  margin:0;
  background:#fff;color:#000;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:12px "MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
}
.du-row .du-input{border-radius:0;outline-offset:-2px}
.du-row .du-input:focus{outline:2px solid #000080}
.du-status{
  margin:6px 14px 0;padding:4px 7px;
  /* Always exactly two lines tall. Messages alternate between one and two
     lines, and letting the box resize made the whole dialog jump. */
  height:calc((11.5px * 1.35 * 2) + 8px + 4px);
  overflow:hidden;
  background:#000;color:#39ff6a;
  font-family:"Courier New",Courier,monospace;font-size:11.5px;line-height:1.35;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  white-space:pre-line;
}
.du-status::after{content:"_";animation:blink 1s steps(1,end) infinite}
.du-title span:first-child{display:flex;align-items:center;gap:5px}
.du-title img{image-rendering:pixelated}
.du-meter{
  margin:7px 14px 0;height:16px;padding:2px;
  background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
}
.du-meter i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#000080 0 8px,#c0c0c0 8px 10px);
}
.du-checks{
  display:flex;flex-wrap:wrap;gap:5px 20px;
  padding:9px 16px 2px;font-size:12px;
}
.du-check{display:flex;align-items:center;gap:6px}
.du-check i{
  position:relative;
  width:13px;height:13px;
  background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
}
.du-check i.on::after{
  content:"";position:absolute;left:3px;top:0;
  width:3px;height:7px;
  border:solid #000;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.du-actions{display:flex;justify-content:center;gap:10px;padding:13px 0 14px}
.w95{
  min-width:84px;padding:4px 12px;
  font:12px "MS Sans Serif",Tahoma,sans-serif;
  background:#c0c0c0;color:#000;
  border:2px solid;border-color:#fff #000 #000 #fff;
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
.w95:active{border-color:#000 #fff #fff #000;box-shadow:none}
.w95[disabled]{color:#808080;text-shadow:1px 1px 0 #fff}
.du-default{box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 0 0 0 2px #000}

/* Elements pop in one at a time as they "download" - no fades, because
   nothing faded in 1998. */
#page .unpainted{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  #page .unpainted{visibility:visible}
}


/* ==========================================================================
   Touch behaviour
   iOS zooms the viewport whenever a focused input is under 16px, and taps
   carry a double-tap-zoom delay. Both are fixed without disabling pinch
   zoom, which people actually need.
   ========================================================================== */
button,a,label,summary,input,textarea,select,.du-check{touch-action:manipulation}

@media (max-width:820px){
  .gbrow input,.gbrow textarea,.du-row .du-input{font-size:16px}
  input,textarea,select{font-size:16px}
}

/* ------------------------------ F.A.Q. ------------------------------------ */
.faq{margin:6px 0 2px}
.faq dt{
  font-weight:bold;
  color:var(--accent);
  margin:12px 0 3px;
}
.faq dt:first-child{margin-top:2px}
.faq dd{margin:0 0 4px;padding-left:14px}


/* ==========================================================================
   POLL + WHO'S HERE
   ========================================================================== */
.pollq{
  font-weight:bold;
  font-size:12.5px;
  text-align:center;
  margin:2px 0 7px;
  color:var(--accent);
  line-height:1.25;
}
.pollopts{display:flex;flex-direction:column;gap:4px}
.pollbtn{width:100%;font-size:11px;padding:3px 4px}
.pollbtn[disabled]{opacity:.55}
.pollres{
  margin:9px 0 4px;
  font-family:"Courier New",Courier,monospace;
  font-size:10.5px;
  line-height:1.3;
}
.pollrow{margin:0 0 6px;padding:1px 2px}
.pollrow:last-child{margin-bottom:0}
.polltop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.polltop b{font-weight:bold;font-variant-numeric:tabular-nums}
.pollbar{
  color:var(--accent);
  letter-spacing:0;
  line-height:1;
  min-height:1em;
  margin-top:1px;
  overflow:hidden;
  white-space:nowrap;
}
.pollrow.mine{outline:1px dotted var(--accent);outline-offset:1px}
#pollNote{text-align:center;margin-top:4px}

.onlinenow{
  margin:6px auto 0;
  font-weight:bold;
  font-size:12px;
  letter-spacing:.5px;
  color:var(--accent);
  min-height:1.2em;
}