/* geocities.slopped.site: the 1990s, rebuilt in CSS. Shared by every homepage; each page adds its own look
   (colours, font, heading style) in an inline <style> written by geocities/scripts/build.mjs.
   Motion: everything that moves stops under html.still (the "Stop animations" button, or reduced motion). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background-color: var(--bg0, #c0c0c0); color: var(--text, #000); font-family: var(--font, "Times New Roman", Times, serif); font-size: 17px; line-height: 1.45; overflow-wrap: break-word; }
a { color: var(--link, #0000ee); }
a:visited { color: var(--vlink, var(--link, #551a8b)); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #728600; outline-offset: 3px; }
img, svg, canvas { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the site's own chrome (slopped.site, not 1998) */
.geo-bar { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 16px; background: #f4f1e8; color: #171815; border-bottom: 1px solid #d4d2c9; font: 14px/1.3 Arial, Helvetica, sans-serif; }
.geo-bar a, .geo-bar a:visited { color: #171815; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 42px; }
.geo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.geo-bar .honest { color: #6b6b62; flex: 1 1 240px; }
.geo-bar button { min-height: 42px; padding: 0 14px; border: 1px solid #171815; border-radius: 999px; background: transparent; color: #171815; font: 700 13px Arial, Helvetica, sans-serif; cursor: pointer; }
.geo-bar button[aria-pressed="true"] { background: #171815; color: #f4f1e8; }

/* ---------------------------------------------------------------- the page shell and layouts */
.page { padding: 18px 12px 28px; }
.panel { background: var(--panel); color: var(--text); }
.wrap { width: min(var(--w, 720px), 100%); margin: 0 auto; }
table.layout { border-collapse: separate; border-spacing: 0; width: 100%; }
table.layout > tbody > tr > td { vertical-align: top; }
.content { padding: 16px 20px; }
.side { padding: 14px 12px; width: 200px; }
td.side.panel, .side.panel { background: linear-gradient(rgba(0, 0, 0, .07), rgba(0, 0, 0, .07)), var(--panel); }
.side-inner { display: grid; gap: 14px; justify-items: center; text-align: center; }
.panel-border { border: 3px ridge var(--accent); }

/* plain: no table at all, the browser's own defaults, 1995 */
.L-plain .page { background: var(--panel); }
.L-plain .wrap { width: 100%; }

/* center: one centered table */
.L-center .content { border: 4px outset var(--accent); }

/* boxes: stacked bevelled tables */
.L-boxes .box { margin: 0 0 14px; border: 4px outset #dcdcdc; background: var(--panel); }
.L-boxes .box > .box-title { margin: 0; padding: 4px 10px; background: var(--accent); color: var(--panel); font: 700 15px Arial, Helvetica, sans-serif; }
.L-boxes .box > .box-body { padding: 12px 16px; }

/* frames: a banner frame, a nav frame and a main frame, each with its own scroll bar */
:is(.L-frames, .L-frames2) .frames { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; width: min(1000px, 100%); margin: 0 auto; height: min(84vh, 900px); min-height: 520px; border: 4px inset #c0c0c0; background: #c0c0c0; }
:is(.L-frames, .L-frames2) .frame { overflow: auto; border: 2px inset #c0c0c0; background: var(--panel); }
:is(.L-frames, .L-frames2) .frame-top { grid-column: 1 / -1; padding: 8px 16px; }
:is(.L-frames, .L-frames2) .frame-nav { padding: 12px 10px; }
:is(.L-frames, .L-frames2) .frame-main { padding: 16px 20px; }
.frame-label { display: block; font: 10px Arial, sans-serif; color: var(--text); opacity: .75; }

/* fixed800: deliberately 800 px wide. Period-correct sideways scroll on phones; the ring bars below stay fluid. */
.L-fixed800 .page, .L-fixed640 .page { overflow-x: auto; }
.L-narrow .content { border: 2px solid var(--accent); }
.L-mapnav .content { border: 4px ridge var(--accent); }
.L-fixed800 .wrap { width: 800px; max-width: none; }
.L-fixed640 .wrap { width: 640px; max-width: none; }
.L-fixed640 .fixed-note, .L-fixed800 .fixed-note { width: min(800px, 100%); margin: 0 auto 8px; font: 12px Arial, sans-serif; color: var(--text); background: var(--panel); padding: 4px 8px; border: 1px dashed var(--accent); }

@media (max-width: 760px) {
  .page { padding: 10px 8px 22px; }
  .content { padding: 12px 12px; }
  table.layout, table.layout > tbody, table.layout > tbody > tr, table.layout > tbody > tr > td { display: block; width: 100%; }
  .side { width: auto; }
  .side-inner { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: start; }
  :is(.L-frames, .L-frames2) .frames { display: block; height: auto; min-height: 0; }
  :is(.L-frames, .L-frames2) .frame { overflow: visible; }
  .L-fixed800 table.layout, .L-fixed800 table.layout > tbody, .L-fixed800 table.layout > tbody > tr, .L-fixed800 table.layout > tbody > tr > td, .L-fixed640 table.layout, .L-fixed640 table.layout > tbody, .L-fixed640 table.layout > tbody > tr, .L-fixed640 table.layout > tbody > tr > td { display: revert; width: revert; }
  .L-fixed800 .side { width: 200px; }
  .L-fixed800 .side-inner { grid-template-columns: none; }
  .geo-bar { padding: 4px 12px; gap: 0 12px; }
  .geo-bar .honest { order: 9; flex-basis: 100%; font-size: 12px; padding-bottom: 4px; }
  .geo-bar button { margin-left: auto; }
}

/* ---------------------------------------------------------------- fonts */
.F-times { --font: "Times New Roman", Times, "Liberation Serif", serif; }
.F-comic { --font: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "Segoe Print", cursive; }
.F-arial { --font: Arial, Helvetica, "Liberation Sans", sans-serif; }
.F-courier { --font: "Courier New", Courier, "Liberation Mono", monospace; }
.F-verdana { --font: Verdana, Geneva, "DejaVu Sans", sans-serif; font-size: 15px; }
.F-georgia { --font: Georgia, "Times New Roman", serif; }
.F-trebuchet { --font: "Trebuchet MS", "Lucida Grande", "DejaVu Sans", sans-serif; }
.F-impact { --font: Arial, Helvetica, sans-serif; }
.F-impact h1, .F-impact h2 { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif; font-weight: 400; letter-spacing: .5px; }
.F-courier .content, .F-courier .frame-main, .F-courier .box-body { font-size: 15px; }

/* ---------------------------------------------------------------- headings ("WordArt") */
h1 { margin: .2em 0 .25em; font-size: clamp(28px, 6vw, 46px); line-height: 1.08; text-align: center; color: var(--accent); }
h2 { margin: 1.1em 0 .4em; font-size: clamp(20px, 3.6vw, 26px); color: var(--accent); }
.tag { margin: 0 0 12px; text-align: center; font-style: italic; }
.H-plain h1 { font-family: "Times New Roman", Times, serif; font-weight: 700; color: var(--text); text-align: left; }
.H-plain .tag { text-align: left; }
.H-fire h1 { background: linear-gradient(180deg, #fff6a0 0%, #ffd000 30%, #ff7a00 60%, #d01000 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #400000); font-weight: 900; text-transform: uppercase; }
.H-chrome h1 { background: linear-gradient(180deg, #ffffff 0%, #c8ccd4 45%, #5a6070 52%, #d8dce4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 2px 0 #202020); font-weight: 900; font-style: italic; }
.H-rainbow h1 { background: linear-gradient(90deg, #ff2020, #ff9900, #ffee00, #20cc20, #2080ff, #a040ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .55)); font-weight: 900; }
.H-shadow3d h1 { color: var(--accent); text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 rgba(0, 0, 0, .5); font-weight: 900; }
.H-outline h1 { color: var(--panel); -webkit-text-stroke: 2px var(--accent); paint-order: stroke fill; text-shadow: 4px 4px 0 rgba(0, 0, 0, .3); font-weight: 900; letter-spacing: 1px; }
.H-glow h1 { color: var(--accent); text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent); font-weight: 700; }
.H-emboss h1 { color: var(--accent); text-shadow: -1px -1px 0 rgba(255, 255, 255, .8), 2px 2px 1px rgba(0, 0, 0, .45); font-variant: small-caps; }
.H-wavy h1 { font-weight: 900; }
.H-wavy h1 .w { display: inline-block; transform: translateY(var(--y)); color: var(--c); }
.H-wordart-blue h1 { background: linear-gradient(180deg, #a0e0ff, #0050ff 55%, #001a80); -webkit-background-clip: text; background-clip: text; color: transparent; transform: perspective(300px) rotateX(18deg); filter: drop-shadow(3px 3px 0 #c0c0c0); font-weight: 900; font-style: italic; }
.H-gradient-bar h1 { margin: 0 0 10px; padding: 6px 12px; background: linear-gradient(90deg, #000080, #1084d0); color: #ffffff; font: 700 clamp(22px, 4.6vw, 32px) Arial, Helvetica, sans-serif; text-align: left; }
.H-gradient-bar .tag { text-align: left; }

/* ---------------------------------------------------------------- horizontal rules */
hr { margin: 18px 0; }
hr.hr-rainbow { height: 6px; border: 0; background: linear-gradient(90deg, #ff2020, #ff9900, #ffee00, #20cc20, #2080ff, #a040ff, #ff2020); }
hr.hr-groove { height: 0; border: 0; border-top: 4px groove #a0a0a0; }
hr.hr-double { height: 6px; border: 0; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
hr.hr-dots { height: 6px; border: 0; background: radial-gradient(circle, var(--accent) 2.5px, transparent 3px) 0 0 / 14px 6px repeat-x; }
hr.hr-waves { height: 10px; border: 0; background: radial-gradient(circle at 50% 0, transparent 6px, var(--accent) 6.5px, var(--accent) 8px, transparent 8.5px) 0 0 / 20px 10px repeat-x; }
hr.hr-stars, hr.hr-sardines, hr.hr-flames { height: 18px; border: 0; overflow: visible; text-align: center; }
hr.hr-stars::after { content: "★ ☆ ★ ☆ ★ ☆ ★"; color: var(--accent); letter-spacing: 6px; font-size: 16px; line-height: 18px; }
hr.hr-sardines::after { content: "><(((º>   ><(((º>   ><(((º>"; white-space: pre; color: var(--accent); font: 700 14px "Courier New", monospace; line-height: 18px; }
hr.hr-flames { height: 12px; background: linear-gradient(0deg, #d01000, #ff7a00 45%, #ffd000 80%, transparent); -webkit-mask: radial-gradient(circle at 50% 100%, #000 5px, transparent 6px) 0 0 / 12px 12px repeat-x, linear-gradient(#000, #000) 0 8px / 100% 4px no-repeat; mask: radial-gradient(circle at 50% 100%, #000 5px, transparent 6px) 0 0 / 12px 12px repeat-x, linear-gradient(#000, #000) 0 8px / 100% 4px no-repeat; }

/* ---------------------------------------------------------------- marquee and blink (both stop under .still) */
.marquee { overflow: hidden; margin: 10px 0; padding: 4px 0; border: 2px inset #c0c0c0; background: #000; color: #ffff00; font: 700 16px "Courier New", monospace; white-space: nowrap; }
.marquee .mq-track { display: inline-flex; animation: mq var(--dur, 18s) linear infinite; }
.marquee .mq-track > span { padding-right: 4em; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.still .marquee { white-space: normal; }
.still .marquee .mq-track { display: block; animation: none; padding: 0 8px; }
.still .marquee .mq-track > span[aria-hidden] { display: none; }
.blink { animation: blink 1.1s steps(1, end) infinite; font-weight: 700; color: var(--blink, #ff0000); }
@keyframes blink { 50% { visibility: hidden; } }
.still .blink { animation: none; }
.blink-line { text-align: center; font-size: 22px; margin: 8px 0; }

/* ---------------------------------------------------------------- under construction, the digging man, work in progress */
.uc { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px auto; padding: 10px; border: 2px dashed #000; background: #ffe800; color: #000; font: 700 15px Arial, Helvetica, sans-serif; max-width: 520px; text-align: center; }
.uc svg { flex: none; }
.uc .stripe { display: block; height: 14px; width: 100%; background: repeating-linear-gradient(-45deg, #000 0 12px, #ffe800 12px 24px); background-size: 34px 14px; animation: stripes 1.2s linear infinite; }
@keyframes stripes { to { background-position: 34px 0; } }
.digger .arm { transform-origin: 30px 26px; animation: dig 1s ease-in-out infinite; }
.digger .dirt { animation: dirt 1s ease-out infinite; }
@keyframes dig { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(28deg); } }
@keyframes dirt { 0%, 45% { opacity: 0; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }
.still .uc .stripe, .still .digger .arm, .still .digger .dirt { animation: none; }
.wip { margin: 12px auto; max-width: 520px; padding: 6px 10px; border: 3px double var(--accent); text-align: center; font-weight: 700; background: var(--panel); color: var(--text); }

/* ---------------------------------------------------------------- hit counters */
.counter { text-align: center; margin: 12px 0; font-size: 15px; }
.odo { display: inline-flex; gap: 2px; padding: 3px; background: #202020; border: 2px inset #808080; vertical-align: middle; }
.odo .d { display: inline-block; width: 15px; height: 22px; overflow: hidden; background: linear-gradient(#000, #3a3a3a 50%, #000); color: #f8f8f8; font: 700 18px/22px "Courier New", monospace; text-align: center; }
.odo .d > span { display: block; transition: transform .6s cubic-bezier(.3, 1.4, .6, 1); }
.odo.big .d { width: 26px; height: 38px; font-size: 30px; line-height: 38px; color: #7aff7a; background: linear-gradient(#001400, #0c3a0c 50%, #001400); }
.odo.err .d { color: #ff6060; }
.counter small { display: block; font-size: 12px; opacity: .85; }
.still .odo .d > span { transition: none; }

/* ---------------------------------------------------------------- 88 x 31 buttons, browser buttons, awards */
.buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.b88 { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px; width: 88px; height: 31px; padding: 0 3px; overflow: hidden; border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 rgba(0, 0, 0, .5); font: 700 9px/1 Verdana, Arial, sans-serif; text-transform: uppercase; text-align: center; letter-spacing: -.2px; color: #fff; background: #333; text-decoration: none; }
.b88 svg { width: 18px; height: 18px; }
.b88 b { display: block; font-size: 10px; }
.b88.b-netslop { background: linear-gradient(#1a1a6a, #000030); color: #9ad0ff; }
.b88.b-exploiter { background: linear-gradient(#e8f0ff, #9ab8e8); color: #0a2a8a; }
.b88.b-notepad { background: #ffffff; color: #000; }
.b88.b-anybrowser { background: linear-gradient(#ffffff, #c0c0c0); color: #000; }
.b88.b-lampon { background: linear-gradient(#ffee88, #ffaa00); color: #3a1a00; }
.b88.b-tinpowered { background: linear-gradient(#e0e4e8, #8a949e); color: #1a2a3a; }
.b88.b-slopwright { background: #171815; color: #e3ff59; }
.b88.b-aimade { background: #e3ff59; color: #171815; }
.b88.b-webring { background: linear-gradient(#a00000, #500000); color: #ffdd55; }
.b88.b-800x600 { background: #000; color: #00ff00; }
.b88.b-midi { background: linear-gradient(#5a005a, #200020); color: #ffb0ff; }
.b88.b-comicsans { background: #ff66cc; color: #000; }
.b88.b-hitcount { background: #003000; color: #7aff7a; }
.best-viewed { text-align: center; font-size: 13px; margin: 12px 0; }
.best-viewed .bv { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.bigbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 10px; border: 2px outset #d0d0d0; background: #c0c0c0; color: #000; font: 700 13px Arial, sans-serif; text-decoration: none; }
.bigbtn svg { width: 28px; height: 28px; }
.awards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0; }
.award { display: grid; justify-items: center; width: 132px; padding: 6px 4px; border: 3px ridge #c8a020; background: radial-gradient(circle at 50% 30%, #fff8d0, #e8c860); color: #3a2a00; font: 700 11px/1.2 Georgia, serif; text-align: center; }
.award svg { width: 54px; height: 54px; }
.award.a-silver { border-color: #a0a8b0; background: radial-gradient(circle at 50% 30%, #ffffff, #c0c8d0); color: #1a2030; }
.award.a-acid { border-color: #171815; background: #e3ff59; color: #171815; }
.award.a-red { border-color: #800000; background: radial-gradient(circle at 50% 30%, #ffe0e0, #e08080); color: #400000; }

/* ---------------------------------------------------------------- NEW!, spinning things, e-mail envelope, bookmark */
.new { display: inline-grid; place-items: center; width: 46px; height: 30px; margin-right: 6px; vertical-align: middle; clip-path: polygon(50% 0, 61% 22%, 86% 8%, 80% 36%, 100% 50%, 80% 64%, 86% 92%, 61% 78%, 50% 100%, 39% 78%, 14% 92%, 20% 64%, 0 50%, 20% 36%, 14% 8%, 39% 22%); background: #ff0000; color: #ffff00; font: 900 10px Arial, sans-serif; animation: newflash .8s steps(1, end) infinite; }
@keyframes newflash { 50% { background: #ffff00; color: #ff0000; } }
.still .new { animation: none; }
.news { list-style: none; padding: 0; }
.news li { margin: 6px 0; }
.spin { display: grid; justify-items: center; gap: 4px; font-size: 12px; perspective: 400px; }
.spin svg { width: 72px; height: 72px; animation: spinY 3s linear infinite; }
.spin.spin-z svg { animation-name: spinZ; animation-duration: 6s; }
@keyframes spinY { to { transform: rotateY(360deg); } }
@keyframes spinZ { to { transform: rotate(360deg); } }
.still .spin svg { animation: none; }
.email { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.email .flap { transform-origin: 50% 0; animation: flap 2s ease-in-out infinite; }
@keyframes flap { 0%, 60%, 100% { transform: scaleY(1); } 80% { transform: scaleY(-1); } }
.still .email .flap { animation: none; }
.email code { font: 700 14px "Courier New", monospace; background: rgba(255, 255, 255, .85); color: #000; padding: 2px 4px; }
.bookmark { text-align: center; font-size: 14px; }

/* ---------------------------------------------------------------- guestbook, FAQ, links, top 10, polls, tables */
.gb table { width: 100%; border-collapse: collapse; }
.gb td, .gb th { border: 2px groove #b0b0b0; padding: 6px 8px; vertical-align: top; text-align: left; }
.gb th { background: var(--accent); color: var(--panel); font: 700 13px Arial, sans-serif; }
.gb .who { white-space: nowrap; font-weight: 700; }
.gb .where { display: block; font-size: 12px; font-weight: 400; font-style: italic; white-space: normal; }
.gb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn95 { min-height: 42px; padding: 4px 14px; border: 2px outset #e0e0e0; background: #c0c0c0; color: #000; font: 700 14px Arial, sans-serif; cursor: pointer; }
.btn95:active { border-style: inset; }
.gb-note { margin-top: 8px; padding: 8px; border: 1px dashed var(--accent); font-size: 14px; }
@media (max-width: 560px) { .gb thead { display: none; } .gb tr, .gb td { display: block; width: 100%; } .gb td { border-width: 0 0 1px; } .gb tr { border: 2px groove #b0b0b0; margin-bottom: 8px; } }
.faq dt { font-weight: 700; margin-top: 10px; }
.faq dt::before { content: "Q: "; color: var(--accent); }
.faq dd { margin: 2px 0 0 0; }
.faq dd::before { content: "A: "; font-weight: 700; color: var(--accent); }
.links ul { list-style: none; padding: 0; }
.links li { margin: 4px 0; padding-left: 22px; position: relative; }
.links li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--accent) 60%, #000); }
.links a { display: inline-block; padding: 4px 0; }
.top10 ol { padding-left: 1.6em; }
.top10 li { margin: 4px 0; }
.datatable { border-collapse: collapse; margin: 8px 0; }
.datatable td { border: 2px inset #b0b0b0; padding: 4px 12px; }
.poll fieldset { border: 2px groove #b0b0b0; }
.poll label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.poll .bar { display: block; height: 14px; background: linear-gradient(90deg, var(--accent), #000); min-width: 4px; }
.poll .res { display: grid; grid-template-columns: minmax(90px, auto) 1fr 3em; gap: 4px 8px; align-items: center; font-size: 14px; }
.poll small { display: block; margin-top: 6px; font-size: 12px; }
.nav-anchors { text-align: center; font: 700 14px Arial, sans-serif; margin: 6px 0 12px; }
.nav-anchors a { display: inline-block; padding: 10px 4px; }
.side .nav-anchors .sep { display: none; }
.side .nav-anchors a { display: block; padding: 8px 4px; }

/* ---------------------------------------------------------------- applet, webcam, visitor map, banner ad, midi, watcher */
.applet { position: relative; display: grid; place-items: center; margin: 12px auto; width: min(460px, 100%); aspect-ratio: 460 / 200; background: #808080; border: 2px inset #c0c0c0; color: #fff; font: 12px Arial, sans-serif; }
.applet canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.applet .loading { position: relative; z-index: 1; }
.applet.ready .loading { display: none; }
.cam { margin: 12px auto; width: min(340px, 100%); padding: 8px; border: 4px outset #c0c0c0; background: #c0c0c0; color: #000; text-align: center; font: 12px Arial, sans-serif; }
.cam canvas { display: block; width: 100%; aspect-ratio: 4 / 3; background: #000; image-rendering: pixelated; }
.vmap svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; border: 2px inset #c0c0c0; background: #a8d0f0; }
.vmap figcaption { text-align: center; font-size: 13px; }
.ad { display: block; width: min(468px, 100%); min-height: 60px; margin: 12px auto 2px; border: 2px solid #000; text-decoration: none; overflow: hidden; }
.ad .ad-in { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; min-height: 56px; padding: 2px 8px; font: 900 15px/1.15 Arial, sans-serif; }
.ad .ad-a, .ad .ad-b { grid-column: 2; grid-row: 1; }
.ad .ad-b { visibility: hidden; animation: adswap 2.4s steps(1, end) infinite; }
.ad .ad-a { animation: adswap 2.4s steps(1, end) infinite reverse; }
@keyframes adswap { 50% { visibility: visible; } }
.still .ad .ad-a { animation: none; visibility: visible; }
.still .ad .ad-b { animation: none; visibility: hidden; }
.ad-cap { display: block; text-align: center; font: 10px Arial, sans-serif; margin-bottom: 12px; }
.midi { display: inline-grid; gap: 4px; justify-items: center; padding: 6px 8px; border: 2px outset #d0d0d0; background: #c0c0c0; color: #000; font: 12px Arial, sans-serif; }
.midi .btn95 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.midi .lcd { padding: 2px 6px; background: #102010; color: #7aff7a; font: 12px "Courier New", monospace; }
.watcher { text-align: center; }
.watcher svg { display: block; margin: 0 auto; height: 220px; width: auto; transition: none; }
.watcher p { font-size: 14px; }

/* ---------------------------------------------------------------- webmaster box, footer bits */
.webmaster { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.webmaster .photo { display: grid; place-items: center; width: 90px; height: 110px; border: 3px ridge #a0a0a0; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .08) 0 6px, transparent 6px 12px); font: 11px Arial, sans-serif; text-align: center; }
.updated { text-align: center; font-size: 13px; font-style: italic; }
.small-honest { text-align: center; font: 12px Arial, sans-serif; margin: 6px 0; }

/* ---------------------------------------------------------------- the web ring bars (always fluid, even under fixed800) */
.rings { width: min(720px, 100%); margin: 18px auto 0; display: grid; gap: 10px; padding: 0 8px; }
.ringnav { width: 100%; border: 3px outset #d0d0d0; background: #ffffff; color: #000; font: 13px/1.35 Arial, Helvetica, sans-serif; border-collapse: separate; }
.ringnav td { padding: 6px 8px; vertical-align: middle; }
.ringnav .rlogo { width: 64px; background: var(--ring); text-align: center; }
.ringnav .rlogo svg { width: 48px; height: 48px; display: block; margin: 0 auto; }
.ringnav a, .ringnav a:visited { color: #00009a; }
.ringnav .rname { font-weight: 700; }
.ringnav .rlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font: 700 14px "Courier New", monospace; margin: 2px 0; }
.ringnav .rlinks a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 6px; }
.ringnav small { color: #333; }

/* ================================================================ round two: structures, scales, alignment */
.S-huge h1 { font-size: clamp(30px, 9vw, 88px); line-height: .98; letter-spacing: -1px; }
.S-normal h1 { font-size: clamp(28px, 6vw, 46px); }
.S-small h1 { font-size: clamp(20px, 3.4vw, 26px); }
.S-tiny h1 { font-size: 18px; }
.A-left h1, .A-left .tag { text-align: left; }
.A-left .content, .A-left .flow { text-align: left; }
.A-center h1, .A-center .tag { text-align: center; }
.solid { background-image: none !important; }

/* plain: no panel, the browser's own defaults */
.L-plain .page { padding: 8px 12px 24px; }
.L-plain .flow { max-width: none; }
.L-plain h1 { font-family: "Times New Roman", Times, serif; color: var(--text); font-weight: 700; }
/* bleed: text straight on the page colour, no panel, no table */
.L-bleed .flow, .L-list .flow { max-width: var(--w); padding: 10px 4% 20px; }
.L-bleed.A-center .flow, .L-list.A-center .flow { margin: 0 auto; text-align: center; }
.L-bleed.A-left .flow { margin: 0 0 0 5%; }
.L-bleed.A-center .flow ul, .L-bleed.A-center .flow ol, .L-bleed.A-center .flow dl { text-align: left; display: inline-block; }
.side-inner.row { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
.L-list .links.fifty ul { columns: 3 220px; column-gap: 24px; text-align: left; font-size: 14px; }
.L-list .links.fifty li { break-inside: avoid; }
/* threecol */
.side-r { border-left: 2px groove #a0a0a0; }
/* one giant cell */
table.onecell { width: 100%; border-collapse: separate; border-color: var(--accent); background: var(--accent); }
table.onecell > tbody > tr > td { padding: clamp(14px, 4vw, 40px); }
/* notes: every block a sticky note */
.notes { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; max-width: var(--w); margin: 0 auto; padding: 10px; }
.note { flex: 1 1 280px; max-width: 420px; padding: 14px 16px 18px; background: var(--panel); color: var(--text); box-shadow: 3px 5px 0 rgba(0, 0, 0, .25); transform: rotate(var(--r, -1.2deg)); }
.note.n1 { --r: 1.6deg; background: #ffe0f0; } .note.n2 { --r: -2deg; background: #e0f4ff; } .note.n3 { --r: .8deg; background: #e8ffd8; }
/* terminal */
body.L-terminal { background: #000 !important; }
.terminal { max-width: 900px; padding: 16px; font: 16px/1.5 "Courier New", Courier, monospace; color: var(--text); }
.terminal h1 { text-align: left; font: 700 22px "Courier New", monospace; color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.terminal .tag { text-align: left; font-style: normal; }
.term { white-space: pre-wrap; margin: 0 0 14px; font: inherit; color: var(--text); text-shadow: 0 0 4px rgba(51, 255, 102, .5); }
.term.typing::after { content: "█"; animation: blink 1s steps(1, end) infinite; }
.still .term.typing::after { animation: none; }
.terminal .counter, .terminal .updated, .terminal .small-honest { text-align: left; }
/* Index of / */
body.L-index { background: #fff !important; }
.apache-page { padding: 8px 12px; font: 16px "Times New Roman", Times, serif; color: #000; }
.apache-page h1 { text-align: left; font: 700 32px "Times New Roman", Times, serif; color: #000; }
.apache-page .tag { text-align: left; }
.apache { border-collapse: collapse; font-size: 15px; }
.apache th { text-align: left; padding: 2px 14px 2px 0; border-bottom: 1px solid #000; }
.apache td { padding: 2px 14px 2px 0; }
.apache a { display: inline-block; padding: 3px 0; }
.apache-page address { font-style: italic; }
@media (max-width: 560px) { .apache th:nth-child(3), .apache td:nth-child(3), .apache th:nth-child(2), .apache td:nth-child(2) { display: none; } }
/* a .txt file */
body.L-txt { background: #fff !important; }
.txt-page { padding: 8px 12px; max-width: 100%; }
.txt-page h1 { text-align: left; font: 700 16px "Courier New", monospace; color: #000; }
.txt-page .tag { text-align: left; font: 13px "Courier New", monospace; }
.txtfile { font: 14px/1.35 "Courier New", Courier, monospace; color: #000; background: #fff; overflow-x: auto; max-width: 100%; margin: 0; padding: 4px 0 14px; }
.txt-page .links h2 { font: 700 14px "Courier New", monospace; color: #000; }
/* minimal: one line in the middle of nowhere */
.minimal { min-height: 62vh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 8px; padding: 20px; }
.minimal .tag { font-size: 12px; }
.L-minimal .gallery .thumbs { justify-content: center; }
/* deep: a very long way down */
.deep .down { text-align: center; font-size: 22px; }
.abyss { height: 3600px; display: grid; align-content: space-between; padding: 40px 0; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
.abyss span { display: block; text-align: center; font: 700 14px "Courier New", monospace; opacity: .7; }
.ring-up { width: 120px; height: 30px; margin: 20px auto; border: 4px solid var(--accent); border-radius: 50%; }
.L-deep .flow { max-width: 680px; margin: 0 auto; padding: 14px; background: var(--panel); }
/* giant: one huge picture with a caption */
.giant { display: grid; justify-items: center; gap: 8px; padding: 8px 0 20px; text-align: center; }
.giant h1 { font-size: 40px; }
.huge canvas { display: block; width: min(100%, 960px); height: auto; aspect-ratio: 4 / 3; background: #000; image-rendering: pixelated; }
.huge figcaption { font: 12px "Courier New", monospace; margin-top: 4px; }
/* the counter page */
.counter-page { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px 12px; }
.giant-counter .odo.big .d { width: clamp(34px, 11vw, 92px); height: clamp(52px, 16vw, 132px); font-size: clamp(42px, 13vw, 110px); line-height: clamp(52px, 16vw, 132px); }
.giant-counter b { font: 900 clamp(18px, 4vw, 30px) "Courier New", monospace; letter-spacing: 6px; color: var(--accent); }
/* marquee page */
.marquee-page { display: grid; gap: 4px; padding: 0 0 20px; }
.marquee-page .marquee { margin: 0; font-size: clamp(18px, 4vw, 36px); padding: 10px 0; border-width: 4px; }
.marquee-page .marquee:nth-child(2n) { background: var(--accent); color: #000; }
.marquee-page h1 { font-size: clamp(60px, 18vw, 200px); margin: .1em 0; }
.marquee-page .links, .marquee-page .counter, .marquee-page .updated, .marquee-page .small-honest { text-align: center; padding: 0 12px; }
/* tile: the background is the content; blocks are small cards on it */
body.L-tile { background-size: 288px 288px !important; image-rendering: pixelated; }
.tile-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 46px 30px; max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; align-items: start; }
.tile-page > h1, .tile-page > .tag, .tile-page > .marquee, .tile-page > .blink-line, .tile-page > .vbanner, .tile-page > .tipdlg { grid-column: 1 / -1; background: var(--panel); padding: 6px 10px; margin: 0; }
.tilecard { background: var(--panel); color: var(--text); padding: 10px 12px; border: 3px solid var(--accent); box-shadow: 6px 6px 0 rgba(0, 0, 0, .4); }
.tilecard.t1 { margin-top: 40px; } .tilecard.t3 { margin-top: 70px; } .tilecard.t4 { margin-top: 20px; }
/* frames inside frames */
.frames.inner { width: 100%; height: auto; min-height: 0; grid-template-columns: 180px minmax(0, 1fr); border-width: 3px; }
.frames.inner .frame { max-height: 360px; }
.frames-in { padding: 6px !important; }
/* navs */
.nav-side ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.nav-side a { display: block; padding: 8px 6px; font: 700 14px Arial, sans-serif; border-bottom: 1px dotted var(--accent); }
.nav-bottom { margin: 16px 0 6px; font: 13px Arial, sans-serif; text-align: center; }
.nav-bottom a { display: inline-block; padding: 10px 4px; }
table.bevel { border-collapse: separate; border-spacing: 4px; margin: 6px auto 12px; }
table.bevel td { border: 3px outset #e0e0e0; background: #c0c0c0; padding: 0; }
table.bevel td:active { border-style: inset; }
table.bevel a { display: block; min-height: 38px; padding: 9px 12px; color: #000; font: 700 13px Arial, sans-serif; text-decoration: none; }
@media (max-width: 560px) { table.bevel, table.bevel tbody, table.bevel tr { display: flex; flex-wrap: wrap; justify-content: center; } }

/* ================================================================ round two: features */
.F-comic-all { --font: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; }
.F-comic-all *, .F-comic-all button, .F-comic-all input, .F-comic-all textarea, .F-comic-all code, .F-comic-all .marquee { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive !important; }
.F-comic-all .geo-bar, .F-comic-all .geo-bar *, .F-comic-all .rings, .F-comic-all .rings * { font-family: Arial, Helvetica, sans-serif !important; }
.marquee.mq-right .mq-track { animation-direction: reverse; }
.marquee.mq-alt .mq-track { animation-direction: alternate; }
.marquee.mq-up { height: 120px; white-space: normal; text-align: center; }
.marquee.mq-up .mq-track { display: block; animation-name: mqup; }
.marquee.mq-up .mq-track > span { display: block; padding: 0 0 60px; }
@keyframes mqup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.still .marquee.mq-up { height: auto; }
.still .marquee.mq-up .mq-track { animation: none; }
.vbanner { margin: 0 0 8px; padding: 3px 8px; text-align: center; font: 700 12px Arial, sans-serif; background: #000080; color: #ffff66; }
.odo.tiny .d { width: 9px; height: 14px; font-size: 11px; line-height: 14px; }
.odo.stuck .d { background: linear-gradient(#3a0000, #600 50%, #3a0000); color: #ffd0d0; }
.lowc { text-align: center; font-size: 15px; }
.lowc small { display: block; font-size: 12px; }
.imap { text-align: center; margin: 12px auto; }
.imap img { display: block; margin: 0 auto; max-width: none; border: 3px ridge #a0a0a0; }
.imap figcaption { font-size: 13px; margin-top: 6px; }
.imap figcaption a { display: inline-block; padding: 6px 2px; }
.mailform fieldset, .joinring fieldset, .gb-form fieldset { border: 2px groove #b0b0b0; display: grid; gap: 6px; max-width: 460px; }
.mailform label, .joinring label, .gb-form label { display: grid; gap: 2px; font-size: 14px; }
.mailform input, .mailform textarea, .joinring input, .joinring select, .gb-form input, .gb-form textarea, .pinform select { min-height: 36px; padding: 4px 6px; border: 2px inset #c0c0c0; font: 14px Arial, sans-serif; background: #fff; color: #000; max-width: 100%; }
.thanks { padding: 8px; border: 2px dashed var(--accent); font-weight: 700; }
.chat-win { border: 3px outset #d0d0d0; background: #c0c0c0; color: #000; max-width: 520px; }
.chat-title { padding: 3px 6px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: 700 12px Arial, sans-serif; }
.chat-log { list-style: none; margin: 4px; padding: 6px; height: 190px; overflow: auto; background: #fff; border: 2px inset #c0c0c0; font: 13px "Courier New", monospace; }
.chat-log li { margin: 0 0 3px; }
.chat-log li.later { display: none; }
.chat-in { display: flex; gap: 6px; margin: 4px; }
.chat-in input { flex: 1; min-height: 36px; font: 13px Arial, sans-serif; }
.y2k { margin: 12px auto; padding: 8px 10px; max-width: 520px; background: #000; color: #ff4040; font: 700 14px "Courier New", monospace; text-align: center; border: 3px double #ff4040; }
.y2k b { display: block; color: #ffff00; }
.dancer { text-align: center; margin: 10px auto; }
.dancer svg { width: 120px; height: 120px; }
.dance .d-body { transform-origin: 60px 100px; animation: sway .8s ease-in-out infinite alternate; }
.dance .d-arm-l { transform-origin: 60px 48px; animation: armup .4s steps(2, end) infinite; }
.dance .d-arm-r { transform-origin: 60px 48px; animation: armup .4s steps(2, end) infinite reverse; }
.dance .d-leg-l, .dance .d-leg-r { transform-origin: 60px 76px; animation: armup .8s steps(2, end) infinite; }
@keyframes sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-4px); } }
@keyframes armup { 50% { transform: rotate(-24deg); } }
.still .dance * { animation: none !important; }
.sotw-t { width: 100%; border-collapse: collapse; }
.sotw-t td { border-bottom: 1px dotted var(--accent); padding: 6px; vertical-align: middle; }
.sotw-w { width: 110px; text-align: center; font-size: 12px; }
.sotw-w svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
.hidden-text .ht { color: var(--panel); background: var(--panel); padding: 6px; border: 1px dashed var(--accent); }
.hidden-text .ht::selection { background: #000080; color: #ffffff; }
.hidden-text.revealed .ht { color: var(--text); }
.hidden-text small { display: block; font-size: 12px; margin-top: 4px; }
.moved { max-width: 560px; margin: 10px auto; padding: 14px; border: 4px double var(--accent); background: var(--panel); text-align: center; }
.moved a { overflow-wrap: anywhere; }
.slideshow .slide { padding: 10px; border: 3px ridge var(--accent); margin-bottom: 6px; }
.js-slides .slide:not(.on) { display: none; }
.slide-nav { text-align: center; }
.gallery .thumbs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gallery figure { margin: 0; width: 132px; text-align: center; font-size: 12px; }
.gallery img { display: block; width: 132px; height: auto; border: 3px ridge #c0c0c0; background: #808080; }
.gallery figcaption small { display: block; font-size: 11px; opacity: .9; }
.hub td { padding: 4px 6px; vertical-align: middle; border-bottom: 1px dotted #a0a0a0; }
.hub .rl { width: 40px; }
.inkblot { text-align: center; }
.inkblot canvas { width: min(300px, 100%); height: auto; border: 2px solid #000; background: #fff; }
.snowglobe { text-align: center; }
.snowglobe canvas { width: 200px; height: 200px; border-radius: 50%; border: 6px solid rgba(200, 220, 255, .9); box-shadow: inset 0 0 30px rgba(255, 255, 255, .7); background: radial-gradient(circle at 40% 35%, #3a6aa8, #0a1a3a); }
.snowglobe[data-kind="spores"] canvas { background: radial-gradient(circle at 40% 35%, #2a4a10, #0a1404); }
.loadbar { margin: 12px auto; max-width: 340px; padding: 8px; border: 2px outset #d0d0d0; background: #c0c0c0; color: #000; font: 12px Arial, sans-serif; text-align: center; }
.loadbar .bar { height: 16px; margin: 6px 0 4px; border: 2px inset #c0c0c0; background: #fff; }
.loadbar .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 12px); }
.lever { text-align: center; margin: 10px 0; }
html.lights-down body { --panel: #000000 !important; --text: #a8a8a8 !important; --accent: #8a8a8a !important; --link: #c8c8ff !important; background-color: #000 !important; background-image: none !important; }
html.lights-down .content, html.lights-down .flow { background: #000; }
.tipdlg { max-width: 360px; margin: 10px auto; border: 2px outset #e0e0e0; background: #c0c0c0; color: #000; font: 13px Arial, sans-serif; text-align: left; }
.tip-title { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 8px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; }
.tip-x { width: 22px; height: 20px; border: 1px outset #fff; background: #c0c0c0; font-weight: 700; cursor: pointer; }
.tip-body { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: #ffffe0; margin: 6px; border: 2px inset #c0c0c0; }
.tip-body p { margin: 0; }
.tip-btns { padding: 0 6px 6px; text-align: right; }
.tipdlg.closed { display: none; }
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; height: 24px; overflow: hidden; background: #c0c0c0; border-top: 2px outset #fff; color: #000; font: 12px/22px Arial, sans-serif; white-space: nowrap; }
.statusbar span { display: inline-block; padding-left: 100%; animation: mq 18s linear infinite; }
.still .statusbar span { animation: none; padding-left: 8px; }
.has-status .page { padding-bottom: 40px; }
.env-fly svg { animation: envfly 3s ease-in-out infinite; }
@keyframes envfly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(14px, -8px) rotate(8deg); } }
.env-spin svg { animation: spinY 2.4s linear infinite; }
.still .env-fly svg, .still .env-spin svg { animation: none; }
.uc-tape, .uc-cones, .uc-crane { background: #fff8d0; }
.crane .hook { animation: hook 2.6s ease-in-out infinite alternate; transform-origin: 78px 12px; }
@keyframes hook { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.still .crane .hook { animation: none; }
.fx-tilt .content > *:nth-child(odd), .fx-tilt .side-inner > * { transform: rotate(-1.4deg); }
.fx-tilt .content > *:nth-child(even) { transform: rotate(1.1deg); }
.fx-forward h1, .fx-forward #about { transform: perspective(500px) rotateX(-14deg); transform-origin: 50% 100%; }
.fx-forward .page { overflow-x: clip; }
.fx-shred .content { background-image: repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 0, 0, .18) 34px 36px); }
.fx-shred .content p, .fx-shred .content li { letter-spacing: .5px; }
.fx-wobble .wrap, .fx-wobble .frames { animation: wobble 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wobble { 0%, 100% { transform: skewX(0) scaleY(1); } 25% { transform: skewX(1.6deg) scaleY(.995); } 75% { transform: skewX(-1.6deg) scaleY(1.005); } }
html.still .fx-wobble .wrap, html.still .fx-wobble .frames { animation: none; }
.fx-cobwebs .content { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23888' fill='none' stroke-width='1'%3E%3Cpath d='M0 0l120 120M0 0l120 50M0 0l50 120M0 0l120 0M0 0l0 120'/%3E%3Cpath d='M30 0q10 18 0 30q18 -10 30 0M0 30q18 10 30 0M60 0q20 36 0 60q36 -20 60 0M0 60q36 20 60 0'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23888' fill='none' stroke-width='1' transform='translate(120 0) scale(-1 1)'%3E%3Cpath d='M0 0l120 120M0 0l120 50M0 0l50 120M0 0l120 0M0 0l0 120'/%3E%3Cpath d='M30 0q10 18 0 30q18 -10 30 0M0 30q18 10 30 0M60 0q20 36 0 60q36 -20 60 0M0 60q36 20 60 0'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left top, right top; }
.pinform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 6px; font-size: 13px; }
.pinform small { flex-basis: 100%; text-align: center; }
.ad-wrap { margin: 12px 0; }
@media (max-width: 760px) {
  .side-r { border-left: 0; }
  .frames.inner .frame { max-height: none; }
  .abyss { height: 2400px; }
}