:root {
  color-scheme: light;
  --paper: #fafaf8;
  --ink: #222326;
  --shadow-opacity: .07;
  --penguin-filter: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14161a;
    --ink: #eae7de;
    --shadow-opacity: .3;
    --penguin-filter: brightness(1.25) drop-shadow(0 0 1px #949bae70);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14161a;
  --ink: #eae7de;
  --shadow-opacity: .3;
  --penguin-filter: brightness(1.25) drop-shadow(0 0 1px #949bae70);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { min-height: 100svh; overflow-x: hidden; }
main { position: relative; min-height: 100svh; }
.name-area { position: absolute; z-index: 2; left: 5%; right: 5%; top: calc(37% + 46px); text-align: center; user-select: none; }
h1 { margin: 0; font: 400 clamp(3rem, 9.3vw, 9.25rem)/1.18 Georgia, "Times New Roman", serif; letter-spacing: -.065em; white-space: nowrap; }
h1 .letter { position: relative; display: inline-block; transition: opacity .35s, transform .35s; }
h1 .letter.stolen { opacity: .08; transform: translateY(4px); }
h1 .space { width: .24em; }
.creature {
  --appearance-scale: .84; --appearance-y: 0%;
  --eye-left-x: 38.319%; --eye-left-y: 38.298%;
  --eye-right-x: 66.541%; --eye-right-y: 38.130%;
  --pupil-size: 4.5%; --gaze-x: 0px; --gaze-y: 0px;
  --happy-x: 4.306%; --happy-y: 0%; --sleepy-x: .080%; --sleepy-y: 2.711%; --sleep-x: 4.306%; --sleep-y: 2.711%;
  --sprite: url('/assets/penguin.png');
  position: fixed; left: calc(50% + 55px); top: calc(50% + 95px); z-index: 3;
  width: 140px; height: 140px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; will-change: transform;
}
.creature:focus-visible { outline: 2px dashed var(--ink); outline-offset: -10px; }
.creature[data-action="peek"] { z-index: 1; }
.body { display: block; position: absolute; inset: 0; transform-origin: 50% 88%; will-change: transform; }
.creature[data-action="slide"] .body, .creature[data-action="flop"] .body { transform-origin: 50% 68%; }
.appearance { display: block; position: absolute; inset: 0; transform: translateY(var(--appearance-y)) scale(var(--appearance-scale)); transform-origin: 50% 50%; }
.sprite { display: block; position: absolute; inset: 0; background-image: var(--sprite); background-size: 200% 200%; background-position: 0 0; background-repeat: no-repeat; filter: var(--penguin-filter); }
.creature[data-face="happy"] .sprite { background-position: 100% 0; transform: translate(var(--happy-x), var(--happy-y)); }
.creature[data-face="drowsy"] .sprite { background-position: 0 100%; transform: translate(var(--sleepy-x), var(--sleepy-y)); }
.creature[data-face="sleep"] .sprite { background-position: 100% 100%; transform: translate(var(--sleep-x), var(--sleep-y)); }
.pupil { position: absolute; display: block; width: var(--pupil-size); height: var(--pupil-size); border-radius: 50%; background: #242325; transform: translate(calc(-50% + var(--gaze-x)), calc(-50% + var(--gaze-y))); }
.pupil.left { left: var(--eye-left-x); top: var(--eye-left-y); }
.pupil.right { left: var(--eye-right-x); top: var(--eye-right-y); }
.creature:not([data-face="alert"]) .pupils { display: none; }
.shadow { position: absolute; bottom: 9%; left: 22%; right: 22%; height: 6%; border-radius: 50%; background: #000; opacity: var(--shadow-opacity); filter: blur(3px); transform: scale(var(--shadow-scale, 1)); }
.held-letter { position: absolute; top: 56%; left: 64%; font: 400 2.15rem/1 Georgia, "Times New Roman", serif; color: #292724; transform: rotate(-18deg); pointer-events: none; }
.held-letter:empty { display: none; }
.snores { position: absolute; inset: 0; display: none; pointer-events: none; }
.creature[data-action="sleep"] .snores { display: block; }
.snores i { position: absolute; right: 13%; top: 4%; font: .875rem Georgia, serif; opacity: 0; animation: snore 3.6s ease-out infinite; }
.snores i:nth-child(2) { animation-delay: 1.2s; }
.snores i:nth-child(3) { animation-delay: 2.4s; }
@keyframes snore { 0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); } 25% { opacity: .6; } 100% { opacity: 0; transform: translate(26px, -38px) rotate(14deg); } }
.flying-letter { position: fixed; left: 0; top: 0; z-index: 4; font-family: Georgia, "Times New Roman", serif; color: var(--ink); line-height: 1.18; pointer-events: none; will-change: transform; font-weight: 400; letter-spacing: -.065em; transform-origin: 0 0; }
.affection { position: absolute; right: 10%; top: 15%; font-size: 1rem; color: #bd8681; opacity: 0; pointer-events: none; }
.affection.visible { animation: heart-rise 1.2s ease-out forwards; }
@keyframes heart-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-44px) scale(.85); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .name-area { top: calc(34% + 40px); left: 4%; right: 4%; }
  h1 { font-size: clamp(2.7rem, 11.5vw, 4.6rem); }
  .creature { width: 124px; height: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  h1 .letter { transition: none; }
  .snores i { animation: none; opacity: .55; }
  .snores i:nth-child(2) { transform: translate(10px, -12px); }
  .snores i:nth-child(3) { transform: translate(20px, -24px); }
  .affection.visible { animation: none; opacity: .7; }
}