:root { color: #111; background: #f7f3e7; font-family: "Times New Roman", Times, serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; }
.bug-control { position: fixed; z-index: 20; top: 1.1rem; right: 1.25rem; display: flex; align-items: center; gap: .55rem; color: #6d3b1d; font: 1.05rem "Times New Roman", Times, serif; }
.bug-toggle { position: relative; width: 3.6rem; height: 1.85rem; padding: 0; border: 2px solid #372213; border-radius: 999px; background: linear-gradient(#7f4b25 0%, #39200f 52%, #1b0d05 100%); box-shadow: inset 0 2px 3px #160900, inset 0 -1px #b67943, 0 2px 0 #f4c486, 0 4px 7px #59402b; cursor: pointer; }
.bug-toggle span { position: absolute; top: .15rem; left: .17rem; width: 1.3rem; height: 1.3rem; border: 1px solid #4d321b; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fffce7 0 12%, #e6bd70 38%, #9d5e22 72%, #5a2f10 100%); box-shadow: inset 0 1px 2px #fff, 0 1px 3px #130b05; transition: transform 220ms ease; }
.bug-toggle[aria-checked="true"] { background: linear-gradient(#b6de4d 0%, #527d21 52%, #213d0e 100%); }
.bug-toggle[aria-checked="true"] span { transform: translateX(1.68rem); }
.dark-mode-control { position: fixed; z-index: 20; top: 4rem; right: 1.25rem; }
.dark-mode-toggle { padding: .46rem .8rem; border: 3px outset #52739e; border-radius: .55rem; background: linear-gradient(#274c78 0%, #102744 48%, #061525 52%, #183e68 100%); box-shadow: inset 0 1px #8fbedf, inset 0 -2px #020914, 0 3px 5px rgb(0 0 0 / .4); color: #e7f6ff; cursor: pointer; font: bold .88rem "Times New Roman", Times, serif; text-shadow: 0 1px #020914; }
.dark-mode-toggle:hover { filter: brightness(1.17); }.dark-mode-toggle:active { transform: translateY(1px); border-style: inset; }
.home-page.dark-mode { background: radial-gradient(circle at 50% 8%, #213c6a, #071329 68%); color: #dceeff; }.home-page.dark-mode .nav-switch, .home-page.dark-mode .classic-nav a { color: #b8dcff; }.home-page.dark-mode .classic-nav a:visited { color: #d1bdf8; }.home-page.dark-mode .nav-hint, .home-page.dark-mode .home-copyright { color: #c4d7f4; }.home-page.dark-mode .floating-url { color: #8eb1db; }.home-page.dark-mode .dark-mode-toggle { border-color: #e4f5ff; background: linear-gradient(#e9f8ff 0%, #afd7f2 47%, #7fa8c8 52%, #d8f1ff 100%); box-shadow: inset 0 1px #fff, inset 0 -2px #6d90af, 0 3px 5px rgb(0 0 0 / .4); color: #17314d; text-shadow: 0 1px #fff; }
.bug-world { position: fixed; z-index: 12; inset: 0; pointer-events: none; overflow: hidden; }
.bug { position: absolute; width: clamp(54px, 7vw, 92px); padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; user-select: none; will-change: transform, left, top; }
.bug img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 3px 2px rgb(0 0 0 / .27)); }
.bug:focus-visible { outline: 2px dotted #111; outline-offset: 3px; }
.bug-dialogue { position: fixed; z-index: 13; width: clamp(150px, 18vw, 235px); pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.bug-dialogue.is-visible { opacity: 1; }
.bug-dialogue img { display: block; width: 100%; height: auto; }
main { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.navigation-shell { width: min(100%, 1210px); text-align: center; }
.nav-hint { margin: 0 0 .35rem; font-size: .95rem; }
.viewport-warning { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(26 0 0 / .55); }.viewport-warning[hidden] { display: none; }.viewport-warning-card { width: min(440px, 100%); padding: 1.3rem; border: 4px ridge #ffb0a7; border-radius: .65rem; background: linear-gradient(#ff6659, #a90000 58%, #5b0000); box-shadow: inset 0 2px #ffd2cd, inset 0 -3px #530000, 0 8px 25px #180000; color: #fff; font: bold 1.15rem "Times New Roman", Times, serif; text-align: center; text-shadow: 1px 2px #470000; }.viewport-warning-card p { margin: 0 0 1rem; line-height: 1.35; }.viewport-warning-card button { border: 2px outset #fff1dd; border-radius: .25rem; background: linear-gradient(#fff8e8, #d7b990); color: #4c160e; cursor: pointer; font: bold .9rem Arial, sans-serif; padding: .45rem .75rem; }
.image-navigation { overflow: hidden; max-height: 80vh; opacity: 1; transition: max-height 650ms ease, opacity 350ms ease; }
.image-navigation.is-collapsing { max-height: 0; opacity: 0; }
.nav-splash { display: block; width: 100%; height: 65vh; max-height: 666px; object-fit: contain; margin: 0 auto; }
.classic-nav a { color: #0000ee; text-decoration: underline; }
.classic-nav a:visited { color: #551a8b; }
.nav-splash { cursor: pointer; }
.nav-switch { margin-top: .6rem; padding: 0; border: 0; background: transparent; color: #0000ee; font: inherit; text-decoration: underline; cursor: pointer; }
.nav-switch:visited { color: #551a8b; }
.text-navigation { opacity: 0; transform: translateY(-.75rem); transition: opacity 400ms ease, transform 400ms ease; }
.text-navigation.is-visible { opacity: 1; transform: translateY(0); }
.text-navigation h1 { margin: 0 0 1rem; font-size: clamp(1.7rem, 4vw, 3rem); font-weight: bold; }
.classic-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.15rem; font-size: 1.1rem; }
.classic-nav a { white-space: nowrap; }
.floating-url { position: fixed; z-index: -1; color: #857d67; font-size: clamp(.85rem, 1.4vw, 1.1rem); opacity: .54; pointer-events: none; user-select: none; }
.floating-url-one { top: 10%; left: 6%; transform: rotate(-12deg); }
.floating-url-two { top: 75%; right: 7%; transform: rotate(9deg); }
.floating-url-three { top: 35%; right: 4%; transform: rotate(-6deg); }
.home-copyright { position: fixed; z-index: 1; right: 0; bottom: .65rem; left: 0; color: #706952; font-size: .8rem; text-align: center; }
.placeholder-page main { align-content: center; text-align: center; }
.placeholder-page h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); }
.placeholder-page p { font-size: 1.2rem; }
.skeuomorphic-button { display: inline-block; margin-top: 1rem; padding: .65rem 1.5rem; border: 2px solid #4c4c4c; border-radius: .4rem; background: linear-gradient(#fdfdfd 0%, #d4d4d4 48%, #aaa 52%, #e8e8e8 100%); box-shadow: inset 0 1px #fff, inset 0 -1px #777, 0 2px 3px #777; color: #111; font: bold 1rem Arial, sans-serif; text-decoration: none; text-shadow: 0 1px #fff; }
.skeuomorphic-button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px #777; }
@media (max-width: 560px) { main { padding: 1rem .65rem; } .nav-splash { height: 56vh; } .floating-url-three { display: none; } }
@media (max-width: 560px) { .bug-control { top: .65rem; right: .7rem; font-size: .86rem; } .dark-mode-control { top: 3.15rem; right: .7rem; }.dark-mode-toggle { font-size: .75rem; } .bug { width: 54px; } .bug-dialogue { width: 145px; } }