:root {
  color-scheme: light;
  --ink: #243c35;
  --muted: #66756e;
  --green: #235046;
  --line: #dfe5dc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(16px, calc(14px + .35vw), 22px);
  color: var(--ink);
  background: #f7f8f4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }
.page { max-width: 44rem; padding: 0 1.5rem; margin: 2.5rem auto; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--green); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.brand svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.intro { margin: 2rem 0 1.5rem; }
h1 { font-size: 2.25rem; font-weight: 650; letter-spacing: -.03em; margin: 0 0 .65rem; }
.intro p { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.meeting { background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.meeting > * + * { border-top: 1px solid var(--line); }
.editor, .preview { padding: 1.75rem; }
h2 { font-size: 1.125rem; font-weight: 650; margin: 0; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
#hour-format, .ts-wrapper.format-picker { width: 7.25rem; flex-shrink: 0; }
fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.date-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; }
.field { margin-top: 1.25rem; }
label { display: block; margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; }
input, select { min-width: 0; width: 100%; height: 3rem; border: 1px solid #ced8cf; border-radius: .5rem; background: #fff; color: var(--ink); padding: 0 .75rem; font-size: 1rem; }
input[type="date"] { appearance: none; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
select { padding-right: .4rem; }
input:hover, select:hover, .ts-control:hover { border-color: #8b9e8e; }
:focus-visible, .ts-wrapper.focus .ts-control { outline: 3px solid #618847; outline-offset: 3px; }
.time-inputs { display: grid; grid-template-columns: minmax(0, 1fr) .5rem minmax(4.5rem, 1fr) minmax(0, 1.4fr); align-items: center; gap: .5rem; text-align: center; }
.time-inputs:has(#period[hidden]) { grid-template-columns: minmax(0, 1fr) .5rem minmax(0, 1fr); }
.field-hint { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.preview { background: #eef3ec; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.preview h2 { color: var(--green); }
.local-time { display: block; margin-top: 1rem; font-size: 3.5rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.local-date { margin: .6rem 0 .3rem; font-size: 1.125rem; line-height: 1.5; }
.local-zone { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--green); border-radius: .5rem; background: var(--green); color: #fff; padding: 0 1rem; min-height: 3rem; font-size: .875rem; font-weight: 600; white-space: nowrap; }
button:hover { background: #173d34; }
button:disabled { opacity: .5; cursor: not-allowed; }
button svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copy-status { font-size: .875rem; line-height: 1.5; margin: .75rem 0 0; color: var(--green); }
.copy-status:empty { margin: 0; }
#share-url { text-overflow: ellipsis; }
.error { padding: .875rem 1.125rem; background: #fff0e9; border: 1px solid #ddaa90; color: #803a20; border-radius: .65rem; font-size: .875rem; line-height: 1.6; margin: 0 0 1rem; }

/* Keep dropdowns, the date field, and native fallbacks visually consistent. */
.ts-wrapper { min-width: 0; text-align: left; }
.ts-control { --ts-pr-min: 1.8rem; min-height: 3rem; align-items: center; padding: .6rem .75rem; border: 1px solid #ced8cf; border-radius: .5rem; }
.ts-control::after { content: ""; position: absolute; right: .75rem; top: 50%; width: .35rem; height: .35rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.ts-control, .ts-control input, .ts-dropdown { color: var(--ink); font-size: 1rem; line-height: 1.5; }
.ts-control > input { min-width: 0; width: 1px; height: auto; }
.ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ts-wrapper.dropdown-active .ts-control > .item { display: none; }
#timezone:not(.tomselected) + .field-hint { display: none; }
.ts-dropdown { border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem #243c3520; overflow: hidden; }
.ts-dropdown.minute-picker .optgroup-header { padding-inline: .35rem; }
.ts-dropdown-content { max-height: min(18rem, 45vh); scroll-behavior: auto; }
.ts-dropdown .option, .ts-dropdown .no-results { padding: .6rem .75rem; }
.ts-dropdown .optgroup-header { padding: .5rem .75rem; color: var(--muted); font-size: .75rem; font-weight: 600; background: #f7f8f4; }
.ts-dropdown .active { color: var(--green); background: #e8f0e1; }
.ts-dropdown [data-selectable] .highlight { background: #d4e7be; }

@media (max-width: 600px) {
  .page { padding: 0 1rem; margin: 1.5rem auto; }
  .intro { margin-top: 1.5rem; }
  h1 { font-size: 1.875rem; }
  .editor, .preview { padding: 1.25rem; }
  .date-time { grid-template-columns: 1fr; gap: 1.125rem; }
  .time-inputs { gap: .375rem; }
  .local-time { font-size: 3rem; }
}