*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--font-rounded: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--color-red: #ff3b30;--color-blue: #0047ab;--color-yellow: #ffd500;--color-ink: #1a1a1a;--color-bg: #ffffff;--color-surface: #ffffff;--color-text: #1a1a1a;--color-outline: #1a1a1a;--radius-lg: 22px;--radius-md: 14px;--outline-width: 3px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);font-family:var(--font-rounded);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--color-bg: #121218;--color-surface: #1c1c24;--color-text: #f5f5f7;--color-outline: #f5f5f7}}body{min-height:100dvh;background-color:var(--color-bg);color:var(--color-text)}.page{max-width:80ch;margin-inline:auto;padding:2rem;font-family:var(--font-rounded)}.designer{display:flex;flex-direction:column;align-items:center;gap:2rem;min-height:100dvh;padding:2.5rem 1.25rem 3rem}.designer__header{text-align:center;display:flex;flex-direction:column;gap:.5rem}.wordmark{font-family:var(--font-rounded);font-weight:700;font-size:clamp(2.75rem,7vw,4.25rem);letter-spacing:-.01em;line-height:1;margin:0;color:var(--color-blue);-webkit-text-stroke:2px var(--color-ink);text-shadow:4px 4px 0 var(--color-yellow)}.wordmark__accent{color:var(--color-red)}.designer__tagline{font-family:var(--font-rounded);font-weight:600;font-size:1.15rem;color:var(--color-text);margin:0}.designer__layout{display:grid;grid-template-columns:1fr;gap:2rem;width:100%;max-width:1100px}@media(min-width:860px){.designer__layout{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}.designer__preview-pane{order:0}}.designer__controls{display:flex;flex-direction:column;gap:1.5rem;background:var(--color-surface);border:var(--outline-width) solid var(--color-outline);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:6px 6px 0 var(--color-outline)}.field{display:flex;flex-direction:column;gap:.5rem}.field__label{font-weight:700;font-size:1rem;color:var(--color-text)}.field__input{font-family:inherit;font-size:1rem;min-height:48px;padding:.7rem 1rem;border:var(--outline-width) solid var(--color-outline);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}.field__input:focus-visible{outline:3px solid var(--color-blue);outline-offset:2px}.field__slider{appearance:none;width:100%;height:12px;border-radius:999px;border:2px solid var(--color-outline);background:linear-gradient(90deg,var(--color-yellow),var(--color-red));cursor:pointer}.field__slider::-webkit-slider-thumb{appearance:none;width:28px;height:28px;border-radius:50%;background:var(--color-blue);border:3px solid var(--color-ink);transition:transform .2s var(--ease-bounce)}.field__slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--color-blue);border:3px solid var(--color-ink);transition:transform .2s var(--ease-bounce)}.field__slider:hover::-webkit-slider-thumb,.field__slider:active::-webkit-slider-thumb{transform:scale(1.15)}.shape-picker{display:flex;flex-wrap:wrap;gap:.6rem}.shape-picker__option{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1 1 0;min-width:64px;padding:.6rem .4rem;border:var(--outline-width) solid var(--color-outline);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:transform .18s var(--ease-bounce),box-shadow .18s var(--ease-bounce)}.shape-picker__option:has(:checked){background:var(--color-yellow);box-shadow:3px 3px 0 var(--color-ink);transform:translate(-2px,-2px)}.shape-picker__option:has(:focus-visible){outline:3px solid var(--color-blue);outline-offset:2px}.shape-picker__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shape-picker__icon{width:28px;height:28px;fill:currentColor}.shape-picker__label{font-size:.7rem;font-weight:700;color:var(--color-text);text-align:center}.segmented{display:flex;border:var(--outline-width) solid var(--color-outline);border-radius:var(--radius-md);overflow:hidden}.segmented__option{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem .5rem;font-weight:700;font-size:.8rem;text-align:center;color:var(--color-text);background:var(--color-surface);border-right:var(--outline-width) solid var(--color-outline);cursor:pointer;transition:background .18s var(--ease-bounce),color .18s var(--ease-bounce)}.segmented__option:last-child{border-right:none}.segmented__option:has(:checked){background:var(--color-blue);color:#fff}.segmented__option:has(:focus-visible){outline:3px solid var(--color-red);outline-offset:-3px}.segmented__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.designer__preview-pane{display:flex;flex-direction:column;gap:1.25rem;order:-1}.keychain-preview{position:relative;aspect-ratio:4 / 3;border:var(--outline-width) solid var(--color-outline);border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,#eaf1ff,#fff);box-shadow:6px 6px 0 var(--color-outline)}.keychain-preview__canvas{width:100%;height:100%;touch-action:none}.keychain-preview__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;text-align:center;font-weight:600;background:#ffffffeb;color:var(--color-ink)}.button{font-family:inherit;font-weight:700;font-size:1.1rem;min-height:52px;padding:.9rem 1.75rem;border-radius:var(--radius-md);border:var(--outline-width) solid var(--color-ink);cursor:pointer;transition:transform .18s var(--ease-bounce),box-shadow .18s var(--ease-bounce);align-self:flex-start}.button--primary{background:var(--color-yellow);color:var(--color-ink);box-shadow:4px 4px 0 var(--color-ink)}.button--primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-ink)}.button--primary:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--color-ink)}.designer__error{color:var(--color-red);font-weight:600}