@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-smooth: linear(0, 0.0435, 0.1411, 0.259, 0.3782, 0.4888, 0.5862, 0.6691, 0.7381, 0.7944, 0.8397, 0.8757, 0.9041, 0.9264, 0.9437, 0.9571, 0.9674, 0.9753, 0.9813, 0.9859, 0.9894, 0.992, 0.994, 0.9955, 0.9967, 0.9975, 0.9981, 0.9986, 1);
    --spring-snappy: linear(0, 0.0255, 0.0892, 0.1751, 0.2718, 0.3711, 0.4673, 0.5569, 0.6377, 0.7089, 0.7702, 0.8221, 0.8651, 0.9003, 0.9284, 0.9506, 0.9678, 0.9807, 0.9903, 0.9971, 1.0018, 1.0048, 1.0066, 1.0075, 1.0077, 1.0075, 1.007, 1.0063, 1.0056, 1.0048, 1.0041, 1.0034, 1.0028, 1.0022, 1);
    --spring-bouncy: linear(0, 0.0271, 0.0961, 0.1912, 0.2999, 0.4128, 0.5227, 0.625, 0.7166, 0.796, 0.8626, 0.9168, 0.9595, 0.9917, 1.015, 1.0307, 1.0402, 1.0449, 1.0459, 1.0443, 1.0409, 1.0364, 1.0313, 1.0261, 1.0211, 1.0165, 1.0124, 1.0088, 1.0059, 1.0035, 1.0016, 1.0002, 0.9992, 0.9985, 0.9981, 0.9979, 0.9979, 0.998, 0.9982, 0.9984, 1);
    --spring-jelly: linear(0, 0.0321, 0.1156, 0.2325, 0.3672, 0.5071, 0.6422, 0.7655, 0.8723, 0.9603, 1.0286, 1.0782, 1.1105, 1.128, 1.1332, 1.129, 1.1179, 1.1024, 1.0844, 1.0658, 1.0478, 1.0313, 1.0171, 1.0054, 0.9962, 0.9896, 0.9853, 0.983, 0.9822, 0.9828, 0.9843, 0.9863, 0.9887, 0.9912, 0.9936, 0.9958, 0.9977, 0.9993, 1.0005, 1.0014, 1.002, 1.0023, 1.0024, 1.0023, 1.0021, 1.0018, 1.0015, 1.0012, 1);
    --t-smooth: 0.73s;
    --t-snappy: 0.55s;
    --t-bouncy: 0.79s;
    --t-jelly: 1.12s;
  }
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

.wordmark,
.bar__actions {
  transition: opacity 0.35s, scale var(--t-smooth) var(--spring-smooth);
}

.bar__find {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: border-color 0.6s, background 0.3s;
}

.bar__find:hover {
  background: var(--glow);
}

.island {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--w, 0px);
  height: var(--h, 100%);
  translate: var(--x, 0px) 0;
  overflow: hidden;
  border-radius: var(--r, 17px);
  background: var(--ink);
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition:
    translate var(--t-snappy) var(--spring-snappy),
    width var(--t-snappy) var(--spring-snappy),
    height var(--t-snappy) var(--spring-snappy),
    border-radius 0.45s var(--ease),
    opacity 0.25s,
    background 0.8s,
    box-shadow 0.4s;
}

.island.is-on {
  opacity: 1;
}

.island.is-instant,
.island.is-instant .island__nav {
  transition: none;
}

.island[data-mode="card"] {
  box-shadow: 0 30px 60px -28px #000000a6;
  pointer-events: auto;
}

.island__nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  translate: calc(var(--x, 0px) * -1) 0;
  transition: translate var(--t-snappy) var(--spring-snappy), opacity 0.2s;
}

.bar__links .island__nav a,
.bar__links .island__nav a:hover {
  color: var(--bg);
}

.island[data-mode="msg"] .island__nav,
.island[data-mode="card"] .island__nav {
  opacity: 0;
}

html.island-on .bar__links > ul {
  opacity: 0;
  pointer-events: none;
}

.island__msg {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100vw - 28px);
  height: 34px;
  padding: 0 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  translate: -50% 0;
  scale: 0.9;
  transition: opacity 0.2s, filter 0.3s, scale var(--t-snappy) var(--spring-snappy);
}

.island[data-mode="msg"] .island__msg {
  opacity: 1;
  filter: none;
  scale: 1;
  transition-delay: 0.08s;
}

.island__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.island__icon {
  display: grid;
  flex: none;
  place-items: center;
}

.island__icon[hidden],
.island__aux[hidden] {
  display: none;
}

.island__icon[data-tone]:not([data-tone=""]) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80848e;
}

.island__icon[data-tone="online"] {
  background: #23a55a;
}

.island__icon[data-tone="idle"] {
  background: #f0b232;
}

.island__icon[data-tone="dnd"] {
  background: #f23f43;
}

.island__aux.is-busy {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid color-mix(in srgb, var(--bg) 28%, transparent);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.island__card {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 10px;
  width: var(--card-w, 360px);
  padding: 14px 14px 14px 18px;
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.2s, filter 0.35s;
}

.island[data-mode="card"] .island__card {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transition-delay: 0.14s;
}

.island__card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.island__card-head b {
  flex: 1;
  font-weight: 500;
  opacity: 0.66;
}

.island__x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 16%, transparent);
  color: var(--bg);
}

.island__card p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.island__card-actions {
  display: flex;
  gap: 8px;
  padding-top: 2px;
}

.island__btn {
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--bg) 34%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.island__btn--fill {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--ink);
}

.island :focus-visible {
  outline-color: var(--bg);
}

@media (min-width: 961px) {
  html.bar-mini:not(.island-on) .bar {
    width: calc(var(--links-w, 520px) + 16px);
  }
  html.bar-mini:not(.island-on) .wordmark,
  html.bar-mini:not(.island-on) .bar__actions {
    opacity: 0;
    scale: 0.86;
    pointer-events: none;
  }
}

@media (max-width: 960px) {
  html.bar-mini:not(.island-on) .bar {
    transform: translateY(calc(-100% - var(--bar-gap) - 14px));
  }
  .bar__find {
    display: none;
  }
}

.tabbar {
  display: none;
}

@media (max-width: 960px) {
  .tabbar {
    position: fixed;
    right: 10px;
    bottom: calc(10px + var(--safe-b));
    left: 106px;
    z-index: 8450;
    display: flex;
    max-width: 440px;
    height: 56px;
    margin-left: auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--glass-bar);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-hi), 0 18px 38px -22px var(--glass-drop);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.8s, box-shadow 0.8s;
  }

  .tabbar > a,
  .tabbar__clone > span {
    position: relative;
    display: grid;
    flex: 1;
    align-content: center;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 620;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    -webkit-touch-callout: none;
  }

  .tabbar > a {
    z-index: 1;
    color: var(--muted);
  }

  .tabbar .i {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
  }

  .tabbar__lens {
    position: absolute;
    z-index: 2;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: var(--w, 20%);
    translate: var(--x, 0px) 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: translate var(--t-snappy) var(--spring-snappy), scale var(--t-bouncy) var(--spring-bouncy), opacity 0.25s, background 0.8s;
  }

  .tabbar.is-ready .tabbar__lens {
    opacity: 1;
  }

  .tabbar__clone {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--row-w, 100%);
    height: 100%;
    color: var(--bg);
    translate: calc(var(--x, 0px) * -1) 0;
    transition: translate var(--t-snappy) var(--spring-snappy);
  }

  .tabbar.is-dragging .tabbar__lens {
    scale: 1.1 1.14;
    transition: scale var(--t-bouncy) var(--spring-bouncy);
  }

  .tabbar.is-dragging .tabbar__clone,
  .tabbar.is-instant .tabbar__lens,
  .tabbar.is-instant .tabbar__clone {
    transition: none;
  }

  .dock {
    left: 10px;
    bottom: calc(10px + var(--safe-b));
    gap: 6px;
    height: 56px;
    padding: 6px 8px 6px 6px;
    border: 0;
    background: var(--glass-bar);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-hi), 0 18px 38px -22px var(--glass-drop);
  }

  .dock__play {
    width: 44px;
    height: 44px;
  }

  .dock__meta,
  .dock__eq {
    display: none;
  }

  html.is-scrolled .dock:not(:hover):not(:focus-within) {
    gap: 6px;
  }

  .foot__row {
    padding-bottom: calc(96px + var(--safe-b));
  }
}

@media (max-width: 350px) {
  .tabbar > a span,
  .tabbar__clone > span span {
    display: none;
  }
}

.talk-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.talk-form[hidden] {
  display: none;
}

.talk-form > .mono {
  font-size: 9.5px;
  color: var(--hud);
}

.talk-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.talk-input::placeholder {
  color: var(--hud);
}

.talk-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--glow);
}

.talk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.talk-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.talk-send[disabled] {
  opacity: 0.55;
  cursor: progress;
}

@media (max-width: 760px) {
  .talk-input {
    font-size: 16px;
  }
}

.chip[data-state="wolny"] i {
  background: #23a55a;
}

.chip[data-state="zajety"] i {
  background: #f0b232;
}

.chip[data-state="przerwa"] i {
  background: #80848e;
  animation: none;
}

.rpc__bar {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line-strong);
}

.rpc__bar[hidden] {
  display: none;
}

.rpc__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 1s linear;
}

.rpc__activity > div {
  flex: 1;
  min-width: 0;
}

.rpc__now {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  font-size: 13px;
}

.rpc__now[hidden] {
  display: none;
}

.rpc__now small {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--hud);
}

@keyframes vt-slide-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes vt-slide-under {
  to {
    transform: translate3d(-24%, 0, 0);
    filter: brightness(0.7);
  }
}

@keyframes vt-slide-out {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes vt-slide-over {
  from {
    transform: translate3d(-24%, 0, 0);
    filter: brightness(0.7);
  }
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
    scale: 0.97;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    scale: 1.03;
  }
}

@keyframes vt-circle {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%));
  }
  to {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0%));
  }
}

::view-transition {
  pointer-events: none;
}

html.vt-route .bar {
  view-transition-name: bar;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

html.vt-route .dock {
  view-transition-name: dock;
}

html.vt-route .tabbar {
  view-transition-name: tabbar;
}

html.vt-route .cursor {
  view-transition-name: cursor;
}

::view-transition-old(bar),
::view-transition-old(dock),
::view-transition-old(tabbar),
::view-transition-old(cursor) {
  display: none;
}

::view-transition-new(bar),
::view-transition-new(dock),
::view-transition-new(tabbar),
::view-transition-new(cursor) {
  animation: none;
  mix-blend-mode: normal;
}

html.vt-route::view-transition-old(root),
html.vt-route::view-transition-new(root) {
  animation-duration: 0.56s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

html.vt-route[data-dir="fwd"]::view-transition-old(root) {
  animation-name: vt-slide-under;
}

html.vt-route[data-dir="fwd"]::view-transition-new(root) {
  animation-name: vt-slide-in;
  box-shadow: -60px 0 90px -30px #00000073;
}

html.vt-route[data-dir="back"]::view-transition-old(root) {
  z-index: 1;
  animation-name: vt-slide-out;
  box-shadow: -60px 0 90px -30px #00000073;
}

html.vt-route[data-dir="back"]::view-transition-new(root) {
  animation-name: vt-slide-over;
}

html.vt-route[data-dir="zoom"]::view-transition-old(root) {
  animation: vt-fade-out 0.34s var(--ease) both;
}

html.vt-route[data-dir="zoom"]::view-transition-new(root) {
  animation: vt-fade-in 0.5s var(--ease) both;
}

::view-transition-group(p-shot),
::view-transition-group(p-title) {
  animation-duration: 0.62s;
  animation-timing-function: var(--ease-ios);
}

::view-transition-old(p-shot),
::view-transition-new(p-shot) {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

::view-transition-old(p-title),
::view-transition-new(p-title) {
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

html.vt-theme *,
html.vt-theme *::before,
html.vt-theme *::after {
  transition: none !important;
}

html.vt-theme::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.vt-theme::view-transition-new(root) {
  animation: vt-circle 0.75s var(--ease-ios) both;
  mix-blend-mode: normal;
}

#main,
.foot {
  transition: transform 0.65s var(--ease-ios), filter 0.65s var(--ease-ios);
}

html.sheet-open #main,
html.sheet-open .foot {
  transform: scale(0.965);
  filter: brightness(0.92);
}

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: grid;
  place-items: end center;
}

.sheet-layer[hidden] {
  display: none;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: #00000047;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.45s;
}

.sheet-layer.is-open .sheet-backdrop {
  opacity: 1;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 640px);
  max-height: min(88dvh, 780px);
  padding-bottom: var(--safe-b);
  border-radius: 30px 30px 0 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 -30px 80px -30px #00000080, inset 0 0 0 1px var(--glass-ring);
  outline: none;
  transform: translate3d(0, var(--sy, 110%), 0);
  will-change: transform;
}

.sheet__grab {
  display: grid;
  flex: none;
  place-items: center;
  height: 26px;
  cursor: grab;
  touch-action: none;
}

.sheet__grab i {
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--line-strong);
}

.sheet__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 26px 16px;
  touch-action: none;
}

.sheet__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--hud);
}

.sheet__head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 1;
}

.sheet__x {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
}

.sheet__body {
  flex: 1;
  min-height: 0;
  padding: 0 26px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

.sheet__body > * + * {
  margin-top: 16px;
}

.sheet__body h3 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hud);
}

.sheet__body pre {
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
}

.sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet__chips a,
.sheet__chips span {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
}

.sheet__chips a:hover {
  border-color: var(--ink);
}

@media (min-width: 761px) {
  .sheet-layer {
    place-items: center;
  }
  .sheet {
    max-height: min(82dvh, 720px);
    border-radius: 30px;
    box-shadow: 0 50px 110px -40px #000000a6, inset 0 0 0 1px var(--glass-ring);
    opacity: 0;
    transition: opacity 0.25s;
  }
  .sheet-layer.is-open .sheet {
    opacity: 1;
  }
  .sheet__grab {
    height: 18px;
    cursor: default;
  }
  .sheet__grab i {
    display: none;
  }
}

.spot-layer {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: min(16vh, 150px) 12px 12px;
}

.spot-layer[hidden] {
  display: none;
}

.spot-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 46%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.35s;
}

.spot-layer.is-open .spot-backdrop {
  opacity: 1;
}

.spot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 640px);
  max-height: min(70dvh, 620px);
  overflow: hidden;
  border-radius: 26px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-hi), 0 50px 100px -40px #000000a6;
  opacity: 0;
  filter: blur(10px);
  scale: 0.94;
  translate: 0 -14px;
  transform-origin: top center;
  transition: opacity 0.2s, filter 0.3s, scale var(--t-snappy) var(--spring-snappy), translate var(--t-snappy) var(--spring-snappy);
}

.spot-layer.is-open .spot {
  opacity: 1;
  filter: none;
  scale: 1;
  translate: 0 0;
}

.spot__field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 6px 18px 6px 22px;
  border-bottom: 1px solid var(--line);
}

.spot__field input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.spot__field input::placeholder {
  color: var(--hud);
}

.spot kbd,
.foot kbd {
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--hud);
}

.spot__list {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.spot__hl {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: var(--h, 46px);
  border-radius: 14px;
  background: var(--ink);
  opacity: 0;
  translate: 0 var(--y, 0px);
  transition: translate 0.36s var(--spring-snappy), opacity 0.2s;
}

.spot__hl.is-on {
  opacity: 1;
}

.spot__group {
  padding: 12px 14px 6px;
  font-size: 9.5px;
  color: var(--hud);
}

.spot__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  color: var(--ink);
  transition: color 0.2s;
}

.spot__item b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  transition: border-color 0.2s;
}

.spot__item span {
  overflow: hidden;
  font-size: 15px;
  font-weight: 520;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spot__item small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--hud);
  transition: color 0.2s;
}

.spot__item[aria-selected="true"] {
  color: var(--bg);
}

.spot__item[aria-selected="true"] b {
  border-color: color-mix(in srgb, var(--bg) 40%, transparent);
}

.spot__item[aria-selected="true"] small {
  color: color-mix(in srgb, var(--bg) 70%, transparent);
}

.spot__empty {
  padding: 34px 14px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.spot__foot {
  display: flex;
  flex: none;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--hud);
}

.spot__foot span:last-child {
  margin-left: auto;
}

@media (max-width: 760px) {
  .spot-layer {
    padding-top: calc(var(--bar-h) + 4px);
  }
  .spot__foot {
    display: none;
  }
}

.seg {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  scrollbar-width: none;
}

.seg::-webkit-scrollbar {
  display: none;
}

.seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--w, 0px);
  border-radius: 999px;
  background: var(--ink);
  translate: var(--x, 0px) 0;
  transition: translate var(--t-snappy) var(--spring-snappy), width var(--t-snappy) var(--spring-snappy), background 0.8s;
}

.seg button {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s;
}

.seg button[aria-pressed="true"],
.seg button[aria-selected="true"] {
  color: var(--bg);
}

.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.3s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #00000047;
  transition: translate var(--t-snappy) var(--spring-snappy), width 0.2s;
}

.switch:active::after {
  width: 29px;
}

.switch[aria-checked="true"] {
  background: #23a55a;
}

.switch[aria-checked="true"]::after {
  translate: 18px 0;
}

.switch[aria-checked="true"]:active::after {
  translate: 13px 0;
}

.manifest {
  padding-block: 150px 60px;
}

.manifest p {
  max-width: 1080px;
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

.manifest .fw {
  opacity: clamp(0.14, calc(var(--p, 0) * var(--n, 1) * 1.15 - var(--i, 0)), 1);
  transition: opacity 0.25s linear;
}

.manifest__meta {
  display: flex;
  gap: 28px;
  margin-top: 34px;
  font-size: 10px;
  color: var(--hud);
}

html.is-playing .ticker {
  --skew: 0deg;
}

.ticker__track {
  transform-origin: center;
}

@media (max-width: 760px) {
  .manifest {
    padding-block: 90px 30px;
  }
  .sheet__head {
    padding-inline: 20px;
  }
  .sheet__body {
    padding: 0 20px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifest .fw {
    opacity: 1;
  }
  html.sheet-open #main,
  html.sheet-open .foot {
    transform: none;
  }
}

.term__body.is-live {
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: text;
}

.term__body.is-live .term__out {
  white-space: pre-wrap;
}

.term__input {
  width: calc(100% - 26px);
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  caret-color: var(--ink);
}

.term__input::placeholder {
  color: var(--hud);
}

@media (max-width: 760px) {
  .term__input {
    font-size: 16px;
  }
}