:root{
  color-scheme: dark;
  --bg:#000000;
  --line:rgba(255,255,255,.24);
  --line-dim:rgba(255,255,255,.12);
  --line-strong:#ffffff;
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.60);
  --text-dimmer:rgba(255,255,255,.34);
}
*{box-sizing:border-box}
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:inherit; font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.01em; }
.mono{ font-variant-numeric:tabular-nums; }
a{ color:var(--text); text-underline-offset:3px; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
::selection{ background:#fff; color:#000; }
::placeholder{ color:var(--text-dimmer); }

.cursor{ display:inline-block; width:.5em; height:1em; background:#fff; vertical-align:-.15em; margin-left:2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ animation:none; } }

.btn{
  border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:0; padding:10px 16px; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.btn:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.08); }
.btn-primary{ background:#fff; border-color:#fff; color:#000; font-weight:700; }
.btn-primary:hover{ background:transparent; color:#fff; }
.btn-danger{ color:var(--text-dim); }
.btn-danger:hover{ color:#fff; border-color:#fff; }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ border-color:var(--line); background:transparent; }
.btn:disabled{ opacity:.4; cursor:default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:1px solid #fff; outline-offset:2px;
}

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:600; }
.field input, .field select, .field textarea{
  background:transparent; border:1px solid var(--line); border-radius:0; padding:10px 11px; font-size:13.5px;
  width:100%; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:#fff; }
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px;
}

.error-text{ color:var(--text); font-size:12.5px; min-height:18px; }
.error-text:not(:empty)::before{ content:"! "; }

.tag{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border:1px solid transparent; white-space:nowrap; line-height:1.4; }
.tag-fill{ background:#fff; color:#000; border-color:#fff; }
.tag-outline{ background:transparent; color:#fff; border-color:var(--line-strong); }
.tag-dim{ background:transparent; color:var(--text-dim); border-color:var(--line); }
.tag-plain{ background:transparent; color:var(--text-dimmer); border-color:transparent; padding-left:0; padding-right:0; }

.select-wrap{ position:relative; }
.select-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:transparent; border:1px solid var(--line); border-radius:0; padding:10px 11px; font-size:13.5px;
  color:var(--text); cursor:pointer; text-align:left;
}
.select-btn:hover{ border-color:var(--line-strong); }
.select-btn.open, .select-btn:focus-visible{ border-color:#fff; outline:none; }
.select-chev{ color:var(--text-dim); font-size:11px; margin-left:10px; flex:none; transition:transform .12s; }
.select-btn.open .select-chev{ transform:rotate(180deg); }
.select-list{
  list-style:none; margin:0; padding:4px 0; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:#000; border:1px solid var(--line-strong); max-height:220px; overflow-y:auto;
}
.select-list[hidden]{ display:none; }
.select-list li{ padding:9px 12px; font-size:13.5px; color:var(--text-dim); cursor:pointer; }
.select-list li:hover, .select-list li.active{ background:#fff; color:#000; }
.select-list li[aria-selected="true"]{ color:#fff; }
.select-list li[aria-selected="true"]:hover, .select-list li[aria-selected="true"].active{ color:#000; }

.cal-panel{
  position:absolute; top:calc(100% + 4px); left:0; z-index:20;
  background:#000; border:1px solid var(--line-strong); padding:14px; width:272px;
}
.cal-panel[hidden]{ display:none; }
.cal-head{ display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:12px; }
.cal-nav{
  background:transparent; border:1px solid var(--line); color:var(--text);
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; flex:none; line-height:1;
}
.cal-nav:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.cal-title{ font-size:12.5px; font-weight:700; text-align:center; flex:1; letter-spacing:.02em; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.cal-weekdays span{ display:block; text-align:center; font-size:9.5px; color:var(--text-dimmer); text-transform:uppercase; letter-spacing:.04em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day{
  background:transparent; border:1px solid transparent; color:var(--text-dim); font-size:12px;
  padding:7px 0; cursor:pointer; text-align:center; font-family:inherit;
}
.cal-day:hover:not(:disabled){ border-color:var(--line-strong); color:#fff; }
.cal-day.outside{ color:var(--text-dimmer); opacity:.45; }
.cal-day.today{ border-color:var(--line); }
.cal-day.selected{ background:#fff; color:#000; font-weight:700; border-color:#fff; }
.cal-day:disabled{ opacity:.2; cursor:default; }
.date-label-empty{ color:var(--text-dimmer); }

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-mark{ display:block; object-fit:contain; transition:opacity .12s; }
a.brand:hover .brand-mark, button.brand:hover .brand-mark{ opacity:.75; }
a.brand:focus-visible{ outline:1px solid #fff; outline-offset:6px; }