html.tc-open { overflow: hidden; scrollbar-gutter: stable; }

.tc-dialog {
  --tc-paper: #faf7ee;
  --tc-ink: #1b2a24;
  --tc-green: #214c43;
  --tc-muted: #516159;
  --tc-line: #ced7cd;
  --tc-space: clamp(1rem, 4vw, 2rem);
  position: fixed;
  inset: 0;
  width: min(36rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #dbdfd1;
  border-radius: 1.55rem;
  background: var(--tc-paper);
  color: var(--tc-ink);
  box-shadow: 0 1.5rem 6rem #071d205e;
  font: 400 1rem/1.5 var(--sans, system-ui, sans-serif);
}

.tc-dialog[open] {
  animation: tc-enter .22s cubic-bezier(.2, .75, .3, 1) both;
}

.tc-dialog::backdrop {
  background: #102b31a8;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

@keyframes tc-enter {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

.tc-shell { min-width: 0; }

.tc-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 1rem;
  row-gap: .38rem;
  padding: var(--tc-space) var(--tc-space) 1.05rem;
}

.tc-header > :not(.tc-close) { grid-column: 1; min-width: 0; }

.tc-kicker {
  margin: 0;
  color: var(--tc-green);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tc-header h2 {
  margin: 0;
  font: 400 clamp(2rem, 7vw, 3.2rem)/.98 var(--serif, Georgia, serif);
  letter-spacing: -.045em;
}

.tc-close {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--tc-line);
  border-radius: 50%;
  background: #f1f2e9;
  font: 400 1.5rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .15s;
}

.tc-close:hover { background: #e1ebe0; }

.tc-body { padding: 0 var(--tc-space) var(--tc-space); min-width: 0; }

.tc-summary {
  display: grid;
  grid-template-columns: 1.12fr 1fr .9fr;
  gap: .72rem;
  min-width: 0;
  margin: 0 0 1.2rem;
  padding: .92rem 1rem;
  border: 1px solid #d6dfd0;
  border-radius: .95rem;
  background: linear-gradient(115deg, #e4ede1, #f0f1e7);
}

.tc-summary > div { display: grid; align-content: start; gap: .12rem; min-width: 0; }
.tc-summary > div > span { color: var(--tc-muted); font-size: .75rem; }
.tc-summary strong {
  color: #254a41;
  font-size: clamp(.86rem, 3.4vw, 1.06rem);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.tc-summary > :last-child { text-align: right; }
.tc-summary > :last-child > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tc-form { display: grid; gap: .7rem; min-width: 0; margin: 0; }
.tc-label, .tc-methods legend { font-weight: 600; line-height: 1.35; }
.tc-label:has(.tc-input) { display: grid; gap: .4rem; }
.tc-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: .62rem .83rem;
  border: 1px solid #b5c5bb;
  border-radius: .7rem;
  background: #fffdf8;
  color: var(--tc-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}
.tc-input::placeholder { color: #637169; opacity: 1; }
.tc-input[aria-invalid="true"] { border-color: #984637; }
.tc-input:focus-visible,
.tc-close:focus-visible,
.tc-submit:focus-visible,
.tc-alternate a:focus-visible,
a.tc-alternate:focus-visible {
  outline: 2px solid #42796a;
  outline-offset: 3px;
}
.tc-help { margin: 0; color: var(--tc-muted); font-size: .82rem; overflow-wrap: anywhere; }

.tc-methods {
  display: grid;
  gap: .42rem;
  min-width: 0;
  margin: .3rem 0 0;
  padding: 0;
  border: 0;
}
.tc-methods legend { padding: 0; margin: 0 0 .53rem; }
.tc-method {
  display: flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: .53rem .75rem;
  border: 1px solid var(--tc-line);
  border-radius: .69rem;
  background: #fffdf8;
  cursor: pointer;
}
.tc-method:hover { border-color: #88a396; }
.tc-method:has(input:checked) { border-color: #5a8475; background: #e9f1e7; }
.tc-method:has(input:focus-visible) { outline: 2px solid #42796a; outline-offset: 2px; }
.tc-method input[type="radio"] {
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--tc-green);
}
.tc-method > span { min-width: 0; overflow-wrap: anywhere; }
.tc-method-title { display: block; font-size: .94rem; font-weight: 600; }
.tc-method-description { display: block; color: var(--tc-muted); font-size: .79rem; }
.tc-rails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-rails .tc-method-title { font-size: .84rem; }

.tc-feedback {
  margin: 0;
  color: #863c30;
  font-size: .87rem;
  overflow-wrap: anywhere;
}
.tc-feedback:empty { display: none; }

.tc-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 3.25rem;
  margin: .25rem 0 0;
  padding: .62rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--tc-green);
  color: #fff9ed;
  font: 600 .96rem/1.35 var(--sans, system-ui, sans-serif);
  text-align: center;
  cursor: pointer;
  transition: background-color .15s;
}
.tc-submit:not(:disabled):not([aria-disabled="true"]):hover { background: #30675a; }
.tc-submit:is(:disabled, [aria-disabled="true"]) { background: #49695e; color: #f8f5ed; cursor: not-allowed; }

.tc-alternate, .tc-demo-label {
  margin: 0;
  color: var(--tc-muted);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}
.tc-demo-label { padding: .52rem .68rem; border-radius: .62rem; background: #f0ede3; }
.tc-alternate a, a.tc-alternate { color: var(--tc-green); text-decoration: underline; text-underline-offset: .18em; }
.tc-alternate > span { display: block; margin-block-start: .2rem; }
.tc-demo-label:not([hidden]) + .tc-form { margin-block-start: .8rem; }
.tc-body > :is(.tc-alternate, .tc-demo-label) { margin-block-start: .74rem; }

@media (max-width: 430px) {
  .tc-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 1.15rem; }
  .tc-header { padding-bottom: .87rem; }
  .tc-summary { padding-inline: .7rem; gap: .45rem; margin-bottom: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-dialog[open] { animation: none; }
  .tc-close, .tc-submit { transition: none; }
}