:root {
  --topbar-h: 60px;
  --bottombar-h: 60px;
  --sat: env(safe-area-inset-top, 10px);
  --sat-raw: env(safe-area-inset-top, 0px);
  --radius: 15px;
  --radius-1: 5px;
  --radius-2: 10px;
  --radius-3: 30px;
  --radius-4: 50px;
  --radius-max: 999px;
  --axis-left: 20px;
  --year-label-left: 40px;
  --cat-start-x: 100px;
  --cat-col-w: 420px;
  --sheet-max-width: 450px;
  --dot: 10px;
  --dot-year: 14px;
  --hit: 30px;
  --canvas-pad-top: 20px;
  --canvas-pad-bot: 0px;
  --scrubber-top: calc(var(--topbar-h) + var(--sat) + var(--top-guide-h) + 20px);
  --scrubber-bottom: calc(var(--bottombar-h) + 10px);
  --top-guide-h: 70px;
  --event-extra-w: 280px;
  --red: #ff453a;
  --orange: #ff9500;
  --yellow: #ffcc00;
  --green: #34c759;
  --blue: #007aff;
  --purple: #5856d6;
  --pink: #ff2d55;
  --brown: #a2845e;
  --gray: #8e8e93;
  --checkbox: #34c759
}
:root,
:root[data-mode=light] {
  --bg: #ffffff;
  --text: #111111;
  --muted: #888888;
  --surface-1: rgba(0, 0, 0, .04);
  --surface-2: rgba(0, 0, 0, .06);
  --border-subtle: rgba(0, 0, 0, .08);
  --border-light: rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .40);
  --theme-bg: var(--bg);
  --theme-text: var(--text);
  --theme-muted: var(--muted);
  --theme-surface-1: var(--surface-1);
  --theme-surface-2: var(--surface-2);
  --theme-border-subtle: var(--border-subtle);
  --theme-border-light: var(--border-light);
  --theme-line-strong: var(--line-strong)
}
:root[data-mode=dark] {
  --bg: #111111;
  --text: #ffffff;
  --muted: #aaaaaa;
  --surface-1: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .08);
  --border-subtle: rgba(255, 255, 255, .10);
  --border-light: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .30);
  --theme-bg: var(--bg);
  --theme-text: var(--text);
  --theme-muted: var(--muted);
  --theme-surface-1: var(--surface-1);
  --theme-surface-2: var(--surface-2);
  --theme-border-subtle: var(--border-subtle);
  --theme-border-light: var(--border-light);
  --theme-line-strong: var(--line-strong)
}
@media (prefers-color-scheme:dark) {
  :root:not([data-mode]),
  :root[data-mode=system] {
    --bg: #111111;
    --text: #ffffff;
    --muted: #aaaaaa;
    --surface-1: rgba(255, 255, 255, .06);
    --surface-2: rgba(255, 255, 255, .08);
    --border-subtle: rgba(255, 255, 255, .10);
    --border-light: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .30);
    --theme-bg: var(--bg);
    --theme-text: var(--text);
    --theme-muted: var(--muted);
    --theme-surface-1: var(--surface-1);
    --theme-surface-2: var(--surface-2);
    --theme-border-subtle: var(--border-subtle);
    --theme-border-light: var(--border-light);
    --theme-line-strong: var(--line-strong)
  }
}
:root[data-theme=light] {
  --theme-bg: #ffffff;
  --theme-text: #111111;
  --theme-muted: #888888;
  --theme-surface-1: rgba(0, 0, 0, .04);
  --theme-surface-2: rgba(0, 0, 0, .06);
  --theme-border-subtle: rgba(0, 0, 0, .08);
  --theme-border-light: rgba(0, 0, 0, .10);
  --theme-line-strong: rgba(0, 0, 0, .40)
}
:root[data-theme=dark] {
  --theme-bg: #111111;
  --theme-text: #ffffff;
  --theme-surface-1: rgba(255, 255, 255, .06);
  --theme-surface-2: rgba(255, 255, 255, .08);
  --theme-border-subtle: rgba(255, 255, 255, .10);
  --theme-border-light: rgba(255, 255, 255, .10);
  --theme-line-strong: rgba(255, 255, 255, .30)
}
:root[data-theme=newspaper] {
  --theme-bg: #d1c8af;
  --theme-text: #111111;
  --theme-text: #111111;
  box-shadow: 1px 1px 5px rgba(0,0,0,.05)
}
.hit.is-day .dot,
.hit.is-month .dot,
.hit.is-week .dot,
.hit.is-year .dot {
  border: 2px solid #333
}
.year-label {
  color: #333
}
.guide-stat,
.guide-title {
  color: #333;
  font-weight: 600
}
.floating-search-close,
.floating-search-count {
  color: #333
}
.floating-search-btn:hover,
.floating-search-close:hover,
.floating-search-toggle:hover {
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--surface-2)
}
#sheet {
  background: var(--theme-bg)
}
.scrubber-track {
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border-subtle)
}
.scrubber-thumb {
  background: var(--theme-border-light);
  border: 1px solid var(--theme-surface-1)
}
.scroll-rail-btn {
  border: 1px solid var(--theme-surface-2);
  background: var(--theme-bg);
  color: var(--theme-text)
}
#sheetDeleteBtn,
#sheetEditBtn {
  color: var(--theme-text)
}
.legend-item {
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-surface-2)
}
#sheet .sheet-meta span,
#sheet .sheet-title,
.event-badge span,
.legend-name,
.topbar-title span {
  color: var(--theme-text)
}
.title-menu-item:hover {
  background: var(--line-strong)
}
.title-menu-item.is-active {
  background: var(--line-strong)
}
.title-menu-item .profile-badge {
  background: var(--theme-bg);
  border: 1px solid var(--line-strong);
  color: var(--theme-text)
}
:root[data-theme=pixel] {
  --theme-bg: #313942;
  --theme-text: #ffffff;
  --radius: 0px;
  --radius-1: 0px;
  --radius-2: 0px;
  --radius-3: 0px;
  --radius-4: 0px
}
:root[data-theme=pink] {
  --theme-bg: #ffdeeb;
  --theme-text: #7a3a4d
}
:root[data-theme=rainy] {
  --theme-bg: #4a5b6d;
  --theme-text: #ffffff
}
:root[data-theme=blizzard] {
  --theme-bg: #e3f2fd;
  --theme-text: #546e7a
}
:root[data-theme=summer] {
  --theme-bg: #ffd54f;
  --theme-text: #5d4037
}