.sound-search{display:block;width:100%;border:1px solid var(--menu-border,#deded7);border-radius:9px;background:var(--page);color:var(--ink);padding:10px 12px;margin:12px 0 10px;font-size:12px}
.sound-menu{width:min(430px,calc(100vw - 36px));padding:17px}
.sound-menu .sound-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:min(330px,45dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.sound-options::-webkit-scrollbar{display:none}
.sound-row{min-width:0;border:1px solid transparent;background:var(--pill);border-radius:9px;padding:3px 5px 3px 0;gap:0}
.sound-row[hidden]{display:none!important}
.sound-row:hover{background:var(--pill-hover)}
.sound-row:has([aria-checked=true]){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.sound-option{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:7px;row-gap:3px;padding:9px 6px;min-width:0}
.sound-dot{grid-row:1/3;width:12px;height:15px;border-radius:4px;box-shadow:inset 0 1px 0 #ffffff60,0 2px 0 color-mix(in srgb,var(--sound-color) 65%,#000)}
.sound-name{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.sound-category{grid-column:2;font-size:9px}
.preview-sound{flex-shrink:0;width:24px;height:28px}
.sound-empty{color:var(--muted);font-size:11px;padding:12px 0}
.style-option:focus-visible,.sound-option:focus-visible,.preview-sound:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-height:760px) and (min-width:601px){.popover{max-height:calc(100dvh - 130px);overflow-y:auto;scrollbar-width:none}.sound-menu{max-height:calc(100dvh - 145px)}}
@media(max-width:600px){.sound-menu{width:calc(100vw - 36px);max-width:430px;left:18px;right:auto;padding:12px}.sound-option{padding:8px 5px;column-gap:5px}.sound-name{font-size:10px}.sound-category{font-size:8px}.preview-sound{width:22px}}

.plus-badge{font-size:8px;color:var(--accent);margin-left:auto;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:4px;padding:1px 4px}.sound-option .plus-badge{grid-column:2;justify-self:start;margin-left:0}.style-option[data-locked=true]{opacity:.75}#keyko-plus{font:inherit;font-size:11px;color:var(--accent);border:1px solid var(--line);border-radius:20px;padding:8px 12px;background:var(--panel)}
.sound-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.sound-filters button{border:1px solid var(--menu-border,#deded7);border-radius:20px;padding:6px 10px;font:inherit;font-size:10px;background:transparent;color:var(--muted);cursor:pointer}.sound-filters button[aria-pressed=true]{color:var(--ink);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--page))}.sound-favorite{width:22px;flex-shrink:0;align-self:center;border:0;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;padding:5px 0}.sound-favorite[aria-pressed=true]{color:var(--accent)}.sound-favorite:focus-visible,.sound-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sound-row .sound-option{flex:1}

/* Shared Keyko typography and the quiet, rounded controls from web and Mac. */
@font-face{font-family:Bricolage;src:url('/fonts/bricolage-grotesque-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
.wordmark,.result-intro h1,.help-dialog h2{font-family:Bricolage,-apple-system,sans-serif;letter-spacing:-1px}.brand-logo{filter:drop-shadow(0 3px 3px #24304c14)}
.selector-button{border:1px solid var(--line);border-radius:24px;background:linear-gradient(color-mix(in srgb,var(--panel) 90%,#fff),var(--pill));box-shadow:inset 0 1px 0 #ffffff20,0 2px 0 color-mix(in srgb,var(--line) 70%,transparent)}.selector-button:hover{background:var(--pill-hover)}.icon-button{border:1px solid var(--line);background:var(--pill);border-radius:50%}.popover{border-radius:22px;box-shadow:0 18px 55px #15203918,0 2px 6px #15203908}.sound-search{border-radius:13px}.sound-row,.style-option{border-radius:13px}.sound-filters button{padding:7px 11px}.sound-option{padding:10px 8px}.help-dialog{border-radius:28px}.help-dialog h2{font-weight:600}.again-button,#keyko-plus{border-radius:24px}.site-header .header-right{gap:12px}#keyko-plus{padding:9px 14px;background:var(--panel)}
@media(prefers-reduced-motion:reduce){.selector-button,.icon-button{transition:none}}
/* Keep the keyboard and its controls together on laptop-height new tabs. */
@media(max-height:850px) and (min-width:901px){.site-header{padding-top:24px}.workspace{margin-top:32px}.typing-stage{margin-top:24px;height:138px;min-height:138px}.words,.word{line-height:46px}.word{height:46px}.keyboard-section{margin-top:25px}.key{height:47px}.control-bar{margin-top:18px}.under-keyboard{margin-top:14px}.site-footer{padding-top:20px;padding-bottom:18px}}