:root {
  --ink: #0d1015;
  --paper: #f5f4f0;
  --line: #e6e3dc;
  --miele: #a5001e;
  --ks: #055091;
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Grid-line backgrounds */
.bg-grid-dark {
  background-color: #0b0e13;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-grid-light {
  background-image:
    linear-gradient(rgba(13,16,21,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,16,21,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.mask-fade { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%); }

.glow-red  { background: radial-gradient(closest-side, rgba(165,0,30,.45), transparent); }
.glow-blue { background: radial-gradient(closest-side, rgba(5,80,145,.45), transparent); }

/* Cells for bordered grids */
.cell-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell-grid > * { background: #fff; }
.cell-grid-dark { display: grid; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.cell-grid-dark > * { background: #0f131a; }

/* Option tiles */
.opt { transition: border-color .18s, box-shadow .18s, transform .18s, background .18s; }
.opt:hover { border-color: #c9c4ba; transform: translateY(-1px); }
.opt[aria-checked="true"], .opt[aria-pressed="true"] {
  border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 10px 30px -12px rgba(13,16,21,.35);
}
.opt[aria-checked="true"] .opt-dot { background: var(--miele); border-color: var(--miele); }
.opt[aria-checked="true"] .opt-dot::after { opacity: 1; }
.opt-dot { position: relative; }
.opt-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: #fff; opacity: 0; transition: opacity .15s; }

.chip { transition: all .15s; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Toggle switch */
.switch { width: 44px; height: 26px; border-radius: 999px; background: #d8d4cc; position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--miele); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

/* Range slider */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--ink) var(--p, 50%), #e2ded6 var(--p, 50%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); cursor: grab; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.field { transition: border-color .15s, box-shadow .15s; }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,16,21,.08); }
.field.invalid { border-color: var(--miele); box-shadow: 0 0 0 3px rgba(165,0,30,.08); }

/* Animations */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .06s } .rise-2 { animation-delay: .12s } .rise-3 { animation-delay: .18s } .rise-4 { animation-delay: .24s } .rise-5 { animation-delay: .3s }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 6s linear infinite; transform-origin: center; transform-box: fill-box; }
.spin { animation: spin 1s linear infinite; }
@keyframes pulseDot { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.pulse-dot { animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes fillbar { from { width: 0 } }
.fillbar { animation: fillbar 1s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.marquee { display: flex; gap: 3rem; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.tabular { font-variant-numeric: tabular-nums; }
::selection { background: rgba(165,0,30,.15); }