*{box-sizing:border-box}body{color:#24221f;background:#f6f5f2;margin:0;font-family:Hiragino Sans,Noto Sans JP,sans-serif}button,input{font:inherit;color:inherit}.app{max-width:960px;margin:0 auto;padding:24px 16px 64px}h1{margin:0 0 20px;font-size:22px}.layout{gap:28px;display:grid}.stage{align-content:start;gap:16px;display:grid}.name-field{gap:6px;font-size:14px;display:grid}.name-field input,.share-url{background:#fff;border:2px solid #24221f;border-radius:10px;width:100%;padding:10px 14px;font-size:18px}.share-url{font-size:13px}.preview{justify-content:center;align-items:flex-end;gap:16px;display:flex}.preview svg,.option svg{aspect-ratio:1;border-radius:50%;width:100%;display:block}.preview-large{width:min(64vw,260px)}.preview-large svg{box-shadow:0 2px 12px #00000024}.preview-small{width:48px}.actions{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.actions button,.tab{cursor:pointer;background:#fff;border:2px solid #24221f;border-radius:10px;padding:12px 8px;font-size:15px}.notice{min-height:1.5em;margin:0;font-size:14px;line-height:1.5}.tabs{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.tab[aria-pressed=true]{color:#fff;background:#24221f}.option-group h3{margin:20px 0 10px;font-size:14px}.option-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px;display:grid}.option{cursor:pointer;background:0 0;border:3px solid #0000;border-radius:50%;padding:3px}.option[aria-pressed=true]{border-color:#24221f}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #3f6fd1}@media (width>=800px){.layout{grid-template-columns:300px 1fr;align-items:start}.stage{position:sticky;top:24px}.preview-large{width:240px}}