:root {
  color-scheme: light dark;
  --fg: #1c1a17; --bg: #f7f4ee; --card: #ffffff; --muted: #6b655b; --line: #e4ded3;
  --accent: #a85400; --on-accent: #ffffff; --brand: #f49800; --danger: #b4321e;
  --shadow: 0 1px 2px rgba(60, 40, 10, .06), 0 8px 24px rgba(60, 40, 10, .06);
  /* ponytail: tilak path lifted from rupaseva.com's logo, cropped to its bounds */
  --tilak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='128 100 66 208'%3E%3Cpath fill='%23f49800' d='M189.927 102.615H179.277V159.979C179.277 164.325 179.367 168.076 178.651 171.171C177.935 174.297 176.831 176.768 175.31 178.584C173.908 180.549 171.909 181.977 169.343 182.811C167.673 183.525 165.764 183.942 163.646 184.091C162.93 184.24 162.244 184.329 161.528 184.329H161.08C158.395 184.18 156.009 183.764 153.891 183.049C151.206 182.186 148.969 180.846 147.149 179.03C145.299 177.066 143.957 174.506 143.122 171.41C142.256 168.343 141.839 164.533 141.839 160.008V102.644H131.249V165.069C131.249 174.654 133.933 181.829 139.273 186.621C141.958 189.033 145.269 190.789 149.267 191.92C150.072 192.218 151.057 192.426 152.22 192.575C142.465 196.088 135.843 200.88 132.293 206.953C127.341 214.425 127.192 223.862 131.845 235.293L160.871 305.636L188.883 235.293C193.388 223.862 193.238 214.395 188.436 206.953C185.035 201 178.621 196.296 169.194 192.813C170.298 192.516 171.432 192.218 172.535 191.92C176.205 190.819 179.337 189.003 181.843 186.473C184.528 183.912 186.526 180.727 187.809 176.947C189.211 173.017 189.927 168.343 189.927 162.955V102.644M179.725 212.222C182.559 217.313 182.41 223.713 179.337 231.423L160.871 279.142L141.391 231.423C138.17 223.713 138.02 217.283 141.004 212.222C144.255 206.983 150.669 203.113 160.245 200.583C169.851 203.113 176.324 206.983 179.725 212.222Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #ece8e1; --bg: #1c1a17; --card: #24211d; --muted: #a59e92; --line: #3a362f;
          --accent: #ffa30b; --on-accent: #1c1a17; --danger: #f07a64;
          --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }

.brand { display: flex; align-items: center; justify-content: center; gap: .5rem;
         max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 1.25rem;
         color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.brand::before { content: ""; width: .9rem; height: 2.75rem;
                 background: var(--tilak) center / contain no-repeat; }
.brand span { color: var(--muted); font-weight: 400; }

main { max-width: 34rem; margin: 0 auto 3rem; padding: 2rem 1.75rem 1.75rem;
       background: var(--card); border: 1px solid var(--line); border-radius: .875rem;
       box-shadow: var(--shadow); }
@media (max-width: 36rem) {
  main { margin: 0 1rem 2rem; padding: 1.5rem 1.25rem 1.25rem; }
}

h1, h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
         font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.2rem; margin: 2.25rem 0 .75rem; padding-top: 1.75rem;
     border-top: 1px solid var(--line); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
a { color: var(--accent); text-underline-offset: .15em; }
form { margin: 0 0 1.25rem; }
label { display: block; margin: .875rem 0 .3rem; font-size: .875rem; color: var(--muted); }
label:has(input[type="checkbox"]) { display: flex; gap: .5rem; align-items: flex-start; color: var(--fg); }

input, select, button { font: inherit; width: 100%; padding: .625rem .75rem;
       border: 1px solid var(--line); border-radius: .5rem;
       background: var(--card); color: var(--fg); }
input[type="checkbox"] { width: auto; margin: .3rem 0 0; accent-color: var(--accent); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
       outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible { border-color: var(--brand); }

button { margin-top: 1.25rem; background: var(--accent); border-color: var(--accent);
       color: var(--on-accent); font-weight: 600; cursor: pointer;
       transition: filter .15s, background-color .15s; }
button:hover { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--fg); border-color: var(--line); font-weight: 500; }
button.secondary:hover { filter: none; border-color: var(--accent); color: var(--accent); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger:hover { filter: none; background: var(--danger); color: var(--card); }

.row { display: flex; gap: .75rem; }
.or { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0;
      color: var(--muted); font-size: .875rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.error, .notice { border-left: 3px solid; border-radius: .375rem; padding: .625rem .875rem; margin: 0 0 1.5rem; }
.error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.notice { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.muted { color: var(--muted); font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .875rem; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td { overflow-wrap: anywhere; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
