:root {
  --app: #FCFDFE; --sheet: #FFFFFF; --paper: #FFFFFF; --ink: #1A1C1E;
  --ink85: rgba(26,28,30,.85); --ink55: rgba(26,28,30,.55); --ink40: rgba(26,28,30,.40);
  --ink25: rgba(26,28,30,.25); --ink22: rgba(26,28,30,.22); --ink12: rgba(26,28,30,.12);
  --fill3: rgba(26,28,30,.03); --fill4: rgba(26,28,30,.04); --fill8: rgba(26,28,30,.08);
  --tile: rgba(26,28,30,.035); --line: rgba(26,28,30,.07); --thumb: #FFFFFF;
  --glass: rgba(250,250,250,.85); --glassRing: inset 0 0 0 1px rgba(255,255,255,.88); --scrim: rgba(0,0,0,.06);
  --xxs: 0 0 0 1px rgba(0,0,0,.04), 0 1px 1.5px rgba(0,0,0,.06), 0 2.5px 4px rgba(0,0,0,.06);
  --sm: 0 2px 4px rgba(0,0,0,.07), 0 8px 8px rgba(0,0,0,.06), 0 18px 11px rgba(0,0,0,.04), 0 32px 13px rgba(0,0,0,.01), 0 0 0 1px rgba(0,0,0,.03);
  --md: 0 4px 9px rgba(0,0,0,.07), 0 16px 16px rgba(0,0,0,.06), 0 36px 22px rgba(0,0,0,.04), 0 65px 26px rgba(0,0,0,.01), 0 0 0 1px rgba(0,0,0,.03);
  --sheetShadow: 0 0 0 1px rgba(0,0,0,.05), 0 -2px 6px rgba(0,0,0,.03), 0 -12px 32px rgba(0,0,0,.06);
  --thumbShadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
  --pill: 0 1px 1px rgba(0,0,0,.05), 0 2px 2px rgba(0,0,0,.04), 0 4px 2px rgba(0,0,0,.02), 0 0 0 1px rgba(0,0,0,.05);
  --docShadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 1px -0.5px rgba(0,0,0,.06), 0 3px 3px -1.5px rgba(0,0,0,.06), 0 6px 6px -3px rgba(0,0,0,.06), 0 12px 12px -6px rgba(0,0,0,.04), 0 24px 24px -12px rgba(0,0,0,.03);
  --panel: rgba(26,28,30,.022);
  --accent: #2E6DE9; --a24: rgba(46,109,233,.24); --a10: rgba(46,109,233,.07); --a12: rgba(46,109,233,.12); --a8: rgba(46,109,233,.06); --a70: rgba(46,109,233,.7);
  --onAccent: #FFFFFF; --boxFill: rgba(252,253,254,.2);
  --red12: rgba(255,56,60,.12); --red24: rgba(255,56,60,.24); --red70: rgba(255,56,60,.7); --redText: #BA3033; --redRing: rgba(255,56,60,.7);
  --orange14: rgba(255,141,40,.16); --orangeText: #985A24; --now: #FF383C;
  --plusDisk: #1A1C1E; --plusGlyph: #FFFFFF;
  /* Areas → here, Craft documents. Order: teal, yellow, purple, blue, pink; neutral for Inbox. */
  --c0-hue: #00C2A6; --c0-bg: rgba(0,194,166,.13); --c0-fg: #0C7769;
  --c1-hue: #E4C011; --c1-bg: rgba(228,192,17,.17); --c1-fg: #756618;
  --c2-hue: #5E02D2; --c2-bg: rgba(94,2,210,.09); --c2-fg: #3F0E81;
  --c3-hue: #2E6DE9; --c3-bg: rgba(46,109,233,.11); --c3-fg: #25498E;
  --c4-hue: #D6179B; --c4-bg: rgba(214,23,155,.10); --c4-fg: #811963;
  --cn-hue: #525C66; --cn-bg: rgba(26,28,30,.055); --cn-fg: rgba(26,28,30,.72);
  --ease: cubic-bezier(.4,0,.2,1); --sheet-ease: cubic-bezier(.32,.72,0,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: 1; } }
:root[data-theme="dark"] { --dark: 1; }

/* Dark: written twice (system setting / the toggle), as CSS can't share a block between them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app: #161718; --sheet: #1E1E1E; --paper: #2A2A2A; --ink: #F9F9F9;
    --ink85: rgba(249,249,249,.85); --ink55: rgba(249,249,249,.55); --ink40: rgba(249,249,249,.40);
    --ink25: rgba(249,249,249,.25); --ink22: rgba(249,249,249,.22); --ink12: rgba(249,249,249,.12);
    --fill3: rgba(249,249,249,.04); --fill4: rgba(249,249,249,.06); --fill8: rgba(249,249,249,.10);
    --tile: rgba(249,249,249,.05); --line: rgba(249,249,249,.08); --thumb: #3A3A3A;
    --glass: rgba(35,35,35,.85); --glassRing: inset 0 0 0 1px rgba(255,255,255,.06); --scrim: rgba(0,0,0,.28);
    --xxs: 0 0 0 1px rgba(0,0,0,.12), 0 1px 1.5px rgba(0,0,0,.14), 0 2.5px 4px rgba(0,0,0,.16);
    --sm: 0 2px 4px rgba(0,0,0,.10), 0 8px 8px rgba(0,0,0,.09), 0 18px 11px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.12);
    --md: 0 4px 9px rgba(0,0,0,.24), 0 16px 16px rgba(0,0,0,.20), 0 36px 22px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.24);
    --sheetShadow: 0 0 0 1px rgba(255,255,255,.05), 0 -12px 32px rgba(0,0,0,.35);
    --thumbShadow: 0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.3);
    --pill: 0 1px 1px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.06);
    --docShadow: 0 0 0 1px rgba(255,255,255,.05), 0 1px 1px -0.5px rgba(0,0,0,.10), 0 3px 3px -1.5px rgba(0,0,0,.10), 0 6px 6px -3px rgba(0,0,0,.10), 0 12px 12px -6px rgba(0,0,0,.08), 0 24px 24px -12px rgba(0,0,0,.08);
    --panel: rgba(249,249,249,.03);
    --accent: #71B2FF; --a24: rgba(113,178,255,.24); --a10: rgba(113,178,255,.10); --a12: rgba(113,178,255,.14); --a8: rgba(113,178,255,.09); --a70: rgba(113,178,255,.7);
    --onAccent: #1E1E1E; --boxFill: rgba(30,30,30,.2);
    --red12: rgba(255,66,69,.14); --red24: rgba(255,66,69,.24); --red70: rgba(253,121,123,.85); --redText: #FF8A8C; --redRing: rgba(255,66,69,.7);
    --orange14: rgba(251,164,65,.16); --orangeText: #FBC27F; --now: #FF6B6E;
    --plusDisk: #F9F9F9; --plusGlyph: #1E1E1E;
    --c0-hue: #4DFFDD; --c0-bg: rgba(77,255,221,.12); --c0-fg: #8FF5E2;
    --c1-hue: #FFE97B; --c1-bg: rgba(255,233,123,.13); --c1-fg: #F5E39A;
    --c2-hue: #BF8BFF; --c2-bg: rgba(191,139,255,.16); --c2-fg: #D3B2FF;
    --c3-hue: #71B2FF; --c3-bg: rgba(113,178,255,.16); --c3-fg: #A9D0FF;
    --c4-hue: #FF6AD1; --c4-bg: rgba(255,106,209,.15); --c4-fg: #FFA3E2;
    --cn-hue: #BCC2C9; --cn-bg: rgba(249,249,249,.08); --cn-fg: rgba(249,249,249,.78);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app: #161718; --sheet: #1E1E1E; --paper: #2A2A2A; --ink: #F9F9F9;
  --ink85: rgba(249,249,249,.85); --ink55: rgba(249,249,249,.55); --ink40: rgba(249,249,249,.40);
  --ink25: rgba(249,249,249,.25); --ink22: rgba(249,249,249,.22); --ink12: rgba(249,249,249,.12);
  --fill3: rgba(249,249,249,.04); --fill4: rgba(249,249,249,.06); --fill8: rgba(249,249,249,.10);
  --tile: rgba(249,249,249,.05); --line: rgba(249,249,249,.08); --thumb: #3A3A3A;
  --glass: rgba(35,35,35,.85); --glassRing: inset 0 0 0 1px rgba(255,255,255,.06); --scrim: rgba(0,0,0,.28);
  --xxs: 0 0 0 1px rgba(0,0,0,.12), 0 1px 1.5px rgba(0,0,0,.14), 0 2.5px 4px rgba(0,0,0,.16);
  --sm: 0 2px 4px rgba(0,0,0,.10), 0 8px 8px rgba(0,0,0,.09), 0 18px 11px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.12);
  --md: 0 4px 9px rgba(0,0,0,.24), 0 16px 16px rgba(0,0,0,.20), 0 36px 22px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.24);
  --sheetShadow: 0 0 0 1px rgba(255,255,255,.05), 0 -12px 32px rgba(0,0,0,.35);
  --thumbShadow: 0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.3);
  --pill: 0 1px 1px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.06);
  --docShadow: 0 0 0 1px rgba(255,255,255,.05), 0 1px 1px -0.5px rgba(0,0,0,.10), 0 3px 3px -1.5px rgba(0,0,0,.10), 0 6px 6px -3px rgba(0,0,0,.10), 0 12px 12px -6px rgba(0,0,0,.08), 0 24px 24px -12px rgba(0,0,0,.08);
  --panel: rgba(249,249,249,.03);
  --accent: #71B2FF; --a24: rgba(113,178,255,.24); --a10: rgba(113,178,255,.10); --a12: rgba(113,178,255,.14); --a8: rgba(113,178,255,.09); --a70: rgba(113,178,255,.7);
  --onAccent: #1E1E1E; --boxFill: rgba(30,30,30,.2);
  --red12: rgba(255,66,69,.14); --red24: rgba(255,66,69,.24); --red70: rgba(253,121,123,.85); --redText: #FF8A8C; --redRing: rgba(255,66,69,.7);
  --orange14: rgba(251,164,65,.16); --orangeText: #FBC27F; --now: #FF6B6E;
  --plusDisk: #F9F9F9; --plusGlyph: #1E1E1E;
  --c0-hue: #4DFFDD; --c0-bg: rgba(77,255,221,.12); --c0-fg: #8FF5E2;
  --c1-hue: #FFE97B; --c1-bg: rgba(255,233,123,.13); --c1-fg: #F5E39A;
  --c2-hue: #BF8BFF; --c2-bg: rgba(191,139,255,.16); --c2-fg: #D3B2FF;
  --c3-hue: #71B2FF; --c3-bg: rgba(113,178,255,.16); --c3-fg: #A9D0FF;
  --c4-hue: #FF6AD1; --c4-bg: rgba(255,106,209,.15); --c4-fg: #FFA3E2;
  --cn-hue: #BCC2C9; --cn-bg: rgba(249,249,249,.08); --cn-fg: rgba(249,249,249,.78);
  color-scheme: dark;
}

.c0 { --hue: var(--c0-hue); --abg: var(--c0-bg); --afg: var(--c0-fg); }
.c1 { --hue: var(--c1-hue); --abg: var(--c1-bg); --afg: var(--c1-fg); }
.c2 { --hue: var(--c2-hue); --abg: var(--c2-bg); --afg: var(--c2-fg); }
.c3 { --hue: var(--c3-hue); --abg: var(--c3-bg); --afg: var(--c3-fg); }
.c4 { --hue: var(--c4-hue); --abg: var(--c4-bg); --afg: var(--c4-fg); }
.cn { --hue: var(--cn-hue); --abg: var(--cn-bg); --afg: var(--cn-fg); }