:root {
  color-scheme: dark;

  --ty-black: #050708;
  --ty-night: #070b0d;
  --ty-deep: #0b1114;
  --ty-rock: #10171b;
  --ty-rock-2: #151e23;
  --ty-rock-3: #1c272d;
  --ty-rock-line: #26343a;
  --ty-rock-edge: #223036;
  --ty-water-deep: #0b3f48;
  --ty-water: #4f8c97;
  --ty-water-light: #8dc7d1;
  --ty-water-mist: #d7e8ea;
  --ty-earth-rim: #4f8aa1;
  --ty-city-light: #d8b46a;
  --ty-green: #70a98a;
  --ty-red: #c77d73;

  --ty-text: #e8eef0;
  --ty-text-soft: #b4c0c3;
  --ty-text-muted: #78878b;
  --ty-text-faint: #526166;
  --ty-text-inverse: #061014;

  --ty-surface: rgba(15, 23, 27, 0.86);
  --ty-surface-solid: #111a1e;
  --ty-surface-raised: #172226;
  --ty-surface-soft: rgba(255, 255, 255, 0.045);
  --ty-surface-muted: rgba(255, 255, 255, 0.028);

  --ty-border: rgba(187, 211, 216, 0.16);
  --ty-border-strong: rgba(187, 211, 216, 0.28);
  --ty-border-water: rgba(141, 199, 209, 0.32);
  --ty-border-warning: rgba(216, 180, 106, 0.34);

  --ty-accent: #8dc7d1;
  --ty-accent-strong: #b9e1e7;
  --ty-accent-soft: rgba(141, 199, 209, 0.16);
  --ty-success: #70a98a;
  --ty-success-bg: rgba(112, 169, 138, 0.14);
  --ty-warning: #d8b46a;
  --ty-warning-bg: rgba(216, 180, 106, 0.14);
  --ty-danger: #c77d73;
  --ty-danger-bg: rgba(199, 125, 115, 0.14);
  --ty-info-bg: rgba(131, 175, 199, 0.14);

  --ty-font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "PingFang SC",
    "HarmonyOS Sans",
    "Noto Sans SC",
    system-ui,
    sans-serif;
  --ty-font-mono: "SFMono-Regular", Menlo, Consolas, monospace;

  --ty-text-11: 11px;
  --ty-text-12: 12px;
  --ty-text-13: 13px;
  --ty-text-14: 14px;
  --ty-text-15: 15px;
  --ty-text-16: 16px;
  --ty-text-18: 18px;
  --ty-text-22: 22px;
  --ty-text-28: 28px;
  --ty-text-36: 36px;

  --ty-line-tight: 1.2;
  --ty-line-title: 1.32;
  --ty-line-body: 1.62;

  --ty-brand-symbol-size: 28px;
  --ty-brand-symbol-inner-inset: 5px;
  --ty-brand-wordmark-gap: 10px;
  --ty-brand-name-size: 20px;
  --ty-brand-latin-size: 10px;

  --ty-space-2: 2px;
  --ty-space-4: 4px;
  --ty-space-6: 6px;
  --ty-space-8: 8px;
  --ty-space-10: 10px;
  --ty-space-12: 12px;
  --ty-space-14: 14px;
  --ty-space-16: 16px;
  --ty-space-20: 20px;
  --ty-space-24: 24px;
  --ty-space-28: 28px;
  --ty-space-32: 32px;
  --ty-space-40: 40px;
  --ty-space-48: 48px;
  --ty-space-64: 64px;

  --ty-radius-4: 4px;
  --ty-radius-6: 6px;
  --ty-radius-8: 8px;
  --ty-radius-10: 10px;
  --ty-radius-12: 12px;
  --ty-radius-14: 14px;
  --ty-radius-18: 18px;
  --ty-radius-pill: 999px;

  --ty-shadow-deep: 0 32px 120px rgba(0, 0, 0, 0.42);
  --ty-shadow-card: 0 18px 70px rgba(0, 0, 0, 0.28);
  --ty-shadow-focus: 0 0 0 3px rgba(141, 199, 209, 0.18);
  --ty-shadow-inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  --ty-duration-fast: 120ms;
  --ty-duration-base: 180ms;
  --ty-duration-slow: 320ms;
  --ty-duration-micro: 120ms;
  --ty-duration-enter: 320ms;
  --ty-duration-exit: 220ms;
  --ty-duration-overlay: 320ms;
  --ty-duration-count: 720ms;
  --ty-duration-beat-gap: 110ms;
  --ty-duration-handoff: 680ms;
  --ty-duration-draw: 280ms;
  --ty-duration-intent-loading: 1400ms;
  --ty-duration-stream-start: 120ms;
  --ty-duration-stream-step: 52ms;
  --ty-duration-stream-pause: 170ms;
  --ty-cycle-breathe: 3000ms;
  --ty-cycle-flow: 1800ms;
  --ty-cycle-shimmer: 1600ms;
  --ty-cycle-stream-caret: 1800ms;
  --ty-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ty-ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.14);
  --ty-ease-enter: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ty-ease-exit: cubic-bezier(0.5, 0, 0.75, 0.4);
  --ty-dist-enter: 8px;
  --ty-dist-micro: 1px;
  --ty-stagger-step: 70ms;
  --ty-stagger-cap: 6;
  --ty-stream-chunk-min: 1;
  --ty-stream-chunk-max: 4;

  --ty-sidebar-width: 292px;
  --ty-topbar-height: 68px;
  --ty-content-max: 1160px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --ty-black: #f4f8f9;
  --ty-night: #eef4f5;
  --ty-deep: #e5eef0;
  --ty-rock: #f8fbfb;
  --ty-rock-2: #edf4f5;
  --ty-rock-3: #dce8eb;
  --ty-rock-line: #c2d2d6;
  --ty-rock-edge: #a9bdc3;
  --ty-water-deep: #164f5b;
  --ty-water: #357b89;
  --ty-water-light: #2f7684;
  --ty-water-mist: #e8f2f4;
  --ty-earth-rim: #477f91;
  --ty-city-light: #9b7433;
  --ty-green: #41795d;
  --ty-red: #a95f58;

  --ty-text: #132024;
  --ty-text-soft: #33464c;
  --ty-text-muted: #62777e;
  --ty-text-faint: #8aa0a6;
  --ty-text-inverse: #f7fbfb;

  --ty-surface: rgba(255, 255, 255, 0.84);
  --ty-surface-solid: #f7fbfb;
  --ty-surface-raised: #ffffff;
  --ty-surface-soft: rgba(18, 39, 45, 0.052);
  --ty-surface-muted: rgba(18, 39, 45, 0.034);

  --ty-border: rgba(47, 84, 94, 0.16);
  --ty-border-strong: rgba(47, 84, 94, 0.28);
  --ty-border-water: rgba(47, 118, 132, 0.34);
  --ty-border-warning: rgba(155, 116, 51, 0.34);

  --ty-accent: #2f7684;
  --ty-accent-strong: #164f5b;
  --ty-accent-soft: rgba(47, 118, 132, 0.12);
  --ty-success: #41795d;
  --ty-success-bg: rgba(65, 121, 93, 0.12);
  --ty-warning: #9b7433;
  --ty-warning-bg: rgba(155, 116, 51, 0.12);
  --ty-danger: #a95f58;
  --ty-danger-bg: rgba(169, 95, 88, 0.12);
  --ty-info-bg: rgba(47, 118, 132, 0.1);

  --ty-shadow-deep: 0 30px 90px rgba(35, 55, 61, 0.18);
  --ty-shadow-card: 0 18px 52px rgba(35, 55, 61, 0.12);
  --ty-shadow-focus: 0 0 0 3px rgba(47, 118, 132, 0.18);
  --ty-shadow-inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 68% 0%, rgba(79, 140, 151, 0.13), transparent 34%),
    linear-gradient(180deg, var(--ty-black), var(--ty-night));
  color: var(--ty-text);
  font-family: var(--ty-font-sans);
  font-feature-settings: "tnum";
  scrollbar-color: rgba(141, 199, 209, 0.34) transparent;
  text-rendering: geometricPrecision;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 68% 0%, rgba(47, 118, 132, 0.16), transparent 36%),
    linear-gradient(180deg, var(--ty-black), var(--ty-night));
}

::selection {
  color: var(--ty-text-inverse);
  background: var(--ty-accent);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}