/*
 * Apple-inspired Liquid Glass for VoiceForge.
 *
 * Liquid Glass is a functional layer above content. This file therefore
 * limits it to navigation, segmented controls and actions. Cards, panels and
 * FAQ rows stay on the opaque content layer. The material uses a restrained
 * neutral fill, a small amount of blur and a single hairline rim. It has no
 * dimensional highlights, drop shadows, colored halos, pointer tilt or glow.
 */

:root{
  --lg-radius:999px;
  --lg-shell-radius:22px;
  --lg-surface:rgba(255,255,255,.64);
  --lg-surface-scrolled:rgba(255,255,255,.72);
  --lg-surface-control:rgba(255,255,255,.56);
  --lg-track:rgba(118,118,128,.10);
  --lg-surface-selected:rgba(255,255,255,.96);
  --lg-surface-hover:rgba(255,255,255,.48);
  --lg-rim:rgba(255,255,255,.66);
  --lg-rim-soft:rgba(18,27,41,.10);
  --lg-filter:blur(24px) saturate(106%);
  --lg-shadow-shell:none;
  --lg-shadow-control:none;
  --lg-shadow-selection:none;
  --lg-ease:cubic-bezier(.2,.8,.2,1);
  --lg-duration:320ms;
}

/* One floating navigation plane, with no opaque bar behind it. */
.navbar{
  position:sticky!important;
  top:0!important;
  z-index:300;
  box-sizing:border-box;
  min-height:0!important;
  padding:8px 12px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.nav-inner{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:1160px;
  height:auto!important;
  min-height:56px;
  margin:0 auto;
  padding:7px 9px;
  overflow:visible;
  border:1px solid var(--lg-rim);
  border-radius:var(--lg-shell-radius);
  background-color:var(--lg-surface);
  box-shadow:var(--lg-shadow-shell);
  -webkit-backdrop-filter:var(--lg-filter);
  backdrop-filter:var(--lg-filter);
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.navbar.scrolled .nav-inner{
  background-color:var(--lg-surface-scrolled);
  border-color:rgba(255,255,255,.60);
  box-shadow:none;
}

.nav-logo{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:9px;
  color:var(--text);
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  text-decoration:none;
}

.nav-logo:hover{
  opacity:.86;
  text-decoration:none;
}

.nav-logo-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  overflow:hidden;
  border-radius:9px;
  transition:transform 180ms ease;
}

.nav-logo-icon img{
  display:block;
  width:100%;
  height:100%;
}

.nav-logo:hover .nav-logo-icon{
  transform:none;
}

.nav-spacer{
  flex:1 1 auto;
}

.nav-links{
  position:relative;
  z-index:1;
  isolation:isolate;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  flex:1 1 auto;
  gap:1px;
  min-width:0;
  height:38px;
  padding:2px;
  overflow-x:auto;
  overflow-y:hidden;
  border:0!important;
  border-radius:var(--lg-radius);
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  white-space:nowrap;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.nav-links::-webkit-scrollbar{
  display:none;
}

.nav-links .nav-link{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  flex:0 0 auto;
  min-height:32px;
  padding:6px 11px;
  border:1px solid transparent!important;
  border-radius:var(--lg-radius)!important;
  color:var(--text2)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:13px;
  line-height:1.35;
  text-decoration:none;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:color 160ms ease,opacity 160ms ease!important;
}

.nav-links .nav-link:hover{
  color:var(--text)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  text-decoration:none;
  transform:none!important;
}

.nav-links .nav-link.active{
  color:var(--blue)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.lang-wrap{
  position:relative;
  z-index:2;
  flex-shrink:0;
}

/* The language switch belongs to the navigation plane, not a second glass layer. */
.lang-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:32px;
  padding:5px 10px;
  border:1px solid rgba(24,34,48,.10)!important;
  border-radius:var(--lg-radius)!important;
  color:var(--text)!important;
  background:rgba(255,255,255,.20)!important;
  box-shadow:none!important;
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease!important;
}

.lang-btn:hover{
  color:var(--text)!important;
  background:rgba(255,255,255,.38)!important;
  border-color:rgba(24,34,48,.15)!important;
  text-decoration:none;
  transform:none!important;
}

.lang-btn .globe{
  width:15px;
  height:15px;
  flex-shrink:0;
}

/* A single neutral selection layer moves inside each segmented control. */
.lg-selection{
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  box-sizing:border-box;
  width:var(--lg-width,0);
  height:var(--lg-height,0);
  border:0;
  border-radius:var(--lg-radius);
  background:var(--lg-surface-selected);
  box-shadow:var(--lg-shadow-selection);
  pointer-events:none;
  transform:translate3d(var(--lg-x,0),var(--lg-y,0),0);
  transition:
    transform 360ms cubic-bezier(.22,.8,.2,1),
    width 360ms cubic-bezier(.22,.8,.2,1),
    height 360ms cubic-bezier(.22,.8,.2,1),
    opacity 140ms ease;
  will-change:transform,width,height;
}

.lg-selection[hidden]{
  display:block!important;
  opacity:0;
}

.lg-selection[data-tone="accent"]{
  border-color:transparent;
  background:#1a73e8;
  box-shadow:none;
}

/* Remove indicators left by the pre-2026-10-20 filter renderer. */
.vf-selection,
.vf-selection-surface{
  display:none!important;
}

/* Functional toolbars share the same thin regular material. */
.tabs,
.presets,
#vfilters{
  position:relative;
  z-index:1;
  isolation:isolate;
  box-sizing:border-box;
  border:1px solid rgba(24,34,48,.09)!important;
  background-color:var(--lg-track)!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:var(--lg-filter)!important;
  backdrop-filter:var(--lg-filter)!important;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.tabs::-webkit-scrollbar,
.presets::-webkit-scrollbar,
#vfilters::-webkit-scrollbar{
  display:none;
}

.tabs{
  display:flex;
  align-items:center;
  flex-wrap:nowrap!important;
  gap:2px!important;
  width:100%;
  margin-bottom:22px;
  padding:4px!important;
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid rgba(24,34,48,.09)!important;
  border-radius:var(--lg-radius)!important;
  scroll-padding-inline:4px;
  touch-action:pan-x;
}

.tabs .tab-btn{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  flex:0 0 auto;
  min-height:36px;
  padding:7px 15px!important;
  border:1px solid transparent!important;
  border-bottom-color:transparent!important;
  border-radius:var(--lg-radius)!important;
  color:var(--text2)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:13px!important;
  font-weight:500;
  line-height:1.3;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:color 160ms ease!important;
}

.tabs .tab-btn::after{
  content:none!important;
  display:none!important;
}

.tabs .tab-btn:hover{
  color:var(--text)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.tabs .tab-btn.active{
  color:var(--blue)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

@keyframes lg-pane-in{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes lg-detail-in{
  from{
    opacity:0;
    transform:translateY(-4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.tab-pane.active{
  animation:lg-pane-in 240ms cubic-bezier(.22,.8,.2,1) both;
}

.presets{
  display:flex;
  align-items:center;
  flex-wrap:nowrap!important;
  gap:1px!important;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:3px!important;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:var(--lg-radius)!important;
  touch-action:pan-x;
  scroll-padding-inline:3px;
}

.presets .preset-btn{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  flex:0 0 auto;
  min-height:30px;
  padding:5px 11px!important;
  border:1px solid transparent!important;
  border-radius:var(--lg-radius)!important;
  color:var(--text2)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:12px!important;
  line-height:1.3;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:color 160ms ease!important;
}

.presets .preset-btn:hover{
  color:var(--text)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.presets .preset-btn.on{
  color:#fff!important;
}

#vfilters{
  display:flex;
  align-items:center;
  flex-wrap:nowrap!important;
  gap:1px!important;
  width:max-content;
  max-width:100%;
  margin-bottom:12px;
  padding:3px!important;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:var(--lg-radius)!important;
  touch-action:pan-x;
  scroll-padding-inline:3px;
}

#vfilters .vf{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  flex:0 0 auto;
  min-height:30px;
  padding:5px 12px!important;
  border:1px solid transparent!important;
  border-radius:var(--lg-radius)!important;
  color:#6e6e73!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:12px!important;
  line-height:1.3;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:color 140ms ease!important;
}

#vfilters .vf:hover,
#vfilters .vf.on{
  color:#1d1d1f!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

/* Actions use the same material without stacking a second rim or glow. */
.btn,
.icon-btn,
.ssml-btn,
.hist-play{
  position:relative;
  box-sizing:border-box;
  border:1px solid rgba(24,34,48,.10)!important;
  border-radius:var(--lg-radius)!important;
  color:var(--text2);
  background-color:var(--lg-surface-control)!important;
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  -webkit-backdrop-filter:var(--lg-filter)!important;
  backdrop-filter:var(--lg-filter)!important;
  transform:none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.btn::before,
.btn::after,
.icon-btn::before,
.icon-btn::after,
.ssml-btn::before,
.ssml-btn::after,
.hist-play::before,
.hist-play::after,
.preset-btn::before,
.preset-btn::after,
.tab-btn::before,
.tab-btn::after,
.vf::before,
.vf::after,
.nav-link::before,
.nav-link::after,
.lang-btn::before,
.lang-btn::after{
  content:none!important;
  display:none!important;
}

.btn:not(:disabled):hover,
.icon-btn:not(:disabled):hover,
.ssml-btn:not(:disabled):hover,
.hist-play:not(:disabled):hover{
  color:var(--text);
  border-color:rgba(24,34,48,.16)!important;
  background-color:rgba(255,255,255,.68)!important;
  box-shadow:none!important;
  transform:none;
}

.btn:not(:disabled):active,
.icon-btn:not(:disabled):active,
.ssml-btn:not(:disabled):active,
.hist-play:not(:disabled):active{
  background-color:rgba(240,242,245,.82)!important;
  box-shadow:none!important;
  transform:none;
}

.btn:focus-visible,
.icon-btn:focus-visible,
.ssml-btn:focus-visible,
.hist-play:focus-visible,
.lang-btn:focus-visible,
.nav-link:focus-visible,
.tab-btn:focus-visible,
.preset-btn:focus-visible,
.vf:focus-visible{
  outline:2px solid rgba(26,115,232,.82);
  outline-offset:3px;
}

.btn:disabled,
.icon-btn:disabled,
.ssml-btn:disabled,
.hist-play:disabled{
  opacity:.44;
  cursor:not-allowed;
  box-shadow:none!important;
  transform:none;
}

/* The primary action preserves its blue identity and remains completely flat. */
.btn-primary,
#gen-btn{
  color:#fff!important;
  border-color:#1a73e8!important;
  background:#1a73e8!important;
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
}

.btn-primary:not(:disabled):hover,
#gen-btn:not(:disabled):hover{
  color:#fff!important;
  border-color:#1765cc!important;
  background:#1765cc!important;
  background-image:none!important;
  box-shadow:none!important;
  transform:none!important;
}

.btn-primary:not(:disabled):active,
#gen-btn:not(:disabled):active{
  border-color:#1557b0!important;
  background:#1557b0!important;
  box-shadow:none!important;
  transform:none!important;
}

.btn-outline{
  color:var(--blue)!important;
  border-color:rgba(26,115,232,.34)!important;
  background-color:rgba(255,255,255,.42)!important;
  background-image:none!important;
}

.btn-outline:not(:disabled):hover{
  color:var(--blue-d)!important;
  border-color:rgba(26,115,232,.50)!important;
  background-color:rgba(255,255,255,.64)!important;
}

.btn-ghost{
  color:var(--text2)!important;
  border-color:rgba(24,34,48,.11)!important;
  background-color:rgba(255,255,255,.28)!important;
  background-image:none!important;
}

.btn-ghost:not(:disabled):hover{
  color:var(--blue)!important;
  border-color:rgba(24,34,48,.16)!important;
  background-color:rgba(255,255,255,.50)!important;
}

/* Small utility links stay flat so content never looks like stacked glass. */
.inline-link,
.back-link{
  box-shadow:none!important;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
}

.inline-link{
  border-color:rgba(24,34,48,.11)!important;
  background:rgba(255,255,255,.28)!important;
}

.back-link{
  border-color:rgba(26,115,232,.34)!important;
  background:rgba(255,255,255,.42)!important;
}

/* Content-layer surfaces remain opaque and unchanged in color. */
.card,
.panel,
.studio-panel,
.faq-item{
  border-color:rgba(24,34,48,.10)!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/*
 * FAQ answers, the pronunciation helper and the translation editor all open
 * inside the same content plane. Keep their geometry and motion identical so
 * disclosure controls do not read as unrelated visual systems.
 */
.faq-item,
.faq-list > section.faq-item,
.phonetic-panel,
.translate-box:not(.hidden){
  box-sizing:border-box;
  border:1px solid rgba(24,34,48,.12)!important;
  border-radius:16px!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.faq-item,
.phonetic-panel,
.translate-box:not(.hidden){
  overflow:hidden;
}

.faq-item{
  margin-bottom:8px!important;
  transition:border-color 180ms ease,background-color 180ms ease!important;
}

.faq-item:hover{
  border-color:rgba(24,34,48,.18)!important;
  box-shadow:none!important;
}

.faq-item.open{
  border-color:rgba(24,34,48,.18)!important;
  background:#fff!important;
}

.faq-q,
.faq-q:hover,
.faq-item.open .faq-q,
.faq-item.open .faq-q:hover{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--text)!important;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
}

.faq-q{
  width:100%;
  padding:14px 17px!important;
  line-height:1.45!important;
}

.faq-q:focus-visible{
  border-radius:12px!important;
  outline:2px solid rgba(26,115,232,.72)!important;
  outline-offset:-3px!important;
}

.faq-q:hover{
  color:var(--blue)!important;
}

.faq-arr{
  box-sizing:border-box;
  display:inline-block;
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin:0 3px 4px 14px;
  border:0;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  font-size:0!important;
  line-height:0;
  transform:rotate(45deg);
  transition:transform 200ms cubic-bezier(.2,.8,.2,1),margin 200ms ease!important;
}

.faq-item.open .faq-arr{
  margin-bottom:-4px;
  transform:rotate(225deg);
}

.faq-a{
  max-height:0;
  padding:0 17px!important;
  opacity:0;
  transform:translateY(-4px);
  transition:
    max-height 220ms cubic-bezier(.2,.8,.2,1),
    padding 220ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1)!important;
}

.faq-item.open .faq-a{
  max-height:720px!important;
  padding:0 17px 16px!important;
  opacity:1;
  transform:translateY(0);
}

.faq-q::before,
.faq-q::after{
  content:none!important;
  display:none!important;
}

.faq-list > section.faq-item{
  padding:16px 18px!important;
}

.faq-list > section.faq-item .faq-question{
  margin-bottom:8px!important;
  font-size:16px;
  line-height:1.45;
}

.faq-list > section.faq-item .faq-answer,
.faq-list > section.faq-item .faq-answer p{
  font-size:14px;
  line-height:1.75;
}

.phonetic-panel{
  margin-top:12px!important;
  padding:16px 18px!important;
  animation:lg-detail-in 220ms cubic-bezier(.2,.8,.2,1) both!important;
}

.phonetic-panel .stitle{
  line-height:1.45;
}

.phonetic-panel .ph-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.phonetic-panel .ph-input{
  width:100%;
  min-width:0;
  border-color:rgba(24,34,48,.12)!important;
  border-radius:12px!important;
  background-color:#fff!important;
  box-shadow:none!important;
}

.phonetic-panel .ph-input:focus{
  border-color:var(--blue)!important;
  outline:2px solid rgba(26,115,232,.24);
  outline-offset:1px;
}

.phonetic-panel .btn-sm{
  min-height:34px;
  padding:7px 12px!important;
}

.translate-box:not(.hidden){
  margin-top:12px!important;
  padding:16px 18px!important;
  animation:lg-detail-in 220ms cubic-bezier(.2,.8,.2,1) both!important;
}

.translate-header{
  gap:8px 10px;
  margin-bottom:12px;
}

.translate-box textarea{
  min-height:96px;
  border-color:rgba(24,34,48,.12)!important;
  border-radius:12px!important;
  background-color:#fff!important;
  box-shadow:none!important;
}

.translate-box textarea:focus{
  border-color:var(--blue)!important;
  outline:2px solid rgba(26,115,232,.24);
  outline-offset:1px;
  box-shadow:none!important;
}

/* Tablet spacing keeps the single shell readable without changing layout order. */
@media (max-width:900px){
  .nav-inner{
    padding-inline:9px;
  }

  .nav-links .nav-link{
    padding-inline:9px;
    font-size:12px;
  }
}

/*
 * Mobile navigation occupies two rows inside the same shell. The shell has an
 * automatic height, so the links cannot overflow and cover the hero.
 */
@media (max-width:760px){
  .navbar{
    padding:6px 8px!important;
  }

  .nav-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:2px 8px;
    min-height:0;
    padding:7px 8px 6px;
    border-radius:24px;
    overflow:visible;
  }

  .nav-logo{
    grid-column:1;
    grid-row:1;
    min-width:0;
    gap:6px;
    font-size:17px;
  }

  .nav-logo-icon{
    width:28px;
    height:28px;
    border-radius:8px;
  }

  .nav-spacer{
    display:none;
  }

  .lang-wrap{
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
  }

  .nav-links{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    max-width:100%;
    height:37px;
    margin-top:2px;
    padding:4px 0 1px;
    border-top:1px solid rgba(24,34,48,.075)!important;
    border-radius:0;
  }

  .nav-links .nav-link{
    min-height:30px;
    padding:5px 6px;
    font-size:12px;
  }

  .lang-btn{
    min-height:29px;
    padding:4px 8px;
    font-size:11px;
  }

  .tabs,
  .presets,
  #vfilters{
    scroll-padding-inline:4px;
  }

  .tabs .tab-btn{
    min-height:34px;
    padding:6px 12px!important;
    font-size:12px!important;
  }

  .presets .preset-btn{
    min-height:30px;
    padding:5px 10px!important;
    font-size:11px!important;
  }

  #vfilters .vf{
    min-height:30px;
    padding:5px 10px!important;
    font-size:11px!important;
  }

  .faq-item,
  .faq-list > section.faq-item,
  .phonetic-panel,
  .translate-box:not(.hidden){
    border-radius:14px!important;
  }

  .faq-q{
    padding:13px 14px!important;
  }

  .faq-a{
    padding-inline:14px!important;
  }

  .faq-item.open .faq-a{
    padding:0 14px 14px!important;
  }

  .faq-arr{
    margin-left:10px;
  }

  .faq-list > section.faq-item{
    padding:14px!important;
  }

  .phonetic-panel,
  .translate-box:not(.hidden){
    padding:14px!important;
  }

  .phonetic-panel .ph-row{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  }

  .phonetic-panel .ph-row .ph-arrow{
    grid-column:2;
    grid-row:1;
  }

  .phonetic-panel .ph-row .btn-outline{
    grid-column:1/3;
    grid-row:2;
    width:100%;
  }

  .phonetic-panel .ph-row .btn-ghost{
    grid-column:3;
    grid-row:2;
    width:44px;
    justify-self:end;
  }

  .translate-header{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }

  .translate-label{
    width:100%;
    min-width:0;
    flex:none;
  }

  .translate-actions{
    width:100%;
    gap:6px;
  }

  .translate-actions .btn{
    flex:1 1 auto;
    min-width:0;
  }
}

@media (max-width:400px){
  .navbar{
    padding-inline:6px!important;
  }

  .nav-inner{
    padding-inline:7px;
  }

  .nav-links .nav-link{
    padding-inline:5px;
    font-size:11px;
  }

  .lang-btn{
    padding-inline:7px;
    font-size:11px;
  }

  .tabs .tab-btn{
    padding-inline:10px!important;
    font-size:11px!important;
  }

  .presets .preset-btn,
  #vfilters .vf{
    padding-inline:9px!important;
    font-size:11px!important;
  }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-inner,
  .tabs,
  .presets,
  #vfilters,
  .btn,
  .icon-btn,
  .ssml-btn,
  .hist-play{
    background-color:rgba(247,248,250,.96)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .nav-inner,
  .lg-selection,
  .btn,
  .icon-btn,
  .ssml-btn,
  .hist-play,
  .lang-btn,
  .nav-link,
  .tab-btn,
  .preset-btn,
  .vf,
  .faq-item,
  .faq-q,
  .faq-arr,
  .faq-a,
  .phonetic-panel,
  .translate-box,
  .tab-pane.active{
    transition:none!important;
    animation:none!important;
  }

  .lg-selection{
    will-change:auto;
  }
}

@media (prefers-reduced-transparency:reduce){
  .nav-inner,
  .tabs,
  .presets,
  #vfilters{
    background-color:#f7f8fa!important;
    background-image:none!important;
    border-color:rgba(24,34,48,.16)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .btn,
  .icon-btn,
  .ssml-btn,
  .hist-play{
    background-color:#f7f8fa!important;
    background-image:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .lg-selection{
    background:#fff;
  }

  .lg-selection[data-tone="accent"],
  .btn-primary,
  #gen-btn{
    background:#1a73e8!important;
  }
}

@media (prefers-contrast:more){
  .nav-inner,
  .tabs,
  .presets,
  #vfilters,
  .btn,
  .icon-btn,
  .ssml-btn,
  .hist-play{
    border-color:rgba(20,31,47,.52)!important;
  }

  .nav-links .nav-link,
  .tabs .tab-btn,
  .presets .preset-btn,
  #vfilters .vf{
    color:#25282c!important;
  }

  .nav-links .nav-link.active,
  .tabs .tab-btn.active{
    color:#0b57d0!important;
  }

  .lg-selection{
    border-color:rgba(20,31,47,.30);
  }
}

@media (forced-colors:active){
  .nav-inner,
  .tabs,
  .presets,
  #vfilters,
  .card,
  .panel,
  .studio-panel,
  .faq-item,
  .phonetic-panel,
  .translate-box:not(.hidden),
  .btn,
  .icon-btn,
  .ssml-btn,
  .hist-play,
  .lang-btn,
  .nav-link,
  .tab-btn,
  .preset-btn,
  .vf{
    border:1px solid ButtonText!important;
    background:Canvas!important;
    background-image:none!important;
    color:ButtonText!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .lg-selection{
    display:none!important;
  }

  .nav-links .nav-link.active,
  .tabs .tab-btn.active,
  .presets .preset-btn.on,
  #vfilters .vf.on,
  .btn-primary,
  #gen-btn{
    background:Highlight!important;
    color:HighlightText!important;
  }
}