:root {
  --unit: 9.12px;
  --side-w: 255.36px;

  --text: #17181b;
  --secondary: #646871;
  --disabled: #858a94;

  --line: #e3e5e8;
  --border: #e3e5e8;
  --border-hover: #c8cbd1;

  --main: #5e6ad2;
  --main-hover: #505cc0;
  --main-active: #4651b0;
  --link: #5e6ad2;
  --pale-control: #dce0f8;
  --ring: rgba(94, 106, 210, .45);

  --bg: #ffffff;
  --bg-secondary: #f5f6f6;
  --bg-hover: #edeef0;
  --bg-selected: #eeeffa;
  --bg-tag: #edeef0;

  --error: #d92525;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --success: #12853c;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --warning-bg-hover: #fef3c7;

  --radius-sm: 6.84px;
  --radius: 9.12px;
  --radius-lg: 11.4px;
  --radius-xl: 15.96px;

  --shadow-xs: 0 1.14px 2.28px 0 rgba(0, 0, 0, .05);
  --shadow-sm: 0 1.14px 3.42px 0 rgba(0, 0, 0, .08), 0 1.14px 2.28px -1.14px rgba(0, 0, 0, .08);
  --shadow-md: 0 4.56px 6.84px -1.14px rgba(0, 0, 0, .08), 0 2.28px 4.56px -2.28px rgba(0, 0, 0, .06);
  --shadow-lg: 0 11.4px 17.1px -3.42px rgba(0, 0, 0, .1), 0 4.56px 6.84px -4.56px rgba(0, 0, 0, .06);
  --shadow-popup: var(--shadow-md);

  --on-main: #ffffff;
  --solid: rgba(94, 106, 210, .1);
  --solid-hover: rgba(94, 106, 210, .17);
  --solid-edge: rgba(94, 106, 210, .72);
  --on-solid: #505cc0;
  --solid-fill: #5e6ad2;
  --solid-fill-hover: #505cc0;
  --on-solid-fill: #ffffff;
  --flash-bg: #eeeffa;
  --offtime-stripe: rgba(115, 115, 115, .07);

  --text-xs: 0.79rem;
  --text-sm: 0.889rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.266rem;
  --text-xl: 1.424rem;
  --text-2xl: 1.802rem;
  --text-3xl: 2.027rem;
  --text-4xl: 2.566rem;

  --ease: .15s cubic-bezier(.4, 0, .2, 1);
  --ease-press: .08s cubic-bezier(.4, 0, .2, 1);
  --ease-spring: .28s cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --text: #f7f8f8;
  --secondary: #8a8f98;
  --disabled: #62666d;

  --line: #23252a;
  --border: #23252a;
  --border-hover: #34343a;

  --main: #5e6ad2;
  --main-hover: #828fff;
  --main-active: #a2abff;
  --link: #828fff;
  --pale-control: #30365e;
  --ring: rgba(94, 106, 210, .5);

  --bg: #010102;
  --bg-secondary: #0f1011;
  --bg-hover: #18191a;
  --bg-selected: #1b1d30;
  --bg-tag: #141516;

  --error: #f87171;
  --error-bg: #2a1315;
  --error-border: #7f1d1d;
  --success: #4ade80;
  --success-bg: #0f2417;
  --success-border: #14532d;
  --warning: #fbbf24;
  --warning-bg: #2a2010;
  --warning-border: #78350f;
  --warning-bg-hover: #3a2c12;

  --shadow-xs: 0 1.14px 2.28px 0 rgba(0, 0, 0, .4);
  --shadow-sm: 0 1.14px 3.42px 0 rgba(0, 0, 0, .5), 0 1.14px 2.28px -1.14px rgba(0, 0, 0, .4);
  --shadow-md: 0 4.56px 6.84px -1.14px rgba(0, 0, 0, .5), 0 2.28px 4.56px -2.28px rgba(0, 0, 0, .4);
  --shadow-lg: 0 11.4px 17.1px -3.42px rgba(0, 0, 0, .6), 0 4.56px 6.84px -4.56px rgba(0, 0, 0, .4);

  --on-main: #ffffff;
  --solid: rgba(94, 106, 210, .16);
  --solid-hover: rgba(94, 106, 210, .26);
  --solid-edge: rgba(94, 106, 210, .58);
  --on-solid: #a2abff;
  --solid-fill: #5e6ad2;
  --solid-fill-hover: #626dcb;
  --on-solid-fill: #ffffff;
  --flash-bg: #1b1d30;
  --offtime-stripe: rgba(255, 255, 255, .05);

  color-scheme: dark;
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }

code {
  padding: 1.14px 5.7px;
  background: var(--bg-tag);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
}

:focus-visible {
  outline: none;
  border-color: var(--main);
}

a:focus-visible,
.linkish:focus-visible {
  outline: 1.5px solid var(--main);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.is-hidden { display: none !important; }

.side {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--side-w);
  padding: calc(var(--unit) * 2) 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
}

.side__brand {
  display: flex;
  align-items: center;
  gap: 11.4px;
  padding: 0 calc(var(--unit) * 2) calc(var(--unit) * 3);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -.02em;
}
.side__brand:hover { text-decoration: none; }

.side__nav { display: flex; flex-direction: column; gap: 2.28px; padding: 0 13.68px; }
.side__nav a {
  display: flex;
  align-items: center;
  gap: 11.4px;
  height: 41.04px;
  padding: 0 11.4px;
  border-radius: var(--radius);
  color: var(--secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--ease), color var(--ease);
}
.side__nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.side__nav a.is-current { background: var(--bg-hover); color: var(--text); }

.ico {
  flex: none;
  width: 20.52px;
  height: 20.52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side__nav a:hover .ico, .side__nav a.is-current .ico { stroke: var(--main); }

.side__foot {
  display: flex;
  flex-direction: column;
  gap: 13.68px;
  margin-top: auto;
  padding: calc(var(--unit) * 2) 13.68px 0;
}

.side__foot form { margin: 0; }

.account {
  display: flex;
  align-items: center;
  gap: var(--unit);
  width: 100%;
  padding: 9.12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease);
}
.account:hover { background: var(--bg-hover); }
.account[aria-expanded="true"] { background: var(--bg-hover); }

.account__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36.48px;
  height: 36.48px;
  background: var(--bg-tag);
  border-radius: var(--radius);
}
.account__avatar svg { width: 20.52px; height: 20.52px; fill: none; stroke: var(--secondary); stroke-width: 1.6; }

.account__id { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.account__mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}
.account__plan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--secondary);
  font-size: var(--text-xs);
}
.account__plan--warn { color: var(--warning); }

.account__chev { flex: none; width: 18.24px; height: 18.24px; stroke: var(--disabled); }

.menu--up .menu__panel { top: auto; bottom: calc(100% + 6.84px); left: 0; right: 0; min-width: 0; }
.menu__item--warn { color: var(--warning); }
.menu__item--warn:hover { background: var(--warning-bg); }
.menu__item--pro { color: var(--main); font-weight: 500; }
.menu__item--pro:hover { background: var(--bg-selected); }

.side__cta { display: flex; flex-direction: column; gap: 6.84px; }
.side__cta .btn { width: 100%; }
.side__cta .side__signin { text-align: center; font-size: var(--text-sm); color: var(--secondary); }
.side__cta .side__signin:hover { color: var(--text); }

.main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }

@media (min-width: 1140px) {
  .centered { transform: translateX(calc(var(--side-w) / -2)); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6.84px;
  flex: none;
  height: 41.04px;
  padding: 0 15.96px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-hover); text-decoration: none; }
.btn:active { background: var(--bg-tag); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.is-active { background: var(--main); border-color: var(--main); color: var(--on-main); }
.btn[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3.42px var(--error-bg); }

.btn svg { pointer-events: none; flex: none; }
.btn .ico { width: 18.24px; height: 18.24px; }
.btn:has(> .ico) { padding-inline: 13.68px; }
.btn--sm:has(> .ico) { padding-inline: 11.4px; }
.btn--icon:has(> .ico) { padding-inline: 0; }

.btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 17.1px;
  height: 17.1px;
  margin: auto;
  border: 2px solid var(--border);
  border-top-color: var(--main);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn--sm { height: 36.48px; padding: 0 13.68px; font-size: var(--text-sm); }

.btn--lg {
  height: 47.88px;
  padding: 0 25.08px;
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}
.btn--lg .ico { width: 19.38px; height: 19.38px; }

.btn--primary {
  width: 100%;
  background: var(--solid-fill);
  border-color: var(--solid-fill);
  color: var(--on-solid-fill);
  box-shadow: none;
}
.btn--primary .ico { stroke: currentColor; transition: transform var(--ease); }
.btn--primary:hover {
  background: var(--solid-fill-hover);
  border-color: var(--solid-fill-hover);
  color: var(--on-solid-fill);
}
.btn--primary:hover .ico { transform: translateX(3.42px); }
.btn--primary:active { filter: brightness(.94); }

.btn--solid {
  width: 100%;
  background: var(--solid-fill);
  border-color: var(--solid-fill);
  color: var(--on-solid-fill);
  box-shadow: var(--shadow-xs);
}
.btn--solid:hover {
  background: var(--solid-fill-hover);
  border-color: var(--solid-fill-hover);
  color: var(--on-solid-fill);
}
.btn--solid:active { filter: brightness(.94); }
.btn--primary[aria-busy="true"]::after,
.btn--solid[aria-busy="true"]::after {
  border-color: color-mix(in srgb, var(--on-solid-fill) 30%, transparent);
  border-top-color: var(--on-solid-fill);
}

.btn--ghost { background: none; border-color: transparent; box-shadow: none; color: var(--secondary); }
.btn--ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--text); }

.btn--inline { width: auto; padding: 0 18.24px; }

.btn--icon { width: 41.04px; padding: 0; }

@media (pointer: coarse) {
  .btn, .btn--sm, .btn--icon { min-height: 44px; }
  .btn--icon { min-width: 44px; }
}
.btn--icon.btn--sm { width: 36.48px; }

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}
.linkish:hover { text-decoration: underline; }

.seg {
  display: inline-flex;
  gap: 2.28px;
  padding: 3.42px;
  background: var(--bg-tag);
  border-radius: var(--radius-lg);
}
.seg__btn {
  height: 29.64px;
  padding: 0 13.68px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--unit);
  color: var(--secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  user-select: none;
}
.switch:hover { color: var(--text); }
.switch input {
  position: absolute;
  width: 1.14px;
  height: 1.14px;
  margin: -1.14px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.switch__track {
  position: relative;
  flex: none;
  width: 36.48px;
  height: 20.52px;
  border-radius: 1138.86px;
  background: var(--bg-tag);
  border: 1px solid var(--border);
  transition: background var(--ease), border-color var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 1.14px;
  left: 1.14px;
  width: 15.96px;
  height: 15.96px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease);
}
.switch input:checked + .switch__track { background: var(--main); border-color: var(--main); }
.switch input:checked + .switch__track::after { transform: translateX(15.96px); }
.switch input:focus-visible + .switch__track { border-color: var(--main); }

.menu { position: relative; display: inline-flex; }
.menu__panel {
  position: absolute;
  top: calc(100% + 6.84px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2.28px;
  min-width: 223.44px;
  padding: 5.7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.menu__panel form { margin: 0; display: flex; }
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--unit);
  width: 100%;
  height: 36.48px;
  padding: 0 11.4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.menu__item:hover { background: var(--bg-hover); text-decoration: none; }
.menu__item.is-active { color: var(--main); font-weight: 500; }
.menu__item--danger { color: var(--error); }
.menu__item--danger:hover { background: var(--error-bg); }
.menu__sep { height: 1.14px; margin: 4.56px 0; border: 0; background: var(--line); }
.menu__field { display: flex; gap: 4.56px; padding: 5.7px 11.4px 9.12px; }

.menu--wide .menu__panel { min-width: 364.8px; padding: 13.68px; gap: 0; }

.share__title { margin: 0 0 11.4px; color: var(--secondary); font-size: var(--text-sm); line-height: 1.45; }

.share__link {
  display: flex;
  align-items: center;
  height: 36.48px;
  margin-bottom: 13.68px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.share__link:focus-within { border-color: var(--main); }

.share__url {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 11.4px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--secondary);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
}
.share__url:focus, .share__url:focus-visible { outline: none; box-shadow: none; }

.share__link .btn {
  position: relative;
  align-self: stretch;
  height: auto;
  margin: 3.42px;
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--secondary);
}
.share__link .btn:hover { background: var(--bg-hover); color: var(--text); border-color: transparent; }
.share__link .btn::before {
  content: "";
  position: absolute;
  left: -3.42px;
  top: 6.84px;
  bottom: 6.84px;
  width: 1px;
  background: var(--border);
}

.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11.4px;
  padding: 9.12px 11.4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.item--muted { background: var(--bg-secondary); border-color: var(--line); }
.item__content { display: flex; flex: 1; flex-direction: column; gap: 2.28px; min-width: 0; }
.item__title { font-weight: 500; line-height: 1.35; }
.item__desc { color: var(--secondary); font-size: var(--text-sm); line-height: 1.4; }
.item__actions { display: flex; align-items: center; gap: 6.84px; }

.share__form { display: flex; flex-direction: column; gap: 11.4px; }
.share__pass__inner { display: flex; flex-direction: column; gap: 4.56px; }
.share__input {
  width: 100%;
  height: 36.48px;
  padding: 0 11.4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}
.share__input:focus { border-color: var(--main); }
.share__hint { margin: 0; color: var(--secondary); font-size: var(--text-xs); line-height: 1.4; }
.share__hint--plan { margin-top: 11.4px; }
.share__edit .btn { align-self: flex-start; }
.share__form .btn--primary { width: 100%; }

.share__note {
  margin: 0;
  padding: 11.4px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  color: var(--warning);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.share__note a { color: inherit; text-decoration: underline; }
.share__note .share__inline { display: inline-flex; }
.share__note .linkish { color: inherit; }

.toast.toast--flash {
  max-width: min(25rem, 100%);
  background: var(--bg-secondary);
  border-color: var(--border-hover);
}
.toast--flash .toast__text { overflow-wrap: anywhere; }
.toast--flash .toast__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.page { width: 100%; max-width: 55rem; margin: 0 auto; padding: calc(var(--unit) * 5) calc(var(--unit) * 3) calc(var(--unit) * 8); }
.page--text { max-width: 46rem; }
.crumbs { margin-bottom: calc(var(--unit) * 2); font-size: var(--text-sm); color: var(--secondary); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--unit) * .75); margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: center; gap: calc(var(--unit) * .75); }
.crumbs li + li::before { content: "/"; color: var(--disabled); }
.crumbs a { color: var(--secondary); text-decoration: none; border-radius: var(--radius-sm); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.crumbs [aria-current="page"] { color: var(--text); }
.landing .crumbs ol { justify-content: center; }

.page__head { display: flex; align-items: center; gap: calc(var(--unit) * 2); margin-bottom: calc(var(--unit) * 3); }
.page__head h1 { font-size: var(--text-2xl); margin-right: auto; }
.page__head + .lead { margin-top: calc(var(--unit) * -1); }

.centered { margin-inline: auto; }

.landing, .page, .sample, .sample__head {
  --text-xs: 0.83rem;
  --text-sm: 0.933rem;
  --text-base: 1.05rem;
  --text-md: 1.181rem;
  --text-lg: 1.329rem;
  --text-xl: 1.495rem;
  --text-2xl: 1.892rem;
  --text-3xl: 2.128rem;
  --text-4xl: 2.694rem;
}

.sample__head { flex: none; width: 100%; max-width: 46rem; margin: 0 auto; padding: calc(var(--unit) * 4) calc(var(--unit) * 3) calc(var(--unit) * 2); }
.sample__head h1 { font-size: var(--text-2xl); line-height: 1.2; margin: 0 0 6.84px; }
.sample__head .lead { margin: 0; font-size: var(--text-base); }
.sample__head ~ .app { flex: none; height: clamp(420px, 70vh, 880px); }

.sample { width: 100%; max-width: 46rem; margin: 0 auto; padding: calc(var(--unit) * 5) calc(var(--unit) * 3) calc(var(--unit) * 6); }
.sample p { margin: 0 0 calc(var(--unit) * 2); line-height: 1.65; }
.sample__facts { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * .75) calc(var(--unit) * 2.5); margin: 0 0 calc(var(--unit) * 3); padding: 0; list-style: none; color: var(--secondary); font-size: var(--text-sm); }
.sample__facts b { color: var(--text); font-weight: 600; }
.sample__more { color: var(--secondary); }

.landing { width: 100%; max-width: 46rem; margin: 0 auto; padding: calc(var(--unit) * 10) calc(var(--unit) * 3) calc(var(--unit) * 8); text-align: center; }
.landing h1 { font-size: var(--text-4xl); line-height: 1.12; letter-spacing: -.03em; margin-bottom: 15.96px; }
.lead { color: var(--secondary); margin: 0 0 calc(var(--unit) * 4); font-size: var(--text-md); line-height: 1.6; }
.landing .lead { max-width: 52ch; margin-inline: auto; }

.auth { width: 100%; max-width: 27.075rem; margin: 0 auto; padding: calc(var(--unit) * 8) calc(var(--unit) * 3); }
.auth h1 { font-size: var(--text-2xl); margin-bottom: 6.84px; }
.auth .lead { margin-bottom: calc(var(--unit) * 3); font-size: var(--text-base); line-height: 1.55; }
.auth--reset > h1 { margin-bottom: 11.4px; }
.auth--reset > .lead { margin-bottom: calc(var(--unit) * 2.5); }

.auth__foot {
  margin-top: calc(var(--unit) * 3);
  padding-top: calc(var(--unit) * 2);
  border-top: 1px solid var(--line);
  color: var(--secondary);
  font-size: var(--text-sm);
}
.auth form .btn--primary, .auth form .btn--solid { margin-top: 6.84px; }

.auth__sent-to {
  margin: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.auth__foot p { margin: 0; }
.auth__row { display: flex; align-items: baseline; gap: 4.56px; }
.auth__alt { margin: var(--unit) 0 0; color: var(--disabled); font-size: var(--text-sm); }

.drop {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11.4px;
  min-height: 296.4px;
  padding: calc(var(--unit) * 5) calc(var(--unit) * 4);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-xl);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.drop::before {
  content: "";
  width: 50.16px;
  height: 50.16px;
  margin-bottom: 6.84px;
  border-radius: var(--radius-lg);
  background: var(--bg) center / 25.08px 25.08px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5-5 5 5'/%3E%3Cpath d='M12 5v12'/%3E%3C/svg%3E");
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease);
}
.drop:hover { border-color: var(--disabled); }
.drop.is-over {
  border-color: var(--main);
  border-style: solid;
  background: var(--bg-selected);
  box-shadow: 0 0 0 4.56px var(--ring);
}
.drop.is-over::before { transform: translateY(-3.42px); }
.drop.is-busy { opacity: .65; pointer-events: none; }
.drop.is-busy .drop__hint::after { content: " - parsing…"; color: var(--secondary); }
.drop__hint { margin: 0; font-size: var(--text-md); font-weight: 500; letter-spacing: -.01em; }
.drop__note { margin: 0; color: var(--secondary); font-size: var(--text-sm); }
.drop__promise { margin: 0; max-width: 46ch; color: var(--secondary); font-size: var(--text-sm); line-height: 1.55; text-align: center; }

.drop__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6.84px;
  margin: 6.84px 0 0;
  padding: 0;
  list-style: none;
  color: var(--secondary);
  font-size: var(--text-sm);
}
.drop__terms li {
  display: flex;
  align-items: center;
  gap: 6.84px;
  padding: 3.42px 11.4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 1138.86px;
}
.drop__terms code { font-size: var(--text-xs); padding: 0; background: none; }

.drop__error {
  margin: calc(var(--unit) * 2) 0 0;
  padding: 11.4px 15.96px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  color: var(--error);
  font-size: var(--text-sm);
  text-align: left;
}

.link { color: var(--link); font-weight: 500; cursor: pointer; }
.link:hover { text-decoration: underline; }

.samples { margin-top: calc(var(--unit) * 5); text-align: left; }
.samples__lead { margin: 0 0 11.4px; color: var(--secondary); font-size: var(--text-sm); font-weight: 500; }

.aside-link { margin: calc(var(--unit) * 2) 0 0; color: var(--secondary); font-size: var(--text-sm); }
.aside-link + .saved__lead { margin-top: calc(var(--unit) * 1.5); }

.saved { margin-top: calc(var(--unit) * 5); text-align: left; }
.saved__lead { margin: 0 0 11.4px; color: var(--secondary); font-size: var(--text-sm); font-weight: 500; text-align: center; }
.saved .saved__lead { text-align: left; }

.convert {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 13.68px calc(var(--unit) * 3);
  background: var(--success-bg);
  border-bottom: 1px solid var(--success-border);
}
.convert__done { display: flex; align-items: center; gap: calc(var(--unit) * 2); flex-wrap: wrap; }
.convert__title { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.convert__offer { margin: 0; color: var(--secondary); font-size: var(--text-sm); }


.field { margin-bottom: 15.96px; }
.field label { display: block; margin-bottom: 6.84px; color: var(--text); font-size: var(--text-sm); font-weight: 500; }
.field input {
  width: 100%;
  height: 41.04px;
  padding: 0 13.68px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input:hover { border-color: var(--border-hover); }
.field input:focus { border-color: var(--main); }
::placeholder { color: var(--secondary); opacity: 1; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1140px var(--bg) inset;
  caret-color: var(--text);
}

.field__error { display: block; margin: 0 0 6.84px; color: var(--error); font-size: var(--text-sm); }
.field__hint { margin: 6.84px 0 0; color: var(--secondary); font-size: var(--text-sm); }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.card {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
  padding: 13.68px 15.96px;
  border-bottom: 1px solid var(--line);
  transition: background var(--ease);
}
.card:last-child { border-bottom: 0; }
.card:hover { background: var(--bg-secondary); }
.card__name { flex: 1; min-width: 0; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__name:hover { color: var(--link); }
.card__meta { display: flex; align-items: center; gap: 13.68px; color: var(--secondary); font-size: var(--text-sm); }

.cards--flat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.cards--flat .card {
  display: block;
  padding: 0;
  border: 0;
}

.cards--flat .card:hover { background: none; }

.cards--flat .card__link {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 2);
  padding: 13.68px;
  color: inherit;
  border-top: 1px solid var(--line);
  transition: background var(--ease);
}

.cards--flat .card:last-child .card__link { border-bottom: 1px solid var(--line); }

.cards--flat .card__link,
.cards--flat .card__link:hover { text-decoration: none; }

.cards--flat .card__link:hover { background: var(--bg-secondary); }
.cards--flat .card__link:hover .card__name { color: var(--link); }
.cards--flat .card__link code { flex: none; }
.cards--flat .card__link time { flex: none; color: var(--secondary); font-size: var(--text-sm); }
.cards--flat .card--stack .card__link { min-height: 5.9rem; }

.cards--grouped {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
}
.cards--grouped.cards--flat .card__link { border-top: 0; border-bottom: 1px solid var(--line); }
.cards--grouped.cards--flat .card:last-child .card__link { border-bottom: 0; }

.card--stack { align-items: flex-start; padding: 15.96px; }
.card--stack code { flex: none; margin-top: 1.14px; }
.card__main { display: flex; flex-direction: column; gap: 2.28px; flex: 1; min-width: 0; }
.card__note { color: var(--secondary); font-size: var(--text-sm); line-height: 1.45; }

.tag {
  padding: 2.28px 11.4px;
  border-radius: 1138.86px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.tag--private, .tag--muted { background: var(--bg-tag); border: 1px solid var(--line); color: var(--secondary); }
.tag--protected, .tag--warn { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); }
.tag--public, .tag--ok { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }

.protect { display: flex; gap: 6.84px; }
.protect__pass {
  width: 148.2px;
  height: 36.48px;
  padding: 0 11.4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}
.protect__pass:focus { border-color: var(--main); }

.card__meta .linkish { font-size: var(--text-sm); color: var(--secondary); }
.card__meta .linkish:hover { color: var(--error); }

.btn--danger { color: var(--error); }
.btn--danger:hover { background: var(--error-bg); border-color: var(--error-border); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11.4px;
  padding: calc(var(--unit) * 2) 0;
  text-align: center;
  text-wrap: balance;
}
.empty--boxed {
  padding: calc(var(--unit) * 6) calc(var(--unit) * 3);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-xl);
}

.empty__media {
  display: grid;
  place-items: center;
  flex: none;
  width: 45.6px;
  height: 45.6px;
  margin-bottom: 4.56px;
  background: var(--bg-tag);
  border-radius: var(--radius-lg);
}
.empty__media svg {
  width: 27.36px;
  height: 27.36px;
  fill: none;
  stroke: var(--secondary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty__title { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; }
.empty__lead { margin: 0; max-width: 40ch; font-size: var(--text-base); line-height: 1.5; }
.empty__desc { margin: 0; max-width: 42ch; color: var(--secondary); font-size: var(--text-sm); line-height: 1.6; }
.empty__note { margin: 0; color: var(--secondary); }

.empty__content {
  display: flex;
  flex-direction: column;
  gap: 4.56px;
  width: 100%;
  margin-top: 6.84px;
  padding-top: calc(var(--unit) * 2);
  border-top: 1px solid var(--line);
  color: var(--secondary);
  font-size: var(--text-sm);
}
.empty__content p { margin: 0; }

.app { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.bar {
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.bar__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--unit) 13.68px;
  padding: 11.4px calc(var(--unit) * 2);
}

.bar__title { display: flex; align-items: center; gap: 11.4px; min-width: 0; flex: 0 1 auto; }
.bar__name {
  min-width: 3ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -.02em;
}
.bar__name:empty::before { content: "Untitled plan"; color: var(--disabled); }

.bar__actions { display: flex; align-items: center; gap: var(--unit); flex: none; }
.bar__spacer { flex: 1 1 0; min-width: 0; }
.bar__group { display: flex; align-items: center; gap: 6.84px; flex: none; }
.bar__group--switches { gap: calc(var(--unit) * 2); }
.bar__sep { width: 1.14px; height: 22.8px; margin: 0; border: 0; background: var(--line); flex: none; }
.bar__row > .searchbox, .bar__row > .seg { flex: none; }

.label { color: var(--secondary); font-size: var(--text-sm); font-weight: 500; }
.muted { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--secondary); }

.search {
  height: 36.48px;
  min-width: 273.6px;
  padding: 0 13.68px 0 36.48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg) 11.4px center / 17.1px 17.1px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.searchbox { position: relative; display: flex; }
.searchbox__count {
  position: absolute;
  top: 50%;
  right: 32.34px;
  transform: translateY(-50%);
  color: var(--secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.searchbox.has-count .search { padding-right: 79.8px; }

.search:hover { border-color: var(--border-hover); }
.search:focus { border-color: var(--main); }
.search::-webkit-search-cancel-button { cursor: pointer; }

.sizer {
  position: absolute;
  right: 27.36px;
  bottom: 27.36px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9.12px;
  padding: 4.56px 11.4px;
  border: 1px solid var(--border);
  border-radius: 1138.86px;
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  opacity: .45;
  transition: opacity .16s ease;
}

.sizer:hover, .sizer:focus-within { opacity: 1; }

.sizer__range { width: 91.2px; }

.sizer__label {
  min-width: 4ch;
  color: var(--secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.share__inline { display: inline; }

.zoom { display: flex; align-items: center; gap: 9.12px; }

.zoom__label {
  min-width: 6ch;
  color: var(--secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.zoom__range, .sizer__range {
  -webkit-appearance: none;
  appearance: none;
  width: 136.8px;
  height: 20px;
  background: none;
  cursor: pointer;
}

.zoom__range::-webkit-slider-runnable-track, .sizer__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 1138.86px;
  background: var(--border);
}

.zoom__range::-moz-range-track, .sizer__range::-moz-range-track {
  height: 4px;
  border-radius: 1138.86px;
  background: var(--border);
}

.zoom__range::-webkit-slider-thumb, .sizer__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.zoom__range::-moz-range-thumb, .sizer__range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.zoom__range:hover::-webkit-slider-thumb, .sizer__range:hover::-webkit-slider-thumb { border-color: var(--main); }
.zoom__range:hover::-moz-range-thumb, .sizer__range:hover::-moz-range-thumb { border-color: var(--main); }

.zoom__range:active::-webkit-slider-thumb, .sizer__range:active::-webkit-slider-thumb { background: var(--bg-selected); border-color: var(--main); }
.zoom__range:active::-moz-range-thumb, .sizer__range:active::-moz-range-thumb { background: var(--bg-selected); border-color: var(--main); }

.zoom__range:focus, .sizer__range:focus { outline: none; }
.zoom__range:focus-visible::-webkit-slider-thumb, .sizer__range:focus-visible::-webkit-slider-thumb { border-color: var(--main); box-shadow: 0 0 0 2px var(--main); }
.zoom__range:focus-visible::-moz-range-thumb, .sizer__range:focus-visible::-moz-range-thumb { border-color: var(--main); box-shadow: 0 0 0 2px var(--main); }

.check { display: flex; align-items: center; gap: 6.84px; color: var(--secondary); font-size: var(--text-sm); cursor: pointer; }

.loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 1.5);
  color: var(--secondary);
  font-size: var(--text-sm);
}

.loading__spin {
  width: 27.36px;
  height: 27.36px;
  border: 2px solid var(--border);
  border-top-color: var(--main);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

.loading__text { max-width: 40ch; text-align: center; overflow-wrap: anywhere; }

.workspace { position: relative; flex: 1; min-height: 0; display: flex; }
.chart { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; }
#gantt-here { flex: 1; min-width: 0; }
.grid-toggle {
  position: absolute;
  top: 50%;
  left: clamp(22px, var(--grid-edge, 0px), calc(100% - 22px));
  z-index: 6;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg);
  color: var(--secondary);
  box-shadow: var(--shadow-sm);
  font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace;
  cursor: pointer;
  touch-action: manipulation;
  opacity: .45;
  transition: opacity .16s ease;
}
.grid-toggle:hover, .grid-toggle:focus-within { opacity: 1; }
.grid-toggle:hover { background: var(--bg-hover); color: var(--text); }
.grid-toggle:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
@media (pointer: coarse) {
  .grid-toggle { width: 40px; height: 40px; }
}
.gantt_hor_scroll, .gantt_ver_scroll {
  scrollbar-width: auto;
  scrollbar-color: var(--disabled) var(--bg-hover);
}

.gantt_hor_scroll::-webkit-scrollbar { height: 16px; }
.gantt_ver_scroll::-webkit-scrollbar { width: 16px; }

.gantt_hor_scroll::-webkit-scrollbar-track {
  background: var(--bg-hover);
  box-shadow: inset 0 1px 0 var(--line);
}

.gantt_ver_scroll::-webkit-scrollbar-track {
  background: var(--bg-hover);
  box-shadow: inset 1px 0 0 var(--line);
}

.gantt_hor_scroll::-webkit-scrollbar-thumb,
.gantt_ver_scroll::-webkit-scrollbar-thumb {
  background: var(--disabled);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 1138.86px;
}

.gantt_hor_scroll::-webkit-scrollbar-thumb:hover,
.gantt_ver_scroll::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
  background-clip: padding-box;
}

.gantt_hor_scroll::-webkit-scrollbar-thumb:active,
.gantt_ver_scroll::-webkit-scrollbar-thumb:active {
  background: var(--text);
  background-clip: padding-box;
}

#gantt-here .gantt_task_bg { cursor: grab; }
#gantt-here.is-panning, #gantt-here.is-panning .gantt_task_bg { cursor: grabbing; }
#gantt-here.is-panning .gantt_task_line { cursor: grabbing; }

.details {
  width: 401.28px;
  flex: none;
  overflow: auto;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 2.5);
  background: var(--bg-secondary);
  border-left: 1px solid var(--line);
  position: relative;
}
.details.is-hidden { display: none; }
.details h2 { font-size: var(--text-md); margin-bottom: 15.96px; padding-right: calc(var(--unit) * 4); }
.details dl { margin: 0; display: grid; grid-template-columns: 132.24px 1fr; gap: 11.4px var(--unit); }
.details dt { color: var(--secondary); font-size: var(--text-sm); }
.details dd { margin: 0; font-size: var(--text-sm); word-break: break-word; }
.details__close {
  position: absolute;
  top: 13.68px;
  right: 13.68px;
  display: grid;
  place-items: center;
  width: 31.92px;
  height: 31.92px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--secondary);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.details__close:hover { background: var(--bg-hover); color: var(--text); }

.statusbar {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--unit) * 2);
  padding: 9.12px 18.24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--line);
  color: var(--secondary);
  font-size: var(--text-sm);
}
.legend { display: flex; align-items: center; gap: 15.96px; }
.legend__item { display: inline-flex; align-items: center; }
.sw { display: inline-block; width: 20.52px; height: 6.84px; border-radius: 1138.86px; vertical-align: middle; margin-right: 6.84px; }
.sw--today { background: var(--text); }
.sw--crit { background: var(--error); }
.sw--overdue { background: var(--warning); }
.sw--off { background: var(--bg-tag); border: 1px solid var(--border); }

.notifications {
  position: fixed;
  right: max(calc(var(--unit) * 2), env(safe-area-inset-right));
  bottom: max(calc(var(--unit) * 2), env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11.4px;
  max-width: calc(100% - var(--unit) * 4);
  pointer-events: none;
}
.notifications.is-viewer { position: absolute; z-index: 30; }
.notifications > * { pointer-events: auto; }

.toast {
  overflow: hidden;
  max-width: min(478.8px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: toast-in .22s cubic-bezier(.4, 0, .2, 1);
}
.toast.is-hidden { display: none !important; }

.toast__surface {
  display: flex;
  align-items: center;
  gap: 13.68px;
  padding: 13.68px 15.96px;
}

.toast__timer { height: 2.28px; background: var(--pale-control); }
.toast__timer[hidden] { display: none; }
.toast__progress {
  display: block;
  height: 100%;
  background: var(--main);
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .toast__timer { display: none; }
}
.toast__text, .offer__text { flex: 1; min-width: 0; color: var(--secondary); font-size: var(--text-sm); line-height: 1.45; }
.toast .btn { flex: none; }
.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 27.36px;
  height: 27.36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--disabled);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.toast__close:hover { background: var(--bg-hover); color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6.84px); }
  to { opacity: 1; transform: none; }
}


::view-transition-old(root) { animation: fade-out .14s ease-out both; }
::view-transition-new(root) { animation: rise-in .24s cubic-bezier(.4, 0, .2, 1) both; }

.side { view-transition-name: side; }

@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(9.12px); } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .landing > *, .page > *, .auth > * {
    animation: rise-in .34s cubic-bezier(.4, 0, .2, 1) both;
  }
  .landing > *:nth-child(2), .page > *:nth-child(2), .auth > *:nth-child(2) { animation-delay: .05s; }
  .landing > *:nth-child(3), .page > *:nth-child(3), .auth > *:nth-child(3) { animation-delay: .1s; }
  .landing > *:nth-child(4), .page > *:nth-child(4), .auth > *:nth-child(4) { animation-delay: .15s; }
  .landing > *:nth-child(n+5), .page > *:nth-child(n+5), .auth > *:nth-child(n+5) { animation-delay: .2s; }
}

.menu__panel {
  transform-origin: top right;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity .16s ease-out,
    transform .18s cubic-bezier(.34, 1.4, .64, 1),
    visibility 0s;
}
.menu__panel.is-hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-9.12px) scale(.96);
  transition:
    opacity .12s ease-in,
    transform .12s cubic-bezier(.4, 0, .2, 1),
    visibility 0s .12s;
}
.menu--up .menu__panel { transform-origin: bottom left; }
.menu--up .menu__panel.is-hidden { transform: translateY(9.12px) scale(.96); }

.setting__body,
.share__pass,
.share__edit {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
    padding .28s cubic-bezier(.4, 0, .2, 1),
    transform .28s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease-out;
}
.setting__body > *,
.share__pass > *,
.share__edit > * { min-height: 0; overflow: hidden; }

.setting__body.is-collapsed,
.share__pass.is-collapsed,
.share__edit.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-11.4px);
}

.btn:active, .seg__btn:active, .theme__btn:active, .menu__item:active, .account:active {
  transform: scale(.97);
}
.btn, .seg__btn, .theme__btn, .menu__item, .account { transition-property: background, border-color, color, box-shadow, transform; }
.btn:active, .seg__btn:active, .theme__btn:active, .menu__item:active, .account:active { transition-duration: var(--ease-press); }

.switch__track::after { transition: transform var(--ease-spring); }
.theme__btn .ico { transition: transform var(--ease-spring); }
.theme__btn:hover .ico { transform: rotate(-12deg); }
.theme__btn.is-active .ico { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:active, .seg__btn:active, .theme__btn:active, .menu__item:active, .account:active { transform: none; }
  .theme__btn:hover .ico { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.gantt_container {
  font: inherit !important;
  border: 0 !important;
  background: var(--bg) !important;
  --dhx-gantt-task-border: none;
  --dhx-gantt-task-border-radius: 1138.86px;
  --dhx-gantt-link-background: var(--disabled);
  --dhx-gantt-link-critical-background: var(--disabled);
  --dhx-gantt-link-background-hover: var(--text);
  --dhx-gantt-task-font-size: calc(14px * var(--gantt-size, 1));
}

.gantt_container .gantt_task { font-size: calc(var(--text-sm) * var(--gantt-size, 1)); }

.gantt_grid_scale, .gantt_task_scale {
  background: var(--bg-secondary);
  color: var(--secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--line) !important;
}

.gantt_container .gantt_task_scale { font-size: calc(14px * var(--gantt-size, 1)); }
.gantt_scale_cell, .gantt_grid_head_cell { border-right: 1px solid var(--line) !important; }

.gantt_row, .gantt_task_row { border-bottom: 1px solid transparent !important; }
.gantt_row:hover, .gantt_row.odd:hover { background: var(--bg-hover) !important; }
.gantt_row.gantt_selected, .gantt_task_row.gantt_selected { background: var(--bg-selected) !important; }
.gantt_grid_data .gantt_cell { color: var(--text); font-size: var(--text-sm); border-right: 1px solid var(--line) !important; }
.gantt_task_cell { border-right: 1px dashed var(--line) !important; }

.gantt_task_line { box-shadow: var(--shadow-xs); min-width: 7.98px; --bar: var(--main); }
.gantt_task_line:not(.gantt_milestone) { overflow: hidden; }
.gantt_task_line.is-overdue { --bar: var(--warning); }
.gantt_task_line.is-critical { --bar: var(--error); }
.gantt_task_line.is-summary { --bar: var(--secondary); box-shadow: none; }
.gantt_task_line.is-summary.is-overdue { --bar: var(--warning); }

.gantt_container .gantt_task_line {
  background: var(--bar);
  background: color-mix(in srgb, var(--bar) 70%, var(--bg));
}
.gantt_task_line .gantt_task_progress { background: var(--bar); border-radius: 1138.86px; }
.gantt_task_line.is-narrow { background: var(--bar); }
.gantt_task_line.is-narrow .gantt_task_progress { display: none; }
.gantt_task_line .bar-pct {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(4.56px * var(--gantt-size, 1));
  white-space: nowrap;
  transform: translateX(-100%);
}
.gantt_task_line.gantt_milestone { border-radius: 3.42px; background: var(--bar); }
.gantt_task_line.gantt_milestone .gantt_task_progress { display: none; }
.gantt_task_line.is-overdue:not(.is-critical) .gantt_task_content,
.gantt_task_line.is-summary.is-overdue .gantt_task_content { color: var(--bg); }

.gantt_grid_data .gantt_row.is-summary-row .gantt_cell:nth-child(2) { font-weight: 600; }
.gantt_grid_data .gantt_row.is-overdue-row { box-shadow: inset 2.28px 0 0 var(--warning); }
.gantt_grid_data .gantt_cell .cell-overdue { color: var(--warning); font-weight: 600; }
.gantt_grid_data .gantt_row.is-match { background: var(--solid) !important; }
.gantt_grid_data .gantt_row.is-match-current { background: var(--solid-hover) !important; }

.gantt_task_cell.is-nonworking {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3.42px,
    var(--offtime-stripe) 3.42px,
    var(--offtime-stripe) 6.84px
  );
}



.today {
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  border-left: 2.28px solid var(--text);
  pointer-events: none;
  z-index: 5;
}

.today__label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 1.14px 6.84px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: calc(var(--text-xs) * var(--gantt-size, 1));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.summary {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 3);
  padding: 9.12px 18.24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--line);
  color: var(--secondary);
  font-size: var(--text-sm);
}
.summary b { color: var(--text); font-weight: 600; }

@media (max-width: 820.8px) {
  .bar__row { flex-wrap: wrap; }
  .bar__spacer { display: none; }

  body { flex-direction: column; }
  .side {
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 13.68px;
    width: auto;
    padding: var(--unit) 13.68px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side { flex-wrap: wrap; }
  .side__foot { flex-wrap: wrap; }
  .side__brand { padding: 0; font-size: var(--text-md); }
  .side__nav { flex-direction: row; gap: 4.56px; padding: 0; }
  .side__nav a { height: 36.48px; padding: 0 11.4px; font-size: var(--text-base); }
  .side__foot { flex-direction: row; align-items: center; gap: var(--unit); margin: 0 0 0 auto; padding: 0; }
  .account { width: auto; padding: 4.56px; }
  .account__id, .account__chev { display: none; }
  .menu--up .menu__panel { left: auto; right: 0; min-width: 228px; }
  .side__cta { flex-direction: row; align-items: center; }
  .side__cta .btn { width: auto; }
  .main { min-height: 0; }
  .landing { padding: calc(var(--unit) * 6) calc(var(--unit) * 2); }
  .landing h1 { font-size: var(--text-3xl); }
  .lead { font-size: var(--text-md); }
  .details { position: absolute; inset: 0 0 0 auto; width: min(387.6px, 100%); z-index: 25; box-shadow: var(--shadow-lg); }
  .searchbox { min-width: 0; flex: 1; }
  .search { min-width: 0; width: 100%; }
  .bar__row { padding: var(--unit) 13.68px; }

  .prose p, .legal p, .faq dd { line-height: 1.75; }
  .lead { line-height: 1.65; }
}

.legal h2 { font-size: var(--text-md); margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 1.5); }
.legal p { margin: 0 0 calc(var(--unit) * 1.5); line-height: 1.7; color: var(--text); }
.legal code { font-size: var(--text-sm); padding: 1.14px 5.7px; border-radius: var(--radius-sm); background: var(--bg-tag); }
.legal__note { padding: 15.96px 18.24px; border-left: 2px solid var(--main); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-secondary); font-size: var(--text-sm); }
.legal__meta { margin-top: calc(var(--unit) * 4); font-size: var(--text-sm); color: var(--secondary); }
.legal__table { width: 100%; border-collapse: collapse; margin-bottom: calc(var(--unit) * 1.5); font-size: var(--text-sm); }
.legal__table th { text-align: left; font-weight: 600; }
.legal__table--cookies { table-layout: fixed; overflow-wrap: anywhere; }
.legal__table--cookies th:first-child { width: 28%; }

@media (max-width: 37.5rem) {
  .legal__table--cookies, .legal__table--cookies tbody { display: block; }
  .legal__table--cookies thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal__table--cookies tr { display: grid; margin-bottom: calc(var(--unit) * 2); }
  .legal__table--cookies th:first-child { width: auto; }
  .legal__table--cookies td::before { content: attr(data-label); display: block; margin-bottom: 4.56px; color: var(--secondary); font-weight: 500; }
}
.legal__table th, .legal__table td { padding: 11.4px calc(var(--unit) * 1.5) 11.4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

.legal-line { margin: calc(var(--unit) * 5) 0 0; font-size: var(--text-sm); color: var(--secondary); text-align: center; }
.legal-line a { color: var(--secondary); }
.legal-line a:hover { color: var(--link); }

.prose { margin-top: calc(var(--unit) * 8); text-align: left; }
.plans__note + .prose { margin-top: calc(var(--unit) * 5); }
.prose h2 { margin: calc(var(--unit) * 5) 0 calc(var(--unit) * 1.5); font-size: var(--text-xl); letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 calc(var(--unit) * 1.5); line-height: 1.7; color: var(--text); }
.prose__answer { margin-bottom: calc(var(--unit) * 2); font-size: var(--text-md); line-height: 1.65; }
.prose code { padding: 1.14px 5.7px; border-radius: var(--radius-sm); background: var(--bg-tag); font-size: var(--text-sm); }
.prose strong { font-weight: 600; }

.prose .steps, .prose .facts { margin: 0 0 calc(var(--unit) * 2); padding: 0; list-style: none; }
.prose .steps li, .prose .facts li {
  position: relative;
  margin-bottom: 13.68px;
  padding-left: calc(var(--unit) * 4);
  line-height: 1.7;
}
.prose .steps { counter-reset: step; }
.prose .steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3.42px;
  width: 25.08px;
  height: 25.08px;
  border-radius: 50%;
  background: var(--bg-selected);
  border: 1px solid var(--pale-control);
  color: var(--link);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 22.8px;
  text-align: center;
}
.prose .facts li::before {
  content: "";
  position: absolute;
  left: 7.98px;
  top: 11.4px;
  width: 6.84px;
  height: 6.84px;
  border-radius: 50%;
  background: var(--pale-control);
  border: 1px solid var(--main);
}

.prose .cols { width: 100%; border-collapse: collapse; margin: 0 0 calc(var(--unit) * 2); font-size: var(--text-sm); }
.prose .cols th { text-align: left; font-weight: 600; }
.prose .cols th, .prose .cols td {
  padding: 11.4px calc(var(--unit) * 2) 11.4px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
}
.prose .cols td:first-child { white-space: nowrap; }

.faq { margin: 0; }
.faq dt { margin-top: calc(var(--unit) * 3); font-weight: 600; letter-spacing: -.01em; }
.faq dd { margin: 6.84px 0 0; color: var(--secondary); line-height: 1.7; }

.saved-note { margin: 0 0 calc(var(--unit) * 2); color: var(--secondary); font-size: var(--text-sm); }

.theme { display: flex; gap: 2.28px; padding: 0 2.28px; }
.theme__btn {
  display: grid;
  place-items: center;
  width: 31.92px;
  height: 31.92px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--secondary);
  font: inherit;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.theme__btn .ico { width: 18.24px; height: 18.24px; }
.theme__btn:hover { color: var(--text); }
.theme__btn.is-active { background: var(--bg-hover); color: var(--text); }

.foot {
  flex: none;
  margin-top: calc(var(--unit) * 6);
  padding: calc(var(--unit) * 6) clamp(24px, 4vw, 64px) calc(var(--unit) * 5);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.foot__inner {
  display: grid;
  gap: calc(var(--unit) * 4);
  max-width: 39.9rem;
  margin: 0 auto;
}

.foot__nav {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: calc(var(--unit) * 3);
}
.foot__heading {
  margin: 0 0 calc(var(--unit) * 2);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}
.foot__links {
  display: grid;
  gap: calc(var(--unit) * 1.5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot__nav a {
  position: relative;
  color: var(--secondary);
  font-size: var(--text-sm);
  font-weight: 400;
  transition: color var(--ease);
}
.foot__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3.42px;
  height: 1.14px;
  background: var(--secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.foot__nav a:hover { color: var(--text); text-decoration: none; }
.foot__nav a:hover::after { transform: scaleX(1); }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--unit) * 2.5);
  margin: 0;
  color: var(--disabled);
  font-size: var(--text-sm);
}
.foot__legal a { color: var(--secondary); }
.foot__legal a:hover { color: var(--text); }

@media (max-width: 37.5rem) {
  .foot__nav { grid-template-columns: 1fr; gap: calc(var(--unit) * 3); }
  .foot__heading { margin-bottom: calc(var(--unit) * 1.5); }
}

.settings { margin-bottom: calc(var(--unit) * 4); }

.settings__title {
  margin: 0 0 2.28px;
  color: var(--secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.setting {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  column-gap: calc(var(--unit) * 2);
  row-gap: 0;
  padding: calc(var(--unit) * 1.6) 0;
  border-top: 1px solid var(--line);
}

.setting__label { color: var(--secondary); font-size: var(--text-sm); }

.setting__value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9.12px;
  min-width: 0;
  font-size: var(--text-sm);
}

.setting__strong { font-size: var(--text-base); font-weight: 500; }
.setting__note { color: var(--secondary); line-height: 1.45; }

.setting__actions { display: flex; align-items: center; gap: 9.12px; }

.setting__body { grid-column: 2 / -1; }

.setting__inner { padding-top: calc(var(--unit) * 1.5); max-width: 20rem; }
.setting__inner > .field { margin-bottom: 11.4px; }
.setting__inner > .field:last-child { margin-bottom: 0; }
.setting__inner label { font-size: var(--text-sm); font-weight: 400; color: var(--secondary); margin-bottom: 4.56px; }

.setting__inner input {
  height: 33.44px;
  padding: 0 9.12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  box-shadow: none;
}

.setting__inner .field__hint { margin-top: 4.56px; }

.quota__track {
  width: 7rem;
  height: 6px;
  border-radius: 1138.86px;
  background: var(--pale-control);
  overflow: hidden;
}

.quota__fill {
  display: block;
  height: 100%;
  border-radius: 1138.86px;
  background: var(--main);
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

.quota__fill.is-warning { background: var(--warning); }
.quota__fill.is-full { background: var(--error); }

@media (max-width: 44rem) {
  .setting { grid-template-columns: 1fr; row-gap: 4.56px; }
  .setting__actions { margin-top: 4.56px; }
  .setting__body { grid-column: 1 / -1; }
}


.plans__wrap {
  overflow-x: auto;
  margin: calc(var(--unit) * 3) 0 var(--unit);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.plans { width: 100%; min-width: 524.4px; border-collapse: collapse; font-size: var(--text-sm); }
.plans th { text-align: left; font-weight: 600; color: var(--secondary); font-size: var(--text-sm); }
.plans th:not(:first-child), .plans td:not(:first-child) { text-align: center; width: 20%; }
.plans th, .plans td { padding: 11.4px calc(var(--unit) * 1.5); }
.plans thead th { background: var(--bg-secondary); }
.plans thead tr { border-bottom: 1px solid var(--line); }
.plans tbody tr { border-bottom: 1px solid var(--line); transition: background var(--ease); }
.plans tbody tr:last-child { border-bottom: 0; }
.plans tbody tr:hover { background: var(--bg-secondary); }
.plans td:first-child { color: var(--text); }

.plans__best { background: var(--bg-selected); }
.plans__was { color: var(--secondary); text-decoration: line-through; font-weight: 400; }
.plans__row-price td { padding-top: 13.68px; padding-bottom: 13.68px; }
.plans thead .plans__best { color: var(--main); background: var(--bg-selected); }
.plans tbody tr:hover .plans__best { background: var(--pale-control); }

.plans__yes::before {
  content: "";
  display: inline-block;
  width: 18.24px;
  height: 18.24px;
  vertical-align: -3.42px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m4.5 10.5 3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m4.5 10.5 3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plans__none::before {
  content: "";
  display: inline-block;
  width: 13.68px;
  height: 2.28px;
  vertical-align: 4.56px;
  border-radius: 1.14px;
  background: var(--disabled);
}

.plans__note { margin: calc(var(--unit) * 1.5) 0 calc(var(--unit) * 2); color: var(--secondary); font-size: var(--text-sm); line-height: 1.6; }
.sr-only {
  position: absolute;
  width: 1.14px;
  height: 1.14px;
  padding: 0;
  margin: -1.14px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page--account .settings__title {
  margin-bottom: calc(var(--unit) * 1.5);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  text-transform: none;
}
.page--account .settings__panel {
  padding-inline: calc(var(--unit) * 2);
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.page--account .settings__panel > .setting:first-child { border-top: 0; }
.page--account .setting { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
.page--account .setting--action { grid-template-columns: minmax(0, 1fr) auto; }
.page--account .setting__summary { display: grid; gap: 4.56px; min-width: 0; }
.page--account .setting--action .setting__body { grid-column: 1 / -1; }
.page--account .setting__value { overflow-wrap: anywhere; line-height: 1.5; }
.page--account .setting__label { color: var(--text); font-weight: 500; line-height: 1.5; }
.page--account .setting__strong { font-size: var(--text-sm); font-weight: 500; }
.page--account .setting .btn { font-size: var(--text-sm); font-weight: 500; }
.page--account .setting__actions { flex-wrap: wrap; }
.page--account .setting__note { color: var(--secondary); font-weight: 400; line-height: 1.55; }
.page--account .setting__inner { padding-bottom: calc(var(--unit) * .5); }
.page--account .setting__inner input { background: var(--bg); }
.page--account .setting__inner input[aria-invalid="true"] { border-color: var(--error); }
.page--account :is(button, input, a):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.page--account .quota__track { background: var(--line); }
.page--account .settings--danger .setting__label { color: var(--error); }
.page--account .settings--danger [data-reveal-toggle] { color: var(--error); }
.page--account .settings--danger [data-reveal-toggle]:hover { background: var(--error-bg); border-color: var(--error-border); }

@media (max-width: 44rem) {
  .page--account .setting { grid-template-columns: minmax(0, 1fr); }
  .page--account .setting > .tag { justify-self: start; }
  .page--account .setting > form { margin-block: calc(var(--unit) * .5) 0; }
}