:root{
  --green:#00703c;
  --green-dark:#005a30;
  --yellow:#ffdd00;
  --red:#d4351c;
  --ink:#0b0c0c;
  --muted:#505a5f;
  --line:#b1b4b6;
  --paper:#ffffff;
  --surface:#f3f2f1;
  --focus:#ffdd00;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.5;
}
a{color:var(--green-dark)}
a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:0;
  box-shadow:0 0 0 1px var(--ink)
}

.wrap{
  box-sizing:border-box;
  max-width:48rem;
  margin:0 auto;
  padding:1.5rem 1.25rem 3rem;
}

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.25rem;
  padding:1rem 0 1.5rem;
  border-bottom:4px solid var(--yellow);
}
.logo{width:140px;height:auto;display:block}
.eyebrow{
  margin:0 0 .25rem;
  font-size:.8125rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:700;
}
.hero h1{
  margin:0;
  font-size:clamp(1.75rem,5vw,2.5rem);
  line-height:1.15;
  color:var(--ink);
}
.tagline{margin:.5rem 0 0;color:var(--muted);font-size:1.0625rem}

.panel{
  margin-top:1.5rem;
  padding:1.25rem;
  background:var(--paper);
  border:1px solid var(--line);
}
.entry{display:flex;flex-wrap:wrap;gap:.5rem}
.field{position:relative;flex:1 1 12rem;min-width:0;display:flex}
.entry input{
  flex:1;
  width:100%;
  min-width:0;
  padding:.65rem .75rem;
  font:inherit;
  border:2px solid var(--ink);
  background:#fff;
  color:var(--ink);
}
.btn{
  padding:.65rem 1.1rem;
  font:inherit;
  font-weight:700;
  background:var(--green);
  color:#fff;
  border:2px solid var(--green);
  box-shadow:0 2px 0 var(--green-dark);
  cursor:pointer;
  min-height:2.75rem;
}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}

/* Mic icon sits inside the right-hand end of the text field. */
.field.has-mic input{padding-right:3rem}
.mic{
  position:absolute;
  top:50%;
  right:.3rem;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.mic[hidden]{display:none}
.mic:hover{color:var(--ink);background:var(--surface)}
.mic.listening{color:#fff;background:var(--red)}

.back{margin:0 0 .5rem;font-size:.95rem}

.status{min-height:1.5em;margin:.6rem 0 0;color:var(--muted)}
.status.error{color:#942514}
.note{margin:.4rem 0 0;color:var(--muted);font-size:.85rem}

.cloud{
  display:block;
  width:100%;
  height:auto;
  margin-top:1.25rem;
  background:var(--paper);
  border:1px solid var(--line);
}
.cloud text{font-family:var(--sans);font-weight:700}

.phrases{
  margin-top:1.25rem;
  background:var(--paper);
  border:1px solid var(--line);
  padding:.75rem 1rem;
}
.phrases summary{cursor:pointer;font-weight:700}
.phrases ol{margin:.75rem 0 0;padding-left:1.25rem;color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (min-width:640px){
  .hero{
    flex-direction:row;
    text-align:left;
    align-items:center;
    gap:1.75rem;
  }
  .hero-text{flex:1}
  .logo{width:170px}
}