:root {
  
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-hover: #5753d0;

  
  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;

  
  --color-surface: #ffffff;
  --color-surface-high: #f1f0ff;
  --color-surface-low: #ececf4;
  --color-canvas: #f5f5f5;

  
  --color-text-primary: #1b1b1f;
  --color-text-secondary: #5c5c5c;
  --color-text-muted: #7a7a7a;

  
  --color-danger: #db6965;
  --color-danger-hover: #c75a56;
  --color-danger-light: #fce8e7;
  --color-warning: #f5c354;
  --color-warning-bg: #fceeca;
  --color-success: #65bb6a;
  --color-success-hover: #5aa85e;
  --color-success-bg: #cafccc;

  
  --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.1);

  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  
  --border-hand-drawn: 2px solid var(--color-gray-80);
  --shadow-hand-drawn-sm: 1px 1px 0 0 var(--color-gray-80);
  --shadow-hand-drawn: 2px 2px 0 0 var(--color-gray-80);
  --shadow-hand-drawn-lg: 3px 3px 0 0 var(--color-gray-80);
  --radius-hand-drawn-sm: 2px 6px 4px 5px;
  --radius-hand-drawn: 4px 8px 6px 7px;
  --radius-hand-drawn-lg: 3px 12px 10px 8px;
  --radius-hand-drawn-tooltip: 4px 10px 8px 6px;

  
  --font-family: "Assistant", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main > * {
  flex: 1;
  min-height: 0;
}

body {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-canvas);
  
  background-image: radial-gradient(circle, var(--color-gray-30) 1px, transparent 1px);
  background-size: 20px 20px;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-30);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-40);
}


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


.mobile-gate {
  display: none;
}


@media (max-width: 768px) {
  
  .mobile-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background-color: var(--color-canvas);
    background-image: radial-gradient(circle, var(--color-gray-30) 1px, transparent 1px);
    background-size: 16px 16px;
  }

  .mobile-gate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xxl) var(--space-xl);
    background: var(--color-surface);
    border: var(--border-hand-drawn);
    border-radius: var(--radius-hand-drawn-lg);
    box-shadow: var(--shadow-hand-drawn-lg);
    text-align: center;
    max-width: 360px;
  }

  .mobile-gate-title {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
  }

  .mobile-gate-subtitle {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  body > *:not(.mobile-gate) {
    display: none !important;
  }

  body {
    background-size: 16px 16px;
  }
}