@scope (.color-picker){:scope{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-auto-flow:column;gap:24px;padding:24px}.selection-mark{position:absolute;z-index:2;font-size:40px;font-weight:600;pointer-events:none;position-anchor:--selected-color-anchor;position-area:center}.color{width:48px;height:48px;border-radius:100px;cursor:pointer;position:relative}.color.is-selected{anchor-name:--selected-color-anchor}.color.inherit{background:transparent;border:3px solid var(--color-note-plain-swatch-border)}.color.plain{background:var(--color-note-plain-swatch);border:3px solid var(--color-note-plain-swatch-border)}.color.red{background:var(--color-note-red-swatch);border:3px solid var(--color-note-red-swatch-border)}.color.orange{background:var(--color-note-orange-swatch);border:3px solid var(--color-note-orange-swatch-border)}.color.yellow{background:var(--color-note-yellow-swatch);border:3px solid var(--color-note-yellow-swatch-border)}.color.green{background:var(--color-note-green-swatch);border:3px solid var(--color-note-green-swatch-border)}.color.blue{background:var(--color-note-blue-swatch);border:3px solid var(--color-note-blue-swatch-border)}.color.violet{background:var(--color-note-violet-swatch);border:3px solid var(--color-note-violet-swatch-border)}}@layer reset,base,variables,utilities,components;@layer base{:root{touch-action:manipulation;overflow-wrap:break-word;-webkit-user-drag:none;-webkit-touch-callout:none}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}*:not(dialog){margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:inherit}em,b,i,strong{font-weight:inherit;font-style:inherit}input,textarea,button,select{appearance:none;border:none;outline:none;padding:0;margin:0;background:transparent;font:inherit;color:inherit}textarea{resize:none}img,picture,video,canvas,svg{display:block;max-width:100%}img{-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}}@layer variables;@layer variables{:root{--palette-black-2: oklch(0% 0% 0 / .02);--palette-black-4: oklch(0% 0% 0 / .04);--palette-black-6: oklch(0% 0% 0 / .06);--palette-black-8: oklch(0% 0% 0 / .08);--palette-black-10: oklch(0% 0% 0 / .1);--palette-black-15: oklch(0% 0% 0 / .15);--palette-black-20: oklch(0% 0% 0 / .2);--palette-black-30: oklch(0% 0% 0 / .3);--palette-black-40: oklch(0% 0% 0 / .4);--palette-black-50: oklch(0% 0% 0 / .5);--palette-black-60: oklch(0% 0% 0 / .6);--palette-black-70: oklch(0% 0% 0 / .7);--palette-black-80: oklch(0% 0% 0 / .8);--palette-black-90: oklch(0% 0% 0 / .9);--palette-white-2: oklch(100% 0% 0 / .02);--palette-white-4: oklch(100% 0% 0 / .04);--palette-white-6: oklch(100% 0% 0 / .06);--palette-white-8: oklch(100% 0% 0 / .08);--palette-white-10: oklch(100% 0% 0 / .1);--palette-white-15: oklch(100% 0% 0 / .15);--palette-white-20: oklch(100% 0% 0 / .2);--palette-white-30: oklch(100% 0% 0 / .3);--palette-white-40: oklch(100% 0% 0 / .4);--palette-white-50: oklch(100% 0% 0 / .5);--palette-white-60: oklch(100% 0% 0 / .6);--palette-white-70: oklch(100% 0% 0 / .7);--palette-white-80: oklch(100% 0% 0 / .8);--palette-white-90: oklch(100% 0% 0 / .9);--palette-neutral-0: oklch(100% 0% 240);--palette-neutral-50: oklch(98% 2% 240);--palette-neutral-100: oklch(96% 4% 240);--palette-neutral-150: oklch(94% 6% 240);--palette-neutral-200: oklch(90% 8% 240);--palette-neutral-300: oklch(84% 10% 240);--palette-neutral-400: oklch(72% 12% 240);--palette-neutral-500: oklch(60% 14% 240);--palette-neutral-600: oklch(48% 12% 240);--palette-neutral-700: oklch(38% 10% 240);--palette-neutral-800: oklch(28% 8% 240);--palette-neutral-850: oklch(22% 6% 240);--palette-neutral-900: oklch(16% 4% 240);--palette-neutral-950: oklch(10% 2% 240);--palette-neutral-1000: oklch(0% 0% 240);--palette-hue-default: 200;--palette-hue-plain: 250;--palette-hue-red: 5;--palette-hue-orange: 45;--palette-hue-yellow: 85;--palette-hue-green: 172;--palette-hue-blue: 230;--palette-hue-violet: 298;--palette-primary-key: oklch(50% 50% 200);--palette-primary-0: oklch(100% 4% 200);--palette-primary-50: oklch(98% 8% 200);--palette-primary-100: oklch(96% 12% 200);--palette-primary-150: oklch(92% 16% 200);--palette-primary-200: oklch(90% 24% 200);--palette-primary-250: oklch(88% 32% 200);--palette-primary-300: oklch(82% 40% 200);--palette-primary-400: oklch(74% 48% 200);--palette-primary-500: oklch(68% 52% 200);--palette-primary-600: oklch(58% 48% 200);--palette-primary-700: oklch(50% 42% 201);--palette-primary-800: oklch(44% 36% 202);--palette-primary-900: oklch(40% 30% 203);--palette-primary-950: oklch(28% 24% 204);--palette-primary-lc-0: oklch(100% 2% 200);--palette-primary-lc-50: oklch(98% 6% 200);--palette-primary-lc-100: oklch(96% 8% 200);--palette-primary-lc-150: oklch(92% 10% 200);--palette-primary-lc-200: oklch(90% 12% 200);--palette-primary-lc-250: oklch(88% 14% 200);--palette-primary-lc-300: oklch(82% 16% 200);--palette-primary-lc-400: oklch(74% 18% 200);--palette-primary-lc-500: oklch(68% 20% 201);--palette-primary-lc-600: oklch(58% 22% 202);--palette-primary-lc-700: oklch(50% 20% 204);--palette-primary-lc-800: oklch(44% 16% 208);--palette-primary-lc-900: oklch(40% 12% 212);--palette-primary-lc-950: oklch(28% 8% 216);--palette-danger-key: oklch(50% 50% 15);--palette-danger-0: oklch(100% 4% 15);--palette-danger-50: oklch(98% 8% 15);--palette-danger-100: oklch(96% 12% 15);--palette-danger-150: oklch(92% 16% 15);--palette-danger-200: oklch(90% 24% 15);--palette-danger-250: oklch(88% 32% 15);--palette-danger-300: oklch(82% 40% 15);--palette-danger-400: oklch(74% 48% 15);--palette-danger-500: oklch(68% 52% 15);--palette-danger-600: oklch(58% 48% 15);--palette-danger-700: oklch(50% 42% 15);--palette-danger-800: oklch(44% 36% 15);--palette-danger-900: oklch(40% 30% 15);--palette-danger-950: oklch(28% 24% 15);--palette-danger-lc-0: oklch(100% 2% 15);--palette-danger-lc-50: oklch(98% 6% 15);--palette-danger-lc-100: oklch(96% 8% 15);--palette-danger-lc-150: oklch(92% 10% 15);--palette-danger-lc-200: oklch(90% 12% 15);--palette-danger-lc-250: oklch(88% 14% 15);--palette-danger-lc-300: oklch(82% 16% 15);--palette-danger-lc-400: oklch(74% 18% 15);--palette-danger-lc-500: oklch(68% 20% 15);--palette-danger-lc-600: oklch(58% 22% 15);--palette-danger-lc-700: oklch(50% 20% 15);--palette-danger-lc-800: oklch(44% 16% 15);--palette-danger-lc-900: oklch(40% 12% 15);--palette-danger-lc-950: oklch(28% 8% 15);--palette-plain-key: oklch(50% 10% 250);--palette-plain-0: oklch(100% 4% 250);--palette-plain-50: oklch(98% 6% 250);--palette-plain-100: oklch(96% 8% 250);--palette-plain-150: oklch(92% 10% 250);--palette-plain-200: oklch(90% 12% 250);--palette-plain-250: oklch(88% 12% 250);--palette-plain-300: oklch(82% 12% 250);--palette-plain-400: oklch(74% 12% 250);--palette-plain-500: oklch(68% 12% 250);--palette-plain-600: oklch(58% 12% 250);--palette-plain-700: oklch(50% 12% 250);--palette-plain-800: oklch(44% 10% 250);--palette-plain-900: oklch(40% 8% 250);--palette-plain-950: oklch(28% 4% 250);--palette-plain-lc-0: oklch(100% 2% 250);--palette-plain-lc-50: oklch(98% 2% 250);--palette-plain-lc-100: oklch(96% 2% 250);--palette-plain-lc-150: oklch(92% 2% 250);--palette-plain-lc-200: oklch(90% 2% 250);--palette-plain-lc-250: oklch(88% 2% 250);--palette-plain-lc-300: oklch(82% 2% 250);--palette-plain-lc-400: oklch(74% 2% 250);--palette-plain-lc-500: oklch(68% 2% 250);--palette-plain-lc-600: oklch(58% 2% 250);--palette-plain-lc-700: oklch(50% 2% 250);--palette-plain-lc-800: oklch(44% 2% 250);--palette-plain-lc-900: oklch(40% 2% 250);--palette-plain-lc-950: oklch(28% 2% 250);--palette-red-key: oklch(50% 50% 5);--palette-red-0: oklch(100% 4% 5);--palette-red-50: oklch(98% 8% 5);--palette-red-100: oklch(96% 12% 5);--palette-red-150: oklch(92% 16% 5);--palette-red-200: oklch(90% 24% 5);--palette-red-250: oklch(88% 32% 5);--palette-red-300: oklch(82% 40% 5);--palette-red-400: oklch(74% 48% 5);--palette-red-500: oklch(68% 52% 5);--palette-red-600: oklch(58% 48% 5);--palette-red-700: oklch(50% 42% 5);--palette-red-800: oklch(44% 36% 5);--palette-red-900: oklch(40% 30% 5);--palette-red-950: oklch(28% 24% 5);--palette-red-lc-0: oklch(100% 2% 5);--palette-red-lc-50: oklch(98% 6% 5);--palette-red-lc-100: oklch(96% 8% 5);--palette-red-lc-150: oklch(92% 10% 5);--palette-red-lc-200: oklch(90% 12% 5);--palette-red-lc-250: oklch(88% 14% 5);--palette-red-lc-300: oklch(82% 16% 5);--palette-red-lc-400: oklch(74% 18% 5);--palette-red-lc-500: oklch(68% 20% 5);--palette-red-lc-600: oklch(58% 22% 5);--palette-red-lc-700: oklch(50% 20% 5);--palette-red-lc-800: oklch(44% 16% 5);--palette-red-lc-900: oklch(40% 12% 5);--palette-red-lc-950: oklch(28% 8% 5);--palette-orange-key: oklch(50% 50% 55);--palette-orange-0: oklch(100% 4% 55);--palette-orange-50: oklch(98% 8% 55);--palette-orange-100: oklch(96% 12% 55);--palette-orange-150: oklch(92% 16% 55);--palette-orange-200: oklch(90% 24% 55);--palette-orange-250: oklch(88% 32% 55);--palette-orange-300: oklch(82% 40% 55);--palette-orange-400: oklch(74% 48% 55);--palette-orange-500: oklch(68% 52% 55);--palette-orange-600: oklch(58% 48% 55);--palette-orange-700: oklch(50% 42% 55);--palette-orange-800: oklch(44% 36% 55);--palette-orange-900: oklch(40% 30% 55);--palette-orange-950: oklch(28% 24% 55);--palette-orange-lc-0: oklch(100% 2% 55);--palette-orange-lc-50: oklch(98% 6% 55);--palette-orange-lc-100: oklch(96% 8% 55);--palette-orange-lc-150: oklch(92% 10% 55);--palette-orange-lc-200: oklch(90% 12% 55);--palette-orange-lc-250: oklch(88% 14% 55);--palette-orange-lc-300: oklch(82% 16% 55);--palette-orange-lc-400: oklch(74% 18% 55);--palette-orange-lc-500: oklch(68% 20% 55);--palette-orange-lc-600: oklch(58% 22% 55);--palette-orange-lc-700: oklch(50% 20% 55);--palette-orange-lc-800: oklch(44% 16% 55);--palette-orange-lc-900: oklch(40% 12% 55);--palette-orange-lc-950: oklch(28% 8% 55);--palette-yellow-key: oklch(50% 50% 85);--palette-yellow-0: oklch(100% 4% 85);--palette-yellow-50: oklch(98% 8% 85);--palette-yellow-100: oklch(96% 12% 85);--palette-yellow-150: oklch(92% 16% 85);--palette-yellow-200: oklch(90% 24% 85);--palette-yellow-250: oklch(88% 32% 85);--palette-yellow-300: oklch(82% 40% 85);--palette-yellow-400: oklch(74% 48% 85);--palette-yellow-500: oklch(68% 52% 85);--palette-yellow-600: oklch(58% 48% 85);--palette-yellow-700: oklch(50% 42% 85);--palette-yellow-800: oklch(44% 36% 85);--palette-yellow-900: oklch(40% 30% 85);--palette-yellow-950: oklch(28% 24% 85);--palette-yellow-lc-0: oklch(100% 2% 85);--palette-yellow-lc-50: oklch(98% 6% 85);--palette-yellow-lc-100: oklch(96% 8% 85);--palette-yellow-lc-150: oklch(92% 10% 85);--palette-yellow-lc-200: oklch(90% 12% 85);--palette-yellow-lc-250: oklch(88% 14% 85);--palette-yellow-lc-300: oklch(82% 16% 85);--palette-yellow-lc-400: oklch(74% 18% 85);--palette-yellow-lc-500: oklch(68% 20% 85);--palette-yellow-lc-600: oklch(58% 22% 85);--palette-yellow-lc-700: oklch(50% 20% 85);--palette-yellow-lc-800: oklch(44% 16% 85);--palette-yellow-lc-900: oklch(40% 12% 85);--palette-yellow-lc-950: oklch(28% 8% 85);--palette-green-key: oklch(50% 50% 164);--palette-green-0: oklch(100% 4% 178);--palette-green-50: oklch(98% 8% 174);--palette-green-100: oklch(96% 12% 168);--palette-green-150: oklch(92% 16% 164);--palette-green-200: oklch(90% 24% 160);--palette-green-250: oklch(88% 32% 156);--palette-green-300: oklch(82% 40% 152);--palette-green-400: oklch(74% 48% 156);--palette-green-500: oklch(68% 52% 160);--palette-green-600: oklch(58% 48% 164);--palette-green-700: oklch(50% 42% 168);--palette-green-800: oklch(44% 36% 170);--palette-green-900: oklch(40% 30% 174);--palette-green-950: oklch(28% 24% 178);--palette-green-lc-0: oklch(100% 2% 164);--palette-green-lc-50: oklch(98% 6% 164);--palette-green-lc-100: oklch(96% 8% 164);--palette-green-lc-150: oklch(92% 10% 164);--palette-green-lc-200: oklch(90% 12% 164);--palette-green-lc-250: oklch(88% 14% 164);--palette-green-lc-300: oklch(82% 16% 164);--palette-green-lc-400: oklch(74% 18% 164);--palette-green-lc-500: oklch(68% 20% 164);--palette-green-lc-600: oklch(58% 22% 164);--palette-green-lc-700: oklch(50% 20% 164);--palette-green-lc-800: oklch(44% 16% 164);--palette-green-lc-900: oklch(40% 12% 164);--palette-green-lc-950: oklch(28% 8% 164);--palette-blue-key: oklch(50% 50% 230);--palette-blue-0: oklch(100% 4% 230);--palette-blue-50: oklch(98% 8% 230);--palette-blue-100: oklch(96% 12% 230);--palette-blue-150: oklch(92% 16% 230);--palette-blue-200: oklch(90% 24% 230);--palette-blue-250: oklch(88% 32% 230);--palette-blue-300: oklch(82% 40% 230);--palette-blue-400: oklch(74% 48% 230);--palette-blue-500: oklch(68% 52% 230);--palette-blue-600: oklch(58% 48% 230);--palette-blue-700: oklch(50% 42% 230);--palette-blue-800: oklch(44% 36% 230);--palette-blue-900: oklch(40% 30% 230);--palette-blue-950: oklch(28% 24% 230);--palette-blue-lc-0: oklch(100% 2% 230);--palette-blue-lc-50: oklch(98% 6% 230);--palette-blue-lc-100: oklch(96% 8% 230);--palette-blue-lc-150: oklch(92% 10% 230);--palette-blue-lc-200: oklch(90% 12% 230);--palette-blue-lc-250: oklch(88% 14% 230);--palette-blue-lc-300: oklch(82% 16% 230);--palette-blue-lc-400: oklch(74% 18% 230);--palette-blue-lc-500: oklch(68% 20% 230);--palette-blue-lc-600: oklch(58% 22% 230);--palette-blue-lc-700: oklch(50% 20% 230);--palette-blue-lc-800: oklch(44% 16% 230);--palette-blue-lc-900: oklch(40% 12% 230);--palette-blue-lc-950: oklch(28% 8% 230);--palette-violet-key: oklch(50% 50% 298);--palette-violet-0: oklch(100% 4% 298);--palette-violet-50: oklch(98% 8% 298);--palette-violet-100: oklch(96% 12% 298);--palette-violet-150: oklch(92% 16% 298);--palette-violet-200: oklch(90% 24% 298);--palette-violet-250: oklch(88% 32% 298);--palette-violet-300: oklch(82% 40% 298);--palette-violet-400: oklch(74% 48% 298);--palette-violet-500: oklch(68% 52% 298);--palette-violet-600: oklch(58% 48% 298);--palette-violet-700: oklch(50% 42% 298);--palette-violet-800: oklch(44% 36% 298);--palette-violet-900: oklch(40% 30% 298);--palette-violet-950: oklch(28% 24% 298);--palette-violet-lc-0: oklch(100% 2% 298);--palette-violet-lc-50: oklch(98% 6% 298);--palette-violet-lc-100: oklch(96% 8% 298);--palette-violet-lc-150: oklch(92% 10% 298);--palette-violet-lc-200: oklch(90% 12% 298);--palette-violet-lc-250: oklch(88% 14% 298);--palette-violet-lc-300: oklch(82% 16% 298);--palette-violet-lc-400: oklch(74% 18% 298);--palette-violet-lc-500: oklch(68% 20% 298);--palette-violet-lc-600: oklch(58% 22% 298);--palette-violet-lc-700: oklch(50% 20% 298);--palette-violet-lc-800: oklch(44% 16% 298);--palette-violet-lc-900: oklch(40% 12% 298);--palette-violet-lc-950: oklch(28% 8% 298)}}@layer variables{:root{--color-shade-4: var(--palette-black-4);--color-shade-6: var(--palette-black-6);--color-shade-8: var(--palette-black-8);--color-shade-10: var(--palette-black-10);--color-shade-20: var(--palette-black-20);--color-shade-40: var(--palette-black-40);--color-shade-60: var(--palette-black-60);--color-tint-1: var(--palette-white-4);--color-tint-2: var(--palette-white-6);--color-tint-3: var(--palette-white-8);--color-tint-4: var(--palette-white-10);--color-tint-5: var(--palette-white-20);--color-tint-6: var(--palette-white-40);--color-tint-7: var(--palette-white-60);--color-tint-8: var(--palette-white-80);--color-tint-9: var(--palette-white-90);--color-scrim-4: var(--palette-black-4);--color-scrim-6: var(--palette-black-6);--color-scrim-8: var(--palette-black-8);--color-scrim-10: var(--palette-black-10);--color-scrim-20: var(--palette-black-20);--color-scrim-40: var(--palette-black-40);--color-scrim-60: var(--palette-black-60);--color-overlay-6: var(--palette-white-6);--color-overlay-10: var(--palette-white-10);--color-overlay-20: var(--palette-white-20);--color-overlay-40: var(--palette-white-40);--color-overlay-60: var(--palette-white-60);--color-overlay-80: var(--palette-white-80);--color-overlay-90: var(--palette-white-90);--color-surface-app: var(--palette-neutral-100);--color-surface-raised: var(--palette-neutral-50);--color-surface-inset: var(--palette-neutral-150);--color-surface-border: var(--palette-neutral-200);--color-surface-border-strong: var(--palette-neutral-300);--color-text-primary: var(--palette-neutral-900);--color-text-secondary: var(--palette-neutral-500);--color-text-muted: var(--palette-neutral-400);--color-primary-text: var(--palette-primary-700);--color-primary-text-emphasis: var(--palette-primary-800);--color-primary-text-secondary: var(--palette-primary-500);--color-primary-text-inverted: var(--palette-primary-50);--color-primary-vivid: var(--palette-primary-500);--color-primary-bg: var(--palette-primary-500);--color-primary-bg-subtle: var(--palette-primary-400);--color-primary-border: var(--palette-primary-300);--color-danger-text: var(--palette-danger-700);--color-danger-text-secondary: var(--palette-danger-500);--color-danger-text-inverted: var(--palette-danger-50);--color-danger-vivid: var(--palette-danger-500);--color-danger-bg: var(--palette-danger-500);--color-danger-bg-subtle: var(--palette-danger-400);--color-danger-border: var(--palette-danger-300);--color-caution: var(--palette-yellow-400);--color-note-base-inset-border: var(--palette-primary-0);--color-note-base-bg: var(--palette-primary-100);--color-note-base-bg-selected: var(--palette-primary-150);--color-note-base-border: var(--palette-primary-lc-250);--color-note-base-border-bottom: var(--palette-primary-lc-300);--color-note-base-text-muted: var(--palette-primary-lc-500);--color-note-base-text: var(--palette-primary-800);--color-note-base-swatch: var(--palette-primary-300);--color-note-base-swatch-border: var(--palette-primary-600);--color-note-base-shadow: oklch(from var(--palette-primary-key) l 100% h / .5);--color-note-base-badge: var(--palette-primary-400);--color-note-base-chip-bg: var(--palette-primary-100);--color-note-base-chip-text: var(--palette-primary-800);--color-note-plain-inset-border: var(--palette-plain-lc-0);--color-note-plain-bg: var(--palette-plain-lc-100);--color-note-plain-bg-selected: var(--palette-plain-lc-150);--color-note-plain-border: var(--palette-plain-lc-250);--color-note-plain-border-bottom: var(--palette-plain-lc-300);--color-note-plain-text-muted: var(--palette-plain-lc-500);--color-note-plain-text: var(--palette-plain-lc-800);--color-note-plain-swatch: var(--palette-plain-lc-300);--color-note-plain-swatch-border: var(--palette-plain-lc-600);--color-note-plain-bg-gradient: linear-gradient(to bottom, var(--palette-plain-lc-100), var(--palette-plain-lc-150) 300%);--color-note-plain-shadow: oklch(from var(--palette-plain-key) l 0% h / .5);--color-note-plain-badge: var(--palette-plain-lc-400);--color-note-plain-chip-bg: var(--palette-plain-lc-100);--color-note-plain-chip-text: var(--palette-plain-lc-800);--color-note-red-inset-border: var(--palette-red-0);--color-note-red-bg: var(--palette-red-100);--color-note-red-bg-selected: var(--palette-red-150);--color-note-red-border: var(--palette-red-lc-250);--color-note-red-border-bottom: var(--palette-red-lc-300);--color-note-red-text-muted: var(--palette-red-lc-500);--color-note-red-text: var(--palette-red-800);--color-note-red-swatch: var(--palette-red-300);--color-note-red-swatch-border: var(--palette-red-600);--color-note-red-bg-gradient: linear-gradient(to bottom, var(--palette-red-100), var(--palette-red-150) 300%);--color-note-red-shadow: oklch(from var(--palette-red-key) l 100% h / .5);--color-note-red-badge: var(--palette-red-400);--color-note-red-chip-bg: var(--palette-red-100);--color-note-red-chip-text: var(--palette-red-800);--color-note-orange-inset-border: var(--palette-orange-0);--color-note-orange-bg: var(--palette-orange-100);--color-note-orange-bg-selected: var(--palette-orange-150);--color-note-orange-border: var(--palette-orange-lc-250);--color-note-orange-border-bottom: var(--palette-orange-lc-300);--color-note-orange-text-muted: var(--palette-orange-lc-500);--color-note-orange-text: var(--palette-orange-800);--color-note-orange-swatch: var(--palette-orange-300);--color-note-orange-swatch-border: var(--palette-orange-600);--color-note-orange-bg-gradient: linear-gradient(to bottom, var(--palette-orange-100), var(--palette-orange-150) 300%);--color-note-orange-shadow: oklch(from var(--palette-orange-key) l 100% h / .5);--color-note-orange-badge: var(--palette-orange-400);--color-note-orange-chip-bg: var(--palette-orange-100);--color-note-orange-chip-text: var(--palette-orange-800);--color-note-yellow-inset-border: var(--palette-yellow-0);--color-note-yellow-bg: var(--palette-yellow-100);--color-note-yellow-bg-selected: var(--palette-yellow-150);--color-note-yellow-border: var(--palette-yellow-lc-250);--color-note-yellow-border-bottom: var(--palette-yellow-lc-300);--color-note-yellow-text-muted: var(--palette-yellow-lc-500);--color-note-yellow-text: var(--palette-yellow-800);--color-note-yellow-swatch: var(--palette-yellow-300);--color-note-yellow-swatch-border: var(--palette-yellow-600);--color-note-yellow-bg-gradient: linear-gradient(to bottom, var(--palette-yellow-100), var(--palette-yellow-150) 300%);--color-note-yellow-shadow: oklch(from var(--palette-yellow-key) l 100% h / .5);--color-note-yellow-badge: var(--palette-yellow-400);--color-note-yellow-chip-bg: var(--palette-yellow-100);--color-note-yellow-chip-text: var(--palette-yellow-800);--color-note-green-inset-border: var(--palette-green-0);--color-note-green-bg: var(--palette-green-100);--color-note-green-bg-selected: var(--palette-green-150);--color-note-green-border: var(--palette-green-lc-250);--color-note-green-border-bottom: var(--palette-green-lc-300);--color-note-green-text-muted: var(--palette-green-lc-500);--color-note-green-text: var(--palette-green-800);--color-note-green-swatch: var(--palette-green-300);--color-note-green-swatch-border: var(--palette-green-600);--color-note-green-bg-gradient: linear-gradient(to bottom, var(--palette-green-100), var(--palette-green-150) 300%);--color-note-green-shadow: oklch(from var(--palette-green-key) l 100% h / .5);--color-note-green-badge: var(--palette-green-400);--color-note-green-chip-bg: var(--palette-green-100);--color-note-green-chip-text: var(--palette-green-800);--color-note-blue-inset-border: var(--palette-blue-0);--color-note-blue-bg: var(--palette-blue-100);--color-note-blue-bg-selected: var(--palette-blue-150);--color-note-blue-border: var(--palette-blue-lc-250);--color-note-blue-border-bottom: var(--palette-blue-lc-300);--color-note-blue-text-muted: var(--palette-blue-lc-500);--color-note-blue-text: var(--palette-blue-800);--color-note-blue-swatch: var(--palette-blue-300);--color-note-blue-swatch-border: var(--palette-blue-600);--color-note-blue-bg-gradient: linear-gradient(to bottom, var(--palette-blue-100), var(--palette-blue-150) 300%);--color-note-blue-shadow: oklch(from var(--palette-blue-key) l 100% h / .5);--color-note-blue-badge: var(--palette-blue-400);--color-note-blue-chip-bg: var(--palette-blue-100);--color-note-blue-chip-text: var(--palette-blue-800);--color-note-violet-inset-border: var(--palette-violet-0);--color-note-violet-bg: var(--palette-violet-100);--color-note-violet-bg-selected: var(--palette-violet-150);--color-note-violet-border: var(--palette-violet-lc-250);--color-note-violet-border-bottom: var(--palette-violet-lc-300);--color-note-violet-text-muted: var(--palette-violet-lc-500);--color-note-violet-text: var(--palette-violet-800);--color-note-violet-swatch: var(--palette-violet-300);--color-note-violet-swatch-border: var(--palette-violet-600);--color-note-violet-bg-gradient: linear-gradient(to bottom, var(--palette-violet-100), var(--palette-violet-150) 300%);--color-note-violet-shadow: oklch(from var(--palette-violet-key) l 100% h / .5);--color-note-violet-badge: var(--palette-violet-400);--color-note-violet-chip-bg: var(--palette-violet-100);--color-note-violet-chip-text: var(--palette-violet-800);--color-indicator-neutral: var(--palette-neutral-200);--color-indicator-red: var(--palette-red-200);--color-indicator-orange: var(--palette-orange-200);--color-indicator-yellow: var(--palette-yellow-200);--color-indicator-green: var(--palette-green-200);--color-indicator-blue: var(--palette-blue-200);--color-indicator-violet: var(--palette-violet-200)}:is(html.theme-dark,.theme-dark){--color-tint-1: var(--palette-white-2);--color-tint-2: var(--palette-white-4);--color-tint-3: var(--palette-white-6);--color-tint-4: var(--palette-white-8);--color-tint-5: var(--palette-white-10);--color-tint-6: var(--palette-white-15);--color-tint-7: var(--palette-white-20);--color-tint-8: var(--palette-white-30);--color-tint-9: var(--palette-white-40);--color-scrim-4: var(--palette-white-4);--color-scrim-6: var(--palette-white-6);--color-scrim-8: var(--palette-white-8);--color-scrim-10: var(--palette-white-10);--color-scrim-20: var(--palette-white-20);--color-scrim-40: var(--palette-white-40);--color-scrim-60: var(--palette-white-60);--color-overlay-6: var(--palette-black-6);--color-overlay-10: var(--palette-black-10);--color-overlay-20: var(--palette-black-20);--color-overlay-40: var(--palette-black-40);--color-overlay-60: var(--palette-black-60);--color-overlay-80: var(--palette-black-80);--color-overlay-90: var(--palette-black-90);--color-surface-app: var(--palette-neutral-800);--color-surface-raised: var(--palette-neutral-700);--color-surface-inset: var(--palette-neutral-850);--color-surface-border: var(--palette-neutral-600);--color-surface-border-strong: var(--palette-neutral-500);--color-text-primary: var(--palette-neutral-100);--color-text-secondary: var(--palette-neutral-400);--color-text-muted: var(--palette-neutral-500);--color-primary-text: var(--palette-primary-300);--color-primary-text-secondary: var(--palette-primary-400);--color-primary-text-emphasis: var(--palette-primary-100);--color-primary-vivid: var(--palette-primary-400);--color-primary-bg: var(--palette-primary-800);--color-primary-bg-subtle: var(--palette-primary-700);--color-primary-border: var(--palette-primary-lc-300);--color-danger-text: var(--palette-danger-300);--color-danger-text-secondary: var(--palette-danger-400);--color-danger-vivid: var(--palette-danger-400);--color-danger-bg: var(--palette-danger-800);--color-danger-bg-subtle: var(--palette-danger-700);--color-danger-border: var(--palette-danger-300);--color-caution: var(--palette-yellow-300);--color-note-base-inset-border: var(--palette-primary-lc-500);--color-note-base-bg: var(--palette-primary-lc-800);--color-note-base-bg-selected: var(--palette-primary-800);--color-note-base-border: var(--palette-primary-900);--color-note-base-border-bottom: var(--palette-primary-950);--color-note-base-shadow: var(--palette-primary-900);--color-note-base-text: var(--palette-primary-100);--color-note-base-text-muted: var(--palette-primary-300);--color-note-base-swatch: var(--palette-primary-500);--color-note-base-swatch-border: var(--palette-primary-300);--color-note-base-badge: var(--palette-primary-500);--color-note-base-chip-bg: var(--palette-primary-800);--color-note-base-chip-text: var(--palette-primary-200);--color-note-base-indicator: var(--palette-primary-500);--color-note-plain-text: var(--palette-plain-100);--color-note-plain-text-muted: var(--palette-plain-lc-300);--color-note-plain-swatch: var(--palette-plain-500);--color-note-plain-swatch-border: var(--palette-plain-300);--color-note-plain-badge: var(--palette-plain-500);--color-note-plain-chip-bg: var(--palette-plain-800);--color-note-plain-chip-text: var(--palette-plain-200);--color-note-plain-indicator: var(--palette-plain-500);--color-note-plain-shadow: oklch(from var(--palette-plain-950) l 100% h / .5);--color-note-plain-border: var(--palette-plain-lc-800);--color-note-plain-inset-border: var(--palette-plain-lc-500);--color-note-plain-bg: var(--palette-plain-lc-900);--color-note-plain-bg-selected: var(--palette-plain-lc-700);--color-note-plain-border-bottom: var(--palette-plain-lc-900);--color-note-plain-bg-gradient: linear-gradient(to bottom, var(--palette-plain-lc-600) -100%, var(--palette-plain-lc-700) 100%);--color-note-red-border: var(--palette-red-lc-800);--color-note-red-inset-border: var(--palette-red-lc-500);--color-note-red-bg: var(--palette-red-lc-900);--color-note-red-bg-selected: var(--palette-red-lc-700);--color-note-red-border-bottom: var(--palette-red-lc-900);--color-note-red-bg-gradient: linear-gradient(to bottom, var(--palette-red-lc-600) -100%, var(--palette-red-lc-700) 100%);--color-note-red-text: var(--palette-red-100);--color-note-red-text-muted: var(--palette-red-lc-300);--color-note-red-swatch: var(--palette-red-500);--color-note-red-swatch-border: var(--palette-red-300);--color-note-red-badge: var(--palette-red-500);--color-note-red-chip-bg: var(--palette-red-800);--color-note-red-chip-text: var(--palette-red-200);--color-note-red-indicator: var(--palette-red-500);--color-note-red-shadow: oklch(from var(--palette-red-950) l c h / .5);--color-note-orange-border: var(--palette-orange-lc-800);--color-note-orange-inset-border: var(--palette-orange-lc-500);--color-note-orange-bg: var(--palette-orange-lc-900);--color-note-orange-bg-selected: var(--palette-orange-lc-700);--color-note-orange-border-bottom: var(--palette-orange-lc-900);--color-note-orange-bg-gradient: linear-gradient(to bottom, var(--palette-orange-lc-600) -100%, var(--palette-orange-lc-700) 100%);--color-note-orange-text: var(--palette-orange-100);--color-note-orange-text-muted: var(--palette-orange-lc-300);--color-note-orange-swatch: var(--palette-orange-500);--color-note-orange-swatch-border: var(--palette-orange-300);--color-note-orange-badge: var(--palette-orange-500);--color-note-orange-chip-bg: var(--palette-orange-800);--color-note-orange-chip-text: var(--palette-orange-200);--color-note-orange-indicator: var(--palette-orange-500);--color-note-orange-shadow: oklch(from var(--palette-orange-950) l c h / .5);--color-note-yellow-border: var(--palette-yellow-lc-800);--color-note-yellow-inset-border: var(--palette-yellow-lc-500);--color-note-yellow-bg: var(--palette-yellow-lc-900);--color-note-yellow-bg-selected: var(--palette-yellow-lc-700);--color-note-yellow-border-bottom: var(--palette-yellow-lc-900);--color-note-yellow-bg-gradient: linear-gradient(to bottom, var(--palette-yellow-lc-600) -100%, var(--palette-yellow-lc-700) 100%);--color-note-yellow-text: var(--palette-yellow-100);--color-note-yellow-text-muted: var(--palette-yellow-lc-300);--color-note-yellow-swatch: var(--palette-yellow-500);--color-note-yellow-swatch-border: var(--palette-yellow-300);--color-note-yellow-badge: var(--palette-yellow-500);--color-note-yellow-chip-bg: var(--palette-yellow-800);--color-note-yellow-chip-text: var(--palette-yellow-200);--color-note-yellow-indicator: var(--palette-yellow-500);--color-note-yellow-shadow: oklch(from var(--palette-yellow-950) l c h / .5);--color-note-green-border: var(--palette-green-lc-800);--color-note-green-inset-border: var(--palette-green-lc-500);--color-note-green-bg: var(--palette-green-lc-900);--color-note-green-bg-selected: var(--palette-green-lc-700);--color-note-green-border-bottom: var(--palette-green-lc-900);--color-note-green-bg-gradient: linear-gradient(to bottom, var(--palette-green-lc-600) -100%, var(--palette-green-lc-700) 100%);--color-note-green-text: var(--palette-green-100);--color-note-green-text-muted: var(--palette-green-lc-300);--color-note-green-swatch: var(--palette-green-500);--color-note-green-swatch-border: var(--palette-green-300);--color-note-green-badge: var(--palette-green-500);--color-note-green-chip-bg: var(--palette-green-800);--color-note-green-chip-text: var(--palette-green-200);--color-note-green-indicator: var(--palette-green-500);--color-note-green-shadow: oklch(from var(--palette-green-950) l c h / .5);--color-note-blue-border: var(--palette-blue-lc-800);--color-note-blue-inset-border: var(--palette-blue-lc-500);--color-note-blue-bg: var(--palette-blue-lc-900);--color-note-blue-bg-selected: var(--palette-blue-lc-700);--color-note-blue-border-bottom: var(--palette-blue-lc-900);--color-note-blue-bg-gradient: linear-gradient(to bottom, var(--palette-blue-lc-600) -100%, var(--palette-blue-lc-700) 100%);--color-note-blue-text: var(--palette-blue-100);--color-note-blue-text-muted: var(--palette-blue-lc-300);--color-note-blue-swatch: var(--palette-blue-500);--color-note-blue-swatch-border: var(--palette-blue-300);--color-note-blue-badge: var(--palette-blue-500);--color-note-blue-chip-bg: var(--palette-blue-800);--color-note-blue-chip-text: var(--palette-blue-200);--color-note-blue-indicator: var(--palette-blue-500);--color-note-blue-shadow: oklch(from var(--palette-blue-950) l c h / .5);--color-note-violet-border: var(--palette-violet-lc-800);--color-note-violet-inset-border: var(--palette-violet-lc-500);--color-note-violet-bg: var(--palette-violet-lc-900);--color-note-violet-bg-selected: var(--palette-violet-lc-700);--color-note-violet-border-bottom: var(--palette-violet-lc-900);--color-note-violet-bg-gradient: linear-gradient(to bottom, var(--palette-violet-lc-600) -100%, var(--palette-violet-lc-700) 100%);--color-note-violet-text: var(--palette-violet-100);--color-note-violet-text-muted: var(--palette-violet-lc-300);--color-note-violet-swatch: var(--palette-violet-500);--color-note-violet-swatch-border: var(--palette-violet-300);--color-note-violet-badge: var(--palette-violet-500);--color-note-violet-chip-bg: var(--palette-violet-800);--color-note-violet-chip-text: var(--palette-violet-200);--color-note-violet-indicator: var(--palette-violet-500);--color-note-violet-shadow: oklch(from var(--palette-violet-950) l c h / .5);--color-indicator-neutral: var(--palette-neutral-800);--color-indicator-red: var(--palette-red-800);--color-indicator-orange: var(--palette-orange-800);--color-indicator-yellow: var(--palette-yellow-800);--color-indicator-green: var(--palette-green-800);--color-indicator-blue: var(--palette-blue-800);--color-indicator-violet: var(--palette-violet-800)}}@layer variables{:root{--spacing-page-gutters: 12px;--spacing-note-gutters: 12px;--spacing-subNote-gutters: 7px;--spacing-noteArea-padding: 8px;--radius-note: 16px;--size-noteAnchor: 48px;--size-main-width: 800px;--style-box-shadow-none: 0 0 0 transparent;--style-box-shadow-base: 0 2px 6px var(--color-shade-6);--style-box-shadow-emphasis: 0 2px 2px var(--color-shade-6);--style-overlay-filter: blur(24px);--style-overlayControl-background: var(--color-overlay-40);--style-overlayControl-background-light: var(--color-overlay-20);--style-overlayControl-background-medium: var(--color-overlay-60);--style-overlayControl-background-heavy: var(--color-overlay-90);--style-overlayControl-foreground-active: var(--color-primary-text);--style-overlayControl-background-active: var(--color-primary-vivid);--style-overlayControl-boxShadow: inset 0 1px 0 var(--color-tint-7), inset 0 -1px 0 var(--color-tint-6), inset 1px 0 0 var(--color-tint-5), inset -1px 0 0 var(--color-tint-5), var(--style-box-shadow-base)}}@layer utilities{.utility--stack{display:grid;grid-template-areas:"utility-stack";place-items:center}.utility--stack>*{grid-area:utility-stack}}@layer components{@scope (.app-icon){:scope{display:inline-block;font-weight:300}:scope.size-xxsmall{font-size:12px;font-weight:400}:scope.size-xsmall{font-size:16px;font-weight:400}:scope.size-small{font-size:20px;font-weight:400}:scope.size-regular{font-size:24px}:scope.size-medium{font-size:28px}:scope.size-large{font-size:32px}:scope.flip-v{transform:scaleY(-1)}:scope.rotate-90{transform:scaleY(-1) rotate(90deg)}}}@layer components{@scope (.action-group){:scope{display:inline-flex;align-items:center;justify-content:center;gap:1px;padding:2px;background:var(--color-tint-6);box-shadow:var(--style-box-shadow-base);-webkit-backdrop-filter:var(--style-overlay-filter);backdrop-filter:var(--style-overlay-filter);border-radius:999px}:scope:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;border-radius:inherit;border:solid var(--color-tint-8);border-width:1.5px 1px}:scope.corners-squared{border-radius:14px}:scope.equal-size{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}:scope.vertical{display:flex;flex-direction:column;align-items:stretch;padding:8px 4px;border-radius:16px}:scope.translucency-light{background:var(--color-tint-5)}:scope.translucency-regular{background:var(--color-tint-6)}:scope.translucency-medium{background:var(--color-tint-7)}:scope.translucency-heavy{background:var(--color-tint-8)}}.app-button{isolation:isolate;cursor:pointer;position:relative;flex-shrink:0;display:inline-flex;border-radius:999px;font-weight:500;transition-timing-function:ease-in-out;transition-duration:.15s;transition-property:background,color,border-color,box-shadow,opacity;--min-size: 48px;--spacing: 12px;--gap: var(--spacing);--text-size: 18px;--icon-size: 20px}.app-button:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;border-color:inherit;corner-shape:inherit}.app-button .button-contents{flex-grow:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;text-align:center}.app-button .trailing{display:inline-flex;align-items:center;justify-content:center}.app-button.compound-button{align-items:center;justify-content:center}.app-button .main-button{cursor:pointer}.app-button.checkable:not(.is-selected) .leading-icon{opacity:0}.app-button.treatment-elevated{color:var(--color-text-primary);background:var(--color-tint-6);box-shadow:var(--style-box-shadow-base);-webkit-backdrop-filter:var(--style-overlay-filter);backdrop-filter:var(--style-overlay-filter);border-color:var(--color-tint-8)}.theme-dark .app-button.treatment-elevated{background:var(--color-tint-2);border-color:var(--color-tint-4)}.app-button.treatment-elevated:after{border-style:solid;border-width:1.5px 1.5px}.app-button.treatment-elevated.is-selected{color:var(--color-primary-text);background:var(--color-tint-9);box-shadow:var(--style-box-shadow-base),var(--style-box-shadow-emphasis)}.app-button.treatment-elevated.is-selected:not(.is-disabled):active{background:var(--color-primary-bg-subtle)}.app-button.treatment-elevated.is-selected .app-icon{font-variation-settings:"GRAD" 125}.app-button.treatment-elevated.variant-normal:not(.is-disabled):active{background:var(--color-tint-9)}.theme-dark .app-button.treatment-elevated.variant-normal:not(.is-disabled):active{background:var(--color-tint-7)}.app-button.treatment-elevated.variant-primary{color:var(--color-primary-text-inverted);background:var(--color-primary-bg);border-color:var(--color-primary-border)}.app-button.treatment-elevated.variant-primary:not(.is-disabled):active{background:var(--color-primary-bg-subtle)}.app-button.treatment-elevated.variant-primary:after{inset:1px}.app-button.treatment-elevated.variant-primary.corners-squared:after{border-radius:11px}.app-button.treatment-elevated.variant-danger{color:var(--color-danger-text-inverted);background:var(--color-danger-bg);border-color:var(--color-danger-border)}.app-button.treatment-elevated.variant-danger:after{inset:1px}.app-button.treatment-elevated.variant-danger:not(.is-disabled):active{background:var(--color-danger-bg-subtle)}.app-button.treatment-elevated.variant-rainbow{color:var(--color-primary-text-emphasis);background:linear-gradient(to right,oklch(80% 36% var(--palette-hue-yellow)),oklch(80% 36% var(--palette-hue-green)),oklch(80% 36% var(--palette-hue-blue)),oklch(80% 36% var(--palette-hue-violet)));border-color:var(--color-tint-7)}.app-button.treatment-elevated.variant-rainbow:after{inset:1px;background:var(--palette-white-70)}.app-button.treatment-elevated.variant-rainbow:not(.is-disabled):active{background:linear-gradient(to right,oklch(88% 24% var(--palette-hue-yellow)),oklch(88% 24% var(--palette-hue-green)),oklch(88% 24% var(--palette-hue-blue)),oklch(88% 24% var(--palette-hue-violet)))}.theme-dark .app-button.treatment-elevated.variant-rainbow{background:linear-gradient(to right,oklch(42% 32% var(--palette-hue-yellow)),oklch(42% 32% var(--palette-hue-green)),oklch(42% 32% var(--palette-hue-blue)),oklch(42% 32% var(--palette-hue-violet)))}.theme-dark .app-button.treatment-elevated.variant-rainbow:after{inset:0;background:var(--palette-white-10)}.theme-dark .app-button.treatment-elevated.variant-rainbow:not(.is-disabled):active{background:linear-gradient(to right,oklch(36% 32% var(--palette-hue-yellow)),oklch(36% 32% var(--palette-hue-green)),oklch(36% 32% var(--palette-hue-blue)),oklch(36% 32% var(--palette-hue-violet)))}.app-button.treatment-filled{background:var(--color-surface-border-strong)}.app-button.treatment-filled.variant-primary{background:var(--color-primary-bg)}.app-button.treatment-outlined{color:var(--color-text-primary);background:transparent;box-shadow:none;border-color:var(--color-surface-border-strong)}.app-button.treatment-outlined:after{border-style:solid;border-width:1.5px}.app-button.treatment-outlined:not(.is-disabled):active{background:var(--color-shade-20)}.app-button.treatment-outlined.variant-primary{color:var(--color-primary-vivid);border-color:currentColor}.app-button.treatment-outlined.variant-primary:not(.is-disabled):active{background:var(--color-primary-bg-subtle)}.app-button.treatment-outlined.variant-danger{color:var(--color-danger-text-secondary);border-color:currentColor}.app-button.treatment-outlined.variant-danger:not(.is-disabled):active{background:var(--color-danger-bg-subtle)}.app-button.treatment-flat{background:transparent;border:0px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}.app-button.treatment-flat:not(.is-disabled):active{background:var(--color-shade-6)}.app-button.treatment-flat.variant-primary{color:var(--color-primary-vivid)}.app-button.treatment-flat.variant-primary:not(.is-disabled):active{background:var(--color-primary-bg-subtle)}.app-button.treatment-flat.variant-danger{color:var(--color-danger-text-secondary)}.app-button.treatment-flat.variant-danger:not(.is-disabled):active{background:var(--color-danger-bg-subtle)}.app-button .button-contents{min-height:var(--min-size);padding:0 var(--spacing);gap:var(--gap);font-size:var(--text-size)}.app-button.icon-button .button-contents{min-width:var(--min-size)}.app-button.icon-button .button-contents .leading-icon{margin:0}.app-button .leading-icon{font-size:var(--icon-size);margin-left:calc(-1/4*var(--spacing));margin-right:calc(-1/8*var(--spacing))}.app-button.size-xsmall{--min-size: 24px;--spacing: 8px;--gap: 8px;--text-size: 12px;--icon-size: 20px}.app-button.size-small{--min-size: 36px;--spacing: 12px;--gap: 12px;--text-size: 14px;--icon-size: 24px}.app-button.size-medium{--min-size: 40px;--spacing: 12px;--gap: 12px;--text-size: 16px;--icon-size: 24px}.app-button.size-xmedium{--min-size: 44px;--spacing: 16px;--gap: 12px;--text-size: 18px;--icon-size: 24px}.app-button.size-large{--min-size: 48px;--spacing: 20px;--gap: 12px;--text-size: 18px;--icon-size: 24px}.app-button.size-xlarge{--min-size: 52px;--spacing: 24px;--gap: 12px;--text-size: 18px;--icon-size: 24px}.app-button.size-xlarge .leading-icon{font-weight:400}.app-button.icon-button{border-radius:999px}.app-button.icon-button .button-contents{padding:0}.app-button.icon-button:has(.button-label){border-radius:12px}.app-button.icon-button:has(.button-label) .button-contents{height:auto;padding:8px 12px;flex-direction:column;gap:4px}.app-button.icon-button:has(.button-label) .button-label{font-size:14px;font-weight:400;line-height:normal}.app-button.corners-squared{border-radius:12px}.app-button.justified{--gap: 16px;justify-content:space-between;min-width:max-content;font-weight:400}.app-button.justified .button-label{flex-grow:1;text-align:start;padding-right:8px}.app-button.full-width{flex-grow:1;width:100%}.app-button.true-center .leading-icon{margin-left:calc(-1em - var(--gap))}.app-button.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}@scope (.context-menu-wrapper){:scope.auto-vanish:not(:has(.context-menu.is-visible)){position:fixed;top:0;right:0;width:0;height:0;overflow:clip;contain:strict}:scope.auto-vanish:not(:has(.context-menu.is-visible)) .context-menu{transition:none}.context-menu{position:absolute;z-index:4;margin:8px;transition-property:visibility,transform,display;transition-timing-function:ease-in-out;transition-duration:.2s}.context-menu>*{transition-property:opacity;transition-duration:inherit;transition-timing-function:inherit}.context-menu:not(.is-visible){pointer-events:none;visibility:hidden;transform:translateY(-8px)}.context-menu:not(.is-visible)>*{opacity:0}.context-menu.above{position-area:top center;margin-bottom:-1px}.context-menu.above:not(.is-visible){transform:translateY(-8px)}.context-menu.below{position-area:bottom center;margin-top:-1px}.context-menu.below:not(.is-visible){transform:translateY(10px)}.context-menu.centered{position-area:center center}.context-menu.fixed{position:fixed;z-index:5;position-area:center center;position-anchor:--centered-view-anchor}.menu-label{font-size:13px;font-weight:500;color:var(--color-text-secondary);padding:4px 12px 0}.divider{background:var(--color-shade-4)}.divider.horizontal{height:2px;margin:4px 16px}}}@layer components{@scope (.modal-view) to (.modal-body>*){:scope{position:fixed;z-index:10;pointer-events:auto;width:100%;height:100%;width:100dvw;height:100dvh;padding:24px 6%;overflow-y:auto;position-area:center center;position-anchor:--centered-view-anchor;display:flex;background:var(--color-scrim-20);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition-property:opacity;transition-timing-function:ease;transition-duration:.3s}@starting-style{:scope{opacity:0}}.modal-panel{isolation:isolate;position:relative;margin:auto;flex-grow:1;max-width:400px;background:oklch(from var(--color-surface-raised) l c h / .9);border-radius:16px;padding:24px;box-shadow:var(--style-box-shadow-base);transition-property:opacity,transform;transition-timing-function:ease;transition-duration:.3s;transition-delay:.2s}@starting-style{.modal-panel{opacity:0;transform:translateY(-10px)}}.modal-panel:after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--color-tint-7)}.modal-title{font-size:24px;font-weight:700}.modal-subtitle{font-size:18px;font-weight:500;margin-top:.5em;color:var(--color-text-secondary)}.modal-body{margin-top:16px}.modal-actions{margin-top:32px;display:flex;flex-direction:column;gap:8px}}}@layer components{.toggle{flex-shrink:0;position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--color-text-muted);transition:.25s cubic-bezier(.4,0,.2,1);border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background-color:#fff;transition:.25s cubic-bezier(.4,0,.2,1);border-radius:50%;box-shadow:0 1px 3px var(--color-shade-20)}input:checked+.toggle-slider{background-color:var(--style-overlayControl-background-active)}input:checked+.toggle-slider:before{transform:translate(20px)}input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}}@layer components{.list-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px}.list-item.clickable{cursor:pointer}.list-item .item-leading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.list-item .item-info{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}.list-item .item-title{font-size:16px;font-weight:500}.list-item .item-subtitle{font-size:.75em;color:var(--color-text-secondary);line-height:normal}.list-item .item-trailing{display:flex;align-items:center;gap:8px;flex-shrink:0}.list-item .item-action-wrapper{display:flex;align-items:center;gap:4px;color:var(--color-text-primary)}.list-item .item-action-value{font-size:14px}}@property --progress-percentage{syntax: "<percentage>"; inherits: false; initial-value: 0%;}.root-viewport{isolation:isolate;user-select:none;-webkit-user-select:none;position:absolute;inset:0;width:100%;height:var(--visual-viewport-height, 100dvh);top:var(--visual-viewport-top, 0px);overflow:hidden;transition:opacity .3s .2s linear}@starting-style{.root-viewport{opacity:0}}.root-viewport .dialog-portal{position:absolute;z-index:4;inset:0;pointer-events:none;anchor-name:--centered-view-anchor}.root-viewport .app-window{position:absolute;z-index:1;inset:0;overflow-y:auto;overflow-x:hidden}.root-viewport .app-window:has(.main-app.is-search-mode),.root-viewport .app-window:has(.main-app.is-drag-and-drop),.root-viewport .app-window:has(.main-app.is-drag-and-drop-ready){overflow:hidden}.root-viewport .main-app{position:relative;min-height:100%;display:flex;flex-direction:column}.root-viewport .main-app.is-drag-and-drop-ready,.root-viewport .main-app.is-drag-and-drop{cursor:grab}.root-viewport .page-view{position:relative;z-index:3;flex-grow:1;width:100%;max-width:var(--size-main-width);margin:64px auto 0;overflow:clip;transition:filter .2s ease-out,opacity .2s ease-in}.main-app.is-search-mode :is(.root-viewport .page-view){pointer-events:none;filter:blur(16px);opacity:.4;transition:filter 1.5s ease,opacity .2s linear}.root-viewport .app-top-elements-wrapper{z-index:5;position:sticky;inset:0 0 auto;height:0}.root-viewport .app-top-elements-area{position:absolute;inset:0 0 auto;height:var(--visual-viewport-height, 100dvh);overflow:hidden;display:flex;flex-direction:column;pointer-events:none}.root-viewport .app-top-elements-area>*{pointer-events:auto}.main-app.is-search-mode :is(.root-viewport .app-top-elements-area){pointer-events:auto;overflow-y:auto}.root-viewport .app-search-panel{width:100%;max-width:var(--size-main-width);margin:0 auto 48px;transition:opacity .3s .2s ease,transform .4s .2s ease}.main-app:not(.is-search-mode) :is(.root-viewport .app-search-panel){opacity:0;pointer-events:none;transform:translateY(8px);transition-delay:0s}.root-viewport .app-search-panel .search-message{text-align:center;color:var(--color-text-secondary)}.root-viewport .app-search-panel .search-message.end-of-list{font-size:16px}.root-viewport .app-header-wrapper{position:sticky;top:0;z-index:5}.root-viewport .app-header{display:flex;max-width:var(--size-main-width);margin:0 auto;padding:8px;padding-top:calc(8px + env(safe-area-inset-top));gap:8px}.root-viewport .app-header:before{content:"";position:absolute;pointer-events:none;z-index:-2;inset:0 0 -16px;background:linear-gradient(to bottom,oklch(from var(--color-surface-app) l c h / .8),transparent);-webkit-mask-image:linear-gradient(to bottom,white 60%,hsl(from white h s l / .8) 80%,transparent);mask-image:linear-gradient(to bottom,white 60%,hsl(from white h s l / .8) 80%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.root-viewport .app-header .header-actions>:not(:first-child){margin-left:-6px}.root-viewport .app-header .header-search{flex-grow:1;min-width:48px}.root-viewport .app-header .header-search .input{align-self:stretch;flex-grow:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-left:16px}.root-viewport .app-header .header-search .input::placeholder{color:currentColor;opacity:.4}.root-viewport .app-header .account{position:relative}.root-viewport .app-header .cloud-sync-indicator{pointer-events:none;z-index:4;position:absolute;bottom:8px;right:8px;margin:-4px;padding:3px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.main-app.is-search-mode :is(.root-viewport .app-header .cloud-sync-indicator){opacity:0}.root-viewport .app-header .save-status-indicator{pointer-events:none;z-index:3;position:absolute;top:0;right:0;margin:6px;width:4px;aspect-ratio:1;border-radius:999px;transition:background .1s ease,opacity .1s ease}.root-viewport .app-header .save-status-indicator[data-sync-status=synced],.root-viewport .app-header .save-status-indicator[data-status=saved]{background:var(--color-indicator-green);opacity:0;transition:background .1s ease,opacity 1s .2s ease}.root-viewport .app-header .save-status-indicator[data-status=saving]{background:var(--color-indicator-blue);opacity:1}.root-viewport .app-header .save-status-indicator[data-status=unsaved]{background:var(--color-indicator-violet);opacity:1}.root-viewport .app-header .save-status-indicator[data-status=error]{background:var(--color-indicator-red);opacity:1}.root-viewport .app-header .save-status-indicator[data-sync-status=syncing]{background:var(--color-indicator-blue);opacity:1}.root-viewport .app-header .save-status-indicator[data-sync-status=pending]{background:var(--color-indicator-violet);opacity:1}.root-viewport .app-header .save-status-indicator[data-sync-status=offline]{background:var(--color-indicator-neutral);opacity:1}.root-viewport .app-header .save-status-indicator[data-sync-status=error]{background:var(--color-indicator-red);opacity:1}.root-viewport .app-footer-wrapper{position:sticky;z-index:6;bottom:0;height:0;margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;transition:all .2s .1s ease}.root-viewport.touch-device :is(.root-viewport .app-footer-wrapper):not(.is-active){opacity:0;visibility:hidden;pointer-events:none;transition:none}.root-viewport .app-footer-wrapper .app-footer-inner{position:relative;padding-bottom:env(safe-area-inset-bottom,0);anchor-name:--app-footer-wrapper}.root-viewport .app-footer-wrapper .app-footer-inner:before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:-16px 0 0;background:linear-gradient(to top,oklch(from var(--color-surface-app) l c h / .4),transparent);-webkit-mask-image:linear-gradient(to top,white 60%,hsl(from white h s l / .8) 80%,transparent);mask-image:linear-gradient(to top,white 60%,hsl(from white h s l / .8) 80%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.root-viewport .app-footer-wrapper .pages-bar-wrapper{display:flex;align-items:flex-end;justify-content:center}.root-viewport .app-footer-wrapper .pages-bar-wrapper:has(.pages-bar.is-hidden),.main-app.is-search-mode :is(.root-viewport .app-footer-wrapper .pages-bar-wrapper){height:0;pointer-events:none}:is(.root-viewport .app-footer-wrapper .pages-bar-wrapper:has(.pages-bar.is-hidden),.main-app.is-search-mode :is(.root-viewport .app-footer-wrapper .pages-bar-wrapper)) .page-item{opacity:0;transition-duration:0s}.root-viewport .app-footer-wrapper .pages-bar{--padding-safe: calc(var(--spacing-page-gutters) + env(safe-area-inset-bottom, 0));--padding-unsafe: calc(2 * var(--spacing-page-gutters));overflow-x:auto;display:flex;padding:24px 0;padding-bottom:max(var(--padding-safe),var(--padding-unsafe));transition:margin-bottom .5s ease-in-out}.root-viewport .app-footer-wrapper .pages-bar::-webkit-scrollbar{display:none}.main-app.is-multi-select-mode :is(.root-viewport .app-footer-wrapper .pages-bar){margin-bottom:calc(-1*env(safe-area-inset-bottom,0))}.root-viewport .app-footer-wrapper .pages-bar-inner{flex-shrink:0;display:flex;gap:8px;padding:0 calc(var(--spacing-page-gutters) + 8px)}.root-viewport .app-footer-wrapper .page-item{position:relative;font-weight:400;transition:opacity .3s ease}.root-viewport .app-footer-wrapper .page-item.is-selected{z-index:2;font-variation-settings:"GRAD" 200}.root-viewport .app-footer-wrapper .page-item:not(.is-selected) .trailing{visibility:hidden;pointer-events:none}.root-viewport .app-footer-wrapper .page-item .trailing{margin-left:-24px;margin-right:-8px;color:var(--color-primary-text-inverted)}.page-item.is-selected :is(.root-viewport .app-footer-wrapper .page-item .trailing){anchor-name:--page-menu}.root-viewport .app-footer-wrapper .add-page-button{anchor-name:--add-page-menu}.root-viewport .app-footer-wrapper .multi-select-wrapper-outer{display:grid;grid-template-rows:1fr;overflow:clip;max-width:var(--size-main-width);margin-left:auto;margin-right:auto;margin-bottom:calc(-1*env(safe-area-inset-bottom,0));transition:all .5s ease-in-out;transition-property:grid-template-rows,margin-top}.main-app:not(.is-multi-select-mode) :is(.root-viewport .app-footer-wrapper .multi-select-wrapper-outer){grid-template-rows:0fr}.main-app.is-multi-select-mode :is(.root-viewport .app-footer-wrapper .multi-select-wrapper-outer){margin-top:calc(-1*var(--spacing-page-gutters))}.root-viewport .app-footer-wrapper .multi-select-wrapper-outer .multi-select-wrapper-inner{min-height:0}.root-viewport .app-footer-wrapper .multi-select-toolbar{display:flex;gap:8px;padding:4px;margin:8px;border-radius:100px;margin-bottom:max(8px,env(safe-area-inset-bottom,0));background:var(--style-overlayControl-background-light);box-shadow:var(--style-overlayControl-boxShadow);-webkit-backdrop-filter:var(--style-overlay-filter);backdrop-filter:var(--style-overlay-filter)}.root-viewport .app-footer-wrapper .multi-select-toolbar .counter{font-variant-numeric:tabular-nums}.root-viewport .app-footer-wrapper .multi-select-toolbar .multi-select-actions,.root-viewport .app-footer-wrapper .multi-select-toolbar .action{flex-grow:1}.root-viewport .app-footer-wrapper .multi-select-toolbar .details{padding-left:12px;padding-right:16px;gap:12px;background:var(--color-primary-vivid);color:#fff;font-weight:500}.root-viewport .app-footer-wrapper .multi-select-toolbar .details:after{opacity:.3}.root-viewport .page-menu,.root-viewport .add-page-menu{z-index:7;margin:8px 8px 12px;position-anchor:--page-menu;position-area:top span-all;position-try-fallbacks:top center,top span-left,top span-right;justify-self:anchor-center}:is(.root-viewport .page-menu,.root-viewport .add-page-menu):not(.is-visible){transform:translateY(8px)}.root-viewport .add-page-menu{position-anchor:--add-page-menu;position-area:top span-left;margin:0 0 8px}.root-viewport .rename-input-wrapper{margin:8px 0}.root-viewport .rename-input{width:100%;padding:12px 16px;border-radius:8px;background:var(--color-surface-app);border:2px solid var(--color-surface-border);color:var(--color-text-primary);transition:border-color .2s,box-shadow .2s}.root-viewport .rename-input:focus{border-color:var(--color-primary-vivid);box-shadow:0 0 0 2px var(--color-primary-vivid)}@scope (.toast-notification){:scope{--notification-duration: 5;position:absolute;z-index:10;display:flex;gap:8px;justify-content:space-between;margin:0 24px;padding-left:20px;position-anchor:--app-footer-wrapper;position-area:top center;transition:all .3s ease;transition-property:transform,opacity,visibility}:scope:not(.is-visible){transform:translateY(50%);opacity:0;pointer-events:none;visibility:hidden}.toast-dismiss{position:relative}.progress-indicator{--progress-percentage: 0%;--bar-thickness: 3px;--progress-color: var(--color-shade-6);--track-color: transparent;transition:--progress-percentage 0s linear;z-index:-1;position:absolute;inset:2px;border-radius:999px;background:conic-gradient(var(--progress-color) var(--progress-percentage),var(--track-color) 0);-webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--bar-thickness)),black calc(100% - var(--bar-thickness) + .5px));mask-image:radial-gradient(closest-side,transparent calc(100% - var(--bar-thickness)),black calc(100% - var(--bar-thickness) + .5px))}.progress-indicator.start-timer{--progress-percentage: 100%;transition-duration:calc(1s * var(--notification-duration))}}@scope (.notes-section){:scope:last-of-type{margin-bottom:250px}:scope.bookmarks .notes-list>.note-card>.note-body .note-indicator.bookmarked{display:none}.section-header{display:flex;align-items:center;gap:8px;padding:0 var(--spacing-page-gutters);margin-bottom:var(--spacing-page-gutters);font-size:16px;color:var(--color-text-secondary)}.section-header .section-title{flex-grow:1;color:var(--color-text-secondary)}.section-config-menu{position-area:left span-all}.empty-notes-message{background:var(--color-surface-inset);border-radius:16px;padding:16px 32px;color:var(--color-text-secondary);font-size:14px;font-weight:500;line-height:1.75;text-align:center;box-shadow:inset 0 0 0 1px var(--color-surface-border),0 1px 0 var(--color-overlay-80)}.drop-here-wrapper{height:0}.section-group{display:flex;flex-direction:column;gap:var(--spacing-page-gutters);padding:0 var(--spacing-page-gutters);margin:var(--spacing-page-gutters) 0}.notes-list{margin:var(--spacing-page-gutters) 0 calc(2*var(--spacing-page-gutters));display:flex;flex-direction:column;gap:var(--spacing-note-gutters);padding:0 var(--spacing-page-gutters)}}.edit-note-menu{display:flex;align-items:center;gap:8px}.edit-note-menu .app-button.is-suggested:not(.is-disabled) .app-icon{position:relative;font-weight:500}.edit-note-menu .app-button.is-suggested:not(.is-disabled) .app-icon:after{content:"";position:absolute;z-index:-1;inset:0;margin:-4px;border-radius:8px;background:var(--color-shade-6)}.multi-select-menu{display:flex;flex-direction:column;align-items:center}.multi-select-menu .context-menu-label{z-index:2;height:20px;font-size:12px;font-weight:500;padding:0 10px;margin-bottom:-10px;color:var(--color-shade-60);box-shadow:none}.multi-select-menu .context-menu-label+*{padding-top:12px}.drop-indicator{position:absolute;position:fixed;pointer-events:none;z-index:10}.drop-indicator.bar{height:4px;margin-top:-2px;left:20px;right:20px;background:var(--color-primary-vivid);border-radius:2px;box-shadow:0 0 8px oklch(from var(--color-primary-vivid) l c h / .5)}.drop-indicator.box{border:3px solid var(--color-primary-vivid);border-radius:12px;box-shadow:0 0 8px oklch(from var(--color-primary-vivid) l c h / .5);background:oklch(from var(--color-primary-vivid) l c h / .1)}.drop-indicator.invalid{opacity:.3}.drag-avatar{display:inline-flex;align-items:center;transform:translate3d(-50%,-200%,0);gap:8px;padding:8px 16px;background:var(--color-text-primary);color:#fff;border-radius:24px;box-shadow:var(--style-box-shadow-base);white-space:nowrap;font-size:14px;font-weight:500;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:10;transition:opacity .2s ease}.drag-avatar.is-invalid{opacity:.8}.notes-list{--time-noteLongTransition: .4s;--time-noteShortTransition: .2s;--timing-noteLongTransition: var(--time-noteLongTransition) ease-in-out;--transition-inset: inset var(--time-noteLongTransition) ease-in-out;--transition-margin: margin var(--time-noteLongTransition) ease-in-out;--transition-border-radius: border-radius var(--time-noteLongTransition) ease-in-out;--transition-background: background var(--time-noteLongTransition) ease-in-out;--transition-box-shadow: box-shadow var(--time-noteLongTransition) ease-in-out;--transition-color: color var(--time-noteLongTransition) ease-in-out;--transition-opacity: opacity var(--time-noteLongTransition) ease-in-out}.note-card{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--radius-note) - var(--spacing-noteArea-padding)/2);transition:var(--transition-color),var(--transition-opacity),var(--transition-margin),var(--transition-border-radius)}.note-card:not(.completed-notes:not(.root-note)){z-index:3}.note-card.root-note:not(.completed-notes .note-card),.note-card.is-expanded,.notes-list>.note-card{border-radius:var(--radius-note)}.note-card .note-card.is-expanded:not(.completed-notes){z-index:5}.note-card .note-card.is-expanded:not(.completed-notes):not(:first-of-type,.note-card.is-expanded+.note-card){margin-top:2px}.note-card .note-card.is-expanded:not(.completed-notes):not(:last-of-type){margin-bottom:2px}.note-card:not(.is-expanded) :is(.note-card .note-card){opacity:0}.note-card:not(.is-expanded) :is(.note-card .note-card).completed-notes{opacity:1}.note-card:not(.is-expanded) :is(.note-card .note-card).completed-notes>.note-body{opacity:0}.note-card .note-children-outer{overflow:clip;border-radius:0 0 40px 40px;display:grid;pointer-events:none;grid-template-rows:1fr;margin:calc(-1*(var(--spacing-noteArea-padding))) calc(-1*var(--spacing-page-gutters)) 0;transition:grid-template-rows var(--timing-noteLongTransition)}.note-card:not(.is-expanded)>:is(.note-card .note-children-outer){pointer-events:none;grid-template-rows:0fr}.note-card .note-children-inner{position:relative;pointer-events:auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-subNote-gutters);margin:var(--spacing-noteArea-padding) var(--spacing-page-gutters) 0}.main-app:not(.is-search-mode) .app-search-panel :is(.note-card .note-children-inner){pointer-events:none}.note-card .note-children-inner:not(.note-is-expanded){pointer-events:none}.note-card .note-children-inner:after{content:"";height:0;margin-bottom:calc(var(--spacing-noteArea-padding) - var(--spacing-subNote-gutters) + 1px)}.note-card .note-sticky-header-wrapper,.note-card .sticky-spacer{display:none}@supports (container-type: scroll-state){.note-card .note-sticky-header-wrapper{display:flex;position:sticky;z-index:4;height:0;top:0;margin-bottom:30svh;justify-content:center;align-items:flex-start;container-type:scroll-state}@container scroll-state(stuck: top){.note-card .note-sticky-header-wrapper .note-sticky-header{pointer-events:unset;visibility:unset;opacity:unset;translate:unset;transition-delay:.3s}}.note-card .sticky-spacer{display:block;margin-top:-30svh}}.note-card .note-sticky-header{text-wrap:nowrap;width:100%;max-width:220px;margin:72px 40px 0;padding:4px 16px;border-radius:999px;text-align:center;text-overflow:ellipsis;overflow:hidden;background:var(--note-default-background);box-shadow:0 4px 6px var(--color-shade-10),var(--note-default-box-shadow-borders);font-weight:500;cursor:pointer;pointer-events:none;visibility:hidden;opacity:0;translate:0 -12px;transition:visibility .3s ease,opacity .3s ease,translate .3s ease}.main-app.is-edit-mode :is(.note-card .note-sticky-header){pointer-events:none;visibility:hidden;opacity:0}.note-card .note-body{position:relative;z-index:3;display:flex;padding:0;padding:0 var(--spacing-noteArea-padding);gap:2px;transition:padding var(--timing-noteLongTransition),opacity var(--timing-noteLongTransition);margin-bottom:-200px}.note-card .note-body.note-is-highlighted{anchor-name:--note-multi-select-anchor}.note-card.root-note>:is(.note-card .note-body),.note-card.is-expanded>:is(.note-card .note-body),.notes-list>.note-card>:is(.note-card .note-body){padding-top:4px;padding-bottom:4px}.notes-section.bookmarks .notes-list>.note-card:not(.is-expanded)>:is(.note-card .note-body){padding-top:0;padding-bottom:0}.note-card.completed-notes .root-note:not(.is-expanded)>:is(.note-card .note-body){padding-top:0;padding-bottom:0}.note-card .note-menu-anchor{pointer-events:none;height:200px;bottom:140px}.main-app.is-search-mode :is(.note-card .note-menu-anchor),.root-viewport.touch-device .main-app.is-edit-mode :is(.note-card .note-menu-anchor){bottom:56px}.note-card .note-menu-anchor.note-is-highlighted{anchor-name:--note-menu-anchor;position:sticky}.note-card .note-content{position:relative;display:flow-root;align-self:flex-start;flex-grow:1;min-width:0;padding:calc((var(--size-noteAnchor) - 1lh)/2) 0;padding-right:var(--spacing-noteArea-padding)}.main-app.is-multi-select-mode :is(.note-card .note-content){-webkit-mask-image:linear-gradient(to left,transparent 48px,black 128px);mask-image:linear-gradient(to left,transparent 48px,black 128px)}.note-card .note-textarea{outline:none;position:relative;display:block;align-self:center;white-space:pre-wrap;min-height:1lh}.note-card .note-textarea em{background:oklch(from var(--note-shadow-color) l c h / .2);border-radius:4px}.note-card .note-textarea[contenteditable=plaintext-only]{cursor:auto}.note-card.is-completed :is(.note-card .note-textarea){opacity:.6;font-style:italic}.note-card.is-completed>.note-body>.note-content>:is(.note-card .note-textarea){opacity:.6;font-style:italic;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:-.33em;text-decoration-skip-ink:none}.note-card:is(.is-expanded:not(.completed-notes),.root-note:not(.completed-notes,.completed-notes .root-note,.notes-section.bookmarks .root-note))>.note-body>.note-content>:is(.note-card .note-textarea):first-line{font-variation-settings:"GRAD" 125}.note-card .note-textarea.is-empty:before{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;content:attr(data-placeholder);opacity:.6;text-decoration:inherit;white-space:nowrap;width:100%;text-overflow:ellipsis;overflow:hidden;padding-right:32px}.note-card .show-full{position:absolute;bottom:0;right:0;box-sizing:content-box;height:1lh;padding-bottom:inherit;padding-right:inherit;padding-left:48px;background:var(--note-background-color);border-bottom-right-radius:12px;-webkit-mask-image:linear-gradient(to right,transparent,white 32px);mask-image:linear-gradient(to right,transparent,white 32px)}.note-card .show-full:before{content:attr(data-message);display:flex;align-items:center;height:100%;padding:0 8px;font-size:.8em;font-weight:700;border-radius:1lh;background:var(--color-shade-6)}.note-card .note-handle{width:var(--size-noteAnchor);height:var(--size-noteAnchor);display:flex;flex-shrink:0;align-items:center;justify-content:center;margin-left:var(--anchor-offset)}.note-card .note-handle.expander{position:sticky;top:64px;transition:transform .3s ease-in-out}.note-card.is-expanded>.note-body>:is(.note-card .note-handle.expander){transform:rotate(90deg) scale(1)}.note-card .bullet-icon{width:8px;height:8px;border:1px solid;border-radius:8px;border:none;width:7px;height:7px;background:currentColor;opacity:.2}.note-card .note-indicators-area{float:inline-end;height:1lh;display:flex;align-items:center}.note-card .note-indicators-area:empty{display:none}.note-card .note-indicator{display:flex;justify-content:center;align-items:center;min-height:24px;gap:3px;padding:0 4px;margin-left:8px;border-radius:12px;font-size:12px;font-weight:700;color:var(--note-text-color-light)}.note-card .note-indicator .label{text-box-trim:trim-both;text-box-edge:cap alphabetic}.note-card .note-indicator.completed{padding:0 2px}.note-card .note-indicator.checklist .label{display:flex;gap:2px}.note-card .note-indicator.checklist .element{text-box-trim:inherit;text-box-edge:inherit}.note-card .note-indicator.checklist .element.slash{font-weight:400}.note-card .note-indicator.bookmarked{padding:0 1px}.note-card .note-select{position:absolute;z-index:2;right:0;margin-right:8px;flex-shrink:0;width:48px;height:48px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;border-radius:12px;transition:opacity .2s ease}.note-card .note-select .select-box,.note-card .note-select .select-mark{grid-column:1;grid-row:1;transition:all .2s ease}.note-card .note-select .select-box{width:24px;height:24px;border-radius:4px;border:2px solid}.note-card .note-select .select-mark{opacity:0}.note-card.is-selected>.note-body>.note-select .select-box,.note-card.is-selected>.note-body>.note-select .select-mark{opacity:1}.note-card.is-selected .select-box,.note-card.is-selected .select-mark{opacity:.25}.note-card.is-selected .note-card.is-selected>.note-body>.note-select .select-box{opacity:.25}.note-card.is-selected .note-card.is-selected>.note-body>.note-select .select-mark{opacity:1}.is-drag-and-drop .note-card.is-selected{opacity:.35;transition:opacity .2s ease}.note-card.is-selected-implicit>.note-body>.note-select>.select-box,.note-card.is-selected-implicit>.note-body>.note-select>.select-mark{opacity:.25}.note-card.is-selected-implicit.is-selected>.note-body>.note-select>.select-mark{opacity:1}.note-card.completed-notes>.note-body>.note-content>.note-textarea{display:flex;align-items:center;font-style:italic;opacity:.6;transition:opacity .2s ease}.note-card.completed-notes>.note-body>.note-handle{opacity:.6;transition:opacity .2s ease}.note-card.completed-notes.is-expanded>.note-body .note-textarea,.note-card.completed-notes.is-expanded>.note-body .note-handle{opacity:1}.note-card.completed-notes:not(.root-note):before,.note-card.completed-notes:not(.root-note):after{display:none}.note-card.completed-notes:not(.root-note).is-expanded>.note-body{margin-top:0;padding-top:0}.note-card.completed-notes:not(.root-note).is-expanded>.note-body .horizontal-line{opacity:.2;flex-grow:1}.note-card.completed-notes:not(.root-note)>.note-children-outer>.note-children-inner:after{display:none}.note-card.completed-notes .horizontal-line{flex-grow:0;height:1px;margin-left:16px;border-radius:999px;background:currentColor;opacity:0;transition:all .6s ease}.note-card.completed-notes>.note-children-outer{margin-bottom:calc(-1*var(--spacing-noteArea-padding))}.note-card.completed-notes>.note-children-outer>.note-children-inner{margin-bottom:var(--spacing-noteArea-padding)}.main-app:not(.is-multi-select-mode) .note-card .select-box,.main-app:not(.is-multi-select-mode) .note-card .select-mark{transform:translate(4px)}.main-app:not(.is-multi-select-mode) .note-card .note-select{pointer-events:none;opacity:0;visibility:hidden}@scope (.note-card){:scope{--note-default-background: var(--_note-background-color, var(--color-note-plain-bg));--note-background-color: var(--note-default-background, var(--color-note-plain-bg));--note-background-color-selected: var(--_note-background-color-selected, var(--color-note-plain-bg-selected));--note-border-color: var(--_note-border-color, var(--color-note-plain-border));--note-border-color-bottom: var(--_note-border-color-bottom, var(--color-note-plain-border-bottom));--note-border-inset-color: var(--_note-border-inset-color, var(--color-note-plain-inset-border));--note-shadow-color: var(--_note-shadow-color, var(--color-note-plain-shadow));--note-text-color: var(--_note-text-color, var(--color-note-plain-text));--note-text-color-light: var(--_note-text-color-light, var(--color-note-plain-text-muted));--note-background-gradient: var(--_note-background-gradient, transparent);--note-shadow: 0 4px 12px oklch(from var(--note-shadow-color) l c h / .1);--note-shadow-nested: 0 1px 4px oklch(from var(--note-shadow-color) l c h / .15);--box-shadow-border-top: 0 -1px 0;--box-shadow-border-left: 1px 0 0;--box-shadow-border-right: -1px 0 0;--box-shadow-border-bottom: 0 1px 0;--box-shadow-border-all: 0 0 0 1px;--box-shadow-inset-border-top: inset 0 1px 0;--box-shadow-inset-border-left: inset -1px 0 0;--box-shadow-inset-border-right: inset 1px 0 0;--box-shadow-inset-border-bottom: inset 0 -1px 0;--note-default-box-shadow-borders: var(--box-shadow-border-bottom) var(--note-border-color-bottom), var(--box-shadow-border-all) var(--note-border-color), var(--box-shadow-inset-border-top) var(--note-border-inset-color), var(--box-shadow-inset-border-left) var(--note-border-inset-color), var(--box-shadow-inset-border-right) var(--note-border-inset-color);--note-box-shadow-borders: var(--note-default-box-shadow-borders);--note-box-shadow-borders-selected: var(--box-shadow-border-bottom) var(--note-border-inset-color), var(--box-shadow-border-all) transparent, var(--box-shadow-inset-border-top) var(--note-border-color), var(--box-shadow-inset-border-left) var(--note-border-color), var(--box-shadow-inset-border-right) var(--note-border-color)}:scope{color:var(--note-text-color)}:scope>.note-gradient,:scope:before,:scope:after{content:"";position:absolute;z-index:2;pointer-events:none;inset:0;border-radius:inherit;corner-shape:inherit;--transition-inset: inset var(--time-noteShortTransition) ease-in-out;transition:var(--transition-inset),var(--transition-margin),var(--transition-background),var(--transition-box-shadow),var(--transition-opacity)}:scope>.note-gradient{background:var(--note-background-gradient)}:scope:before{z-index:3;background:var(--note-background-color);box-shadow:var(--note-box-shadow-borders);background:transparent}:scope:after{z-index:1;box-shadow:var(--note-shadow-nested)}:scope .note-card:not(.is-expanded)>.note-gradient,:scope .note-card:not(.is-expanded):before,:scope .note-card:not(.is-expanded):after{inset:0 8px;--transition-inset: inset var(--time-noteShortTransition) calc(var(--time-noteLongTransition) - var(--time-noteShortTransition)) ease-in-out}:is(:scope.is-expanded,:scope.root-note):after{box-shadow:var(--note-shadow)}:scope.is-highlighted{--note-background-color: var(--_note-background-color-selected);--note-box-shadow-borders: var(--note-box-shadow-borders-selected)}:scope.is-highlighted>.note-gradient,:scope.is-highlighted:before,:scope.is-highlighted:after{transition-duration:.2s;margin:0 1px}:scope.is-highlighted:before{background:var(--note-background-color)}:scope.is-highlighted:after{box-shadow:none}}:is(.note-card .note-card.color-inherit,.note-color-plain>.note-card.color-plain,.note-color-red>.note-card.color-red,.note-color-orange>.note-card.color-orange,.note-color-yellow>.note-card.color-yellow,.note-color-green>.note-card.color-green,.note-color-blue>.note-card.color-blue,.note-color-violet>.note-card.color-violet):not(.is-expanded,.is-highlighted,.note-is-highlighted>.note-card,.note-is-highlighted>.note-card.completed-notes>.note-children-outer>.note-children-inner>.note-card)>.note-gradient{opacity:0}:is(.note-card .note-card.color-inherit,.note-color-plain>.note-card.color-plain,.note-color-red>.note-card.color-red,.note-color-orange>.note-card.color-orange,.note-color-yellow>.note-card.color-yellow,.note-color-green>.note-card.color-green,.note-color-blue>.note-card.color-blue,.note-color-violet>.note-card.color-violet):not(.is-expanded,.is-highlighted,.note-is-highlighted>.note-card,.note-is-highlighted>.note-card.completed-notes>.note-children-outer>.note-children-inner>.note-card):before{background:none;box-shadow:none}:is(.note-card .note-card.color-inherit,.note-color-plain>.note-card.color-plain,.note-color-red>.note-card.color-red,.note-color-orange>.note-card.color-orange,.note-color-yellow>.note-card.color-yellow,.note-color-green>.note-card.color-green,.note-color-blue>.note-card.color-blue,.note-color-violet>.note-card.color-violet):not(.is-expanded,.is-highlighted,.note-is-highlighted>.note-card,.note-is-highlighted>.note-card.completed-notes>.note-children-outer>.note-children-inner>.note-card):after{box-shadow:none}@scope (.note-card.color-plain,.root-note.color-inherit){:scope{--_note-background-color: var(--color-note-plain-bg);--_note-background-color-selected: var(--color-note-plain-bg-selected);--_note-border-color: var(--color-note-plain-border);--_note-border-color-bottom: var(--color-note-plain-border-bottom);--_note-border-inset-color: var(--color-note-plain-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-plain-shadow);--_note-text-color: var(--color-note-plain-text);--_note-text-color-light: var(--color-note-plain-text-muted);--_note-background-gradient: var(--color-note-plain-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-plain-shadow)}}@scope (.note-card.color-red){:scope{--_note-background-color: var(--color-note-red-bg);--_note-background-color-selected: var(--color-note-red-bg-selected);--_note-border-color: var(--color-note-red-border);--_note-border-color-bottom: var(--color-note-red-border-bottom);--_note-border-inset-color: var(--color-note-red-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-red-shadow);--_note-text-color: var(--color-note-red-text);--_note-text-color-light: var(--color-note-red-text-muted);--_note-background-gradient: var(--color-note-red-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-red-shadow)}}@scope (.note-card.color-orange){:scope{--_note-background-color: var(--color-note-orange-bg);--_note-background-color-selected: var(--color-note-orange-bg-selected);--_note-border-color: var(--color-note-orange-border);--_note-border-color-bottom: var(--color-note-orange-border-bottom);--_note-border-inset-color: var(--color-note-orange-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-orange-shadow);--_note-text-color: var(--color-note-orange-text);--_note-text-color-light: var(--color-note-orange-text-muted);--_note-background-gradient: var(--color-note-orange-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-orange-shadow)}}@scope (.note-card.color-yellow){:scope{--_note-background-color: var(--color-note-yellow-bg);--_note-background-color-selected: var(--color-note-yellow-bg-selected);--_note-border-color: var(--color-note-yellow-border);--_note-border-color-bottom: var(--color-note-yellow-border-bottom);--_note-border-inset-color: var(--color-note-yellow-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-yellow-shadow);--_note-text-color: var(--color-note-yellow-text);--_note-text-color-light: var(--color-note-yellow-text-muted);--_note-background-gradient: var(--color-note-yellow-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-yellow-shadow)}}@scope (.note-card.color-green){:scope{--_note-background-color: var(--color-note-green-bg);--_note-background-color-selected: var(--color-note-green-bg-selected);--_note-border-color: var(--color-note-green-border);--_note-border-color-bottom: var(--color-note-green-border-bottom);--_note-border-inset-color: var(--color-note-green-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-green-shadow);--_note-text-color: var(--color-note-green-text);--_note-text-color-light: var(--color-note-green-text-muted);--_note-background-gradient: var(--color-note-green-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-green-shadow)}}@scope (.note-card.color-blue){:scope{--_note-background-color: var(--color-note-blue-bg);--_note-background-color-selected: var(--color-note-blue-bg-selected);--_note-border-color: var(--color-note-blue-border);--_note-border-color-bottom: var(--color-note-blue-border-bottom);--_note-border-inset-color: var(--color-note-blue-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-blue-shadow);--_note-text-color: var(--color-note-blue-text);--_note-text-color-light: var(--color-note-blue-text-muted);--_note-background-gradient: var(--color-note-blue-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-blue-shadow)}}@scope (.note-card.color-violet){:scope{--_note-background-color: var(--color-note-violet-bg);--_note-background-color-selected: var(--color-note-violet-bg-selected);--_note-border-color: var(--color-note-violet-border);--_note-border-color-bottom: var(--color-note-violet-border-bottom);--_note-border-inset-color: var(--color-note-violet-inset-border);--_note-border-inset-color_bottom: transparent;--_note-shadow-color: var(--color-note-violet-shadow);--_note-text-color: var(--color-note-violet-text);--_note-text-color-light: var(--color-note-violet-text-muted);--_note-background-gradient: var(--color-note-violet-bg-gradient)}:scope>.note-children-outer>.note-children-inner>.note-card{--_note-shadow-color: var(--color-note-violet-shadow)}}.settings-page{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;overflow-y:auto;background:var(--color-surface-app);text-wrap:pretty;transition:background .4s ease,transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}.settings-page:not(.is-active){transform:translate(80%);opacity:0;pointer-events:none}.settings-page .settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 44px;padding-top:calc(16px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:2;background:oklch(from var(--color-surface-app) l c h / .8);-webkit-mask-image:linear-gradient(to bottom,black 50%,hsl(0 0 0 / .9) 60%,hsl(0 0 0 / .2) 85%,transparent);mask-image:linear-gradient(to bottom,black 50%,hsl(0 0 0 / .9) 60%,hsl(0 0 0 / .2) 85%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .4s ease}.settings-page .settings-title{font-size:22px;font-weight:500}.settings-page .settings-content{flex-grow:1;padding:0 16px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:24px}.settings-page .settings-section{display:flex;flex-direction:column;gap:8px}.settings-page .settings-section .section-header{font-size:12px;font-weight:700;text-transform:uppercase;margin-left:8px;color:var(--color-text-muted)}.settings-page .section-card{border-radius:16px;background:var(--color-surface-raised);box-shadow:var(--style-overlayControl-boxShadow);transition:background .4s ease}.settings-page .section-card .warning-icon{color:#e6a817}.settings-page .settings-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0;font-size:12px;color:var(--color-text-muted)}.modal-panel .delete-data-options{background:var(--color-app-background-inset);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.modal-panel .import-data{font-size:16px;border-radius:12px;background:var(--color-surface-inset);box-shadow:inset 0 0 0 1px var(--color-surface-border-strong)}.modal-panel .datum{padding:8px 12px}.modal-panel .datum-label{font-weight:600;color:var(--color-text-secondary)}.modal-panel .datum-value{font-weight:500;color:var(--color-text-primary)}.modal-panel .datum-value--warning{color:var(--color-caution)}.modal-panel .import-details-summary{display:flex;flex-direction:column;gap:12px;width:100%}.modal-panel .summary-intro{font-size:14px;color:var(--color-text-secondary);margin:0}.modal-panel .summary-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left;background:var(--color-surface-inset);border-radius:12px;overflow:hidden}.modal-panel .summary-table th,.modal-panel .summary-table td{padding:10px 12px}.modal-panel .summary-table th{font-weight:600;color:var(--color-text-secondary);background:var(--style-overlayControl-background);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.modal-panel .summary-table td{border-top:1px solid var(--color-surface-border);color:var(--color-text-primary)}.modal-panel .summary-table .added-val{color:var(--color-note-green-text);font-weight:600}.modal-panel .summary-table .updated-val{color:var(--color-note-blue-text);font-weight:600}.modal-panel .summary-table .skipped-val{color:var(--color-text-muted)}.modal-panel .import-error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 8px}.modal-panel .import-error-message .error-icon{font-size:48px;color:var(--color-danger-vivid)}.modal-panel .import-error-message p{font-size:14px;color:var(--color-text-primary);margin:0}@layer base{html,body{position:relative;inset:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:var(--color-surface-app)}body{font-family:Google Sans,sans-serif;font-weight:400;font-style:normal;font-optical-sizing:auto;font-size:18px;color:var(--color-text-primary)}#root{display:contents}.app-icon{font-family:Material Symbols Rounded;font-weight:300;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}}