:root{--paper:#f4ead5;--ink:#171717;--blue:#45b9d1;--pink:#ef7893;--orange:#ef6f2e;--yellow:#f7c62a;--radius:17px;--line:3px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:0;min-height:100dvh;padding:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-weight:700;text-rendering:geometricPrecision}
body::before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.055;background-image:radial-gradient(#000 .7px,transparent .8px);background-size:4px 4px}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
.skip-link{position:fixed;top:8px;left:8px;z-index:30;transform:translateY(-150%);border:2px solid var(--ink);border-radius:9px;padding:9px 13px;background:var(--paper)}.skip-link:focus{transform:none}
.poster-shell{width:100%;height:100dvh;min-height:640px;margin:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(rgba(23,23,23,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,23,.02) 1px,transparent 1px);background-size:7px 7px;animation:poster-in 650ms cubic-bezier(.16,1,.3,1) both}
.topbar{min-height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:8px 12px;border-bottom:var(--line) solid var(--ink)}
.brand{display:inline-flex;align-items:center;gap:10px;width:max-content;font-size:.77rem;font-weight:950;letter-spacing:-.025em}.brand-mark,.mini-p{width:38px;aspect-ratio:1;display:block;overflow:hidden;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}.brand-mark img,.mini-p img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.micro-nav{display:flex;align-items:center;gap:clamp(24px,5vw,76px);white-space:nowrap;font-size:.62rem;font-weight:900}.top-actions{justify-self:end;display:flex;align-items:center;gap:10px}.top-actions>a{min-height:34px;display:inline-flex;align-items:center;gap:9px;border:2px solid var(--ink);border-radius:999px;padding:0 14px;font-size:.63rem;font-weight:950}
.menu-button{width:40px;aspect-ratio:1;display:grid;place-content:center;gap:3px;border:2px solid var(--ink);border-radius:50%;cursor:pointer;background:var(--orange)}.menu-button span{width:14px;height:2px;display:block;background:var(--ink)}
.poster-grid{min-height:0;display:grid;grid-template-columns:minmax(0,2.15fr) minmax(310px,.85fr);grid-template-rows:minmax(170px,.72fr) minmax(270px,1.28fr);gap:12px;padding:12px}.title-block,.statement-block,.hero-art,.maker-card,.share-card,.tag-strip>div{border:var(--line) solid var(--ink);border-radius:var(--radius)}
.title-block{position:relative;grid-column:1;grid-row:1;display:flex;align-items:center;overflow:hidden;border:0;border-radius:0;padding:0 12px}.hero-art{grid-column:1;grid-row:2}.side-stack{min-width:0;min-height:0;grid-column:2;grid-row:1/3;display:grid;grid-template-rows:minmax(0,.7fr) minmax(0,1.18fr) minmax(0,.74fr);gap:12px}h1,h2,p{margin-top:0}h1{margin:0;font-size:clamp(5.4rem,9.5vw,9.6rem);font-weight:950;line-height:.72;letter-spacing:-.085em}
.roundel{position:absolute;top:16px;right:clamp(12px,2vw,32px);width:clamp(96px,10vw,138px);aspect-ratio:1;display:grid;grid-template-rows:auto 1fr auto;place-items:center;transform:rotate(8deg);border:var(--line) solid var(--ink);border-radius:50%;padding:10px;background:var(--blue);font-size:.62rem;font-weight:950}.roundel img{width:54%;aspect-ratio:1;border:2px solid var(--ink);border-radius:10px;object-fit:cover;transform:scale(1.08)}
.statement-block{display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,1.8vw,24px);background:#f8efde}.statement-block strong{padding-top:4px;font-size:clamp(1.4rem,2vw,2.08rem);font-weight:950;line-height:.94;letter-spacing:-.055em}.statement-rule{width:100%;height:2px;margin:11px 0;background:var(--ink)}.statement-block p{max-width:34ch;margin-bottom:11px;font-size:.73rem;line-height:1.4}.statement-block a{width:max-content;display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid var(--ink);padding-bottom:2px;font-size:.64rem;font-weight:950}
.hero-art{min-height:0;margin:0;overflow:hidden;background:var(--yellow)}.hero-art img{width:100%;height:100%;min-width:0;min-height:0;display:block;object-fit:cover;transition:transform 900ms cubic-bezier(.16,1,.3,1),filter 900ms ease}.hero-art:hover img{transform:scale(1.035);filter:saturate(1.08) contrast(1.03)}
.maker-card,.share-card{min-width:0;padding:clamp(16px,1.7vw,22px)}.maker-card{background:var(--blue)}.maker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.maker-head h2{margin:0;font-size:clamp(2rem,3vw,3.25rem);font-weight:950;line-height:.85;letter-spacing:-.065em}.maker-head>span{font-size:2rem}
form label,.name-output>span{display:block;margin-bottom:7px;font-size:.59rem;font-weight:950;letter-spacing:.08em}.field-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}input,.field-row button,.copy-button{border:2px solid var(--ink);border-radius:10px}input{width:100%;min-width:0;min-height:38px;padding:0 11px;outline:none;background:var(--paper);color:var(--ink);font-size:.78rem}input::placeholder{color:#67645e}input:focus{box-shadow:inset 0 0 0 2px var(--orange)}.field-row button,.copy-button{min-height:38px;padding:0 13px;cursor:pointer;background:var(--yellow);color:var(--ink);font-size:.66rem;font-weight:950}#form-message{min-height:12px;margin:3px 0 0;color:#5e1820;font-size:.66rem}
.name-output{margin-top:5px;border-top:2px solid var(--ink);padding-top:8px}.name-output strong{display:block;overflow-wrap:anywhere;font-size:clamp(1.3rem,2.35vw,2.45rem);line-height:.95;letter-spacing:-.055em}.copy-button{min-height:34px;margin-top:8px;background:var(--ink);color:var(--paper)}
.share-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--orange)}.share-card .burst{position:absolute;top:10px;right:12px;width:70px;aspect-ratio:1;display:grid;place-items:center;transform:rotate(9deg);border:var(--line) solid var(--ink);border-radius:46% 54% 49% 51%;background:var(--yellow);font-size:1.5rem;font-weight:950}.share-card h2{max-width:260px;margin:0 0 12px;font-size:clamp(2.6rem,4vw,4.4rem);font-weight:950;line-height:.79;letter-spacing:-.075em}.share-card p{max-width:240px;margin-bottom:16px;font-size:.76rem;line-height:1.4}.share-card>a{min-height:44px;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:10px;padding:0 13px;background:var(--paper);font-size:.68rem;font-weight:950}
.tag-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 12px 12px}.tag-strip>div{min-height:58px;display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--orange)}.tag-strip .tag-blue{background:#a5c9eb}.tag-strip .tag-pink{background:var(--pink)}.tag-strip .tag-yellow{background:var(--yellow)}.tag-icon{flex:0 0 auto;font-size:1.8rem;font-weight:950}.tag-strip b{font-size:.7rem;line-height:.95}.tag-strip small{font-size:.58rem}.tag-strip .mini-p{flex:0 0 38px}
a,button{transition:transform 180ms cubic-bezier(.16,1,.3,1),box-shadow 180ms ease}.top-actions>a:hover,.share-card>a:hover,.field-row button:hover,.copy-button:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}button:active,a:active{transform:translateY(1px) scale(.98);box-shadow:none}
.title-block h1,.roundel,.statement-block,.hero-art,.maker-card,.share-card,.tag-strip>div{animation:rise-in 580ms cubic-bezier(.16,1,.3,1) both}.roundel{animation-delay:90ms}.statement-block{animation-delay:130ms}.hero-art{animation-delay:170ms}.maker-card{animation-delay:210ms}.share-card{animation-delay:250ms}.tag-strip>div{animation-delay:290ms}.name-output.is-updated{animation:name-pop 380ms cubic-bezier(.16,1,.3,1)}
@keyframes poster-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes name-pop{50%{transform:scale(1.025) rotate(-.6deg)}}
@media (min-width:901px) and (max-height:760px){.poster-shell{height:100dvh}.topbar{min-height:54px}.poster-grid{grid-template-rows:minmax(160px,.65fr) minmax(250px,1.35fr)}.tag-strip>div{min-height:50px}}
@media (max-width:900px){.poster-shell{height:auto;min-height:calc(100dvh - 24px)}.topbar{grid-template-columns:1fr auto}.micro-nav{display:none}.poster-grid{grid-template-columns:1fr;grid-template-rows:auto}.title-block,.hero-art,.side-stack{grid-column:1;grid-row:auto}.side-stack{grid-template-rows:auto;gap:12px}.title-block{min-height:220px}h1{font-size:clamp(4.4rem,15vw,7.2rem)}.statement-block{min-height:250px}.hero-art{min-height:54vw}.maker-card,.share-card{min-height:320px}.tag-strip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.brand>span:last-child,.top-actions>a{display:none}.title-block{min-height:194px;padding:0 4px}h1{font-size:clamp(3.8rem,19vw,5.8rem)}.roundel{top:10px;right:4px;width:80px;padding:7px;font-size:.48rem}.hero-art{min-height:78vw}.field-row{grid-template-columns:1fr 72px}.tag-strip{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media (prefers-contrast:more){:root{--line:4px}}
