:root{--editor-bg:var(--background-intermediate);--editor-border:var(--input-border);--editor-font:var(--font-monospace);--gutter-bg:var(--background-intermediate);--gutter-fg:var(--foreground-tertiary);--gutter-border:transparent;--tooltip-border:var(--input-border);--tooltip-bg:var(--background-panel);--tooltip-fg:var(--foreground-primary);--tooltip-highlight-bg:light-dark(color-mix(var(--color-sky-100) 50%, transparent),color-mix(var(--color-sky-700) 50%, transparent));--tooltip-highlight-fg:var(--foreground-primary);--active-line-bg:light-dark(color-mix(var(--color-sky-200) 35%, transparent),color-mix(var(--color-sky-200) 5%, transparent));--selection-bg-focused:light-dark(color-mix(var(--color-sky-100) 50%, transparent),color-mix(var(--color-sky-700) 50%, transparent));--selection-bg:light-dark(color-mix(var(--color-slate-200) 50%, transparent),color-mix(var(--color-slate-700) 50%, transparent));--cursor-color:var(--foreground-primary);--icon-class:url(/assets/symbols/curly-brackets-light.svg);--icon-feature:url(/assets/symbols/asterisk-rounded-light.svg);--icon-keyword:url(/assets/symbols/short-text-rounded-light.svg);--editor-content:var(--foreground-primary);--editor-comment:light-dark(var(--color-orange-800),var(--color-orange-300));--editor-keyword:var(--foreground-secondary);--editor-number:light-dark(var(--color-pink-800),var(--color-pink-300));--editor-class:light-dark(var(--color-sky-800),var(--color-sky-300));--editor-class-definition-bg:light-dark(color-mix(var(--color-sky-200) 50%, transparent),transparent);--editor-class-definition-shadow:2px 0px 0px 0px var(--editor-class-definition-bg), -2px 0px 0px 0px var(--editor-class-definition-bg);--editor-class-bg:light-dark(color-mix(var(--color-sky-200) 15%, transparent),transparent);--editor-class-shadow:2px 0px 0px 0px var(--editor-class-bg), -2px 0px 0px 0px var(--editor-class-bg);--editor-feature:light-dark(var(--color-emerald-800),var(--color-emerald-300));--editor-feature-definition-bg:light-dark(color-mix(var(--color-emerald-200) 50%, transparent),transparent);--editor-feature-definition-shadow:2px 0px 0px 0px var(--editor-feature-definition-bg), -2px 0px 0px 0px var(--editor-feature-definition-bg);--editor-feature-bg:light-dark(color-mix(var(--color-emerald-200) 15%, transparent),transparent);--editor-feature-shadow:2px 0px 0px 0px var(--editor-feature-bg), -2px 0px 0px 0px var(--editor-feature-bg);--editor-operator:var(--editor-content);--editor-punctuation:var(--editor-content)}.sound-change-runner-main{flex-direction:column;display:flex;@media (width>=1664px){width:calc(var(--page-width) + 2rem + 800px);flex-direction:row;gap:1rem;position:relative;left:calc(-400px - 1rem);& #input-words,& #output,& .empty-output{width:400px;min-width:400px}& #input-words,& .empty-output{min-height:25rem}& .sound-change-rules{min-width:var(--page-width);width:var(--page-width)}}}@keyframes grid-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}details.advanced-options{border:var(--border);background-color:var(--background-panel);border-radius:var(--rounding);& summary{user-select:none;flex-direction:row;align-items:center;padding:.5rem;display:flex;& svg.icon{transition:transform .15s ease-in-out}&::marker,& :is(){content:"";width:0;display:none}}&>.animation{animation-name:grid-expand;animation-timing-function:ease-out;animation-duration:var(--duration-fast)}&>.collapsing{animation-timing-function:ease-in;animation-direction:reverse;animation-duration:var(--duration-fast)}&[open]{& summary svg.icon{transform:rotate(90deg)}}& div.container{animation-duration:.2s;display:grid;overflow:hidden}& div.content{min-height:0;padding:.5rem}}.sound-changer-section{flex-direction:column;gap:.5rem;display:flex}#changes{font-family:var(--font-monospace)}#input-words,#changes{resize:vertical}.button-row{flex-direction:row;gap:.5rem;display:flex}.copy-output{width:calc(11ch + 1.5rem)}.copy-input-output{width:calc(20ch + 1.5rem)}#run-button{width:calc(9ch + 1.5rem)}.changes-editor-container{resize:vertical;min-height:400px;overflow:auto;& .cm-editor{height:100%;max-height:100vh}& .cm-gutter,& .cm-content{min-height:25rem}}table{border-spacing:0;border-collapse:separate;border:var(--border);border-radius:var(--rounding);background-color:var(--background-panel);overflow:hidden;& caption{font-family:var(--font-heading);text-align:left;padding-bottom:.25rem}& th{font-family:var(--font-heading);background-color:var(--background-intermediate);text-align:center;max-height:1.5rem;padding:.5rem;font-size:.875rem;font-weight:450}& th,& td{border:var(--border)}& td{text-align:center;padding:.5rem}& thead tr:first-child th:first-child{border-top-left-radius:var(--rounding)}& thead tr:first-child th:last-child{border-top-right-radius:var(--rounding)}& tbody,& tbody tr:last-child,& tbody tr:last-child th.row{border-bottom-left-radius:var(--rounding)}& tbody,& tbody tr:last-child,& tbody tr:last-child td:last-child{border-bottom-right-radius:var(--rounding)}}h2#output-label{font-size:inherit;margin:1rem 0 0}div.empty-output{border:1.5px dashed var(--input-border);border-radius:var(--rounding);color:var(--foreground-secondary);justify-content:center;align-items:center;min-height:257px;font-style:italic;display:flex}.combobox-options{width:var(--input-width);z-index:10;border-radius:var(--rounding);border:var(--border);background-color:var(--background-panel);max-height:200px;box-shadow:0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);--curve:cubic-bezier(.3, 0, .8, .15);opacity:1;transition:opacity .12s var(--curve), transform .12s var(--curve);position:absolute;overflow:auto;transform:scale(1)translateY(0);&[data-enter],&[data-leave]{opacity:0;transform:scale(.95)translateY(-5px)}&.single{font-family:var(--font-monospace)}& .combobox-option{user-select:none;cursor:pointer;flex-direction:row;align-items:center;gap:.5rem;padding:.25rem .5rem;display:flex;& .checkmark svg{opacity:0;&.visible{opacity:1}}&[data-focus]{background-color:color-mix(var(--color-sky-100) 50%, transparent)}}}.combobox-input-container.multiple{cursor:text;font-family:var(--font-normal);border:1px solid var(--input-border);border-radius:var(--rounding);background-color:var(--input-background);color:var(--foreground-primary);outline:0 #0000;flex-flow:wrap;align-items:center;font-size:1rem;transition:background-color .25s ease-in-out,border-color .25s ease-in-out;display:flex;&:has(input:focus-visible){outline:2px solid var(--focus-ring);border:1px solid var(--input-border-focus);background-color:var(--input-background-focus)}&:has(input:active){background-color:var(--input-background-focus);border:1px solid var(--input-border-focus)}& .selected-option{cursor:pointer;background-color:var(--background-intermediate);border-radius:var(--rounding);border:var(--border);flex-direction:row;align-items:center;gap:.125rem;margin:.25rem;padding:.125rem .25rem .125rem .5rem;font-size:.9rem;display:flex}& input{flex:1;min-width:8ch;padding:.5rem;&:focus{outline:none}}}@media (prefers-color-scheme:dark){:root{--icon-class:url(/assets/symbols/curly-brackets-dark.svg);--icon-feature:url(/assets/symbols/asterisk-rounded-dark.svg);--icon-keyword:url(/assets/symbols/short-text-rounded-dark.svg)}}@media (not (pointer:none)) and (scripting:enabled){.tab-warning{display:none}}