/* Looseleaf tokens and ink-layer rules, from github.com/kevintngo/looseleaf (MIT, see vendor/looseleaf-ink/LICENSE). Tailwind-specific parts removed. */
:root {
  color-scheme: light;

  --ll-desk: #a8c8bb;
  --ll-desk-deep: #93b4a7;
  --ll-paper: #f8f5ee;
  --ll-paper-shade: #ece6da;
  --ll-slip: #fbf8f1;
  --ll-card: #fbf6e9;
  --ll-graph: #f4f7ef;
  --ll-kraft: #dcc8a3;
  --ll-check: #dfe9d8;
  --ll-pad: #f8f2de;
  --ll-photo: #fffdf6;

  --ll-rule-blue: #8fb0d4;
  --ll-rule-red: #d9776a;
  --ll-pad-rule: #b2c3dc;
  --ll-check-rule: #7fa37c;

  --ll-sticky-yellow: #f7e38a;
  --ll-sticky-green: #cfe6a8;
  --ll-sticky-orange: #f7c08e;
  --ll-sticky-pink: #f6b8b0;
  --ll-sticky-blue: #bcd8f0;

  --ll-ink: #2a2420;
  --ll-ink-soft: #4a423b;
  --ll-ink-muted: #4a433c;
  --ll-ink-you: #2c4f9e;
  --ll-pencil: #6b6660;
  --ll-pencil-text: #5a554e;
  --ll-pencil-mark: #8e887f;
  --ll-red: #c2412d;
  --ll-green: #3b7a4b;
  --ll-marker: #df6b3c;
  --ll-orange-text: #a4502a;
  --ll-hi: #f8dc4c;
  --ll-hi-deep: #a87f0c;
  --ll-focus: #2c4f9e;
  --ll-link-hover: #1f3b7a;
  --ll-check-ink: #2f6b45;
  --ll-check-no: #b23a28;

  --ll-tomato: #e8483a;
  --ll-tangerine: #f59a2f;
  --ll-lemon: #fbd63a;
  --ll-grass: #5db85c;
  --ll-teal: #2fb1a3;
  --ll-sky: #4aa8e8;
  --ll-grape: #8f6fd6;
  --ll-bubblegum: #f38bb8;

  --ll-tape: rgb(246 244 236 / 0.5);
  --ll-tape-edge: rgb(140 135 120 / 0.35);
  --ll-wet-ink-from: #15110e;

  --ll-shade: 58 44 30;
}

:root {
  --background: var(--ll-desk);
  --foreground: var(--ll-ink);
  --card: var(--ll-paper);
  --card-foreground: var(--ll-ink);
  --popover: var(--ll-slip);
  --popover-foreground: var(--ll-ink);
  --primary: var(--ll-marker);
  --primary-foreground: var(--ll-ink);
  --secondary: color-mix(in srgb, var(--ll-hi) 35%, var(--ll-paper));
  --secondary-foreground: var(--ll-ink);
  --muted: var(--ll-paper-shade);
  --muted-foreground: var(--ll-ink-muted);
  --accent: color-mix(in srgb, var(--ll-hi) 62%, var(--ll-paper));
  --accent-foreground: var(--ll-ink);
  --destructive: var(--ll-red);
  --destructive-foreground: var(--ll-slip);
  --border: var(--ll-pencil-mark);
  --input: var(--ll-pencil-mark);
  --ring: var(--ll-focus);
  --chart-1: var(--ll-marker);
  --chart-2: var(--ll-ink-you);
  --chart-3: var(--ll-green);
  --chart-4: var(--ll-hi-deep);
  --chart-5: var(--ll-grape);
  --sidebar: var(--ll-pad);
  --sidebar-foreground: var(--ll-ink);
  --sidebar-primary: var(--ll-marker);
  --sidebar-primary-foreground: var(--ll-ink);
  --sidebar-accent: color-mix(in srgb, var(--ll-hi) 40%, var(--ll-pad));
  --sidebar-accent-foreground: var(--ll-ink);
  --sidebar-border: var(--ll-pad-rule);
  --sidebar-ring: var(--ll-focus);

  --ll-umber: rgb(var(--ll-shade));
  --ll-line: var(--ll-pencil-mark);
  --ll-line-soft: color-mix(in srgb, var(--ll-pencil-mark) 55%, transparent);
  --ll-link: var(--ll-ink-you);
  --ll-input-ink: var(--ll-ink-you);
  --ll-caret: var(--ll-ink-you);
  --ll-placeholder: var(--ll-pencil-text);
  --ll-hi-select: color-mix(in srgb, var(--ll-hi) 62%, transparent);
  --ll-selection-text: var(--ll-ink);
  --ll-riso: var(--ll-marker);
  --ll-stamp-fill: color-mix(in srgb, var(--ll-marker) 50%, transparent);
  --ll-stamp-fill-red: color-mix(in srgb, var(--ll-red) 28%, transparent);
  --ll-stamp-fill-green: color-mix(in srgb, var(--ll-green) 24%, transparent);
  --ll-diff-add: color-mix(in srgb, var(--ll-green) 16%, transparent);
  --ll-diff-del: color-mix(in srgb, var(--ll-red) 14%, transparent);
  --ll-syn-keyword: color-mix(in srgb, var(--ll-red), var(--ll-ink) 14%);
  --ll-syn-string: color-mix(in srgb, var(--ll-green), var(--ll-ink) 14%);
  --ll-syn-name: var(--ll-ink-you);
  --ll-syn-number: color-mix(in srgb, var(--ll-orange-text), var(--ll-ink) 10%);
  --ll-syn-comment: var(--ll-pencil-text);
}

[data-theme],
[data-ll-scope] {
  --background: var(--ll-desk);
  --foreground: var(--ll-ink);
  --card: var(--ll-paper);
  --card-foreground: var(--ll-ink);
  --popover: var(--ll-slip);
  --popover-foreground: var(--ll-ink);
  --primary: var(--ll-marker);
  --primary-foreground: var(--ll-ink);
  --secondary: color-mix(in srgb, var(--ll-hi) 35%, var(--ll-paper));
  --secondary-foreground: var(--ll-ink);
  --muted: var(--ll-paper-shade);
  --muted-foreground: var(--ll-ink-muted);
  --accent: color-mix(in srgb, var(--ll-hi) 62%, var(--ll-paper));
  --accent-foreground: var(--ll-ink);
  --destructive: var(--ll-red);
  --destructive-foreground: var(--ll-slip);
  --border: var(--ll-pencil-mark);
  --input: var(--ll-pencil-mark);
  --ring: var(--ll-focus);
  --chart-1: var(--ll-marker);
  --chart-2: var(--ll-ink-you);
  --chart-3: var(--ll-green);
  --chart-4: var(--ll-hi-deep);
  --chart-5: var(--ll-grape);
  --sidebar: var(--ll-pad);
  --sidebar-foreground: var(--ll-ink);
  --sidebar-primary: var(--ll-marker);
  --sidebar-primary-foreground: var(--ll-ink);
  --sidebar-accent: color-mix(in srgb, var(--ll-hi) 40%, var(--ll-pad));
  --sidebar-accent-foreground: var(--ll-ink);
  --sidebar-border: var(--ll-pad-rule);
  --sidebar-ring: var(--ll-focus);

  --ll-umber: rgb(var(--ll-shade));
  --ll-line: var(--ll-pencil-mark);
  --ll-line-soft: color-mix(in srgb, var(--ll-pencil-mark) 55%, transparent);
  --ll-link: var(--ll-ink-you);
  --ll-input-ink: var(--ll-ink-you);
  --ll-caret: var(--ll-ink-you);
  --ll-placeholder: var(--ll-pencil-text);
  --ll-hi-select: color-mix(in srgb, var(--ll-hi) 62%, transparent);
  --ll-selection-text: var(--ll-ink);
  --ll-riso: var(--ll-marker);
  --ll-stamp-fill: color-mix(in srgb, var(--ll-marker) 50%, transparent);
  --ll-stamp-fill-red: color-mix(in srgb, var(--ll-red) 28%, transparent);
  --ll-stamp-fill-green: color-mix(in srgb, var(--ll-green) 24%, transparent);
  --ll-diff-add: color-mix(in srgb, var(--ll-green) 16%, transparent);
  --ll-diff-del: color-mix(in srgb, var(--ll-red) 14%, transparent);
  --ll-syn-keyword: color-mix(in srgb, var(--ll-red), var(--ll-ink) 14%);
  --ll-syn-string: color-mix(in srgb, var(--ll-green), var(--ll-ink) 14%);
  --ll-syn-name: var(--ll-ink-you);
  --ll-syn-number: color-mix(in srgb, var(--ll-orange-text), var(--ll-ink) 10%);
  --ll-syn-comment: var(--ll-pencil-text);
}

:root {
  --radius: 3px;
}

:root,
[data-theme],
[data-ll-scope] {
  --ll-shadow-hair: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.16 * var(--ll-shadow-k)));
  --ll-shadow-loose: 0 1px 2px rgb(var(--ll-shade) / calc(0.12 * var(--ll-shadow-k))), 0 6px 16px -2px rgb(var(--ll-shade) / calc(0.12 * var(--ll-shadow-k)));
  --ll-shadow-lift: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k))), 0 7px 16px -4px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k)));
  --ll-shadow-slip: 0 1px 1px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k))), 0 4px 8px -3px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k)));
  --ll-shadow-card: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k))), 0 6px 11px -5px rgb(var(--ll-shade) / calc(0.24 * var(--ll-shadow-k)));
  --ll-shadow-pad: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.18 * var(--ll-shadow-k))), 0 10px 20px -8px rgb(var(--ll-shade) / calc(0.22 * var(--ll-shadow-k)));
  --ll-shadow-check: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.22 * var(--ll-shadow-k))), 0 6px 12px -5px rgb(var(--ll-shade) / calc(0.24 * var(--ll-shadow-k)));
  --ll-shadow-paper: 0 1px 1.5px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k))), 0 2px 5px -1px rgb(var(--ll-shade) / calc(0.1 * var(--ll-shadow-k))), 0 12px 22px -8px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k)));
  --ll-shadow-sticky: 0 1px 1px rgb(var(--ll-shade) / calc(0.2 * var(--ll-shadow-k))), 0 9px 10px -7px rgb(var(--ll-shade) / calc(0.34 * var(--ll-shadow-k)));
  --ll-drop-sheet: drop-shadow(0 1px 0.75px rgb(var(--ll-shade) / calc(0.22 * var(--ll-shadow-k)))) drop-shadow(0 8px 8px rgb(var(--ll-shade) / calc(0.14 * var(--ll-shadow-k))));
  --ll-drop-sticker: drop-shadow(0 1px 0.6px rgb(var(--ll-shade) / calc(0.26 * var(--ll-shadow-k)))) drop-shadow(0 3px 3px rgb(var(--ll-shade) / calc(0.14 * var(--ll-shadow-k))));

  --ll-paper-light: linear-gradient(135deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0) 42%, rgb(var(--ll-shade) / calc(0.035 * var(--ll-shadow-k))));
  --ll-desk-vignette: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 60%, rgb(var(--ll-shade) / calc(0.05 * var(--ll-shadow-k))));
  --ll-overlay-dim: radial-gradient(ellipse 90% 80% at 50% 38%, rgb(var(--ll-shade) / calc(0.16 * var(--ll-shadow-k))), rgb(var(--ll-shade) / calc(0.23 * var(--ll-shadow-k))) 55%, rgb(var(--ll-shade) / calc(0.34 * var(--ll-shadow-k))));
  --ll-sticky-sheen: linear-gradient(to bottom, rgb(255 252 235 / 0.14), transparent 30%, transparent 78%, rgb(120 92 20 / 0.07));
}

:root {
  --ll-wobble: 1;
  --ll-stroke-fine: 1.7;
  --ll-stroke-brush: 3.2;
  --ll-bleed: 6;
  --ll-bleed-loop: 11;
  --ll-bleed-focus: 10;
  --ll-misreg-sm: 3.2;
  --ll-misreg-md: 4.6;
  --ll-misreg-lg: 6;
  --ll-misreg-k: 1;
  --ll-jitter-k: 1;
  --ll-tilt-max: 2deg;
  --ll-tilt-turn: 0.6deg;
  --ll-hover-tilt: -0.9deg;
  --ll-hover-misreg: 0.35;
  --ll-press-misreg: -0.78;
  --ll-press-sink: 1px;
  --ll-shadow-k: 1;
  --ll-grain: 1;
  --ll-blend: multiply;
}

:root {
  --ll-space-1: 2px;
  --ll-space-2: 4px;
  --ll-space-3: 6px;
  --ll-space-4: 8px;
  --ll-space-5: 10px;
  --ll-space-6: 12px;
  --ll-space-7: 14px;
  --ll-space-8: 16px;
  --ll-space-9: 18px;
  --ll-space-10: 22px;
  --ll-space-11: 26px;
  --ll-space-12: 34px;
  --ll-hit: 40px;
  --ll-hit-min: 24px;
  --ll-ink-room: 0.2em;

  --ll-ease-out: ease-out;
  --ll-ease-in: ease-in;
  --ll-ease-settle: cubic-bezier(0.2, 0.9, 0.25, 1.12);
  --ll-ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.15);
  --ll-ease-dialog: cubic-bezier(0.2, 0.85, 0.25, 1.08);

  --ll-z-shadow: -2;
  --ll-z-sheet: -1;
  --ll-z-ink: 1;
  --ll-z-prop: 3;
  --ll-z-raised: 8;
  --ll-z-popover: 1010;
  --ll-z-sticky: 30;
  --ll-z-drawer: 800;
  --ll-z-overlay: 1000;
  --ll-z-toast: 1100;
  --ll-z-splash: 1200;

  --ll-peel-angle: -14deg;
  --ll-wipe-r: 100%;
  --ll-wipe-l: -4%;
  --ll-boil-strip: 66px;
  --ll-draw-delay: 0s;

  --ll-motion: 1;
  --ll-sheet-radius: 1px;
}

[dir="rtl"] {
  --ll-wipe-r: -4%;
  --ll-wipe-l: 100%;
}
[dir="ltr"] {
  --ll-wipe-r: 100%;
  --ll-wipe-l: -4%;
}

[data-density="compact"] {
  --ll-hit: 32px;
}
[data-density="calm"] {
  --ll-hit: 28px;
  --ll-wobble: 0.6;
  --ll-stroke-fine: 1;
  --ll-stroke-brush: 1.6;
  --ll-misreg-k: 0;
  --ll-jitter-k: 0;
  --ll-tilt-max: 0deg;
  --ll-tilt-turn: 0deg;
}

:root,
[data-motion] {
  --ll-dur-press: calc(0.09s * var(--ll-motion));
  --ll-dur-hover: calc(0.12s * var(--ll-motion));
  --ll-dur-fade: calc(0.15s * var(--ll-motion));
  --ll-dur-pop: calc(0.18s * var(--ll-motion));
  --ll-dur-sheet: calc(0.3s * var(--ll-motion));
  --ll-dur-drop: calc(0.34s * var(--ll-motion));
  --ll-dur-toss: calc(0.44s * var(--ll-motion));
  --ll-dur-soak: calc(0.52s * var(--ll-motion));
  --ll-dur-boil: calc(0.48s * var(--ll-motion));
  --ll-dur-draw: calc(0.6s * var(--ll-motion));
}

@keyframes ll-soak {
  from {
    color: var(--ll-wet-ink-from);
    opacity: 0.15;
    text-shadow: 0 0 1.4px color-mix(in srgb, var(--ll-wet-ink-from) 55%, transparent);
  }
  55% {
    opacity: 0.9;
    text-shadow: 0 0 0.6px color-mix(in srgb, var(--ll-wet-ink-from) 30%, transparent);
  }
  to {
    opacity: 1;
    text-shadow: none;
  }
}

@keyframes ll-drop {
  0% {
    opacity: 0;
    transform: translateY(-26px) rotate(-2.4deg) scale(1.05);
  }
  62% {
    opacity: 1;
    transform: translateY(2px) rotate(0.35deg) scale(0.995);
  }
  82% {
    transform: translateY(-1px) rotate(-0.1deg);
  }
  100% {
    transform: none;
  }
}

@keyframes ll-sheet-drop {
  0% {
    opacity: 0;
    transform: translateY(-14px) rotate(-1.2deg) scale(1.02);
  }
  70% {
    opacity: 1;
    transform: translateY(1px) rotate(0.15deg) scale(0.998);
  }
  100% {
    transform: none;
  }
}

@keyframes ll-pop {
  0% {
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) rotate(1.5deg);
  }
  100% {
    transform: none;
  }
}

@keyframes ll-toss {
  0% {
    opacity: 0;
    transform: translate(46px, 34px) rotate(14deg) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translate(-2px, -2px) rotate(-1.5deg) scale(1.01);
  }
  100% {
    transform: none;
  }
}

@keyframes ll-peel {
  from {
    transform: none;
  }
  to {
    transform: translate(-1px, -2px) rotate(var(--ll-peel-angle));
  }
}

@keyframes ll-boil {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(var(--ll-boil-strip) * -1);
  }
}

@keyframes ll-boil-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--ll-boil-strip) * -1));
  }
}

@keyframes ll-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ll-wipe {
  from {
    clip-path: inset(-10% var(--ll-wipe-r, 100%) -10% var(--ll-wipe-l, -4%));
  }
  to {
    clip-path: inset(-10% -4% -10% -4%);
  }
}

@layer components {
  svg[data-ink] {
    overflow: visible;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    isolation: isolate;
  }

  :where([data-ink-host], .ll-ink-host) {
    position: relative;
    isolation: isolate;
  }

  :where(svg[data-ink] [data-layer]:not([data-layer="rest"])) {
    opacity: 0;
    visibility: hidden;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      scale var(--ll-dur-press) var(--ll-ease-out),
      rotate var(--ll-dur-press) var(--ll-ease-out),
      translate var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }
  :where(svg[data-ink] [data-layer="checked"], svg[data-ink] [data-layer="indeterminate"]) {
    scale: 0.9;
    rotate: -3deg;
  }
  :where(svg[data-ink] [data-hide-on]) {
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :where(svg[data-ink]) {
    transition: rotate var(--ll-dur-hover) var(--ll-ease-settle);
  }
  :where(svg[data-ink] [data-part], svg[data-ink] [data-layer="rest"]) {
    transition: translate var(--ll-dur-hover) var(--ll-ease-settle);
  }
  svg[data-ink]:not(:has([data-layer="rest"])) :is([data-layer="disabled"], [data-layer="invalid"], [data-layer="checked"], [data-layer="indeterminate"], [data-layer="open"], [data-layer="busy"]) {
    opacity: 1;
    visibility: visible;
    scale: none;
    rotate: none;
  }
  svg[data-ink] [data-layer][data-on]:not([data-layer="rest"]) {
    opacity: 1;
    visibility: visible;
    scale: none;
    rotate: none;
  }

  @media (hover: hover) {
    :hover:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink] [data-layer="hover"] {
      opacity: 1;
      visibility: visible;
      transition:
        opacity var(--ll-dur-fade) var(--ll-ease-out),
        visibility 0s;
    }
    :hover:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink]:where(:has([data-layer="hover"]):not([data-still])) {
      rotate: var(--ll-hover-tilt);
    }
    :hover:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink]:where(:has([data-layer="hover"])) [data-part="fill"] {
      translate: calc(var(--mx, 0) * var(--ll-hover-misreg) * 1px) calc(var(--my, 0) * var(--ll-hover-misreg) * 1px);
    }
    :hover:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink] [data-hide-on~="hover"] {
      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--ll-dur-press) var(--ll-ease-out),
        visibility 0s linear var(--ll-dur-press);
    }
  }

  [data-hover]:not([data-hover="false"]):where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink] [data-layer="hover"] {
    opacity: 1;
    visibility: visible;
  }
  [data-hover]:not([data-hover="false"]):where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink]:where(:has([data-layer="hover"]):not([data-still])) {
    rotate: var(--ll-hover-tilt);
  }
  [data-hover]:not([data-hover="false"]):where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > svg[data-ink]:where(:has([data-layer="hover"])) [data-part="fill"] {
    translate: calc(var(--mx, 0) * var(--ll-hover-misreg) * 1px) calc(var(--my, 0) * var(--ll-hover-misreg) * 1px);
  }

  :is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink] [data-layer="pressed"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s;
  }
  :is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink]:where(:has([data-layer="hover"]):not([data-still])) {
    rotate: none;
    transition: rotate var(--ll-dur-press) var(--ll-ease-out);
  }
  :is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink] [data-part="fill"] {
    translate: calc(var(--mx, 0) * var(--ll-press-misreg) * 1px) calc(var(--my, 0) * var(--ll-press-misreg) * 1px);
    transition: translate var(--ll-dur-press) var(--ll-ease-out);
  }
  :is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink] [data-layer="rest"] {
    translate: calc(var(--ll-press-sink) * 0.6) var(--ll-press-sink);
    transition: translate var(--ll-dur-press) var(--ll-ease-out);
  }
  [data-ink-sink="self"]:is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink] [data-layer="rest"] {
    translate: calc(var(--ll-press-sink) * 0.6) 0;
  }
  :is(:active:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))), [data-pressed]:not([data-pressed="false"])) > svg[data-ink] :is([data-layer="hover"], [data-hide-on~="pressed"]) {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is(:focus-visible, [data-focus-visible], :has(> :is(input, textarea, select):focus-visible), [data-ink-focus="within"]:has(:focus-visible)) > svg[data-ink] [data-layer="focus"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :is(:focus-visible, [data-focus-visible], :has(> :is(input, textarea, select):focus-visible), [data-ink-focus="within"]:has(:focus-visible)) > svg[data-ink] [data-hide-on~="focus"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]), :has(> :is(input, textarea, select, button):disabled)) > svg[data-ink] [data-layer="disabled"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]), :has(> :is(input, textarea, select, button):disabled)) > svg[data-ink] [data-hide-on~="disabled"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is([data-invalid]:not([data-invalid="false"]), [aria-invalid="true"], :has(> :is(input, textarea, select)[aria-invalid="true"])) > svg[data-ink] [data-layer="invalid"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :is([data-invalid]:not([data-invalid="false"]), [aria-invalid="true"], :has(> :is(input, textarea, select)[aria-invalid="true"])) > svg[data-ink] [data-hide-on~="invalid"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is([data-state="checked"], [data-state="on"], [data-state="active"], [aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [data-checked]:not([data-checked="false"]), [data-selected]:not([data-selected="false"]), :has(> input:checked)) > svg[data-ink] [data-layer="checked"] {
    opacity: 1;
    visibility: visible;
    scale: none;
    rotate: none;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      scale var(--ll-dur-pop) var(--ll-ease-pop),
      rotate var(--ll-dur-pop) var(--ll-ease-pop),
      visibility 0s;
  }
  :is([data-state="checked"], [data-state="on"], [data-state="active"], [aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [data-checked]:not([data-checked="false"]), [data-selected]:not([data-selected="false"]), :has(> input:checked)) > svg[data-ink] [data-hide-on~="checked"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is([data-state="indeterminate"], [aria-checked="mixed"], :has(> input:indeterminate)) > svg[data-ink] [data-layer="indeterminate"] {
    opacity: 1;
    visibility: visible;
    scale: none;
    rotate: none;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      scale var(--ll-dur-pop) var(--ll-ease-pop),
      rotate var(--ll-dur-pop) var(--ll-ease-pop),
      visibility 0s;
  }
  :is([data-state="indeterminate"], [aria-checked="mixed"], :has(> input:indeterminate)) > svg[data-ink] [data-hide-on~="indeterminate"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is([data-state="open"], [aria-expanded="true"]) > svg[data-ink] [data-layer="open"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :is([data-state="open"], [aria-expanded="true"]) > svg[data-ink] [data-hide-on~="open"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  :is([aria-busy="true"], [data-loading]:not([data-loading="false"])) > svg[data-ink] [data-layer="busy"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      visibility 0s;
  }
  :is([aria-busy="true"], [data-loading]:not([data-loading="false"])) > svg[data-ink] [data-hide-on~="busy"] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      visibility 0s linear var(--ll-dur-press);
  }

  [data-slot="paper-face"][data-layer] {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--ll-dur-press) var(--ll-ease-out),
      rotate var(--ll-dur-sheet) var(--ll-ease-settle),
      visibility 0s linear var(--ll-dur-press);
  }
  :is([data-state="checked"], [data-state="on"], [data-state="active"], [aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [data-checked]:not([data-checked="false"]), [data-selected]:not([data-selected="false"]), :has(> input:checked)) > [data-slot="paper-face"][data-layer="checked"],
  :is([data-state="open"], [aria-expanded="true"]) > [data-slot="paper-face"][data-layer="open"] {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--ll-dur-fade) var(--ll-ease-out),
      rotate var(--ll-dur-sheet) var(--ll-ease-settle),
      visibility 0s;
  }
  @media (hover: hover) {
    :hover:where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > [data-slot="paper-face"][data-layer="hover"] {
      opacity: 1;
      visibility: visible;
      transition:
        opacity var(--ll-dur-fade) var(--ll-ease-out),
        rotate var(--ll-dur-sheet) var(--ll-ease-settle),
        visibility 0s;
    }
  }
  [data-hover]:not([data-hover="false"]):where(:not(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"]))) > [data-slot="paper-face"][data-layer="hover"] {
    opacity: 1;
    visibility: visible;
  }

  :is([data-ink-host], .ll-ink-host) {
    outline: 1.5px solid var(--ll-pencil-mark);
    outline-offset: -1.5px;
  }
  :is([data-ink-host], .ll-ink-host)[data-ink-ready] {
    outline-color: transparent;
  }
  :is([data-ink-host], .ll-ink-host):focus-visible:not([data-ink-ready]),
  :is([data-ink-host], .ll-ink-host)[data-ink-ready]:focus-visible:not(:has(> svg[data-ink] [data-layer="focus"])) {
    outline: 2px solid var(--ll-focus);
    outline-offset: 2px;
  }

  :is([data-ink-host], .ll-ink-host)[data-ink-ready]:has(> svg[data-ink] [data-layer="focus"]) > :is(input, textarea, select):focus-visible {
    outline: none;
  }

  svg[data-ink="sheet"] {
    rotate: clamp(calc(var(--ll-tilt-max) * -1), var(--ll-tilt, 0deg), var(--ll-tilt-max));
  }
}
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ll-motion: 0;
    --ll-jitter-k: 0;
  }
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
[data-motion="reduced"] {
  --ll-motion: 0;
  --ll-jitter-k: 0;
}
[data-motion="reduced"],
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

@media (forced-colors: active) {
  :is(svg[data-ink].absolute, :is([data-ink-host], .ll-ink-host) > svg[data-ink]):not([data-ink="icon"], [data-ink="doodle"], [data-ink="sticker"], [data-ink="stamp"], [data-ink="tape"], [data-ink="prop"], [data-ink="mascot"], [data-ink="illustration"], [data-ink="badge"], [data-ink-keep]) {
    display: none;
  }
  :is([data-ink-host], .ll-ink-host),
  :is([data-ink-host], .ll-ink-host)[data-ink-ready] {
    outline: 1px solid ButtonBorder;
    outline-offset: -1px;
  }
  :is([data-ink-host], .ll-ink-host):focus-visible,
  :is([data-ink-host], .ll-ink-host)[data-ink-ready]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  :is([data-ink-host], .ll-ink-host)[data-ink-ready] > :is(input, textarea, select):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .ll-paper {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  mark {
    forced-color-adjust: none;
    background-color: Mark;
    color: MarkText;
  }
}

:root {
  --ll-code-comment: var(--ll-syn-comment);
  --ll-code-keyword: var(--ll-syn-keyword);
  --ll-code-literal: var(--ll-syn-number);
  --ll-code-number: var(--ll-syn-number);
  --ll-code-string: var(--ll-syn-string);
  --ll-code-function: var(--ll-syn-name);
  --ll-code-type: var(--ll-syn-name);
  --ll-code-tag: var(--ll-syn-keyword);
  --ll-code-attr: var(--ll-syn-number);
  --ll-code-variable: var(--ll-ink);
  --ll-code-punct: var(--ll-ink-muted);
}

:is([data-slot="code-block"][data-tone="dark"]) {
  --ll-stock: #24272e;
  --ll-ink: #ece6d9;
  --ll-ink-soft: #d9d2c3;
  --ll-ink-muted: #c9c3b6;
  --ll-pencil-text: #a3a6ad;
  --ll-pencil-mark: #6a6e78;
  --ll-tex-paper: none;
  --ll-tex-paper-size: 100% 100%;
  --ll-tex-paper-pos: 0 0 !important;
  --ll-paper-light: linear-gradient(160deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 55%);
  --ll-code-comment: #8f949d;
  --ll-code-keyword: #f6957d;
  --ll-code-literal: #f7c370;
  --ll-code-number: #f7c370;
  --ll-code-string: #abd98f;
  --ll-code-function: #8fc1f7;
  --ll-code-type: #80d6c6;
  --ll-code-tag: #f6957d;
  --ll-code-attr: #f1d27a;
  --ll-code-variable: #ece6d9;
  --ll-code-punct: #c2bcaf;
  --ll-diff-add: rgb(120 200 120 / 0.16);
  --ll-diff-del: rgb(240 110 100 / 0.16);
  color: var(--ll-ink);
  color-scheme: dark;
}

[data-slot="code-block"][data-tone="dark"] ::selection {
  background: rgb(143 193 247 / 0.32);
}

[data-slot="code-block"][data-tone="dark"] [data-slot="code-block-pre"] {
  scrollbar-color: #5c606a transparent;
}

@supports (appearance: base-select) {
  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select):not([multiple]),
  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select):not([multiple])::picker(select) {
    appearance: base-select;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select):not([multiple]) {
    border: 0;
    color: inherit;
    font: inherit;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select)::picker-icon {
    display: none;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select)::picker(select) {
    margin-block: 6px;
    padding: 5px;
    border: 1.5px solid var(--ll-ink);
    border-radius: 12px;
    background: var(--ll-slip);
    color: var(--ll-ink);
    font-family: var(--font-hand);
    box-shadow:
      0 1px 0 rgb(58 44 30 / 0.06),
      0 16px 32px -12px rgb(58 44 30 / 0.4);
    max-block-size: min(22rem, 70vh);
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select) option {
    padding: 7px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--ll-ink);
    font-size: 16px;
    line-height: 1.35;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select) option:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ll-hi) 78%, transparent);
    outline: none;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select) option:checked {
    font-weight: 700;
  }

  :is([data-slot="native-select"], [data-slot="calendar-dropdown"] select) option::checkmark {
    color: var(--ll-ink-you);
  }
}