:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #302c26; background: #e8e2d2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow-x: clip; }
.landing { min-height: 100svh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(48px, calc(env(safe-area-inset-bottom) + 24px)) max(24px, env(safe-area-inset-left)); }
.site-name { font-size: 14px; font-weight: 500; letter-spacing: 0; margin-bottom: 36px; }
.mascot-stage { width: 230px; height: 278px; position: relative; margin-bottom: 32px; }
.mascot-toy { position: relative; z-index: 2; display: block; width: 100%; height: 100%; padding: 0; background: none; border: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transform-origin: 50% 78%; }
.mascot-toy.held { cursor: grabbing; }
.mascot-toy.poked { filter: saturate(1.35); }
.mascot { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
a { color: inherit; text-underline-offset: 5px; }
.browse { display: inline-block; padding: 12px 18px; font: 400 15px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.browse:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px dashed #75654b; outline-offset: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.page { max-width: 570px; margin: 0 auto; padding: 80px 26px; }
.page h1 { font-size: 27px; font-weight: 500; margin-top: 64px; }
.page p { font-size: 16px; line-height: 1.8; }
.page .back { font-size: 14px; }
@media (max-width: 600px) { .mascot-stage { width: 200px; height: 242px; } }
@media (max-height: 600px) { .landing { padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); } .site-name { margin-bottom: 12px; } .mascot-stage { width: 145px; height: 175px; margin-bottom: 20px; } }