@font-face {
  font-family: Bookman;
  src: url('./assets/Bookman-DemiItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
:root { color-scheme: light; --paper:#f5edcf; --ink:#a73129; --muted:#935f4b; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
header { padding:34px 28px 0; text-align:center; }
h1 { margin:0; font-size:15px; line-height:1.3; font-weight:500; letter-spacing:-.035em; }
h1 span { display:inline-block; margin:0 6px; font-weight:400; opacity:.75; }
main { width:100%; min-width:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.generator { width:100%; min-width:0; padding:30px 32px 45px; text-align:center; }
.name-stage { min-width:0; display:flex; justify-content:center; align-items:center; width:100%; min-height:220px; padding:10px 0 22px; }
button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.name { display:block; max-width:100%; border:0; padding:0 .035em .08em; background:none; color:inherit; cursor:copy; font:italic 700 clamp(48px,17vw,240px)/1.13 Bookman,Georgia,serif; letter-spacing:-.065em; white-space:nowrap; }
.name span { display:inline-block; transform-origin:50% 70%; }
.name .compound { display:block; }
.name .adjective { display:block; font-size:clamp(20px,4.5vw,62px); line-height:1.5; letter-spacing:-.045em; }
.name.pop > span { animation:pop 230ms cubic-bezier(.2,.8,.25,1); }
@keyframes pop { 0% { transform:translateY(7px) rotate(-1.8deg) scale(.97); opacity:.55; } 100% { transform:none; opacity:1; } }
.generate { min-height:52px; min-width:154px; margin-top:31px; padding:14px 24px; display:inline-flex; align-items:center; justify-content:center; gap:24px; border:1.5px solid var(--ink); border-radius:100px; background:var(--ink); color:var(--paper); font:500 15px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.025em; cursor:pointer; transition:background 120ms,color 120ms,transform 120ms; }
.generate span { font-size:21px; line-height:.8; font-weight:400; }
@media (hover:hover) { .generate:hover { background:transparent; color:var(--ink); } .name:hover { opacity:.9; } }
.generate:active { transform:translateY(2px); }
button:focus-visible { outline:2px solid var(--ink); outline-offset:7px; }
.name:focus-visible { border-radius:8px; }
footer { min-height:64px; padding:14px 24px 28px; text-align:center; color:var(--muted); font-size:11px; line-height:1.4; letter-spacing:.01em; }
footer span span { margin:0 8px; }
.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) { header { padding-top:26px; } h1 { font-size:14px; } .generator { padding:20px 18px 54px; } .name-stage { min-height:150px; padding-bottom:12px; } .generate { margin-top:30px; min-height:52px; } footer { padding-bottom:max(22px,env(safe-area-inset-bottom)); font-size:10px; } }
@media (max-height:440px) and (orientation:landscape) { header { padding-top:16px; } .generator { padding-top:10px; padding-bottom:10px; } .name-stage { min-height:100px; padding-bottom:0; } .name { font-size:min(14vw,130px); } .generate { margin-top:6px; min-height:44px; padding-top:10px; padding-bottom:10px; } footer { min-height:38px; padding-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }