:root{--ink:#271b2c;--paper:#fff9ed;--pink:#ff6b8b;--yellow:#ffd447;--purple:#6f4cff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 15% 15%,#ffd5df 0 9%,transparent 10%),radial-gradient(circle at 85% 80%,#e1d9ff 0 12%,transparent 13%),var(--paper);font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}main{width:min(960px,calc(100% - 32px));margin:0 auto;padding:64px 0}.hero{text-align:center;margin-bottom:34px}.eyebrow{margin:0;color:var(--purple);font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}h1{margin:8px 0;font-size:clamp(2.6rem,8vw,5.6rem);line-height:.95;letter-spacing:-.06em}.intro{max-width:610px;margin:18px auto 0;font-size:1.05rem;line-height:1.55}.generator{background:rgba(255,255,255,.78);border:3px solid var(--ink);border-radius:28px;box-shadow:9px 9px 0 var(--ink);padding:clamp(20px,5vw,42px)}.names-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:16px;gap:16px}.name-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:2px solid var(--ink);border-radius:18px;background:white;transition:transform .15s,background .15s}.name-card.kept{background:#fff2b7;transform:rotate(-1deg)}.name-card>span{font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.name-card input{width:100%;border:0;border-bottom:3px solid var(--ink);outline:0;padding:5px 0;background:transparent;font-size:clamp(1.3rem,4vw,2rem);font-weight:900}.keep,.swap{border:0;background:transparent;color:var(--ink)}.keep{padding:4px 0;text-align:left;font-size:.86rem}.swap{width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:1.6rem;font-weight:900}.swap:hover{transform:rotate(180deg);transition:transform .25s}.mode-picker{margin:0 0 28px;padding:0;border:0;text-align:center}.mode-picker legend{width:100%;margin-bottom:11px;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.mode-picker>div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.mode-picker label{padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:white;font-size:.82rem;font-weight:800;cursor:pointer}.mode-picker label.selected{color:white;background:var(--purple);box-shadow:2px 2px 0 var(--ink)}.mode-picker input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.result{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:10px;margin:38px 0 10px;font-size:clamp(2rem,7vw,4.8rem);font-weight:950;letter-spacing:-.05em;text-align:center}.result b{color:var(--pink)}.variant-picker{position:relative;display:inline-flex}.result-name{padding:0;border:0;border-bottom:3px dotted transparent;color:inherit;background:transparent;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:1}.result-name:focus-visible,.result-name:hover{border-bottom-color:var(--purple);outline:none}.result-name small{margin-left:.18em;color:var(--purple);font-size:.28em;vertical-align:middle}.variant-hover-bridge{z-index:9;top:100%;width:min(280px,calc(100vw - 48px));height:16px}.variant-hover-bridge,.variant-menu{position:absolute;left:50%;transform:translateX(-50%)}.variant-menu{z-index:10;top:calc(100% + 12px);display:flex;width:max-content;min-width:190px;max-width:min(280px,calc(100vw - 48px));padding:10px;border:2px solid var(--ink);border-radius:14px;background:white;box-shadow:5px 5px 0 var(--ink);flex-direction:column;gap:4px;font-size:.9rem;font-weight:700;letter-spacing:0;text-align:left}.variant-menu:before{content:"";position:absolute;top:-7px;left:calc(50% - 6px);width:10px;height:10px;border-top:2px solid var(--ink);border-left:2px solid var(--ink);background:white;transform:rotate(45deg)}.variant-menu strong{padding:3px 8px 7px;color:#685f6b;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.variant-menu button{display:flex;justify-content:space-between;gap:18px;padding:9px 10px;border:0;border-radius:8px;color:var(--ink);background:transparent;text-align:left}.variant-menu button.selected,.variant-menu button:focus-visible,.variant-menu button:hover{background:#f0ecff;outline:none}.loading-result,.variant-menu button span{color:var(--purple)}.loading-result{min-height:78px;align-items:center;font-size:clamp(1.15rem,4vw,1.65rem);letter-spacing:-.02em}.loading-sparkle{display:inline-block;color:var(--pink);font-size:1.5em;animation:sparkle-spin 1.8s ease-in-out infinite}.loading-dots{display:inline-flex;align-items:center;gap:4px}.loading-dots i{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:dot-bounce 1s ease-in-out infinite}.loading-dots i:nth-child(2){animation-delay:.14s}.loading-dots i:nth-child(3){animation-delay:.28s}@keyframes sparkle-spin{50%{transform:rotate(150deg) scale(1.25)}}@keyframes dot-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-7px)}}.score{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:48px;text-align:center}.score strong{color:var(--purple)}.score span{font-size:.9rem}.generate{display:block;margin:28px auto 0;padding:14px 22px;border:3px solid var(--ink);border-radius:999px;color:white;background:var(--purple);box-shadow:4px 4px 0 var(--ink);font-weight:900}.generate:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.generate:disabled{opacity:.5;cursor:wait}.primary-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:28px}.primary-actions .generate{margin:0}.back-combination{padding:12px 16px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);background:white;font-weight:800}.back-combination:hover:not(:disabled){background:#f0ecff}.back-combination:disabled{opacity:.35;cursor:not-allowed}.collection-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}.collection-actions button{padding:8px 11px;border:1px solid #b9acbd;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.7);font-size:.78rem;font-weight:800}.collection-actions button:hover{border-color:var(--ink);background:white}.collection-actions button span{display:inline-grid;min-width:19px;height:19px;margin-left:3px;padding:0 5px;place-items:center;border-radius:999px;color:white;background:var(--ink);font-size:.68rem}.collection-actions .favorite{color:#a63256}.collection-actions .favorite.active{color:white;border-color:#a63256;background:#d9416d}.status{margin:18px 0 0;color:#685f6b;font-size:.78rem;text-align:center}.collection-backdrop{position:fixed;z-index:100;inset:0;display:grid;padding:24px;place-items:center;background:rgba(39,27,44,.48);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collection-panel{display:flex;width:min(560px,100%);max-height:min(720px,calc(100vh - 48px));padding:24px;border:3px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:9px 9px 0 var(--ink);flex-direction:column}.collection-panel>header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.collection-panel header p{margin:0 0 4px;color:var(--purple);font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.collection-panel h2{margin:0;font-size:clamp(1.5rem,5vw,2.25rem);letter-spacing:-.04em}.close-panel{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;color:var(--ink);background:white;font-size:1.5rem;font-weight:900;line-height:1}.empty-collection{margin:24px 0;padding:28px 16px;border:2px dashed #b9acbd;border-radius:16px;color:#685f6b;text-align:center}.combination-list{overflow-y:auto;display:flex;margin:0;padding:0 7px 7px 0;list-style:none;flex-direction:column;gap:8px}.combination-list li{display:flex;align-items:stretch;gap:6px;border:2px solid transparent;border-radius:13px;background:white}.combination-list li.current{border-color:var(--purple);background:#f0ecff}.choose-combination{flex:1 1;display:flex;min-width:0;padding:12px 14px;border:0;border-radius:11px;color:var(--ink);background:transparent;flex-direction:column;gap:3px;text-align:left}.choose-combination:focus-visible,.choose-combination:hover{background:#fff2b7;outline:none}.choose-combination strong{overflow:hidden;font-size:1.05rem;text-overflow:ellipsis;white-space:nowrap}.choose-combination strong b{margin:0 4px;color:var(--pink)}.choose-combination small{color:#685f6b;font-size:.7rem;font-weight:600}.remove-favorite{flex:0 0 44px;border:0;border-radius:11px;color:#d9416d;background:transparent;font-size:1.2rem}.remove-favorite:focus-visible,.remove-favorite:hover{color:white;background:#d9416d;outline:none}@media (max-width:680px){main{padding-top:36px}.names-row{grid-template-columns:1fr}.swap{margin:-7px auto;z-index:1}.generator{box-shadow:5px 5px 0 var(--ink)}.variant-menu{position:fixed;top:auto;right:20px;bottom:20px;left:20px;width:auto;max-width:none;transform:none}.variant-hover-bridge,.variant-menu:before{display:none}.primary-actions{align-items:stretch;flex-direction:column-reverse}.primary-actions button{width:100%}.collection-backdrop{padding:0;place-items:end center}.collection-panel{width:100%;max-height:82vh;padding:20px;border-width:3px 0 0;border-radius:24px 24px 0 0;box-shadow:0 -5px 0 var(--ink)}}@media (prefers-reduced-motion:reduce){.loading-dots i,.loading-sparkle{animation:none}}