* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f2f5f8;
  color:#182738;
  font:16px system-ui,sans-serif
}
main {
  max-width:980px;
  min-height:100vh;
  margin:auto;
  display:flex;
  flex-direction:column;
  background:white;
  box-shadow:0 0 40px #1e39500a
}
header {
  padding:30px 36px;
  border-bottom:1px solid #e4eaf0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
h1 {
  margin:7px 0;
  font-size:26px
}
header p,small {
  color:#66798b;
  margin:0
}
.eyebrow {
  letter-spacing:.13em;
  color:#a27620;
  font-size:11px;
  font-weight:800
}
button {
  border:0;
  border-radius:10px;
  padding:12px 16px;
  cursor:pointer;
  background:#17344e;
  color:white;
  font-weight:700
}
#reset {
  background:#eef3f7;
  color:#29435a;
  white-space:nowrap
}
#conversation {
  padding:32px 36px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:auto
}
.welcome,.bubble {
  border:1px solid #e2eaf0;
  background:#f8fafc;
  border-radius:16px;
  padding:18px 20px;
  max-width:90%;
  line-height:1.65
}
.welcome {
  color:#536b7e
}
.bubble.user {
  align-self:flex-end;
  background:#17344e;
  color:white;
  border-color:#17344e
}
.bubble.assistant {
  align-self:flex-start
}
.bubble p {
  margin:0 0 10px
}
.task {
  border-top:1px solid #dce5eb;
  margin-top:14px;
  padding-top:12px
}
.task h3 {
  font-size:15px;
  margin:0
}
.task ol {
  padding-inline-start:22px
}
.task li {
  margin:10px 0
}
.step-segment + .step-segment {
  margin-top:16px
}
.task img {
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid #d9e3ea;
  border-radius:8px;
  margin-top:10px
}
form {
  padding:20px 36px 28px;
  border-top:1px solid #e4eaf0
}
label {
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:8px
}
.input {
  display:flex;
  gap:12px
}
textarea {
  font:inherit;
  resize:vertical;
  flex:1;
  border:1px solid #cbd9e3;
  border-radius:10px;
  padding:12px
}
small {
  display:block;
  margin-top:8px
}
button:disabled {
  opacity:.6
}
@media(max-width:600px) {
  header,#conversation,form {
    padding:20px
  }
  header {
    align-items:flex-start;
    flex-direction:column
  }
  .bubble {
    max-width:100%
  }
}
.choice {
  display:block;
  text-align:start;
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  background:#fff;
  border:1px solid #cbd9e3;
  color:#17344e
}
.choice:hover {
  border-color:#a27620;
  background:#fffaf0
}
.choice span {
  display:block;
  color:#66798b;
  font-weight:400;
  margin-top:3px
}