:root {
  color-scheme: light dark;
  --paper: #f7f6f2;
  --ink: #252722;
  --muted: #6b6d65;
  --line: #d8d9d1;
  --hover: #eeeee7;
  --accent: #5a6844;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
*, *::before, *::after { -webkit-user-select: none; user-select: none; }
body { margin: 0; }

.page {
  width: min(100% - 64px, 680px);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding-top: max(44px, env(safe-area-inset-top));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}


main { padding-block: clamp(12px, calc((100svh - 660px) / 2), 88px); margin-block: auto; }
.profile { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
h1 {
  margin: 0 0 0 -5px;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(76px, 11vw, 108px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.065em;
}
.period { color: var(--accent); }
.avatar { position: relative; display: block; flex: 0 0 128px; }
.avatar img { display: block; width: 100%; height: auto; }
.links { margin-top: 64px; }
h2 { margin: 0 0 20px; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
li { border-bottom: 1px solid var(--line); }
a, .discord-row {
  display: flex;
  align-items: center;
  min-height: 82px;
  padding: 18px 4px;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.link-name { font-size: 22px; letter-spacing: -.035em; }
.link-name, .home-link > span { position: relative; }
a .link-name::after, button.discord-row .link-name::after, .home-link > span::after {
  content: ""; position: absolute; inset: auto 0 -5px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 180ms ease;
}
a:focus-visible .link-name::after, button.discord-row:focus-visible .link-name::after, .home-link:focus-visible > span::after { transform: scaleX(1); }
a:focus-visible, .discord-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 1px; }
@media (hover: hover) {
  a:hover, button.discord-row:hover { color: var(--accent); }
  a:hover .link-name::after, button.discord-row:hover .link-name::after, .home-link:hover > span::after { transform: scaleX(1); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-color-scheme: dark) {
  :root { --paper: #191a18; --ink: #eeeee7; --muted: #a2a59a; --line: #393c34; --hover: #22251f; --accent: #b5c39e; }
}

@media (max-width: 480px) {
  .page { width: calc(100% - 48px); padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .profile { gap: 20px; }
  .avatar { flex-basis: 88px; }
  h1 { font-size: 76px; margin-left: -3px; }
  .links { margin-top: 48px; }
  a, .discord-row { min-height: 78px; }
  .link-name { font-size: 20px; }
}

@media (max-width: 350px) {
  .page { width: calc(100% - 40px); }
  h1 { font-size: 66px; }
  .avatar { flex-basis: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media print {
  :root { --paper: white; --ink: black; --muted: #444; --line: #ccc; }
  .page { min-height: auto; }
  main { padding-block: 48px; }
  a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  a::after { content: attr(href); font-size: 12px; }
}

/* Small discoveries; the profile stays still until you interact. */
.pet { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 16%; -webkit-tap-highlight-color: transparent; }
.pet:disabled { cursor: default; }
.pet picture { display: block; }
.cat-message, .cat-sleep { position: absolute; right: 0; top: -20px; font-size: 12px; line-height: 1; color: var(--muted); pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
.cat-message { right: 0; top: -26px; width: max(100%, 128px); text-align: center; line-height: 1.5; }
.cat-sleep { font-family: Georgia, serif; font-style: italic; }
.avatar.is-speaking .cat-message, .avatar.is-sleeping .cat-sleep { opacity: 1; }
:root.blue-mode { --paper: #f0f6f7; --ink: #203537; --muted: #536d71; --line: #ccdfe1; --hover: #e4eff1; --accent: #24727c; }
.blue-mode .avatar img { border-radius: 16%; }
@media (prefers-color-scheme: dark) {
  :root.blue-mode { --paper: #142225; --ink: #e5f1f2; --muted: #9db7bb; --line: #334b50; --hover: #1c2e32; --accent: #80c6cf; }
}
@media print {
  .cat-message, .cat-sleep { display: none; }
}

.discord-row { width: 100%; justify-content: space-between; gap: 16px; border: 0; background: none; font: inherit; text-align: left; }
button.discord-row { cursor: copy; }
button.discord-row:disabled { cursor: default; }
.discord-feedback { margin: -8px 4px 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.period { position: relative; min-width: 24px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; touch-action: manipulation; }
.period:disabled { cursor: default; }
.paw { position: absolute; bottom: .05em; left: 50%; width: .25em; height: .25em; transform: translateX(-50%); fill: currentColor; visibility: hidden; }
.period.is-paw .period-dot { visibility: hidden; }
.period.is-paw .paw { visibility: visible; }
.cat-message { white-space: nowrap; }
.print-surprise { display: none; }
@media print {
  :root, :root.blue-mode { --paper: white; --ink: black; --muted: #444; --line: #ccc; }
  .print-surprise { display: block; margin: 8px 0 0; font: 11px/1.5 Georgia, serif; text-align: center; color: #444; }
  .pet { transform: none !important; }
}

.period.is-missing .period-dot, .period.is-missing .paw { visibility: hidden; }
.cat-cloud { position: absolute; top: -50px; left: 8px; width: 28px; height: 21px; color: var(--muted); visibility: hidden; pointer-events: none; }
.avatar.is-raining .cat-cloud { visibility: visible; }
.avatar.is-mirrored .pet picture { transform: scaleX(-1); }
@media print {
  .cat-cloud { display: none; }
  .avatar.is-mirrored .pet picture { transform: none; }
  .period.is-missing .period-dot { visibility: visible; }
}

.not-found h1 { font-size: clamp(88px, 14vw, 144px); }
.error-dot { color: var(--accent); }
.error-copy { margin-block: 40px 44px; }
.error-copy h2 { margin: 0 0 12px; color: var(--ink); font-size: 24px; font-weight: 400; letter-spacing: -.035em; text-transform: none; }
.error-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.home-link { justify-content: space-between; gap: 24px; border-block: 1px solid var(--line); font-size: 16px; }
.home-link svg { color: var(--muted); flex-shrink: 0; }
@media print {
  .home-link svg { display: none; }
}

/* One short entrance, with all content usable from the first frame. */
@media screen and (prefers-reduced-motion: no-preference) {
  main { animation: arrive 250ms ease-out; }
  main:focus-within { animation: none; }
}
@keyframes arrive {
  from { opacity: .65; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
button.discord-row .discord-confirmation {
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
  opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms;
}
button.discord-row.is-copied .discord-confirmation { opacity: 1; visibility: visible; transition-delay: 0s; }
.copy-check { font-size: 14px; line-height: 1; }
@media print {
  .link-name::after, .home-link > span::after { display: none; }
}

/* Seasonal palettes retain the same typography, spacing, and light/dark preference. */
:root[data-season="christmas"] { --season-paper-light: #f7f4ee; --season-ink-light: #2b332c; --season-muted-light: #676d61; --season-line-light: #d9dacf; --season-accent-light: #873f43; --season-paper-dark: #19231e; --season-ink-dark: #eef1e7; --season-muted-dark: #acb7a5; --season-line-dark: #39473b; --season-accent-dark: #dfa2a0; }
:root[data-season="birthday"], :root[data-season="valentine"], :root[data-season="anniversary"] { --season-paper-light: #f8f3f6; --season-ink-light: #362c3a; --season-muted-light: #746675; --season-line-light: #e0d5df; --season-accent-light: #81578f; --season-paper-dark: #251d29; --season-ink-dark: #f2eaf4; --season-muted-dark: #baabbe; --season-line-dark: #4a3b4f; --season-accent-dark: #d0addd; }
:root[data-season="easter"] { --season-paper-light: #f5f6ed; --season-ink-light: #30372d; --season-muted-light: #66705d; --season-line-light: #d6ddc9; --season-accent-light: #5b7144; --season-paper-dark: #20251c; --season-ink-dark: #eef2e5; --season-muted-dark: #afbba0; --season-line-dark: #404b35; --season-accent-dark: #bed298; }
:root[data-season="halloween"] { --season-paper-light: #faf3e9; --season-ink-light: #3e3027; --season-muted-light: #79664f; --season-line-light: #e2d4c1; --season-accent-light: #945321; --season-paper-dark: #261f1b; --season-ink-dark: #f6ecdf; --season-muted-dark: #c0ad97; --season-line-dark: #514030; --season-accent-dark: #e5a461; }
:root[data-season="newyear"], :root[data-season="newyearseve"], :root[data-season="vappu"], :root[data-season="catday"], :root[data-season="milestone"] { --season-paper-light: #f8f5ec; --season-ink-light: #383329; --season-muted-light: #736b55; --season-line-light: #dfd8c5; --season-accent-light: #796127; --season-paper-dark: #23221b; --season-ink-dark: #f4efdd; --season-muted-dark: #bcb397; --season-line-dark: #4a4532; --season-accent-dark: #dac17a; }
@media screen {
  :root[data-season]:not(.blue-mode):not([data-season="aprilfools"]):not([data-season="friday13"]) { --paper: var(--season-paper-light); --ink: var(--season-ink-light); --muted: var(--season-muted-light); --line: var(--season-line-light); --accent: var(--season-accent-light); }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-season]:not(.blue-mode):not([data-season="aprilfools"]):not([data-season="friday13"]) { --paper: var(--season-paper-dark); --ink: var(--season-ink-dark); --muted: var(--season-muted-dark); --line: var(--season-line-dark); --accent: var(--season-accent-dark); }
}
.introduction { position: relative; min-width: 0; }
.bio { max-width: 32ch; margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.season-label { position: absolute; top: 100%; left: 0; margin: 18px 0 0; color: var(--accent); font-size: 11px; line-height: 1.5; letter-spacing: .025em; white-space: nowrap; }
.season-ornament { position: absolute; bottom: -4px; right: -4px; width: 34px; height: 34px; padding: 3px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); pointer-events: none; }
.season-ornament svg { display: block; width: 100%; height: 100%; }
.season-ornament[hidden], .season-label[hidden] { display: none; }
.not-found .profile { position: relative; }
@media print { .season-ornament, .season-label { display: none; } }

.season-ornament.is-interactive { width: 44px; height: 44px; padding: 0; border: 0; background: none; bottom: -12px; right: -8px; }
.season-action { display: block; width: 44px; height: 44px; padding: 7px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); pointer-events: auto; cursor: pointer; }
.season-action[aria-disabled="true"] { cursor: default; }
.season-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.season-egg { display: none; position: absolute; bottom: .03em; left: 50%; width: .27em; height: .31em; transform: translateX(-50%); }
:root[data-season="easter"]:not(.egg-found) .period-dot { visibility: hidden; }
:root[data-season="easter"]:not(.egg-found) .season-egg { display: block; }
:root[data-season="easter"] .period.is-missing .season-egg { visibility: hidden; }
@media print { .season-egg { display: none !important; } :root[data-season="easter"] .period-dot { visibility: visible; } }

/* Hidden discoveries use a native modal for keyboard focus and Escape support. */
body:has(.discovery-panel[open]) { overflow: hidden; }
.discovery-panel { width: min(480px, calc(100% - 32px)); max-height: 85vh; max-height: 85svh; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); overflow-y: auto; }
.discovery-panel::backdrop { background: rgb(0 0 0 / .38); }
.discovery-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.discovery-header h2 { margin: 0; font: 400 28px/1.2 Georgia, serif; letter-spacing: -.04em; text-transform: none; color: var(--ink); }
.discovery-panel button { font: inherit; color: inherit; cursor: pointer; }
.panel-close { flex: 0 0 44px; height: 44px; padding: 0; border: 0; background: transparent; font-size: 26px !important; }
.discovery-panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel-intro, .panel-note, .panel-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.panel-intro { margin: 12px 0 24px; }
.command-list { margin: 0; }
.command-list > div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.command-list dt { overflow-wrap: anywhere; }
.command-list dd { margin: 0; color: var(--muted); }
.command-list code { font-family: ui-monospace, monospace; font-size: 11px; }
.panel-note { margin: 24px 0 16px; }
.panel-button { width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: transparent; font-size: 13px !important; text-align: left; }
.panel-hint { margin: 18px 0 0; font-size: 11px; }
.season-options { display: grid; gap: 8px; }
.season-options button { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: transparent; text-align: left; font-size: 13px; }
.season-options small { color: var(--muted); font-size: 11px; }
.season-options button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
@media (hover: hover) { .discovery-panel button:hover { color: var(--accent); } }
@media print { .discovery-panel { display: none; } }

.vappu-cap { display: none; position: absolute; top: -12px; left: 33%; width: 40%; pointer-events: none; }
.vappu-cap svg { display: block; width: 100%; }
:root[data-season="vappu"] .vappu-cap { display: block; }
.cat-snow { position: absolute; right: 0; top: -52px; width: 100%; height: 30px; color: var(--accent); visibility: hidden; pointer-events: none; }
.avatar.is-snowing .cat-snow { visibility: visible; }
@media print { .vappu-cap, .cat-snow { display: none !important; } }

/* The folded corner can be pulled, tapped, or activated with a keyboard. */
.page-corner { display: none; position: fixed; right: 0; bottom: 0; z-index: 5; width: 44px; height: 44px; border: 0; padding: 18px 4px 3px 19px; background: linear-gradient(135deg, transparent 48%, var(--line) 49%, var(--hover) 52%); color: var(--muted); cursor: grab; touch-action: none; }
.page-corner[hidden] { display: none; }
.page-corner:active { cursor: grabbing; }
.page-corner:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.page-corner span { font-size: 15px; }
@media (min-width: 1921px) { .page-corner:not([hidden]) { display: block; } }
@media (max-width: 1920px) { .corner-peek { display: none; } }
.corner-peek { position: fixed; right: 0; bottom: 0; z-index: 4; width: var(--peel-size, 64px); height: var(--peel-size, 64px); background: var(--hover); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; visibility: hidden; }
.is-peeking .corner-peek { visibility: visible; }
.sketchbook { width: min(480px, calc(100% - 32px), 75svh); padding: 0; border-radius: 2px; overflow: visible; }
.sketch-dismiss { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; }
.sketchbook .sketch-dismiss:focus-visible { outline-offset: 6px; }
.sketch-dismiss svg { position: absolute; display: block; height: auto; }
.sketch-cat { width: 55%; top: 10%; left: 9%; color: var(--muted); transform: rotate(-8deg); }
.sketch-tracks { width: 27%; top: 24%; right: 8%; color: var(--accent); opacity: .55; transform: rotate(12deg); }
.sketch-fish { width: 37%; bottom: 10%; left: 15%; color: var(--muted); transform: rotate(-15deg); }
@media (max-height: 700px) {
  .page { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .links { margin-top: 32px; }
}
.wave-paw { position: absolute; width: 35%; height: 45%; right: -12%; bottom: 12%; color: var(--accent); visibility: hidden; pointer-events: none; transform-origin: 50% 95%; }
.is-waving .wave-paw { visibility: visible; animation: goodbye 1s ease-in-out; }
@keyframes goodbye { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(22deg); } 40%, 80% { transform: rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .is-waving .wave-paw { animation: none; } }
@media print { .page-corner, .corner-peek, .wave-paw { display: none !important; } }

/* Hidden cat interactions stay out of the Tab sequence without focus rings. */
.pet:focus, .period:focus { outline: none; }

/* Visitors peek from behind em without moving the profile or adding Tab stops. */
.avatar { isolation: isolate; }
.pet { position: relative; z-index: 1; }
.rare-visitor { position: absolute; top: -25px; left: -18px; z-index: 0; width: 54px; height: 52px; padding: 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; animation: visitor-arrive 500ms ease-out both; -webkit-tap-highlight-color: transparent; }
.rare-visitor svg { display: block; width: 100%; height: 100%; fill: var(--paper); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rare-visitor svg path:not(:first-child) { fill: none; }
.rare-visitor:focus { outline: none; }
@keyframes visitor-arrive { from { opacity: 0; transform: translate(9px, 16px); } to { opacity: 1; transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .rare-visitor { animation: none; } }
@media print { .rare-visitor { display: none !important; } }