[hidden]{display:none!important}
:root{--bg:#fafaf8;--fg:#16161a;--mute:#8a8a94;--acc:#4f46e5;--card:#fff;--bd:#e4e4e7}
@media(prefers-color-scheme:dark){:root{--bg:#0e0e12;--fg:#f1f1f4;--mute:#7c7c88;--acc:#8b86ff;--card:#17171d;--bd:#2a2a33}}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font:18px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
main{width:min(760px,100% - 2rem);padding:2rem 0}
.prompt{display:flex;align-items:baseline;gap:.6em;font-size:clamp(1.6rem,5vw,2.8rem);font-weight:600;letter-spacing:-.02em;border-bottom:2px solid var(--bd);padding-bottom:.3em;transition:border-color .2s}
.prompt:focus-within{border-color:var(--acc)}
.lead{white-space:nowrap}
.field{position:relative;flex:1;min-width:0}
#want{width:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding:0}
.ghost{position:absolute;inset:0;color:var(--mute);pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ghost::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;background:var(--acc);vertical-align:-.1em;animation:blink 1s steps(1) infinite}
.field:has(#want:focus) .ghost,.field.filled .ghost{display:none}
@keyframes blink{50%{opacity:0}}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2rem}
.card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--bd);border-radius:14px;transition:transform .15s,border-color .15s;animation:in .3s both}
.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:var(--acc)}
.card.best{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.card small{color:var(--mute);font-size:.8rem}
.form{margin-top:1.5rem;display:grid;gap:1rem;animation:in .3s both}
.form label{display:grid;gap:.3rem;font-size:.9rem;color:var(--mute)}
.form input,.form textarea{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:.65rem .8rem}
.form input:focus,.form textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.seg{display:flex;border:0;padding:0;margin:0;gap:.5rem}
.seg label{flex:1}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:.6rem;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--fg);cursor:pointer}
.seg input:checked+span{background:var(--acc);border-color:var(--acc);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.form button{font:inherit;padding:.8rem;border:0;border-radius:10px;background:var(--acc);color:#fff;cursor:pointer;font-weight:600}
.form button:disabled{opacity:.5}
.hp{position:absolute;left:-9999px}
#status{margin:0;min-height:1.5em;font-size:.9rem}
#status.err{color:#dc2626}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:640px){.choices,.two{grid-template-columns:1fr}.prompt{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}