:root {
  color-scheme: light;
  --ink: #20334a;
  --paper: #fffdf1;
  --teal: #087d73;
  --pink: #ffb8d2;
  --purple: #733c98;
  font-family: Verdana, Arial, sans-serif;
  color: var(--ink);
  background: #eaf3d4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: #eaf3d4;
  background-image: radial-gradient(#a6c296 1px, transparent 1px);
  background-size: 18px 18px;
  font-size: 16px;
  line-height: 1.65;
}
a { color: #0756b6; }
a:hover { color: #bf2867; }
.site-shell {
  width: min(100% - 28px, 1020px);
  margin: 22px auto;
  overflow: hidden;
  border: 4px ridge #d7d4b4;
  background: var(--paper);
  box-shadow: 8px 9px 0 #263d4824;
}
.masthead {
  padding: 18px clamp(20px, 5vw, 54px) 30px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #087d73 0%, #2866a1 48%, #743c96 100%);
  border-bottom: 4px ridge #b7e6c9;
}
.topline { display: flex; justify-content: space-between; gap: 12px; color: #f5ffd0; font-size: .72rem; }
.sticker-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 17px 0 12px; }
.sticker { display: inline-flex; min-height: 28px; align-items: center; padding: 3px 9px; border: 2px outset #fff6; border-radius: 3px; background: #fff3a4; color: #183a6a; font: 700 .68rem/1.2 Verdana, sans-serif; letter-spacing: .04em; }
.sticker.spin { min-width: 32px; justify-content: center; border-radius: 50%; background: #d8f5ff; font-size: 1.2rem; }
h1 { margin: 4px 0 0; font: 700 clamp(2.2rem, 7vw, 4.4rem)/1.08 Georgia, 'Times New Roman', serif; text-shadow: 3px 3px #253e68; }
.welcome-line { margin: 12px 0 2px; color: #fff6ae; font: 700 clamp(1.1rem, 3vw, 1.5rem) Georgia, 'Times New Roman', serif; }
.intro { max-width: 640px; margin: 8px auto 20px; }
.rainbow { height: 8px; border: 1px solid #fff9; background: linear-gradient(90deg, #ff6879 0 16.6%, #ffbf49 16.6% 33.2%, #fff07c 33.2% 49.8%, #65df92 49.8% 66.4%, #71d9ef 66.4% 83%, #d19cff 83%); }
.page-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 13px 16px; border-bottom: 2px groove #d2cbb0; background: #f4f0dc; }
.page-index a { padding: 5px 11px; border: 2px outset #d7d0b6; background: #fffdf1; font-size: .83rem; font-weight: 700; text-decoration: none; }
.page-index a:hover { border-style: inset; background: #fff4c4; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .85fr); gap: 18px; padding: clamp(18px, 4vw, 34px); }
.panel { min-width: 0; padding: 19px 21px; border: 3px ridge #ccc4a4; background: #fff9dd; box-shadow: 3px 4px 0 #334a3211; }
.panel h2 { margin: 3px 0 10px; color: #194778; font: 700 clamp(1.15rem, 2.5vw, 1.45rem)/1.25 Georgia, 'Times New Roman', serif; }
.panel p { margin: 9px 0; }
.section-kicker { color: #98518e; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.about { background: #f0f7e5; }
.profile { background: #f1edff; }
.profile dl { margin: 14px 0 0; }
.profile dl > div { display: grid; grid-template-columns: 88px 1fr; gap: 7px; padding: 7px 0; border-bottom: 1px dotted #a49ac1; }
.profile dt { color: #625a79; font-size: .86rem; }
.profile dd { margin: 0; font-weight: 700; }
.online { color: #207843; }
.online i, .dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #43b963; box-shadow: 0 0 0 3px #43b96330; vertical-align: 1px; }
.tiny-gif { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; padding: 8px; border: 2px inset #c9bee9; background: #fff; color: #70428b; font-size: .8rem; }
.tiny-gif span { font-size: 1.6rem; animation: wave 900ms ease-in-out infinite alternate; }
.homepage { background: #fff0f5; }
.guest-note { background: #eaf7ff; }
.mini-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.badge { display: inline-block; padding: 5px 8px; border: 2px outset #dcc5e9; background: #f5e8ff; color: #593a72; font: 700 .68rem Verdana, sans-serif; }
.badge.wave { background: #e2f5ff; border-color: #b8d8ee; }
.badge.sparkle { background: #fff3b7; border-color: #eadca7; }
.blink-note { margin-top: 16px; padding: 9px 11px; border: 2px dashed #91b280; background: #fbffe9; font-size: .85rem; font-weight: 700; }
.signature { margin-top: 16px; color: #5f5874; font-family: Georgia, serif; font-style: italic; }
.signature strong { color: #344b7a; font-size: 1.25rem; }
.site-footer { padding: 16px; border-top: 2px groove #d2cbb0; background: #f4f0dc; text-align: center; font-size: .76rem; }
.site-footer p { margin: 4px 0; }
.footer-sparkle { color: #ab5096; letter-spacing: .35em; }
.footer-stickers { margin: 10px 0 0; }
.blink { animation: blink 1.15s steps(2, start) infinite; }
.blink.slow { animation-duration: 1.8s; }
.sparkle { animation: twinkle 1.35s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: .28; } }
@keyframes twinkle { to { opacity: .55; transform: scale(.94); } }
@keyframes wave { to { transform: rotate(18deg) scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 7s linear infinite; }
@media (max-width: 680px) {
  .site-shell { width: min(100% - 16px, 540px); margin: 8px auto; }
  .topline { font-size: .65rem; }
  .sticker-row { gap: 6px; }
  .content-grid { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .panel { padding: 16px; }
  .page-index { gap: 5px; }
  .page-index a { padding: 5px 8px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}