@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap";:root{font-family:var(--font-body);line-height:1.5;font-weight:400;color:#311f19;background:radial-gradient(circle at top left,oklch(94% .05 95) 0%,transparent 30%),linear-gradient(180deg,#fcf9ea,#faf1dc);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-display: "Fraunces", serif;--font-body: "Manrope", sans-serif;--paper: oklch(99% .02 95 / .92);--paper-elevated: oklch(100% 0 0 / .82);--ink: oklch(26% .03 40);--ink-soft: oklch(43% .03 45);--accent: oklch(63% .13 82);--accent-deep: oklch(47% .16 64);--line: oklch(84% .03 85);--line-strong: oklch(74% .06 82)}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{margin:0;min-height:100vh}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(color-mix(in oklch,var(--accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--accent) 8%,transparent) 1px,transparent 1px);background-size:42px 42px;opacity:.35;pointer-events:none}a{color:inherit}button,input,textarea,select{font:inherit}#root{position:relative;min-height:100vh}.shell{display:grid;grid-template-columns:minmax(16rem,28rem) minmax(20rem,44rem);gap:clamp(1.5rem,4vw,4rem);align-items:start;min-height:100vh;padding:clamp(1.25rem,2vw,2rem)}.hero-copy{position:sticky;top:1.25rem;display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.5rem)}.eyebrow{margin:0;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-deep)}.hero-copy h1,.completion-card h2,.flashcard h2{margin:0;font-family:var(--font-display);font-weight:600;line-height:.95;letter-spacing:-.03em}.hero-copy h1{font-size:clamp(3rem,6vw,5.4rem);text-wrap:balance}.intro,.completion-card p,.meta p,.progress-label,.species-latin{margin:0;color:var(--ink-soft)}.legend{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.75rem}.legend span{padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--paper-elevated);font-size:.82rem}.stage{position:relative}.progress-strip{overflow:hidden;width:100%;height:.45rem;border-radius:999px;background:color-mix(in oklch,var(--accent) 12%,white);margin-bottom:1rem}.progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%);transition:width .32s ease}.flashcard,.completion-card{display:grid;gap:1rem;padding:clamp(1rem,2.5vw,1.5rem);background:radial-gradient(circle at top left,color-mix(in oklch,var(--accent) 18%,white) 0%,transparent 28%),var(--paper);border:1px solid var(--line-strong);border-radius:2rem;box-shadow:0 2.2rem 5rem color-mix(in oklch,var(--accent-deep) 14%,transparent)}.card-topline{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}.progress-label{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}.species-latin{font-size:.95rem;font-style:italic;text-align:right}.flashcard h2,.completion-card h2{font-size:clamp(2rem,4vw,3.6rem)}.identity-panel{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:1.2rem;background:color-mix(in oklch,var(--paper) 76%,white);border:1px solid color-mix(in oklch,var(--accent) 16%,var(--line))}.identity-panel h2{min-height:1.2em}.identity-panel:not(.is-open) h2,.identity-panel:not(.is-open) .reveal-label{color:var(--ink-soft)}.photo-frame{margin:0;position:relative;overflow:hidden;border-radius:1.5rem;aspect-ratio:4 / 3;background:color-mix(in oklch,var(--accent) 9%,white)}.photo-frame:after{content:"";position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(180deg,transparent 0%,color-mix(in oklch,var(--ink) 30%,transparent) 100%);pointer-events:none}.creature-photo{width:100%;height:100%;object-fit:cover;display:block}.reveal-panel{display:grid;gap:.8rem;padding:1rem 1.1rem;border-radius:1.2rem;background:var(--paper-elevated);border:1px solid color-mix(in oklch,var(--accent) 18%,var(--line))}.reveal-label{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}.reveal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.reveal-grid div{display:grid;gap:.35rem;min-height:4.8rem;padding:.9rem;border-radius:1rem;background:color-mix(in oklch,var(--paper) 55%,white)}.reveal-grid span{font-size:.82rem;color:var(--ink-soft)}.reveal-grid strong{font-size:1rem;line-height:1.3}.reveal-panel:not(.is-open) strong{color:var(--ink-soft)}.actions{display:flex;flex-wrap:wrap;gap:.75rem}.primary-button,.secondary-button{appearance:none;border:0;border-radius:999px;padding:.95rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.primary-button{color:#fff;background:linear-gradient(135deg,var(--accent-deep),var(--accent));box-shadow:0 .9rem 1.8rem color-mix(in oklch,var(--accent-deep) 28%,transparent)}.secondary-button{color:var(--ink);background:var(--paper-elevated);border:1px solid var(--line)}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.primary-button:focus-visible,.secondary-button:focus-visible,.meta a:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}.meta{display:grid;gap:.35rem;font-size:.88rem}.meta a{width:fit-content;color:var(--accent-deep);text-underline-offset:.2em}@media(max-width:960px){.shell{grid-template-columns:1fr}.hero-copy{position:static;padding-inline:0;padding-top:0}}@media(max-width:640px){.flashcard,.completion-card{border-radius:1.35rem}.reveal-grid{grid-template-columns:1fr}.card-topline{flex-direction:column;align-items:flex-start}.species-latin{text-align:left}}