:root {
  --st-all: #0066e6;
  --st-today: #e66600;
  --st-week: #e63366;
  --st-month: #9933e6;
  --st-future: #ac8700;
  --st-done: #2ea62e;
  --st-project: #3334d2;
  --st-ring: rgba(16, 33, 63, 0.14);
  --st-ring-faint: rgba(16, 33, 63, 0.07);
  --st-pool: rgba(37, 74, 168, 0.12);
  --st-card: #fffdf8;
  --st-card-edge: rgba(16, 33, 63, 0.08);
  --st-bar: rgba(16, 33, 63, 0.12);
  --st-bar-strong: rgba(16, 33, 63, 0.22);
}
:root[data-theme=dark] {
  --st-all: #66aaff;
  --st-today: #ff8e33;
  --st-week: #ff6692;
  --st-month: #cb87ff;
  --st-future: #f2c21f;
  --st-done: #66cc66;
  --st-project: #9ea0ff;
  --st-ring: rgba(255, 255, 255, 0.16);
  --st-ring-faint: rgba(255, 255, 255, 0.07);
  --st-pool: rgba(103, 143, 245, 0.2);
  --st-card: #1a2640;
  --st-card-edge: rgba(255, 255, 255, 0.08);
  --st-bar: rgba(255, 255, 255, 0.12);
  --st-bar-strong: rgba(255, 255, 255, 0.24);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme=auto],
  :root:not([data-theme]) {
    --st-all: #66aaff;
    --st-today: #ff8e33;
    --st-week: #ff6692;
    --st-month: #cb87ff;
    --st-future: #f2c21f;
    --st-done: #66cc66;
    --st-project: #9ea0ff;
    --st-ring: rgba(255, 255, 255, 0.16);
    --st-ring-faint: rgba(255, 255, 255, 0.07);
    --st-pool: rgba(103, 143, 245, 0.2);
    --st-card: #1a2640;
    --st-card-edge: rgba(255, 255, 255, 0.08);
    --st-bar: rgba(255, 255, 255, 0.12);
    --st-bar-strong: rgba(255, 255, 255, 0.24);
  }
}
.stage-constellation {
  --size: 220px;
  --radius: calc(var(--size) * 0.4);
  --tile: calc(var(--size) * 0.13);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.stage-constellation::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--st-pool) 0%, transparent 70%);
}
.stage-constellation__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: 1px solid var(--st-ring);
  transform: translate(-50%, -50%);
}
.stage-constellation__ring--inner { --d: calc(var(--size) * 0.52); border-color: var(--st-ring-faint); }
.stage-constellation__ring--main { --d: calc(var(--radius) * 2); }
.stage-constellation__ring--outer {
  --d: calc(var(--size) * 1.1);
  border-color: var(--st-ring-faint);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
  mask-image: radial-gradient(circle, #000 55%, transparent 72%);
}
.stage-constellation__centre {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * 0.3);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 18px rgba(var(--shadow-rgb), 0.18));
}
.stage-constellation__centre img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.stage-tile {
  --t: var(--st-all);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tile);
  height: var(--tile);
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  display: grid;
  place-items: center;
  border-radius: 28%;
  color: #fff;
  background: var(--t);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 3px 8px color-mix(in srgb, var(--t) 32%, transparent);
  transform: rotate(var(--a)) translate(var(--radius)) rotate(calc(var(--a) * -1));
}
.stage-tile svg {
  width: 52%;
  height: 52%;
}
.stage-tile--icon {
  width: calc(var(--tile) * 1.5);
  height: calc(var(--tile) * 1.5);
  margin: calc(var(--tile) * -0.75) 0 0 calc(var(--tile) * -0.75);
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 6px 12px rgba(var(--shadow-rgb), 0.16));
}
.stage-tile--icon img {
  width: 100%;
  height: auto;
}
.stage-tile[data-slot=all] { --t: var(--st-all); }
.stage-tile[data-slot=today] { --t: var(--st-today); }
.stage-tile[data-slot=week] { --t: var(--st-week); }
.stage-tile[data-slot=month] { --t: var(--st-month); }
.stage-tile[data-slot=future] { --t: var(--st-future); }
.stage-tile[data-slot=done] { --t: var(--st-done); }
.stage-tile[data-slot=project] { --t: var(--st-project); }
.stage-constellation > i.stage-tile:nth-of-type(1) { --a: -76deg; }
.stage-constellation > i.stage-tile:nth-of-type(2) { --a: -16deg; }
.stage-constellation > i.stage-tile:nth-of-type(3) { --a: 44deg; }
.stage-constellation > i.stage-tile:nth-of-type(4) { --a: 104deg; }
.stage-constellation > i.stage-tile:nth-of-type(5) { --a: 164deg; }
.stage-constellation > i.stage-tile:nth-of-type(6) { --a: 224deg; }
@media (prefers-reduced-motion: no-preference) {
  .stage-constellation {
    animation: stage-in 900ms cubic-bezier(0.2, 0.65, 0.2, 1) 120ms backwards;
  }
}
@keyframes stage-in {
  from { opacity: 0; transform: scale(0.94); }
}
.hero__constellation {
  display: none;
}
@media (min-width: 1100px) {
  .hero--home .hero-collage {
    display: none;
  }
  .hero--home .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    -moz-column-gap: clamp(32px, 4vw, 72px);
    column-gap: clamp(32px, 4vw, 72px);
  }
  .hero--home .hero__inner > * {
    grid-column: 1;
  }
  .hero--home .hero__inner > .hero-apps {
    grid-column: 1 / -1;
  }
  .hero__constellation {
    --size: clamp(300px, 27vw, 380px);
    display: block;
    grid-column: 2 !important;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
  }
}
.hero__constellation .stage-constellation__centre {
  width: calc(var(--size) * 0.16);
}
.typing-demo .bento-card__field {
  position: relative;
  min-height: 1.6em;
}
.typing-demo__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--app-accent, var(--st-all));
  border-radius: 1px;
  animation: typing-caret 1s steps(1) infinite;
}
@keyframes typing-caret {
  50% { opacity: 0; }
}
.typing-demo__word {
  border-radius: 6px;
  transition: background-color 220ms ease, color 220ms ease;
}
.typing-demo__word.is-read {
  color: var(--app-accent, var(--st-all));
  background: color-mix(in srgb, var(--app-accent, var(--st-all)) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent, var(--st-all)) 14%, transparent);
}
.typing-demo .bento-card__chips li {
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.typing-demo.is-running .bento-card__chips li:not(.is-shown) {
  opacity: 0;
  transform: translateY(4px) scale(0.92);
}
.stage-vignette {
  --t: var(--app-accent, var(--st-all));
  margin: 4px 0 16px;
  padding: 6px;
  border-radius: 16px;
  background: var(--st-card);
  border: 1px solid var(--st-card-edge);
  box-shadow: inset 0 1px 0 var(--highlight-soft), 0 2px 10px rgba(var(--shadow-rgb), 0.07);
  font-size: 0.78rem;
  line-height: 1.2;
}
.sv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 11px;
}
.sv-row--active {
  background: color-mix(in srgb, var(--t) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 24%, transparent);
}
.sv-row--faded { opacity: 0.55; }
.sv-lines {
  flex: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
}
.sv-bar {
  display: block;
  width: var(--w, 80%);
  height: 7px;
  border-radius: 4px;
  background: var(--st-bar);
}
.sv-bar--strong { height: 8px; background: var(--st-bar-strong); }
.sv-mono {
  --m: var(--t);
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--m);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sv-meta {
  flex: none;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sv-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--t) 85%, var(--ink));
  background: color-mix(in srgb, var(--t) 14%, transparent);
  font-weight: 650;
  white-space: nowrap;
}
.sv-token svg { width: 11px; height: 11px; }
.sv-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
}
.sv-marker::before,
.sv-marker::after {
  content: "";
  flex: 1;
  height: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--t) 50%, transparent);
}
.sv-ring {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--t) calc(var(--p, 1) * 1turn), color-mix(in srgb, var(--t) 18%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px);
  mask: radial-gradient(circle, transparent 5.5px, #000 6px);
}
.sv-locked {
  position: relative;
  padding: 12px;
}
.sv-locked__page {
  display: grid;
  gap: 7px;
  filter: blur(3px);
}
.sv-locked__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
}
.sv-tile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  background: var(--t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px color-mix(in srgb, var(--t) 30%, transparent);
}
.sv-tile svg { width: 20px; height: 20px; }