:root{--abyss: #01040c;--water-hi: #051229;--ink: #cfdcec;--ink-dim: #708aa6;--line: rgba(140, 170, 205, .22);--serif: "Cormorant Garamond", "Times New Roman", serif;--mono: "IBM Plex Mono", "Menlo", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(120% 90% at 50% 22%,var(--water-hi) 0%,var(--abyss) 68%) fixed;color:var(--ink);font-family:var(--mono);overflow:hidden}.stage{position:fixed;top:0;right:0;bottom:0;left:0}.canvas{position:absolute!important;top:0;right:0;bottom:0;left:0}.masthead{position:absolute;top:clamp(1.2rem,3vw,2.4rem);left:clamp(1.2rem,3.5vw,3rem);pointer-events:none}.eyebrow{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.5rem}.wordmark{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;letter-spacing:.04em;color:var(--ink)}.plate{position:absolute;left:clamp(1.2rem,3.5vw,3rem);bottom:clamp(1.2rem,4vh,2.6rem);width:min(21.5rem,calc(100vw - 2.4rem));border:1px solid var(--line);padding:1.1rem 1.25rem 1.2rem;background:#0207128c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:surface .9s cubic-bezier(.2,.7,.2,1) both}.plate:before{content:"";position:absolute;top:.35rem;right:.35rem;bottom:.35rem;left:.35rem;border:1px solid rgba(140,170,205,.1);pointer-events:none}.plate-no{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}.plate-name{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.1;margin:.45rem 0 .3rem}.plate-name em{font-style:italic}.plate-habitat{font-size:.7rem;color:var(--ink-dim);margin-bottom:.95rem}.plate-traits{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem;border-top:1px solid var(--line);padding-top:.85rem}.plate-traits dt{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.15rem}.plate-traits dd{font-size:.82rem}.swatch{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.4em;box-shadow:0 0 8px 1px currentColor}.controls{position:absolute;right:clamp(1.2rem,3.5vw,3rem);bottom:clamp(1.2rem,4vh,2.6rem);display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}.controls button{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}.btn-primary{border:1px solid rgba(160,190,225,.55);background:#96b9e11a;color:var(--ink);padding:.75rem 1.3rem}.btn-primary:hover{background:#a0c3eb3d}.btn-ghost{border:1px solid transparent;background:none;color:var(--ink-dim);padding:.4rem .2rem}.btn-ghost:hover{color:var(--ink)}.controls button:focus-visible{outline:2px solid #9fc4ff;outline-offset:3px}.hint{font-size:.6rem;letter-spacing:.2em;color:#708aa6b3;text-transform:uppercase}@keyframes surface{0%{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.plate{animation:none}.controls button{transition:none}}@media(max-width:640px){.controls{right:1.2rem;bottom:auto;top:clamp(1.2rem,3vw,2.4rem)}.plate{width:calc(100vw - 2.4rem)}}