/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-divide-x-reverse: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-violet-200: oklch(89.4% .057 293.283);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    --bg-primary: #131418;
    --bg-secondary: #181a1f;
    --bg-card: #1c1e23;
    --bg-hover: #25272d;
    --bg-elevated: #2d3038;
    --bg-popup: #2d3038;
    --bg-popup-hover: #35373f;
    --calendar-picker-surface: #eee;
    --calendar-picker-card: #fff;
    --calendar-picker-text: #404040;
    --calendar-picker-muted: #737373;
    --calendar-picker-border: #00000014;
    --bg-hover-subtle: #ffffff07;
    --electron-auth-bg: #fafafa;
    --electron-auth-symbol: #6b6b6b;
    --border: #ffffff12;
    --border-color: #ffffff12;
    --border-visible: #ffffff1f;
    --border-hover: #fff3;
    --input-bg: var(--bg-card);
    --input-border: var(--border-visible);
    --text-primary: #f0f0f0;
    --text-heading: #e8e8e8;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --icon-color: #a3a3a3;
    --icon-color-active: #f0f0f0;
    --switch-track: #26262a;
    --switch-track-border: #ffffff24;
    --switch-track-border-hover: #ffffff42;
    --switch-track-on: #e6e6e8;
    --switch-thumb: #8a8a90;
    --switch-thumb-on: #17171a;
    --switch-thumb-shadow: #00000080;
    --switch-focus: #ffffff8c;
    --accent: #3f3f46;
    --accent-hover: #52525b;
    --accent-text: #f0f0f0;
    --accent-subtle: #3f3f4620;
    --accent-border: #3f3f4640;
    --reading-marker: #facc1561;
    --reading-marker-strong: #ca8a04d9;
    --reading-marker-text: #facc1547;
    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: var(--accent-hover);
    --btn-primary-text: var(--accent-text);
    --shadow-xs: 0 1px 3px #00000073;
    --shadow-sm: 0 2px 8px #00000073, 0 1px 0 #ffffff0a inset;
    --shadow-md: 0 4px 16px #0000008c, 0 1px 0 #ffffff0d inset;
    --shadow-lg: 0 12px 28px #0000008c, 0 1px 0 #ffffff0f inset;
    --shadow-xl: 0 18px 40px #000000a6, 0 1px 0 #ffffff14 inset;
    --accent-primary: #3f3f46;
    --accent-primary-soft: #232530;
    --accent-success: #9090a8;
    --accent-danger: #9090a8;
    --accent-warning: #9090a8;
    --accent-orange: #9090a8;
    --accent-pink: #9090a8;
    --accent-blue: #3f3f46;
    --accent-purple: #3f3f46;
    --accent-green: #9090a8;
    --accent-yellow: #9090a8;
    --status-operational: #78aa92;
    --status-warning: #c7a36b;
    --status-down: #cb7f72;
    --status-neutral: #9297a3;
    --background: 225 14% 9%;
    --foreground: 0 0% 94%;
    --card: 225 13% 13%;
    --card-foreground: 0 0% 94%;
    --sidebar: 225 14% 9%;
    --border-hsl: 0 0% 100% / .07;
    --input: 0 0% 100% / .1;
    --primary: 240 5% 26%;
    --primary-foreground: 0 0% 94%;
    --secondary: 225 12% 16%;
    --secondary-foreground: 0 0% 94%;
    --accent-hsl: 225 12% 18%;
    --accent-foreground: 0 0% 94%;
    --muted: 225 12% 16%;
    --muted-foreground: 0 0% 64%;
    --destructive: 0 0% 45%;
    --ring: 240 5% 26%;
    --radius: .75rem;
    --sec-bg-dashboard: var(--bg-primary);
    --sec-bg-calendar: var(--bg-primary);
    --sec-bg-notes: var(--bg-primary);
    --sec-bg-courses: var(--bg-primary);
    --sec-bg-chat: var(--bg-primary);
    --sec-bg-flashcards: var(--bg-primary);
    --sec-bg-techniques: var(--bg-primary);
    --sec-bg-settings: var(--bg-primary);
    --sec-veil-techniques: var(--bg-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --sec-veil-techniques: color-mix(in srgb, var(--bg-primary) 96%, var(--bg-secondary));
    }
  }

  :root[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #f5f5f5;
    --bg-card: #fff;
    --bg-hover: #f0f0f0;
    --bg-elevated: #f5f5f5;
    --bg-popup: #fff;
    --bg-popup-hover: #0000000a;
    --calendar-picker-surface: #eee;
    --calendar-picker-card: #fff;
    --calendar-picker-text: #404040;
    --calendar-picker-muted: #737373;
    --calendar-picker-border: #00000014;
    --bg-hover-subtle: #f5f5f5;
    --border: #0000000f;
    --border-color: #0000000f;
    --border-visible: #0000001a;
    --border-hover: #00000029;
    --input-bg: #fff;
    --input-border: var(--border-visible);
    --text-primary: #171717;
    --text-heading: #171717;
    --text-secondary: #525252;
    --text-muted: #a3a3a3;
    --icon-color: #737373;
    --icon-color-active: #171717;
    --switch-track: #e4e4e7;
    --switch-track-border: #0000001f;
    --switch-track-border-hover: #0000003d;
    --switch-track-on: #18181b;
    --switch-thumb: #fff;
    --switch-thumb-on: #fff;
    --switch-thumb-shadow: #0003;
    --switch-focus: #00000073;
    --accent: #18181b;
    --accent-hover: #3f3f46;
    --accent-text: #fff;
    --accent-subtle: #18181b14;
    --accent-border: #18181b2e;
    --reading-marker: #facc1561;
    --reading-marker-strong: #ca8a04d9;
    --reading-marker-text: #facc1573;
    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: var(--accent-hover);
    --btn-primary-text: var(--accent-text);
    --shadow-xs: 0 1px 2px #0000000a;
    --shadow-sm: 0 8px 18px #0000000f;
    --shadow-md: 0 14px 30px #00000014;
    --shadow-lg: 0 18px 38px #0000001a;
    --shadow-xl: 0 24px 48px #0000001f;
    --accent-primary: #18181b;
    --accent-primary-soft: #f5f5f5;
    --accent-success: #1f7a5b;
    --accent-danger: #b2503f;
    --accent-warning: #c08a3e;
    --accent-orange: #c2702f;
    --accent-pink: #b57a83;
    --accent-blue: #18181b;
    --accent-purple: #7a3f6e;
    --accent-green: #1f7a5b;
    --accent-yellow: #c08a3e;
    --status-operational: #1f7a5b;
    --status-warning: #9a681f;
    --status-down: #b2503f;
    --status-neutral: #737373;
    --background: 0 0% 98%;
    --foreground: 0 0% 9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
    --sidebar: 0 0% 98%;
    --border-hsl: 0 0% 0% / .08;
    --input: 0 0% 0% / .08;
    --primary: 240 6% 10%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --accent-hsl: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --destructive: 8 47% 47%;
    --ring: 240 6% 10%;
    --sec-bg-dashboard: #fafafa;
    --sec-bg-calendar: #fafafa;
    --sec-bg-notes: #fafafa;
    --sec-bg-courses: #fafafa;
    --sec-bg-chat: #fafafa;
    --sec-bg-flashcards: #fafafa;
    --sec-bg-techniques: #fafafa;
    --sec-bg-settings: #fafafa;
    --sec-veil-techniques: #fafafa;
  }

  .calendar-page-shell {
    --calendar-frame: var(--bg-primary);
    --calendar-surface: var(--bg-card);
    --calendar-main-border: #ffffff1a;
    --calendar-pill-border: #ffffff61;
    --calendar-pill-hover: #ffffff1a;
    --calendar-sidebar-inset: #262931;
    --calendar-legend-panel-bg: var(--bg-card);
    --calendar-legend-text: #e8eaed;
    --calendar-legend-chevron: #9aa0a6;
    --calendar-legend-checkbox-border: #ffffff47;
    --calendar-legend-row-hover: #ffffff0f;
    --calendar-peer-search-fill: #2a2d34;
    --calendar-peer-search-placeholder: #9aa0a6;
    --calendar-peer-search-icon: #9aa0a6;
    --calendar-peer-search-border: transparent;
    --calendar-grid-line: #ffffff1f;
    --calendar-axis-label: var(--text-secondary);
  }

  :root[data-theme="light"] .calendar-page-shell {
    --calendar-frame: #fafafa;
    --calendar-main-border: #e5e5e5;
    --calendar-pill-border: #e0e0e0;
    --calendar-pill-hover: #f0f0f0;
    --calendar-sidebar-inset: #fff;
    --calendar-legend-panel-bg: #fafafa;
    --calendar-legend-text: #404040;
    --calendar-legend-chevron: #737373;
    --calendar-legend-checkbox-border: #e0e0e0;
    --calendar-legend-row-hover: #0000000a;
    --calendar-peer-search-fill: #fff;
    --calendar-peer-search-placeholder: #a3a3a3;
    --calendar-peer-search-icon: #a3a3a3;
    --calendar-peer-search-border: #e5e5e5;
    --calendar-grid-line: #ebebeb;
    --calendar-axis-label: #525252;
  }

  * {
    box-sizing: border-box;
    border-color: var(--border);
    margin: 0;
    padding: 0;
  }

  html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="light"] body {
    background-image: radial-gradient(circle at 0 0, #4f6b951a, #0000 30%), radial-gradient(circle at 100% 0, #bcc9da29, #0000 24%), linear-gradient(#ffffff94, #fff0);
    background-attachment: fixed;
  }

  html:not([data-theme="light"]) body {
    background-image: radial-gradient(circle at 0 0, #7c6fcd1a, #0000 36%), radial-gradient(circle at 100% 0, #525c821a, #0000 32%), radial-gradient(circle at bottom, #7c6fcd0d, #0000 55%);
    background-attachment: fixed;
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    font-family: Geist, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Bricolage Grotesque, sans-serif;
  }

  h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
  }

  h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
  }

  h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }

  .mono, .font-mono {
    font-family: DM Mono, monospace;
  }

  .requirement-item {
    align-items: center;
    gap: 7px;
    display: flex;
  }

  .requirement-icon {
    width: 15px;
    height: 15px;
    color: var(--accent-text);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
    display: flex;
  }

  .requirement-icon.unmet {
    border: 1.5px solid var(--border);
    background: none;
  }

  .requirement-icon.met {
    background: var(--accent);
    border: 1.5px solid var(--accent);
    transform: scale(1.15);
  }

  .requirement-label {
    font-family: Bricolage Grotesque, sans-serif;
    font-size: 11px;
    line-height: 1;
    transition: color .2s;
  }

  .requirement-label.unmet {
    color: var(--text-muted);
  }

  .requirement-label.met {
    color: var(--text-primary);
  }

  #root {
    background-color: var(--bg-primary);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
  }

  @media (display-mode: standalone) {
    html, body, #root {
      height: 100%;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
    }
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .-inset-3 {
    inset: calc(var(--spacing) * -3);
  }

  .-inset-4 {
    inset: calc(var(--spacing) * -4);
  }

  .-inset-5 {
    inset: calc(var(--spacing) * -5);
  }

  .-inset-6 {
    inset: calc(var(--spacing) * -6);
  }

  .-inset-8 {
    inset: calc(var(--spacing) * -8);
  }

  .-inset-\[150\%\] {
    inset: -150%;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-6 {
    top: calc(var(--spacing) * -6);
  }

  .-top-10 {
    top: calc(var(--spacing) * -10);
  }

  .-top-16 {
    top: calc(var(--spacing) * -16);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-14 {
    top: calc(var(--spacing) * 14);
  }

  .top-16 {
    top: calc(var(--spacing) * 16);
  }

  .top-24 {
    top: calc(var(--spacing) * 24);
  }

  .top-52 {
    top: calc(var(--spacing) * 52);
  }

  .top-\[-10\%\] {
    top: -10%;
  }

  .top-\[-22vh\] {
    top: -22vh;
  }

  .top-\[-34\%\] {
    top: -34%;
  }

  .top-\[-40vh\] {
    top: -40vh;
  }

  .top-\[0\%\] {
    top: 0%;
  }

  .top-\[4vh\] {
    top: 4vh;
  }

  .top-\[6\%\] {
    top: 6%;
  }

  .top-\[8\%\] {
    top: 8%;
  }

  .top-\[12\%\] {
    top: 12%;
  }

  .top-\[17px\] {
    top: 17px;
  }

  .top-\[18\%\] {
    top: 18%;
  }

  .top-\[20\%\] {
    top: 20%;
  }

  .top-\[28\%\] {
    top: 28%;
  }

  .top-\[30\%\] {
    top: 30%;
  }

  .top-\[34\%\] {
    top: 34%;
  }

  .top-\[37\%\] {
    top: 37%;
  }

  .top-\[40\%\] {
    top: 40%;
  }

  .top-\[42\%\] {
    top: 42%;
  }

  .top-\[44\%\] {
    top: 44%;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-\[58\%\] {
    top: 58%;
  }

  .top-\[62\%\] {
    top: 62%;
  }

  .top-\[64\%\] {
    top: 64%;
  }

  .top-\[calc\(100\%\+6px\)\] {
    top: calc(100% + 6px);
  }

  .top-full {
    top: 100%;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-2\.5 {
    right: calc(var(--spacing) * -2.5);
  }

  .-right-4 {
    right: calc(var(--spacing) * -4);
  }

  .-right-5 {
    right: calc(var(--spacing) * -5);
  }

  .-right-6 {
    right: calc(var(--spacing) * -6);
  }

  .-right-10 {
    right: calc(var(--spacing) * -10);
  }

  .-right-16 {
    right: calc(var(--spacing) * -16);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-10 {
    right: calc(var(--spacing) * 10);
  }

  .right-\[-6\%\] {
    right: -6%;
  }

  .right-\[-14\%\] {
    right: -14%;
  }

  .right-\[-20\%\] {
    right: -20%;
  }

  .right-\[3\.25rem\] {
    right: 3.25rem;
  }

  .right-\[4\%\] {
    right: 4%;
  }

  .right-\[8\%\] {
    right: 8%;
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .-bottom-px {
    bottom: -1px;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-0\.5 {
    bottom: calc(var(--spacing) * .5);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }

  .bottom-28 {
    bottom: calc(var(--spacing) * 28);
  }

  .bottom-\[-0\.625rem\] {
    bottom: -.625rem;
  }

  .bottom-\[-6\%\] {
    bottom: -6%;
  }

  .bottom-\[-12\%\] {
    bottom: -12%;
  }

  .bottom-\[8\%\] {
    bottom: 8%;
  }

  .bottom-\[14\%\] {
    bottom: 14%;
  }

  .bottom-\[128px\] {
    bottom: 128px;
  }

  .bottom-full {
    bottom: 100%;
  }

  .-left-4 {
    left: calc(var(--spacing) * -4);
  }

  .-left-5 {
    left: calc(var(--spacing) * -5);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-\[-4\%\] {
    left: -4%;
  }

  .left-\[-12\%\] {
    left: -12%;
  }

  .left-\[-20\%\] {
    left: -20%;
  }

  .left-\[6\%\] {
    left: 6%;
  }

  .left-\[10\%\] {
    left: 10%;
  }

  .left-\[14\%\] {
    left: 14%;
  }

  .left-\[15px\] {
    left: 15px;
  }

  .left-\[17\%\] {
    left: 17%;
  }

  .left-\[18\%\] {
    left: 18%;
  }

  .left-\[20\%\] {
    left: 20%;
  }

  .left-\[38\%\] {
    left: 38%;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .left-\[52\%\] {
    left: 52%;
  }

  .left-\[54\%\] {
    left: 54%;
  }

  .isolate {
    isolation: isolate;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .-z-20 {
    z-index: calc(20 * -1);
  }

  .-z-30 {
    z-index: calc(30 * -1);
  }

  .z-0 {
    z-index: 0;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[30\] {
    z-index: 30;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[70\] {
    z-index: 70;
  }

  .z-\[90\] {
    z-index: 90;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[101\] {
    z-index: 101;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .z-\[120\] {
    z-index: 120;
  }

  .z-\[150\] {
    z-index: 150;
  }

  .z-\[240\] {
    z-index: 240;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .z-\[10001\] {
    z-index: 10001;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-auto {
    margin: auto;
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .mt-auto {
    margin-top: auto;
  }

  .-mr-1 {
    margin-right: calc(var(--spacing) * -1);
  }

  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-14 {
    margin-right: calc(var(--spacing) * 14);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-9 {
    margin-left: calc(var(--spacing) * -9);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-5 {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-\[1\/1\] {
    aspect-ratio: 1;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[14px\] {
    height: 14px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[24vh\] {
    height: 24vh;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[40vh\] {
    height: 40vh;
  }

  .h-\[42px\] {
    height: 42px;
  }

  .h-\[46vh\] {
    height: 46vh;
  }

  .h-\[50vh\] {
    height: 50vh;
  }

  .h-\[52vh\] {
    height: 52vh;
  }

  .h-\[54vh\] {
    height: 54vh;
  }

  .h-\[58vh\] {
    height: 58vh;
  }

  .h-\[62vh\] {
    height: 62vh;
  }

  .h-\[64px\] {
    height: 64px;
  }

  .h-\[72dvh\] {
    height: 72dvh;
  }

  .h-\[75vh\] {
    height: 75vh;
  }

  .h-\[76vh\] {
    height: 76vh;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[95vh\] {
    height: 95vh;
  }

  .h-\[100dvh\] {
    height: 100dvh;
  }

  .h-\[120\%\] {
    height: 120%;
  }

  .h-\[125vh\] {
    height: 125vh;
  }

  .h-\[170\%\] {
    height: 170%;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[420px\] {
    height: 420px;
  }

  .h-\[440px\] {
    height: 440px;
  }

  .h-\[450px\] {
    height: 450px;
  }

  .h-\[500px\] {
    height: 500px;
  }

  .h-\[1050px\] {
    height: 1050px;
  }

  .h-\[1380px\] {
    height: 1380px;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-36 {
    max-height: calc(var(--spacing) * 36);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-44 {
    max-height: calc(var(--spacing) * 44);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-52 {
    max-height: calc(var(--spacing) * 52);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[92dvh\] {
    max-height: 92dvh;
  }

  .max-h-\[92vh\] {
    max-height: 92vh;
  }

  .max-h-\[180px\] {
    max-height: 180px;
  }

  .max-h-\[420px\] {
    max-height: 420px;
  }

  .max-h-\[600px\] {
    max-height: 600px;
  }

  .max-h-\[calc\(100dvh-1rem\)\] {
    max-height: calc(100dvh - 1rem);
  }

  .max-h-\[min\(82vh\,36rem\)\] {
    max-height: min(82vh, 36rem);
  }

  .max-h-\[min\(88dvh\,760px\)\] {
    max-height: min(88dvh, 760px);
  }

  .max-h-\[min\(88vh\,720px\)\] {
    max-height: min(88vh, 720px);
  }

  .max-h-\[min\(88vh\,760px\)\] {
    max-height: min(88vh, 760px);
  }

  .max-h-\[min\(420px\,52vh\)\] {
    max-height: min(420px, 52vh);
  }

  .\!min-h-10 {
    min-height: calc(var(--spacing) * 10) !important;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-44 {
    min-height: calc(var(--spacing) * 44);
  }

  .min-h-72 {
    min-height: calc(var(--spacing) * 72);
  }

  .min-h-\[22rem\] {
    min-height: 22rem;
  }

  .min-h-\[40px\] {
    min-height: 40px;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[52px\] {
    min-height: 52px;
  }

  .min-h-\[58px\] {
    min-height: 58px;
  }

  .min-h-\[64px\] {
    min-height: 64px;
  }

  .min-h-\[68px\] {
    min-height: 68px;
  }

  .min-h-\[72px\] {
    min-height: 72px;
  }

  .min-h-\[76px\] {
    min-height: 76px;
  }

  .min-h-\[100dvh\] {
    min-height: 100dvh;
  }

  .min-h-\[100svh\] {
    min-height: 100svh;
  }

  .min-h-\[108px\] {
    min-height: 108px;
  }

  .min-h-\[128px\] {
    min-height: 128px;
  }

  .min-h-\[140px\] {
    min-height: 140px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[600px\] {
    min-height: 600px;
  }

  .min-h-\[calc\(100dvh-64px\)\] {
    min-height: calc(100dvh - 64px);
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-auto {
    width: auto !important;
  }

  .\!w-full {
    width: 100% !important;
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-60 {
    width: calc(var(--spacing) * 60);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[1\.5px\] {
    width: 1.5px;
  }

  .w-\[2px\] {
    width: 2px;
  }

  .w-\[3px\] {
    width: 3px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[46\%\] {
    width: 46%;
  }

  .w-\[62vh\] {
    width: 62vh;
  }

  .w-\[62vw\] {
    width: 62vw;
  }

  .w-\[64px\] {
    width: 64px;
  }

  .w-\[72vw\] {
    width: 72vw;
  }

  .w-\[75vh\] {
    width: 75vh;
  }

  .w-\[76vh\] {
    width: 76vh;
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[110\%\] {
    width: 110%;
  }

  .w-\[120vw\] {
    width: 120vw;
  }

  .w-\[130vw\] {
    width: 130vw;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[330px\] {
    width: 330px;
  }

  .w-\[1050px\] {
    width: 1050px;
  }

  .w-\[1380px\] {
    width: 1380px;
  }

  .w-\[calc\(100vw-32px\)\] {
    width: calc(100vw - 32px);
  }

  .w-\[min\(92vw\,28rem\)\] {
    width: min(92vw, 28rem);
  }

  .w-\[min\(100\%\,360px\)\] {
    width: min(100%, 360px);
  }

  .w-\[min\(520px\,85\%\)\] {
    width: min(520px, 85%);
  }

  .w-\[min\(690px\,96\%\)\] {
    width: min(690px, 96%);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[7rem\] {
    max-width: 7rem;
  }

  .max-w-\[10rem\] {
    max-width: 10rem;
  }

  .max-w-\[32rem\] {
    max-width: 32rem;
  }

  .max-w-\[42ch\] {
    max-width: 42ch;
  }

  .max-w-\[46rem\] {
    max-width: 46rem;
  }

  .max-w-\[48\%\] {
    max-width: 48%;
  }

  .max-w-\[62ch\] {
    max-width: 62ch;
  }

  .max-w-\[64px\] {
    max-width: 64px;
  }

  .max-w-\[70ch\] {
    max-width: 70ch;
  }

  .max-w-\[72ch\] {
    max-width: 72ch;
  }

  .max-w-\[80\%\] {
    max-width: 80%;
  }

  .max-w-\[84\%\] {
    max-width: 84%;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[360px\] {
    max-width: 360px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[440px\] {
    max-width: 440px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[500px\] {
    max-width: 500px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[600px\] {
    max-width: 600px;
  }

  .max-w-\[640px\] {
    max-width: 640px;
  }

  .max-w-\[760px\] {
    max-width: 760px;
  }

  .max-w-\[880px\] {
    max-width: 880px;
  }

  .max-w-\[1440px\] {
    max-width: 1440px;
  }

  .max-w-\[min\(100vw-24px\,320px\)\] {
    max-width: min(100vw - 24px, 320px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }

  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }

  .min-w-\[10\.5rem\] {
    min-width: 10.5rem;
  }

  .min-w-\[11rem\] {
    min-width: 11rem;
  }

  .min-w-\[12\.5rem\] {
    min-width: 12.5rem;
  }

  .min-w-\[14px\] {
    min-width: 14px;
  }

  .min-w-\[18px\] {
    min-width: 18px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[150px\] {
    min-width: 150px;
  }

  .min-w-\[176px\] {
    min-width: 176px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[188px\] {
    min-width: 188px;
  }

  .min-w-\[240px\] {
    min-width: 240px;
  }

  .min-w-\[260px\] {
    min-width: 260px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .basis-0 {
    flex-basis: calc(var(--spacing) * 0);
  }

  .basis-\[min\(100\%\,12rem\)\] {
    flex-basis: min(100%, 12rem);
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-left {
    transform-origin: 0;
  }

  .origin-top {
    transform-origin: top;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .transform {
    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
  }

  .transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-crosshair {
    cursor: crosshair;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .scroll-mt-4 {
    scroll-margin-top: calc(var(--spacing) * 4);
  }

  .scroll-mt-20 {
    scroll-margin-top: calc(var(--spacing) * 20);
  }

  .scroll-mt-28 {
    scroll-margin-top: calc(var(--spacing) * 28);
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid-cols-\[64px_1fr_40px\] {
    grid-template-columns: 64px 1fr 40px;
  }

  .grid-cols-\[72px_1fr_42px\] {
    grid-template-columns: 72px 1fr 42px;
  }

  .grid-cols-\[160px_1fr\] {
    grid-template-columns: 160px 1fr;
  }

  .grid-cols-\[170px_1fr\] {
    grid-template-columns: 170px 1fr;
  }

  .grid-cols-\[minmax\(220px\,1fr\)_minmax\(180px\,\.8fr\)_130px\] {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr) 130px;
  }

  .grid-cols-\[minmax\(230px\,1\.25fr\)_minmax\(150px\,\.75fr\)_minmax\(130px\,\.65fr\)_104px\] {
    grid-template-columns: minmax(230px, 1.25fr) minmax(150px, .75fr) minmax(130px, .65fr) 104px;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }

  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-7 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-\[var\(--border-visible\)\] > :not(:last-child)) {
    border-color: var(--border-visible);
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-clip {
    overflow-x: clip;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overflow-y-visible {
    overflow-y: visible;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .overscroll-none {
    overscroll-behavior: none;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[0\.9rem\] {
    border-radius: .9rem;
  }

  .rounded-\[0\.95rem\] {
    border-radius: .95rem;
  }

  .rounded-\[1\.2rem\] {
    border-radius: 1.2rem;
  }

  .rounded-\[1\.4rem\] {
    border-radius: 1.4rem;
  }

  .rounded-\[1\.5rem\] {
    border-radius: 1.5rem;
  }

  .rounded-\[1\.6rem\] {
    border-radius: 1.6rem;
  }

  .rounded-\[1\.25rem\] {
    border-radius: 1.25rem;
  }

  .rounded-\[1\.45rem\] {
    border-radius: 1.45rem;
  }

  .rounded-\[1\.55rem\] {
    border-radius: 1.55rem;
  }

  .rounded-\[1\.75rem\] {
    border-radius: 1.75rem;
  }

  .rounded-\[1rem\] {
    border-radius: 1rem;
  }

  .rounded-\[2\.2rem\] {
    border-radius: 2.2rem;
  }

  .rounded-\[2\.4rem\] {
    border-radius: 2.4rem;
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[5px\] {
    border-radius: 5px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[7px\] {
    border-radius: 7px;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[calc\(1\.5rem-1\.5px\)\] {
    border-radius: calc(1.5rem - 1.5px);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius) - 2px);
  }

  .rounded-sm {
    border-radius: calc(var(--radius) - 4px);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }

  .rounded-t-\[28px\] {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  .rounded-l-xl {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .rounded-tl-md {
    border-top-left-radius: calc(var(--radius) - 2px);
  }

  .rounded-tl-sm {
    border-top-left-radius: calc(var(--radius) - 4px);
  }

  .rounded-b-none {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rounded-b-sm {
    border-bottom-right-radius: calc(var(--radius) - 4px);
    border-bottom-left-radius: calc(var(--radius) - 4px);
  }

  .rounded-br-md {
    border-bottom-right-radius: calc(var(--radius) - 2px);
  }

  .rounded-br-sm {
    border-bottom-right-radius: calc(var(--radius) - 4px);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-\[\#1EAEDB\] {
    border-color: #1eaedb;
  }

  .border-\[\#8B5CF6\] {
    border-color: #8b5cf6;
  }

  .border-\[\#F59E0B\] {
    border-color: #f59e0b;
  }

  .border-\[rgba\(255\,255\,255\,0\.2\)\] {
    border-color: #fff3;
  }

  .border-\[var\(--bg-hover\)\] {
    border-color: var(--bg-hover);
  }

  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }

  .border-\[var\(--border-color\)\] {
    border-color: var(--border-color);
  }

  .border-\[var\(--border-visible\)\] {
    border-color: var(--border-visible);
  }

  .border-\[var\(--calendar-grid-line\)\] {
    border-color: var(--calendar-grid-line);
  }

  .border-\[var\(--calendar-main-border\)\] {
    border-color: var(--calendar-main-border);
  }

  .border-\[var\(--text-primary\)\] {
    border-color: var(--text-primary);
  }

  .border-\[var\(--text-secondary\)\] {
    border-color: var(--text-secondary);
  }

  .border-current\/30 {
    border-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-current\/30 {
      border-color: color-mix(in oklab, currentcolor 30%, transparent);
    }
  }

  .border-input {
    border-color: hsl(var(--input));
  }

  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }

  .border-neutral-900 {
    border-color: var(--color-neutral-900);
  }

  .border-red-500\/70 {
    border-color: #fb2c36b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/70 {
      border-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-violet-500 {
    border-color: var(--color-violet-500);
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-t-current {
    border-top-color: currentColor;
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-t-white {
    border-top-color: var(--color-white);
  }

  .bg-\[\#1EAEDB\]\/15 {
    background-color: oklab(70.0624% -.0892656 -.0920612 / .15);
  }

  .bg-\[\#8B5CF6\]\/15 {
    background-color: oklab(60.5631% .0845415 -.201932 / .15);
  }

  .bg-\[\#9aa0a6\] {
    background-color: #9aa0a6;
  }

  .bg-\[\#F59E0B\]\/15 {
    background-color: oklab(76.8591% .0560995 .154808 / .15);
  }

  .bg-\[hsl\(222\,47\%\,11\%\)\] {
    background-color: #0f1729;
  }

  .bg-\[hsl\(222\,47\%\,13\%\)\] {
    background-color: #121b31;
  }

  .bg-\[hsl\(222\,47\%\,16\%\)\] {
    background-color: #16213c;
  }

  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }

  .bg-\[var\(--bg-card\)\] {
    background-color: var(--bg-card);
  }

  .bg-\[var\(--bg-hover\)\] {
    background-color: var(--bg-hover);
  }

  .bg-\[var\(--bg-primary\)\] {
    background-color: var(--bg-primary);
  }

  .bg-\[var\(--border\)\] {
    background-color: var(--border);
  }

  .bg-\[var\(--border-visible\)\] {
    background-color: var(--border-visible);
  }

  .bg-\[var\(--calendar-grid-line\)\] {
    background-color: var(--calendar-grid-line);
  }

  .bg-\[var\(--text-primary\)\] {
    background-color: var(--text-primary);
  }

  .bg-\[var\(--text-secondary\)\] {
    background-color: var(--text-secondary);
  }

  .bg-background {
    background-color: hsl(var(--background));
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/70 {
    background-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .bg-destructive {
    background-color: hsl(var(--destructive));
  }

  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }

  .bg-green-400 {
    background-color: var(--color-green-400);
  }

  .bg-green-400\/70 {
    background-color: #05df72b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-400\/70 {
      background-color: color-mix(in oklab, var(--color-green-400) 70%, transparent);
    }
  }

  .bg-green-500\/20 {
    background-color: #00c75833;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/20 {
      background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }

  .bg-neutral-950 {
    background-color: var(--color-neutral-950);
  }

  .bg-neutral-950\/55 {
    background-color: #0a0a0a8c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-950\/55 {
      background-color: color-mix(in oklab, var(--color-neutral-950) 55%, transparent);
    }
  }

  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .bg-red-400\/70 {
    background-color: #ff6568b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-400\/70 {
      background-color: color-mix(in oklab, var(--color-red-400) 70%, transparent);
    }
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-500\/15 {
    background-color: #fb2c3626;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/15 {
      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
    }
  }

  .bg-red-500\/20 {
    background-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .bg-red-500\/30 {
    background-color: #fb2c364d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/30 {
      background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-secondary {
    background-color: hsl(var(--secondary));
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/95 {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .bg-yellow-400\/70 {
    background-color: #fac800b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-400\/70 {
      background-color: color-mix(in oklab, var(--color-yellow-400) 70%, transparent);
    }
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[radial-gradient\(125\%_125\%_at_50\%_101\%\,rgba\(245\,87\,2\,1\)_10\.5\%\,rgba\(245\,120\,2\,1\)_16\%\,rgba\(245\,140\,2\,1\)_17\.5\%\,rgba\(245\,170\,100\,1\)_25\%\,rgba\(238\,174\,202\,1\)_40\%\,rgba\(202\,179\,214\,1\)_65\%\,rgba\(148\,201\,233\,1\)_100\%\)\] {
    background-image: radial-gradient(125% 125% at 50% 101%, #f55702 10.5%, #f57802 16%, #f58c02 17.5%, #f5aa64 25%, #eeaeca 40%, #cab3d6 65%, #94c9e9 100%);
  }

  .bg-\[radial-gradient\(140\%_120\%_at_50\%_0\%\,transparent_60\%\,rgba\(0\,0\,0\,0\.85\)\)\] {
    background-image: radial-gradient(140% 120% at 50% 0, #0000 60%, #000000d9);
  }

  .from-black {
    --tw-gradient-from: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-black\/90 {
    --tw-gradient-via: #000000e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-black\/90 {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }

  .via-black\/90 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .fill-\[var\(--accent-text\)\] {
    fill: var(--accent-text);
  }

  .fill-\[var\(--text-primary\)\] {
    fill: var(--text-primary);
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-\[1\.5px\] {
    padding: 1.5px;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-\[2px\] {
    padding-inline: 2px;
  }

  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-9 {
    padding-block: calc(var(--spacing) * 9);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-28 {
    padding-block: calc(var(--spacing) * 28);
  }

  .py-\[3px\] {
    padding-block: 3px;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }

  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }

  .pt-\[calc\(env\(safe-area-inset-top\)\+var\(--mobile-chrome-inset\,10px\)\+56px\)\] {
    padding-top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px) + 56px);
  }

  .pr-0\.5 {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-11 {
    padding-right: calc(var(--spacing) * 11);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-40 {
    padding-bottom: calc(var(--spacing) * 40);
  }

  .pb-\[max\(24px\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .pb-px {
    padding-bottom: 1px;
  }

  .pl-0\.5 {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-16 {
    padding-left: calc(var(--spacing) * 16);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-bottom {
    vertical-align: bottom;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[13px\] {
    font-size: 13px !important;
  }

  .text-\[1\.1rem\] {
    font-size: 1.1rem;
  }

  .text-\[1\.65rem\] {
    font-size: 1.65rem;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10\.5px\] {
    font-size: 10.5px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13\.5px\] {
    font-size: 13.5px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[17px\] {
    font-size: 17px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[19px\] {
    font-size: 19px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[24px\] {
    font-size: 24px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-\[14px\] {
    --tw-leading: 14px;
    line-height: 14px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .\!font-semibold {
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.01em\] {
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
  }

  .tracking-\[-0\.02em\] {
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
  }

  .tracking-\[-0\.03em\] {
    --tw-tracking: -.03em;
    letter-spacing: -.03em;
  }

  .tracking-\[-0\.04em\] {
    --tw-tracking: -.04em;
    letter-spacing: -.04em;
  }

  .tracking-\[-0\.025em\] {
    --tw-tracking: -.025em;
    letter-spacing: -.025em;
  }

  .tracking-\[-0\.035em\] {
    --tw-tracking: -.035em;
    letter-spacing: -.035em;
  }

  .tracking-\[0\.01em\] {
    --tw-tracking: .01em;
    letter-spacing: .01em;
  }

  .tracking-\[0\.1em\] {
    --tw-tracking: .1em;
    letter-spacing: .1em;
  }

  .tracking-\[0\.02em\] {
    --tw-tracking: .02em;
    letter-spacing: .02em;
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.005em\] {
    --tw-tracking: .005em;
    letter-spacing: .005em;
  }

  .tracking-\[0\.05em\] {
    --tw-tracking: .05em;
    letter-spacing: .05em;
  }

  .tracking-\[0\.06em\] {
    --tw-tracking: .06em;
    letter-spacing: .06em;
  }

  .tracking-\[0\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-\[0\.13em\] {
    --tw-tracking: .13em;
    letter-spacing: .13em;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.45em\] {
    --tw-tracking: .45em;
    letter-spacing: .45em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-\[\#1EAEDB\] {
    color: #1eaedb;
  }

  .text-\[\#3c4043\] {
    color: #3c4043;
  }

  .text-\[\#8B5CF6\] {
    color: #8b5cf6;
  }

  .text-\[\#F59E0B\] {
    color: #f59e0b;
  }

  .text-\[var\(--accent-text\)\] {
    color: var(--accent-text);
  }

  .text-\[var\(--text-muted\)\] {
    color: var(--text-muted);
  }

  .text-\[var\(--text-primary\)\] {
    color: var(--text-primary);
  }

  .text-\[var\(--text-secondary\)\] {
    color: var(--text-secondary);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-current {
    color: currentColor;
  }

  .text-destructive-foreground {
    color: hsl(var(--primary-foreground));
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-inherit {
    color: inherit;
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-neutral-500 {
    color: var(--color-neutral-500);
  }

  .text-neutral-600 {
    color: var(--color-neutral-600);
  }

  .text-neutral-700 {
    color: var(--color-neutral-700);
  }

  .text-neutral-800 {
    color: var(--color-neutral-800);
  }

  .text-neutral-900 {
    color: var(--color-neutral-900);
  }

  .text-neutral-950 {
    color: var(--color-neutral-950);
  }

  .text-primary {
    color: hsl(var(--primary));
  }

  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-400\/90 {
    color: #ff6568e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/90 {
      color: color-mix(in oklab, var(--color-red-400) 90%, transparent);
    }
  }

  .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
  }

  .text-sky-400 {
    color: var(--color-sky-400);
  }

  .text-violet-200 {
    color: var(--color-violet-200);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/35 {
    color: #ffffff59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/35 {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .placeholder-\[var\(--text-secondary\)\]::placeholder {
    color: var(--text-secondary);
  }

  .accent-\[var\(--accent\)\] {
    accent-color: var(--accent);
  }

  .accent-blue-500 {
    accent-color: var(--color-blue-500);
  }

  .accent-violet-500 {
    accent-color: var(--color-violet-500);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .mix-blend-screen {
    mix-blend-mode: screen;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.25\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(60\,64\,67\,0\.3\)\,0_2px_6px_2px_rgba\(60\,64\,67\,0\.15\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #3c40434d), 0 2px 6px 2px var(--tw-shadow-color, #3c404326);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_14px_rgba\(0\,0\,0\,0\.07\)\] {
    --tw-shadow: 0 4px 14px var(--tw-shadow-color, #00000012);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_-1px_0_rgba\(0\,0\,0\,0\.12\)\,0_1px_1px_rgba\(0\,0\,0\,0\.08\)\] {
    --tw-shadow: inset 0 -1px 0 var(--tw-shadow-color, #0000001f), 0 1px 1px var(--tw-shadow-color, #00000014);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_1px_rgba\(0\,0\,0\,0\.11\)\,0_1px_1px_rgba\(0\,0\,0\,0\.06\)\] {
    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0000001c), 0 1px 1px var(--tw-shadow-color, #0000000f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_1px_rgba\(0\,0\,0\,0\.18\)\] {
    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0000002e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-sm\)\] {
    --tw-shadow: var(--shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-white\/10 {
    --tw-ring-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-white\/10 {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .blur-md {
    --tw-blur: blur(var(--blur-md));
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .drop-shadow-\[0_1px_1px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #00000073));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .filter {
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\] {
    transition-property: background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,color\,transform\] {
    transition-property: background-color, color, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,transform\,opacity\] {
    transition-property: background-color, transform, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\,background-color\] {
    transition-property: border-color, box-shadow, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[box-shadow\,border-color\] {
    transition-property: box-shadow, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[box-shadow\] {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,background-color\,border-color\] {
    transition-property: transform, background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[analytics\:opt-in\] {
    analytics: opt-in;
  }

  .group-focus-within\/sidebar-section\:opacity-100:is(:where(.group\/sidebar-section):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:-translate-y-0\.5:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:opacity-80:is(:where(.group):hover *) {
      opacity: .8;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/sidebar-section\:opacity-100:is(:where(.group\/sidebar-section):hover *) {
      opacity: 1;
    }
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .placeholder\:text-\[color\:var\(--calendar-peer-search-placeholder\)\]::placeholder {
    color: var(--calendar-peer-search-placeholder);
  }

  .placeholder\:text-\[var\(--text-muted\)\]::placeholder {
    color: var(--text-muted);
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .odd\:bg-transparent:nth-child(odd) {
    background-color: #0000;
  }

  .focus-within\:border-\[var\(--accent\)\]:focus-within {
    border-color: var(--accent);
  }

  .focus-within\:shadow-\[inset_0_-2px_0_0_var\(--accent\)\]:focus-within {
    --tw-shadow: inset 0 -2px 0 0 var(--tw-shadow-color, var(--accent));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-\[var\(--accent\)\]:focus-within {
    --tw-ring-color: var(--accent);
  }

  .focus-within\:ring-offset-2:focus-within {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-within\:ring-offset-\[var\(--bg-card\)\]:focus-within {
    --tw-ring-offset-color: var(--bg-card);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-px:hover {
      --tw-translate-y: -1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:border-\[var\(--accent-border\)\]:hover {
      border-color: var(--accent-border);
    }

    .hover\:border-\[var\(--text-primary\)\]:hover {
      border-color: var(--text-primary);
    }

    .hover\:border-neutral-300:hover {
      border-color: var(--color-neutral-300);
    }

    .hover\:border-red-400\/40:hover {
      border-color: #ff656866;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-red-400\/40:hover {
        border-color: color-mix(in oklab, var(--color-red-400) 40%, transparent);
      }
    }

    .hover\:border-violet-500\/50:hover {
      border-color: #8d54ff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-violet-500\/50:hover {
        border-color: color-mix(in oklab, var(--color-violet-500) 50%, transparent);
      }
    }

    .hover\:border-white\/40:hover {
      border-color: #fff6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/40:hover {
        border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
      }
    }

    .hover\:bg-\[hsl\(217\,33\%\,28\%\)\]:hover {
      background-color: #30425f;
    }

    .hover\:bg-\[var\(--accent-hover\)\]:hover {
      background-color: var(--accent-hover);
    }

    .hover\:bg-\[var\(--bg-elevated\)\]:hover {
      background-color: var(--bg-elevated);
    }

    .hover\:bg-\[var\(--bg-hover\)\]:hover {
      background-color: var(--bg-hover);
    }

    .hover\:bg-\[var\(--btn-primary-bg-hover\)\]:hover {
      background-color: var(--btn-primary-bg-hover);
    }

    .hover\:bg-accent:hover {
      background-color: hsl(var(--accent-hsl));
    }

    .hover\:bg-destructive\/90:hover {
      background-color: hsl(var(--destructive));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, hsl(var(--destructive)) 90%, transparent);
      }
    }

    .hover\:bg-green-500:hover {
      background-color: var(--color-green-500);
    }

    .hover\:bg-neutral-50:hover {
      background-color: var(--color-neutral-50);
    }

    .hover\:bg-neutral-800:hover {
      background-color: var(--color-neutral-800);
    }

    .hover\:bg-primary\/90:hover {
      background-color: hsl(var(--primary));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, hsl(var(--primary)) 90%, transparent);
      }
    }

    .hover\:bg-red-400:hover {
      background-color: var(--color-red-400);
    }

    .hover\:bg-red-500:hover {
      background-color: var(--color-red-500);
    }

    .hover\:bg-secondary\/80:hover {
      background-color: hsl(var(--secondary));
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, hsl(var(--secondary)) 80%, transparent);
      }
    }

    .hover\:bg-violet-500:hover {
      background-color: var(--color-violet-500);
    }

    .hover\:bg-white\/90:hover {
      background-color: #ffffffe6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/90:hover {
        background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
      }
    }

    .hover\:text-\[var\(--accent\)\]:hover {
      color: var(--accent);
    }

    .hover\:text-\[var\(--text-primary\)\]:hover {
      color: var(--text-primary);
    }

    .hover\:text-\[var\(--text-secondary\)\]:hover {
      color: var(--text-secondary);
    }

    .hover\:text-accent-foreground:hover {
      color: hsl(var(--accent-foreground));
    }

    .hover\:text-neutral-900:hover {
      color: var(--color-neutral-900);
    }

    .hover\:text-red-400:hover {
      color: var(--color-red-400);
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:text-white\/60:hover {
      color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/60:hover {
        color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-60:hover {
      opacity: .6;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-85:hover {
      opacity: .85;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-95:hover {
      opacity: .95;
    }
  }

  .focus\:not-sr-only:focus {
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .focus\:fixed:focus {
    position: fixed;
  }

  .focus\:top-4:focus {
    top: calc(var(--spacing) * 4);
  }

  .focus\:left-4:focus {
    left: calc(var(--spacing) * 4);
  }

  .focus\:z-50:focus {
    z-index: 50;
  }

  .focus\:rounded-full:focus {
    border-radius: 3.40282e38px;
  }

  .focus\:border-\[var\(--accent\)\]:focus {
    border-color: var(--accent);
  }

  .focus\:border-\[var\(--border-visible\)\]:focus {
    border-color: var(--border-visible);
  }

  .focus\:border-violet-500:focus {
    border-color: var(--color-violet-500);
  }

  .focus\:px-4:focus {
    padding-inline: calc(var(--spacing) * 4);
  }

  .focus\:py-2:focus {
    padding-block: calc(var(--spacing) * 2);
  }

  .focus\:text-sm:focus {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .focus\:shadow-\[0_0_0_3px_var\(--accent-subtle\)\]:focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--accent-subtle));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .focus-visible\:ring-0:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[var\(--accent\)\]:focus-visible {
    --tw-ring-color: var(--accent);
  }

  .focus-visible\:ring-\[var\(--ring\)\]:focus-visible {
    --tw-ring-color: var(--ring);
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--ring));
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-\[var\(--bg-card\)\]:focus-visible {
    --tw-ring-offset-color: var(--bg-card);
  }

  .focus-visible\:ring-offset-\[var\(--calendar-frame\)\]:focus-visible {
    --tw-ring-offset-color: var(--calendar-frame);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:translate-y-0:active {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-\[0\.94\]:active {
    scale: .94;
  }

  .active\:scale-\[0\.95\]:active {
    scale: .95;
  }

  .active\:scale-\[0\.96\]:active {
    scale: .96;
  }

  .active\:scale-\[0\.97\]:active {
    scale: .97;
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .active\:scale-\[0\.99\]:active {
    scale: .99;
  }

  .active\:opacity-60:active {
    opacity: .6;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-default:disabled {
    cursor: default;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:cursor-wait:disabled {
    cursor: wait;
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-35:disabled {
    opacity: .35;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-45:disabled {
    opacity: .45;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-55:disabled {
    opacity: .55;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-65:disabled {
    opacity: .65;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  .data-\[state\=checked\]\:bg-neutral-900[data-state="checked"] {
    background-color: var(--color-neutral-900);
  }

  .data-\[state\=unchecked\]\:bg-neutral-200[data-state="unchecked"] {
    background-color: var(--color-neutral-200);
  }

  @media (min-width: 40rem) {
    .sm\:right-3 {
      right: calc(var(--spacing) * 3);
    }

    .sm\:left-3 {
      left: calc(var(--spacing) * 3);
    }

    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .sm\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }

    .sm\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:grid {
      display: grid;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-auto {
      height: auto;
    }

    .sm\:max-h-\[85vh\] {
      max-height: 85vh;
    }

    .sm\:max-h-\[calc\(100dvh-3rem\)\] {
      max-height: calc(100dvh - 3rem);
    }

    .sm\:min-h-\[56px\] {
      min-height: 56px;
    }

    .sm\:\!w-auto {
      width: auto !important;
    }

    .sm\:w-96 {
      width: calc(var(--spacing) * 96);
    }

    .sm\:w-\[min\(90vw\,40rem\)\] {
      width: min(90vw, 40rem);
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-\[55\%\] {
      max-width: 55%;
    }

    .sm\:max-w-xl {
      max-width: var(--container-xl);
    }

    .sm\:min-w-\[11\.5rem\] {
      min-width: 11.5rem;
    }

    .sm\:flex-none {
      flex: none;
    }

    .sm\:shrink-0 {
      flex-shrink: 0;
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[1\.2fr_0\.8fr\] {
      grid-template-columns: 1.2fr .8fr;
    }

    .sm\:grid-cols-\[1fr_1fr_auto\] {
      grid-template-columns: 1fr 1fr auto;
    }

    .sm\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }

    .sm\:grid-cols-\[minmax\(0\,1\.6fr\)_minmax\(0\,1\.3fr\)_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .sm\:grid-cols-\[minmax\(220px\,1fr\)_minmax\(180px\,\.8fr\)_130px\] {
      grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr) 130px;
    }

    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:items-start {
      align-items: flex-start;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-center {
      justify-content: center;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:justify-start {
      justify-content: flex-start;
    }

    .sm\:gap-1 {
      gap: calc(var(--spacing) * 1);
    }

    .sm\:gap-1\.5 {
      gap: calc(var(--spacing) * 1.5);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    :where(.sm\:divide-x > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }

    :where(.sm\:divide-y-0 > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(0px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    }

    .sm\:justify-self-end {
      justify-self: flex-end;
    }

    .sm\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }

    .sm\:rounded-\[28px\] {
      border-radius: 28px;
    }

    .sm\:border {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .sm\:px-3\.5 {
      padding-inline: calc(var(--spacing) * 3.5);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .sm\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }

    .sm\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .sm\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }

    .sm\:pr-10 {
      padding-right: calc(var(--spacing) * 10);
    }

    .sm\:pb-7 {
      padding-bottom: calc(var(--spacing) * 7);
    }

    .sm\:pl-\[4\.5rem\] {
      padding-left: 4.5rem;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-\[15px\] {
      font-size: 15px;
    }

    .sm\:opacity-0 {
      opacity: 0;
    }

    .sm\:group-focus-within\/card\:opacity-100:is(:where(.group\/card):focus-within *) {
      opacity: 1;
    }

    @media (hover: hover) {
      .sm\:group-hover\/card\:opacity-100:is(:where(.group\/card):hover *) {
        opacity: 1;
      }
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }

    .md\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:h-\[min\(780px\,90vh\)\] {
      height: min(780px, 90vh);
    }

    .md\:max-w-\[800px\] {
      max-width: 800px;
    }

    .md\:max-w-\[1040px\] {
      max-width: 1040px;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:gap-7 {
      gap: calc(var(--spacing) * 7);
    }

    .md\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }

    .md\:rounded-\[1\.7rem\] {
      border-radius: 1.7rem;
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .md\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .md\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .md\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .md\:pt-0 {
      padding-top: calc(var(--spacing) * 0);
    }

    .md\:pt-1\.5 {
      padding-top: calc(var(--spacing) * 1.5);
    }

    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .md\:pt-24 {
      padding-top: calc(var(--spacing) * 24);
    }

    .md\:pt-40 {
      padding-top: calc(var(--spacing) * 40);
    }

    .md\:pr-4 {
      padding-right: calc(var(--spacing) * 4);
    }

    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .md\:pb-10 {
      padding-bottom: calc(var(--spacing) * 10);
    }

    .md\:pb-24 {
      padding-bottom: calc(var(--spacing) * 24);
    }

    .md\:pl-3 {
      padding-left: calc(var(--spacing) * 3);
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .md\:text-\[15px\] {
      font-size: 15px;
    }

    .md\:text-\[17px\] {
      font-size: 17px;
    }

    .md\:text-\[18px\] {
      font-size: 18px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }

    .lg\:top-4 {
      top: calc(var(--spacing) * 4);
    }

    .lg\:order-1 {
      order: 1;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:mt-1 {
      margin-top: calc(var(--spacing) * 1);
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:grid {
      display: grid;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[0\.95fr_1\.05fr\] {
      grid-template-columns: .95fr 1.05fr;
    }

    .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
      grid-template-columns: 1.1fr .9fr;
    }

    .lg\:grid-cols-\[1\.04fr_1fr\] {
      grid-template-columns: 1.04fr 1fr;
    }

    .lg\:grid-cols-\[1\.4fr_0\.6fr\] {
      grid-template-columns: 1.4fr .6fr;
    }

    .lg\:grid-cols-\[1\.05fr_1fr\] {
      grid-template-columns: 1.05fr 1fr;
    }

    .lg\:grid-cols-\[1fr_280px\] {
      grid-template-columns: 1fr 280px;
    }

    .lg\:grid-cols-\[260px_1fr\] {
      grid-template-columns: 260px 1fr;
    }

    .lg\:grid-cols-\[minmax\(0\,1\.25fr\)_minmax\(280px\,0\.75fr\)\] {
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] {
      grid-template-columns: minmax(0, 1fr) 320px;
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_340px\] {
      grid-template-columns: minmax(0, 1fr) 340px;
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
      grid-template-columns: minmax(0, 1fr) 360px;
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(300px\,0\.7fr\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
    }

    .lg\:grid-cols-\[minmax\(230px\,1\.25fr\)_minmax\(150px\,\.75fr\)_minmax\(130px\,\.65fr\)_104px\] {
      grid-template-columns: minmax(230px, 1.25fr) minmax(150px, .75fr) minmax(130px, .65fr) 104px;
    }

    .lg\:flex-col {
      flex-direction: column;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:items-start {
      align-items: flex-start;
    }

    .lg\:justify-center {
      justify-content: center;
    }

    .lg\:self-start {
      align-self: flex-start;
    }

    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:px-11 {
      padding-inline: calc(var(--spacing) * 11);
    }

    .lg\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .lg\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .lg\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .lg\:text-right {
      text-align: right;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[1\.25fr_0\.75fr\] {
      grid-template-columns: 1.25fr .75fr;
    }

    .xl\:grid-cols-\[minmax\(0\,1\.28fr\)_minmax\(360px\,\.72fr\)\] {
      grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-\[\#5f6368\] {
      background-color: #5f6368;
    }

    .dark\:text-\[\#e8eaed\] {
      color: #e8eaed;
    }

    .dark\:shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.45\)\] {
      --tw-shadow: 0 2px 12px var(--tw-shadow-color, #00000073);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .dark\:shadow-\[inset_0_-1px_0_rgba\(0\,0\,0\,0\.25\)\,0_1px_2px_rgba\(0\,0\,0\,0\.35\)\] {
      --tw-shadow: inset 0 -1px 0 var(--tw-shadow-color, #00000040), 0 1px 2px var(--tw-shadow-color, #00000059);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .dark\:shadow-\[inset_0_0_0_1px_rgba\(255\,255\,255\,0\.14\)\,0_1px_2px_rgba\(0\,0\,0\,0\.35\)\] {
      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #ffffff24), 0 1px 2px var(--tw-shadow-color, #00000059);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .\[\&_\.app-select-label\]\:overflow-visible .app-select-label {
    overflow: visible;
  }

  .\[\&_\.app-select-label\]\:whitespace-nowrap .app-select-label {
    white-space: nowrap;
  }
}

.norex-switch {
  border: 1px solid var(--switch-track-border);
  background-color: var(--switch-track);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  padding: 0;
  transition: background-color .18s, border-color .18s;
  display: inline-flex;
  position: relative;
}

.norex-switch:after {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

.norex-switch:hover:not(:disabled) {
  border-color: var(--switch-track-border-hover);
}

.norex-switch[data-state="checked"] {
  border-color: var(--switch-track-on);
  background-color: var(--switch-track-on);
}

.norex-switch__thumb {
  background-color: var(--switch-thumb);
  width: 18px;
  height: 18px;
  box-shadow: 0 1px 2px var(--switch-thumb-shadow);
  pointer-events: none;
  border: 0;
  border-radius: 999px;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), background-color .18s;
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translate(0, -50%);
}

.norex-switch[data-state="checked"] .norex-switch__thumb {
  background-color: var(--switch-thumb-on);
  transform: translate(18px, -50%);
}

.norex-switch:active:not(:disabled) .norex-switch__thumb {
  transform: translate(0, -50%)scale(.92);
}

.norex-switch[data-state="checked"]:active:not(:disabled) .norex-switch__thumb {
  transform: translate(18px, -50%)scale(.92);
}

.norex-switch:focus-visible {
  outline: 2px solid var(--switch-focus);
  outline-offset: 2px;
}

.norex-switch:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.apple-glass-close {
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: 0 0 44px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .18s, transform .18s cubic-bezier(.22, 1, .36, 1);
  display: inline-flex;
  position: relative;
}

.apple-glass-close.absolute {
  position: absolute;
}

.apple-glass-close:before {
  z-index: -1;
  border: 1px solid var(--text-primary);
  position: absolute;
  inset: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:before {
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, var(--border-visible));
  }
}

.apple-glass-close:before {
  border-radius: inherit;
  background: linear-gradient(145deg, var(--bg-elevated), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:before {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 56%, transparent), color-mix(in srgb, var(--bg-card) 72%, transparent));
  }
}

.apple-glass-close:before {
  box-shadow: inset 0 1px 0 var(--text-primary), inset 0 -1px 0 var(--bg-primary), 0 5px 16px var(--bg-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:before {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 20%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--bg-primary) 20%, transparent), 0 5px 16px color-mix(in srgb, var(--bg-primary) 24%, transparent);
  }
}

.apple-glass-close:before {
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  content: "";
  transition: inset .18s cubic-bezier(.22, 1, .36, 1), background .18s, border-color .18s, box-shadow .18s;
}

.apple-glass-close:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}

.apple-glass-close:hover:before {
  border-color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:hover:before {
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--border-visible));
  }
}

.apple-glass-close:hover:before {
  background: linear-gradient(145deg, var(--bg-hover), var(--bg-elevated));
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:hover:before {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-hover) 76%, transparent), color-mix(in srgb, var(--bg-elevated) 72%, transparent));
  }
}

.apple-glass-close:hover:before {
  box-shadow: inset 0 1px 0 var(--text-primary), 0 7px 20px var(--bg-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:hover:before {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 28%, transparent), 0 7px 20px color-mix(in srgb, var(--bg-primary) 28%, transparent);
  }
}

.apple-glass-close:active {
  transform: scale(.94);
}

.apple-glass-close:active:before {
  inset: 5px;
}

.apple-glass-close:focus-visible {
  outline: 2px solid var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .apple-glass-close:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 76%, var(--text-primary));
  }
}

.apple-glass-close:focus-visible {
  outline-offset: 1px;
}

.apple-glass-close > svg {
  z-index: 1;
  stroke-width: 1.8px;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .norex-switch, .norex-switch__thumb, .apple-glass-close, .apple-glass-close:before {
    transition-duration: .01ms;
  }
}

.download-modal-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}

.download-modal-hero {
  padding: 40px 44px 32px;
}

@media (max-width: 640px) {
  .download-modal-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .download-modal-hero {
    padding: 32px 24px 24px;
  }
}

.titlebar-drag {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}

body.electron-windows {
  --electron-titlebar-height: 0px;
  --win-caption-height: 40px;
}

body.electron-windows #root {
  box-sizing: border-box;
  padding-top: var(--electron-titlebar-height);
}

.electron-titlebar {
  z-index: 10000;
  height: var(--electron-titlebar-height, 30px);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0 0 auto;
}

.electron-titlebar__identity {
  letter-spacing: .005em;
  align-items: center;
  min-width: 0;
  padding-left: 12px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.electron-titlebar__controls {
  align-self: stretch;
  display: flex;
}

.electron-titlebar__button {
  width: 42px;
  height: 100%;
  color: var(--text-secondary);
  cursor: default;
  background-color: #0000;
  border: 0;
  place-items: center;
  transition: background-color .12s, color .12s;
  display: grid;
}

.electron-titlebar__button:hover, .electron-titlebar__button:focus-visible {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.electron-titlebar__button:focus-visible {
  outline: 1px solid var(--border-hover);
  outline-offset: -2px;
}

.electron-titlebar__button--close:hover, .electron-titlebar__button--close:focus-visible {
  background-color: hsl(var(--destructive));
  color: var(--bg-primary);
}

.electron-titlebar__button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.1px;
  width: 11px;
  height: 11px;
}

@media (hover: none), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]):not([type="hidden"]), textarea, select, [contenteditable="true"], [contenteditable=""] {
    line-height: 1.4;
    font-size: 16px !important;
  }

  input::placeholder, textarea::placeholder {
    font-size: 16px !important;
  }
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--accent) var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  * {
    scrollbar-color: color-mix(in srgb, var(--accent) 38%, var(--text-muted)) color-mix(in srgb, var(--bg-hover) 88%, transparent);
  }
}

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

::-webkit-scrollbar-track {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  }
}

::-webkit-scrollbar-track {
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 88%, var(--accent)), color-mix(in srgb, var(--accent) 72%, var(--text-muted)));
  }
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg-hover);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-thumb {
    border: 2px solid color-mix(in srgb, var(--bg-hover) 92%, transparent);
  }
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
}

@supports (color: color-mix(in lab, red, red)) {
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 96%, white), color-mix(in srgb, var(--accent) 88%, var(--accent-hover)));
  }
}

.chat-sidebar-conversations-scroll {
  scrollbar-width: none;
  overflow-y: auto;
}

.chat-sidebar-conversations-scroll--overflow {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-sidebar-conversations-scroll--overflow {
    scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
  }
}

.chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar {
  width: 4px;
}

.chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-track {
  background: none;
}

.chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 38%, transparent);
  }
}

.chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-thumb {
  border-radius: 99px;
}

.chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-sidebar-conversations-scroll--overflow::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 58%, transparent);
  }
}

.sidebar-row-more-btn {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color .15s, color .15s, opacity .15s;
  display: flex;
}

.sidebar-row-more-btn:hover, .sidebar-row-more-btn.is-open {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.sidebar-row-more-btn:hover svg {
  stroke-width: 2.35px;
}

.chat-sidebar-row {
  box-sizing: border-box;
  background: none;
  border: 1px solid #0000;
  padding-right: 26px;
  transition: background-color .18s, border-color .18s, box-shadow .18s, -webkit-backdrop-filter .18s, backdrop-filter .18s;
  position: relative;
}

.chat-sidebar-row:hover:not(.is-active) {
  background: var(--bg-hover-subtle);
}

.chat-sidebar-row.is-active {
  background: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-sidebar-row.is-active {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

.chat-sidebar-row.is-active {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  border-color: #0000;
}

:root[data-theme="light"] .chat-sidebar-row.is-active {
  background: var(--bg-hover);
}

.chat-sidebar-row--project {
  padding-right: 50px;
}

.chat-sidebar-row__label {
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  overflow: hidden;
}

.chat-sidebar-row__label--chat {
  font-weight: 400;
}

.chat-sidebar-row__title {
  white-space: nowrap;
  letter-spacing: -.01em;
  min-width: 0;
  color: var(--text-primary);
  flex: 1;
  font-weight: 400;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), #0000);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), #0000);
}

.chat-sidebar-row.is-active .chat-sidebar-row__title {
  color: var(--text-primary);
}

.chat-sidebar-row--mobile-list {
  width: 100%;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding-left: 16px;
  padding-right: 14px;
  display: flex;
}

.chat-sidebar-row--mobile-list:hover:not(.is-active), .chat-sidebar-row--mobile-list.is-active {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  background: none;
  border-color: #0000;
}

.chat-sidebar-row--mobile-list.is-active .chat-sidebar-row__mobile-title {
  color: var(--text-primary);
  font-weight: 650;
}

.chat-sidebar-row__mobile-body {
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  display: flex;
}

.chat-sidebar-row__mobile-copy {
  text-align: left;
  flex-direction: column;
  flex: auto;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.chat-sidebar-row__mobile-title {
  max-width: 100%;
  color: var(--text-primary);
  letter-spacing: -.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  display: inline-flex;
  overflow: hidden;
}

:root[data-theme="light"] .chat-sidebar-row__mobile-title, :root[data-theme="light"] .chat-sidebar-row__title {
  color: #0a0a0a;
}

.chat-sidebar-row__mobile-meta {
  color: var(--text-muted);
  letter-spacing: .005em;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.chat-sidebar-row__mobile-arrow {
  color: var(--text-muted);
  opacity: .75;
}

.chat-sidebar-nav-btn {
  background: none;
  border: 1px solid #0000;
  transition: background-color .18s, border-color .18s, box-shadow .18s, -webkit-backdrop-filter .18s, backdrop-filter .18s;
}

.chat-sidebar-nav-btn:hover:not(.is-active) {
  background: var(--bg-hover-subtle);
}

.chat-sidebar-nav-btn.is-active {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  background: none;
  border-color: #0000;
}

.chat-sidebar-row__more {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.chat-sidebar-row__new-chat {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
}

.chat-welcome-greeting {
  max-width: 18ch;
  color: var(--text-primary);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
  font-family: Bricolage Grotesque, system-ui, -apple-system, sans-serif;
  font-size: clamp(1.95rem, 4.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}

.chat-welcome-shell {
  flex-direction: column;
  flex: auto;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.chat-welcome-middle {
  flex-direction: column;
  flex: auto;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 16px 16px 12px;
  display: flex;
  overflow: hidden;
}

.chat-welcome-hero {
  max-width: 100%;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s;
}

.chat-welcome-composer {
  background: var(--bg-primary);
  flex: none;
  width: 100%;
  padding-bottom: 0;
  scroll-margin: 0;
}

.chat-welcome-composer textarea, .chat-welcome-composer input {
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

@media (max-width: 767px) {
  html.chat-welcome-active .chat-welcome-shell {
    z-index: 50;
    box-sizing: border-box;
    padding-top: var(--mobile-chrome-clearance);
    background: var(--sec-bg-chat, var(--bg-primary));
    top: var(--vv-top, 0px) !important;
    left: var(--vv-left, 0px) !important;
    width: var(--vv-width, 100%) !important;
    height: var(--vv-height, 100dvh) !important;
    max-height: var(--vv-height, 100dvh) !important;
    position: fixed !important;
    bottom: auto !important;
    right: auto !important;
  }

  .chat-welcome-middle {
    padding: 8px 16px;
  }

  .chat-welcome-composer {
    background: var(--sec-bg-chat, var(--bg-primary));
    padding-bottom: 0;
  }

  .chat-welcome-shell[data-keyboard="1"] .chat-welcome-logo {
    width: 36px;
    height: 36px;
  }

  .chat-welcome-shell[data-keyboard="1"] .chat-welcome-greeting {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }

  .chat-welcome-shell[data-keyboard="1"] .chat-welcome-hero {
    gap: .7rem;
  }

  .chat-welcome-shell[data-keyboard="1"] .chat-welcome-composer {
    padding-bottom: 0;
  }

  html.chat-welcome-active .mobile-chrome {
    z-index: var(--z-mobile-chrome);
    top: 0;
    left: 0;
    right: 0;
    position: fixed !important;
  }

  html.chat-welcome-active .mobile-section-float-head, html.chat-welcome-active .mobile-chat-actions-pill {
    position: fixed !important;
  }

  html.chat-welcome-active, html.chat-welcome-active body, html.chat-welcome-active #root {
    overscroll-behavior: none;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
  }

  html.chat-welcome-active .app-content--mobile {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
}

.mini-calendar-sidebar-scroll {
  box-sizing: border-box;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--border);
  width: calc(100% + 10px);
  margin-right: -10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll {
    scrollbar-color: color-mix(in srgb, var(--border) 58%, transparent) color-mix(in srgb, var(--border) 16%, transparent);
  }
}

.mini-calendar-sidebar-scroll:hover {
  scrollbar-color: var(--border) var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll:hover {
    scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) color-mix(in srgb, var(--border) 24%, transparent);
  }
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar {
  width: 10px;
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-track {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--border) 14%, transparent);
  }
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-track {
  border-radius: 5px;
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: block;
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 52%, transparent);
  }
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 2px solid #0000;
  border-radius: 5px;
  transition: background .15s;
}

.mini-calendar-sidebar-scroll:hover::-webkit-scrollbar-thumb {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 72%, transparent);
  }
}

.mini-calendar-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-calendar-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  }
}

.mini-month-popover-root {
  pointer-events: auto;
  position: fixed;
  inset: 0;
}

.mini-month-popover-backdrop {
  pointer-events: auto;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  background: none;
  position: absolute;
  inset: 0;
}

.mini-month-popover {
  pointer-events: auto;
  border: 1px solid var(--border-visible);
  background: var(--bg-popup);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  border-radius: 1rem;
  padding: 1rem;
}

.mini-month-popover--full-width {
  border: 1px solid var(--border-visible);
  box-shadow: var(--shadow-lg);
  border-radius: 1rem;
  padding: 1rem 1rem 1.125rem;
}

.mini-month-popover--full-width .mini-month-days {
  column-gap: 0;
  width: 100%;
}

.mini-month-popover--full-width .mini-month-day {
  aspect-ratio: 1;
  max-width: none;
  min-height: 2.75rem;
  margin: 0;
  width: 100% !important;
  height: auto !important;
}

.mini-month-popover--full-width .mini-month-day-num {
  font-size: .875rem;
}

.mini-month-popover--full-width .mini-month-title {
  font-size: .9375rem;
}

.mini-month-grid {
  -webkit-user-select: none;
  user-select: none;
}

.mini-month-header {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .875rem;
  padding: 0 .125rem;
  display: flex;
}

.mini-month-title {
  letter-spacing: -.01em;
  min-width: 0;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
}

.mini-month-title-btn {
  min-width: 0;
  max-width: 100%;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  border: none;
  border-radius: 0;
  align-items: center;
  gap: .2rem;
  margin: 0;
  padding: .15rem 0;
  display: inline-flex;
  background: none !important;
}

.mini-month-title-btn:hover, .mini-month-title-btn:focus-visible, .mini-month-title-btn:active {
  box-shadow: none;
  outline: none;
  background: none !important;
}

.mini-month-grid--wheel-open .mini-month-title-btn, .mini-month-grid--wheel-open .mini-month-title {
  background: none !important;
}

.mini-month-title-btn .mini-month-title {
  flex: 0 auto;
}

.mini-month-title-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .15s, transform .2s cubic-bezier(.22, 1, .36, 1);
  transform: rotate(-90deg);
}

.mini-month-title-chevron--open {
  transform: rotate(0);
}

.mini-month-title-btn:hover .mini-month-title-chevron, .mini-month-title-btn:focus-visible .mini-month-title-chevron {
  color: var(--text-primary);
}

.my-wheel-inline {
  width: 100%;
  min-width: 0;
}

.my-wheel-frame {
  background: none;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.my-wheel-frame--inline {
  width: 100%;
  margin: 0;
}

.my-wheel-cols {
  z-index: 1;
  grid-template-columns: 1.45fr 1fr;
  min-width: 0;
  height: 100%;
  display: grid;
  position: relative;
}

.my-wheel-cols--year-month {
  grid-template-columns: 1fr 1.45fr;
}

.my-wheel-selection {
  pointer-events: none;
  z-index: 2;
  background: var(--accent-subtle);
  border-radius: 999px;
  height: 44px;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  left: .5rem;
  right: .5rem;
}

.my-wheel-col {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.my-wheel-col:active {
  cursor: grabbing;
}

.my-wheel-col:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-border);
}

.my-wheel-track {
  will-change: transform;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.my-wheel-item {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  color: var(--text-muted);
  letter-spacing: -.01em;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 0 .5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: color .12s, opacity .12s, font-weight .12s;
  display: flex;
  overflow: hidden;
}

.my-wheel-item[data-distance="1"] {
  opacity: .55;
}

.my-wheel-item[data-distance="2"] {
  opacity: .32;
}

.my-wheel-item[data-distance="3"] {
  opacity: .18;
}

.my-wheel-item--active {
  color: var(--text-primary);
  opacity: 1;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .my-wheel-item {
    transition: none;
  }
}

.mini-month-nav {
  background: none;
  border: none;
  align-items: center;
  gap: .125rem;
  padding: 0;
  display: flex;
}

.mini-month-nav-btn {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: color .15s, background-color .15s;
  display: inline-flex;
}

.mini-month-nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini-month-weekdays {
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: .375rem;
  display: grid;
}

.mini-month-weekday {
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.2;
}

.mini-month-days {
  grid-template-columns: repeat(7, 1fr);
  row-gap: .25rem;
  display: grid;
}

.mini-month-day {
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
  display: inline-flex;
  position: relative;
}

.mini-month-day-num {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
}

.mini-month-grid--compact .mini-month-day-num {
  font-size: .75rem;
}

.mini-month-day--outside {
  opacity: .38;
}

.mini-month-day--outside .mini-month-day-num {
  font-weight: 400;
}

.mini-month-day--today:not(.mini-month-day--selected) {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--text-primary);
}

.mini-month-day--today:not(.mini-month-day--selected) .mini-month-day-num {
  color: var(--accent);
  font-weight: 600;
}

.mini-month-day--selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 1px 6px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-month-day--selected {
    box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

.mini-month-day--selected .mini-month-day-num {
  color: var(--accent-text);
  font-weight: 600;
}

.mini-month-day:not(.mini-month-day--selected):hover {
  background: var(--bg-hover);
}

.mini-month-day:active:not(.mini-month-day--selected) {
  transform: scale(.94);
}

.mini-month-day:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini-month-event-dot {
  background: var(--accent);
  width: .25rem;
  height: .25rem;
  box-shadow: 0 0 0 1px var(--bg-card);
  border-radius: 9999px;
  position: absolute;
  bottom: .1875rem;
  left: 50%;
  transform: translateX(-50%);
}

@supports (color: color-mix(in lab, red, red)) {
  .mini-month-event-dot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-card) 70%, transparent);
  }
}

.mini-month-grid--compact .mini-month-header {
  margin-bottom: .625rem;
}

.mini-month-grid--compact .mini-month-title {
  font-size: .8125rem;
}

.mini-month-grid--compact .mini-month-nav-btn {
  width: 2.25rem;
  height: 2.25rem;
}

.calendar-create-btn {
  color: var(--text-primary) !important;
}

.calendar-main-panel .calendar-panel-scroll, .calendar-main-panel, .calendar-page-shell .calendar-main-panel * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.calendar-main-panel .calendar-panel-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.calendar-main-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.calendar-page-shell .calendar-main-panel ::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.calendar-grid-line-hour {
  pointer-events: none;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: -10px;
}

.calendar-grid-line-day {
  pointer-events: none;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.calendar-grid-line-day--tick-left {
  left: -10px;
  right: 0;
}

.time-grid-first-day-column {
  position: relative;
}

.calendar-page-shell .calendar-grid-line-hour, .calendar-page-shell .calendar-grid-line-day {
  background: var(--calendar-grid-line);
}

.norex-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .norex-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.norex-card {
  border: 1px solid var(--dashboard-card-border, var(--border));
  border-radius: 16px;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 8px 18px #00000014, inset 0 1px #ffffff14;
}

.norex-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 12px 26px #0000001f, inset 0 1px #ffffff1a;
}

.notion-page {
  background-color: var(--bg-primary);
  max-width: 100%;
  color: var(--text-primary);
  padding: 2rem;
}

.notion-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  border-radius: 8px;
  transition: all .2s;
}

.notion-card:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-visible);
}

.gradient-text {
  color: var(--text-primary);
}

.sidebar-nav-link {
  border-radius: 11px;
  padding: 7px 16px;
}

.sidebar-nav-link:not(.nav-active):hover {
  background-color: var(--bg-hover);
}

.sidebar--web .sidebar-fill-column {
  flex-direction: column;
  flex: 1 1 0;
  gap: 8px;
  min-height: 0;
  display: flex;
}

.sidebar--web .sidebar-nav-row {
  flex: 1.2 1 0;
  min-height: 0;
}

.sidebar--web .sidebar-profile-row {
  flex: 1.75 1 0;
  min-height: 0;
}

.sidebar--web .sidebar-footer-row {
  flex: 1.75 1 0;
  gap: 10px;
  min-height: 0;
}

.sidebar--web .sidebar-nav-row > .sidebar-nav-link, .sidebar--web .sidebar-nav-row > .sidebar-feedback-btn {
  flex: 1;
  min-height: 0;
}

.sidebar--web .sidebar-nav-row .sidebar-nav-link, .sidebar--web .sidebar-feedback-btn.sidebar-nav-link {
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 15px;
  display: flex;
}

.sidebar--web .sidebar-section-label {
  letter-spacing: .14em;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 11px;
  line-height: 1.3;
}

.sidebar--web .sidebar-feedback-btn.rounded-full {
  border-radius: 9999px;
  flex: none;
  gap: 0;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
}

.sidebar--web .sidebar-user-trigger {
  border-radius: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.sidebar--web .sidebar-profile-row .sidebar-user-trigger {
  padding-top: 12px;
  padding-bottom: 12px;
}

.sidebar--web .sidebar-profile-row .sidebar-user-trigger p:first-of-type {
  font-size: 15.5px;
}

.sidebar--web .sidebar-user-trigger .sidebar-user-chevron {
  width: 20px;
  height: 20px;
}

.nav-active {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: 11px;
}

.nav-active svg {
  color: var(--accent);
}

.nav-active:before {
  content: "";
  background: var(--accent);
  border-radius: 2px;
  width: 3px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
}

.sidebar-user-trigger {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary)));
  }
}

.sidebar-user-trigger {
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.sidebar-user-trigger {
  box-shadow: 0 8px 18px #00000014, inset 0 1px #ffffff1a;
}

.sidebar-user-trigger[data-open="true"] {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger[data-open="true"] {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border-visible));
  }
}

.sidebar-user-trigger[data-open="true"] {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger[data-open="true"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, transparent), color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary)));
  }
}

.sidebar-user-trigger:hover {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, transparent), color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary)));
  }
}

.sidebar-user-trigger:hover {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .sidebar-user-trigger:hover {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border-visible));
  }
}

.sidebar-user-trigger .sidebar-user-chevron {
  opacity: .72;
  transition: transform .18s, opacity .18s;
}

.sidebar-user-trigger:hover .sidebar-user-chevron, .sidebar-user-trigger[data-open="true"] .sidebar-user-chevron {
  opacity: 1;
  transform: translateY(-1px);
}

.sidebar-popup-item {
  color: var(--text-secondary);
  background-color: #0000;
  transition: background-color .12s, color .12s;
}

.sidebar-popup-item:hover, .sidebar-popup-item[data-active="true"] {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-popup-item--danger, .sidebar-popup-item--danger:hover, .sidebar-popup-item--danger[data-active="true"] {
  color: #ef4444;
}

.sidebar-popup-item[data-selected="true"] {
  background-color: var(--accent-subtle);
  color: var(--text-primary);
}

.sidebar-popup-item[data-selected="true"]:hover {
  background-color: var(--bg-hover);
}

.progress-bar {
  background-color: var(--border);
  border-radius: 2px;
  height: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  background-color: var(--accent);
  border-radius: 2px;
  height: 100%;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.search-backdrop {
  background: var(--search-backdrop, #0f0f0fd9);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  display: flex;
  position: fixed;
  inset: 0;
}

.kbd {
  background-color: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  font-family: DM Mono, monospace;
  font-size: 11px;
  line-height: 1.4;
  display: inline-flex;
}

.heatmap-cell {
  border-radius: 2px;
  width: 12px;
  height: 12px;
  transition: transform .1s;
}

.heatmap-cell:hover {
  transform: scale(1.2);
}

.timeline-pill {
  white-space: nowrap;
  cursor: default;
  border-radius: 20px;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.tag-chip {
  cursor: pointer;
  background-color: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  transition: opacity .15s;
  display: inline-flex;
}

.tag-chip:hover {
  opacity: .8;
}

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
}

.flip-card-back {
  transform: rotateY(180deg);
}

mark {
  background-color: var(--accent-subtle);
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 1px;
}

:root[data-theme="light"] {
  --search-backdrop: #f6f8fce0;
}

.theory-content {
  color: var(--text-primary);
  font-size: .9rem;
  line-height: 1.75;
}

.theory-content .md-h1 {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 .75rem;
  padding-bottom: .4rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.theory-content .md-h2 {
  color: var(--text-primary);
  margin: 1.25rem 0 .5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.theory-content .md-h3 {
  color: var(--text-secondary);
  margin: 1rem 0 .4rem;
  font-size: 1rem;
  font-weight: 600;
}

.theory-content .md-p {
  color: var(--text-secondary);
  margin: .5rem 0;
}

.theory-content .md-bold {
  color: var(--text-primary);
  font-weight: 700;
}

.theory-content .md-em {
  color: var(--text-secondary);
  font-style: italic;
}

.theory-content .md-li {
  color: var(--text-secondary);
  margin-top: .2rem;
  margin-left: 1.5rem;
  list-style-type: disc;
  display: list-item;
}

.theory-content .md-li-num {
  list-style-type: decimal;
}

.theory-content .md-inline-code {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: DM Mono, monospace;
  font-size: .82rem;
}

.theory-content .md-code {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: .75rem 0;
  padding: 12px 16px;
  font-family: DM Mono, monospace;
  font-size: .82rem;
  overflow-x: auto;
}

.theory-content .md-code code {
  color: var(--text-secondary);
}

.theory-content .md-quote {
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  margin: .75rem 0;
  padding-left: 1rem;
  font-style: italic;
}

.theory-content .md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.study-ai-prompt-textarea {
  color: var(--text-primary);
  caret-color: var(--accent);
  min-height: 2.75rem;
}

.study-ai-prompt-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.study-ai-prompt-textarea::-webkit-scrollbar {
  width: 6px;
}

.study-ai-prompt-textarea::-webkit-scrollbar-track {
  background: none;
}

.study-ai-prompt-textarea::-webkit-scrollbar-thumb {
  background-color: var(--bg-elevated);
  border-radius: 3px;
}

.study-ai-prompt-textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--bg-hover);
}

.chat-composer-ref__icon-btn {
  width: 38px;
  height: 38px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color .12s;
  display: flex;
}

.chat-composer-ref__icon-btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.chat-composer-ref__icon-btn:disabled {
  opacity: .36;
  cursor: not-allowed;
}

.chat-composer-ref__icon-btn--recording {
  color: #c5221f !important;
  background-color: #c5221f17 !important;
}

.chat-mic-recording-box {
  box-sizing: border-box;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 42px;
  height: 28px;
  margin-right: 6px;
  padding: 0 9px;
  display: inline-flex;
}

.chat-mic-recording-box--landing {
  background: #c5221f0f;
  border: 1px solid #c5221f38;
}

.chat-mic-recording-box--thread {
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-mic-recording-box--thread {
    border: 1px solid color-mix(in srgb, var(--border-visible) 80%, transparent);
  }
}

.chat-mic-recording-box--thread {
  background: var(--bg-hover);
}

@keyframes nav-plus-spin {
  from {
    transform: rotate(0)scale(1);
  }

  to {
    transform: rotate(90deg)scale(1.18);
  }
}

@keyframes nav-search-bounce {
  0% {
    transform: scale(1)translateY(0);
  }

  40% {
    transform: scale(1.22)translateY(-2px);
  }

  70% {
    transform: scale(1.15)translateY(-1px);
  }

  100% {
    transform: scale(1.2)translateY(-1px);
  }
}

@keyframes nav-chat-wiggle {
  0% {
    transform: scale(1)rotate(0);
  }

  25% {
    transform: scale(1.18)rotate(-10deg);
  }

  60% {
    transform: scale(1.2)rotate(6deg);
  }

  100% {
    transform: scale(1.18)rotate(-4deg);
  }
}

@keyframes nav-layers-float {
  0% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-3px)scale(1.18);
  }

  100% {
    transform: translateY(-2px)scale(1.15);
  }
}

.group:hover .nav-icon-plus {
  animation: .22s ease-out forwards nav-plus-spin;
}

.group:hover .nav-icon-search {
  animation: .25s ease-out forwards nav-search-bounce;
}

.group:hover .nav-icon-chat {
  animation: .3s ease-out forwards nav-chat-wiggle;
}

.group:hover .nav-icon-layers {
  animation: .22s ease-out forwards nav-layers-float;
}

.group:not(:hover) .nav-icon-plus, .group:not(:hover) .nav-icon-search, .group:not(:hover) .nav-icon-chat, .group:not(:hover) .nav-icon-layers {
  transition: transform .18s ease-in;
  transform: none;
}

@keyframes chat-mic-dot-wave {
  0%, 100% {
    opacity: .5;
    transform: translateY(0)scale(1);
  }

  50% {
    opacity: .95;
    transform: translateY(-2px)scale(1.06);
  }
}

.chat-mic-recording-dot {
  background-color: #ef4444;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  display: inline-block;
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-mic-recording-dot {
    background-color: color-mix(in srgb, #ef4444 88%, var(--accent));
  }
}

.chat-mic-recording-dot {
  will-change: transform, opacity;
  animation: .68s ease-in-out infinite chat-mic-dot-wave;
}

@keyframes ai-prompt-vu-pulse {
  0%, 100% {
    opacity: .45;
    transform: scaleY(.22);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.ai-prompt-vu-bar {
  transform-origin: bottom;
  background: var(--accent);
  border-radius: 9999px;
  align-self: stretch;
  width: 3px;
  min-height: 8px;
  max-height: 100%;
}

@supports (color: color-mix(in lab, red, red)) {
  .ai-prompt-vu-bar {
    background: color-mix(in srgb, var(--accent) 72%, var(--text-muted));
  }
}

.ai-prompt-vu-bar {
  will-change: transform, opacity;
  animation: .52s ease-in-out infinite ai-prompt-vu-pulse;
}

:root[data-theme="light"] {
  --chat-plus-link: var(--accent);
  --chat-plus-row-hover: #4f6b9514;
  --chat-plus-surface: #fff;
  --chat-plus-shadow: 0 10px 28px #0f172a12,
    0 3px 10px #0f172a0a,
    0 0 0 1px #ffffffb3 inset;
}

:root:not([data-theme="light"]) {
  --chat-plus-link: #6eb0ff;
  --chat-plus-row-hover: #fff1;
  --chat-plus-surface: var(--bg-card);
  --chat-plus-shadow: 0 14px 36px #00000061,
    0 0 0 1px #ffffff0a inset;
}

.chat-plus-menu {
  background: var(--chat-plus-surface);
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-plus-menu {
    border: 1px solid color-mix(in srgb, var(--border-visible) 68%, transparent);
  }
}

.chat-plus-menu {
  box-shadow: var(--chat-plus-shadow);
  border-radius: 12px;
  padding: 4px;
}

.chat-plus-menu__sep {
  background: var(--border-visible);
  height: 1px;
  margin: 4px 8px;
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-plus-menu__sep {
    background: color-mix(in srgb, var(--border-visible) 82%, transparent);
  }
}

.chat-plus-menu__row {
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  letter-spacing: -.012em;
  width: 100%;
  min-height: 34px;
  color: var(--text-primary);
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color .18s ease-out, color .14s ease-out;
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .chat-plus-menu__row {
    transition: none;
  }
}

.chat-plus-menu__row:hover {
  background: var(--chat-plus-row-hover);
}

.chat-plus-menu__row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chat-plus-menu__row--link-active {
  color: var(--chat-plus-link);
}

.chat-plus-menu__row--link-active:hover {
  background: var(--chat-plus-link);
}

@supports (color: color-mix(in lab, red, red)) {
  .chat-plus-menu__row--link-active:hover {
    background: color-mix(in srgb, var(--chat-plus-link) 9%, var(--chat-plus-row-hover));
  }
}

.chat-plus-menu__ico {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.chat-plus-menu__ico--research {
  position: relative;
}

.chat-plus-menu__row:hover .chat-plus-menu__ico {
  color: var(--text-primary);
}

.chat-plus-menu__row--link-active .chat-plus-menu__ico, .chat-plus-menu__row--link-active:hover .chat-plus-menu__ico {
  color: var(--chat-plus-link);
}

.chat-plus-menu__row--submenu-open {
  background: var(--chat-plus-row-hover);
}

.chat-plus-menu__chev {
  color: var(--text-muted);
  opacity: .55;
  margin-left: auto;
}

.chat-plus-menu__check {
  color: var(--chat-plus-link);
  flex-shrink: 0;
  margin-left: auto;
}

:root {
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --dashboard-shell-bg: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-shell-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 96%, var(--bg-secondary)) 0%, var(--bg-primary) 100%);
  }
}

:root {
  --dashboard-card-bg: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, var(--bg-secondary)) 0%, var(--bg-card) 100%);
  }
}

:root {
  --dashboard-hero-bg: linear-gradient(145deg,
      var(--bg-card) 0%,
      var(--bg-card) 58%,
      var(--bg-secondary) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-hero-bg: linear-gradient(145deg,
      color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%) 0%,
      color-mix(in srgb, var(--bg-card) 98%, var(--bg-secondary)) 58%,
      color-mix(in srgb, var(--bg-secondary) 90%, black) 100%);
  }
}

:root {
  --dashboard-hero-bg-alt: linear-gradient(35deg,
      var(--bg-card) 0%,
      var(--bg-card) 58%,
      var(--bg-secondary) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-hero-bg-alt: linear-gradient(35deg,
      color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%) 0%,
      color-mix(in srgb, var(--bg-card) 98%, var(--bg-secondary)) 58%,
      color-mix(in srgb, var(--bg-secondary) 90%, black) 100%);
  }
}

:root {
  --dashboard-hero-border: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-hero-border: color-mix(in srgb, var(--accent) 12%, var(--border-visible));
  }
}

:root {
  --dashboard-hero-glow: #ffffff0f;
  --dashboard-card-border: var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-card-border: color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

:root {
  --dashboard-card-highlight: #ffffff14;
  --dashboard-card-glow: transparent;
  --dashboard-panel-bg: linear-gradient(180deg, var(--bg-card), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), var(--bg-card));
  }
}

:root {
  --dashboard-soft-surface: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-soft-surface: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  }
}

:root {
  --dashboard-soft-border: var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-soft-border: color-mix(in srgb, var(--border-visible) 88%, transparent);
  }
}

:root {
  --dashboard-chip-bg: var(--bg-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-chip-bg: color-mix(in srgb, var(--bg-primary) 65%, transparent);
  }
}

:root {
  --dashboard-chip-border: var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-chip-border: color-mix(in srgb, var(--border-visible) 85%, transparent);
  }
}

:root {
  --dashboard-live-bg: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-live-bg: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
  }
}

:root {
  --dashboard-live-text: var(--accent-text);
  --dashboard-urgent-bg: #f97316;
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-urgent-bg: color-mix(in srgb, #f97316 16%, var(--bg-card));
  }
}

:root {
  --dashboard-urgent-border: #f97316;
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --dashboard-urgent-border: color-mix(in srgb, #f97316 26%, var(--border-visible));
  }
}

:root {
  --dashboard-urgent-text: var(--text-primary);
}

:root[data-theme="light"] {
  --dashboard-shell-bg: linear-gradient(180deg, #fafafa 0%, #fafafa 55%, #f7f7f7 100%);
  --dashboard-card-bg: linear-gradient(180deg, #fffffffa 0%, #fafafaf2 100%);
  --dashboard-hero-bg: linear-gradient(145deg, #00000008 0%, #fffffff7 42%, #f5f5f5 100%);
  --dashboard-hero-bg-alt: linear-gradient(35deg, #0000000a 0%, #fafafaf7 42%, #f0f0f0 100%);
  --dashboard-hero-border: #00000014;
  --dashboard-hero-glow: #fafafab8;
  --dashboard-card-border: #00000014;
  --dashboard-card-highlight: #ffffffd1;
  --dashboard-card-glow: radial-gradient(circle, #0000000a 0%, transparent 72%);
  --dashboard-panel-bg: linear-gradient(180deg, #fffffffa 0%, #f5f5f5f5 100%);
  --dashboard-soft-surface: #00000008;
  --dashboard-soft-border: #00000012;
  --dashboard-chip-bg: #ffffffd6;
  --dashboard-chip-border: #00000014;
  --dashboard-live-bg: #2f4d7d1a;
  --dashboard-live-text: var(--text-primary);
  --dashboard-urgent-bg: #c57a451f;
  --dashboard-urgent-border: #c57a4533;
  --dashboard-urgent-text: #8f5e34;
}

.dashboard-shell {
  background: var(--dashboard-shell-bg);
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 16px 20px 20px 24px;
  display: flex;
}

.dashboard-rows {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.dashboard-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transform-origin: center;
  will-change: transform;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
}

.dashboard-row--pressing {
  z-index: 12;
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
}

.dashboard-row--dragging {
  z-index: 30;
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--accent-border), 0 18px 40px var(--bg-primary);
  border-radius: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-row--dragging {
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--accent-border), 0 18px 40px color-mix(in srgb, var(--bg-primary) 45%, transparent);
  }
}

.dashboard-row--dragging {
  cursor: grabbing;
  opacity: 1;
  position: relative;
  touch-action: none !important;
}

html.dashboard-reordering, html.dashboard-reordering body {
  overscroll-behavior: none !important;
  touch-action: none !important;
  overflow: hidden !important;
}

html.dashboard-reordering .app-content {
  scrollbar-width: none;
  overscroll-behavior: none !important;
  touch-action: none !important;
  overflow: hidden auto !important;
}

html.dashboard-reordering .app-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html.dashboard-reordering .dashboard-rows {
  touch-action: none;
}

html.dashboard-reordering .dashboard-row:not(.dashboard-row--dragging) {
  pointer-events: none;
}

.dashboard-row-lift-hint {
  z-index: 40;
  border: 1px solid var(--accent-border);
  background: var(--bg-elevated);
  min-height: 28px;
  color: var(--text-primary);
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.dashboard-hero-grid, .dashboard-bottom-grid {
  gap: 10px;
  display: grid;
}

.dashboard-hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
  align-items: stretch;
}

.dashboard-bottom-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
}

.dashboard-row2-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: start;
  gap: 10px;
  display: grid;
}

.dashboard-panel {
  border: 1px solid var(--dashboard-hero-border);
  background: var(--dashboard-hero-bg);
  box-shadow: 0 10px 24px #0000001a, inset 0 1px 0 var(--dashboard-card-highlight);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.dashboard-panel:before {
  content: "";
  background: linear-gradient(90deg, transparent 0%, var(--border-hover) 22%, #ffffff29 50%, var(--border-hover) 78%, transparent 100%);
  height: 1px;
  position: absolute;
  inset: 0 0 auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-panel:before {
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--border-hover) 45%, transparent) 22%, #ffffff29 50%, color-mix(in srgb, var(--border-hover) 35%, transparent) 78%, transparent 100%);
  }
}

.dashboard-panel:before {
  opacity: .65;
}

.dashboard-panel:after {
  content: "";
  background: var(--dashboard-hero-glow);
  filter: blur(18px);
  opacity: .25;
  border-radius: 999px;
  width: 140px;
  height: 140px;
  position: absolute;
  top: -44px;
  right: -36px;
}

.dashboard-panel--hero {
  border-color: var(--dashboard-hero-border);
  background: var(--dashboard-hero-bg);
  box-shadow: 0 16px 36px #0000001f, inset 0 1px #ffffff24;
}

.dashboard-panel--hero:before {
  content: "";
  background: var(--dashboard-hero-glow);
  filter: blur(22px);
  opacity: .4;
  border-radius: 999px;
  width: 280px;
  height: 280px;
  position: absolute;
  inset: auto -64px -124px auto;
}

.dashboard-panel--hero:after {
  content: "";
  opacity: .3;
  border: 1px solid #ffffff1a;
  border-radius: 28px;
  width: 128px;
  height: 128px;
  position: absolute;
  inset: 22px 22px auto auto;
  transform: rotate(14deg);
}

.dashboard-decision {
  z-index: 1;
  border-color: var(--dashboard-hero-border);
  background: var(--dashboard-hero-bg);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--dashboard-card-highlight);
  padding: 18px 20px 20px;
}

.dashboard-decision:after {
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
  filter: none;
  opacity: .6;
  width: 220px;
  height: 220px;
}

.dashboard-decision-header {
  z-index: 1;
  border-bottom: 1px solid var(--dashboard-card-border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  display: flex;
  position: relative;
}

.dashboard-decision-header .dashboard-hero-eyebrow {
  margin: 0 0 4px;
}

.dashboard-decision-greeting {
  color: var(--text-primary);
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
}

.dashboard-decision-date {
  color: var(--text-muted);
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-decision-grid {
  z-index: 1;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .65fr);
  gap: 22px;
  padding-top: 20px;
  display: grid;
  position: relative;
}

.dashboard-decision-main {
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: flex-start;
  gap: 18px;
  display: grid;
}

.dashboard-decision-icon {
  background: radial-gradient(circle, var(--accent-subtle), transparent 72%);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  display: flex;
}

.dashboard-decision-icon > span {
  border: 1px solid var(--accent-border);
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
  box-shadow: inset 0 1px 0 var(--dashboard-card-highlight);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dashboard-decision-copy {
  min-width: 0;
}

.dashboard-decision-copy .dashboard-panel-kicker {
  margin: 1px 0 7px;
}

.dashboard-decision-title {
  max-width: 22ch;
  color: var(--text-primary);
  letter-spacing: -.05em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  font-weight: 700;
  line-height: 1.02;
}

.dashboard-decision-description {
  max-width: 62ch;
  color: var(--text-secondary);
  letter-spacing: .005em;
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-decision-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  display: flex;
}

.dashboard-decision-cta {
  min-height: 44px;
  padding: 0 17px;
  font-size: 13px;
}

.dashboard-decision-meta {
  min-height: 40px;
  color: var(--text-muted);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-decision-next {
  border-left: 1px solid var(--dashboard-card-border);
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-left: 20px;
  display: flex;
}

.dashboard-decision-next > .dashboard-panel-kicker {
  margin: 0 0 2px;
}

.dashboard-decision-next-row {
  min-width: 0;
  min-height: 58px;
  color: var(--text-secondary);
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 14px;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  transition: transform .18s, background-color .18s, border-color .18s, color .18s;
  display: grid;
}

.dashboard-decision-next-row:hover {
  border-color: var(--dashboard-card-border);
  color: var(--text-primary);
  background: var(--dashboard-soft-surface);
  transform: translateX(2px);
}

.dashboard-decision-next-row:active {
  transform: translateX(2px)scale(.98);
}

.dashboard-decision-next-row:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.dashboard-decision-next-row > span {
  border: 1px solid var(--dashboard-card-border);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  background: var(--dashboard-soft-surface);
  box-shadow: inset 0 1px 0 var(--dashboard-card-highlight);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dashboard-decision-next-row > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.dashboard-decision-next-row strong {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
}

.dashboard-decision-next-row small {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.dashboard-hero-body, .dashboard-section-panel, .dashboard-spotlight, .dashboard-stat-card {
  z-index: 1;
  position: relative;
}

.dashboard-section-panel, .dashboard-spotlight {
  flex-direction: column;
  padding: 16px;
  display: flex;
}

.dashboard-section-panel .dashboard-empty {
  flex: 1;
}

.dashboard-hero-body {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 16px clamp(260px, 32vw, 420px) 16px 16px;
  display: flex;
  position: relative;
}

.dashboard-hero-content {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: min(720px, 100%);
  display: flex;
}

.dashboard-badge, .dashboard-chip, .dashboard-pill {
  border: 1px solid var(--dashboard-chip-border);
  background: var(--dashboard-chip-bg);
  color: var(--text-secondary);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.dashboard-badge {
  letter-spacing: -.01em;
  width: fit-content;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 600;
}

.dashboard-badge strong {
  color: var(--text-primary);
}

.dashboard-hero-copy {
  max-width: 720px;
}

.dashboard-hero-eyebrow, .dashboard-panel-kicker {
  color: var(--text-secondary);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-hero-title {
  max-width: 12ch;
  color: var(--text-primary);
  letter-spacing: -.06em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(1.85rem, 2.5vw, 2.7rem);
  line-height: 1;
}

.dashboard-hero-subtitle {
  color: var(--text-secondary);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  display: flex;
}

.dashboard-hero-separator {
  background: var(--accent);
  border-radius: 999px;
  width: 4px;
  height: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-separator {
    background: color-mix(in srgb, var(--accent) 46%, var(--border-visible));
  }
}

.dashboard-chip-row {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.dashboard-chip {
  justify-content: space-between;
  min-width: 122px;
  padding: 7px 11px;
}

.dashboard-chip-label {
  color: var(--text-secondary);
  letter-spacing: .01em;
  font-size: 10px;
}

.dashboard-chip strong {
  color: var(--text-primary);
  letter-spacing: -.03em;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.dashboard-hero-inline-brand {
  max-width: none;
  box-shadow: none;
  z-index: 2;
  background: none;
  border: none;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: clamp(42px, 5vw, 96px);
  transform: translateY(-50%);
}

.dashboard-hero-inline-mark {
  width: auto;
  height: auto;
  box-shadow: none;
  background: none;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.dashboard-hero-inline-image {
  object-fit: contain;
  width: clamp(88px, 10vw, 128px);
  height: clamp(88px, 10vw, 128px);
  display: block;
}

.dashboard-hero-inline-copy {
  flex-direction: column;
  min-width: 0;
  display: none;
}

.dashboard-hero-inline-name {
  color: var(--text-primary);
  letter-spacing: -.04em;
  font-size: 1rem;
  font-weight: 800;
}

.dashboard-hero-inline-sub {
  color: var(--text-secondary);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-hero-visual {
  display: none;
}

.dashboard-hero-art {
  border: 1px solid var(--accent);
  border-radius: 24px;
  width: 100%;
  height: 100%;
  min-height: 188px;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-art {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--dashboard-card-border));
  }
}

.dashboard-hero-art {
  background: radial-gradient(circle at 22% 20%, var(--accent) 0%, transparent 36%), radial-gradient(circle at 76% 72%, var(--accent) 0%, transparent 34%), linear-gradient(135deg, var(--accent) 0%, var(--bg-card) 52%, var(--bg-hover) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-art {
    background: radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 36%), radial-gradient(circle at 76% 72%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-card)) 0%, color-mix(in srgb, var(--bg-card) 96%, var(--bg-secondary)) 52%, color-mix(in srgb, var(--bg-hover) 92%, var(--bg-card)) 100%);
  }
}

.dashboard-hero-art {
  box-shadow: inset 0 1px 0 #ffffff29, 0 24px 40px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-art {
    box-shadow: inset 0 1px 0 #ffffff29, 0 24px 40px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}

.dashboard-hero-pattern, .dashboard-hero-glow, .dashboard-hero-watermark {
  pointer-events: none;
  position: absolute;
}

.dashboard-hero-pattern {
  opacity: .55;
  background: linear-gradient(115deg, #ffffff1a 0%, #0000 34%), linear-gradient(#ffffff0d 1px, #0000 1px) 0 0 / 34px 34px, linear-gradient(90deg, #ffffff0d 1px, #0000 1px) 0 0 / 34px 34px;
  border: 1px solid #ffffff17;
  border-radius: 22px;
  inset: 14px;
}

.dashboard-hero-glow {
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  border-radius: 999px;
  width: 240px;
  height: 240px;
  bottom: -34px;
  right: -30px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, white 8%) 0%, transparent 68%);
  }
}

.dashboard-hero-glow {
  filter: blur(8px);
  opacity: .9;
}

.dashboard-hero-watermark {
  color: var(--accent);
  bottom: 10px;
  right: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-watermark {
    color: color-mix(in srgb, var(--accent) 24%, white 10%);
  }
}

.dashboard-hero-watermark {
  letter-spacing: -.08em;
  opacity: .32;
  white-space: nowrap;
  z-index: 1;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 900;
  line-height: .9;
}

.dashboard-hero-brand {
  background: var(--dashboard-chip-bg);
  border: 1px solid #ffffff29;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: inline-flex;
  position: absolute;
  top: 16px;
  left: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-brand {
    background: color-mix(in srgb, var(--dashboard-chip-bg) 78%, white 6%);
  }
}

.dashboard-hero-brand {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 3;
  box-shadow: 0 10px 22px #0000001a, inset 0 1px #ffffff1f;
}

.dashboard-hero-brand-mark {
  background: linear-gradient(180deg, #ffffff2e, var(--accent));
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-brand-mark {
    background: linear-gradient(180deg, #ffffff2e, color-mix(in srgb, var(--accent) 16%, transparent));
  }
}

.dashboard-hero-brand-mark {
  box-shadow: inset 0 1px #ffffff29;
}

.dashboard-hero-brand-image {
  width: 18px;
  height: 18px;
  display: block;
}

.dashboard-hero-brand-text {
  color: var(--text-primary);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-hero-orbit {
  z-index: 1;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  position: absolute;
}

.dashboard-hero-orbit--one {
  opacity: .6;
  inset: 44px 26px 42px 30px;
}

.dashboard-hero-orbit--two {
  opacity: .35;
  inset: 70px 56px 70px 62px;
}

.dashboard-hero-art-core {
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dashboard-hero-logo-frame {
  width: auto;
  height: auto;
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.dashboard-hero-logo-stack {
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  display: flex;
  position: relative;
}

.dashboard-hero-logo-stack:before {
  content: none;
  display: none;
}

.dashboard-hero-logo-stack--duo {
  flex-direction: row;
  gap: 18px;
}

.dashboard-hero-logo-image--app {
  z-index: 1;
  object-fit: contain;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: block;
  position: relative;
}

.dashboard-hero-logo-stack--duo .dashboard-hero-logo-image--app {
  width: 56px;
  height: 56px;
}

.dashboard-hero-logo-partner, .dashboard-hero-logo-stack--duo img:not(.dashboard-hero-logo-image--app) {
  z-index: 1;
  object-fit: contain;
  width: 56px;
  height: 56px;
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  display: block;
  position: relative;
}

.dashboard-hero-inline-logos {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.dashboard-hero-inline-logos--duo {
  flex-direction: row;
  gap: clamp(16px, 2.5vw, 28px);
}

.dashboard-hero-inline-divider {
  transform-origin: center;
  background: #000;
  flex-shrink: 0;
  width: 1px;
  height: clamp(52px, 7vw, 76px);
  transform: scaleX(.45);
}

.dashboard-hero-inline-partner, .dashboard-hero-inline-logos--duo img:not(.dashboard-hero-inline-image--app) {
  object-fit: contain;
  width: clamp(88px, 10vw, 128px);
  height: clamp(88px, 10vw, 128px);
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  display: block;
}

.dashboard-hero-logo-mark {
  z-index: 2;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 8px 14px var(--accent));
  position: absolute;
  top: 12px;
  right: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-logo-mark {
    filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--accent) 16%, transparent));
  }
}

.dashboard-hero-logo-image {
  object-fit: contain;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: block;
}

.dashboard-hero-logo-copy {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.dashboard-hero-logo-name {
  color: var(--text-primary);
  letter-spacing: -.05em;
  font-size: 1.2rem;
  font-weight: 800;
}

.dashboard-hero-logo-sub {
  color: var(--text-secondary);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-hero-stat {
  background: linear-gradient(180deg, var(--dashboard-chip-bg), var(--bg-card));
  border: 1px solid #ffffff24;
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  min-width: 84px;
  padding: 8px 10px;
  display: flex;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-stat {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dashboard-chip-bg) 88%, white 6%), color-mix(in srgb, var(--bg-card) 92%, transparent));
  }
}

.dashboard-hero-stat {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 3;
  box-shadow: 0 12px 24px #0000001a, inset 0 1px #ffffff1f;
}

.dashboard-hero-stat--progress {
  top: 44px;
  left: 14px;
}

.dashboard-hero-stat--notes {
  bottom: 56px;
  right: 16px;
}

.dashboard-hero-stat--review {
  bottom: 16px;
  left: 18px;
}

.dashboard-hero-stat-label {
  color: var(--text-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-hero-stat-value {
  color: var(--text-primary);
  letter-spacing: -.04em;
  font-size: 1.1rem;
  font-weight: 800;
}

.dashboard-hero-pill {
  border: 1px solid var(--dashboard-chip-border);
  background: var(--dashboard-chip-bg);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: inline-flex;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-hero-pill {
    background: color-mix(in srgb, var(--dashboard-chip-bg) 84%, white 6%);
  }
}

.dashboard-hero-pill {
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  letter-spacing: -.01em;
  white-space: nowrap;
  z-index: 2;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 10px 24px #00000014, inset 0 1px #ffffff1f;
}

.dashboard-hero-pill--top {
  top: 16px;
  right: 16px;
}

.dashboard-hero-pill--left {
  top: 92px;
  left: 12px;
}

.dashboard-hero-pill--right {
  top: 84px;
  right: 14px;
}

.dashboard-hero-pill--bottom {
  bottom: 14px;
  left: auto;
  right: 14px;
}

.dashboard-btn {
  letter-spacing: -.01em;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  transition: transform .16s, background-color .18s, border-color .18s, color .18s, box-shadow .18s;
  display: inline-flex;
}

.dashboard-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 8px 18px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-btn--primary {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

.dashboard-btn--secondary, .dashboard-btn--ghost, .dashboard-review-btn {
  border-color: var(--dashboard-chip-border);
  background: var(--dashboard-chip-bg);
  color: var(--text-primary);
}

.dashboard-btn--ghost {
  color: var(--text-secondary);
}

.dashboard-btn:hover, .dashboard-note-card:hover, .dashboard-course-card:hover, .dashboard-list-row:hover, .dashboard-empty-action:hover {
  transform: translateY(-1px);
}

.dashboard-btn--secondary:hover, .dashboard-btn--ghost:hover, .dashboard-review-btn:hover, .dashboard-note-card:hover, .dashboard-course-card:hover, .dashboard-list-row:hover, .dashboard-empty-action:hover {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-btn--secondary:hover, .dashboard-btn--ghost:hover, .dashboard-review-btn:hover, .dashboard-note-card:hover, .dashboard-course-card:hover, .dashboard-list-row:hover, .dashboard-empty-action:hover {
    background: color-mix(in srgb, var(--bg-hover) 88%, white 2%);
  }
}

.dashboard-btn--secondary:hover, .dashboard-btn--ghost:hover, .dashboard-review-btn:hover, .dashboard-note-card:hover, .dashboard-course-card:hover, .dashboard-list-row:hover, .dashboard-empty-action:hover {
  border-color: var(--border-hover);
}

.dashboard-spotlight {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.dashboard-section-head--compact {
  margin-bottom: 10px;
}

.dashboard-focus-grid, .dashboard-stat-grid, .dashboard-notes-grid, .dashboard-courses-grid {
  gap: 12px;
  display: grid;
}

.dashboard-focus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-focus-card, .dashboard-stat-card, .dashboard-note-card, .dashboard-course-card, .dashboard-list-row, .dashboard-event-card, .dashboard-empty, .dashboard-empty-action {
  border: 1px solid var(--dashboard-card-border);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-card, .dashboard-stat-card, .dashboard-note-card, .dashboard-course-card, .dashboard-list-row, .dashboard-event-card, .dashboard-empty, .dashboard-empty-action {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.dashboard-focus-card, .dashboard-stat-card, .dashboard-note-card, .dashboard-course-card, .dashboard-list-row, .dashboard-event-card, .dashboard-empty, .dashboard-empty-action {
  box-shadow: 0 8px 18px #00000014, inset 0 1px #ffffff14;
}

.dashboard-focus-card:before, .dashboard-stat-card:before, .dashboard-note-card:before, .dashboard-course-card:before, .dashboard-list-row:before, .dashboard-event-card:before, .dashboard-empty:before, .dashboard-empty-action:before {
  content: "";
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
  height: 1px;
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-card:before, .dashboard-stat-card:before, .dashboard-note-card:before, .dashboard-course-card:before, .dashboard-list-row:before, .dashboard-event-card:before, .dashboard-empty:before, .dashboard-empty-action:before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-hover) 30%, transparent), transparent);
  }
}

.dashboard-focus-card:before, .dashboard-stat-card:before, .dashboard-note-card:before, .dashboard-course-card:before, .dashboard-list-row:before, .dashboard-event-card:before, .dashboard-empty:before, .dashboard-empty-action:before {
  opacity: .7;
}

.dashboard-focus-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
  flex-direction: column;
  gap: 8px;
  min-height: 128px;
  padding: 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-card) 90%, var(--bg-secondary)));
  }
}

.dashboard-focus-head {
  align-items: center;
  gap: 10px;
  display: flex;
}

.dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
  border: 1px solid var(--accent);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-visible));
  }
}

.dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
  background: linear-gradient(180deg, var(--bg-hover), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 84%, transparent), color-mix(in srgb, var(--bg-card) 92%, transparent));
  }
}

.dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
  color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
    color: color-mix(in srgb, var(--text-primary) 88%, var(--accent));
  }
}

.dashboard-focus-icon, .dashboard-stat-icon, .dashboard-note-icon {
  box-shadow: inset 0 1px #ffffff1a, 0 4px 10px #0000001a;
}

.dashboard-focus-icon svg, .dashboard-stat-icon svg, .dashboard-note-icon svg, .dashboard-badge svg {
  stroke-width: 2.1px;
}

.dashboard-focus-label, .dashboard-stat-label {
  color: var(--text-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-focus-label, .dashboard-stat-label {
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  }
}

.dashboard-focus-label, .dashboard-stat-label {
  letter-spacing: -.01em;
  font-size: 11px;
  font-weight: 600;
}

.dashboard-focus-value, .dashboard-stat-value {
  color: var(--text-primary);
  letter-spacing: -.045em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
}

.dashboard-focus-detail, .dashboard-stat-delta, .dashboard-review-copy, .dashboard-empty {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.dashboard-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-stat-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
  padding: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-stat-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary)));
  }
}

.dashboard-stat-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.dashboard-stat-icon {
  margin-bottom: 0;
}

.dashboard-stat-delta {
  text-align: right;
  max-width: 130px;
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-section-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.dashboard-section-title {
  color: var(--text-primary);
  letter-spacing: -.03em;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.dashboard-inline-link {
  color: var(--text-secondary);
  letter-spacing: -.01em;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  transition: color .16s;
  display: inline-flex;
}

.dashboard-inline-link:hover {
  color: var(--text-primary);
}

.dashboard-list, .dashboard-events-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.dashboard-list-row, .dashboard-event-card, .dashboard-empty-action {
  width: 100%;
}

.dashboard-list-row {
  text-align: left;
  background: linear-gradient(180deg, var(--bg-primary), transparent), linear-gradient(180deg, var(--bg-card), var(--bg-card));
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-row {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 42%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.dashboard-list-row {
  transition: transform .16s, background-color .16s, border-color .16s;
}

.dashboard-list-dot-wrap {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.dashboard-list-dot {
  border-radius: 999px;
  width: 8px;
  height: 8px;
}

.dashboard-list-copy, .dashboard-event-copy {
  flex: 1;
  min-width: 0;
}

.dashboard-list-topline {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.dashboard-list-kind, .dashboard-list-meta {
  letter-spacing: -.005em;
  border-radius: 999px;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-list-kind {
  color: var(--accent-text);
  background: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-kind {
    background: color-mix(in srgb, var(--text-primary) 18%, var(--bg-elevated));
  }
}

.dashboard-list-kind--academic {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-kind--academic {
    background: color-mix(in srgb, var(--accent) 72%, transparent);
  }
}

.dashboard-list-meta {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-meta {
    background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  }
}

.dashboard-list-meta {
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-meta {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.dashboard-course-meta span, .dashboard-note-badge, .dashboard-note-date {
  letter-spacing: .005em;
  color: var(--text-muted);
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.dashboard-list-side {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.dashboard-list-title {
  color: var(--text-primary);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.28;
}

.dashboard-list-subtitle {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-list-subtitle {
    color: color-mix(in srgb, var(--text-secondary) 94%, var(--text-primary));
  }
}

.dashboard-list-subtitle {
  font-size: 11px;
  line-height: 1.45;
}

.dashboard-pill {
  flex-shrink: 0;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-pill--accent {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-pill--accent {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  }
}

.dashboard-pill--accent {
  color: var(--text-primary);
}

.dashboard-pill--urgent {
  border-color: var(--dashboard-urgent-border);
  background: var(--dashboard-urgent-bg);
  color: var(--dashboard-urgent-text);
}

.dashboard-pill--live {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-pill--live {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }
}

.dashboard-pill--live {
  background: var(--dashboard-live-bg);
  color: var(--dashboard-live-text);
}

.dashboard-event-card {
  background: linear-gradient(180deg, var(--bg-primary), transparent), linear-gradient(180deg, var(--bg-card), var(--bg-card));
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-event-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 38%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.dashboard-event-timebox {
  background: var(--bg-hover);
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 58px;
  padding: 8px 6px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-event-timebox {
    background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  }
}

.dashboard-event-timebox {
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-event-timebox {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.dashboard-event-timebox {
  color: var(--text-primary);
}

.dashboard-event-timebox strong {
  letter-spacing: -.03em;
  font-size: 13px;
  line-height: 1;
}

.dashboard-event-timebox span {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
}

.dashboard-progress-meta {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.dashboard-progress-track {
  background: var(--bg-hover);
  border-radius: 999px;
  width: 100%;
  height: 7px;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-progress-track {
    background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  }
}

.dashboard-progress-track--compact {
  height: 6px;
}

.dashboard-progress-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  height: 100%;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-progress-fill {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 62%, white));
  }
}

.dashboard-review-copy {
  margin-top: 10px;
}

.dashboard-review-btn {
  width: 100%;
  margin-top: 14px;
}

.dashboard-review-btn--urgent {
  background: var(--accent);
  color: var(--accent-text);
  border-color: #0000;
}

.dashboard-notes-grid, .dashboard-courses-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-note-card, .dashboard-course-card {
  text-align: left;
  background: linear-gradient(180deg, var(--bg-primary), transparent), linear-gradient(180deg, var(--bg-card), var(--bg-card));
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dashboard-note-card, .dashboard-course-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 34%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.dashboard-note-card, .dashboard-course-card {
  transition: transform .16s, background-color .16s, border-color .16s;
}

.dashboard-note-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.dashboard-note-footer {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  display: flex;
}

.dashboard-note-link {
  letter-spacing: -.005em;
  color: var(--accent-text);
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-course-head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.dashboard-course-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.dashboard-course-meta span:not(:first-child):before {
  content: "·";
  color: var(--text-muted);
  opacity: .6;
  margin-right: 6px;
}

.dashboard-empty {
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  display: flex;
}

.dashboard-empty-action {
  min-height: 120px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: transform .16s, background-color .16s, border-color .16s, color .16s;
  display: inline-flex;
}

.dashboard-empty-action:hover {
  color: var(--text-primary);
}

@media (max-width: 1279px) {
  .dashboard-hero-grid, .dashboard-bottom-grid, .dashboard-row2-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-shell {
    padding-left: 20px;
  }

  .dashboard-hero-body {
    min-height: 220px;
    padding-right: clamp(240px, 30vw, 360px);
  }

  .dashboard-hero-content {
    max-width: none;
  }

  .dashboard-hero-inline-brand {
    right: clamp(32px, 4vw, 64px);
  }

  .dashboard-hero-inline-image, .dashboard-hero-inline-logos--duo img:not(.dashboard-hero-inline-image--app) {
    width: clamp(80px, 9vw, 112px);
    height: clamp(80px, 9vw, 112px);
  }
}

@media (max-width: 1023px) {
  .dashboard-decision-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-decision-next {
    border-top: 1px solid var(--dashboard-card-border);
    border-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 16px;
    padding-left: 0;
    display: grid;
  }

  .dashboard-decision-next > .dashboard-panel-kicker {
    grid-column: 1 / -1;
  }

  .dashboard-stat-grid, .dashboard-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .dashboard-shell {
    gap: 14px;
    padding: 14px;
  }

  .dashboard-decision {
    padding: 16px;
  }

  .dashboard-decision-header {
    align-items: flex-start;
  }

  .dashboard-decision-header .dashboard-badge {
    flex: none;
  }

  .dashboard-decision-grid {
    gap: 18px;
  }

  .dashboard-decision-main {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboard-decision-icon {
    width: 54px;
    height: 54px;
  }

  .dashboard-decision-icon > span {
    width: 44px;
    height: 44px;
  }

  .dashboard-decision-title {
    font-size: 1.75rem;
  }

  .dashboard-decision-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-decision-cta {
    width: 100%;
  }

  .dashboard-decision-meta {
    min-height: auto;
  }

  .dashboard-decision-next {
    grid-template-columns: 1fr;
  }

  .dashboard-decision-next > .dashboard-panel-kicker {
    grid-column: auto;
  }

  .dashboard-hero-body, .dashboard-section-panel, .dashboard-spotlight {
    padding: 14px;
  }

  .dashboard-stat-grid, .dashboard-focus-grid, .dashboard-notes-grid, .dashboard-courses-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-chip {
    width: 100%;
  }

  .dashboard-hero-body {
    min-height: auto;
    padding-right: 14px;
  }

  .dashboard-hero-inline-brand {
    width: auto;
    max-width: none;
    margin-top: 8px;
    position: static;
    transform: none;
  }

  .dashboard-hero-inline-image, .dashboard-hero-inline-logos--duo img:not(.dashboard-hero-inline-image--app) {
    width: clamp(72px, 20vw, 104px);
    height: clamp(72px, 20vw, 104px);
  }

  .dashboard-hero-subtitle {
    font-size: 12px;
  }

  .dashboard-stat-delta {
    text-align: left;
    max-width: none;
  }

  .dashboard-list-row, .dashboard-event-card {
    align-items: flex-start;
  }

  .dashboard-note-top, .dashboard-note-footer {
    flex-wrap: wrap;
  }
}

.onboarding-modal-layer, .onboarding-tour-layer {
  z-index: 120;
  position: fixed;
  inset: 0;
}

.onboarding-modal-layer {
  background: var(--bg-primary);
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  overflow-y: auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-modal-layer {
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  }
}

.onboarding-modal {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  width: min(760px, 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--text-primary);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-modal {
    box-shadow: var(--shadow-xl), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  }
}

.onboarding-modal:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 12% 4%, var(--accent), transparent 34%), linear-gradient(90deg, var(--border-visible) 1px, transparent 1px), linear-gradient(var(--border-visible) 1px, transparent 1px);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-modal:before {
    background: radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), linear-gradient(90deg, color-mix(in srgb, var(--border-visible) 34%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--border-visible) 34%, transparent) 1px, transparent 1px);
  }
}

.onboarding-modal:before {
  -webkit-mask-image: linear-gradient(to bottom, var(--text-primary), transparent 58%);
  -webkit-mask-image: linear-gradient(to bottom, var(--text-primary), transparent 58%);
  mask-image: linear-gradient(to bottom, var(--text-primary), transparent 58%);
  opacity: .34;
  background-size: auto, 40px 40px, 40px 40px;
}

.onboarding-modal > * {
  position: relative;
}

.onboarding-modal--profile {
  width: min(720px, 100%);
}

.onboarding-welcome-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  align-items: center;
  gap: 36px;
  display: grid;
}

.onboarding-icon-stage {
  background: radial-gradient(circle, var(--accent), transparent 72%);
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-icon-stage {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  }
}

.onboarding-icon-stage--compact {
  flex: none;
  width: 62px;
  height: 62px;
  margin: 0;
}

.onboarding-icon-ring {
  border: 1px solid var(--accent);
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-icon-ring {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-visible));
  }
}

.onboarding-icon-ring {
  background: var(--accent-subtle);
  border-radius: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-icon-ring {
    background: color-mix(in srgb, var(--accent-subtle) 72%, var(--bg-card));
  }
}

.onboarding-icon-ring {
  box-shadow: inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-icon-ring {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}

.onboarding-icon-stage--compact .onboarding-icon-ring {
  border-radius: 16px;
  width: 48px;
  height: 48px;
}

.onboarding-icon-core {
  width: 42px;
  height: 42px;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
  box-shadow: inset 0 1px 0 var(--text-primary);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-icon-core {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 9%, transparent);
  }
}

.onboarding-icon-stage--compact .onboarding-icon-core {
  border-radius: 12px;
  width: 36px;
  height: 36px;
}

.onboarding-kicker, .onboarding-field-label, .onboarding-field > span, .onboarding-preview-label {
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.onboarding-title {
  max-width: 16ch;
  color: var(--text-primary);
  letter-spacing: -.045em;
  text-wrap: balance;
  margin: 8px 0 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: .98;
}

.onboarding-description {
  max-width: 54ch;
  color: var(--text-secondary);
  letter-spacing: .005em;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

.onboarding-preview {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  min-height: 236px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--text-primary);
  border-radius: 20px;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-preview {
    box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  }
}

.onboarding-preview {
  transform: rotate(1.5deg);
}

.onboarding-preview-focus {
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  display: flex;
}

.onboarding-preview-focus > span {
  background: var(--bg-elevated);
  width: 36px;
  height: 36px;
  box-shadow: inset 0 1px 0 var(--text-primary);
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-preview-focus > span {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}

.onboarding-preview-focus div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.onboarding-preview-focus small {
  color: var(--text-muted);
  font-size: 11px;
}

.onboarding-preview-focus strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.onboarding-preview-row {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  display: grid;
}

.onboarding-preview-row span {
  border: 1px solid var(--border-visible);
  min-height: 50px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border-radius: 14px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.onboarding-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  display: flex;
}

.onboarding-actions--welcome {
  justify-content: flex-start;
  margin-top: 30px;
}

.onboarding-btn {
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 650;
  transition: transform .18s, background-color .18s, border-color .18s, color .18s, opacity .18s;
  display: inline-flex;
}

.onboarding-btn:active:not(:disabled) {
  transform: scale(.98);
}

.onboarding-btn:focus-visible, .onboarding-close:focus-visible, .onboarding-choice:focus-visible, .onboarding-goal:focus-visible, .onboarding-tour-back:focus-visible, .onboarding-tour-skip:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.onboarding-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.onboarding-btn--primary {
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  box-shadow: var(--shadow-sm);
}

.onboarding-btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
}

.onboarding-btn--secondary {
  border-color: var(--border-visible);
  color: var(--text-secondary);
  background: none;
}

.onboarding-btn--secondary:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.onboarding-hint {
  color: var(--text-muted);
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.onboarding-close {
  border: 1px solid var(--border-visible);
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: color .18s, background-color .18s;
  display: flex;
  position: absolute;
  top: 18px;
  right: 18px;
}

.onboarding-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.onboarding-profile-head {
  align-items: flex-start;
  gap: 18px;
  padding-right: 44px;
  display: flex;
}

.onboarding-profile-head .onboarding-title {
  max-width: none;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.05;
}

.onboarding-profile-head .onboarding-description {
  margin-top: 10px;
}

.onboarding-form-grid {
  grid-template-columns: .75fr 1.25fr;
  gap: 14px;
  margin-top: 28px;
  display: grid;
}

.onboarding-field {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.onboarding-input-wrap {
  border: 1px solid var(--border-visible);
  min-height: 46px;
  color: var(--text-muted);
  background: var(--input-bg);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  transition: border-color .18s, box-shadow .18s;
  display: flex;
}

.onboarding-input-wrap:focus-within {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.onboarding-input-wrap input {
  min-width: 0;
  color: var(--text-primary);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 14px;
}

.onboarding-input-wrap input::placeholder {
  color: var(--text-muted);
}

.onboarding-input-wrap--combobox {
  padding: 0;
  display: block;
}

.onboarding-input-wrap--combobox > div, .onboarding-input-wrap--combobox > div > div {
  height: 100%;
}

.onboarding-input-wrap--combobox input {
  min-height: 44px;
  color: var(--text-primary);
}

.onboarding-field-group {
  margin-top: 22px;
}

.onboarding-field-label {
  margin-bottom: 10px;
  display: block;
}

.onboarding-choice-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.onboarding-choice {
  border: 1px solid var(--border-visible);
  min-height: 42px;
  color: var(--text-secondary);
  background: none;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  transition: color .18s, background-color .18s, border-color .18s, transform .18s;
}

.onboarding-choice:hover, .onboarding-choice--selected {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.onboarding-choice:active, .onboarding-goal:active {
  transform: scale(.98);
}

.onboarding-goal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.onboarding-goal {
  border: 1px solid var(--border-visible);
  min-height: 54px;
  color: var(--text-secondary);
  text-align: left;
  background: none;
  border-radius: 14px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: color .18s, background-color .18s, border-color .18s, transform .18s;
  display: grid;
}

.onboarding-goal > span {
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  background: var(--bg-hover);
  box-shadow: inset 0 1px 0 var(--text-primary);
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-goal > span {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  }
}

.onboarding-goal:hover, .onboarding-goal--selected {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.onboarding-goal--selected > span {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.onboarding-error {
  border: 1px solid var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
  border-radius: 12px;
  margin: 16px 0 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-tour-guard {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.onboarding-spotlight {
  z-index: 1;
  pointer-events: none;
  border: 2px solid var(--text-primary);
  box-shadow: 0 0 0 9999px var(--bg-primary), var(--shadow-md);
  border-radius: 16px;
  position: fixed;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-spotlight {
    box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg-primary) 84%, transparent), var(--shadow-md);
  }
}

.onboarding-tour-card {
  z-index: 2;
  border: 1px solid var(--border-visible);
  width: min(360px, 100vw - 32px);
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--text-primary);
  border-radius: 20px;
  padding: 22px;
  position: fixed;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-tour-card {
    box-shadow: var(--shadow-xl), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}

.onboarding-tour-card--centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.onboarding-tour-skip {
  min-height: 32px;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  transition: color .18s;
  position: absolute;
  top: 18px;
  right: 18px;
}

.onboarding-tour-skip:hover {
  color: var(--text-primary);
}

.onboarding-tour-progress {
  gap: 4px;
  padding-right: 66px;
  display: flex;
}

.onboarding-tour-progress span {
  background: var(--border-visible);
  border-radius: 999px;
  width: 18px;
  height: 3px;
}

.onboarding-tour-progress span.is-active {
  background: var(--text-primary);
}

.onboarding-tour-icon {
  border: 1px solid var(--accent-border);
  width: 42px;
  height: 42px;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
  box-shadow: inset 0 1px 0 var(--text-primary);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .onboarding-tour-icon {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}

.onboarding-tour-card .onboarding-kicker {
  margin-top: 18px;
}

.onboarding-tour-title {
  color: var(--text-primary);
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 7px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.08;
}

.onboarding-tour-description {
  color: var(--text-secondary);
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.onboarding-tour-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.onboarding-tour-back {
  border: 1px solid var(--border-visible);
  width: 42px;
  height: 42px;
  color: var(--text-secondary);
  background: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: color .18s, background-color .18s, opacity .18s;
  display: flex;
}

.onboarding-tour-back:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.onboarding-tour-back:disabled {
  cursor: not-allowed;
  opacity: .3;
}

@media (max-width: 767px) {
  .onboarding-modal-layer {
    align-items: flex-start;
    padding: 12px;
  }

  .onboarding-modal {
    border-radius: 20px;
    margin: auto 0;
    padding: 24px 20px;
  }

  .onboarding-welcome-grid, .onboarding-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .onboarding-preview {
    min-height: 190px;
    transform: none;
  }

  .onboarding-actions--welcome, .onboarding-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-actions--welcome .onboarding-btn, .onboarding-actions .onboarding-btn {
    width: 100%;
  }

  .onboarding-profile-head {
    align-items: center;
  }

  .onboarding-profile-head .onboarding-description {
    padding-right: 12px;
  }

  .onboarding-goal-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-tour-card, .onboarding-tour-card--centered {
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: auto;
    transform: none;
    top: auto !important;
    left: 12px !important;
  }
}

.study-techniques-page {
  --study-technique-accent: var(--accent);
  --study-technique-surface: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-page {
    --study-technique-surface: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

.study-techniques-page {
  --study-technique-glow: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-page {
    --study-technique-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  }
}

.study-techniques-page {
  background: var(--dashboard-shell-bg);
  position: relative;
}

.study-techniques-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll {
    scrollbar-color: color-mix(in srgb, var(--border) 58%, transparent) color-mix(in srgb, var(--border) 16%, transparent);
  }
}

.study-techniques-scroll:hover {
  scrollbar-color: var(--border) var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll:hover {
    scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) color-mix(in srgb, var(--border) 24%, transparent);
  }
}

.study-techniques-scroll::-webkit-scrollbar {
  width: 10px;
}

.study-techniques-scroll::-webkit-scrollbar-track {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--border) 14%, transparent);
  }
}

.study-techniques-scroll::-webkit-scrollbar-track {
  border-radius: 5px;
}

.study-techniques-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: block;
}

.study-techniques-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 52%, transparent);
  }
}

.study-techniques-scroll::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 2px solid #0000;
  border-radius: 5px;
  transition: background .15s;
}

.study-techniques-scroll:hover::-webkit-scrollbar-thumb {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 72%, transparent);
  }
}

.study-techniques-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  }
}

.study-techniques-shell {
  z-index: 1;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 16px 20px 20px;
  display: flex;
  position: relative;
}

.study-techniques-section-head {
  display: flex;
}

.study-techniques-kicker {
  color: var(--study-technique-accent);
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-kicker {
    color: color-mix(in srgb, var(--study-technique-accent) 52%, var(--text-primary));
  }
}

.study-techniques-kicker {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.study-techniques-toolbar {
  border: 1px solid var(--border-visible);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 16px;
  padding: 14px 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, var(--study-technique-accent));
  }
}

.study-techniques-toolbar {
  background: radial-gradient(circle at top right, var(--study-technique-accent), transparent 38%), linear-gradient(180deg, var(--bg-card), var(--bg-card));
  border-radius: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 12%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary)));
  }
}

.study-techniques-toolbar {
  box-shadow: var(--shadow-sm), inset 0 1px 0 #ffffff1a;
}

.study-techniques-cta-bar {
  width: 100%;
  box-shadow: none;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.study-techniques-cta-bar .study-techniques-primary-btn {
  letter-spacing: -.01em;
  border-radius: 14px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 650;
}

.mobile-section-float-head {
  display: none;
}

@media (max-width: 767px) {
  .mobile-section-float-head {
    z-index: calc(var(--z-mobile-chrome) - 1);
    box-sizing: border-box;
    min-height: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset) + var(--mobile-chrome-size) + 10px);
    padding: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset)) calc(var(--mobile-edge) + var(--mobile-chrome-size) + 10px) 10px;
    pointer-events: none;
    box-shadow: none;
    background: none;
    border: 0;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .mobile-section-float-head:before {
    content: "";
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-primary) 42%, transparent 100%);
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .mobile-section-float-head:before {
      background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-primary) 28%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 10%, transparent) 42%, transparent 100%);
    }
  }

  .mobile-section-float-head:before {
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(#000 0% 28%, #0000 100%);
    mask-image: linear-gradient(#000 0% 28%, #0000 100%);
  }

  .mobile-section-float-title {
    z-index: 1;
    width: 100%;
    max-width: none;
    min-height: var(--mobile-chrome-size);
    color: var(--text-primary);
    letter-spacing: -.02em;
    text-align: center;
    text-wrap: balance;
    filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.2;
    display: flex;
    position: relative;
  }

  .mobile-section-float-head--chat {
    padding-left: calc(var(--mobile-edge) + 96px + 14px);
    padding-right: calc(var(--mobile-edge) + 96px + 14px);
  }

  .mobile-section-float-head--convo {
    min-height: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset) + 2.7em + 12px);
    align-items: center;
  }

  .mobile-section-float-head--solid:before {
    background: linear-gradient(to bottom, var(--sec-veil-techniques) 0, var(--sec-veil-techniques) calc(100% - 18px), transparent 100%);
    -webkit-backdrop-filter: none;
    inset: 0 0 -18px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-section-float-title--convo {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
    text-wrap: pretty;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: -.015em;
    -webkit-box-orient: vertical;
    min-height: 0;
    max-height: 2.5em;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    overflow: hidden;
  }
}

.study-techniques-toolbar__copy {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.study-techniques-toolbar__title-row {
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.study-techniques-toolbar__icon {
  border: 1px solid var(--study-technique-accent);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar__icon {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 26%, var(--border-visible));
  }
}

.study-techniques-toolbar__icon {
  background: radial-gradient(circle at 30% 30%, #fff3, transparent 40%), linear-gradient(180deg, var(--study-technique-surface), var(--bg-card));
  border-radius: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar__icon {
    background: radial-gradient(circle at 30% 30%, #fff3, transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--study-technique-surface) 100%, transparent), color-mix(in srgb, var(--bg-card) 86%, transparent));
  }
}

.study-techniques-toolbar__icon {
  color: var(--study-technique-accent);
  box-shadow: inset 0 1px 0 #ffffff2e, 0 10px 24px var(--study-technique-glow);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar__icon {
    box-shadow: inset 0 1px 0 #ffffff2e, 0 10px 24px color-mix(in srgb, var(--study-technique-glow) 74%, transparent);
  }
}

.study-techniques-toolbar__title {
  max-width: none;
  color: var(--text-primary);
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
}

.study-techniques-toolbar__subtitle {
  max-width: 56ch;
  color: var(--text-secondary);
  margin: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar__subtitle {
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  }
}

.study-techniques-toolbar__subtitle {
  font-size: 13px;
  line-height: 1.55;
}

.study-techniques-toolbar .study-techniques-primary-btn {
  min-height: 38px;
  box-shadow: 0 8px 18px var(--study-technique-accent);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 12.5px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-toolbar .study-techniques-primary-btn {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--study-technique-accent) 20%, transparent);
  }
}

.study-techniques-toolbar__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  display: flex;
}

.study-techniques-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.study-techniques-strip__item {
  border: 1px solid var(--border-visible);
  min-height: 122px;
  padding: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-strip__item {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.study-techniques-strip__item {
  background: radial-gradient(circle at top right, var(--study-technique-accent), transparent 38%), linear-gradient(180deg, var(--bg-card), var(--bg-hover));
  border-radius: 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-strip__item {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 8%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 97%, transparent), color-mix(in srgb, var(--bg-hover) 88%, transparent));
  }
}

.study-techniques-strip__item {
  box-shadow: var(--shadow-sm);
}

.study-techniques-strip__label {
  color: var(--text-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.study-techniques-strip__item strong {
  color: var(--text-primary);
  letter-spacing: -.05em;
  margin-top: 14px;
  font-size: 1.7rem;
  font-weight: 700;
  display: block;
}

.study-techniques-strip__item p {
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.study-techniques-hero, .study-techniques-modal, .study-techniques-session-header {
  border: none;
  border-bottom: 1px solid var(--border-visible);
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero, .study-techniques-modal, .study-techniques-session-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border-visible) 60%, transparent);
  }
}

.study-techniques-hero, .study-techniques-modal, .study-techniques-session-header {
  box-shadow: none;
  background: none;
  border-radius: 0;
}

.study-techniques-hero:before, .study-techniques-modal:before {
  content: "";
  background: linear-gradient(90deg, transparent, var(--study-technique-accent), transparent);
  height: 1px;
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero:before, .study-techniques-modal:before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--study-technique-accent) 32%, white), transparent);
  }
}

.study-techniques-session-header:before {
  display: none;
}

.study-techniques-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr);
  gap: 18px;
  padding: 26px;
  display: grid;
}

.study-techniques-hero__copy, .study-techniques-hero__panel {
  z-index: 1;
  position: relative;
}

.study-techniques-hero__title {
  max-width: 12ch;
  color: var(--text-primary);
  letter-spacing: -.06em;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .98;
}

.study-techniques-hero__subtitle {
  max-width: 62ch;
  color: var(--text-secondary);
  margin-top: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__subtitle {
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  }
}

.study-techniques-hero__subtitle {
  font-size: 14px;
  line-height: 1.7;
}

.study-techniques-hero__pills, .study-techniques-hero__actions, .study-techniques-section-head, .study-techniques-session-header, .technique-card__top, .technique-card__footer, .technique-card__rating, .study-techniques-modal__header, .study-techniques-modal__title, .study-techniques-modal__loading, .study-techniques-modal__option, .study-techniques-modal__match, .study-techniques-session-header__left, .study-techniques-session-header__identity, .study-techniques-stats-grid, .study-techniques-grid, .technique-card__icon-wrap, .technique-card__stars, .study-techniques-session-score__stars {
  display: flex;
}

.study-techniques-hero__pills, .study-techniques-hero__actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.study-techniques-chip, .study-techniques-hero__note, .study-techniques-session-badge, .study-techniques-modal__badge {
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-chip, .study-techniques-hero__note, .study-techniques-session-badge, .study-techniques-modal__badge {
    border: 1px solid color-mix(in srgb, var(--border-visible) 96%, var(--study-technique-accent));
  }
}

.study-techniques-chip, .study-techniques-hero__note, .study-techniques-session-badge, .study-techniques-modal__badge {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-chip, .study-techniques-hero__note, .study-techniques-session-badge, .study-techniques-modal__badge {
    background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  }
}

.study-techniques-chip, .study-techniques-hero__note, .study-techniques-session-badge, .study-techniques-modal__badge {
  color: var(--text-primary);
  letter-spacing: -.01em;
  font-size: 11px;
  font-weight: 600;
}

.study-techniques-chip--muted, .study-techniques-hero__note {
  color: var(--text-secondary);
}

.study-techniques-hero__note {
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: auto;
  padding: 10px 14px;
}

.study-techniques-hero__note-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.study-techniques-primary-btn, .study-techniques-modal__cta {
  background: linear-gradient(135deg, var(--study-technique-accent), var(--study-technique-accent));
  border: none;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-primary-btn, .study-techniques-modal__cta {
    background: linear-gradient(135deg, var(--study-technique-accent), color-mix(in srgb, var(--study-technique-accent) 74%, white));
  }
}

.study-techniques-primary-btn, .study-techniques-modal__cta {
  color: #fff;
  letter-spacing: -.015em;
  box-shadow: 0 12px 24px var(--study-technique-accent);
  font-size: 13px;
  font-weight: 700;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-primary-btn, .study-techniques-modal__cta {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--study-technique-accent) 24%, transparent);
  }
}

.study-techniques-primary-btn, .study-techniques-modal__cta {
  transition: transform .16s, box-shadow .18s, filter .18s;
}

.study-techniques-primary-btn:hover, .study-techniques-modal__cta:hover {
  filter: saturate(1.06);
  box-shadow: 0 16px 28px var(--study-technique-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-primary-btn:hover, .study-techniques-modal__cta:hover {
    box-shadow: 0 16px 28px color-mix(in srgb, var(--study-technique-accent) 28%, transparent);
  }
}

.technique-card__cta {
  border: 1px solid var(--study-technique-accent);
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__cta {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 40%, var(--border-visible));
  }
}

.technique-card__cta {
  background: linear-gradient(135deg, var(--study-technique-accent), var(--study-technique-accent));
  border-radius: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__cta {
    background: linear-gradient(135deg, var(--study-technique-accent), color-mix(in srgb, var(--study-technique-accent) 72%, #000));
  }
}

.technique-card__cta {
  color: #fff;
  letter-spacing: -.015em;
  box-shadow: 0 12px 24px var(--study-technique-accent), inset 0 1px 0 #ffffff24;
  font-size: 13px;
  font-weight: 700;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__cta {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--study-technique-accent) 30%, transparent), inset 0 1px 0 #ffffff24;
  }
}

.technique-card__cta {
  transition: transform .16s, border-color .18s, background-color .18s, color .18s;
}

.technique-card__cta:hover {
  border-color: var(--study-technique-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__cta:hover {
    border-color: color-mix(in srgb, var(--study-technique-accent) 56%, var(--border-visible));
  }
}

.technique-card__cta:hover {
  filter: saturate(1.06);
  box-shadow: 0 16px 28px var(--study-technique-accent), inset 0 1px 0 #ffffff2e;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__cta:hover {
    box-shadow: 0 16px 28px color-mix(in srgb, var(--study-technique-accent) 36%, transparent), inset 0 1px 0 #ffffff2e;
  }
}

.study-techniques-hero__panel {
  border: 1px solid var(--border-visible);
  border-radius: 24px;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel {
    border: 1px solid color-mix(in srgb, var(--border-visible) 82%, transparent);
  }
}

.study-techniques-hero__panel {
  background: linear-gradient(180deg, var(--bg-hover), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 88%, transparent), color-mix(in srgb, var(--bg-card) 94%, transparent));
  }
}

.study-techniques-hero__panel-head {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  display: grid;
}

.study-techniques-hero__panel-icon, .study-techniques-modal__match-icon, .study-techniques-session-header__icon, .technique-card__icon {
  background: radial-gradient(circle at 30% 30%, #ffffff38, transparent 42%), linear-gradient(180deg, var(--study-technique-surface), var(--bg-card));
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel-icon, .study-techniques-modal__match-icon, .study-techniques-session-header__icon, .technique-card__icon {
    background: radial-gradient(circle at 30% 30%, #ffffff38, transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--study-technique-surface) 100%, transparent), color-mix(in srgb, var(--bg-card) 86%, transparent));
  }
}

.study-techniques-hero__panel-icon, .study-techniques-modal__match-icon, .study-techniques-session-header__icon, .technique-card__icon {
  color: var(--study-technique-accent);
  box-shadow: inset 0 1px 0 #ffffff2e, 0 10px 22px var(--study-technique-glow);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel-icon, .study-techniques-modal__match-icon, .study-techniques-session-header__icon, .technique-card__icon {
    box-shadow: inset 0 1px 0 #ffffff2e, 0 10px 22px color-mix(in srgb, var(--study-technique-glow) 84%, transparent);
  }
}

.study-techniques-hero__panel-icon {
  border: 1px solid var(--study-technique-accent);
  border-radius: 16px;
  width: 44px;
  height: 44px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel-icon {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 26%, var(--border-visible));
  }
}

.study-techniques-hero__panel-label, .study-techniques-modal__step, .study-techniques-session-score__label, .technique-card__rating-label, .technique-card__meta-label {
  color: var(--text-secondary);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.study-techniques-hero__panel-copy, .study-techniques-modal__match-copy, .study-techniques-session-copy, .technique-card__description {
  color: var(--text-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-hero__panel-copy, .study-techniques-modal__match-copy, .study-techniques-session-copy, .technique-card__description {
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  }
}

.study-techniques-hero__panel-copy, .study-techniques-modal__match-copy, .study-techniques-session-copy, .technique-card__description {
  line-height: 1.65;
}

.study-techniques-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.study-techniques-stat-card {
  border: 1px solid var(--border-visible);
  min-height: 128px;
  padding: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-stat-card {
    border: 1px solid color-mix(in srgb, var(--border-visible) 86%, transparent);
  }
}

.study-techniques-stat-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-hover));
  border-radius: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-stat-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-hover) 82%, transparent));
  }
}

.study-techniques-stat-card span {
  color: var(--text-secondary);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.study-techniques-stat-card strong {
  color: var(--text-primary);
  letter-spacing: -.05em;
  margin-top: 10px;
  font-size: 1.45rem;
  font-weight: 800;
  display: block;
}

.study-techniques-stat-card p {
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}

.study-techniques-section-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.study-techniques-section-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.study-techniques-section-title {
  color: var(--text-primary);
  letter-spacing: -.04em;
  margin: 0;
  font-size: 1.55rem;
}

.study-techniques-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.technique-card {
  border: 1px solid var(--border-visible);
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 352px;
  padding: 22px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card {
    border: 1px solid color-mix(in srgb, var(--border-visible) 88%, var(--study-technique-accent));
  }
}

.technique-card {
  background: radial-gradient(circle at top right, var(--study-technique-accent), transparent 34%), radial-gradient(circle at bottom left, var(--study-technique-surface), transparent 36%), linear-gradient(180deg, var(--bg-card), var(--bg-hover));
  border-radius: 28px;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 16%, transparent), transparent 34%), radial-gradient(circle at bottom left, color-mix(in srgb, var(--study-technique-surface) 66%, transparent), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  }
}

.technique-card {
  transition: transform .18s, border-color .18s, box-shadow .18s;
  box-shadow: 0 18px 36px #0000001f, inset 0 1px #ffffff1a;
}

.technique-card:hover {
  border-color: var(--study-technique-accent);
  transform: translateY(-4px);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card:hover {
    border-color: color-mix(in srgb, var(--study-technique-accent) 34%, white);
  }
}

.technique-card:hover {
  box-shadow: 0 22px 44px #00000029, 0 0 0 1px var(--study-technique-accent), inset 0 1px 0 #ffffff1f;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card:hover {
    box-shadow: 0 22px 44px #00000029, 0 0 0 1px color-mix(in srgb, var(--study-technique-accent) 16%, transparent), inset 0 1px 0 #ffffff1f;
  }
}

.technique-card__glow {
  background: radial-gradient(circle, var(--study-technique-glow), transparent 68%);
  pointer-events: none;
  border-radius: 999px;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -92px;
  right: -72px;
}

.technique-card__top, .technique-card__footer, .technique-card__icon-wrap, .technique-card__rating, .study-techniques-modal__header, .study-techniques-modal__title, .study-techniques-modal__loading, .study-techniques-modal__option, .study-techniques-modal__match, .study-techniques-session-header, .study-techniques-session-header__left, .study-techniques-session-header__identity, .study-techniques-session-score__stars {
  align-items: center;
}

.technique-card__top, .technique-card__footer {
  justify-content: space-between;
  gap: 14px;
}

.technique-card__top {
  align-items: flex-start;
}

.technique-card__icon-wrap {
  gap: 12px;
}

.technique-card__identity {
  flex: 1;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.technique-card__copy {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.technique-card__badges {
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
  max-width: 210px;
  display: flex;
}

.technique-card__icon-shell {
  background: radial-gradient(circle, var(--study-technique-glow), transparent 70%);
  border-radius: 22px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 66px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__icon-shell {
    background: radial-gradient(circle, color-mix(in srgb, var(--study-technique-glow) 82%, transparent), transparent 70%);
  }
}

.technique-card__icon {
  border: 1px solid var(--study-technique-accent);
  border-radius: 18px;
  width: 54px;
  height: 54px;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__icon {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 28%, var(--border-visible));
  }
}

.technique-card__eyebrow {
  background: var(--study-technique-surface);
  border-radius: 999px;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__eyebrow {
    background: color-mix(in srgb, var(--study-technique-surface) 100%, transparent);
  }
}

.technique-card__eyebrow {
  color: var(--study-technique-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__eyebrow {
    color: color-mix(in srgb, var(--study-technique-accent) 78%, white);
  }
}

.technique-card__eyebrow {
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.technique-card__impact-pill, .technique-card__pace {
  letter-spacing: .01em;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.technique-card__impact-pill {
  border: 1px solid var(--study-technique-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__impact-pill {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 22%, var(--border-visible));
  }
}

.technique-card__impact-pill {
  background: var(--study-technique-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__impact-pill {
    background: color-mix(in srgb, var(--study-technique-surface) 74%, transparent);
  }
}

.technique-card__impact-pill {
  color: var(--study-technique-accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__impact-pill {
    color: color-mix(in srgb, var(--study-technique-accent) 82%, white);
  }
}

.technique-card__pace {
  border: 1px solid var(--border-visible);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__pace {
    border: 1px solid color-mix(in srgb, var(--border-visible) 90%, transparent);
  }
}

.technique-card__pace {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__pace {
    background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  }
}

.technique-card__pace {
  color: var(--text-secondary);
}

.technique-card__body {
  flex-direction: column;
  flex: 1;
  gap: 16px;
  min-height: 0;
  display: flex;
}

.technique-card__title, .study-techniques-modal__question, .study-techniques-modal__match-title, .study-techniques-session-title {
  color: var(--text-primary);
  letter-spacing: -.035em;
}

.technique-card__title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.08;
}

.technique-card__description {
  max-width: 34ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
}

.technique-card__focus {
  border: 1px solid var(--border-visible);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 10px;
  min-height: 116px;
  padding: 16px 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__focus {
    border: 1px solid color-mix(in srgb, var(--border-visible) 88%, transparent);
  }
}

.technique-card__focus {
  background: radial-gradient(circle at top right, var(--study-technique-accent), transparent 38%), linear-gradient(180deg, var(--bg-hover), var(--bg-card));
  border-radius: 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__focus {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 12%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 94%, transparent), color-mix(in srgb, var(--bg-card) 88%, transparent));
  }
}

.technique-card__focus {
  box-shadow: inset 0 1px #ffffff14;
}

.technique-card__focus strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.technique-card__meta-label {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.technique-card__footer {
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  margin-top: auto;
  display: flex;
}

.technique-card__rating {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.technique-card__rating-panel {
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__rating-panel {
    border: 1px solid color-mix(in srgb, var(--border-visible) 82%, transparent);
  }
}

.technique-card__rating-panel {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .technique-card__rating-panel {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
  }
}

.technique-card__rating-copy {
  max-width: 17ch;
  color: var(--text-secondary);
  text-align: right;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.technique-card__stars, .study-techniques-session-score__stars {
  color: var(--study-technique-accent);
  gap: 4px;
}

.technique-card__cta {
  white-space: nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  width: 100%;
  padding-inline: 18px;
}

.study-techniques-session-view {
  z-index: 1;
  position: relative;
}

.study-techniques-session-view > div:last-child {
  padding: 14px 20px !important;
}

.study-techniques-session-header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 10px 20px;
}

.study-techniques-session-header__left, .study-techniques-session-header__identity {
  align-items: center;
  gap: 10px;
}

.study-techniques-session-header__left {
  flex-wrap: nowrap;
  flex: 1;
  align-items: center;
}

.study-techniques-session-back, .study-techniques-modal__ghost, .study-techniques-modal__close {
  border: 1px solid var(--border-visible);
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-session-back, .study-techniques-modal__ghost, .study-techniques-modal__close {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.study-techniques-session-back, .study-techniques-modal__ghost, .study-techniques-modal__close {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-session-back, .study-techniques-modal__ghost, .study-techniques-modal__close {
    background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  }
}

.study-techniques-session-back, .study-techniques-modal__ghost, .study-techniques-modal__close {
  color: var(--text-secondary);
  transition: transform .16s, color .16s, border-color .16s;
}

.study-techniques-session-back, .study-techniques-modal__ghost {
  border-radius: 999px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
}

.study-techniques-modal__close {
  border-radius: 12px;
  width: 38px;
  height: 38px;
}

.study-techniques-session-back:hover, .study-techniques-modal__ghost:hover, .study-techniques-modal__close:hover {
  border-color: var(--study-technique-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-session-back:hover, .study-techniques-modal__ghost:hover, .study-techniques-modal__close:hover {
    border-color: color-mix(in srgb, var(--study-technique-accent) 22%, var(--border-visible));
  }
}

.study-techniques-session-back:hover, .study-techniques-modal__ghost:hover, .study-techniques-modal__close:hover {
  color: var(--text-primary);
}

.study-techniques-session-header__icon, .study-techniques-modal__match-icon {
  border: 1px solid var(--study-technique-accent);
  flex-shrink: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-session-header__icon, .study-techniques-modal__match-icon {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 28%, var(--border-visible));
  }
}

.study-techniques-session-header__icon {
  display: none;
}

.study-techniques-session-title {
  letter-spacing: -.01em;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  overflow: hidden;
}

.study-techniques-session-copy, .study-techniques-session-score, .study-techniques-session-header .study-techniques-session-badge {
  display: none;
}

.study-techniques-modal {
  padding: 22px;
}

.study-techniques-modal__header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.study-techniques-modal__title {
  color: var(--text-primary);
  gap: 10px;
  margin: 0;
  font-size: 1.2rem;
}

.study-techniques-modal__progress {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  display: grid;
}

.study-techniques-modal__progress-bar {
  background: linear-gradient(90deg, var(--study-technique-accent), var(--study-technique-accent));
  border-radius: 999px;
  height: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__progress-bar {
    background: linear-gradient(90deg, var(--study-technique-accent), color-mix(in srgb, var(--study-technique-accent) 52%, white));
  }
}

.study-techniques-modal__progress-bar {
  transform-origin: 0;
  transition: transform .18s, opacity .18s;
}

.study-techniques-modal__question {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
}

.study-techniques-modal__options {
  gap: 10px;
  display: grid;
}

.study-techniques-modal__option {
  border: 1px solid var(--border-visible);
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__option {
    border: 1px solid color-mix(in srgb, var(--border-visible) 92%, transparent);
  }
}

.study-techniques-modal__option {
  background: var(--bg-hover);
  border-radius: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__option {
    background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  }
}

.study-techniques-modal__option {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: transform .16s, border-color .16s, background-color .16s;
}

.study-techniques-modal__option:hover {
  border-color: var(--study-technique-accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__option:hover {
    border-color: color-mix(in srgb, var(--study-technique-accent) 24%, var(--border-visible));
  }
}

.study-techniques-modal__option:hover {
  background: var(--study-technique-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__option:hover {
    background: color-mix(in srgb, var(--study-technique-surface) 70%, var(--bg-hover));
  }
}

.study-techniques-modal__loading {
  min-height: 190px;
  color: var(--text-secondary);
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.study-techniques-modal__spinner {
  border: 3px solid var(--border-visible);
  width: 34px;
  height: 34px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__spinner {
    border: 3px solid color-mix(in srgb, var(--border-visible) 100%, transparent);
  }
}

.study-techniques-modal__spinner {
  border-top-color: var(--study-technique-accent);
  border-radius: 999px;
  animation: .8s linear infinite spin;
}

.study-techniques-modal__match {
  border: 1px solid var(--study-technique-accent);
  border-radius: 22px;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__match {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 20%, var(--border-visible));
  }
}

.study-techniques-modal__match {
  background: radial-gradient(circle at top right, var(--study-technique-accent), transparent 34%), var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__match {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 12%, transparent), transparent 34%), color-mix(in srgb, var(--bg-hover) 82%, transparent);
  }
}

.study-techniques-modal__match-icon {
  border-radius: 18px;
  width: 52px;
  height: 52px;
}

.study-techniques-modal__match-title {
  margin: 0;
  font-size: 1.3rem;
}

.study-techniques-modal__match-copy {
  font-size: 14px;
}

.study-techniques-modal__cta, .study-techniques-modal__ghost {
  width: 100%;
}

.study-techniques-modal__option {
  text-align: left;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
}

.study-techniques-modal__option > svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.study-techniques-modal__option-body {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.study-techniques-modal__option-hint {
  color: var(--text-secondary);
  letter-spacing: .005em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.study-techniques-modal__back {
  width: auto;
}

.study-techniques-modal__tip {
  border: 1px solid var(--study-technique-accent);
  border-radius: 14px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__tip {
    border: 1px solid color-mix(in srgb, var(--study-technique-accent) 18%, var(--border-visible));
  }
}

.study-techniques-modal__tip {
  background: var(--study-technique-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__tip {
    background: color-mix(in srgb, var(--study-technique-surface) 60%, transparent);
  }
}

.study-techniques-modal__tip {
  color: var(--text-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__tip {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
  }
}

.study-techniques-modal__tip {
  font-size: 13px;
  line-height: 1.55;
}

.study-techniques-modal__tip > svg {
  color: var(--study-technique-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.study-techniques-modal__trail {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.study-techniques-modal__trail-chip {
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__trail-chip {
    border: 1px solid color-mix(in srgb, var(--border-visible) 96%, transparent);
  }
}

.study-techniques-modal__trail-chip {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .study-techniques-modal__trail-chip {
    background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  }
}

.study-techniques-modal__trail-chip {
  color: var(--text-muted);
  letter-spacing: .01em;
  font-size: 11px;
  font-weight: 500;
}

.study-techniques-modal__actions {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.study-techniques-modal__actions .study-techniques-modal__cta {
  flex: auto;
  width: auto;
}

.study-techniques-modal__actions .study-techniques-modal__ghost {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 0 14px;
}

@media (max-width: 520px) {
  .study-techniques-modal__actions {
    flex-direction: column;
  }

  .study-techniques-modal__actions .study-techniques-modal__ghost {
    width: 100%;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: .5s cubic-bezier(.22, 1, .36, 1) both fadeUp;
}

@media (max-width: 1279px) {
  .study-techniques-toolbar, .study-techniques-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .study-techniques-strip, .study-techniques-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-techniques-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .study-techniques-shell {
    padding: calc(var(--mobile-chrome-clearance) + 4px) 14px calc(24px + env(safe-area-inset-bottom));
    gap: 18px;
  }

  .study-techniques-session-view {
    padding-top: var(--mobile-chrome-clearance);
  }

  .study-techniques-session-view > div:last-child {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .study-techniques-hero, .study-techniques-modal, .study-techniques-session-header {
    border-radius: 22px;
  }

  .study-techniques-hero, .study-techniques-modal, .study-techniques-session-header, .technique-card {
    padding: 16px;
  }

  .study-techniques-grid, .study-techniques-strip, .study-techniques-stats-grid, .technique-card__meta-grid {
    grid-template-columns: 1fr;
  }

  .study-techniques-toolbar, .study-techniques-section-head, .study-techniques-session-header, .technique-card:not(.technique-card--compact) .technique-card__top, .technique-card:not(.technique-card--compact) .technique-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .study-techniques-toolbar {
    padding: 14px;
  }

  .study-techniques-toolbar__title-row {
    gap: 10px;
  }

  .study-techniques-toolbar__title {
    max-width: none;
    font-size: 1.35rem;
  }

  .study-techniques-toolbar__actions {
    justify-content: stretch;
  }

  .study-techniques-cta-bar .study-techniques-primary-btn, .study-techniques-primary-btn, .technique-card__cta {
    width: 100%;
  }

  .technique-card__badges {
    justify-content: flex-start;
    max-width: none;
  }

  .technique-card__cta {
    width: 100%;
  }

  .technique-card__focus {
    min-height: 0;
  }

  .technique-card__rating-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .technique-card__rating-copy {
    text-align: left;
    max-width: none;
  }

  .study-techniques-session-score {
    min-width: 0;
  }

  .study-techniques-session-header {
    margin: 14px 14px 0;
  }

  .study-techniques-session-header__identity {
    align-items: flex-start;
  }

  .study-techniques-modal__question {
    font-size: 1.2rem;
  }

  .study-techniques-hero__title {
    max-width: none;
  }
}

.page-shell {
  background: var(--dashboard-shell-bg);
  min-height: 100%;
  padding: 24px 28px 36px;
}

.page-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.page-kicker {
  color: var(--text-secondary);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
}

.page-title {
  color: var(--text-primary);
  letter-spacing: -.035em;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}

.page-subtitle {
  color: var(--text-secondary);
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
}

.page-panel {
  border: 1px solid var(--dashboard-card-border);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-card));
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .page-panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-card) 92%, var(--bg-secondary)));
  }
}

.page-panel {
  box-shadow: 0 8px 18px #00000014, inset 0 1px #ffffff14;
}

.page-panel:before {
  content: "";
  background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
  height: 1px;
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .page-panel:before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-hover) 30%, transparent), transparent);
  }
}

.page-panel:before {
  opacity: .7;
  pointer-events: none;
}

.page-panel--interactive {
  cursor: pointer;
  transition: transform .16s, border-color .18s, background-color .18s, box-shadow .18s;
}

.page-panel--interactive:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px #0000001f, inset 0 1px #ffffff1a;
}

.page-icon-chip {
  border: 1px solid var(--accent);
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .page-icon-chip {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-visible));
  }
}

.page-icon-chip {
  background: linear-gradient(180deg, var(--bg-hover), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .page-icon-chip {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 84%, transparent), color-mix(in srgb, var(--bg-card) 92%, transparent));
  }
}

.page-icon-chip {
  color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-icon-chip {
    color: color-mix(in srgb, var(--text-primary) 80%, var(--accent));
  }
}

.page-icon-chip {
  box-shadow: inset 0 1px #ffffff1a, 0 4px 10px #0000001a;
}

.page-btn {
  letter-spacing: -.01em;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  transition: transform .16s, background-color .18s, border-color .18s, color .18s, box-shadow .18s, filter .18s;
  display: inline-flex;
}

.page-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 8px 18px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-btn--primary {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.page-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.page-btn--dark {
  color: #fff;
  background: #0a0a0a;
  box-shadow: 0 8px 18px #0000003d;
}

.page-btn--dark:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.page-btn--ghost {
  border-color: var(--dashboard-chip-border);
  background: var(--dashboard-chip-bg);
  color: var(--text-primary);
}

.page-btn--ghost:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-btn--ghost:hover {
    background: color-mix(in srgb, var(--bg-hover) 88%, white 2%);
  }
}

.page-btn--ghost:hover {
  border-color: var(--border-hover);
}

.quiz-page-header__switch {
  justify-content: center;
  display: flex;
}

@media (min-width: 1024px) {
  .quiz-page-header {
    flex-wrap: nowrap;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    display: grid;
  }

  .quiz-page-header__title {
    min-width: 0;
  }

  .quiz-page-header__actions {
    justify-self: end;
  }
}

.quiz-switch {
  background: var(--bg-secondary);
  border: 1px solid var(--border-visible);
  padding: 3px;
}

.quiz-switch__option {
  letter-spacing: .005em;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .18s, background-color .18s, box-shadow .18s;
}

.quiz-switch__option:hover:not([aria-selected="true"]) {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.quiz-switch__option[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-elevated);
  font-weight: 600;
  box-shadow: inset 0 1px #ffffff0f, 0 1px 2px #0000004d;
}

:root[data-theme="light"] .quiz-switch__option[aria-selected="true"] {
  background: var(--bg-card);
  box-shadow: 0 1px 2px #00000014, 0 0 0 1px #0000000d;
}

.quiz-switch__option:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.page-input {
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  width: 100%;
  color: var(--text-primary);
  border-radius: 12px;
  outline: none;
  font-size: 13.5px;
  transition: border-color .18s, box-shadow .18s;
}

.page-input::placeholder {
  color: var(--text-muted);
}

.page-input:focus {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-input:focus {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border-visible));
  }
}

.page-input:focus {
  box-shadow: 0 0 0 3px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

.app-field {
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-radius: 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.app-field::placeholder {
  color: var(--text-muted);
}

.app-field:focus {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-field:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-visible));
  }
}

.app-field:focus {
  box-shadow: 0 0 0 3px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-field:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}

.app-select-trigger {
  text-align: left;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: inline-flex;
}

.app-select-trigger:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.app-select-trigger--sm {
  padding-top: .375rem !important;
  padding-bottom: .375rem !important;
  font-size: .6875rem !important;
}

.app-select-trigger--embedded {
  width: 100%;
  min-width: 0;
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 0;
  flex: 1;
  padding: 0;
  font-size: .875rem;
}

.app-select-trigger--embedded:focus-visible {
  box-shadow: none;
  outline: none;
}

.app-select-label {
  min-width: 0;
  color: var(--text-primary);
  flex: 1;
}

.app-select-label--placeholder {
  color: var(--text-muted);
}

.app-select-chevron {
  color: var(--text-muted);
  transition: transform .18s, color .15s;
}

.app-select-chevron--open {
  color: var(--text-secondary);
  transform: rotate(180deg);
}

.app-select-trigger:focus-visible {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-select-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-visible));
  }
}

.app-select-trigger:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-select-trigger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
}

.app-select-menu {
  border: 1px solid var(--border-visible);
  background: var(--bg-popup);
  max-height: min(16rem, 50vh);
  box-shadow: var(--shadow-lg);
  border-radius: .875rem;
  padding: .375rem;
  overflow-y: auto;
}

.app-select-option {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .625rem;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  font-size: .8125rem;
  font-weight: 500;
  transition: background-color .12s, color .12s;
  display: flex;
}

.app-select-option:hover:not(:disabled) {
  background: var(--bg-hover);
}

.app-select-option--active {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

.app-select-option--active:hover:not(:disabled) {
  background: var(--accent-subtle);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-select-option--active:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-subtle) 80%, var(--bg-hover));
  }
}

.app-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.app-select-option-label {
  flex: 1;
  min-width: 0;
}

.app-select-option-check {
  color: var(--accent);
}

.app-select-menu--calendar {
  border-color: var(--calendar-picker-border);
  background: var(--calendar-picker-surface);
  box-shadow: var(--shadow-md);
  border-radius: 1rem;
  padding: .5rem;
}

.app-select-groups {
  gap: .5rem;
  display: grid;
}

.app-select-group {
  border: 1px solid var(--calendar-picker-border);
  background: var(--calendar-picker-card);
  border-radius: .75rem;
  padding: .625rem;
}

.app-select-group-label {
  color: var(--calendar-picker-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .375rem;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.25;
}

.app-select-menu--calendar .app-select-option {
  min-height: 2.5rem;
  color: var(--calendar-picker-text);
}

.app-select-menu--calendar .app-select-option:hover:not(:disabled) {
  background: var(--calendar-picker-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-select-menu--calendar .app-select-option:hover:not(:disabled) {
    background: color-mix(in srgb, var(--calendar-picker-surface) 82%, var(--calendar-picker-card));
  }
}

.app-select-menu--calendar .app-select-option--active, .app-select-menu--calendar .app-select-option--active:hover:not(:disabled) {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .app-select-menu--calendar .app-select-option--active, .app-select-menu--calendar .app-select-option--active:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 12%, var(--calendar-picker-card));
  }
}

.app-select-menu--calendar .app-select-option-check {
  color: var(--calendar-picker-text);
}

.app-select-group-empty {
  color: var(--calendar-picker-muted);
  padding: .5rem .625rem;
  font-size: .8125rem;
  line-height: 1.4;
}

.app-modal-section {
  border: 1px solid var(--border-visible);
  background: none;
  border-radius: 12px;
  padding: 1rem;
}

.event-modal-gcal-toolbar {
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem 0;
  display: flex;
}

.event-modal-gcal-close {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background-color .15s, color .15s;
  display: flex;
}

.event-modal-gcal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.event-modal-gcal-title {
  border: none;
  border-bottom: 1px solid var(--border-visible);
  width: 100%;
  color: var(--text-primary);
  letter-spacing: -.02em;
  background: none;
  outline: none;
  margin-bottom: .25rem;
  padding: .125rem 0 .625rem;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.35;
  transition: border-color .15s;
}

.event-modal-gcal-title::placeholder {
  color: var(--text-muted);
}

.event-modal-gcal-title:focus {
  border-bottom-color: var(--accent);
}

.event-modal-gcal-row {
  border-bottom: 1px solid var(--border-visible);
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 0;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-modal-gcal-row {
    border-bottom: 1px solid color-mix(in srgb, var(--border-visible) 65%, transparent);
  }
}

.event-modal-gcal-row:last-of-type {
  border-bottom: none;
}

.event-modal-gcal-row-icon {
  flex-shrink: 0;
  justify-content: center;
  width: 1.5rem;
  padding-top: .125rem;
  display: flex;
}

.event-modal-gcal-row-body {
  flex: 1;
  min-width: 0;
}

.event-modal-gcal-summary {
  color: var(--text-primary);
  margin: 0 0 .375rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
}

.event-modal-gcal-check {
  cursor: pointer;
  color: var(--text-secondary);
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  display: inline-flex;
}

.event-modal-gcal-check input {
  accent-color: var(--accent);
}

.event-modal-gcal-textarea {
  resize: vertical;
  width: 100%;
  min-height: 3rem;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  font-size: .875rem;
  line-height: 1.5;
}

.event-modal-gcal-textarea::placeholder {
  color: var(--text-muted);
}

.event-modal-gcal-inline-input {
  width: 100%;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  font-size: .875rem;
  line-height: 1.5;
}

.event-modal-gcal-inline-input::placeholder {
  color: var(--text-muted);
}

.event-modal-gcal-guests {
  width: 100%;
  position: relative;
}

.event-modal-gcal-guest-chip {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 999px;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem .1875rem .625rem;
  font-size: .8125rem;
  line-height: 1.35;
  display: inline-flex;
}

.event-modal-gcal-guest-chip-remove {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: .125rem;
  transition: color .15s, background-color .15s;
  display: flex;
}

.event-modal-gcal-guest-chip-remove:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.event-modal-gcal-guest-dropdown {
  z-index: 10;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  border-radius: .75rem;
  max-height: 11rem;
  margin: 0;
  padding: .25rem;
  list-style: none;
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  overflow-y: auto;
}

.event-modal-gcal-guest-option {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .5rem;
  padding: .5rem .625rem;
  font-size: .8125rem;
  transition: background-color .15s;
  display: block;
}

.event-modal-gcal-guest-option:hover:not(.event-modal-gcal-guest-option--muted) {
  background: var(--bg-hover);
}

.event-modal-gcal-guest-option--muted {
  cursor: default;
  color: var(--text-muted);
}

.event-modal-gcal-footer {
  border-top: 1px solid var(--border-visible);
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem 1.125rem;
  display: flex;
}

.event-modal-gcal-more {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-size: .875rem;
  font-weight: 500;
  transition: opacity .15s;
}

.event-modal-gcal-more:hover {
  opacity: .85;
}

.event-modal-gcal-save {
  background: var(--accent);
  min-width: 5.5rem;
  color: var(--btn-primary-text, #fff);
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: .5625rem 1.375rem;
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .15s, opacity .15s;
}

.event-modal-gcal-save:hover:not(:disabled) {
  background: var(--accent-hover);
}

.event-modal-gcal-save:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.page-pill {
  border: 1px solid var(--dashboard-chip-border);
  background: var(--dashboard-chip-bg);
  color: var(--text-secondary);
  letter-spacing: -.01em;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.page-pill--accent {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-pill--accent {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border-visible));
  }
}

.page-pill--accent {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-pill--accent {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  }
}

.page-pill--accent {
  color: var(--text-primary);
}

.page-empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 72px 24px;
  display: flex;
}

.page-empty-icon-wrap {
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
  position: relative;
}

.page-empty-icon-wrap:before {
  content: none;
}

.page-empty-icon {
  background: var(--bg-elevated);
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-icon {
    background: color-mix(in srgb, var(--bg-elevated) 70%, var(--bg-hover));
  }
}

.page-empty-icon {
  color: var(--text-muted);
  box-shadow: none;
}

:root[data-theme="light"] .page-empty-icon {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .page-empty-icon {
    background: color-mix(in srgb, var(--bg-hover) 85%, #e8e8e8);
  }
}

:root[data-theme="light"] .page-empty-icon {
  color: var(--text-muted);
}

.page-empty-icon--brand {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-icon--brand {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  }
}

:root[data-theme="light"] .page-empty-icon--brand {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .page-empty-icon--brand {
    background: color-mix(in srgb, var(--accent) 9%, #fff);
  }
}

.page-empty-icon--bare, .page-empty--lg .page-empty-icon--bare, :root[data-theme="light"] .page-empty-icon--bare {
  width: auto;
  height: auto;
  box-shadow: none;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-radius: 0;
}

.page-empty-brand-mark {
  width: 32px;
  height: auto;
  display: block;
}

.page-empty--lg .page-empty-brand-mark {
  width: 38px;
}

.page-empty--lg .page-empty-icon--bare .page-empty-brand-mark {
  width: 56px;
}

.page-empty-title {
  color: var(--text-primary);
  letter-spacing: -.015em;
  font-size: 16px;
  font-weight: 600;
}

.page-empty-sub {
  max-width: 400px;
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.page-empty--lg .page-empty-icon-wrap {
  margin-bottom: 24px;
}

.page-empty--lg .page-empty-icon {
  border-radius: 999px;
  width: 88px;
  height: 88px;
}

.page-empty--lg .page-empty-title {
  font-size: 22px;
  font-weight: 700;
}

.page-empty--lg .page-empty-sub {
  max-width: 460px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.65;
}

.page-empty--lg .page-empty-cta {
  margin-top: 24px;
  padding: 11px 20px;
  font-size: 14px;
}

.page-empty-cta {
  border: 1px solid var(--accent);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 9px 18px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-cta {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-visible));
  }
}

.page-empty-cta {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-cta {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }
}

.page-empty-cta {
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: transform .16s, background-color .18s, border-color .18s;
}

.page-empty-cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-cta:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
  }
}

.page-empty-cta:hover {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-empty-cta:hover {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-visible));
  }
}

.page-empty-cta--white {
  background: var(--bg-primary);
  border: 1.5px solid var(--text-primary);
  color: var(--text-primary);
}

.page-empty-cta--white:hover {
  background: var(--bg-hover);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.empty-state {
  isolation: isolate;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(400px, 58vh, 560px);
  padding: clamp(52px, 7vw, 80px) 24px clamp(72px, 8vw, 96px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.empty-state:before {
  content: "";
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--accent), transparent 68%);
  width: min(620px, 88vw);
  height: 360px;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state:before {
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%);
  }
}

.empty-state:before {
  pointer-events: none;
}

.empty-state__visual {
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  display: grid;
  position: relative;
}

.empty-state__halo {
  background: radial-gradient(circle, var(--accent), transparent 68%);
  border-radius: 999px;
  position: absolute;
  inset: -18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__halo {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  }
}

.empty-state__orbit {
  border: 1px solid var(--accent);
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__orbit {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-visible));
  }
}

.empty-state__orbit {
  pointer-events: none;
  border-radius: 999px;
}

.empty-state__orbit--outer {
  opacity: .42;
  inset: 3px;
}

.empty-state__orbit--inner {
  opacity: .6;
  border-style: dashed;
  inset: 16px;
  transform: rotate(18deg);
}

.empty-state__icon-shell {
  border: 1px solid var(--accent);
  width: 68px;
  height: 68px;
  padding: 5px;
  display: grid;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-shell {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-visible));
  }
}

.empty-state__icon-shell {
  background: var(--bg-card);
  border-radius: 22px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-shell {
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
  }
}

.empty-state__icon-shell {
  box-shadow: 0 18px 42px var(--bg-primary), inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-shell {
    box-shadow: 0 18px 42px color-mix(in srgb, var(--bg-primary) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

.empty-state__icon-core {
  border: 1px solid var(--accent);
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-core {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-visible));
  }
}

.empty-state__icon-core {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border-radius: 17px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-core {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 84%, var(--accent) 16%), var(--bg-card));
  }
}

.empty-state__icon-core {
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__icon-core {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

.empty-state__content {
  flex-direction: column;
  align-items: center;
  width: min(100%, 620px);
  display: flex;
}

.empty-state__eyebrow {
  color: var(--text-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.empty-state__eyebrow-line {
  background: var(--accent);
  width: 18px;
  height: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__eyebrow-line {
    background: color-mix(in srgb, var(--accent) 48%, transparent);
  }
}

.empty-state__title {
  max-width: 560px;
  color: var(--text-primary);
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
  font-family: Georgia, Times New Roman, serif;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.14;
}

.empty-state__description {
  max-width: 540px;
  color: var(--text-secondary);
  letter-spacing: .005em;
  text-wrap: pretty;
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.empty-state__details {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  display: flex;
}

.empty-state__detail {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px 6px 7px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__detail {
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
  }
}

.empty-state__detail {
  color: var(--text-secondary);
  letter-spacing: .01em;
  font-size: 11.5px;
  font-weight: 550;
}

.empty-state__detail-mark {
  background: var(--accent-subtle);
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  border-radius: 999px;
  place-items: center;
  display: grid;
}

.empty-state__actions {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  display: flex;
}

.empty-state__action {
  letter-spacing: -.01em;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 650;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
  display: inline-flex;
}

.empty-state__action:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
  outline: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__action:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.empty-state__action--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: 0 10px 24px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__action--primary {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

.empty-state__action--primary:hover {
  background: var(--btn-primary-bg-hover);
}

.empty-state__action--secondary {
  border-color: var(--border-visible);
  background: var(--bg-card);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state__action--secondary {
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  }
}

.empty-state__action--secondary {
  color: var(--text-primary);
}

.empty-state__action--secondary:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.empty-state__action-arrow {
  opacity: .8;
  margin-left: 2px;
  transition: transform .18s;
}

.empty-state__action--primary:hover .empty-state__action-arrow {
  transform: translateX(2px);
}

.empty-state--search {
  min-height: 360px;
  padding-top: 52px;
  padding-bottom: 64px;
}

.empty-state--search:before {
  opacity: .55;
}

.empty-state--search .empty-state__visual {
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
}

.empty-state--search .empty-state__halo {
  inset: -10px;
}

.empty-state--search .empty-state__orbit--outer {
  inset: 1px;
}

.empty-state--search .empty-state__orbit--inner {
  inset: 12px;
}

.empty-state--search .empty-state__icon-shell {
  border-radius: 18px;
  width: 56px;
  height: 56px;
}

.empty-state--search .empty-state__icon-core {
  border-radius: 13px;
}

.empty-state--search .empty-state__title {
  letter-spacing: -.025em;
  font-family: inherit;
  font-size: 20px;
  font-weight: 650;
}

.empty-state--search .empty-state__description {
  max-width: 420px;
  margin-top: 8px;
  font-size: 13.5px;
}

.empty-state--search .empty-state__actions {
  margin-top: 20px;
}

.empty-state--search .empty-state__action--primary {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--text-primary);
  box-shadow: none;
}

.empty-state--search .empty-state__action--primary:hover {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state--search .empty-state__action--primary:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  }
}

.empty-state--compact {
  border: 1px dashed var(--accent);
  flex-direction: row;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  min-height: 168px;
  padding: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state--compact {
    border: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border-visible));
  }
}

.empty-state--compact {
  background: var(--bg-card);
  border-radius: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .empty-state--compact {
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
  }
}

.empty-state--compact {
  text-align: left;
}

.empty-state--compact:before {
  opacity: .65;
  width: 260px;
  height: 220px;
  top: 50%;
  left: 0;
  transform: translate(-38%, -50%);
}

.empty-state--compact .empty-state__visual {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  margin: 0;
}

.empty-state--compact .empty-state__halo {
  inset: -8px;
}

.empty-state--compact .empty-state__orbit--outer {
  inset: 0;
}

.empty-state--compact .empty-state__orbit--inner {
  inset: 10px;
}

.empty-state--compact .empty-state__icon-shell {
  border-radius: 17px;
  width: 50px;
  height: 50px;
}

.empty-state--compact .empty-state__icon-core {
  border-radius: 12px;
}

.empty-state--compact .empty-state__content {
  align-items: flex-start;
  width: auto;
  min-width: 0;
}

.empty-state--compact .empty-state__eyebrow {
  justify-content: flex-start;
  margin-bottom: 7px;
  font-size: 10px;
}

.empty-state--compact .empty-state__eyebrow-line:last-child {
  display: none;
}

.empty-state--compact .empty-state__title {
  letter-spacing: -.02em;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}

.empty-state--compact .empty-state__description {
  max-width: 440px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
}

.empty-state--compact .empty-state__actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.empty-state--compact .empty-state__action {
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .empty-state {
    min-height: calc(100dvh - 176px);
    padding: 52px 20px calc(148px + env(safe-area-inset-bottom, 0px));
  }

  .empty-state:before {
    width: 120vw;
    top: 5%;
  }

  .empty-state__visual {
    width: 100px;
    height: 100px;
    margin-bottom: 18px;
  }

  .empty-state__title {
    max-width: 320px;
    font-size: 25px;
  }

  .empty-state__description {
    max-width: 340px;
    margin-top: 11px;
    font-size: 14px;
  }

  .empty-state__details {
    gap: 7px;
    max-width: 340px;
    margin-top: 19px;
  }

  .empty-state__actions {
    width: min(100%, 340px);
    margin-top: 22px;
  }

  .empty-state__action {
    width: 100%;
  }

  .empty-state--search {
    min-height: calc(100dvh - 176px);
  }

  .empty-state--compact {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 18px;
  }

  .empty-state--compact:before {
    width: 220px;
    height: 180px;
    top: 0;
    left: 0;
    transform: translate(-42%, -40%);
  }

  .empty-state--compact .empty-state__visual {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }

  .empty-state--compact .empty-state__actions, .empty-state--compact .empty-state__action {
    width: 100%;
  }
}

.page-section-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}

.page-section-title {
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.page-inline-link {
  color: var(--text-secondary);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  transition: color .16s;
  display: inline-flex;
}

.page-inline-link:hover {
  color: var(--text-primary);
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-visible);
  border-radius: 18px;
  box-shadow: inset 0 1px #fff9, 0 1px 2px #0000000a;
}

.course-inset {
  background: var(--bg-hover-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.course-card {
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s, border-color .18s;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px #0000001a;
}

.course-icon-edit-btn {
  cursor: pointer;
  overflow: visible;
}

.course-icon-edit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.courses-page {
  max-width: 1180px;
  margin-inline: auto;
}

.courses-detail {
  max-width: 1080px;
}

@media (max-width: 767px) {
  .page-shell.courses-detail {
    padding-top: 4px;
  }

  .courses-detail .course-detail-tabs {
    z-index: 1;
    margin-top: 0;
    position: relative;
  }
}

.courses-page-title {
  color: var(--text-primary);
  letter-spacing: -.025em;
  margin: 0;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
}

.courses-page-subtitle {
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}

.courses-btn {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: background .14s, border-color .14s, color .14s, filter .14s;
  display: inline-flex;
}

.courses-btn--primary {
  color: var(--accent-text);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow: 0 1px 2px #0000004d;
}

.courses-btn--primary:hover {
  filter: brightness(1.06);
}

.courses-btn--ghost {
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-visible);
}

.courses-btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.courses-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  width: 100%;
}

@media (min-width: 640px) {
  .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.courses-grid > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  animation: .5s cubic-bezier(.22, 1, .36, 1) both courseFadeUp;
  display: flex;
}

.courses-grid .course-card {
  box-sizing: border-box;
  flex: auto;
  width: 100%;
  max-width: 100%;
}

.course-card-code-slot {
  min-height: 20px;
}

.courses-grid > :first-child {
  animation-delay: 0s;
}

.courses-grid > :nth-child(2) {
  animation-delay: 50ms;
}

.courses-grid > :nth-child(3) {
  animation-delay: .1s;
}

.courses-grid > :nth-child(4) {
  animation-delay: .15s;
}

.courses-grid > :nth-child(5) {
  animation-delay: .2s;
}

.courses-grid > :nth-child(6) {
  animation-delay: .25s;
}

@keyframes courseFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root[data-theme="dark"] .panel {
  box-shadow: inset 0 1px 0 #ffffff0f, var(--shadow-xs);
}

:root[data-theme="dark"] .course-card:hover {
  box-shadow: var(--shadow-md);
}

.institution-dropdown-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

:root[data-theme="light"] .institution-dropdown-name {
  color: var(--text-primary);
}

:root {
  --mobile-chrome-size: 44px;
  --mobile-chrome-inset: 10px;
  --mobile-chrome-clearance: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset) + var(--mobile-chrome-size) + 10px);
  --mobile-edge: 16px;
  --mobile-drawer-width: min(86vw, 320px);
  --mobile-drawer-push-w: 78vw;
  --z-mobile-chrome: 70;
  --z-mobile-overlay: 100;
  --z-mobile-sheet: 110;
  --z-popover: 10050;
}

.mobile-push-root {
  touch-action: pan-y;
  overscroll-behavior-x: none;
  background: var(--bg-card);
  flex: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mobile-push-panel {
  z-index: 0;
  background: var(--bg-card);
  flex-direction: column;
  width: 100%;
  max-width: none;
  display: flex;
  position: absolute;
  inset: 0;
}

.mobile-push-stage {
  z-index: 2;
  background: var(--bg-primary);
  will-change: transform, border-radius;
  backface-visibility: hidden;
  isolation: isolate;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  flex-direction: column;
  flex: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mobile-push-stage__inner {
  border-radius: var(--mobile-drawer-radius, 0px);
  background: var(--bg-primary);
  flex-direction: column;
  flex: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.mobile-push-scrim {
  z-index: 40;
  border-radius: inherit;
  background: var(--bg-primary);
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-push-scrim {
    background: color-mix(in srgb, var(--bg-primary) 50%, transparent);
  }
}

.mobile-push-scrim {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-side-panel {
  width: min(100%, var(--mobile-drawer-push-w, 82vw));
  background: var(--bg-card);
  height: 100%;
  padding-top: env(safe-area-inset-top);
  outline: none;
  flex-direction: column;
  padding-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mobile-side-panel__header {
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px 14px;
  display: flex;
}

.mobile-side-panel__header--brand {
  align-items: center;
  padding: 20px 18px 12px;
}

.mobile-side-panel__brand {
  color: var(--text-primary);
  letter-spacing: -.03em;
  margin: 0;
  font-family: Bricolage Grotesque, system-ui, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
}

.mobile-side-panel .mobile-drawer-section {
  gap: 7px;
  margin-top: 20px;
}

.mobile-side-panel .mobile-drawer-section > h3 {
  letter-spacing: .11em;
  margin: 0 0 3px 5px;
  font-size: 11.5px;
}

.mobile-side-panel .mobile-drawer-links {
  gap: 3px;
}

.mobile-side-panel .mobile-drawer-link {
  border-radius: 13px;
  gap: 13px;
  min-height: 55px;
  padding: 13px 15px;
}

.mobile-side-panel .mobile-drawer-link__icon {
  width: 24px;
  height: 24px;
}

.mobile-side-panel .mobile-drawer-link__label {
  letter-spacing: -.01em;
  font-size: 16.5px;
  font-weight: 600;
}

.mobile-side-panel__user {
  flex: auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.mobile-side-panel__avatar {
  border: 1px solid var(--border-visible);
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  letter-spacing: .02em;
  box-shadow: var(--shadow-xs);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.mobile-side-panel__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mobile-side-panel__identity {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.mobile-side-panel__name {
  color: var(--text-primary);
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
}

.mobile-side-panel__meta {
  color: var(--text-muted);
  letter-spacing: .005em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
}

.mobile-side-panel__close {
  border: 1px solid var(--border-visible);
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: color .16s, background-color .16s, transform .14s;
  display: flex;
}

.mobile-side-panel__close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mobile-side-panel__close:active {
  transform: scale(.96);
}

.mobile-side-panel__scroll {
  overscroll-behavior: contain;
  min-height: 0;
  padding: 4px 12px calc(88px + env(safe-area-inset-bottom));
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  flex: auto;
  gap: 4px;
  display: flex;
  overflow: hidden auto;
}

.mobile-side-panel__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.mobile-side-panel__badge {
  min-width: 20px;
  height: 20px;
  color: var(--btn-primary-text);
  background: var(--accent);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.mobile-side-panel__footer {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-visible);
  background: var(--bg-card);
  flex-direction: column;
  flex: none;
  gap: 10px;
  display: flex;
}

.mobile-side-panel__footer--bar {
  z-index: 2;
  min-height: calc(88px + env(safe-area-inset-bottom));
  padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: none;
  border: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mobile-side-panel__footer--bar:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg-card) 0%, var(--bg-card) 48%, transparent 100%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-side-panel__footer--bar:before {
    background: linear-gradient(to top, color-mix(in srgb, var(--bg-card) 88%, transparent) 0%, color-mix(in srgb, var(--bg-card) 42%, transparent) 48%, transparent 100%);
  }
}

.mobile-side-panel__footer--bar .mobile-drawer-footer-bar {
  z-index: 1;
  position: relative;
}

.mobile-side-panel__streak {
  border: 1px solid var(--accent-border);
  min-height: 36px;
  color: var(--text-secondary);
  background: var(--accent-subtle);
  letter-spacing: .01em;
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.mobile-side-panel__streak-icon {
  color: var(--accent);
  display: flex;
}

.mobile-side-panel__footer-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.mobile-side-panel__action {
  border: 1px solid var(--border-visible);
  min-height: 44px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  letter-spacing: -.005em;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .16s, border-color .16s, transform .14s;
  display: inline-flex;
}

.mobile-side-panel__action:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.mobile-side-panel__action:active {
  transform: scale(.98);
}

.mobile-side-panel__action--danger {
  color: var(--text-secondary);
  border-color: var(--border-visible);
}

.mobile-side-panel__action > svg {
  color: inherit;
  flex: none;
}

button.mobile-drawer-link {
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: none;
  width: 100%;
}

.app-content--mobile {
  padding-top: var(--mobile-chrome-clearance);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  scroll-padding-top: var(--mobile-chrome-clearance);
  scroll-padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}

.app-content--mobile.app-content--chat {
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

.app-content--mobile.app-content--notes-list, .app-content--mobile.app-content--flashcards-list, .app-content--mobile.app-content--courses-list, .app-content--mobile.app-content--techniques {
  padding-top: 0;
  padding-bottom: 0;
  scroll-padding-top: 0;
  scroll-padding-bottom: 0;
}

.app-content--mobile.app-content--calendar {
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

.calendar-page-shell {
  min-height: 100%;
}

.calendar-main-panel--mobile-flush {
  border-bottom-width: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.calendar-mobile-search-dock.mobile-chat-list-search {
  z-index: 70;
  pointer-events: none;
  background: linear-gradient(to top, var(--sec-bg-calendar, var(--bg-primary)) 0%, var(--sec-bg-calendar, var(--bg-primary)) 58%, transparent 100%);
  padding: 12px 14px 8px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-mobile-search-dock.mobile-chat-list-search {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-calendar, var(--bg-primary)) 58%, transparent) 0%, color-mix(in srgb, var(--sec-bg-calendar, var(--bg-primary)) 20%, transparent) 58%, transparent 100%);
  }
}

.calendar-mobile-search-dock.mobile-chat-list-search > * {
  pointer-events: auto;
}

.calendar-mobile-search-dock .mobile-chat-list-search__row {
  gap: 8px;
}

.calendar-mobile-search-dock .mobile-chat-list-search__row.is-active .mobile-chat-list-search__field {
  flex: auto !important;
  max-width: 100% !important;
}

.calendar-mobile-search-dock .mobile-chat-list-search__field {
  flex: auto;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(160deg, #ffffff47 0%, #ffffff1a 48%, #ffffff0f 100%), var(--bg-elevated, #1a1a1a) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-mobile-search-dock .mobile-chat-list-search__field {
    background: linear-gradient(160deg, #ffffff47 0%, #ffffff1a 48%, #ffffff0f 100%), color-mix(in srgb, var(--bg-elevated, #1a1a1a) 18%, transparent) !important;
  }
}

.calendar-mobile-search-dock .mobile-chat-list-search__field {
  -webkit-backdrop-filter: blur(18px) saturate(1.55) !important;
  border-color: #ffffff52 !important;
  box-shadow: inset 0 1px #ffffff7a, 0 6px 20px #0000001f !important;
}

:root[data-theme="light"] .calendar-mobile-search-dock .mobile-chat-list-search__field {
  background: linear-gradient(160deg, #ffffff8c 0%, #ffffff47 50%, #ffffff29 100%), #ffffff38 !important;
  border-color: #fff !important;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .calendar-mobile-search-dock .mobile-chat-list-search__field {
    border-color: color-mix(in srgb, #fff 62%, var(--border-visible)) !important;
  }
}

:root[data-theme="light"] .calendar-mobile-search-dock .mobile-chat-list-search__field {
  box-shadow: inset 0 1px #ffffffc7, 0 6px 18px #0000000f !important;
}

.calendar-mobile-search-dock .mobile-chat-list-search__input {
  color: var(--text-primary) !important;
}

.calendar-mobile-search-dock .mobile-chat-list-search__input::placeholder, .calendar-mobile-search-dock .mobile-chat-list-search__icon {
  color: var(--text-muted) !important;
}

.calendar-mobile-bottom-dock {
  z-index: 70;
  pointer-events: none;
  background: linear-gradient(to top, var(--sec-bg-calendar, var(--bg-primary)) 0%, var(--sec-bg-calendar, var(--bg-primary)) 58%, transparent 100%);
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 8px;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-mobile-bottom-dock {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-calendar, var(--bg-primary)) 68%, transparent) 0%, color-mix(in srgb, var(--sec-bg-calendar, var(--bg-primary)) 24%, transparent) 58%, transparent 100%);
  }
}

.calendar-mobile-bottom-dock > * {
  pointer-events: auto;
}

.calendar-mobile-bottom-dock__row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.calendar-mobile-bottom-dock__today, .calendar-mobile-bottom-dock__actions {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}

.calendar-mobile-bottom-dock__today {
  min-width: 92px;
  color: var(--text-primary);
  letter-spacing: -.01em;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .18s, color .18s, transform .18s;
  display: inline-flex;
}

.calendar-mobile-bottom-dock__today:hover, .calendar-mobile-bottom-dock__today:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.calendar-mobile-bottom-dock__today:active {
  transform: scale(.98);
}

.calendar-mobile-bottom-dock__actions {
  border-radius: 999px;
  align-items: center;
  display: inline-flex;
  overflow: hidden;
}

.calendar-mobile-bottom-dock__actions button {
  width: 48px;
  min-height: 44px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  transition: background-color .18s, color .18s, transform .18s;
  display: inline-flex;
}

.calendar-mobile-bottom-dock__actions button + button {
  border-left: 1px solid var(--border-visible);
}

.calendar-mobile-bottom-dock__actions button:hover, .calendar-mobile-bottom-dock__actions button:focus-visible, .calendar-mobile-bottom-dock__actions button.is-active {
  background: var(--accent-subtle);
  color: var(--accent);
  outline: none;
}

.calendar-mobile-bottom-dock__actions button:active {
  transform: scale(.96);
}

.calendar-search-results {
  background: linear-gradient(165deg, #ffffff38 0%, #ffffff14 42%, var(--bg-elevated, #1a1a1a) 100%);
  border: 1px solid #ffffff47;
  border-radius: 18px;
  padding: 8px;
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-search-results {
    background: linear-gradient(165deg, #ffffff38 0%, #ffffff14 42%, color-mix(in srgb, var(--bg-elevated, #1a1a1a) 42%, transparent) 100%);
  }
}

.calendar-search-results {
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  box-shadow: inset 0 1px #ffffff5c, 0 18px 48px #00000047, 0 4px 14px #0000001f;
}

.calendar-search-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

:root[data-theme="light"] .calendar-search-results {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .calendar-search-results {
    border-color: color-mix(in srgb, #fff 70%, var(--border-visible));
  }
}

:root[data-theme="light"] .calendar-search-results {
  background: linear-gradient(165deg, #ffffffb8 0%, #ffffff6b 50%, #ffffff47 100%);
  box-shadow: inset 0 1px #ffffffe6, 0 16px 40px #0000001f;
}

.calendar-search-results__header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 10px;
  display: flex;
}

.calendar-search-results__count {
  min-width: 0;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 650;
}

.calendar-search-results__query-chip {
  min-width: 0;
  max-width: 55%;
  color: var(--text-secondary);
  cursor: pointer;
  background: #ffffff1a;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .14s, color .14s;
  display: inline-flex;
}

.calendar-search-results__query-chip:active {
  color: var(--text-primary);
  background: #ffffff29;
}

.calendar-search-results__empty {
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  padding: 18px 12px 20px;
  font-size: 13px;
  line-height: 1.45;
}

.calendar-search-results__list {
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.calendar-search-results__item {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 14px;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px;
  transition: background-color .14s;
  display: flex;
}

.calendar-search-results__item:active, .calendar-search-results__item:hover {
  background: #ffffff1a;
}

.calendar-search-results__swatch {
  border-radius: 999px;
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  display: block;
}

.calendar-search-results__body {
  flex-direction: column;
  flex: auto;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.calendar-search-results__title {
  color: var(--text-primary);
  letter-spacing: -.015em;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}

.calendar-search-results__meta {
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  display: flex;
}

.calendar-search-results__dot {
  background: var(--text-muted);
  border-radius: 999px;
  width: 3px;
  height: 3px;
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-search-results__dot {
    background: color-mix(in srgb, var(--text-muted) 70%, transparent);
  }
}

.calendar-search-results__dot {
  flex: none;
}

.calendar-search-results__type {
  color: var(--text-secondary);
  font-weight: 500;
}

.calendar-search-results--dock {
  left: 0;
  right: 0;
}

.mobile-chrome {
  z-index: var(--z-mobile-chrome);
  padding: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset)) var(--mobile-edge) 0;
  pointer-events: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.mobile-chrome > *, .mobile-chrome .relative {
  pointer-events: auto;
}

.mobile-chrome__left {
  pointer-events: auto;
  align-items: center;
  gap: 8px;
  display: flex;
}

.mobile-chrome__actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.mobile-chrome__btn {
  width: var(--mobile-chrome-size);
  height: var(--mobile-chrome-size);
  border: 1px solid var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  transition: color .18s, background-color .18s, border-color .18s, transform .16s;
  display: flex;
  position: relative;
}

.mobile-chrome__btn:hover, .mobile-chrome__btn.is-active {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}

.mobile-chrome__btn:active {
  transform: scale(.96);
}

.mobile-chrome__btn--menu, .mobile-chrome__btn--round {
  border-color: var(--border-visible);
  background: var(--bg-card);
  border-radius: 999px;
}

.mobile-chrome-pill {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  height: 48px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  display: flex;
}

.mobile-chrome-pill__btn {
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background-color .16s, transform .14s, color .16s;
  display: flex;
}

.mobile-chrome-pill__btn:active {
  background: var(--bg-hover);
  transform: scale(.96);
}

.mobile-chrome-pill__btn.is-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chrome-pill__btn.is-active {
    background: color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  }
}

.mobile-chrome-pill__btn.is-active {
  border: 1px solid var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chrome-pill__btn.is-active {
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
}

.mobile-chrome-pill__btn.is-active {
  box-shadow: inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chrome-pill__btn.is-active {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 16%, transparent);
  }
}

.mobile-chrome-pill__btn.is-active {
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

.mobile-chrome-pill__btn--list-toggle.is-active, .mobile-chrome-pill__btn--list-toggle[aria-expanded="true"] {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  background: none;
  border: 0;
}

.mobile-chat-list-sheet {
  z-index: 65;
  background: var(--sec-bg-chat, var(--bg-primary));
  will-change: transform;
  border-radius: 0;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  max-height: 100dvh;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

html.mobile-chat-list-open .mobile-chrome {
  z-index: 80;
  position: fixed;
}

.chat-sidebar-conversations-scroll--mobile-search {
  padding-bottom: 120px;
}

.notes-page-mobile {
  background: var(--sec-bg-notes, var(--bg-primary));
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.notes-page-mobile__scroll {
  overscroll-behavior: contain;
  min-height: 0;
  scroll-padding-top: var(--mobile-chrome-clearance);
  flex: auto;
  overflow: hidden auto;
}

.notes-page-mobile__scroll.page-shell {
  min-height: 100%;
  padding-top: var(--mobile-chrome-clearance);
  padding-right: var(--mobile-edge, 16px);
  padding-left: var(--mobile-edge, 16px);
  background: none;
  padding-bottom: 140px;
}

.notes-page-mobile .mobile-chat-list-search {
  z-index: 12;
  background: linear-gradient(to top, var(--sec-bg-notes, var(--bg-primary)) 0%, var(--sec-bg-notes, var(--bg-primary)) 58%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .notes-page-mobile .mobile-chat-list-search {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-notes, var(--bg-primary)) 58%, transparent) 0%, color-mix(in srgb, var(--sec-bg-notes, var(--bg-primary)) 20%, transparent) 58%, transparent 100%);
  }
}

.courses-page-mobile {
  background: var(--sec-bg-courses, var(--bg-primary));
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.courses-page-mobile__scroll {
  overscroll-behavior: contain;
  min-height: 0;
  scroll-padding-top: var(--mobile-chrome-clearance);
  flex: auto;
  overflow: hidden auto;
}

.courses-page-mobile__scroll.page-shell {
  max-width: none;
  min-height: 100%;
  padding-top: var(--mobile-chrome-clearance);
  padding-right: var(--mobile-edge, 16px);
  padding-left: var(--mobile-edge, 16px);
  background: none;
  margin-inline: 0;
  padding-bottom: 140px;
}

.courses-page-mobile .mobile-chat-list-search {
  z-index: 12;
  background: linear-gradient(to top, var(--sec-bg-courses, var(--bg-primary)) 0%, var(--sec-bg-courses, var(--bg-primary)) 58%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .courses-page-mobile .mobile-chat-list-search {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-courses, var(--bg-primary)) 58%, transparent) 0%, color-mix(in srgb, var(--sec-bg-courses, var(--bg-primary)) 20%, transparent) 58%, transparent 100%);
  }
}

.flashcards-page-mobile {
  background: var(--sec-bg-flashcards, var(--bg-primary));
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.flashcards-page-mobile__scroll {
  overscroll-behavior: contain;
  min-height: 0;
  scroll-padding-top: var(--mobile-chrome-clearance);
  flex: auto;
  overflow: hidden auto;
}

.flashcards-page-mobile__scroll.page-shell {
  max-width: none;
  min-height: 100%;
  padding-top: var(--mobile-chrome-clearance);
  padding-right: var(--mobile-edge, 16px);
  padding-left: var(--mobile-edge, 16px);
  background: none;
  margin-inline: 0;
  padding-bottom: 140px;
}

.flashcards-page-mobile .mobile-chat-list-search {
  z-index: 12;
  background: linear-gradient(to top, var(--sec-bg-flashcards, var(--bg-primary)) 0%, var(--sec-bg-flashcards, var(--bg-primary)) 58%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .flashcards-page-mobile .mobile-chat-list-search {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-flashcards, var(--bg-primary)) 58%, transparent) 0%, color-mix(in srgb, var(--sec-bg-flashcards, var(--bg-primary)) 20%, transparent) 58%, transparent 100%);
  }
}

.calendar-sidebar-popup, .calendar-sidebar-popup * {
  max-width: 100%;
}

.calendar-sidebar-popup .mini-calendar-sidebar-scroll, .calendar-sidebar-popup [class*="overflow-x"] {
  overflow-x: hidden !important;
}

.calendar-selector-popup-close {
  border: 1px solid var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-selector-popup-close {
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  }
}

.calendar-selector-popup-close {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-selector-popup-close {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 82%, var(--text-primary) 18%), color-mix(in srgb, var(--bg-card) 94%, transparent));
  }
}

.calendar-selector-popup-close {
  box-shadow: inset 0 1px 0 var(--text-primary), 0 4px 12px var(--bg-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-selector-popup-close {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--bg-primary) 18%, transparent);
  }
}

.calendar-selector-popup-close {
  color: var(--text-secondary);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.calendar-selector-popup-close:hover {
  border-color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-selector-popup-close:hover {
    border-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
  }
}

.calendar-selector-popup-close:hover {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-card));
}

@supports (color: color-mix(in lab, red, red)) {
  .calendar-selector-popup-close:hover {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 72%, var(--text-primary) 28%), color-mix(in srgb, var(--bg-card) 88%, transparent));
  }
}

.calendar-selector-popup-close:hover {
  color: var(--text-primary);
}

.calendar-selector-popup-close:active {
  transform: scale(.96);
}

.calendar-chrome-pill {
  position: relative;
}

.event-invitation-inbox-backdrop {
  z-index: 160;
  padding: calc(env(safe-area-inset-top, 0px) + 68px) max(12px, env(safe-area-inset-right, 0px)) 12px 12px;
  background: var(--bg-primary);
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: fixed;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-inbox-backdrop {
    background: color-mix(in srgb, var(--bg-primary) 18%, transparent);
  }
}

.event-invitation-inbox {
  width: min(100%, 390px);
  max-height: min(680px, calc(100dvh - env(safe-area-inset-top, 0px) - 82px));
  border: 1px solid var(--border-visible);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-inbox {
    border: 1px solid color-mix(in srgb, var(--border-visible) 88%, transparent);
  }
}

.event-invitation-inbox {
  background: var(--bg-elevated);
  border-radius: 20px;
  padding: 18px;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-inbox {
    background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  }
}

.event-invitation-inbox {
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-inbox {
    box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

.event-invitation-inbox {
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.event-invitation-close {
  border: 1px solid var(--accent-text);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-close {
    border: 1px solid color-mix(in srgb, var(--accent-text) 58%, transparent);
  }
}

.event-invitation-close {
  color: var(--text-secondary);
  background: linear-gradient(145deg, var(--bg-elevated), var(--bg-card));
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-close {
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 74%, transparent), color-mix(in srgb, var(--bg-card) 82%, transparent));
  }
}

.event-invitation-close {
  box-shadow: inset 0 1px 0 var(--text-primary), var(--shadow-xs);
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-close {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent), var(--shadow-xs);
  }
}

.event-invitation-close {
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  transition: background-color .15s, color .15s, transform .15s;
}

.event-invitation-close:hover, .event-invitation-close:focus-visible {
  color: var(--text-primary);
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-close:hover, .event-invitation-close:focus-visible {
    background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  }
}

.event-invitation-close:hover, .event-invitation-close:focus-visible {
  outline: none;
}

.event-invitation-close:active {
  transform: scale(.96);
}

.event-invitation-toolbar {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 40px;
  display: grid;
}

.event-invitation-tabs {
  border: 1px solid var(--border-visible);
  justify-self: center;
  align-items: center;
  width: min(100%, 230px);
  height: 40px;
  padding: 3px;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-tabs {
    border: 1px solid color-mix(in srgb, var(--border-visible) 88%, transparent);
  }
}

.event-invitation-tabs {
  background: var(--text-secondary);
  box-shadow: inset 0 1px 0 var(--accent-text), var(--shadow-xs);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-tabs {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-text) 30%, transparent), var(--shadow-xs);
  }
}

.event-invitation-tabs {
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.event-invitation-tab {
  z-index: 1;
  min-width: 0;
  min-height: 32px;
  color: var(--text-muted);
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 650;
  transition: color .18s;
  display: inline-flex;
  position: relative;
}

.event-invitation-tab[aria-selected="true"] {
  color: var(--bg-primary);
}

.event-invitation-tab__active {
  z-index: 0;
  border: 1px solid var(--accent-text);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-tab__active {
    border: 1px solid color-mix(in srgb, var(--accent-text) 74%, transparent);
  }
}

.event-invitation-tab__active {
  background: var(--accent-text);
  box-shadow: inset 0 1px 0 #ffffffb8, 0 1px 3px var(--bg-primary);
  border-radius: 999px;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-tab__active {
    box-shadow: inset 0 1px 0 #ffffffb8, 0 1px 3px color-mix(in srgb, var(--bg-primary) 18%, transparent);
  }
}

.event-invitation-tab__active {
  pointer-events: none;
  will-change: transform;
}

:root[data-theme="light"] .event-invitation-tabs {
  background: var(--bg-hover);
}

:root[data-theme="light"] .event-invitation-tab__active {
  background: var(--bg-card);
}

:root[data-theme="light"] .event-invitation-tab[aria-selected="true"] {
  color: var(--text-primary);
}

.event-invitation-tab:active {
  opacity: .92;
}

.event-invitation-count {
  z-index: 1;
  background: var(--accent);
  min-width: 18px;
  height: 18px;
  color: var(--accent-text);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  position: relative;
}

.event-invitation-list {
  min-height: 0;
  margin: 14px -5px -5px;
  padding: 0 5px 5px;
  overflow-y: auto;
}

.event-invitation-card {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-card {
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  }
}

.event-invitation-card {
  box-shadow: inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-card {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
  }
}

.event-invitation-avatar {
  border: 1px solid var(--accent-border);
  width: 34px;
  height: 34px;
  color: var(--accent-hover);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--text-primary);
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .event-invitation-avatar {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
}

.event-invitation-avatar {
  letter-spacing: .04em;
  font-size: 11px;
  font-weight: 700;
}

.event-invitation-status {
  border: 1px solid var(--border-visible);
  max-width: 98px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
}

.event-invitation-status--accepted {
  color: var(--accent-hover);
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.event-invitation-details {
  gap: 7px;
  margin-top: 12px;
  display: grid;
}

.event-invitation-details span {
  min-width: 0;
  color: var(--text-muted);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
}

.event-invitation-details svg {
  color: var(--text-secondary);
  flex: none;
}

.event-invitation-action {
  border-radius: 11px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .15s, color .15s, transform .15s;
  display: inline-flex;
}

.event-invitation-action:disabled {
  opacity: .65;
  cursor: wait;
}

.event-invitation-action:active:not(:disabled) {
  transform: scale(.98);
}

.event-invitation-action--primary {
  color: var(--accent-text);
  background: var(--accent);
}

.event-invitation-action--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.event-invitation-action--secondary {
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
  background: none;
}

.event-invitation-action--secondary:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.event-invitation-empty {
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 252px;
  padding: 22px 18px;
  display: flex;
}

.event-invitation-empty h3 {
  color: var(--text-secondary);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.event-invitation-loading {
  gap: 10px;
  padding: 4px 0;
  display: grid;
}

.event-invitation-loading span {
  border: 1px solid var(--border-visible);
  background: linear-gradient(100deg, var(--bg-card), var(--bg-hover), var(--bg-card));
  background-size: 200% 100%;
  border-radius: 16px;
  height: 122px;
  animation: 1.35s ease-in-out infinite event-invitation-shimmer;
}

@keyframes event-invitation-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.mobile-chrome__actions {
  z-index: 2;
  position: relative;
  overflow: visible;
}

.calendar-chrome-menu {
  z-index: 120;
  border: 1px solid var(--border-visible);
  background: var(--bg-elevated, var(--bg-card));
  min-width: 14.25rem;
  max-width: min(20rem, 100vw - 1.25rem);
  box-shadow: var(--shadow-lg), 0 12px 40px #00000047;
  border-radius: 1.05rem;
  padding: .45rem 0;
  overflow: hidden;
}

.calendar-chrome-menu--portal {
  position: fixed;
}

.calendar-chrome-menu__item {
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-height: 3.1rem;
  color: var(--text-primary);
  background: none;
  border: 0;
  align-items: center;
  gap: .7rem;
  padding: 0 1.1rem 0 .95rem;
  font-size: .98rem;
  font-weight: 500;
  transition: background-color .12s, color .12s;
  display: flex;
  position: relative;
}

.calendar-chrome-menu__bracket {
  background: none;
  border-radius: 999px;
  flex-shrink: 0;
  width: 3px;
  height: 1.15rem;
}

.calendar-chrome-menu__item.is-selected .calendar-chrome-menu__bracket {
  background: var(--text-primary);
}

.calendar-chrome-menu__item.is-selected {
  color: var(--text-primary);
  background: none;
  font-weight: 600;
}

.calendar-chrome-menu__label {
  flex: 1;
  min-width: 0;
}

.calendar-chrome-menu__item:hover, .calendar-chrome-menu__item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.calendar-chrome-menu__item.is-selected:hover, .calendar-chrome-menu__item.is-selected:focus-visible {
  background: var(--bg-hover);
}

.calendar-chrome-menu__empty {
  color: var(--text-muted);
  margin: 0;
  padding: .75rem 1rem;
  font-size: .8125rem;
}

:root[data-theme="light"] .calendar-chrome-menu {
  background: var(--bg-card);
  box-shadow: var(--shadow-md), 0 10px 28px #0000001a;
}

:root[data-theme="light"] .calendar-chrome-menu__item.is-selected .calendar-chrome-menu__bracket {
  background: #111;
}

@media (max-width: 767px) {
  .ops-skeleton {
    background: var(--bg-card);
    border: 1px solid var(--border-visible);
    position: relative;
    overflow: hidden;
  }

  .ops-skeleton:after {
    content: "";
    background: linear-gradient(90deg, transparent, var(--text-primary), transparent);
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ops-skeleton:after {
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 5%, transparent), transparent);
    }
  }

  .ops-skeleton:after {
    animation: 1.6s ease-in-out infinite ops-skeleton-shimmer;
  }

  @keyframes ops-skeleton-shimmer {
    to {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ops-skeleton:after {
      animation: none;
    }
  }
}

.course-detail-close {
  z-index: calc(var(--z-mobile-chrome, 70) + 1);
  top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px));
  right: var(--mobile-edge, 16px);
  width: var(--mobile-chrome-size, 44px);
  height: var(--mobile-chrome-size, 44px);
  color: var(--text-primary);
  background: linear-gradient(155deg, #ffffff61 0%, #ffffff1f 42%, #ffffff0f 100%), var(--bg-elevated, #1a1a1a);
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
}

@supports (color: color-mix(in lab, red, red)) {
  .course-detail-close {
    background: linear-gradient(155deg, #ffffff61 0%, #ffffff1f 42%, #ffffff0f 100%), color-mix(in srgb, var(--bg-elevated, #1a1a1a) 22%, transparent);
  }
}

.course-detail-close {
  -webkit-backdrop-filter: blur(22px) saturate(1.85);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s, border-color .16s, box-shadow .16s;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff9e, inset 0 -1px #00000024, 0 1px 2px #00000014, 0 8px 28px #00000029;
}

.course-detail-close:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#ffffff57 0%, #0000 48%);
  position: absolute;
  inset: 1px;
}

.course-detail-close > svg {
  z-index: 1;
  position: relative;
}

.course-detail-close:active {
  transform: scale(.96);
}

:root[data-theme="light"] .course-detail-close {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .course-detail-close {
    border-color: color-mix(in srgb, #fff 70%, var(--border-visible));
  }
}

:root[data-theme="light"] .course-detail-close {
  color: var(--text-primary);
  background: linear-gradient(#ffffffb3 0%, #ffffff5c 50%, #ffffff38 100%), #ffffff47;
  box-shadow: inset 0 1px #ffffffe0, 0 8px 22px #00000014;
}

.courses-mobile-import {
  z-index: 90;
  top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px));
  right: var(--mobile-edge, 16px);
  pointer-events: auto;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
  position: fixed;
}

.courses-mobile-import__btn {
  min-height: 44px;
  color: var(--text-primary);
  background: linear-gradient(180deg, #ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), var(--bg-elevated, #1a1a1a);
  border: 1px solid #ffffff5c;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  display: inline-flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .courses-mobile-import__btn {
    background: linear-gradient(180deg, #ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), color-mix(in srgb, var(--bg-elevated, #1a1a1a) 22%, transparent);
  }
}

.courses-mobile-import__btn {
  letter-spacing: -.01em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(22px) saturate(1.85);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  transition: transform .14s, border-color .16s, box-shadow .16s, background .16s;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff8c, 0 8px 24px #00000024;
}

.courses-mobile-import__btn:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#ffffff47 0%, #0000 50%);
  position: absolute;
  inset: 0;
}

.courses-mobile-import__btn:after {
  content: none;
  display: none;
}

.courses-mobile-import__btn > * {
  z-index: 1;
  line-height: 1;
  position: relative;
}

.courses-mobile-import__btn:active {
  transform: scale(.96);
}

:root[data-theme="light"] .courses-mobile-import__btn {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .courses-mobile-import__btn {
    border-color: color-mix(in srgb, #fff 70%, var(--border-visible));
  }
}

:root[data-theme="light"] .courses-mobile-import__btn {
  color: var(--text-primary);
  background: linear-gradient(#ffffffb3 0%, #ffffff5c 50%, #ffffff38 100%), #ffffff47;
  box-shadow: inset 0 1px #ffffffe0, 0 8px 22px #00000014;
}

.courses-desktop-pill {
  border-radius: 999px !important;
}

.courses-page-header--actions-only {
  margin-bottom: 20px;
}

.notes-mobile-filter, .flashcards-mobile-filter {
  z-index: 90;
  top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px));
  right: var(--mobile-edge, 16px);
  pointer-events: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  display: flex;
  position: fixed;
}

.notes-mobile-filter__btn, .flashcards-mobile-filter__btn {
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  background: linear-gradient(155deg, #ffffff61 0%, #ffffff1f 42%, #ffffff0f 100%), var(--bg-elevated, #1a1a1a);
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .notes-mobile-filter__btn, .flashcards-mobile-filter__btn {
    background: linear-gradient(155deg, #ffffff61 0%, #ffffff1f 42%, #ffffff0f 100%), color-mix(in srgb, var(--bg-elevated, #1a1a1a) 22%, transparent);
  }
}

.notes-mobile-filter__btn, .flashcards-mobile-filter__btn {
  -webkit-backdrop-filter: blur(22px) saturate(1.85);
  cursor: pointer;
  isolation: isolate;
  transition: transform .14s, border-color .16s, box-shadow .16s, background .16s;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff9e, inset 0 -1px #00000024, 0 1px 2px #00000014, 0 8px 28px #00000029;
}

.notes-mobile-filter__btn:before, .flashcards-mobile-filter__btn:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#ffffff57 0%, #0000 48%);
  position: absolute;
  inset: 1px;
}

.notes-mobile-filter__btn > svg, .flashcards-mobile-filter__btn > svg {
  z-index: 1;
  position: relative;
}

.notes-mobile-filter__btn:active, .flashcards-mobile-filter__btn:active {
  transform: scale(.96);
}

.notes-mobile-filter__btn.is-open, .notes-mobile-filter__btn.is-active, .flashcards-mobile-filter__btn.is-open, .flashcards-mobile-filter__btn.is-active {
  box-shadow: inset 0 1px 0 #ffffffb8, inset 0 -1px 0 #0000001f, 0 0 0 1px var(--accent, #7c6fcd), 0 10px 32px #0000002e;
  border-color: #ffffff8c;
}

@supports (color: color-mix(in lab, red, red)) {
  .notes-mobile-filter__btn.is-open, .notes-mobile-filter__btn.is-active, .flashcards-mobile-filter__btn.is-open, .flashcards-mobile-filter__btn.is-active {
    box-shadow: inset 0 1px 0 #ffffffb8, inset 0 -1px 0 #0000001f, 0 0 0 1px color-mix(in srgb, var(--accent, #7c6fcd) 28%, transparent), 0 10px 32px #0000002e;
  }
}

.notes-mobile-filter__btn.is-active, .flashcards-mobile-filter__btn.is-active {
  color: var(--accent, #7c6fcd);
}

:root[data-theme="light"] .notes-mobile-filter__btn, :root[data-theme="light"] .flashcards-mobile-filter__btn {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .notes-mobile-filter__btn, :root[data-theme="light"] .flashcards-mobile-filter__btn {
    border-color: color-mix(in srgb, #fff 78%, var(--border-visible));
  }
}

:root[data-theme="light"] .notes-mobile-filter__btn, :root[data-theme="light"] .flashcards-mobile-filter__btn {
  color: var(--text-primary);
  background: linear-gradient(155deg, #ffffffb8 0%, #ffffff61 48%, #ffffff38 100%), #ffffff47;
  box-shadow: inset 0 1px #ffffffe6, inset 0 -1px #0000000d, 0 1px 2px #0000000a, 0 8px 24px #00000014;
}

:root[data-theme="light"] .notes-mobile-filter__btn.is-open, :root[data-theme="light"] .notes-mobile-filter__btn.is-active, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-open, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-active {
  border-color: var(--accent, #7c6fcd);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .notes-mobile-filter__btn.is-open, :root[data-theme="light"] .notes-mobile-filter__btn.is-active, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-open, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-active {
    border-color: color-mix(in srgb, var(--accent, #7c6fcd) 28%, #fff);
  }
}

:root[data-theme="light"] .notes-mobile-filter__btn.is-open, :root[data-theme="light"] .notes-mobile-filter__btn.is-active, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-open, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-active {
  box-shadow: inset 0 1px 0 #fffffff2, 0 0 0 1px var(--accent, #7c6fcd), 0 10px 28px #0000001a;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .notes-mobile-filter__btn.is-open, :root[data-theme="light"] .notes-mobile-filter__btn.is-active, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-open, :root[data-theme="light"] .flashcards-mobile-filter__btn.is-active {
    box-shadow: inset 0 1px 0 #fffffff2, 0 0 0 1px color-mix(in srgb, var(--accent, #7c6fcd) 22%, transparent), 0 10px 28px #0000001a;
  }
}

.mobile-chat-list-filter__menu.notes-mobile-filter__menu, .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  background: linear-gradient(160deg, #ffffff5c 0%, #ffffff1f 42%, #ffffff0f 100%), var(--bg-elevated, #1a1a1a);
  border: 1px solid #ffffff70;
  border-radius: 18px;
  max-height: min(52dvh, 360px);
  position: relative;
  overflow: hidden auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__menu.notes-mobile-filter__menu, .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
    background: linear-gradient(160deg, #ffffff5c 0%, #ffffff1f 42%, #ffffff0f 100%), color-mix(in srgb, var(--bg-elevated, #1a1a1a) 28%, transparent);
  }
}

.mobile-chat-list-filter__menu.notes-mobile-filter__menu, .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
  -webkit-backdrop-filter: blur(32px) saturate(1.9);
  box-shadow: inset 0 1px #ffffff94, inset 0 -1px #0000001f, 0 1px 2px #00000014, 0 18px 48px #00000038, 0 4px 14px #0000001a;
}

.mobile-chat-list-filter__menu.notes-mobile-filter__menu:before, .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(#ffffff47 0%, #0000 42%);
  position: absolute;
  inset: 0;
}

.mobile-chat-list-filter__menu.notes-mobile-filter__menu > *, .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu > * {
  z-index: 1;
  position: relative;
}

:root[data-theme="light"] .mobile-chat-list-filter__menu.notes-mobile-filter__menu, :root[data-theme="light"] .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .mobile-chat-list-filter__menu.notes-mobile-filter__menu, :root[data-theme="light"] .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
    border-color: color-mix(in srgb, #fff 82%, var(--border-visible));
  }
}

:root[data-theme="light"] .mobile-chat-list-filter__menu.notes-mobile-filter__menu, :root[data-theme="light"] .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
  background: linear-gradient(160deg, #ffffffc7 0%, #ffffff6b 48%, #ffffff3d 100%), #ffffff52;
  box-shadow: inset 0 1px #ffffffeb, inset 0 -1px #0000000a, 0 1px 2px #0000000a, 0 16px 40px #0000001a, 0 4px 12px #0000000f;
}

:root[data-theme="dark"] .mobile-chat-list-filter__menu.notes-mobile-filter__menu, :root[data-theme="dark"] .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
  background: linear-gradient(160deg, #ffffff2e 0%, #ffffff0f 45%, #ffffff08 100%), var(--bg-elevated);
  border-color: #ffffff38;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] .mobile-chat-list-filter__menu.notes-mobile-filter__menu, :root[data-theme="dark"] .mobile-chat-list-filter__menu.flashcards-mobile-filter__menu {
    background: linear-gradient(160deg, #ffffff2e 0%, #ffffff0f 45%, #ffffff08 100%), color-mix(in srgb, var(--bg-elevated) 36%, transparent);
  }
}

.notes-mobile-filter__option, .flashcards-mobile-filter__option {
  background: none;
  gap: 10px;
}

.notes-mobile-filter__option:active, .flashcards-mobile-filter__option:active {
  background: #ffffff24;
}

.notes-mobile-filter__option.is-active, .flashcards-mobile-filter__option.is-active {
  background: #ffffff29;
  box-shadow: inset 0 1px #ffffff38;
}

:root[data-theme="light"] .notes-mobile-filter__option:active, :root[data-theme="light"] .notes-mobile-filter__option.is-active, :root[data-theme="light"] .flashcards-mobile-filter__option:active, :root[data-theme="light"] .flashcards-mobile-filter__option.is-active {
  background: #ffffff8c;
  box-shadow: inset 0 1px #ffffffb3;
}

.notes-mobile-filter__check, .flashcards-mobile-filter__check {
  flex: 0 0 18px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
}

.notes-mobile-filter__check-icon, .flashcards-mobile-filter__check-icon {
  color: #0a0a0a;
}

:root[data-theme="dark"] .notes-mobile-filter__check-icon, :root[data-theme="dark"] .flashcards-mobile-filter__check-icon {
  color: #0a0a0a;
  filter: drop-shadow(0 0 .4px #ffffff59);
}

.notes-mobile-filter__option-label, .flashcards-mobile-filter__option-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  overflow: hidden;
}

.flashcards-mobile-filter__chevron {
  color: var(--text-muted);
  flex: none;
  margin-left: auto;
}

.flashcards-mobile-filter__back {
  min-height: 40px;
  color: var(--text-secondary);
  letter-spacing: .01em;
  font-size: 13px;
  font-weight: 600;
}

.flashcards-mobile-filter__back .flashcards-mobile-filter__option-label {
  color: var(--text-secondary);
}

.mobile-chat-list-filter {
  z-index: 90;
  top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px));
  right: var(--mobile-edge, 16px);
  pointer-events: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  display: flex;
  position: fixed;
}

.mobile-chat-list-filter__btn {
  border: 1px solid var(--border-visible);
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
  cursor: pointer;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background-color .16s, transform .14s, color .16s, border-color .16s;
  display: flex;
}

.mobile-chat-list-filter__btn:active {
  transform: scale(.96);
}

.mobile-chat-list-filter__btn.is-open, .mobile-chat-list-filter__btn.is-favorites {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__btn.is-open, .mobile-chat-list-filter__btn.is-favorites {
    background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
  }
}

.mobile-chat-list-filter__btn.is-open, .mobile-chat-list-filter__btn.is-favorites {
  border-color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__btn.is-open, .mobile-chat-list-filter__btn.is-favorites {
    border-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
}

.mobile-chat-list-filter__btn.is-open, .mobile-chat-list-filter__btn.is-favorites {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.mobile-chat-list-filter__btn.is-favorites {
  color: #e8b84a;
}

.mobile-chat-list-filter__menu {
  -webkit-backdrop-filter: blur(28px) saturate(1.65);
  background: #ffffff38;
  border: 1px solid #ffffff47;
  border-radius: 16px;
  min-width: 236px;
  padding: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px #fff6, 0 12px 40px #00000038, 0 2px 8px #0000001a;
}

:root[data-theme="light"] .mobile-chat-list-filter__menu {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .mobile-chat-list-filter__menu {
    border-color: color-mix(in srgb, #fff 70%, var(--border-visible));
  }
}

:root[data-theme="light"] .mobile-chat-list-filter__menu {
  background: #ffffff7a;
  box-shadow: inset 0 1px #fffc, 0 12px 32px #0000001a;
}

:root[data-theme="dark"] .mobile-chat-list-filter__menu {
  background: var(--bg-elevated);
  border-color: #ffffff24;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="dark"] .mobile-chat-list-filter__menu {
    background: color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  }
}

.mobile-chat-list-filter__option {
  width: 100%;
  min-height: 46px;
  color: var(--text-primary);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .14s;
  display: flex;
}

.mobile-chat-list-filter__option-icon {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__option-icon {
    background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
  }
}

.mobile-chat-list-filter__option:active {
  background: var(--bg-hover);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__option:active {
    background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  }
}

.mobile-chat-list-filter__option.is-active {
  background: var(--bg-elevated);
  font-weight: 650;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-filter__option.is-active {
    background: color-mix(in srgb, var(--bg-elevated) 38%, transparent);
  }
}

.mobile-chat-list-filter__option.is-active {
  box-shadow: inset 0 1px #ffffff29;
}

.mobile-chat-list-filter__option.is-active .mobile-chat-list-filter__option-icon {
  color: var(--text-primary);
  background: #ffffff24;
}

.chat-sidebar-conversations-scroll--mobile-under-chrome {
  padding-top: var(--mobile-chrome-clearance);
  scroll-padding-top: var(--mobile-chrome-clearance);
  transition: padding-top .32s cubic-bezier(.22, 1, .36, 1);
}

.chat-sidebar-conversations-scroll--mobile-under-chrome.is-searching, html.chat-search-mode .chat-sidebar-conversations-scroll--mobile-under-chrome {
  padding-top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px) + 56px);
  scroll-padding-top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset, 10px) + 56px);
}

.chat-sidebar-conversations-scroll--mobile-under-chrome.is-searching > * {
  animation: .34s cubic-bezier(.22, 1, .36, 1) both chat-list-search-slide;
}

@keyframes chat-list-search-slide {
  from {
    opacity: .72;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-chat-list-empty {
  box-sizing: border-box;
  min-height: calc(100dvh - var(--mobile-chrome-clearance, 72px) - 168px);
  padding: 32px 28px calc(148px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mobile-chat-list-empty__icon-wrap {
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  display: flex;
  position: relative;
}

.mobile-chat-list-empty__glow {
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
  pointer-events: none;
  border-radius: 999px;
  position: absolute;
  inset: -8px;
}

.mobile-chat-list-empty__icon {
  border: 1px solid var(--accent-border);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  width: 56px;
  height: 56px;
  box-shadow: var(--shadow-xs), inset 0 1px 0 #ffffff1a;
  color: var(--accent);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.mobile-chat-list-empty__title {
  max-width: 280px;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.mobile-chat-list-empty__subtitle {
  max-width: 280px;
  color: var(--text-muted);
  letter-spacing: .005em;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

.mobile-chrome-cluster {
  min-height: 48px;
  max-width: min(100%, calc(100vw - var(--mobile-edge) * 2));
  align-items: center;
  gap: 8px;
  display: flex;
}

.mobile-chat-list-tabs {
  pointer-events: auto;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  min-width: 0;
  max-width: min(280px, 100vw - 120px);
  height: 48px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  border-radius: 999px;
  flex: auto;
  align-items: center;
  gap: 0;
  padding: 4px;
  display: flex;
  position: relative;
}

.mobile-chat-list-tabs:active {
  cursor: grabbing;
}

.mobile-chat-list-tabs--chrome {
  flex: auto;
  min-width: 148px;
}

.mobile-chat-list-tabs__thumb {
  z-index: 0;
  background: var(--bg-elevated);
  border-radius: 999px;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-tabs__thumb {
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  }
}

.mobile-chat-list-tabs__thumb {
  box-shadow: inset 0 1px 0 var(--text-primary), 0 1px 3px var(--bg-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-tabs__thumb {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 14%, transparent), 0 1px 3px color-mix(in srgb, var(--bg-primary) 14%, transparent);
  }
}

.mobile-chat-list-tabs__thumb {
  pointer-events: none;
  will-change: transform;
}

:root[data-theme="light"] .mobile-chat-list-tabs__thumb {
  background: var(--bg-elevated);
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .mobile-chat-list-tabs__thumb {
    background: color-mix(in srgb, var(--bg-elevated) 92%, #fff);
  }
}

:root[data-theme="light"] .mobile-chat-list-tabs__thumb {
  box-shadow: inset 0 1px #ffffffb3, 0 1px 4px #00000014;
}

.mobile-chat-list-tabs__tab {
  z-index: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  color: var(--text-muted);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 650;
  transition: color .18s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.mobile-chat-list-tabs__tab.is-active {
  color: var(--text-primary);
  box-shadow: none;
  background: none;
}

.mobile-chat-list-tabs__tab:active {
  opacity: .92;
}

.mobile-chat-list-search {
  z-index: 12;
  pointer-events: none;
  background: linear-gradient(to top, var(--sec-bg-chat, var(--bg-primary)) 0%, var(--sec-bg-chat, var(--bg-primary)) 58%, transparent 100%);
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 8px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-search {
    background: linear-gradient(to top, color-mix(in srgb, var(--sec-bg-chat, var(--bg-primary)) 58%, transparent) 0%, color-mix(in srgb, var(--sec-bg-chat, var(--bg-primary)) 20%, transparent) 58%, transparent 100%);
  }
}

.mobile-chat-list-search.is-searching {
  gap: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

html.chat-search-mode .mobile-chat-list-search__actions, html.chat-search-mode .mobile-chat-list-filter, html.chat-search-mode .mobile-chat-list-tabs, html.chat-search-mode .project-action-card {
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
}

html.chat-search-mode .chat-sidebar-conversations-scroll, html.chat-search-mode .chat-sidebar-conversations-scroll--mobile-under-chrome, html.chat-search-mode .mobile-chat-list-sheet, html.chat-search-mode .relative.flex.min-h-0.flex-1.flex-col.overflow-hidden {
  overscroll-behavior: none;
}

.mobile-chat-list-search__field {
  -webkit-backdrop-filter: none !important;
  background: #fff !important;
  border-color: #0000001a !important;
  box-shadow: 0 1px 2px #0000000a !important;
}

:root[data-theme="light"] .mobile-chat-list-search__field {
  background: #fff !important;
  border-color: #0000001a !important;
}

.mobile-chat-list-search__input {
  color: #111 !important;
}

.mobile-chat-list-search__input::placeholder {
  color: #8a8a8a !important;
}

.mobile-chat-list-search__icon {
  color: #737373 !important;
}

.mobile-chat-list-search__actions {
  pointer-events: auto;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.mobile-chat-list-search__new-chat {
  color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  background: #0a0a0a;
  border: 0;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 48px;
  margin: 0 0 0 auto;
  padding: 0 20px;
  font-size: 14.5px;
  font-weight: 650;
  transition: transform .14s, opacity .14s;
  display: inline-flex;
  box-shadow: 0 6px 18px #00000047;
}

.mobile-chat-list-search__new-chat:active {
  opacity: .92;
  transform: scale(.98);
}

:root[data-theme="light"] .mobile-chat-list-search__new-chat {
  color: #fff;
  background: #0a0a0a;
}

.mobile-chat-list-search__row {
  pointer-events: auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.mobile-chat-list-search__field {
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  box-shadow: inset 0 1px 0 #ffffff6b, 0 6px 20px var(--bg-primary);
  background: #ffffff38;
  border: 1px solid #ffffff47;
  border-radius: 999px;
  flex: auto;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-search__field {
    box-shadow: inset 0 1px 0 #ffffff6b, 0 6px 20px color-mix(in srgb, var(--bg-primary) 18%, transparent);
  }
}

.mobile-chat-list-search__field {
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  transition: max-width .22s cubic-bezier(.22, 1, .36, 1), flex-basis .22s cubic-bezier(.22, 1, .36, 1), border-color .15s;
}

.mobile-chat-list-search__row.is-active .mobile-chat-list-search__field {
  flex: calc(100% - 54px);
  max-width: calc(100% - 54px);
}

:root[data-theme="light"] .mobile-chat-list-search__field {
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .mobile-chat-list-search__field {
    border-color: color-mix(in srgb, #fff 55%, var(--border-visible));
  }
}

:root[data-theme="light"] .mobile-chat-list-search__field {
  background: #ffffff61;
  box-shadow: inset 0 1px #ffffffb3, 0 6px 18px #0000000f;
}

.mobile-chat-list-search__icon {
  color: var(--text-muted);
  flex: none;
}

.mobile-chat-list-search__input {
  min-width: 0;
  height: 44px;
  color: var(--text-primary);
  letter-spacing: -.01em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: none;
  border: 0;
  outline: none;
  flex: auto;
  scroll-margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.mobile-chat-list-search__input::placeholder {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
}

.project-detail-search-input {
  letter-spacing: -.01em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: none;
  border: 0;
  outline: none;
  min-width: 0;
  height: 44px;
  font-weight: 500;
  line-height: 1.25;
  scroll-margin: 0 !important;
  font-size: 16px !important;
}

.project-detail-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 16px !important;
}

.mobile-chat-list-search__close {
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 #ffffff4d, 0 4px 12px var(--bg-primary);
  background: #ffffff2e;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  flex: 0 0 44px;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-search__close {
    box-shadow: inset 0 1px 0 #ffffff4d, 0 4px 12px color-mix(in srgb, var(--bg-primary) 16%, transparent);
  }
}

.mobile-chat-list-search__close {
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  cursor: pointer;
  animation: .2s cubic-bezier(.22, 1, .36, 1) both mobile-search-close-in;
}

:root[data-theme="light"] .mobile-chat-list-search__close {
  color: var(--text-secondary);
  background: #ffffff8c;
  border-color: #fff;
}

@supports (color: color-mix(in lab, red, red)) {
  :root[data-theme="light"] .mobile-chat-list-search__close {
    border-color: color-mix(in srgb, #fff 60%, var(--border-visible));
  }
}

:root[data-theme="light"] .mobile-chat-list-search__close {
  box-shadow: inset 0 1px #ffffffb3, 0 4px 12px #0000000f;
}

.mobile-chat-list-search__close:active {
  color: var(--text-primary);
  transform: scale(.94);
}

@keyframes mobile-search-close-in {
  from {
    opacity: 0;
    transform: scale(.86)translateX(6px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateX(0);
  }
}

.mobile-chat-list-search__clear {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 0;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-list-search__clear {
    background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  }
}

.mobile-chat-list-search__clear {
  cursor: pointer;
}

.mobile-chat-list-search__clear:active {
  color: var(--text-primary);
  transform: scale(.96);
}

.mobile-chrome-pill__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.mobile-chat-actions-pill {
  top: calc(env(safe-area-inset-top) + var(--mobile-chrome-inset) - 2px);
  right: var(--mobile-edge);
  z-index: 10040;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  height: 48px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  display: flex;
  position: fixed;
}

.mobile-chat-actions-pill__btn {
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background-color .16s, transform .14s;
  display: flex;
}

.mobile-chat-actions-pill__btn:active {
  background: var(--bg-hover);
  transform: scale(.96);
}

.mobile-chat-actions-pill__btn:disabled {
  opacity: .4;
}

.mobile-chat-actions-pill--incognito-only {
  border-radius: 999px;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  overflow: hidden;
}

.mobile-chat-actions-pill--incognito-only .mobile-chat-actions-pill__btn--incognito {
  border-radius: 999px;
  width: 100%;
  height: 100%;
}

.mobile-chat-actions-pill__btn--incognito {
  color: var(--text-primary);
  border-radius: 999px;
}

.mobile-chat-actions-pill__btn--incognito.is-active {
  color: inherit;
  box-shadow: none;
  background: none;
  border: 0;
}

.chat-incognito-btn {
  border: 1px solid var(--border-visible);
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: var(--text-primary);
  box-shadow: none;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background-color .16s, transform .14s;
  display: inline-flex;
}

.chat-incognito-btn:hover {
  background: var(--bg-hover);
}

.chat-incognito-btn:active {
  transform: scale(.96);
}

.chat-incognito-btn[data-active="true"] {
  color: var(--text-primary);
  border-color: var(--border-visible);
  box-shadow: none;
  background: none;
}

.chat-incognito-btn[data-active="true"]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.chat-incognito-btn--elevated, .chat-incognito-btn--elevated[data-active="true"] {
  background: var(--bg-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-hover);
}

.mobile-chat-actions-pill__btn--more {
  color: #0a0a0a;
  transition: background-color .2s, transform .2s, box-shadow .2s, border-color .2s, -webkit-backdrop-filter .2s, backdrop-filter .2s;
}

.mobile-chat-actions-pill__btn--more.is-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-actions-pill__btn--more.is-active {
    background: color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  }
}

.mobile-chat-actions-pill__btn--more.is-active {
  border: 1px solid var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-actions-pill__btn--more.is-active {
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
}

.mobile-chat-actions-pill__btn--more.is-active {
  box-shadow: inset 0 1px 0 var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-chat-actions-pill__btn--more.is-active {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 16%, transparent);
  }
}

.mobile-chat-actions-pill__btn--more.is-active {
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

.mobile-chat-more-dots {
  align-items: center;
  gap: 3.5px;
  transition: gap .28s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
  display: flex;
}

.mobile-chat-more-dots > i {
  transform-origin: center;
  background: #0a0a0a;
  border-radius: 999px;
  width: 4.5px;
  height: 4.5px;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), background-color .2s, opacity .2s;
  display: block;
}

.mobile-chat-more-dots.is-open {
  gap: 4.5px;
  transform: scale(1.06);
}

.mobile-chat-more-dots.is-open > i {
  animation: .42s cubic-bezier(.22, 1, .36, 1) both chat-more-dot-pop;
}

.mobile-chat-more-dots.is-open > i:first-child {
  animation-delay: 0s;
}

.mobile-chat-more-dots.is-open > i:nth-child(2) {
  animation-delay: 50ms;
}

.mobile-chat-more-dots.is-open > i:nth-child(3) {
  animation-delay: .1s;
}

@keyframes chat-more-dot-pop {
  0% {
    opacity: .55;
    transform: scale(.7);
  }

  55% {
    opacity: 1;
    transform: scale(1.28);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

:root[data-theme="dark"] .mobile-chat-actions-pill__btn--more {
  color: var(--text-primary);
}

:root[data-theme="dark"] .mobile-chat-more-dots > i {
  background: var(--text-primary);
}

:root[data-theme="dark"] .mobile-chat-actions-pill__btn--more.is-active {
  color: var(--text-primary);
}

.mobile-chat-more-menu {
  z-index: 10050;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  min-width: 210px;
  box-shadow: var(--shadow-md), 0 12px 32px #00000024;
  border-radius: 16px;
  padding: 6px;
  position: fixed;
}

.mobile-chat-more-menu__item {
  width: 100%;
  min-height: 44px;
  color: var(--text-primary);
  text-align: left;
  letter-spacing: -.01em;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .14s;
  display: flex;
}

.mobile-chat-more-menu__item:active {
  background: var(--bg-hover);
}

.mobile-chat-more-menu__item > svg {
  color: var(--text-secondary);
  flex: none;
}

.mobile-chat-more-menu__item--danger, .mobile-chat-more-menu__item--danger > svg {
  color: #dc2626;
}

.mobile-chat-more-menu__sep {
  background: var(--border-visible);
  height: 1px;
  margin: 4px 8px;
}

.mobile-burger {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4.5px;
  width: 18px;
  display: flex;
}

.mobile-burger__line {
  box-sizing: border-box;
  background: currentColor;
  border: 0;
  border-radius: 9999px;
  flex: 0 0 2px;
  width: 100%;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  display: block;
}

.mobile-chrome__badge {
  border: 2px solid var(--bg-card);
  min-width: 16px;
  height: 16px;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 5px;
  right: 4px;
}

.mobile-drawer-backdrop {
  z-index: var(--z-mobile-overlay);
  background: var(--bg-primary);
  position: fixed;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-drawer-backdrop {
    background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
  }
}

.mobile-drawer {
  --mobile-drawer-bg: var(--bg-card);
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-drawer {
    --mobile-drawer-bg: color-mix(in srgb, var(--bg-card) 98%, var(--text-primary) 2%);
  }
}

.mobile-drawer {
  z-index: var(--z-mobile-sheet);
  width: var(--mobile-drawer-width);
  border-right: 1px solid var(--border-visible);
  background: var(--mobile-drawer-bg);
  box-shadow: var(--shadow-xl);
  outline: none;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

:root[data-theme="light"] .mobile-drawer {
  --mobile-drawer-bg: #fafafa;
}

.mobile-drawer__header {
  z-index: 2;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: calc(14px + env(safe-area-inset-top)) 16px 18px;
  pointer-events: none;
  background: none;
  border-bottom: 0;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mobile-drawer__header:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--mobile-drawer-bg) 0%, var(--mobile-drawer-bg) 36%, transparent 100%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-drawer__header:before {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--mobile-drawer-bg) 22%, transparent) 0%, color-mix(in srgb, var(--mobile-drawer-bg) 8%, transparent) 36%, transparent 100%);
  }
}

.mobile-drawer__header:before {
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(#000 0% 30%, #0000 100%);
  mask-image: linear-gradient(#000 0% 30%, #0000 100%);
}

.mobile-drawer__brand-name {
  z-index: 1;
  color: var(--text-primary);
  letter-spacing: -.03em;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  position: relative;
}

.mobile-drawer__scroll {
  overscroll-behavior: contain;
  min-height: 0;
  padding: calc(56px + env(safe-area-inset-top) + 8px) 12px calc(80px + env(safe-area-inset-bottom));
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
  overflow: hidden auto;
}

.mobile-drawer__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.mobile-drawer__footer {
  z-index: 2;
  min-height: calc(88px + env(safe-area-inset-bottom));
  padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: none;
  border: 0;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mobile-drawer-footer-bar {
  z-index: 1;
  pointer-events: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
  position: relative;
}

.mobile-drawer-footer-bar > * {
  pointer-events: auto;
}

.mobile-drawer__footer:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--mobile-drawer-bg) 0%, var(--mobile-drawer-bg) 36%, transparent 100%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-drawer__footer:before {
    background: linear-gradient(to top, color-mix(in srgb, var(--mobile-drawer-bg) 22%, transparent) 0%, color-mix(in srgb, var(--mobile-drawer-bg) 8%, transparent) 36%, transparent 100%);
  }
}

.mobile-drawer__footer:before {
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0% 30%, #0000 100%);
  mask-image: linear-gradient(to top, #000 0% 30%, #0000 100%);
}

.mobile-drawer-profile {
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  background: none;
  border: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transition: transform .16s, box-shadow .18s;
  display: flex;
  position: relative;
}

.mobile-drawer-profile:hover {
  box-shadow: 0 0 0 2px var(--accent-border);
}

.mobile-drawer-profile:active {
  transform: scale(.96);
}

.mobile-drawer-profile__avatar {
  z-index: 1;
  border: 1px solid var(--border-visible);
  background: var(--mobile-drawer-bg);
  width: 42px;
  height: 42px;
  color: var(--text-primary);
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mobile-drawer-profile__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mobile-drawer-create {
  z-index: 1;
  min-height: 42px;
  color: var(--bg-primary);
  background: var(--text-primary);
  text-align: center;
  letter-spacing: -.01em;
  white-space: nowrap;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  border: none;
  border-radius: 999px;
  flex: auto;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 650;
  transition: opacity .16s, transform .16s;
  display: inline-flex;
  position: relative;
}

.mobile-drawer-create:active {
  opacity: .92;
  transform: scale(.98);
}

.mobile-drawer-create svg {
  flex: none;
}

.mobile-drawer-section {
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  display: flex;
}

.mobile-drawer-section--footer {
  margin-top: auto;
  padding-top: 12px;
}

.mobile-drawer-section > h3 {
  color: var(--text-muted);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0 0 2px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-drawer-links {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.mobile-drawer-link {
  width: 100%;
  min-height: 44px;
  color: var(--text-secondary);
  border: 1px solid #0000;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  transition: color .16s, background-color .16s;
  display: flex;
}

.mobile-drawer-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mobile-drawer-link.is-active {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: #0000;
}

.mobile-drawer-link__icon {
  width: 20px;
  height: 20px;
  color: inherit;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mobile-drawer-link.is-active .mobile-drawer-link__icon {
  box-shadow: none;
  background: none;
}

.mobile-drawer-link__label {
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.create-project-sheet {
  isolation: isolate;
  pointer-events: auto;
  overflow: hidden;
  top: var(--vv-top, 0px) !important;
  left: var(--vv-offset-left, 0px) !important;
  width: var(--vv-width, 100%) !important;
  height: var(--vv-height, 100%) !important;
  z-index: 200000 !important;
  position: fixed !important;
  bottom: auto !important;
  right: auto !important;
}

.create-project-sheet__backdrop {
  cursor: pointer;
  background: #0000007a;
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

:root[data-theme="light"] .create-project-sheet__backdrop, :root:not([data-theme="dark"]) .create-project-sheet__backdrop {
  background: #0000005c;
}

.create-project-sheet__panel {
  z-index: 1;
  color: #f0f0f0;
  width: 100%;
  max-width: 560px;
  min-height: min(48%, 360px);
  max-height: min(88%, 720px);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  will-change: transform;
  background: #141414;
  border: 1px solid #ffffff1f;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 -16px 48px #00000073, inset 0 -2px #ffffff0f;
  position: absolute !important;
}

.create-project-sheet[data-keyboard="1"] .create-project-sheet__panel {
  height: auto;
  min-height: 0;
  max-height: calc(var(--vv-height, 100dvh) - 12px);
}

:root[data-theme="light"] .create-project-sheet__panel, :root:not([data-theme="dark"]) .create-project-sheet__panel {
  color: #111;
  background: #fff;
  border-color: #0000001a;
  box-shadow: 0 -16px 48px #0000002e, inset 0 -1px #ffffffe6;
}

.create-project-sheet__header {
  z-index: 2;
  background: inherit;
  border-bottom: 0;
  flex: none;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 12px 6px;
  display: grid;
  position: sticky;
  top: 0;
}

.create-project-sheet__title {
  text-align: center;
  letter-spacing: -.015em;
  color: #f5f5f5;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
}

:root[data-theme="light"] .create-project-sheet__title, :root:not([data-theme="dark"]) .create-project-sheet__title {
  color: #111;
}

.create-project-sheet__icon-btn {
  color: #f0f0f0;
  cursor: pointer;
  background: #ffffff14;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  transition: background-color .16s, color .16s, border-color .16s, opacity .16s, transform .14s;
  display: inline-flex;
}

:root[data-theme="light"] .create-project-sheet__icon-btn, :root:not([data-theme="dark"]) .create-project-sheet__icon-btn {
  color: #111;
  background: #fff;
  border-color: #0000001f;
  box-shadow: 0 1px 2px #0000000f;
}

.create-project-sheet__icon-btn:hover:not(:disabled) {
  background: #ffffff24;
}

:root[data-theme="light"] .create-project-sheet__icon-btn:hover:not(:disabled), :root:not([data-theme="dark"]) .create-project-sheet__icon-btn:hover:not(:disabled) {
  background: #f5f5f5;
}

.create-project-sheet__icon-btn:active:not(:disabled) {
  transform: scale(.96);
}

.create-project-sheet__icon-btn:disabled {
  opacity: .4;
  cursor: default;
}

.create-project-sheet__confirm {
  opacity: .7;
  color: #a3a3a3 !important;
  background: #ffffff0f !important;
  border-color: #ffffff1a !important;
}

:root[data-theme="light"] .create-project-sheet__confirm, :root:not([data-theme="dark"]) .create-project-sheet__confirm {
  color: #a3a3a3 !important;
  background: #f0f0f0 !important;
  border-color: #00000014 !important;
}

.create-project-sheet__confirm.is-ready, .create-project-sheet__confirm.is-ready:hover:not(:disabled), .create-project-sheet__confirm.is-ready:focus-visible, :root[data-theme="dark"] .create-project-sheet__confirm.is-ready, :root[data-theme="dark"] .create-project-sheet__confirm.is-ready:hover:not(:disabled), :root[data-theme="light"] .create-project-sheet__confirm.is-ready, :root[data-theme="light"] .create-project-sheet__confirm.is-ready:hover:not(:disabled), :root:not([data-theme="dark"]) .create-project-sheet__confirm.is-ready, :root:not([data-theme="dark"]) .create-project-sheet__confirm.is-ready:hover:not(:disabled) {
  opacity: 1;
  color: #fff !important;
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

.create-project-sheet__confirm.is-ready:hover:not(:disabled) {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.create-project-sheet__body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  flex-direction: column;
  flex: auto;
  gap: 18px;
  min-height: 0;
  padding: 12px 20px 24px;
  display: flex;
  overflow: hidden auto;
}

.create-project-sheet[data-keyboard="1"] .create-project-sheet__body {
  gap: 14px;
  padding-bottom: 16px;
}

.create-project-sheet[data-keyboard="1"] .create-project-sheet__textarea {
  min-height: 88px;
}

.create-project-sheet__field {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  display: flex;
}

.create-project-sheet__label {
  letter-spacing: .005em;
  color: #d4d4d4;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: block;
}

:root[data-theme="light"] .create-project-sheet__label, :root:not([data-theme="dark"]) .create-project-sheet__label {
  color: #404040;
}

.create-project-sheet__input, .create-project-sheet__textarea {
  box-sizing: border-box;
  letter-spacing: .005em;
  appearance: none;
  border: 1px solid #0000001a;
  outline: none;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.45;
  transition: border-color .16s, box-shadow .16s;
  display: block;
  box-shadow: 0 1px 2px #0000000a;
  color: #111 !important;
  background: #fff !important;
}

.create-project-sheet__input {
  border-radius: 999px;
  min-height: 52px;
  padding: 14px 20px;
}

.create-project-sheet__textarea {
  resize: vertical;
  border-radius: 22px;
  min-height: 140px;
  padding: 16px 18px;
  line-height: 1.55;
}

.create-project-sheet__input::placeholder, .create-project-sheet__textarea::placeholder {
  opacity: 1;
  color: #8a8a8a !important;
}

.create-project-sheet__input:focus, .create-project-sheet__textarea:focus {
  border-color: #00000047;
  box-shadow: 0 0 0 3px #0000000f;
}

.create-project-sheet__input:disabled, .create-project-sheet__textarea:disabled {
  opacity: .55;
}

.mobile-sheet-backdrop {
  z-index: var(--z-mobile-overlay);
  background: var(--bg-primary);
  position: fixed;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .mobile-sheet-backdrop {
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  }
}

.mobile-sheet {
  z-index: var(--z-mobile-sheet);
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  width: min(100%, 560px);
  max-height: min(88dvh, 760px);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--border-hover);
  padding-bottom: env(safe-area-inset-bottom);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.mobile-sheet__handle {
  flex: none;
  justify-content: center;
  align-items: center;
  height: 20px;
  display: flex;
}

.mobile-sheet__handle span {
  background: var(--border-hover);
  border-radius: 999px;
  width: 40px;
  height: 4px;
}

.mobile-sheet__header {
  border-bottom: 1px solid var(--border);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 20px 16px;
  display: flex;
}

.mobile-sheet__eyebrow, .mobile-create-group > h3, .mobile-menu-section > h3 {
  color: var(--text-secondary);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-sheet__title {
  color: var(--text-primary);
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 3px 0 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
}

.mobile-sheet__close {
  border: 1px solid var(--border-visible);
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 14px;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: color .18s, background-color .18s, transform .16s;
  display: flex;
}

.mobile-sheet__close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.mobile-sheet__close:active {
  transform: scale(.96);
}

.mobile-sheet__scroll {
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  padding: 18px 16px 24px;
  overflow: hidden auto;
}

.mobile-create-groups {
  flex-direction: column;
  gap: 22px;
  display: flex;
}

.mobile-create-group {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.mobile-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.mobile-create-card {
  border: 1px solid var(--border-visible);
  min-width: 0;
  min-height: 94px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  text-align: left;
  box-shadow: inset 0 1px 0 var(--border);
  border-radius: 16px;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  transition: transform .16s, border-color .18s, background-color .18s, box-shadow .18s;
  display: grid;
}

.mobile-create-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--border-hover);
}

.mobile-create-card:active {
  transform: scale(.98);
}

.mobile-create-card__icon, .mobile-menu-card__icon, .mobile-menu-actions button > span:first-child {
  border: 1px solid var(--accent-border);
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  box-shadow: inset 0 1px 0 var(--border-hover);
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mobile-create-card__copy {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.mobile-create-card__copy strong {
  color: var(--text-primary);
  letter-spacing: -.01em;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.mobile-create-card__copy small {
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.mobile-create-card__arrow {
  color: var(--text-secondary);
}

.mobile-account-card {
  border: 1px solid var(--border-visible);
  width: 100%;
  min-height: 72px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  text-align: left;
  box-shadow: inset 0 1px 0 var(--border);
  border-radius: 18px;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  transition: border-color .18s, background-color .18s, transform .16s;
  display: grid;
}

.mobile-account-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.mobile-account-card:active {
  transform: scale(.99);
}

.mobile-account-card__avatar {
  border: 1px solid var(--accent-border);
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  background: var(--accent-subtle);
  letter-spacing: .03em;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.mobile-account-card__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mobile-account-card__copy {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.mobile-account-card__copy strong, .mobile-account-card__copy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mobile-account-card__copy strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
}

.mobile-account-card__copy small {
  color: var(--text-secondary);
  font-size: 12px;
}

.mobile-menu-section {
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.mobile-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.mobile-menu-card {
  border: 1px solid var(--border-visible);
  min-height: 66px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  box-shadow: inset 0 1px 0 var(--border);
  border-radius: 16px;
  grid-template-columns: 40px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  transition: transform .16s, color .18s, border-color .18s, background-color .18s;
  display: grid;
}

.mobile-menu-card > span:nth-child(2) {
  min-width: 0;
  color: var(--text-primary);
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
}

.mobile-menu-card:hover, .mobile-menu-card.is-active {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.mobile-menu-card:active {
  transform: scale(.98);
}

.mobile-menu-actions {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  border-radius: 16px;
  overflow: hidden;
}

.mobile-menu-actions button {
  border: 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  min-height: 56px;
  color: var(--text-primary);
  text-align: left;
  background: none;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .18s, color .18s;
  display: grid;
}

.mobile-menu-actions button:last-child {
  border-bottom: 0;
}

.mobile-menu-actions button:hover {
  background: var(--bg-hover);
}

.mobile-menu-actions button > span:first-child {
  border-radius: 12px;
  width: 36px;
  height: 36px;
}

.mobile-menu-actions__logout {
  color: var(--accent-danger) !important;
}

.notification-center {
  z-index: 90;
  width: 320px;
  position: absolute;
  top: 40px;
  right: 0;
  overflow: hidden;
}

.notification-center__empty {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 184px;
  padding: 28px 20px;
  display: flex;
}

.notification-center__empty-stage {
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  display: flex;
  position: relative;
}

.notification-center__empty-stage:before {
  content: "";
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
  border-radius: 999px;
  position: absolute;
  inset: -22px;
}

.notification-center__empty-stage span {
  border: 1px solid var(--accent-border);
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  box-shadow: inset 0 1px 0 var(--border-hover);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.notification-center__empty p {
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.notification-center__empty small {
  max-width: 30ch;
  color: var(--text-secondary);
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
}

.note-detail-icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
}

.mobile-chrome__btn:focus-visible, .mobile-drawer-link:focus-visible, .mobile-drawer-create:focus-visible, .mobile-drawer-profile:focus-visible, .mobile-sheet__close:focus-visible, .mobile-create-card:focus-visible, .mobile-account-card:focus-visible, .mobile-menu-card:focus-visible, .mobile-menu-actions button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.app-select-option {
  min-height: 44px;
}

.app-tab-rail {
  scrollbar-width: none;
}

.app-tab-rail::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  html, body {
    overscroll-behavior: none;
  }

  .notification-center--mobile {
    z-index: var(--z-mobile-sheet);
    top: var(--mobile-chrome-clearance);
    width: auto;
    max-height: calc(100dvh - var(--mobile-chrome-clearance) - env(safe-area-inset-bottom) - 24px);
    position: fixed;
    left: 12px;
    right: 12px;
  }

  .notification-center--mobile > div:last-child {
    max-height: min(56dvh, 420px);
  }

  .page-shell {
    padding: 20px var(--mobile-edge) 32px;
  }

  .page-header {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }

  .page-header > :first-child {
    flex: 220px;
    min-width: 0;
  }

  .page-title {
    letter-spacing: -.035em;
    text-wrap: balance;
    font-size: 1.65rem;
    line-height: 1.08;
  }

  .page-subtitle {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.55;
  }

  .page-btn {
    min-height: 44px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
  }

  .page-input, .app-field, .app-select-trigger {
    min-height: 44px;
    font-size: 14px;
  }

  .page-panel {
    border-radius: 16px;
  }

  .page-empty {
    min-height: 320px;
    padding: 48px 20px;
  }

  .page-empty-title {
    font-size: 17px;
  }

  .page-empty-sub {
    font-size: 14px;
    line-height: 1.55;
  }

  .page-empty-cta {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  .dashboard-shell {
    gap: 16px;
    padding: 16px;
  }

  .dashboard-rows {
    gap: 16px;
  }

  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-btn, .dashboard-review-btn, .dashboard-inline-link {
    min-height: 44px;
  }

  .course-card {
    min-height: 300px;
  }

  .note-detail-screen {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .note-detail-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .note-detail-title-row {
    width: 100%;
  }

  .note-detail-title-row input {
    font-size: 16px;
  }

  .note-detail-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .note-detail-actions > span {
    min-height: 36px;
  }

  .note-detail-actions > label {
    min-height: 44px;
  }

  .note-detail-actions > label select {
    min-height: 42px;
  }

  .note-detail-meta {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 8px 16px;
    line-height: 1.45;
  }
}

@media (max-width: 359px) {
  :root {
    --mobile-edge: 12px;
  }

  .mobile-create-grid, .mobile-menu-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-chrome__btn, .mobile-drawer, .mobile-drawer-link, .mobile-drawer-create, .mobile-create-card, .mobile-account-card, .mobile-menu-card {
    transition-duration: .01ms !important;
  }
}

.glass-button {
  min-height: 44px;
  color: var(--text-primary);
  background: linear-gradient(180deg, #ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), var(--accent);
  border: 1px solid #ffffff5c;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  display: inline-flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-button {
    background: linear-gradient(180deg, #ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), color-mix(in srgb, var(--accent) 30%, var(--bg-elevated));
  }
}

.glass-button {
  letter-spacing: -.01em;
  -webkit-backdrop-filter: blur(22px) saturate(1.85);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: transform .14s, box-shadow .16s, opacity .16s;
  box-shadow: inset 0 1px #ffffff8c, 0 8px 24px #00000024;
}

.glass-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.glass-button:active:not(:disabled) {
  transform: scale(.97);
}

.glass-button:focus-visible {
  outline: 2px solid var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 76%, var(--text-primary));
  }
}

.glass-button:focus-visible {
  outline-offset: 2px;
}

.glass-button:disabled {
  cursor: default;
  opacity: .5;
}

.glass-button--destructive {
  background: linear-gradient(#ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), #ef4444;
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-button--destructive {
    background: linear-gradient(180deg, #ffffff52 0%, #ffffff1a 45%, #ffffff0a 100%), color-mix(in srgb, #ef4444 34%, var(--bg-elevated));
  }
}

.glass-button__spinner {
  width: 16px;
  height: 16px;
  animation: .8s linear infinite glass-spin;
}

@keyframes glass-spin {
  to {
    transform: rotate(360deg);
  }
}

.glass-overlay {
  z-index: var(--z-modal, 100);
  background: #00000073;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

.glass-overlay__panel {
  background: linear-gradient(165deg, #ffffff24 0%, #ffffff0a 100%), var(--bg-card);
  border: 1px solid #fff3;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-overlay__panel {
    background: linear-gradient(165deg, #ffffff24 0%, #ffffff0a 100%), color-mix(in srgb, var(--bg-card) 88%, transparent);
  }
}

.glass-overlay__panel {
  box-shadow: inset 0 1px 0 #ffffff4d, var(--shadow-md);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
}

@media (prefers-reduced-motion: reduce) {
  .glass-button {
    transition-duration: .01ms;
  }

  .glass-button__spinner {
    animation-duration: .01ms;
  }
}

.conv-sources-panel {
  top: calc(var(--win-caption-height, 0px) + 12px);
  z-index: 40;
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  width: min(384px, 100vw - 24px);
  box-shadow: var(--shadow-md), inset 0 1px 0 #ffffff08;
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  position: fixed;
  bottom: 12px;
  right: 12px;
  overflow: hidden;
}

.conv-sources-panel__head {
  align-items: center;
  gap: 9px;
  padding: 15px 14px 5px 16px;
  display: flex;
}

.conv-sources-panel__mark {
  color: var(--accent-hover);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.conv-sources-panel__title {
  letter-spacing: -.01em;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.conv-sources-panel__count {
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  min-width: 20px;
  height: 20px;
  color: var(--accent-hover);
  border-radius: 999px;
  place-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.conv-sources-panel__close {
  border: 1px solid var(--border-visible);
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  flex-shrink: 0;
  place-items: center;
  margin-left: auto;
  transition: background-color .18s, color .18s;
  display: grid;
}

.conv-sources-panel__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.chat-welcome-topright {
  z-index: 10;
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.chat-sources-btn {
  position: relative;
}

.chat-sources-btn__count {
  border: 1px solid var(--bg-primary);
  background: var(--accent);
  color: #fff;
  pointer-events: none;
  border-radius: 999px;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 2px;
  right: 2px;
}

.conv-sources-add {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  border-radius: 14px;
  margin: 12px;
  padding: 12px;
  transition: border-color .18s, background-color .18s;
}

.conv-sources-add.is-dragging {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.conv-sources-add__hint {
  letter-spacing: .005em;
  text-align: center;
  color: var(--text-muted);
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
}

.conv-sources-linkbar {
  align-items: center;
  gap: 11px;
  padding: 0 10px;
  display: flex;
}

.conv-sources-linkbar__logo {
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  display: grid;
}

.conv-sources-linkbar__field {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  border-radius: 12px;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 0 6px 0 12px;
  transition: border-color .18s, box-shadow .18s;
  display: flex;
}

.conv-sources-linkbar__field:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.conv-sources-linkbar__input {
  min-width: 0;
  color: var(--text-primary);
  letter-spacing: .005em;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 13px;
}

.conv-sources-linkbar__input::placeholder {
  color: var(--text-muted);
}

.conv-sources-linkbar__go {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: opacity .18s, background-color .18s;
  display: grid;
}

.conv-sources-linkbar__go:hover:not(:disabled) {
  background: var(--accent-hover);
}

.conv-sources-linkbar__go:disabled {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: default;
}

.conv-sources-choices {
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.conv-sources-choice {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 12px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  transition: background-color .18s, border-color .18s;
  display: flex;
}

.conv-sources-choice:hover {
  background: var(--bg-hover);
  border-color: var(--border-visible);
}

.conv-sources-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.conv-sources-choice__icon {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
  border-radius: 9px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.conv-sources-choice:hover .conv-sources-choice__icon {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

.conv-sources-choice__text {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.conv-sources-choice__label {
  letter-spacing: -.01em;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
}

.conv-sources-choice__hint {
  letter-spacing: .005em;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.conv-sources-back {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  transition: color .18s;
  display: inline-flex;
}

.conv-sources-back:hover {
  color: var(--text-primary);
}

.conv-sources-search {
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  min-height: 38px;
  color: var(--text-muted);
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  transition: border-color .18s, box-shadow .18s;
  display: flex;
}

.conv-sources-search:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.conv-sources-search__input {
  min-width: 0;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 13px;
}

.conv-sources-notes {
  scrollbar-width: thin;
  flex-direction: column;
  gap: 2px;
  max-height: 236px;
  margin-top: 8px;
  display: flex;
  overflow-y: auto;
}

.conv-sources-note {
  width: 100%;
  min-height: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  transition: background-color .18s, border-color .18s;
  display: flex;
}

.conv-sources-note:hover {
  background: var(--bg-hover);
  border-color: var(--border-visible);
}

.conv-sources-note__text {
  text-align: left;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.conv-sources-note__title {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
}

.conv-sources-note__course {
  letter-spacing: .02em;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.conv-sources-list {
  scrollbar-width: thin;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 0 12px 12px;
  display: flex;
  overflow-y: auto;
}

.conv-sources-empty {
  color: var(--text-muted);
  padding: 8px 2px;
  font-size: 12.5px;
  line-height: 1.6;
}

.conv-source-row {
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  display: flex;
}

.conv-source-row__icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.conv-source-row[data-status="error"] .conv-source-row__icon {
  color: var(--status-down);
}

.conv-source-row[data-status="ready"] .conv-source-row__icon {
  color: var(--accent-hover);
}

.conv-source-row__body {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.conv-source-row__name {
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
}

.conv-source-row__meta, .conv-source-row__error {
  letter-spacing: .04em;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.conv-source-row__error {
  letter-spacing: .005em;
  color: var(--status-down);
}

.conv-source-row__remove {
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  transition: background-color .18s, color .18s;
  display: grid;
}

.conv-source-row__remove:hover {
  background: var(--bg-hover);
  color: var(--status-down);
}

@media (max-width: 768px) {
  .conv-sources-panel {
    border-left: 1px solid var(--border-visible);
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-radius: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
  }

  .conv-sources-panel__head {
    padding-top: calc(env(safe-area-inset-top) + 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .conv-sources-add, .conv-sources-choice, .conv-sources-note, .conv-sources-back, .conv-sources-linkbar__field, .conv-sources-linkbar__go, .conv-sources-search, .conv-sources-panel__close, .conv-source-row__remove {
    transition: none;
  }
}

.conv-tools-panel {
  top: calc(var(--win-caption-height, 0px) + 12px);
  z-index: 40;
  border: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  width: min(520px, 100vw - 24px);
  box-shadow: var(--shadow-md), inset 0 1px 0 #ffffff08;
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  position: fixed;
  bottom: 12px;
  right: 12px;
  overflow: hidden;
}

.conv-tools-panel__head {
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  padding: 15px 14px 5px 16px;
  display: flex;
}

.conv-tools-panel__mark {
  color: var(--accent-hover);
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.conv-tools-panel__title {
  letter-spacing: -.01em;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.conv-tools-panel__title--run {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.conv-tools-panel__count {
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  min-width: 20px;
  height: 20px;
  color: var(--accent-hover);
  border-radius: 999px;
  place-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.conv-tools-panel__close {
  border: 1px solid var(--border-visible);
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border-radius: 999px;
  flex-shrink: 0;
  place-items: center;
  margin-left: auto;
  transition: background-color .18s, color .18s;
  display: grid;
}

.conv-tools-panel__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.conv-tools-panel[hidden], .conv-tools-list[hidden], .conv-tools-run[hidden] {
  display: none;
}

.conv-tools-panel__body {
  scrollbar-width: thin;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.conv-tools-back {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  transition: color .18s;
  display: inline-flex;
}

.conv-tools-back:hover {
  color: var(--text-primary);
}

.conv-tools-list {
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 16px;
  display: flex;
}

.conv-tools-lede {
  letter-spacing: .005em;
  color: var(--text-muted);
  padding: 4px 4px 8px;
  font-size: 12px;
  line-height: 1.6;
}

.conv-tools-card {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  transition: background-color .18s, border-color .18s;
  display: flex;
}

.conv-tools-card:hover, .conv-tools-card:focus-visible {
  background: var(--bg-hover);
  border-color: var(--border-visible);
}

.conv-tools-card__ico {
  border: 1px solid #0000;
  border-radius: 11px;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  box-shadow: inset 0 1px #ffffff10;
}

.conv-tools-card__text {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.conv-tools-card__name {
  letter-spacing: -.005em;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
}

.conv-tools-card__desc {
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .005em;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
  overflow: hidden;
}

.conv-tools-card__arrow {
  color: var(--text-muted);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .18s, transform .18s;
  transform: translateX(-4px);
}

.conv-tools-card:hover .conv-tools-card__arrow, .conv-tools-card:focus-visible .conv-tools-card__arrow {
  opacity: 1;
  transform: none;
}

.conv-tools-empty {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 32px 40px;
  display: flex;
}

.conv-tools-empty__halo {
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  border-radius: 999px;
  place-items: center;
  width: 76px;
  height: 76px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .conv-tools-empty__halo {
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%);
  }
}

.conv-tools-empty__mark {
  border: 1px solid var(--accent-border);
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
  width: 48px;
  height: 48px;
  color: var(--accent-hover);
  border-radius: 16px;
  place-items: center;
  display: grid;
  box-shadow: inset 0 1px #ffffff10;
}

.conv-tools-empty__title {
  letter-spacing: -.01em;
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 600;
}

.conv-tools-empty__body {
  letter-spacing: .005em;
  max-width: 30ch;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.conv-tools-empty__cta {
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  min-height: 34px;
  color: var(--accent-hover);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background-color .18s, border-color .18s;
  display: inline-flex;
}

.conv-tools-empty__cta:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.conv-tools-run {
  min-width: 0;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .conv-tools-panel {
    border-left: 1px solid var(--border-visible);
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-radius: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
  }

  .conv-tools-panel__head {
    padding-top: calc(env(safe-area-inset-top) + 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .conv-tools-card, .conv-tools-card__arrow, .conv-tools-back, .conv-tools-empty__cta, .conv-tools-panel__close {
    transition: none;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.product-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  animation: product-overlay-in 180ms ease-out;
}

.product-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 221;
  display: flex;
  width: calc(100vw - 32px);
  max-height: min(88dvh, 780px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-xl), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  transform: translate(-50%, -50%);
  animation: product-dialog-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-dialog--compact { max-width: 520px; }
.product-dialog--default { max-width: 660px; }
.product-dialog--wide { max-width: 860px; }

.product-dialog__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-visible);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--bg-secondary);
}

.product-dialog__header::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--border-visible) 28%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--border-visible) 28%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, var(--text-primary), transparent 58%);
  opacity: 0.35;
}

.product-dialog__header > * {
  position: relative;
  z-index: 1;
}

.product-dialog__icon-stage {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 22px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 72%);
}

.product-dialog__icon-ring {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-subtle) 76%, var(--bg-card));
}

.product-dialog__icon-core {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-hover);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 9%, transparent);
}

.product-dialog__heading { min-width: 0; }

.product-dialog__eyebrow,
.product-surface__label {
  margin: 0 0 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-dialog__title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.product-dialog__subtitle {
  max-width: 58ch;
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.product-dialog__close,
.product-icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-visible);
  border-radius: 13px;
  color: var(--text-muted);
  background: var(--bg-card);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.product-dialog__close:hover,
.product-icon-button:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.product-dialog__close:active,
.product-icon-button:active { transform: scale(0.96); }

/* Header on the card itself: no tinted band, no grid, no icon container. */
.product-dialog--plain-header .product-dialog__header {
  padding: 24px 24px 4px;
  border-bottom: 0;
  background: var(--bg-card);
}

.product-dialog--plain-header .product-dialog__header::after { content: none; }

.product-dialog--plain-header .product-dialog__icon-stage,
.product-dialog--plain-header .product-dialog__icon-ring,
.product-dialog--plain-header .product-dialog__icon-core {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.product-dialog--plain-header .product-dialog__icon-stage { color: var(--accent-hover); }
.product-dialog--plain-header .product-dialog__body { padding-top: 20px; }

.product-dialog__body {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
}

.product-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.product-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.product-button:hover:not(:disabled) { transform: translateY(-1px); }
.product-button:active:not(:disabled) { transform: scale(0.98); }
.product-button:disabled { cursor: not-allowed; opacity: 0.5; }
.product-button--primary { color: var(--btn-primary-text); background: var(--btn-primary-bg); }
.product-button--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }
.product-button--secondary { border-color: var(--border-visible); color: var(--text-primary); background: var(--bg-card); }
.product-button--secondary:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-hover); }
.product-button--quiet { color: var(--text-secondary); background: transparent; }
.product-button--quiet:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-hover); }

.product-button:focus-visible,
.product-dialog__close:focus-visible,
.product-icon-button:focus-visible,
.product-field:focus-visible,
.product-interactive:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.product-field {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  outline: 0;
  color: var(--text-primary);
  background: var(--input-bg);
  font-size: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.product-field:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.product-field::placeholder { color: var(--text-muted); }

.product-surface {
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.product-inline-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  color: var(--accent-hover);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
}

@keyframes product-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes product-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 640px) {
  .product-dialog {
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: min(92dvh, 820px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    transform: none;
    animation-name: product-dialog-mobile-in;
  }

  .product-dialog__header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 16px;
  }

  .product-dialog__icon-stage { width: 52px; height: 52px; border-radius: 18px; }
  .product-dialog__icon-ring { width: 46px; height: 46px; border-radius: 16px; }
  .product-dialog__icon-core { width: 36px; height: 36px; border-radius: 12px; }
  .product-dialog__title { font-size: 20px; }
  .product-dialog__subtitle { font-size: 13px; }
  .product-dialog__body { padding: 18px 16px 22px; }
  .product-dialog__footer { padding: 14px 16px max(14px, env(safe-area-inset-bottom)); }
  .product-dialog__eyebrow { display: none; }
}

@keyframes product-dialog-mobile-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .product-dialog,
  .product-dialog-overlay { animation-duration: 1ms; }
  .product-button,
  .product-dialog__close,
  .product-icon-button { transition-duration: 1ms; }
}

/* About Norex */
.about-dialog { display: grid; gap: 24px; }
.about-dialog__intro {
  max-width: 65ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.about-dialog__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.about-dialog__feature {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.about-dialog__trust {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 15px;
}
.about-dialog__trust > svg { margin-top: 9px; color: var(--text-muted); }
.about-dialog__trust h3 { margin: 1px 0 0; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.about-dialog__trust p { margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.about-dialog__metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.about-dialog__metadata > div { padding: 13px 14px; border-left: 2px solid var(--accent-border); background: var(--bg-secondary); }
.about-dialog__metadata dt { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.about-dialog__metadata dd { margin: 6px 0 0; color: var(--text-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.about-dialog__legal { display: flex; align-items: center; gap: 10px; }
.about-dialog__legal button { min-height: 44px; padding: 0 4px; color: var(--text-muted); font-size: 13px; font-weight: 600; transition: color 180ms ease; }
.about-dialog__legal button:hover { color: var(--text-primary); }
.about-dialog__legal button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.about-dialog__legal span { width: 3px; height: 3px; border-radius: 50%; background: var(--border-hover); }

@media (max-width: 560px) {
  .about-dialog__features,
  .about-dialog__metadata { grid-template-columns: 1fr; }
  .about-dialog__feature { min-height: 56px; }
  .about-dialog__trust { grid-template-columns: auto minmax(0, 1fr); }
  .about-dialog__trust > svg { display: none; }
  .about-dialog__legal { width: 100%; justify-content: center; }
  .about-dialog__legal + .product-button { width: 100%; }
}

/* Keyboard shortcuts */
.shortcuts-dialog { display: grid; gap: 20px; }
.shortcuts-dialog__search { position: relative; display: block; }
.shortcuts-dialog__search > svg { position: absolute; top: 50%; left: 14px; z-index: 1; color: var(--text-muted); transform: translateY(-50%); }
.shortcuts-dialog__search input { padding: 0 94px 0 42px; }
.shortcuts-dialog__modifier { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--border-visible); border-radius: 8px; color: var(--text-muted); background: var(--bg-secondary); font-size: 11px; font-weight: 650; transform: translateY(-50%); }
.shortcuts-dialog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.shortcuts-dialog__section { animation: shortcut-section-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--shortcut-delay); }
.shortcuts-dialog__section:last-child { grid-column: 1 / -1; }
.shortcuts-dialog__list { overflow: hidden; }
.shortcuts-dialog__row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--border-visible); color: var(--text-secondary); font-size: 13px; line-height: 1.35; }
.shortcuts-dialog__row:first-child { border-top: 0; }
.shortcuts-dialog__keys { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.shortcuts-dialog__keys kbd { display: inline-grid; min-width: 29px; height: 28px; padding: 0 7px; place-items: center; border: 1px solid var(--border-visible); border-bottom-color: var(--border-hover); border-radius: 8px; color: var(--text-primary); background: linear-gradient(180deg, var(--bg-elevated), var(--bg-hover)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent), 0 1px 0 var(--border-visible); font-family: inherit; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shortcuts-dialog__hint { display: flex; align-items: center; gap: 11px; }
.shortcuts-dialog__hint p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.shortcuts-dialog__hint strong { margin-right: 6px; color: var(--text-secondary); }
.shortcuts-dialog__empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.shortcuts-dialog__empty p { max-width: 36ch; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
@keyframes shortcut-section-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 580px) {
  .shortcuts-dialog__grid { grid-template-columns: 1fr; }
  .shortcuts-dialog__section:last-child { grid-column: auto; }
  .shortcuts-dialog__modifier { display: none; }
  .shortcuts-dialog__search input { padding-right: 14px; }
}

/* Invite a friend */
.invite-dialog { display: grid; gap: 22px; }
.invite-dialog__count { display: flex; align-items: center; gap: 12px; padding: 12px; }
.invite-dialog__count p { margin: 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.45; }
.invite-dialog__link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.invite-dialog__link { display: flex; min-width: 0; align-items: center; padding: 0 13px; overflow: hidden; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.invite-dialog__link.is-loading { position: relative; color: var(--text-muted); overflow: hidden; }
.invite-dialog__link.is-loading::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent); transform: translateX(-100%); animation: invite-loading 1.3s ease-in-out infinite; }
.invite-dialog__error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.invite-dialog__error p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.invite-dialog__email { padding: 0 13px; }
.invite-dialog__email-error { margin: 8px 0 0; color: var(--accent-danger); font-size: 12px; line-height: 1.5; }
.invite-dialog__email-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.invite-dialog__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.invite-dialog__steps li { display: grid; min-height: 54px; grid-template-columns: 24px 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border-visible); border-radius: 14px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 13px; font-weight: 600; }
.invite-dialog__step-index { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--accent-border); border-radius: 50%; color: var(--accent-hover); background: var(--accent-subtle); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.invite-dialog__privacy { margin: -4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; text-wrap: pretty; }
.invite-dialog__footer-actions { display: flex; width: 100%; justify-content: flex-end; gap: 10px; }
@keyframes invite-loading { to { transform: translateX(100%); } }

@media (max-width: 520px) {
  .invite-dialog__link-row { grid-template-columns: 1fr; }
  .invite-dialog__link-row .product-button { width: 100%; }
  .invite-dialog__footer-actions { flex-direction: column-reverse; }
  .invite-dialog__footer-actions .product-button { width: 100%; }
}

/* Help center */
.help-widget-shell {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 221;
  display: flex;
  width: min(680px, calc(100vw - 36px));
  height: min(84dvh, 820px);
  min-height: min(640px, calc(100dvh - 36px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 26px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  transform-origin: bottom left;
}
.help-widget-shell__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 98px;
  padding: 18px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-visible);
  background:
    radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    var(--bg-secondary);
}
.help-widget-shell__header::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--border-visible) 48%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--border-visible) 48%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, var(--text-primary));
  opacity: 0.55;
}
.help-widget-shell__header > * { position: relative; z-index: 1; }
.help-widget-shell__icon-stage { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--border-visible); border-radius: 20px; background: color-mix(in srgb, var(--bg-card) 82%, var(--accent-subtle)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent); }
.help-widget-shell__icon-ring { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--accent-border); border-radius: 15px; color: var(--accent-hover); background: var(--accent-subtle); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent); }
.help-widget-shell__heading { min-width: 0; }
.help-widget-shell__heading > p { margin: 0 0 4px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.help-widget-shell__heading h2 { margin: 0; color: var(--text-primary); font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 650; line-height: 1.1; letter-spacing: -0.035em; }
.help-widget-shell__heading p[aria-describedby],
.help-widget-shell__heading > p:last-child { max-width: 48ch; margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; font-weight: 450; line-height: 1.45; letter-spacing: 0.005em; text-transform: none; }
.help-widget-shell__actions { display: flex; align-items: center; gap: 10px; }
.help-widget-shell__status { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border-visible); border-radius: 999px; color: var(--text-secondary); background: var(--bg-card); font-size: 11px; font-weight: 650; letter-spacing: 0.01em; }
.help-widget-shell__status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.help-widget-shell__close { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border-visible); border-radius: 14px; color: var(--text-muted); background: var(--bg-card); transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-widget-shell__close:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); transform: rotate(3deg); }
.help-widget-shell__close:active { transform: scale(0.96); }
.help-widget-shell__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.help-widget-shell__content { display: flex; min-height: 0; flex: 1; overflow: hidden; }
.help-dialog { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; }
.help-dialog__tabs { flex: 0 0 auto; padding: 9px 12px 12px; border-top: 1px solid var(--border-visible); background: var(--bg-card); }
.help-dialog__tabs-track { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--border-visible); border-radius: 16px; background: var(--bg-secondary); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent); }
.help-dialog__tab { position: relative; display: inline-flex; min-height: 42px; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: var(--text-muted); background: transparent; font-size: 13px; font-weight: 650; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-dialog__tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.help-dialog__tab:active { transform: scale(0.98); }
.help-dialog__tab.is-active { border-color: var(--border-visible); color: var(--text-primary); background: var(--bg-card); box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent); }
.help-dialog__tab.is-active::after { position: absolute; bottom: 4px; width: 16px; height: 2px; border-radius: 999px; background: var(--accent); content: ""; }
.help-dialog__search { position: relative; display: block; width: 100%; }
.help-dialog__search > svg { position: absolute; top: 50%; left: 14px; z-index: 1; color: var(--text-muted); transform: translateY(-50%); }
.help-dialog__search input { padding: 0 14px 0 42px; }

.help-home { display: grid; min-height: 0; flex: 1; grid-template-rows: auto minmax(306px, 1fr); gap: 24px; padding: 28px; overflow-y: auto; background: var(--bg-primary); }
.help-home__intro { max-width: 590px; }
.help-home__intro h3 { max-width: 20ch; margin: 0; color: var(--text-primary); font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4.6vw, 38px); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.help-home__intro > p { max-width: 56ch; margin: 10px 0 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.help-home__search-launch { display: flex; min-height: 52px; align-items: center; padding: 0 46px 0 44px; color: var(--text-muted); text-align: left; background: var(--bg-card); box-shadow: var(--shadow-xs); transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__search-launch::after { position: absolute; right: 14px; width: 23px; height: 23px; border: 1px solid var(--border-visible); border-radius: 8px; color: var(--text-muted); content: "/"; font-family: 'DM Mono', monospace; font-size: 11px; line-height: 21px; text-align: center; }
.help-home__search-launch:hover { border-color: var(--accent-border); color: var(--text-primary); background: var(--bg-secondary); transform: translateY(-1px); }
.help-home__workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.88fr); gap: 12px; }
.help-home__assistant-card { position: relative; display: flex; min-height: 306px; flex-direction: column; align-items: flex-start; padding: 24px; overflow: hidden; border: 1px solid var(--accent-border); border-radius: 22px; color: var(--text-primary); text-align: left; background: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%), var(--bg-secondary); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent); transition: border-color 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__assistant-card::after { position: absolute; right: -36px; bottom: -72px; width: 190px; height: 190px; border: 1px solid var(--accent-border); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 28px color-mix(in srgb, var(--accent-subtle) 50%, transparent), inset 0 0 0 56px color-mix(in srgb, var(--accent-subtle) 22%, transparent); opacity: 0.55; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__assistant-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-visible)); transform: translateY(-3px); box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent); }
.help-home__assistant-card:hover::after { transform: translate(-8px, -6px) scale(1.04); }
.help-home__assistant-card:active { transform: translateY(-1px) scale(0.99); }
.help-home__assistant-orbit { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid var(--border-visible); border-radius: 23px; background: color-mix(in srgb, var(--bg-card) 84%, var(--accent-subtle)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent); }
.help-home__assistant-orbit > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--accent-border); border-radius: 17px; color: var(--accent-hover); background: var(--accent-subtle); }
.help-home__assistant-copy { position: relative; z-index: 1; display: flex; flex-direction: column; margin-top: 24px; }
.help-home__assistant-copy small { color: var(--accent-hover); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.help-home__assistant-copy strong { max-width: 15ch; margin-top: 7px; color: var(--text-primary); font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 650; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.help-home__assistant-copy > span { max-width: 34ch; margin-top: 8px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.help-home__assistant-cta { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; color: var(--text-primary); font-size: 12px; font-weight: 700; }
.help-home__assistant-cta > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--accent-text); background: var(--accent); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__assistant-card:hover .help-home__assistant-cta > span { transform: translateX(3px); }
.help-home__guide-card { display: flex; min-height: 306px; flex-direction: column; overflow: hidden; border: 1px solid var(--border-visible); border-radius: 22px; background: var(--bg-card); box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent); }
.help-home__guide-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 17px 16px 15px; border-bottom: 1px solid var(--border-visible); }
.help-home__guide-heading > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.help-home__guide-heading strong { color: var(--text-primary); font-size: 13px; font-weight: 700; line-height: 1.3; }
.help-home__guide-heading small { color: var(--text-muted); font-size: 11px; line-height: 1.4; text-wrap: pretty; }
.help-home__guide-list { display: flex; flex: 1; flex-direction: column; }
.help-home__guide-list button { display: grid; min-height: 54px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 13px; border-bottom: 1px solid var(--border-visible); color: var(--text-muted); text-align: left; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__guide-list button:hover { color: var(--text-primary); background: var(--bg-hover); }
.help-home__guide-list button:active { transform: scale(0.99); }
.help-home__guide-list button > span:nth-child(2) { overflow: hidden; color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.help-home__browse-all { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 15px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 12px; font-weight: 700; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-home__browse-all:hover { color: var(--text-primary); background: var(--accent-subtle); }
.help-guides__list button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.help-guides__list strong { color: var(--text-primary); font-size: 13px; font-weight: 650; line-height: 1.3; }
.help-guides__list small { color: var(--text-muted); font-size: 12px; font-weight: 450; line-height: 1.4; }

.help-assistant { display: grid; min-height: 0; flex: 1; grid-template-rows: auto minmax(0, 1fr) auto; }
.help-assistant__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-visible); background: var(--bg-card); }
.help-assistant__prompt-group { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 8px; }
.help-assistant__prompt-group > span { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.help-assistant__prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.help-assistant__prompts button { min-height: 34px; padding: 0 11px; border: 1px solid var(--border-visible); border-radius: 999px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 11px; font-weight: 600; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-assistant__prompts button:hover:not(:disabled) { border-color: var(--accent-border); color: var(--text-primary); background: var(--accent-subtle); }
.help-assistant__prompts button:active:not(:disabled) { transform: scale(0.98); }
.help-assistant__prompts button:disabled { opacity: 0.5; }
.help-assistant__messages { display: flex; min-height: 0; flex-direction: column; gap: 14px; padding: 22px; overflow-y: auto; background: radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 30%), var(--bg-primary); }
.help-assistant__message { display: flex; max-width: min(80%, 560px); align-items: flex-start; gap: 10px; }
.help-assistant__message > .product-inline-icon { margin-top: 2px; }
.help-assistant__message p { margin: 0; padding: 12px 14px; border: 1px solid var(--border-visible); border-radius: 7px 17px 17px; color: var(--text-primary); background: var(--bg-card); box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.help-assistant__message.is-user { align-self: flex-end; }
.help-assistant__message.is-user p { border-color: var(--accent-border); border-radius: 17px 7px 17px 17px; background: color-mix(in srgb, var(--accent-subtle) 82%, var(--bg-card)); }
.help-assistant__message.is-loading p { color: var(--text-muted); animation: help-loading-pulse 1.2s ease-in-out infinite; }
.help-assistant__error { margin: 0; padding: 11px 13px; border: 1px solid var(--border-visible); border-radius: 12px; color: var(--text-secondary); background: var(--bg-hover); font-size: 13px; line-height: 1.5; }
.help-assistant__composer { padding: 11px 14px 13px; border-top: 1px solid var(--border-visible); background: var(--bg-card); }
.help-assistant__composer-core { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 5px; border: 1px solid var(--border-visible); border-radius: 18px; background: var(--bg-secondary); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent); transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-assistant__composer-core:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-subtle), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent); }
.help-assistant__composer textarea { min-height: 48px; max-height: 120px; padding: 10px 11px; border: 0; outline: 0; color: var(--text-primary); background: transparent; resize: none; font: inherit; font-size: 14px; line-height: 1.5; }
.help-assistant__composer textarea::placeholder { color: var(--text-muted); }
.help-assistant__composer textarea:disabled { opacity: 0.55; }
.help-assistant__send { display: grid; width: 44px; height: 44px; margin: 2px; place-items: center; border-radius: 14px; color: var(--accent-text); background: var(--accent); transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-assistant__send:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.help-assistant__send:active:not(:disabled) { transform: scale(0.96); }
.help-assistant__send:disabled { color: var(--text-muted); background: var(--bg-hover); opacity: 0.65; }
@keyframes help-loading-pulse { 50% { opacity: 0.55; } }

.help-guides { display: grid; min-height: 0; flex: 1; grid-template-rows: auto minmax(0, 1fr); }
.help-guides__search { padding: 14px 16px; border-bottom: 1px solid var(--border-visible); background: var(--bg-card); }
.help-guides__search > svg { left: 30px; }
.help-guides__search input { min-height: 48px; background: var(--bg-secondary); }
.help-guides__layout { display: grid; min-height: 0; grid-template-columns: minmax(238px, 0.82fr) minmax(0, 1.5fr); background: var(--bg-primary); }
.help-guides__list { min-height: 0; padding: 10px; overflow-y: auto; border-right: 1px solid var(--border-visible); background: var(--bg-secondary); }
.help-guides__list button { display: grid; width: 100%; min-height: 68px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 14px; color: var(--text-muted); text-align: left; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.help-guides__list button:hover { color: var(--text-primary); background: var(--bg-hover); }
.help-guides__list button:active { transform: scale(0.99); }
.help-guides__list button.is-active { border-color: var(--accent-border); color: var(--text-primary); background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); }
.help-guides__article { margin: 14px; padding: 24px; overflow-y: auto; border-radius: 20px; box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent); }
.help-guides__article h3 { max-width: 20ch; margin: 0; color: var(--text-primary); font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 650; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.help-guides__summary { margin: 9px 0 0; color: var(--text-secondary); font-size: 14px; font-weight: 550; line-height: 1.55; }
.help-guides__content { margin: 20px 0 24px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.help-guides__article ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-guides__article li { display: flex; min-height: 46px; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid var(--border-visible); border-radius: 13px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 13px; font-weight: 600; }
.help-guides__article li > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1px solid var(--accent-border); border-radius: 8px; color: var(--accent-hover); background: var(--accent-subtle); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.help-guides__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.help-guides__empty { display: flex; min-height: 340px; margin: 14px; flex-direction: column; align-items: center; justify-content: center; padding: 28px; border-radius: 20px; text-align: center; }
.help-guides__empty h3 { max-width: 34ch; margin: 15px 0 0; color: var(--text-primary); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.help-guides__empty p { max-width: 42ch; margin: 7px 0 18px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 720px) {
  .help-widget-shell { bottom: 12px; left: 12px; width: calc(100vw - 24px); height: min(88dvh, 780px); min-height: min(620px, calc(100dvh - 24px)); }
  .help-home { grid-template-rows: auto; padding: 18px 16px 22px; }
  .help-home__workspace { grid-template-columns: 1fr; }
  .help-home__assistant-card { min-height: 280px; }
  .help-home__guide-card { min-height: 0; }
  .help-guides__layout { display: block; overflow-y: auto; }
  .help-guides__list { display: flex; gap: 8px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-visible); }
  .help-guides__list button { width: min(260px, 76vw); min-width: min(260px, 76vw); }
  .help-guides__article { overflow: visible; }
}

@media (max-width: 520px) {
  .help-widget-shell { bottom: 0; left: 0; width: 100%; height: min(94dvh, 800px); min-height: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 24px 24px 0 0; }
  .help-widget-shell__header { min-height: 88px; gap: 11px; padding: 14px; }
  .help-widget-shell__icon-stage { width: 52px; height: 52px; border-radius: 18px; }
  .help-widget-shell__icon-ring { width: 40px; height: 40px; border-radius: 14px; }
  .help-widget-shell__heading h2 { font-size: 20px; }
  .help-widget-shell__heading > p:first-child { display: none; }
  .help-widget-shell__heading > p:last-child { font-size: 12px; }
  .help-widget-shell__status { display: none; }
  .help-home { gap: 20px; padding: 22px 16px 26px; }
  .help-home__intro h3 { font-size: 30px; }
  .help-home__intro > p { margin-top: 8px; }
  .help-home__assistant-card { min-height: 288px; padding: 20px; }
  .help-home__assistant-copy { margin-top: 20px; }
  .help-home__assistant-copy strong { font-size: 21px; }
  .help-dialog__tabs { padding: 8px 9px 10px; }
  .help-dialog__tab { flex: 1; padding: 0 8px; }
  .help-assistant__toolbar { align-items: flex-end; padding: 11px 12px; }
  .help-assistant__prompts { flex-wrap: nowrap; overflow-x: auto; }
  .help-assistant__prompts button { flex: 0 0 auto; }
  .help-assistant__messages { padding: 14px 12px; }
  .help-assistant__message { max-width: 90%; }
  .help-assistant__composer { padding: 9px 10px 11px; }
  .help-guides__article { margin: 10px; padding: 18px 14px; }
  .help-guides__actions { flex-direction: column-reverse; }
  .help-guides__actions .product-button { width: 100%; }
}
/* Claude Design — Norex Sign Up */
.signup-design {
    /* Norex — noir/blanc chaud, neutres chaleureux (style Notion) */
    --bg:#ffffff;
    --bg-soft:#f7f7f5;
    --bg-elev:#ffffff;
    --card:#ffffff;
    --ink:#191918;
    --ink-2:#5f5e59;
    --ink-3:#908f89;
    --line:rgba(24,23,20,0.08);
    --line-2:rgba(24,23,20,0.13);
    --accent:#2a2925;
    --accent-2:#191918;
    --accent-3:#0f0e0d;
    --accent-ink:#ffffff;
    --accent-soft:rgba(25,24,20,0.055);
    --accent-line:rgba(25,24,20,0.16);
    --grad:linear-gradient(120deg,#4b4a45,#191918);
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --ok:#5f8f5a;--warn:#c98a3d;--bad:#b4453a;

    box-sizing:border-box;
    height:100%;
    min-height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;

  *, *::before, *::after { box-sizing: border-box; }
  a{color:var(--ink);text-decoration:none;transition:color .2s;}
  a:hover{color:var(--accent-2);}
  button{font-family:inherit;cursor:pointer;}
  ::-webkit-scrollbar{width:11px;height:11px;}
  ::-webkit-scrollbar-track{background:var(--bg-soft);}
  ::-webkit-scrollbar-thumb{background:#d4d2cb;border-radius:6px;border:3px solid var(--bg-soft);}
  ::-webkit-scrollbar-thumb:hover{background:#bab7af;}
  svg{display:block;}
  .icon{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;}

  /* ── Shell ─────────────────────────────────────────── */
  .shell{display:grid;grid-template-columns:46% 1fr;flex:1;min-height:0;height:100%;}
  .shell.centered{grid-template-columns:1fr;flex:1;min-height:0;overflow:hidden;}

  /* ── Brand panel (dark, reuses landing's cta vocabulary) ── */
  .brand-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
    padding:48px;color:#f3f2ef;background:linear-gradient(160deg,#1b1a18,#242320);}
  .brand-panel.light{background:var(--bg-soft);color:var(--ink);}
  .bp-grid{position:absolute;inset:0;z-index:-2;opacity:.55;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000 6%,transparent 78%);mask-image:radial-gradient(ellipse 90% 70% at 30% 20%,#000 6%,transparent 78%);}
  .brand-panel.light .bp-grid{background-image:linear-gradient(rgba(24,23,20,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(24,23,20,.06) 1px,transparent 1px);}
  .bp-halo{position:absolute;z-index:-2;top:-14%;left:-6%;height:60vh;width:60vh;border-radius:50%;filter:blur(70px);
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);animation:bpfloat 26s ease-in-out infinite;}
  .brand-panel.light .bp-halo{background:radial-gradient(circle,rgba(122,114,98,.18),transparent 62%);}
  .bp-halo.b2{top:auto;bottom:-18%;left:auto;right:-12%;height:52vh;width:52vh;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%);animation-duration:32s;}
  @keyframes bpfloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,16px) scale(1.1)}66%{transform:translate(-18px,26px) scale(.95)}}
  .bp-grain{position:absolute;inset:0;z-index:-1;opacity:.4;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");}

  .logo{display:inline-flex;align-items:center;gap:10px;}
  .logo .mark{height:36px;width:36px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad);
    box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);}
  .brand-panel.light .logo .mark{box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 22%,transparent);}
  .logo .name{font-size:1.18rem;font-weight:700;letter-spacing:-.03em;}

  .bp-eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 13px;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
    color:inherit;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.06);}
  .brand-panel.light .bp-eyebrow{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-2);}
  .bp-head{margin:22px 0 0;font-size:clamp(2.4rem,3.4vw,3.4rem);font-weight:680;line-height:1.0;letter-spacing:-.04em;text-wrap:balance;}
  .bp-sub{margin:18px 0 0;max-width:24rem;font-size:1rem;line-height:1.6;color:rgba(243,242,239,.72);}
  .brand-panel.light .bp-sub{color:var(--ink-2);}

  .bp-feats{margin:28px 0 0;display:flex;flex-direction:column;gap:10px;max-width:24rem;}
  .bp-feat{display:flex;align-items:center;gap:12px;border-radius:16px;padding:13px 14px;
    border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
  .brand-panel.light .bp-feat{border-color:var(--line);background:var(--card);box-shadow:0 1px 2px rgba(24,23,20,.04);}
  .bp-feat .fi{height:38px;width:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
  .brand-panel.light .bp-feat .fi{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-2);}
  .bp-feat b{font-size:.9rem;font-weight:600;display:block;}
  .bp-feat span{font-size:.78rem;color:rgba(243,242,239,.6);}
  .brand-panel.light .bp-feat span{color:var(--ink-3);}

  .bp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-radius:20px;padding:18px;max-width:26rem;
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);backdrop-filter:blur(8px);}
  .brand-panel.light .bp-stats{border-color:var(--line);background:var(--card);}
  .bp-stats .v{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1;}
  .bp-stats .l{margin-top:6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:rgba(243,242,239,.55);}
  .brand-panel.light .bp-stats .l{color:var(--ink-3);}
  .bp-copy{font-size:12px;color:rgba(243,242,239,.5);}
  .brand-panel.light .bp-copy{color:var(--ink-3);}

  /* ── Form panel ────────────────────────────────────── */
  .form-panel{display:flex;flex-direction:column;background:var(--bg);}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 40px;}
  .topbar-actions{display:flex;align-items:center;gap:12px;}
  .theme-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--ink-2);border:1px solid var(--line-2);background:var(--card);transition:color .2s,background .2s,border-color .2s;}
  .theme-toggle:hover{color:var(--ink);background:var(--bg-soft);border-color:var(--ink-3);}
  .theme-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
  .topbar .back{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink-2);}
  .topbar .back:hover{color:var(--ink);}
  .topbar .alt{font-size:.9rem;color:var(--ink-2);}
  .topbar .alt a{font-weight:600;color:var(--ink);}
  .topbar .alt a:hover{text-decoration:underline;}
  .form-body{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 24px 48px;}
  .form-inner{width:100%;max-width:460px;}

  /* centered variant */
  .shell.centered .form-panel{background:var(--bg-soft);position:relative;isolation:isolate;height:100%;min-height:0;overflow:hidden;}
  .shell.centered .topbar{padding:18px 28px;flex-shrink:0;}
  .shell.centered .form-body{
    flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
    display:flex;justify-content:center;align-items:flex-start;
    padding:12px 24px 32px;
    -webkit-overflow-scrolling:touch;
  }
  .shell.centered .form-inner{max-width:498px;width:100%;margin:0 auto;}
  .center-grid{position:absolute;inset:0;z-index:-1;opacity:.7;
    background-image:linear-gradient(rgba(24,23,20,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(24,23,20,.045) 1px,transparent 1px);
    background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 4%,transparent 72%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 4%,transparent 72%);}
  .card-shell{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px 34px 30px;
    box-shadow:0 1px 2px rgba(24,23,20,.05),0 40px 90px -50px rgba(24,23,20,.35);}

  /* ── Stepper ───────────────────────────────────────── */
  .stepper{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
  .stepper .seg{display:flex;align-items:center;flex:1;}
  .stepper .node{display:flex;align-items:center;gap:10px;}
  .stepper .dot{height:28px;width:28px;flex:none;border-radius:999px;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;border:1px solid var(--line-2);color:var(--ink-3);background:transparent;transition:.25s;}
  .stepper .dot.active{background:var(--accent-2);color:#fff;border-color:transparent;}
  .stepper .dot.done{background:var(--accent-soft);color:var(--accent-2);border-color:transparent;}
  .stepper .lab{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:.25s;}
  .stepper .lab.on{color:var(--ink);}
  .stepper .rail{flex:1;height:1px;margin:0 10px;background:var(--line-2);transition:.25s;}
  .stepper .rail.filled{background:var(--accent-2);}

  /* ── Referral notice ───────────────────────────────── */
  .referral-note{display:flex;align-items:center;gap:12px;margin:-8px 0 22px;padding:12px 14px;
    border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft);}
  .referral-note .icon{display:grid;place-items:center;height:32px;width:32px;flex:none;border-radius:10px;
    color:var(--accent-2);border:1px solid var(--accent-line);background:var(--card);}
  .referral-note p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);}
  .referral-note strong{color:var(--ink);font-weight:650;}

  /* ── Type ──────────────────────────────────────────── */
  .eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;margin-bottom:18px;white-space:nowrap;
    font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
    color:var(--accent-2);border:1px solid var(--accent-line);background:var(--accent-soft);}
  h1.title{margin:0;font-size:clamp(2.05rem,3.6vw,2.75rem);font-weight:680;line-height:1.0;letter-spacing:-.04em;}
  .subtitle{margin:12px 0 0;font-size:1rem;color:var(--ink-2);line-height:1.5;}

  /* ── Social + divider ──────────────────────────────── */
  .social-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;}
  .btn-social{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border-radius:12px;
    font-size:.9rem;font-weight:600;color:var(--ink);border:1px solid var(--line-2);background:var(--card);transition:background .2s,border-color .2s,transform .15s;}
  .btn-social:hover{background:var(--bg-soft);border-color:var(--ink-3);}
  .btn-social:active{transform:translateY(1px);}
  .divider{display:flex;align-items:center;gap:12px;margin:18px 0;}
  .divider .ln{flex:1;height:1px;background:var(--line-2);}
  .divider span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);}

  /* ── Fields ────────────────────────────────────────── */
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .field-label{display:block;margin-bottom:7px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);}
  .field-box{display:flex;align-items:center;gap:10px;border-radius:12px;padding:0 14px;
    border:1px solid var(--line-2);background:transparent;transition:border-color .2s,background .2s,box-shadow .2s;}
  .field-box:hover{border-color:var(--ink-3);}
  .field-box.focused{border-color:var(--accent-2);background:transparent;box-shadow:0 0 0 4px rgba(25,24,20,.09);}
  .field-box.invalid{border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 14%,transparent);}
  .field-box.invalid.focused{border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 14%,transparent);}
  .field-box .fi{color:var(--ink-3);flex:none;}
  .field-box.focused .fi{color:var(--ink-2);}
  .field-box input{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:13px 0;font-size:.92rem;color:var(--ink);font-family:inherit;}
  .field-box input::placeholder{color:var(--ink-3);}
  .field-box select{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:13px 0;font-size:.92rem;color:var(--ink);font-family:inherit;cursor:pointer;}
  .field-box select option{background:var(--paper);color:var(--ink);}
  .field-box .eye{color:var(--ink-3);background:none;border:none;padding:4px;display:flex;}
  .field-box .eye:hover{color:var(--ink);}
  .stack{display:flex;flex-direction:column;gap:14px;}
  .signup-legal-copy{margin:2px 0 0;font-size:.75rem;line-height:1.55;color:var(--ink-3);}
  .signup-legal-copy a{color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

  /* password strength */
  .pw-meter{margin-top:9px;}
  .pw-bars{display:flex;gap:5px;height:4px;}
  .pw-bars i{flex:1;border-radius:999px;background:var(--line-2);transition:background .3s;}
  .pw-hint{margin:7px 0 0;font-size:11px;color:var(--ink-3);}

  /* ── Buttons ───────────────────────────────────────── */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:12px;font-size:.92rem;font-weight:600;transition:filter .2s,transform .15s,box-shadow .2s,opacity .2s;}
  .btn-primary{width:100%;color:var(--accent-ink);background:var(--grad);padding:15px 20px;justify-content:space-between;
    box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 40%,transparent);}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-primary:active{transform:translateY(1px);}
  .btn-primary:disabled{opacity:1;cursor:not-allowed;filter:none;box-shadow:none;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line-2);}
  .btn-primary--inactive{opacity:.55;cursor:pointer;filter:none;box-shadow:none;}
  .btn-primary--inactive:hover{filter:none;}
  .btn-primary .bp-ic{height:32px;width:32px;flex:none;border-radius:999px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);transition:transform .2s;}
  .btn-primary:hover .bp-ic{transform:translateX(2px);}
  .btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--card);padding:14px 20px;}
  .btn-ghost:hover{background:var(--bg-soft);}
  .btn-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-130%) skewX(-6deg);}
  .btn-shine:hover::after{transform:translateX(130%) skewX(-6deg);transition:transform .8s ease;}

  .swap{font-size:.9rem;color:var(--ink-2);text-align:center;margin-top:26px;}
  .swap a{font-weight:600;color:var(--ink);}
  .swap a:hover{text-decoration:underline;}

  /* ── Step 2 controls ───────────────────────────────── */
  .group-label{display:block;margin-bottom:10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);}
  .pills{display:flex;flex-wrap:wrap;gap:8px;}
  .pill{border-radius:999px;padding:9px 15px;font-size:.82rem;font-weight:600;color:var(--ink-2);
    background:transparent;border:1px solid var(--line-2);transition:.18s;}
  .pill:hover{border-color:var(--ink-3);}
  .pill.on{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-2);}
  .goals{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .goal{display:flex;align-items:center;gap:11px;text-align:left;border-radius:14px;padding:14px;
    color:var(--ink-2);background:transparent;border:1px solid var(--line-2);transition:.18s;}
  .goal:hover{border-color:var(--ink-3);}
  .goal.on{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-2);}
  .goal .gi{flex:none;color:var(--ink-3);}
  .goal.on .gi{color:var(--accent-2);}
  .goal b{font-size:.84rem;font-weight:600;}
  .consent{border-radius:16px;padding:16px;border:1px solid var(--line-2);background:transparent;}
  .eligibility-gate{text-align:center;}
  .eligibility-icon{position:relative;width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;}
  .eligibility-icon::before{content:"";position:absolute;inset:-18px;border-radius:999px;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);}
  .eligibility-icon>span{position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--accent-2);border:1px solid var(--line-2);background:linear-gradient(145deg,var(--paper-2),var(--paper));box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.08);}
  .eligibility-icon.blocked>span{color:var(--ink-3);}
  .eligibility-kicker{margin:0 0 8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-2);}
  .eligibility-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
  .eligibility-secondary{border:1px solid var(--line-2);background:transparent;color:var(--ink);}
  .eligibility-secondary:hover{background:var(--paper-2);}
  .eligibility-reset{min-height:44px;border:0;background:transparent;color:var(--ink-3);font-size:.82rem;text-decoration:underline;text-underline-offset:3px;}
  .consent .ct{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);font-family:var(--mono);margin:0 0 12px;}
  .chk-row{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:var(--ink-2);cursor:pointer;padding:5px 0;line-height:1.4;}
  .chk{appearance:none;width:19px;height:19px;flex:none;margin-top:1px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--card);
    display:inline-flex;align-items:center;justify-content:center;transition:.18s;cursor:pointer;}
  .chk:checked{background:var(--accent-2);border-color:var(--accent-2);}
  .chk:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(0,-1px);}
  .req{color:var(--accent-2);font-weight:700;margin-left:2px;}
  .row-actions{display:flex;gap:12px;padding-top:2px;}
  .row-actions .btn-primary{flex:1;}

  /* ── Login-specific rows ───────────────────────────── */
  .login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px;}
  .login-row label{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-2);cursor:pointer;}
  .login-row a,.login-row button{font-size:.88rem;font-weight:600;color:var(--ink);background:none;border:none;padding:0;}
  .login-row a:hover,.login-row button:hover{text-decoration:underline;}
  .btn-primary .lbl{display:flex;align-items:center;gap:11px;}

  /* ── Step 3 ────────────────────────────────────────── */
  .done{text-align:center;padding:6px 0 8px;}
  .done .done-check{margin:0 auto 20px;display:flex;justify-content:center;color:var(--accent-2);}
  .done h2{margin:0;font-size:2.1rem;font-weight:680;letter-spacing:-.03em;}
  .done .to{margin-top:12px;color:var(--ink-2);}
  .done .em{margin-top:4px;font-weight:600;color:var(--ink);}
  .done .note{margin-top:22px;font-size:.9rem;color:var(--ink-3);}
  .done .mails{margin-top:22px;display:flex;gap:10px;justify-content:center;}
  .done .mails a{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:11px 18px;font-size:.9rem;font-weight:600;}
  .done .mails .g{color:var(--ink);border:1px solid var(--line-2);background:var(--card);}
  .done .mails .g:hover{background:var(--bg-soft);}
  .done .mails .o{color:var(--ink);border:1px solid var(--line-2);background:var(--card);}
  .done .mails .o:hover{background:var(--bg-soft);}
  .done .explore{margin-top:30px;display:inline-block;font-size:.9rem;color:var(--ink-3);}
  .done .explore:hover{color:var(--ink);}

  /* Email confirmation wait (step 3) */
  .otp-resend{margin-top:16px;font-size:.86rem;color:var(--ink-3);text-align:center;}
  .otp-cross-device{
    margin-top:24px;font-size:.82rem;line-height:1.5;
    color:var(--ink-3);text-align:center;
  }
  .otp-resend button{background:none;border:none;color:var(--ink);font-weight:600;cursor:pointer;text-decoration:underline;padding:0;}
  .field-hint{margin-top:6px;font-size:.8rem;}
  .field-hint.ok{color:var(--ok);}
  .field-hint.bad{color:var(--bad);}
  .field-hint.muted{color:var(--ink-3);}

  .institution-field{
    border-radius:12px;padding:0 14px;
    border:1px solid var(--line-2);background:transparent;
    transition:border-color .2s,box-shadow .2s;
  }
  .institution-field:hover{border-color:var(--ink-3);}
  .institution-field.focused{border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(25,24,20,.09);}
  .signup-design .institution-field [style*="position: absolute"][style*="z-index: 50"]{
    background:var(--card)!important;
    border-color:var(--line-2)!important;
    box-shadow:0 12px 40px -16px rgba(24,23,20,.28)!important;
  }
  .school-path-toggle{
    display:block;margin-top:10px;padding:0;
    font-size:.82rem;color:var(--ink-3);
    background:none;border:none;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;
    transition:color .15s;
  }
  .school-path-toggle:hover{color:var(--ink-2);}

  .trust{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
    font-size:11px;color:var(--ink-3);}
  .trust span{display:inline-flex;align-items:center;gap:6px;}

  /* step transition */
  .step-anim{animation:stepIn .45s cubic-bezier(.22,1,.36,1);}
  @keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ── Tweaks panel ──────────────────────────────────── */
  .tweaks{position:fixed;bottom:20px;right:20px;z-index:80;width:280px;border-radius:18px;padding:16px;
    background:color-mix(in srgb,var(--bg-elev) 96%,transparent);border:1px solid var(--line-2);
    box-shadow:0 24px 60px -24px rgba(24,23,20,.35);backdrop-filter:blur(16px);}
  .tweaks h4{margin:0 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2);}
  .tweaks .tv{font-size:10px;color:var(--ink-3);font-family:var(--mono);}
  .tweaks .tw-row{margin-top:14px;}
  .tweaks .tw-lab{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:7px;}
  .tw-seg{display:grid;grid-auto-flow:column;gap:6px;}
  .tw-seg.three{grid-template-columns:repeat(3,1fr);}
  .tw-seg button{border-radius:9px;padding:7px 4px;font-size:11.5px;font-weight:600;color:var(--ink-2);
    background:var(--bg-soft);border:1px solid var(--line-2);transition:.15s;}
  .tw-seg button.on{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-2);}

  @media (max-width:1000px){
    .shell{grid-template-columns:1fr;}
    .brand-panel{display:none;}
  }
  @media (max-width:520px){
    .topbar{padding:18px 20px;}
    .topbar .alt{display:none;}
    .form-body{padding:6px 18px 40px;}
    .grid-2{grid-template-columns:1fr;}
    .goals{grid-template-columns:1fr;}
    .card-shell{padding:26px 22px;}
    .login-row{flex-direction:column;align-items:flex-start;gap:12px;}
  }

}

:root.dark .signup-design,
:root[data-theme="dark"] .signup-design {
  --bg:var(--bg-primary);
  --bg-soft:var(--bg-secondary);
  --bg-elev:var(--bg-elevated);
  --card:var(--bg-card);
  --paper:var(--bg-card);
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-muted);
  --line:var(--border-visible);
  --line-2:var(--border-visible);
  --accent-2:var(--accent-hover);
  --accent-3:var(--text-primary);
  --accent-ink:var(--text-primary);
  --accent-soft:color-mix(in srgb,var(--accent-hover) 10%,transparent);
  --accent-line:color-mix(in srgb,var(--accent-hover) 28%,transparent);
  --grad:linear-gradient(120deg,var(--accent),var(--accent-hover));
  color-scheme:dark;
}

:root.dark .signup-design .center-grid,
:root[data-theme="dark"] .signup-design .center-grid {
  background-image:linear-gradient(color-mix(in srgb,var(--text-primary) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text-primary) 4%,transparent) 1px,transparent 1px);
}

:root.dark .signup-design .card-shell,
:root[data-theme="dark"] .signup-design .card-shell {
  box-shadow:var(--shadow-md);
}
.country-combobox,
.country-combobox__popover {
  --country-bg: var(--bg-secondary);
  --country-panel: var(--bg-elevated);
  --country-hover: var(--bg-hover);
  --country-text: var(--text-primary);
  --country-secondary: var(--text-secondary);
  --country-muted: var(--text-muted);
  --country-border: var(--border-visible);
  --country-accent: var(--accent);
  --country-accent-soft: var(--accent-subtle);
  --country-accent-border: var(--accent-border);
}

.country-combobox {
  position: relative;
  width: 100%;
}

.country-combobox--signup {
  --country-bg: var(--card);
  --country-panel: var(--card);
  --country-hover: var(--bg-soft);
  --country-text: var(--ink);
  --country-secondary: var(--ink-2);
  --country-muted: var(--ink-3);
  --country-border: var(--line-2);
  --country-accent: var(--accent-2);
  --country-accent-soft: var(--accent-soft);
  --country-accent-border: var(--accent-line);
}

.country-combobox__trigger {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--country-border);
  border-radius: 12px;
  background: var(--country-bg);
  color: var(--country-text);
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.country-combobox__trigger:hover:not(:disabled),
.country-combobox.is-open .country-combobox__trigger {
  border-color: var(--country-accent-border);
  background: var(--country-hover);
}

.country-combobox.is-open .country-combobox__trigger,
.country-combobox__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--country-accent-soft);
}

.country-combobox__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.country-combobox__leading {
  display: grid;
  place-items: center;
  color: var(--country-muted);
}

.country-combobox__value {
  min-width: 0;
  overflow: hidden;
  color: var(--country-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-combobox__value.is-placeholder {
  color: var(--country-secondary);
  font-weight: 400;
}

.country-combobox__chevron {
  color: var(--country-muted);
  transition: transform 180ms ease, color 180ms ease;
}

.country-combobox.is-open .country-combobox__chevron {
  color: var(--country-secondary);
  transform: rotate(180deg);
}

.country-combobox__popover {
  --country-popover-position: translate(-50%, -50%);
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--country-border);
  border-radius: 16px;
  background: var(--country-panel);
  box-shadow: var(--shadow-md);
  transform: var(--country-popover-position);
  transform-origin: center;
  animation: country-popover-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes country-popover-in {
  from { opacity: 0; transform: var(--country-popover-position) scale(0.985); }
  to { opacity: 1; transform: var(--country-popover-position) scale(1); }
}

.country-combobox__search-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--country-accent-border);
  border-radius: 12px;
  background: var(--country-accent-soft);
  color: var(--country-muted);
}

.country-combobox__search {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--country-text);
  font: inherit;
  font-size: 14px;
}

.country-combobox__search::placeholder {
  color: var(--country-muted);
}

.country-combobox__list {
  min-height: 0;
  max-height: min(360px, calc(100dvh - 168px));
  margin-top: 6px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: var(--country-muted) var(--country-panel);
}

.country-combobox__list::-webkit-scrollbar {
  width: 10px;
}

.country-combobox__list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--country-panel);
}

.country-combobox__list::-webkit-scrollbar-thumb {
  border: 3px solid var(--country-panel);
  border-radius: 999px;
  background: var(--country-muted);
}

.country-combobox__option {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--country-secondary);
  text-align: left;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.country-combobox__option:hover,
.country-combobox__option.is-active {
  background: var(--country-hover);
  color: var(--country-text);
}

.country-combobox__option:active {
  transform: scale(0.99);
}

.country-combobox__option.is-selected {
  background: var(--country-accent-soft);
  color: var(--country-text);
}

.country-combobox__option-label {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-combobox__option-code {
  color: var(--country-muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.country-combobox__check {
  display: grid;
  place-items: center;
  color: var(--country-accent);
}

.country-combobox__empty {
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--country-muted);
  text-align: center;
}

.country-combobox__empty-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--country-accent-border);
  border-radius: 12px;
  background: var(--country-accent-soft);
  color: var(--country-accent);
}

.country-combobox__empty strong {
  color: var(--country-text);
  font-size: 14px;
  font-weight: 600;
}

.country-combobox__empty > span:last-child {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
}

.country-combobox__hint {
  margin: 6px 2px 0;
  padding-top: 7px;
  border-top: 1px solid var(--country-border);
  color: var(--country-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 520px) {
  .country-combobox__popover {
    border-radius: 14px;
  }

  .country-combobox__hint {
    display: none;
  }
}

@media (min-width: 1200px) {
  .country-combobox__popover {
    --country-popover-position: translateY(-50%);
    left: calc(50% + 275px);
    width: min(380px, calc(50vw - 300px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .country-combobox__popover {
    animation: none;
  }

  .country-combobox__chevron,
  .country-combobox__option,
  .country-combobox__trigger {
    transition: none;
  }
}
/* Shared skeleton system — layout-matched, theme-aware and motion-safe. */
.norex-skeleton-group {
  min-width: 0;
}

.norex-skeleton {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background: color-mix(in srgb, var(--bg-elevated) 58%, var(--bg-card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  opacity: 0.82;
}

.norex-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 16%,
    color-mix(in srgb, var(--text-primary) 8%, transparent) 42%,
    color-mix(in srgb, var(--text-primary) 13%, transparent) 50%,
    color-mix(in srgb, var(--text-primary) 8%, transparent) 58%,
    transparent 84%
  );
  content: "";
  transform: translateX(-110%);
  animation: norex-skeleton-shimmer 1.55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--skeleton-order, 0) * 55ms);
  will-change: transform;
}

@keyframes norex-skeleton-shimmer {
  to { transform: translateX(110%); }
}

.norex-skeleton-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

.norex-skeleton-grid--note,
.norex-skeleton-grid--course {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.norex-skeleton-grid--flashcard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.norex-skeleton-card {
  min-width: 0;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  animation: norex-skeleton-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--skeleton-order, 0) * 35ms);
}

@keyframes norex-skeleton-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.norex-skeleton-card--note {
  min-height: 126px;
  padding: 16px;
  border-radius: 12px;
}

.norex-skeleton-card--course {
  display: flex;
  min-height: 320px;
  padding: 20px;
  flex-direction: column;
  border-radius: 18px;
}

.norex-skeleton-course-progress {
  display: flex;
  margin-top: 16px;
  padding: 14px 16px;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-secondary) 74%, var(--bg-card));
}

.norex-skeleton-course-stat {
  display: flex;
  min-width: 0;
  padding: 10px 6px;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-secondary) 74%, var(--bg-card));
}

.norex-skeleton-card--flashcard {
  display: flex;
  height: 224px;
  padding: 16px;
  flex-direction: column;
  border-radius: 12px;
}

.norex-skeleton-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.norex-skeleton-list__row {
  display: flex;
  min-width: 0;
  padding: 10px 12px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  animation: norex-skeleton-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--skeleton-order, 0) * 45ms);
}

.norex-app-shell-skeleton {
  display: flex;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
}

.norex-app-shell-skeleton__sidebar {
  display: flex;
  width: 252px;
  padding: 20px 16px;
  flex: 0 0 252px;
  flex-direction: column;
  border-right: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.norex-app-shell-skeleton__main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.norex-app-shell-skeleton__topbar {
  display: flex;
  min-height: 64px;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.norex-app-shell-skeleton__mobile-menu {
  display: none;
}

.norex-app-shell-skeleton__content {
  min-height: 0;
  padding: 28px;
  flex: 1;
  overflow: hidden;
  background: var(--dashboard-shell-bg);
}

.norex-app-shell-skeleton__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.norex-app-shell-skeleton__metrics {
  display: grid;
  margin: 24px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.norex-app-shell-skeleton__metric {
  display: flex;
  min-width: 0;
  padding: 16px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
}

.norex-public-note-skeleton {
  min-height: 100dvh;
  background: var(--bg-primary);
}

.norex-public-note-skeleton__header {
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.norex-public-note-skeleton__article {
  display: flex;
  margin-top: 32px;
  min-height: 320px;
  padding: 28px;
  flex-direction: column;
  gap: 15px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.norex-mock-exam-skeleton {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px;
  flex-direction: column;
  background: var(--dashboard-shell-bg);
}

.norex-mock-exam-skeleton__topbar {
  display: flex;
  padding: 14px 16px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
}

.norex-mock-exam-skeleton__layout {
  display: grid;
  width: min(100%, 1100px);
  margin: 20px auto 0;
  min-height: 0;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
}

.norex-mock-exam-skeleton__navigator,
.norex-mock-exam-skeleton__question {
  padding: 20px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
}

.norex-knowledge-map-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background:
    linear-gradient(var(--border-visible) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-visible) 1px, transparent 1px);
  background-size: 32px 32px;
}

.norex-knowledge-map-skeleton__center,
.norex-knowledge-map-skeleton__node {
  position: absolute;
}

.norex-knowledge-map-skeleton__center {
  top: 50%;
  left: 50%;
  display: flex;
  width: min(260px, 64%);
  padding: 24px;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
}

.norex-knowledge-map-skeleton__node--one { top: 18%; left: 14%; }
.norex-knowledge-map-skeleton__node--two { top: 20%; right: 16%; }
.norex-knowledge-map-skeleton__node--three { right: 20%; bottom: 14%; }

@media (max-width: 1023px) {
  .norex-skeleton-grid--note,
  .norex-skeleton-grid--course {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .norex-skeleton-grid--flashcard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .norex-app-shell-skeleton__sidebar {
    width: 224px;
    flex-basis: 224px;
  }

}

@media (max-width: 767px) {
  .norex-skeleton-grid {
    gap: 12px;
  }

  .norex-skeleton-grid--note,
  .norex-skeleton-grid--course,
  .norex-skeleton-grid--flashcard {
    grid-template-columns: minmax(0, 1fr);
  }

  .norex-skeleton-grid > :nth-child(n + 5) {
    display: none;
  }

  .norex-skeleton-card--course {
    min-height: 300px;
  }

  .norex-app-shell-skeleton__sidebar {
    display: none;
  }

  .norex-app-shell-skeleton__topbar {
    min-height: var(--mobile-chrome-clearance, 68px);
    padding: 0 16px;
    border-bottom-color: transparent;
    background: var(--bg-primary);
  }

  .norex-app-shell-skeleton__mobile-menu {
    display: block;
  }

  .norex-app-shell-skeleton__content {
    padding: 18px 16px 28px;
  }

  .norex-app-shell-skeleton__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .norex-app-shell-skeleton__metrics {
    margin: 20px 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .norex-app-shell-skeleton__metrics > :nth-child(n + 3),
  .norex-app-shell-skeleton__content .norex-skeleton-grid > :nth-child(n + 4) {
    display: none;
  }

  .norex-public-note-skeleton__article {
    min-height: 360px;
    padding: 22px 18px;
  }

  .norex-mock-exam-skeleton {
    padding: 12px 16px 20px;
  }

  .norex-mock-exam-skeleton__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .norex-mock-exam-skeleton__navigator {
    display: none;
  }

  .norex-mock-exam-skeleton__question {
    padding: 18px;
  }

  .norex-knowledge-map-skeleton__node--one { top: 13%; left: 8%; }
  .norex-knowledge-map-skeleton__node--two { top: 20%; right: 7%; }
  .norex-knowledge-map-skeleton__node--three { right: 10%; bottom: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .norex-skeleton::after,
  .norex-skeleton-card,
  .norex-skeleton-list__row {
    animation: none;
  }
}
.audio-capture-workspace {
  position: fixed;
  inset: var(--electron-titlebar-height, 0) 0 0;
  z-index: var(--z-mobile-chrome);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 50% -8%, var(--accent-subtle), transparent 32rem),
    var(--bg-primary);
}

.audio-capture-workspace button,
.audio-capture-workspace input {
  font: inherit;
}

.audio-capture-workspace--embedded {
  position: relative;
  inset: auto;
  z-index: auto;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.audio-capture-workspace--embedded .audio-capture-main {
  min-height: 0;
  flex: 1 1 auto;
}

.audio-capture-workspace--embedded .audio-capture-stage,
.audio-capture-workspace--embedded .audio-capture-processing,
.audio-capture-workspace--embedded .audio-capture-result {
  width: min(900px, calc(100% - 48px));
  min-height: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 24px 0 32px;
}

.audio-capture-embedded-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 0;
}

.audio-capture-topbar {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 64px;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid var(--border-visible);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-primary));
  box-shadow: var(--shadow-xs);
}

body.electron-windows .audio-capture-topbar {
  padding-right: 150px;
}

body.electron-windows .audio-capture-topbar button,
body.electron-windows .audio-capture-topbar input,
body.electron-windows .audio-capture-topbar [role='button'] {
  -webkit-app-region: no-drag;
}

.audio-capture-topbar__left,
.audio-capture-topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.audio-capture-topbar__actions {
  justify-content: flex-end;
}

.audio-capture-topbar__course {
  width: min(240px, 30vw);
}

.audio-capture-course-select.app-select-trigger {
  width: 100%;
  border-color: var(--border-visible);
  background: var(--bg-primary);
}

.audio-capture-icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.audio-capture-icon-button:hover:not(:disabled) {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.audio-capture-icon-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.audio-capture-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.audio-capture-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.audio-capture-identity span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
}

.audio-capture-identity strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-capture-primary-button,
.audio-capture-secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.audio-capture-primary-button {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}

.audio-capture-primary-button:hover:not(:disabled) {
  background: var(--accent-hover);
}

.audio-capture-secondary-button {
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
  background: var(--bg-card);
}

.audio-capture-secondary-button:hover:not(:disabled) {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.audio-capture-primary-button:active:not(:disabled),
.audio-capture-secondary-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.audio-capture-primary-button:disabled,
.audio-capture-secondary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.audio-capture-icon-button:focus-visible,
.audio-capture-primary-button:focus-visible,
.audio-capture-secondary-button:focus-visible,
.audio-capture-control:focus-visible,
.audio-capture-stop:focus-visible,
.audio-capture-start:focus-visible,
.audio-capture-player button:focus-visible,
.audio-capture-copy:focus-visible,
.audio-capture-pane-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.audio-capture-main {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.audio-capture-stage {
  display: flex;
  width: min(960px, calc(100% - 48px));
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
  padding: 48px 0 72px;
}

.audio-capture-stage__copy {
  display: flex;
  max-width: 680px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.audio-capture-layered-icon {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 30px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.audio-capture-layered-icon::before {
  position: absolute;
  inset: 5px;
  content: '';
  border: 1px solid var(--accent-border);
  border-radius: 26px;
  opacity: 0.7;
}

.audio-capture-layered-icon > div {
  position: relative;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 19px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible), var(--shadow-sm);
}

.audio-capture-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audio-capture-stage__copy h1,
.audio-capture-result__heading h1,
.audio-capture-processing h1 {
  margin: 8px 0 0;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.audio-capture-stage__copy p,
.audio-capture-result__heading p,
.audio-capture-processing > p {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1.65;
  text-wrap: pretty;
}

.audio-capture-recorder {
  display: flex;
  width: min(820px, 100%);
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  padding: 28px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-secondary));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-visible);
  transition: border-color 220ms ease, background-color 220ms ease;
}

.audio-capture-recorder.is-recording {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--accent-subtle) 32%, var(--bg-card));
}

.audio-capture-timer {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--text-muted);
  background: var(--bg-primary);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.audio-capture-timer strong {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.audio-capture-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 12%, transparent);
}

.audio-capture-recorder.is-recording .audio-capture-live-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
  animation: audio-capture-pulse 1.35s ease-in-out infinite;
}

.audio-capture-waveform {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.35vw, 5px);
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent, var(--accent-subtle), transparent),
    var(--bg-primary);
}

.audio-capture-waveform span {
  width: clamp(2px, 0.25vw, 3px);
  height: 78%;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.74;
  transform-origin: center;
  transition: transform 90ms linear, opacity 180ms ease;
}

.audio-capture-recorder:not(.is-recording) .audio-capture-waveform span {
  opacity: 0.25;
}

.audio-capture-live-transcript {
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 16px;
  color: var(--text-muted);
  background: var(--bg-primary);
}

.audio-capture-live-transcript svg {
  margin-top: 2px;
  color: var(--accent);
}

.audio-capture-live-transcript p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.audio-capture-recorder.is-recording .audio-capture-live-transcript p,
.audio-capture-recorder.is-paused .audio-capture-live-transcript p {
  color: var(--text-secondary);
}

.audio-capture-controls {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.audio-capture-start,
.audio-capture-control,
.audio-capture-stop {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 13px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.audio-capture-start {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
}

.audio-capture-start > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-text) 24%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-text) 10%, transparent);
}

.audio-capture-start:hover,
.audio-capture-stop:hover {
  background: var(--accent-hover);
}

.audio-capture-control {
  border: 1px solid var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-primary);
}

.audio-capture-control:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.audio-capture-stop {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.audio-capture-start:active,
.audio-capture-control:active,
.audio-capture-stop:active {
  transform: translateY(1px) scale(0.98);
}

.audio-capture-error {
  margin: -10px 0 0;
  color: var(--status-down);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.audio-capture-processing {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 72px;
  text-align: center;
}

.audio-capture-processing__mark {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 32px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.audio-capture-processing__mark > div {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible), var(--shadow-sm);
}

.audio-capture-processing > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audio-capture-processing__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.audio-capture-processing__steps span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
}

.audio-capture-processing__steps span.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.audio-capture-result {
  width: min(1460px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 56px;
}

.audio-capture-result__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.audio-capture-result__heading h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.audio-capture-result__heading p {
  max-width: 680px;
}

.audio-capture-stats {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.audio-capture-stats span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
}

.audio-capture-stats svg {
  color: var(--accent);
}

.audio-capture-player {
  display: grid;
  min-height: 56px;
  grid-template-columns: 38px auto auto auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.audio-capture-player audio {
  display: none;
}

.audio-capture-player button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-subtle);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.audio-capture-player button:hover {
  color: var(--accent-text);
  background: var(--accent);
}

.audio-capture-player button:active {
  transform: scale(0.96);
}

.audio-capture-player > svg {
  color: var(--accent);
}

.audio-capture-player strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
}

.audio-capture-player > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.audio-capture-player input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

.audio-capture-panes {
  display: grid;
  min-height: min(620px, calc(100dvh - 330px));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.audio-capture-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-visible);
}

.audio-capture-pane > header {
  display: grid;
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-visible);
  background: color-mix(in srgb, var(--bg-card) 94%, var(--bg-secondary));
}

.audio-capture-pane__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible);
}

.audio-capture-pane > header span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audio-capture-pane > header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -0.015em;
}

.audio-capture-copy {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.audio-capture-copy:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.audio-capture-pane__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.audio-capture-summary-lead {
  margin: 0 0 26px;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

.audio-capture-summary-section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border-visible);
}

.audio-capture-summary-section > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 9px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.audio-capture-summary-section h3 {
  margin: 2px 0 7px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.audio-capture-summary-section p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.audio-capture-transcript-body p {
  margin: 0;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.85;
  white-space: pre-wrap;
}

.audio-capture-summary-loading,
.audio-capture-summary-error {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.audio-capture-summary-loading > svg,
.audio-capture-summary-error > svg {
  margin-bottom: 14px;
  color: var(--accent);
}

.audio-capture-summary-loading strong,
.audio-capture-summary-error strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 680;
}

.audio-capture-summary-loading > span,
.audio-capture-summary-error p {
  max-width: 340px;
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.audio-capture-summary-loading > div {
  display: flex;
  width: min(280px, 100%);
  flex-direction: column;
  gap: 9px;
  margin-top: 28px;
}

.audio-capture-summary-loading i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-hover), var(--accent-subtle), var(--bg-hover));
  background-size: 200% 100%;
  animation: audio-capture-shimmer 1.25s ease-in-out infinite;
}

.audio-capture-summary-loading i:nth-child(2) { width: 88%; animation-delay: 80ms; }
.audio-capture-summary-loading i:nth-child(3) { width: 72%; animation-delay: 160ms; }
.audio-capture-summary-loading i:nth-child(4) { width: 56%; animation-delay: 240ms; }

.audio-capture-pane-switch,
.audio-capture-mobile-actions {
  display: none;
}

.audio-capture-spin {
  animation: audio-capture-spin 700ms linear infinite;
}

@keyframes audio-capture-spin {
  to { transform: rotate(360deg); }
}

@keyframes audio-capture-pulse {
  50% { opacity: 0.38; }
}

@keyframes audio-capture-shimmer {
  to { background-position: -200% 0; }
}

@media (max-width: 960px) {
  .audio-capture-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  }

  .audio-capture-identity {
    display: none;
  }

  .audio-capture-secondary-button span {
    display: none;
  }

  .audio-capture-result__heading {
    align-items: start;
    flex-direction: column;
  }

  .audio-capture-stats {
    justify-content: flex-start;
  }
}

@media (min-width: 769px) and (max-height: 800px) {
  .audio-capture-stage {
    gap: 18px;
    padding-top: 22px;
    padding-bottom: 26px;
  }

  .audio-capture-layered-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
    border-radius: 20px;
  }

  .audio-capture-layered-icon::before {
    border-radius: 18px;
  }

  .audio-capture-layered-icon > div {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .audio-capture-layered-icon > div svg {
    width: 23px;
    height: 23px;
  }

  .audio-capture-stage__copy h1 {
    margin-top: 5px;
    font-size: clamp(2rem, 3.4vw, 2.55rem);
  }

  .audio-capture-stage__copy p {
    margin-top: 8px;
  }

  .audio-capture-recorder {
    gap: 13px;
    padding: 18px 22px;
  }

  .audio-capture-waveform {
    height: 70px;
  }

  .audio-capture-live-transcript {
    min-height: 62px;
    padding: 13px 15px;
  }
}

@media (max-width: 768px) {
  .audio-capture-topbar {
    min-height: 58px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  body.electron-windows .audio-capture-topbar {
    padding-right: 8px;
  }

  .audio-capture-topbar__left {
    display: contents;
  }

  .audio-capture-topbar__course {
    width: 100%;
  }

  .audio-capture-topbar__actions {
    display: none;
  }

  .audio-capture-stage,
  .audio-capture-result {
    width: min(100% - 24px, 680px);
  }

  .audio-capture-stage {
    justify-content: flex-start;
    gap: 22px;
    padding: 38px 0 max(40px, env(safe-area-inset-bottom));
  }

  .audio-capture-layered-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
  }

  .audio-capture-layered-icon > div {
    width: 54px;
    height: 54px;
  }

  .audio-capture-stage__copy h1,
  .audio-capture-result__heading h1 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .audio-capture-stage__copy p,
  .audio-capture-result__heading p {
    font-size: 14px;
  }

  .audio-capture-recorder {
    gap: 16px;
    border-radius: 17px;
    padding: 18px;
  }

  .audio-capture-waveform {
    height: 82px;
  }

  .audio-capture-waveform span:nth-child(2n) {
    display: none;
  }

  .audio-capture-controls,
  .audio-capture-start,
  .audio-capture-control,
  .audio-capture-stop {
    width: 100%;
  }

  .audio-capture-result {
    padding: 28px 0 calc(96px + env(safe-area-inset-bottom));
  }

  .audio-capture-result__heading {
    gap: 16px;
    margin-bottom: 18px;
  }

  .audio-capture-player {
    grid-template-columns: 38px auto minmax(0, 1fr) auto;
  }

  .audio-capture-player > svg,
  .audio-capture-player strong {
    display: none;
  }

  .audio-capture-pane-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 12px;
    border: 1px solid var(--border-visible);
    border-radius: 13px;
    padding: 4px;
    background: var(--bg-card);
  }

  .audio-capture-pane-switch button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .audio-capture-pane-switch button.is-active {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-subtle);
  }

  .audio-capture-panes {
    display: block;
    min-height: 480px;
  }

  .audio-capture-pane {
    display: none;
    min-height: 480px;
  }

  .audio-capture-pane.is-mobile-active {
    display: flex;
  }

  .audio-capture-pane__body {
    padding: 20px;
  }

  .audio-capture-mobile-actions {
    display: grid;
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 4;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    border: 1px solid var(--border-visible);
    border-radius: 15px;
    padding: 8px;
    background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-primary));
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 480px) {
  .audio-capture-live-transcript {
    min-height: 68px;
    padding: 13px;
  }

  .audio-capture-controls {
    flex-direction: column;
  }

  .audio-capture-stats span:last-child {
    display: none;
  }

  .audio-capture-player {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .audio-capture-player > span:first-of-type {
    display: none;
  }

  .audio-capture-pane > header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .audio-capture-copy {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }

  .audio-capture-mobile-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-capture-workspace *,
  .audio-capture-workspace *::before,
  .audio-capture-workspace *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
.note-shape-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 248px;
}

.note-shape-picker__hint {
  margin: 0;
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.note-shape-picker__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.note-shape-picker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.note-shape-picker__item:hover {
  background: var(--bg-hover);
}

.note-shape-picker__item.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.note-shape-picker__item svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Free canvas layer — floats over (or under) the note's text flow. */

.note-canvas-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.note-canvas-plane.is-armed {
  pointer-events: auto;
}

.note-canvas-plane.is-armed-text {
  cursor: text;
}

.note-canvas-plane.is-armed-shape {
  cursor: crosshair;
}

.note-canvas-plane.is-armed-ink,
.note-canvas-plane.is-armed-eraser {
  cursor: crosshair;
  touch-action: none;
}

/* The pen and the eraser own the plane: an object underneath must not steal
   the gesture halfway through a stroke. */
.note-canvas-plane.is-armed-ink .note-canvas-object,
.note-canvas-plane.is-armed-eraser .note-canvas-object,
.note-canvas-plane.is-armed-ink .note-canvas-object--ink .note-canvas-ink path,
.note-canvas-plane.is-armed-eraser .note-canvas-object--ink .note-canvas-ink path {
  pointer-events: none;
}

/* --- Objects -------------------------------------------------------------- */

.note-canvas-object {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

.note-canvas-object::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.note-canvas-object:hover::after {
  border-color: var(--border-visible);
}

.note-canvas-object.is-selected::after {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
}

.note-canvas-object.is-editing::after {
  border-color: var(--accent);
  background-color: transparent;
}

/* --- Free text ------------------------------------------------------------ */

.note-canvas-object--text {
  cursor: move;
}

.note-canvas-object--text.is-editing {
  cursor: text;
}

.note-canvas-text {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  line-height: 1.5;
  letter-spacing: 0.002em;
  caret-color: var(--accent);
  min-width: 1ch;
  min-height: 1em;
}

.note-canvas-object--text:not(.is-editing) .note-canvas-text {
  user-select: none;
}

.note-canvas-text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* --- Shapes --------------------------------------------------------------- */

.note-canvas-object--shape {
  cursor: move;
}

.note-canvas-shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- Freehand ink --------------------------------------------------------- */

/* Only the stroke itself is grabbable — the rest of the bounding box stays
   transparent to the pointer so the text underneath keeps working. */
.note-canvas-object--ink {
  cursor: move;
  pointer-events: none;
}

.note-canvas-ink {
  display: block;
  overflow: visible;
}

.note-canvas-object--ink .note-canvas-ink path {
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-canvas-object--ink.is-selected::after {
  pointer-events: none;
}

/* Live stroke, painted while the pointer is down. */
.note-canvas-ink-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 50;
}

/* --- Resize handles ------------------------------------------------------- */

.note-canvas-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--bg-primary);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-xs);
  z-index: 2;
}

.note-canvas-handle--nw {
  top: -11px;
  left: -11px;
  cursor: nwse-resize;
}
.note-canvas-handle--n {
  top: -11px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
.note-canvas-handle--ne {
  top: -11px;
  right: -11px;
  cursor: nesw-resize;
}
.note-canvas-handle--e {
  top: calc(50% - 5px);
  right: -11px;
  cursor: ew-resize;
}
.note-canvas-handle--se {
  bottom: -11px;
  right: -11px;
  cursor: nwse-resize;
}
.note-canvas-handle--s {
  bottom: -11px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
.note-canvas-handle--sw {
  bottom: -11px;
  left: -11px;
  cursor: nesw-resize;
}
.note-canvas-handle--w {
  top: calc(50% - 5px);
  left: -11px;
  cursor: ew-resize;
}

/* --- Drag preview --------------------------------------------------------- */

.note-canvas-draft {
  position: absolute;
  pointer-events: none;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  z-index: 40;
}

/* --- Selection toolbar ---------------------------------------------------- */

.note-canvas-toolbar {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  transform: translateY(calc(-100% - 12px));
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  white-space: nowrap;
}

.note-canvas-toolbar__separator {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: var(--border-visible);
}

.note-canvas-toolbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.note-canvas-toolbar__button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-canvas-toolbar__button.is-active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.note-canvas-toolbar__button--danger:hover {
  background: color-mix(in srgb, var(--status-down) 16%, transparent);
  color: var(--status-down);
}

.note-canvas-toolbar__value {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.note-canvas-toolbar__layer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.note-canvas-toolbar__layer:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-canvas-toolbar__layer.is-behind {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
}

.note-canvas-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.note-canvas-swatch:hover {
  transform: scale(1.12);
}

.note-canvas-swatch.is-active {
  border-color: var(--text-primary);
}

.note-canvas-stroke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.note-canvas-stroke:hover {
  background: var(--bg-hover);
}

.note-canvas-stroke.is-active {
  background: var(--accent-subtle);
}

.note-canvas-stroke > span {
  display: block;
  width: 14px;
  border-radius: 999px;
  background: var(--text-secondary);
}

.note-canvas-stroke.is-active > span {
  background: var(--accent);
}

.note-canvas-fill-dot {
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--text-secondary);
  border-radius: 4px;
}

/* --- Host hooks ----------------------------------------------------------- */

/* Anchors the plane and gives negative-z objects something to sit behind. */
.note-editor-document {
  position: relative;
  z-index: 0;
}

/* Zero-size marker the ProseMirror node view keeps inside the document. */
.note-canvas-anchor {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.note-drawing-node {
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background-color: var(--bg-card);
}

.note-drawing-node--grid .ink-canvas__surface {
  background-image:
    linear-gradient(var(--border-visible) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-visible) 1px, transparent 1px);
  background-size: 24px 24px;
}

.note-drawing-node--lines .ink-canvas__surface {
  background-image: linear-gradient(var(--border-visible) 1px, transparent 1px);
  background-size: 100% 28px;
  background-position: 0 6px;
}

.ink-canvas {
  position: relative;
  color: var(--text-primary);
}

.ink-canvas__toolbar {
  display: flex;
  min-height: 44px;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.ink-canvas__toolbar button,
.ink-canvas__toolbar select {
  min-width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ink-canvas__toolbar button:hover:not(:disabled),
.ink-canvas__toolbar button:focus-visible,
.ink-canvas__toolbar button.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
  outline: none;
}

.ink-canvas__toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.ink-canvas__toolbar select {
  padding: 0 6px;
  border-color: var(--border-visible);
  background: var(--bg-card);
  font-size: 12px;
}

.ink-canvas__color {
  width: 24px;
  min-width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px var(--border-visible);
}

.ink-canvas__color.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ink-canvas__divider {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--border-visible);
}

.ink-canvas__surface {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
}

.ink-canvas__surface canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.ink-canvas[data-read-only] .ink-canvas__surface canvas {
  cursor: default;
}

.ink-canvas__selection {
  position: absolute;
  pointer-events: none;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  box-sizing: border-box;
}

.ink-canvas__selection span {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--bg-card);
}

.ink-canvas__selection span:nth-child(1) { top: -5px; left: -5px; }
.ink-canvas__selection span:nth-child(2) { top: -5px; right: -5px; }
.ink-canvas__selection span:nth-child(3) { bottom: -5px; left: -5px; }
.ink-canvas__selection span:nth-child(4) { right: -5px; bottom: -5px; }
.note-pdf-viewer {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
}

.note-pdf-toolbar {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-card);
}

.note-pdf-toolbar-group { display: flex; align-items: center; gap: 2px; }

.note-pdf-icon-button {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.note-pdf-icon-button:hover,
.note-pdf-icon-button[aria-pressed='true'] {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-pdf-icon-button:focus-visible,
.note-pdf-search input:focus-visible,
.note-pdf-search button:focus-visible,
.note-pdf-thumbnail:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-pdf-zoom,
.note-pdf-page-counter {
  min-width: 42px;
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.note-pdf-page-counter { margin-left: auto; }

.note-pdf-search {
  display: flex;
  min-width: 140px;
  max-width: 300px;
  flex: 1;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  color: var(--text-muted);
}

.note-pdf-search input {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
}

.note-pdf-search span { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.note-pdf-search button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.note-pdf-body { display: flex; min-height: 0; flex: 1; }

.note-pdf-thumbnails {
  width: 132px;
  flex: 0 0 132px;
  overflow-y: auto;
  padding: 8px;
  border-right: 1px solid var(--border-visible);
  background: var(--bg-card);
}

.note-pdf-thumbnail,
.note-pdf-thumbnail-placeholder {
  display: flex;
  width: 100%;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
}

.note-pdf-thumbnail { position: relative; overflow: hidden; }
.note-pdf-thumbnail.is-active { border-color: var(--accent); background: var(--accent-subtle); }
.note-pdf-thumbnail canvas { max-width: 100%; height: auto; }
.note-pdf-thumbnail span { position: absolute; right: 4px; bottom: 3px; font-size: 11px; }

.note-pdf-scroll {
  min-width: 0;
  flex: 1;
  overflow: auto;
  background: var(--bg-primary);
}

.note-pdf-pages { position: relative; min-width: max-content; padding: 16px; }
.note-pdf-page-slot { position: absolute; left: 50%; transform: translateX(-50%); }
.note-pdf-page,
.note-pdf-page-placeholder {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.note-pdf-page canvas { display: block; max-width: none; }
.note-pdf-page-number { position: absolute; right: 8px; bottom: 6px; color: var(--text-muted); font-size: 11px; user-select: none; }

.note-pdf-text-layer { position: absolute; inset: 0; overflow: hidden; line-height: 1; opacity: 0.01; }
.note-pdf-text-layer span { position: absolute; transform-origin: 0 0; white-space: pre; color: var(--text-primary); cursor: text; }
.note-pdf-text-layer ::selection { background: var(--accent); color: var(--text-primary); }
.note-pdf-text-match { background: var(--accent); }

.note-pdf-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.note-pdf-annotations[data-tool='select'] { pointer-events: none; }
.note-pdf-annotations:not([data-tool='select']) { pointer-events: auto; cursor: crosshair; }
.note-pdf-annotations__svg { display: block; width: 100%; height: 100%; overflow: visible; }

.note-pdf-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.note-pdf-annot-tools { margin-left: 4px; }

.note-pdf-loading {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.note-pdf-node-state { min-height: 160px; padding: 24px; }
.note-pdf-error { color: var(--text-secondary); }
.note-pdf-spinner { animation: note-pdf-spin 900ms linear infinite; }

.note-pdf-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@keyframes note-pdf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .note-pdf-spinner { animation: none; }
}

@media (max-width: 640px) {
  .note-pdf-toolbar {
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px;
  }
  .note-pdf-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .note-pdf-search {
    min-width: 0;
    flex: 1 1 140px;
    min-height: 44px;
  }
  .note-pdf-thumbnails { display: none; }
  .note-pdf-pages {
    padding-inline: 8px;
  }
  .note-pdf-page {
    max-width: 100%;
  }
}
.note-flashcard-node {
  margin: 10px 0;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.note-flashcard-node__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.note-flashcard-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
}

.note-flashcard-node__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.note-flashcard-node__source,
.note-flashcard-node__study {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.note-flashcard-node__source {
  margin-left: 0;
  margin-right: auto;
}

.note-flashcard-node__source:hover,
.note-flashcard-node__study:hover {
  color: var(--accent);
}

.note-flashcard-node__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 14px 14px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.note-flashcard-node__body:hover {
  background: var(--bg-hover);
}

.note-flashcard-node__body strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.note-flashcard-node__body span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.note-flashcard-node__missing {
  margin: 0;
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.note-flashcard-node__edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

.note-flashcard-node__edit label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.note-flashcard-node__edit textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-visible);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.note-flashcard-node__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.note-flashcard-node__actions button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-visible);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.note-flashcard-node__actions button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-flashcard-node__actions button.is-primary {
  background: var(--accent);
  border-color: transparent;
  color: white;
}

.note-block--flash {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
  border-radius: 8px;
  animation: note-block-flash 1.4s ease;
}

@keyframes note-block-flash {
  0% {
    background: var(--accent-subtle);
  }
  100% {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-block--flash {
    animation: none;
  }
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(./KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(./KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(./KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(./KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(./KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(./KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(./KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(./KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(./KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(./KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(./KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(./KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(./KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(./KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(./KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(./KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(./KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(./KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(./KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(./KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(./KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(./KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(./KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(./KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(./KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(./KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(./KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(./KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(./KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(./KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(./KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(./KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(./KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(./KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(./KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(./KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(./KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(./KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(./KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(./KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(./KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(./KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(./KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(./KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(./KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(./KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(./KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(./KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(./KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(./KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(./KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(./KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(./KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(./KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(./KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(./KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(./KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(./KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(./KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.45"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.note-editor-scroll {
  position: relative;
}

.note-block-handle {
  position: absolute;
  z-index: var(--z-popover);
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  animation: note-block-handle-in 150ms ease-out forwards;
}

.note-block-handle:hover,
.note-prosemirror:hover ~ .note-block-handle {
  opacity: 1;
  pointer-events: auto;
}

.note-block-handle__button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0;
  color: var(--text-muted);
  background: var(--bg-popup);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.note-block-handle__button:hover,
.note-block-handle__button:focus-visible {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
  outline: none;
}

.note-block-handle__button:focus-visible,
.note-block-menu button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-block-handle__grip {
  cursor: grab;
  touch-action: none;
}

.note-block-handle__grip:active {
  cursor: grabbing;
}

.note-block-drop-indicator {
  position: absolute;
  right: 12px;
  left: 12px;
  z-index: var(--z-popover);
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
}

.note-block-menu {
  position: fixed;
  z-index: calc(var(--z-popover) + 1);
  display: grid;
  width: 224px;
  gap: 2px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 6px;
  color: var(--text-primary);
  background: var(--bg-popup);
  box-shadow: var(--shadow-md);
  animation: note-block-menu-in 150ms ease-out;
}

.note-block-menu__item,
.note-block-menu__back {
  display: grid;
  min-height: 36px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.note-block-menu__back {
  display: flex;
  min-height: 30px;
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.note-block-menu__item:hover:not(:disabled),
.note-block-menu__back:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-block-menu__item.is-danger {
  color: var(--status-down);
}

.note-block-menu__item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@keyframes note-block-handle-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes note-block-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px), print {
  .note-block-handle,
  .note-block-drop-indicator,
  .note-block-menu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-block-handle,
  .note-block-menu {
    animation-duration: 1ms;
    transition-duration: 1ms;
  }
}
/* Floating formatting bar shown above a text selection in the note editor. */

.note-selection-toolbar {
  z-index: 60;
}

.note-selection-toolbar__inner {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.note-selection-divider {
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: var(--border-visible);
}

.note-selection-anchor {
  position: relative;
  display: inline-flex;
}

.note-selection-button {
  position: relative;
  display: inline-flex;
  height: 32px;
  min-width: 32px;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-selection-button.has-trailing {
  padding-right: 4px;
}

.note-selection-button:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-button.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
}

.note-selection-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.note-selection-caret {
  opacity: 0.6;
}

.note-selection-color__dot {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-visible);
  border-radius: 50%;
}

.note-selection-block {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-selection-block:hover,
.note-selection-block.is-active {
  border-color: var(--border-visible);
  background: var(--bg-hover);
}

.note-selection-block svg {
  color: var(--text-muted);
}

/* Sub-menus ---------------------------------------------------------------- */

.note-selection-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2;
  display: flex;
  min-width: 176px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.note-selection-menu.is-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.note-selection-menu--swatches {
  min-width: 0;
}

.note-selection-menu--style {
  width: 264px;
  min-width: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Font / size fields, side by side under the block list. */
.note-selection-fields {
  display: flex;
  gap: 6px;
  padding: 2px 4px 2px;
}

.note-selection-field {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-selection-field:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-selection-field--size {
  flex: 0 0 84px;
}

.note-selection-field__label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-selection-field__row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.note-selection-field__value {
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--text-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Font and size views. */
.note-selection-pane__head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-selection-pane__back {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.note-selection-pane__back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-search {
  margin: 0 4px 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
}

.note-selection-search::placeholder {
  color: var(--text-muted);
}

.note-selection-search:focus {
  border-color: var(--accent-border);
  outline: none;
}

.note-selection-empty {
  padding: 10px 9px;
  color: var(--text-muted);
  font-size: 12px;
}

.note-selection-size__input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 7px 8px;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.note-selection-size__input:focus {
  border-color: var(--accent-border);
  outline: none;
}

.note-selection-sizes {
  display: grid;
  margin-top: 6px;
  padding: 0 4px;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
}

.note-selection-sizes__item {
  padding: 7px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.note-selection-sizes__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-sizes__item.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
}

.note-selection-menu__section {
  margin: 2px 0 2px;
  padding: 0 9px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-selection-menu__rule {
  height: 1px;
  margin: 6px 4px;
  background: var(--border-visible);
}

.note-selection-fonts {
  display: flex;
  flex: none;
  max-height: 216px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.note-selection-size {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

.note-selection-size__step {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.note-selection-size__step:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-size__step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.note-selection-size__value {
  min-width: 34px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.note-selection-size__reset {
  margin: 8px 4px 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.note-selection-size__reset:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.note-selection-menu__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-selection-menu__item.is-active {
  color: var(--accent);
  font-weight: 550;
}

.note-selection-menu__icon {
  display: inline-flex;
  width: 16px;
  justify-content: center;
  color: var(--text-muted);
}

.note-selection-menu__item.is-active .note-selection-menu__icon {
  color: var(--accent);
}

.note-selection-menu__label {
  flex: 1;
}

.note-selection-swatches {
  display: grid;
  grid-template-columns: repeat(6, 24px);
  gap: 6px;
  padding: 2px;
}

.note-selection-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease;
}

.note-selection-swatch:hover {
  border-color: var(--accent-border);
  transform: scale(1.08);
}

.note-selection-toolbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .note-selection-toolbar__inner {
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    border-radius: 16px;
  }
}
.link-prompt-host {
  z-index: var(--z-popover);
}

.link-prompt {
  display: flex;
  width: min(360px, calc(100vw - 16px));
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: var(--bg-popup);
  box-shadow: var(--shadow-md);
  animation: link-prompt-in 150ms ease-out;
}

.link-prompt__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.005em;
}

.link-prompt__input::placeholder {
  color: var(--text-muted);
}

.link-prompt__input.is-invalid {
  color: var(--danger, #e5484d);
}

.link-prompt__hint {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@keyframes link-prompt-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-prompt {
    animation-duration: 1ms;
  }
}
.slash-menu {
  position: relative;
  z-index: var(--z-popover);
  width: min(344px, calc(100vw - 16px));
  min-width: 272px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 8px;
  color: var(--text-primary);
  background: var(--bg-popup);
  box-shadow: var(--shadow-md);
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
  animation: slash-menu-in 150ms ease-out;
}

.slash-menu__group + .slash-menu__group {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.slash-menu__item {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: left;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.slash-menu__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/** Raccourci markdown equivalent, aligne a droite comme un indice discret. */
.slash-menu__hint {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 150ms ease;
}

.slash-menu__item:hover,
.slash-menu__item.is-active {
  background: var(--bg-hover);
}

.slash-menu__item svg {
  color: var(--text-muted);
  transition: color 150ms ease;
}

.slash-menu__item:hover svg,
.slash-menu__item.is-active svg,
.slash-menu__item:hover .slash-menu__hint,
.slash-menu__item.is-active .slash-menu__hint {
  color: var(--accent);
}

.slash-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.slash-menu__empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

@keyframes slash-menu-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slash-menu {
    animation-duration: 1ms;
  }
}
.emoji-menu {
  position: relative;
  z-index: var(--z-popover);
  width: min(288px, calc(100vw - 16px));
  min-width: 232px;
  max-height: 306px;
  overflow-y: auto;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 8px;
  color: var(--text-primary);
  background: var(--bg-popup);
  box-shadow: var(--shadow-md);
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
  animation: emoji-menu-in 150ms ease-out;
}

.emoji-menu__item {
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.emoji-menu__char {
  font-size: 17px;
  line-height: 1;
}

.emoji-menu__name {
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-menu__item:hover,
.emoji-menu__item.is-active {
  background: var(--bg-hover);
}

.emoji-menu__item:hover .emoji-menu__name,
.emoji-menu__item.is-active .emoji-menu__name {
  color: var(--text-primary);
}

.emoji-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.emoji-menu__empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

@keyframes emoji-menu-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-menu {
    animation-duration: 1ms;
  }
}
.wiki-link-menu {
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.wiki-link-menu__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wiki-link-menu__item svg {
  grid-row: 1 / span 2;
  color: var(--accent);
}

.wiki-link-menu__item.is-active,
.wiki-link-menu__item:hover {
  background: var(--bg-hover);
}

.wiki-link-menu__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-link-menu__meta {
  grid-column: 2;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.wiki-link-menu__empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.note-wiki-link {
  display: inline;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-border);
  padding: 0 1px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.note-wiki-link:hover {
  background: var(--accent-subtle);
  border-bottom-color: var(--accent);
}

.wiki-link-query {
  background: var(--accent-subtle);
  border-radius: 2px;
}
.note-editor {
  container: note-editor / inline-size;
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg-primary);
}

.note-editor-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.note-toolbar-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 36px;
  min-width: 0;
  align-items: flex-end;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-visible) 65%, transparent);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.note-toolbar-tabs::-webkit-scrollbar {
  display: none;
}

.note-toolbar-tabs > button {
  position: relative;
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 13px;
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.note-toolbar-tabs > button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-toolbar-tabs > button.is-active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 65%, transparent);
}

.note-toolbar-tabs > button.is-active::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  content: '';
}

.note-toolbar-tabs > button.is-contextual {
  color: var(--accent);
}

.note-toolbar-tabs > .note-toolbar-collapse {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 36px;
  min-height: 32px;
  margin-left: auto;
  border-radius: 8px;
  padding: 0;
  background: var(--bg-card);
  box-shadow: -8px 0 12px var(--bg-card);
}

.note-toolbar-collapse:focus-visible,
.note-toolbar-tabs > button:focus-visible,
.note-toolbar-button:focus-visible,
.note-toolbar-select:focus-within,
.note-font-size-trigger:focus-visible,
.note-color-popover button:focus-visible,
.note-font-size-popover button:focus-visible,
.note-font-size-popover input:focus-visible,
.note-editor-dialog button:focus-visible,
.note-editor-dialog input:focus-visible,
.note-table-picker button:focus-visible,
.note-symbols-popover button:focus-visible,
.note-ribbon-colors button:focus-visible,
.note-ribbon-widths button:focus-visible,
.note-zoom-readout:focus-visible,
.note-drawing-dialog button:focus-visible,
.note-drawing-canvas:focus-visible,
.note-history-dialog button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-toolbar-controls {
  display: flex;
  min-height: 76px;
  min-width: 0;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  padding: 7px 10px 8px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.note-toolbar-group {
  position: relative;
  display: flex;
  min-height: 62px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 3px;
  padding: 0 8px 2px;
  border-right: 1px solid color-mix(in srgb, var(--border-visible) 78%, transparent);
}

.note-toolbar-group__controls {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0;
}

.note-toolbar-group__label {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-toolbar-group:first-child {
  padding-left: 0;
}

.note-toolbar-group:last-child {
  border-right: 0;
}

.note-toolbar-group.is-wide {
  gap: 5px;
}

.note-toolbar-group.is-wide .note-toolbar-group__controls {
  gap: 5px;
}

.note-toolbar-button {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.note-toolbar-button:hover:not(:disabled) {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-toolbar-button.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-toolbar-button.is-danger {
  color: var(--status-down);
}

.note-toolbar-button.is-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--status-down) 30%, var(--border-visible));
  color: var(--status-down);
  background: color-mix(in srgb, var(--status-down) 9%, var(--bg-card));
}

.note-toolbar-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.note-toolbar-button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.note-toolbar-button.is-labeled {
  width: auto;
  min-width: 44px;
  grid-auto-flow: column;
  gap: 7px;
  padding: 0 12px;
}

.note-toolbar-button__label {
  max-width: 132px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-toolbar-select {
  position: relative;
  display: inline-flex;
  min-width: 132px;
  height: 42px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  padding: 0 9px;
  color: var(--text-muted);
  background: var(--bg-card);
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.note-toolbar-select:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-toolbar-select select {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.note-toolbar-select option {
  color: var(--text-primary);
  background: var(--bg-card);
}

.note-toolbar-select > svg:last-child {
  flex: 0 0 auto;
  pointer-events: none;
}

.note-toolbar-select.is-compact {
  min-width: 70px;
}

.note-font-size-anchor {
  position: relative;
}

.note-font-size-trigger {
  min-width: 74px;
  justify-content: space-between;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.note-font-size-trigger.is-open {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.note-palette-anchor {
  position: relative;
}

.note-palette-current {
  position: absolute;
  right: 11px;
  bottom: 7px;
  left: 11px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
}

.note-color-popover {
  position: fixed;
  z-index: var(--z-popover);
  width: 190px;
  padding: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 13px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  animation: note-toolbar-popover-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.note-color-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 22%, var(--border-visible));
  border-radius: 7px;
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.note-color-swatch:hover {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--accent-border);
}

.note-color-reset {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.note-font-size-popover {
  position: fixed;
  z-index: var(--z-popover);
  width: min(292px, calc(100vw - 16px));
  padding: 14px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  animation: note-toolbar-popover-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-font-size-popover__header {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.note-font-size-popover__header span {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.note-font-size-popover__header strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.note-font-size-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.note-font-size-presets button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.note-font-size-presets button:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-font-size-presets button.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-font-size-presets button:active,
.note-font-size-custom__controls > button:active,
.note-font-size-reset:active {
  transform: translateY(1px) scale(0.98);
}

.note-font-size-custom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-visible);
}

.note-font-size-custom > label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.note-font-size-custom__controls {
  display: grid;
  grid-template-columns: 44px minmax(72px, 1fr) 44px auto;
  gap: 6px;
}

.note-font-size-custom__controls > button,
.note-font-size-reset {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.note-font-size-custom__controls > button:hover,
.note-font-size-reset:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-font-size-custom__controls > button.is-primary {
  border-color: var(--accent);
  padding: 0 12px;
  color: hsl(var(--primary-foreground));
  background: var(--accent);
}

.note-font-size-custom__controls > button.is-primary:hover {
  border-color: var(--accent-hover);
  color: hsl(var(--primary-foreground));
  background: var(--accent-hover);
}

.note-font-size-input {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  background: var(--bg-secondary);
}

.note-font-size-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.note-font-size-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 2px 0 10px;
  color: var(--text-primary);
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.note-font-size-input input::-webkit-inner-spin-button,
.note-font-size-input input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.note-font-size-input span {
  padding-right: 9px;
  color: var(--text-muted);
  font-size: 14px;
}

.note-font-size-custom p {
  margin: 0;
  color: var(--status-down);
  font-size: 14px;
  line-height: 1.45;
}

.note-font-size-reset {
  width: 100%;
  gap: 7px;
  margin-top: 10px;
}

.note-ribbon-popover-anchor {
  position: relative;
  display: inline-flex;
}

.note-editor-file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.note-table-picker,
.note-symbols-popover {
  position: fixed;
  z-index: var(--z-popover);
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  animation: note-toolbar-popover-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-table-picker {
  width: 276px;
}

.note-table-picker__header,
.note-symbols-popover__header {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.015em;
}

.note-table-picker__header strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.note-table-picker__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.note-table-picker__grid button {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--border-visible);
  border-radius: 5px;
  background: var(--bg-card);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.note-table-picker__grid button:hover,
.note-table-picker__grid button.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.note-table-picker__grid button:active {
  transform: scale(0.92);
}

.note-symbols-popover {
  width: 264px;
}

.note-symbols-popover__header {
  justify-content: flex-start;
}

.note-symbols-popover__header svg {
  color: var(--accent);
}

.note-symbols-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.note-symbols-grid button {
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-primary);
  background: var(--bg-card);
  font-size: 17px;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.note-symbols-grid button:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-symbols-grid button:active {
  transform: scale(0.94);
}

.note-ribbon-colors {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 5px;
}

.note-ribbon-colors button {
  position: relative;
  width: 30px;
  height: 18px;
  border: 2px solid var(--bg-card);
  border-radius: 6px;
  outline: 1px solid var(--border-visible);
  cursor: pointer;
  transition:
    outline-color 140ms ease,
    transform 140ms ease;
}

.note-ribbon-colors button:hover,
.note-ribbon-colors button.is-active {
  outline-color: var(--accent);
  transform: translateY(-1px);
}

.note-ribbon-colors button.is-active::after {
  position: absolute;
  inset: -5px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  content: '';
}

.note-ribbon-widths {
  display: flex;
  align-items: center;
  gap: 3px;
}

.note-ribbon-widths button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.note-ribbon-widths button:hover,
.note-ribbon-widths button.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.note-ribbon-widths span {
  width: 24px;
  min-height: 2px;
  border-radius: 999px;
  background: var(--text-primary);
}

.note-history-count {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 11px;
  font-weight: 750;
}

.note-zoom-readout {
  min-width: 58px;
  height: 38px;
  border: 1px solid var(--border-visible);
  border-radius: 9px;
  color: var(--text-primary);
  background: var(--bg-card);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.note-zoom-readout:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-page-width-select {
  min-width: 174px;
}

@keyframes note-toolbar-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.note-editor-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: auto;
  padding: 32px clamp(18px, 4vw, 56px) 72px;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--border-visible) 24%, transparent) 50%,
      transparent
    ),
    var(--bg-primary);
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.note-editor-document {
  width: min(100%, 980px);
  min-height: max(760px, calc(100% - 12px));
  margin: 0 auto;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  padding: clamp(30px, 6vw, 72px) clamp(24px, 7vw, 82px) 100px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  zoom: var(--note-editor-zoom, 1);
  transition:
    width 180ms cubic-bezier(0.22, 1, 0.36, 1),
    zoom 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-editor--page-compact .note-editor-document {
  width: min(100%, 760px);
}

.note-editor--page-wide .note-editor-document {
  width: min(100%, 1200px);
}

.note-editor-content {
  margin-top: 30px;
}

.note-prosemirror {
  min-height: 480px;
  outline: none;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.002em;
  line-height: 1.75;
  overflow-wrap: anywhere;
  caret-color: var(--accent);
}

.note-prosemirror > *:first-child {
  margin-top: 0;
}

.note-prosemirror > *:last-child {
  margin-bottom: 0;
}

.note-prosemirror p {
  margin: 0.65em 0;
}

.note-prosemirror h1,
.note-prosemirror h2,
.note-prosemirror h3 {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.note-prosemirror h1 {
  margin: 1.45em 0 0.5em;
  font-size: 2.2em;
  line-height: 1.15;
}

.note-prosemirror h2 {
  margin: 1.35em 0 0.45em;
  font-size: 1.65em;
  line-height: 1.22;
}

.note-prosemirror h3 {
  margin: 1.2em 0 0.4em;
  font-size: 1.28em;
  line-height: 1.3;
}

.note-prosemirror strong {
  font-weight: 700;
}

.note-prosemirror a {
  color: var(--accent);
  text-decoration-color: var(--accent-border);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Un lien reste un lien meme dans un document editable : curseur main + clic actif. */
.note-prosemirror a[href] {
  cursor: pointer;
}

.note-prosemirror a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

.note-prosemirror ul,
.note-prosemirror ol {
  margin: 0.75em 0;
  padding-left: 1.55em;
}

.note-prosemirror ul {
  list-style: disc;
}

.note-prosemirror ol {
  list-style: decimal;
}

.note-prosemirror li {
  margin: 0.28em 0;
  padding-left: 0.18em;
}

.note-prosemirror li::marker {
  color: var(--text-muted);
}

.note-prosemirror ul[data-type='taskList'] {
  padding-left: 0;
  list-style: none;
}

.note-prosemirror ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}

.note-prosemirror ul[data-type='taskList'] li > label {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  flex: 0 0 auto;
  user-select: none;
}

.note-prosemirror ul[data-type='taskList'] li > label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.note-prosemirror ul[data-type='taskList'] li > div {
  min-width: 0;
  flex: 1 1 auto;
}

.note-prosemirror ul[data-type='taskList'] li[data-checked='true'] > div {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-visible);
}

.note-prosemirror blockquote {
  margin: 1.35em 0;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 10px 16px;
  color: var(--text-secondary);
  background: var(--accent-subtle);
}

.note-prosemirror code {
  border: 1px solid var(--border-visible);
  border-radius: 6px;
  padding: 0.12em 0.36em;
  color: var(--text-primary);
  background: var(--bg-hover);
  font-family: var(--font-code);
  font-size: 0.88em;
}

/* Bloc de code : gouttiere de numeros a gauche, contenu defilant a droite. */
.note-prosemirror .note-code-block {
  display: grid;
  margin: 1.25em 0;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-secondary);
  font-family: var(--font-code);
  font-size: 0.9em;
  line-height: 1.65;
  tab-size: 2;
}

.note-prosemirror .note-code-block__gutter {
  display: flex;
  flex-direction: column;
  padding: 16px 12px 16px 16px;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.note-prosemirror pre {
  margin: 0;
  overflow-x: auto;
  padding: 16px 18px;
  color: var(--text-primary);
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.note-prosemirror pre code {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.note-prosemirror hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: var(--border-visible);
}

.note-prosemirror mark {
  border-radius: 3px;
  box-decoration-break: clone;
  padding: 0.05em 0.16em;
  color: inherit;
}

.note-prosemirror img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}

.note-prosemirror img.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.note-prosemirror .tableWrapper {
  margin: 1.4em 0;
  overflow-x: auto;
}

.note-prosemirror table {
  width: 100%;
  min-width: 420px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 11px;
}

.note-prosemirror th,
.note-prosemirror td {
  position: relative;
  min-width: 110px;
  border-right: 1px solid var(--border-visible);
  border-bottom: 1px solid var(--border-visible);
  padding: 9px 11px;
  vertical-align: top;
  text-align: left;
}

.note-prosemirror th:last-child,
.note-prosemirror td:last-child {
  border-right: 0;
}

.note-prosemirror tr:last-child td {
  border-bottom: 0;
}

.note-prosemirror th {
  color: var(--text-primary);
  background: var(--bg-elevated);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.note-prosemirror td {
  background: var(--bg-card);
}

.note-prosemirror .selectedCell::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--accent-subtle);
  content: '';
}

.note-prosemirror .column-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: -2px;
  width: 4px;
  pointer-events: none;
  background: var(--accent);
}

.note-prosemirror p.is-editor-empty:first-child::before {
  float: left;
  height: 0;
  color: var(--text-muted);
  content: attr(data-placeholder);
  pointer-events: none;
  opacity: 0.7;
}

.note-prosemirror ::selection {
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-editor-statusbar {
  display: flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 14px;
  border-top: 1px solid var(--border-visible);
  color: var(--text-muted);
  background: var(--bg-card);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.note-editor-statusbar__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
}

/* Minimal chrome — bare canvas with a floating tool dock */
.note-editor--minimal {
  position: relative;
}

.note-editor--minimal .note-editor-scroll {
  padding: 8px clamp(18px, 4vw, 56px) 104px;
  background: var(--bg-primary);
}

.note-editor--minimal .note-editor-document {
  min-height: max(680px, calc(100% - 12px));
  border: 0;
  padding: clamp(20px, 3vw, 36px) clamp(18px, 4vw, 56px) 88px;
  background: transparent;
  box-shadow: none;
}

.note-editor-dock {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 5;
  display: flex;
  /* Le quai prend sa largeur naturelle : sans ca, la barre repliable se
     casserait en deux rangees alors que la place ne manque pas. */
  width: max-content;
  max-width: calc(100% - 32px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.note-editor-dock > * {
  pointer-events: auto;
}

/* Le quai reste toujours ouvert : tous les outils sont la, et il se replie sur
   deux rangees plutot que de disparaitre derriere une fleche. */
.note-editor-dock__pill {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border-visible);
  border-radius: 28px;
  padding: 6px 10px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

/* Surligneur arme : la selection prend deja la couleur du marqueur. */
.note-editor.is-marking .note-editor-content .ProseMirror {
  cursor: text;
}

.note-editor.is-marking .note-editor-content ::selection {
  background: var(--note-marker-tint);
}

.note-editor-dock__separator {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--border-visible);
}

.note-dock-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-dock-button:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-dock-button.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-dock-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-dock-button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.note-dock-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.note-dock-swatch {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.note-dock-swatch:hover {
  background: var(--bg-hover);
}

.note-dock-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-dock-swatch__dot {
  display: block;
  width: 20px;
  height: 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
}

/* Icone seule, taillee comme la pastille de couleur : l'epaisseur choisie se
   lit dans le trait, pas dans un libelle. */
.note-dock-brush {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-dock-brush:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-dock-brush.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-dock-brush:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-dock-brush__preview {
  display: block;
  width: 20px;
  min-height: 2px;
  border-radius: 999px;
  background: currentcolor;
}

.note-dock-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 6;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
  animation: note-editor-dock-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-dock-popover--colors {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.note-dock-popover--shapes {
  padding: 12px;
}

.note-dock-popover--menu {
  display: flex;
  min-width: 248px;
  max-height: 320px;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 8px;
}

.note-dock-color {
  width: 24px;
  height: 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.note-dock-color:hover {
  transform: scale(1.08);
}

.note-dock-color.is-active {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--accent);
}

.note-dock-color:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-dock-menu-item {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--text-secondary);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.note-dock-menu-item:hover:not(:disabled),
.note-dock-menu-item.is-active {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-dock-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.note-dock-menu-item__label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-dock-menu-item__label span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.note-dock-drive {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-dock-drive__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--text-muted);
}

.note-dock-drive__search input {
  min-width: 0;
  height: 40px;
  flex: 1;
  border: 0;
  color: var(--text-primary);
  font-size: 14px;
  background: transparent;
  outline: none;
}

.note-dock-drive__error {
  margin: 4px 0 0;
  padding: 0 4px;
  color: var(--status-down);
  font-size: 12px;
  line-height: 1.5;
}

.note-dock-spin {
  animation: note-dock-spin 900ms linear infinite;
}

@keyframes note-dock-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes note-editor-dock-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-editor-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
}

.note-editor-dialog {
  display: flex;
  width: min(430px, 100%);
  flex-direction: column;
  gap: 15px;
  border: 1px solid var(--border-visible);
  border-radius: 17px;
  padding: 22px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-editor-dialog__header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
}

.note-editor-dialog__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible);
}

.note-editor-dialog__header span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.note-editor-dialog__header h2 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.015em;
}

.note-editor-dialog__header > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.note-editor-dialog__header > button:hover {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-editor-dialog > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.note-editor-dialog > label > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.note-editor-dialog input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 11px;
  outline: 0;
  padding: 0 12px;
  color: var(--text-primary);
  background: var(--input-bg);
  font-size: 13px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.note-editor-dialog input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.note-editor-dialog input::placeholder {
  color: var(--text-muted);
}

.note-editor-dialog__error {
  margin: -5px 0 0;
  color: var(--status-down);
  font-size: 12px;
  line-height: 1.4;
}

.note-editor-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 3px;
}

.note-editor-dialog__actions button {
  min-height: 42px;
  border: 1px solid var(--border-visible);
  border-radius: 11px;
  padding: 0 15px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.note-editor-dialog__actions button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-editor-dialog__actions button.is-primary {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.note-editor-dialog__actions button.is-primary:hover {
  background: var(--accent-hover);
}

.note-editor-dialog__actions button:active {
  transform: translateY(1px) scale(0.98);
}

.note-drawing-backdrop,
.note-history-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  animation: note-dialog-backdrop-in 160ms ease-out;
}

.note-drawing-dialog,
.note-history-dialog {
  display: flex;
  overflow: hidden;
  width: min(100%, 1040px);
  max-height: min(860px, calc(100vh - 48px));
  flex-direction: column;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  animation: note-dialog-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-history-dialog {
  width: min(100%, 760px);
}

.note-drawing-dialog__header,
.note-history-dialog__header {
  display: grid;
  min-height: 76px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-visible);
}

.note-drawing-dialog__mark,
.note-history-dialog__mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.note-drawing-dialog__header span,
.note-history-dialog__header span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.note-drawing-dialog__header h2,
.note-history-dialog__header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.note-drawing-dialog__header > button,
.note-history-dialog__header > button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease;
}

.note-drawing-dialog__header > button:hover,
.note-history-dialog__header > button:hover {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-drawing-tools {
  display: flex;
  min-height: 68px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.note-drawing-tools__group,
.note-drawing-colors,
.note-drawing-widths,
.note-drawing-history-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-drawing-tools__group,
.note-drawing-colors,
.note-drawing-widths {
  padding-right: 8px;
  border-right: 1px solid var(--border-visible);
}

.note-drawing-tools button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 10px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.note-drawing-tools button:hover:not(:disabled),
.note-drawing-tools button.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-drawing-tools button:active:not(:disabled) {
  transform: scale(0.97);
}

.note-drawing-tools button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.note-drawing-tools button.is-danger {
  color: var(--status-down);
}

.note-drawing-colors button {
  position: relative;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border: 3px solid var(--bg-secondary);
  border-radius: 999px;
  padding: 0;
  outline: 1px solid var(--border-visible);
}

.note-drawing-colors button:hover,
.note-drawing-colors button.is-active {
  outline-color: var(--accent);
  transform: scale(1.06);
}

.note-drawing-widths button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
}

.note-drawing-widths span {
  width: 22px;
  min-height: 2px;
  border-radius: 999px;
  background: var(--text-primary);
}

.note-drawing-history-controls {
  margin-left: auto;
}

.note-drawing-canvas-shell {
  position: relative;
  min-height: 320px;
  flex: 1 1 520px;
  margin: 16px;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(var(--border-visible) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-visible) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.note-drawing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.note-drawing-canvas.is-pen,
.note-drawing-canvas.is-highlighter {
  cursor: crosshair;
}

.note-drawing-canvas.is-eraser {
  cursor: cell;
}

.note-drawing-canvas__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.note-drawing-dialog__actions {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-visible);
}

.note-drawing-dialog__actions button,
.note-history-dialog__intro button,
.note-history-item__footer button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.note-drawing-dialog__actions button:hover:not(:disabled),
.note-history-dialog__intro button:hover,
.note-history-item__footer button:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-drawing-dialog__actions button.is-primary {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.note-drawing-dialog__actions button.is-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.note-drawing-dialog__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.note-history-dialog__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.note-history-dialog__intro p {
  max-width: 480px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: 0.005em;
  line-height: 1.6;
}

.note-history-dialog__intro button {
  flex: 0 0 auto;
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-history-list {
  display: grid;
  min-height: 0;
  gap: 10px;
  overflow-y: auto;
  padding: 16px 18px 22px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.note-history-item {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg-secondary);
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.note-history-item:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-history-item__meta,
.note-history-item__footer,
.note-history-item__footer > div {
  display: flex;
  align-items: center;
}

.note-history-item__meta,
.note-history-item__footer {
  justify-content: space-between;
  gap: 12px;
}

.note-history-item__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.note-history-item__meta small {
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.note-history-item > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-history-item__footer > span {
  color: var(--text-muted);
  font-size: 11px;
}

.note-history-item__footer > div {
  gap: 6px;
}

.note-history-item__footer button {
  min-height: 38px;
  padding: 0 11px;
}

.note-history-item__footer button.is-danger {
  width: 38px;
  padding: 0;
  color: var(--status-down);
}

.note-history-empty {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 24px;
  text-align: center;
  animation: note-empty-state-in 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-history-empty__halo {
  display: grid;
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.note-history-empty__halo > div {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.note-history-empty h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.note-history-empty p {
  max-width: 390px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.005em;
  line-height: 1.6;
}

.note-history-empty > span {
  margin-top: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-size: 11px;
  font-weight: 650;
}

@keyframes note-dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes note-dialog-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes note-empty-state-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-editor--loading {
  background: var(--bg-primary);
}

.note-editor-loading-toolbar {
  height: 98px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-visible);
  background: linear-gradient(
    100deg,
    var(--bg-card),
    var(--bg-hover),
    var(--bg-card)
  );
  background-size: 220% 100%;
  animation: note-editor-shimmer 1.2s ease-in-out infinite;
}

.note-editor--loading .note-editor-document span {
  display: block;
  width: 100%;
  height: 10px;
  margin: 14px 0;
  border-radius: 999px;
  background: var(--bg-hover);
}

.note-editor--loading .note-editor-document span:first-child {
  width: 62%;
  height: 30px;
}

.note-editor--loading .note-editor-document span:last-child {
  width: 74%;
}

@keyframes note-editor-shimmer {
  to {
    background-position: -220% 0;
  }
}

@container note-editor (max-width: 680px) {
  .note-toolbar-controls {
    min-height: 58px;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .note-toolbar-group {
    min-height: 46px;
    justify-content: center;
    padding-bottom: 0;
  }

  .note-toolbar-group__label {
    display: none;
  }
}

@media (max-width: 900px) {
  .note-toolbar-controls {
    padding-right: 8px;
    padding-left: 8px;
  }

  .note-toolbar-group {
    padding-right: 5px;
    padding-left: 5px;
  }

  .note-editor-scroll {
    padding: 18px 12px 58px;
  }

  .note-editor-document {
    width: 100%;
    min-height: calc(100% - 6px);
    border-radius: 14px;
    padding: 34px clamp(20px, 6vw, 48px) 80px;
  }

  .note-drawing-backdrop,
  .note-history-backdrop {
    padding: 12px;
  }

  .note-drawing-dialog,
  .note-history-dialog {
    max-height: calc(100vh - 24px);
  }

  .note-drawing-tools__group button {
    font-size: 0;
  }

  .note-drawing-tools__group button svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 600px) {
  .note-toolbar-tabs {
    min-height: 38px;
    padding: 0 6px;
  }

  .note-toolbar-tabs > button {
    min-height: 37px;
    padding: 0 11px;
  }

  .note-toolbar-controls {
    min-height: 58px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .note-toolbar-group {
    min-height: 46px;
  }

  .note-toolbar-button {
    width: 42px;
    height: 42px;
  }

  .note-toolbar-select {
    height: 42px;
  }

  .note-editor-scroll {
    padding: 0 0 52px;
  }

  .note-editor-document {
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 28px 20px 72px;
    box-shadow: none;
  }

  .note-prosemirror {
    min-height: 420px;
    font-size: 15px;
    line-height: 1.7;
  }

  .note-editor-statusbar {
    justify-content: space-between;
    padding: 0 10px;
  }

  .note-editor-statusbar__hint {
    display: none;
  }

  .note-drawing-backdrop,
  .note-history-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .note-drawing-dialog,
  .note-history-dialog {
    width: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .note-drawing-tools {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .note-drawing-canvas-shell {
    min-height: 280px;
    margin: 10px;
  }

  .note-history-dialog__intro {
    align-items: stretch;
    flex-direction: column;
  }

  .note-history-dialog__intro button {
    align-self: flex-start;
  }

  .note-history-item__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  .note-editor-toolbar,
  .note-editor-statusbar,
  .note-editor-dialog-backdrop,
  .note-drawing-backdrop,
  .note-history-backdrop {
    display: none !important;
  }

  .note-editor,
  .note-editor-scroll {
    overflow: visible;
    background: var(--bg-card);
  }

  .note-editor-scroll {
    padding: 0;
  }

  .note-editor-document,
  .note-editor--page-compact .note-editor-document,
  .note-editor--page-wide .note-editor-document {
    width: 100%;
    min-height: 0;
    border: 0;
    padding: 0;
    box-shadow: none;
    zoom: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-editor *,
  .note-editor *::before,
  .note-editor *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Block nodes v2 */
.note-callout {
  margin: 1.1em 0;
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-callout--important {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
}

.note-callout--definition,
.note-callout--example {
  border-color: color-mix(in srgb, var(--status-operational) 34%, var(--border-visible));
  border-left-color: var(--status-operational);
  background: color-mix(in srgb, var(--status-operational) 10%, transparent);
}

.note-callout--question,
.note-callout--examtip,
.note-callout--warning {
  border-color: color-mix(in srgb, var(--status-warning) 36%, var(--border-visible));
  border-left-color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 10%, transparent);
}

.note-callout--warning {
  border-left-color: var(--status-down);
  background: color-mix(in srgb, var(--status-down) 10%, transparent);
}

.note-callout > :first-child,
.note-toggle__content > :first-child {
  margin-top: 0;
}

.note-callout > :last-child,
.note-toggle__content > :last-child {
  margin-bottom: 0;
}

.note-toggle {
  margin: 1.1em 0;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 0;
  background: var(--bg-card);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.note-toggle:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-toggle > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.note-toggle > summary::-webkit-details-marker {
  display: none;
}

.note-toggle > summary::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  content: '';
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}

.note-toggle[open] > summary::before {
  transform: rotate(45deg) translate(-2px, -2px);
}

.note-toggle__content {
  padding: 0 16px 14px 30px;
  color: var(--text-secondary);
}

.note-math-inline {
  display: inline-block;
  border-radius: 4px;
  padding: 0 2px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 150ms ease, outline-color 150ms ease;
}

.note-math-inline:hover {
  background: var(--bg-hover);
}

.note-math-block {
  margin: 16px 0;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 16px;
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.note-math-block:hover {
  border-color: var(--border-visible);
  background: var(--bg-hover);
}

.note-math-inline.ProseMirror-selectednode,
.note-math-block.ProseMirror-selectednode {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

.note-math-popover-backdrop {
  position: fixed;
  z-index: var(--z-popover);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
}

.note-math-popover {
  display: grid;
  width: min(480px, 100%);
  gap: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  padding: 20px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-math-popover__label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 650;
}

.note-math-popover textarea {
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  outline: 0;
  padding: 12px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.note-math-popover textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.note-math-popover__preview {
  min-height: 76px;
  overflow-x: auto;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg-secondary);
  text-align: center;
}

.note-math-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.note-math-popover__actions button {
  min-height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  padding: 0 15px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.note-math-popover__actions button:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-math-popover__actions button.is-primary {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.note-math-popover__actions button.is-primary:hover {
  background: var(--accent-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Vue « pages » — le document continu posé sur des feuilles A4 numérotées.

   Les feuilles sont un décor derrière un document unique (voir
   `editor/pageLayout.ts`) : rien n'est découpé, les blocs sont seulement
   décalés pour qu'aucune ligne ne tombe dans la gouttière.
   ───────────────────────────────────────────────────────────────────────────── */

.note-editor--paged {
  --note-page-width: 794px;
  --note-page-height: 1123px;
  --note-page-gap: 26px;
  --note-page-pad-top: 76px;
  --note-page-pad-bottom: 88px;
  --note-page-pad-x: 78px;
}

.note-editor--paged .note-editor-scroll {
  padding: 28px clamp(12px, 3vw, 40px) 96px;
  background: var(--bg-primary);
}

.note-editor--paged .note-editor-document {
  position: relative;
  width: min(100%, var(--note-page-width));
  padding: var(--note-page-pad-top) var(--note-page-pad-x) var(--note-page-pad-bottom);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.note-page-stack {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.note-page-sheet {
  position: relative;
  height: var(--note-page-height);
  border: 1px solid var(--border-visible);
  border-radius: 4px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.note-page-sheet + .note-page-sheet {
  margin-top: var(--note-page-gap);
}

/* Numéro dans la marge basse de sa propre feuille — jamais dans la gouttière,
   où il flotterait entre deux pages sans appartenir à aucune. */
.note-page-sheet__number {
  position: absolute;
  right: calc(var(--note-page-pad-x) - 24px);
  bottom: 28px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.note-editor--paged .note-document-heading,
.note-editor--paged .note-editor-content {
  position: relative;
  z-index: 1;
}

/* La feuille porte déjà la marge du haut : le titre ne la double pas. */
.note-editor--paged .note-editor-document > .note-document-heading {
  margin-top: 0;
}

.note-page-indicator {
  position: absolute;
  z-index: 5;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 4px 6px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.note-page-indicator__step {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}

.note-page-indicator__step:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-page-indicator__step:disabled {
  opacity: 0.35;
  cursor: default;
}

.note-page-indicator__field input {
  width: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 3px 4px;
  color: var(--text-primary);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.note-page-indicator__field input:focus {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-page-indicator__total {
  padding-right: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

/* Seule la marge laterale se resserre sur un ecran etroit : les marges hautes
   et basses sont la geometrie que `pageLayout.ts` utilise pour decider ou une
   page s'arrete, les changer ici les desynchroniserait. */
@media (max-width: 768px) {
  .note-editor--paged .note-editor-document {
    --note-page-pad-x: 26px;
  }

  .note-page-sheet__number {
    right: 14px;
    bottom: 16px;
  }
}
.ask-norex {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-card);
  color: var(--text-primary);
}

.ask-norex__header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px 20px;
  border-bottom: 1px solid var(--border-visible);
}

.ask-norex__eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ask-norex__header h2 {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.ask-norex__close {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ask-norex__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ask-norex__scope {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-visible);
}

.ask-norex__scope-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ask-norex__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask-norex__chip {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ask-norex__chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ask-norex__chip.is-active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
}

.ask-norex__scope-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.ask-norex__source-list {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 4px 0;
}

.ask-norex__source-row {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}

.ask-norex__source-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask-norex__source-row input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.ask-norex__toggle {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: 0.005em;
}

.ask-norex__toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.ask-norex__messages {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px 16px 8px;
}

.ask-norex__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 12px;
  text-align: center;
}

.ask-norex__empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)), var(--bg-elevated));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  color: var(--accent);
}

.ask-norex__empty h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ask-norex__empty p {
  margin: 0;
  max-width: 280px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.ask-norex__msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.ask-norex__msg--user .ask-norex__bubble {
  align-self: flex-end;
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}

.ask-norex__bubble {
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.ask-norex__citations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ask-norex__cite {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ask-norex__cite:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.ask-norex__composer {
  display: flex;
  gap: 8px;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-visible);
}

.ask-norex__composer textarea {
  min-height: 44px;
  max-height: 120px;
  flex: 1;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.ask-norex__composer textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
}

.ask-norex__send {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ask-norex__send:hover:not(:disabled) {
  background: var(--accent-hover);
}

.ask-norex__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ask-norex__warn {
  margin: 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.selection-ask-bar {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}

.selection-ask-bar button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ask-norex--sheet {
  min-height: min(60dvh, 520px);
}

.ask-norex--sheet .ask-norex__messages {
  min-height: 180px;
}

.selection-ask-bar button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-ask-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-sheet);
  display: flex;
  width: min(420px, 94vw);
  flex-direction: column;
  border-left: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-ask-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  border: 0;
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
}
/* Onglets « Ma note » / « Version IA » et vue organisée par l'IA. */

.note-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: var(--bg-card);
}

.note-view-tabs__item {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.note-view-tabs__item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-view-tabs__item[aria-selected='true'] {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-view-tabs__item[aria-selected='true'] svg {
  color: var(--accent);
}

.note-view-tabs__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Vue IA ──────────────────────────────────────────────────── */

.note-ai-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.note-ai-view--centered {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.note-ai-view__editor {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.note-ai-hero {
  display: flex;
  width: min(560px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.note-ai-hero h2 {
  margin: 18px 0 0;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.note-ai-hero p {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 0.005em;
  line-height: 1.65;
  text-wrap: pretty;
}

.note-ai-mark--pulsing {
  animation: note-ai-pulse 1.8s ease-in-out infinite;
}

@keyframes note-ai-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-ai-mark--pulsing {
    animation: none;
  }
}

.note-ai-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0 20px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-subtle);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.note-ai-cta:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.note-ai-bar {
  display: flex;
  min-height: 44px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--border-visible);
}

.note-ai-bar__meta {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.note-ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--status-warning) 36%, var(--border-visible));
  border-radius: 999px;
  color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 10%, transparent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.note-ai-regenerate {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.note-ai-regenerate:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}
.lecture-capture {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
}

.lecture-capture__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lecture-capture__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lecture-capture__timer {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text-secondary);
}

.lecture-capture__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lecture-capture__btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.lecture-capture__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lecture-capture__btn:hover:not(:disabled) {
  background: var(--bg-hover);
}

.lecture-capture__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lecture-capture__btn--primary {
  border-color: var(--accent-border);
  background: var(--accent);
  color: #fff;
}

.lecture-capture__btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.lecture-capture__btn--danger {
  border-color: var(--accent-border);
  color: var(--accent);
}

.lecture-capture__meter {
  display: flex;
  height: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 80px;
  border-radius: 999px;
  background: var(--bg-secondary);
}

.lecture-capture__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 80ms linear;
}

.lecture-capture__status {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.005em;
  color: var(--text-muted);
}

.lecture-capture__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lecture-capture__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.lecture-capture__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lecture-capture__item-name {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.lecture-capture__item-meta {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.lecture-capture__player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lecture-capture__scrubber {
  width: 100%;
  accent-color: var(--accent);
}

.lecture-capture__segments {
  max-height: 160px;
  overflow: auto;
  width: 100%;
}

.lecture-capture__segment {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.lecture-capture__segment span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lecture-capture__segment:hover,
.lecture-capture__segment.is-active {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

.lecture-capture__segment time {
  display: inline-block;
  min-width: 42px;
  margin-right: 8px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.lecture-capture__error {
  margin: 0;
  font-size: 12px;
  color: var(--status-down, var(--text-secondary));
}

.lecture-capture__smart {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.lecture-capture__smart-preview {
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .lecture-capture__btn,
  .lecture-capture__segment,
  .lecture-capture__meter > span {
    transition: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   Export PDF d'une note (voir `notePrint.ts`).

   Le portail est invisible à l'écran : il n'existe que le temps du dialogue
   d'impression. Sur le papier, il devient le seul contenu de la page — le
   reste de l'application est retiré du flux, pas seulement masqué, pour ne pas
   laisser de pages blanches derrière la note.
   ───────────────────────────────────────────────────────────────────────────── */

.note-print-portal {
  display: none;
}

@media print {
  body.is-note-printing > *:not(.note-print-portal) {
    display: none !important;
  }

  body.is-note-printing {
    overflow: visible !important;
    background: #ffffff;
  }

  .note-print-portal {
    display: block;
    /* Le thème sombre n'a rien à faire sur du papier : les jetons sont
       redéfinis ici, la note garde ses styles sans les repeindre un par un. */
    --text-primary: #111111;
    --text-secondary: #3f3f3f;
    --text-muted: #6b6b6b;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f4f4f4;
    --bg-elevated: #f4f4f4;
    --border: #d8d8d8;
    --border-visible: #dcdcdc;
    color: #111111;
    background: #ffffff;
  }

  .note-print-portal__title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: #111111;
  }

  .note-print-portal__body {
    font-size: 12pt;
    line-height: 1.6;
    color: #111111;
  }

  /* Le clone garde les classes de l'éditeur : on annule ce qui relève de
     l'écran (hauteur minimale, curseur, zoom) et on laisse la typographie. */
  .note-print-portal .note-prosemirror {
    min-height: 0;
    font-size: inherit;
  }

  .note-print-portal .ProseMirror-trailingBreak,
  .note-print-portal .ProseMirror-gapcursor,
  .note-print-portal [data-block-handle],
  .note-print-portal button {
    display: none !important;
  }

  .note-print-portal img,
  .note-print-portal table,
  .note-print-portal pre {
    max-width: 100%;
    break-inside: avoid;
  }

  .note-print-portal h1,
  .note-print-portal h2,
  .note-print-portal h3 {
    break-after: avoid;
  }

  @page {
    margin: 18mm 16mm;
  }
}
.note-workspace {
  position: fixed;
  inset: var(--electron-titlebar-height, 0px) 0 0;
  z-index: var(--z-mobile-chrome);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 72% -20%, var(--accent-subtle), transparent 34rem),
    var(--bg-primary);
}

/* Surface de la barre haute. Les boutons reduire / agrandir / fermer sont
   peints nativement par Windows par-dessus cette bande : NoteDetail repeint
   l'overlay avec cette meme valeur pour qu'aucun rectangle ne ressorte. */
:root,
.note-workspace {
  --note-topbar-surface: color-mix(in srgb, var(--bg-card) 96%, var(--bg-primary));
}

.note-workspace button,
.note-workspace input,
.note-workspace select {
  font: inherit;
}

.note-workspace button {
  -webkit-tap-highlight-color: transparent;
}

.note-workspace__topbar {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 64px;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--note-topbar-surface);
  box-shadow: var(--shadow-xs);
}

body.electron-windows .note-workspace__topbar {
  padding-right: 150px;
}

body.electron-windows .note-workspace__topbar button,
body.electron-windows .note-workspace__topbar a,
body.electron-windows .note-workspace__topbar input,
body.electron-windows .note-workspace__topbar [role="button"] {
  -webkit-app-region: no-drag;
}

.note-workspace__topbar-left,
.note-workspace__topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.note-workspace__topbar-actions {
  justify-content: flex-end;
}

.note-workspace__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  margin-left: 4px;
}

.note-workspace__identity span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.note-workspace__identity strong {
  overflow: hidden;
  max-width: min(24vw, 300px);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-chrome-button,
.note-navigator__header button,
.note-transcript__header button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-chrome-button:hover,
.note-navigator__header button:hover,
.note-transcript__header button:hover {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-chrome-button:active,
.note-navigator__header button:active,
.note-transcript__header button:active {
  transform: translateY(1px) scale(0.98);
}

.note-chrome-button:focus-visible,
.note-navigator__header button:focus-visible,
.note-transcript__header button:focus-visible,
.note-action-button:focus-visible,
.note-primary-action:focus-visible,
.note-more-menu button:focus-visible,
.note-page-row:focus-visible,
.note-navigator__all:focus-visible,
.note-document-tags-trigger:focus-visible,
.note-document-tag button:focus-visible,
.note-finish-option:focus-visible,
.note-finish-dialog__continue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-primary-action,
.note-action-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition:
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.note-primary-action {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}

.note-primary-action:hover {
  background: var(--accent-hover);
}

.note-action-button {
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
  background: var(--bg-card);
}

.note-action-button:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-action-button--ai {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-action-button--copilot.is-active {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent);
}

.note-action-button:active,
.note-primary-action:active {
  transform: translateY(1px) scale(0.98);
}

.note-action-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.note-save-indicator {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

button.note-save-indicator {
  cursor: pointer;
}

.note-save-indicator.is-saved {
  color: var(--status-operational);
}

.note-save-indicator.is-dirty,
.note-save-indicator.is-saving,
.note-save-indicator.is-recovered {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.note-save-indicator.is-error {
  border-color: color-mix(in srgb, var(--status-down) 32%, var(--border-visible));
  color: var(--status-down);
  background: color-mix(in srgb, var(--status-down) 9%, var(--bg-card));
}

.note-save-indicator.is-offline {
  color: var(--status-warning);
}

.note-save-indicator__spinner {
  animation: note-spin 700ms linear infinite;
}

@keyframes note-spin {
  to {
    transform: rotate(360deg);
  }
}

.note-workspace__body {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.note-workspace__editor {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.note-workspace__editor > .note-editor {
  min-height: 0;
  flex: 1 1 auto;
}

.note-lecture-dock {
  flex: 0 0 auto;
  max-height: min(42vh, 420px);
  overflow: auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.note-navigator {
  position: relative;
  z-index: 3;
  display: flex;
  width: 304px;
  min-width: 280px;
  min-height: 0;
  flex: 0 0 304px;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-visible);
  background: color-mix(in srgb, var(--bg-secondary) 96%, var(--bg-card));
  box-shadow: var(--shadow-xs);
}

.note-navigator__header {
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px 18px;
}

.note-navigator__header > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.note-navigator__header span {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.note-navigator__header strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.note-navigator__search {
  display: flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin: 0 14px 10px;
  border: 1px solid var(--border-visible);
  border-radius: 11px;
  padding: 0 11px;
  color: var(--text-muted);
  background: var(--bg-card);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.note-navigator__search:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.note-navigator__search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 13px;
}

.note-navigator__search input::placeholder {
  color: var(--text-muted);
}

.note-navigator__search button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.note-navigator__search button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-navigator__list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 10px 16px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.note-page-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 98px;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 11px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 12px 11px 9px;
  text-align: left;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.note-page-row:hover {
  border-color: var(--border-visible);
  background: var(--bg-hover);
}

.note-page-row:active {
  transform: scale(0.99);
}

.note-page-row.is-active {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--accent-subtle) 80%, var(--bg-card));
}

.note-page-row__marker {
  width: 3px;
  height: 100%;
  border-radius: 999px;
  background: transparent;
}

.note-page-row.is-active .note-page-row__marker {
  background: var(--accent);
}

.note-page-row__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.note-page-row__body strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-page-row__body > span {
  display: -webkit-box;
  overflow: hidden;
  min-height: 34px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-page-row__body small {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-page-row__body small i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg-card);
}

.note-navigator__empty {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

.note-navigator__empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.note-navigator__all {
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 14px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.note-navigator__all:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-navigator-backdrop,
.note-transcript-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2;
  border: 0;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.note-document-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0 28px;
  border-bottom: 1px solid var(--border-visible);
}

.note-document-title {
  width: 100%;
  min-height: 56px;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.note-document-title::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.note-document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.005em;
}

.note-document-meta > span,
.note-document-meta > button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
}

.note-document-meta > button {
  border: 0;
  border-radius: 8px;
  padding: 0 7px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
}

.note-document-meta > button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-document-meta__count {
  font-variant-numeric: tabular-nums;
}

.note-document-organize {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 2px;
}

.note-document-select.app-select-trigger {
  width: auto;
  min-width: 156px;
  max-width: 260px;
  min-height: 38px;
  border-radius: 10px;
  background: var(--bg-card);
}

.note-document-tags-trigger {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  padding: 0 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.note-document-tags-trigger:hover,
.note-document-tags-trigger.is-active {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-document-tags-trigger > span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--bg-hover);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.note-document-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-hover));
}

.note-document-tag {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 0 5px 0 10px;
  color: var(--text-secondary);
  background: var(--accent-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.note-document-tag button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.note-document-tag button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-document-tags input {
  min-width: 130px;
  min-height: 30px;
  flex: 1 1 150px;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 12px;
}

.note-document-tags input::placeholder {
  color: var(--text-muted);
}

.note-more {
  position: relative;
}

.note-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-popover);
  display: flex;
  width: 248px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-more-menu button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.note-more-menu button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-more-menu button.is-danger {
  color: var(--status-down);
}

.note-more-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--status-down) 9%, var(--bg-card));
}

.note-more-menu button:disabled {
  opacity: 0.55;
  cursor: default;
}

.note-more-menu button:disabled:hover {
  color: var(--text-secondary);
  background: transparent;
}

.note-more-menu__divider {
  height: 1px;
  margin: 4px 7px;
  background: var(--border-visible);
}

/* Choix de vue deplie sous son entree : renfonce, pour qu'on lise d'un coup
   d'oeil que ces deux lignes appartiennent au reglage au-dessus. */
.note-more-menu__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 2px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--border-visible);
}

.note-more-menu__group button {
  min-height: 36px;
  font-size: 12.5px;
}

.note-more-menu__group button.is-selected {
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.note-more-menu__check {
  margin-left: auto;
  color: var(--accent);
}

.note-transcript-backdrop {
  z-index: var(--z-mobile-overlay);
}

.note-transcript {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-sheet);
  display: flex;
  width: min(460px, 92vw);
  flex-direction: column;
  border-left: 1px solid var(--border-visible);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-transcript__header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px 22px;
  border-bottom: 1px solid var(--border-visible);
}

.note-transcript__header > div {
  min-width: 0;
}

.note-transcript__header span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.note-transcript__header h2 {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.note-transcript > p,
.note-transcript__sheet-body {
  margin: 0;
  overflow-y: auto;
  padding: 22px 24px max(24px, env(safe-area-inset-bottom));
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.note-transcript__sheet-body {
  padding: 4px 2px 8px;
}

.note-finish-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
}

.note-finish-dialog {
  display: flex;
  width: min(460px, 100%);
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--border-visible);
  border-radius: 18px;
  padding: 26px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.note-finish-dialog__mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible);
}

.note-finish-dialog h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.note-finish-dialog > p {
  margin: 8px 0 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.note-finish-option {
  display: grid;
  min-height: 76px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 9px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 12px;
  color: var(--text-primary);
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.note-finish-option:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.note-finish-option:active {
  transform: translateY(1px) scale(0.99);
}

.note-finish-option > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border-visible);
  border-radius: 11px;
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.note-finish-option.is-primary {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.note-finish-option.is-primary > span {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--bg-card);
}

.note-finish-option div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.note-finish-option strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
}

.note-finish-option small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.note-finish-dialog__continue {
  min-height: 42px;
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.note-finish-dialog__continue:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-workspace--loading,
.note-workspace--missing {
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}

.note-loading-mark,
.note-missing__mark {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 24px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 72%);
}

.note-loading-mark > div,
.note-missing__mark > div {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible), var(--shadow-xs);
}

.note-loading-lines {
  display: flex;
  width: 170px;
  flex-direction: column;
  gap: 8px;
}

.note-loading-lines span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--bg-hover),
    var(--bg-elevated),
    var(--bg-hover)
  );
  background-size: 200% 100%;
  animation: note-loading-shimmer 1.2s ease-in-out infinite;
}

.note-loading-lines span:nth-child(2) {
  width: 82%;
  animation-delay: 80ms;
}

.note-loading-lines span:nth-child(3) {
  width: 62%;
  animation-delay: 160ms;
}

@keyframes note-loading-shimmer {
  to {
    background-position: -200% 0;
  }
}

.note-workspace--loading > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.note-missing {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.note-missing h1 {
  margin: 18px 0 0;
  color: var(--text-primary);
  font-size: 23px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.note-missing p {
  margin: 8px 0 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.note-missing > button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--text-primary);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.note-missing > button:hover {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

@media (max-width: 1080px) {
  .note-workspace__identity {
    display: none;
  }

  .note-action-button span {
    display: none;
  }

  .note-action-button {
    width: 44px;
    padding: 0;
  }

  .note-navigator {
    width: 288px;
    min-width: 268px;
    flex-basis: 288px;
  }
}

@media (max-width: 768px) {
  .note-workspace__topbar {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .note-workspace__topbar > .note-save-indicator {
    position: absolute;
    left: 50%;
    max-width: 130px;
    transform: translateX(-50%);
  }

  .note-workspace__topbar-left {
    gap: 2px;
  }

  .note-workspace__topbar-actions {
    gap: 2px;
  }

  .note-topbar-secondary {
    display: none;
  }

  .note-primary-action {
    width: 44px;
    padding: 0;
  }

  .note-primary-action span {
    display: none;
  }

  .note-save-indicator span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .note-navigator {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: min(88vw, 340px);
    min-width: 0;
    flex-basis: auto;
    padding-top: env(safe-area-inset-top);
    box-shadow: var(--shadow-lg);
  }

  .note-document-heading {
    gap: 10px;
    padding-bottom: 22px;
  }

  .note-document-title {
    min-height: 46px;
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .note-document-organize {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .note-document-select.app-select-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .note-document-meta__count {
    display: none !important;
  }

  .note-more-menu {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top));
    right: 8px;
    width: min(280px, calc(100vw - 16px));
  }
}

@media (max-width: 480px) {
  .note-workspace__topbar > .note-save-indicator {
    max-width: 92px;
    padding: 0 7px;
  }

  .note-save-indicator svg + span {
    font-size: 10px;
  }

  .note-document-meta {
    gap: 6px 10px;
  }

  .note-document-organize {
    grid-template-columns: 1fr;
  }

  .note-document-tags-trigger {
    justify-content: center;
  }

  .note-finish-dialog {
    padding: 22px 18px;
  }
}

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

@media print {
  .note-workspace {
    position: static;
    display: block;
    overflow: visible;
    color: var(--text-primary);
    background: var(--bg-primary);
  }

  .note-workspace__topbar,
  .note-navigator,
  .note-editor-toolbar,
  .note-editor-statusbar {
    display: none !important;
  }

  .note-workspace__body,
  .note-workspace__editor,
  .note-editor,
  .note-editor-scroll {
    display: block !important;
    overflow: visible !important;
  }

  .note-editor-document {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
.note-panel-sheet--inline {
  display: contents;
}

.note-panel-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay, 90);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.note-panel-sheet--mobile {
  display: flex;
  width: 100%;
  max-height: min(88dvh, 720px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  outline: none;
}

.note-panel-sheet__header {
  display: flex;
  min-height: 56px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px max(8px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border-visible);
}

.note-panel-sheet__heading {
  min-width: 0;
}

.note-panel-sheet__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.note-panel-sheet__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  line-height: 1.45;
}

.note-panel-sheet__close {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.note-panel-sheet__close:hover {
  border-color: var(--border-visible);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-panel-sheet__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-panel-sheet__body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 12px 12px max(16px, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .note-panel-sheet__close {
    transition: none;
  }
}
/* Note Copilot — docked assistant that reads and writes the current note. */

.note-copilot-dock {
  position: relative;
  z-index: 2;
  display: flex;
  width: 380px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border-visible);
  background: var(--bg-card);
}

.note-copilot {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-card);
  color: var(--text-primary);

  /* The composer takes the panel's own surface, so the capsule exists only as
     an outline: a true black line, dark enough to read against both themes.
     Declared once here, never as a raw hex further down. */
  --copilot-field-border: #000000;
  --copilot-field-border-focus: var(--accent);
}

.note-copilot--sheet {
  width: 100%;
}

/* Drag the left edge to widen the panel. Thin line, generous hit area. */
.note-copilot__resizer {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.note-copilot__resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: transparent;
  content: '';
  transition: background-color 150ms ease;
}

.note-copilot__resizer:hover::after,
.note-copilot__resizer:focus-visible::after,
.note-copilot-dock.is-resizing .note-copilot__resizer::after {
  background: color-mix(in srgb, var(--text-primary) 45%, transparent);
}

.note-copilot__resizer:focus-visible {
  outline: none;
}

/* Keep the cursor and kill text selection across the whole page while dragging. */
body.is-copilot-resizing {
  cursor: col-resize;
  user-select: none;
}

/* Header ------------------------------------------------------------------ */

.note-copilot__header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--border-visible);
}

.note-copilot__eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.note-copilot__header h2 {
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.note-copilot__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-copilot__icon-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.note-copilot__icon-button:hover {
  border-color: var(--border-visible);
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Messages ---------------------------------------------------------------- */

.note-copilot__messages {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px 16px 8px;
}

.note-copilot__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 12px;
  text-align: center;
}

.note-copilot__empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg-elevated)), var(--bg-elevated));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  color: var(--text-primary);
}

.note-copilot__empty h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.note-copilot__empty p {
  margin: 0;
  max-width: 290px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.note-copilot__brand-mark {
  display: block;
  width: 26px;
  height: auto;
}

/* Empty state doubles as the launcher: the same actions, given room. */
.note-copilot__suggestions {
  display: flex;
  width: 100%;
  max-width: 288px;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.note-copilot__suggestion {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.005em;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.note-copilot__suggestion:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.note-copilot__suggestion:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.note-copilot__suggestion-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.note-copilot__msg {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  gap: 8px;
}

/* Same structure as Norex Tutor: what you said sits in a pill, what the
   assistant says runs bare on the page. */
.note-copilot__text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-copilot__msg--assistant .note-copilot__text {
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

.note-copilot__msg--user .note-copilot__text {
  align-self: flex-end;
  max-width: 88%;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-hover);
}

.note-copilot__text--thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

/* Proposed edit ----------------------------------------------------------- */

.note-copilot__edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xs);
}

.note-copilot__edit.is-discarded {
  border-color: var(--border-visible);
  opacity: 0.6;
}

.note-copilot__edit-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-copilot__edit-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note-copilot__edit-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.note-copilot__preview {
  position: relative;
  overflow: hidden;
  max-height: 168px;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.note-copilot__preview.is-expanded {
  max-height: 460px;
  overflow-y: auto;
}

.note-copilot__preview::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42px;
  background: linear-gradient(180deg, transparent, var(--bg-primary));
  content: '';
  pointer-events: none;
}

.note-copilot__preview.is-expanded::after {
  content: none;
}

.note-copilot__preview > :first-child {
  margin-top: 0;
}

.note-copilot__preview > :last-child {
  margin-bottom: 0;
}

.note-copilot__preview h1,
.note-copilot__preview h2,
.note-copilot__preview h3,
.note-copilot__preview h4 {
  margin: 12px 0 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.note-copilot__preview p {
  margin: 0 0 8px;
}

/* Tailwind preflight strips list markers globally — restore them here. */
.note-copilot__preview ul,
.note-copilot__preview ol {
  margin: 0 0 8px;
  padding-left: 20px;
  list-style-position: outside;
}

.note-copilot__preview ul {
  list-style-type: disc;
}

.note-copilot__preview ol {
  list-style-type: decimal;
}

.note-copilot__preview li {
  margin: 0 0 4px;
}

.note-copilot__preview table {
  width: 100%;
  border-collapse: collapse;
}

.note-copilot__preview th,
.note-copilot__preview td {
  padding: 4px 8px;
  border: 1px solid var(--border-visible);
  text-align: left;
}

.note-copilot__preview img {
  max-width: 100%;
  height: auto;
}

.note-copilot__preview-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms ease;
}

.note-copilot__preview-toggle:hover {
  color: var(--text-primary);
}

.note-copilot__preview-toggle svg {
  transition: transform 150ms ease;
}

.note-copilot__edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.note-copilot__apply {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.note-copilot__apply:hover {
  background: var(--accent-hover);
}

.note-copilot__discard {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.note-copilot__discard:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot__applied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.note-copilot__discarded {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* Quick actions ----------------------------------------------------------- */

/* Wraps rather than scrolls: a hidden horizontal scroller buries actions.
   Only shown next to an existing thread, and only while the field is empty —
   they are suggestions, not permanent chrome. */
.note-copilot__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}

.note-copilot__chip {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.note-copilot__chip:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot__chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Selection hint ---------------------------------------------------------- */

.note-copilot__selection {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 8px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.note-copilot__selection svg {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

/* Composer ---------------------------------------------------------------- */

/* One pill, semicircular ends: the field and its single round button share the
   same capsule so nothing reads as a nested card. */
.note-copilot__composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 10px 16px max(12px, env(safe-area-inset-bottom));
  padding: 4px;
  /* Sits on the panel's own surface: only the outline draws the capsule. */
  background: transparent;
  border: 1px solid var(--copilot-field-border);
  border-radius: 999px;
  transition: border-color 150ms ease;
}

.note-copilot__composer:focus-within {
  border-color: var(--copilot-field-border-focus);
}

.note-copilot__composer.is-recording {
  border-color: var(--accent);
}

.note-copilot__composer textarea {
  min-height: 24px;
  max-height: 132px;
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

/* Past the max height the field scrolls; a chunky native bar would break the
   capsule, so it is reduced to a hairline. */
.note-copilot__composer textarea {
  scrollbar-width: thin;
  scrollbar-color: var(--border-visible) transparent;
}

.note-copilot__composer textarea::-webkit-scrollbar {
  width: 6px;
}

.note-copilot__composer textarea::-webkit-scrollbar-track {
  background: transparent;
}

.note-copilot__composer textarea::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--border-visible);
}

/* An empty field must stay exactly one line tall: a placeholder long enough to
   wrap in a narrow panel would otherwise raise a scrollbar over nothing. */
.note-copilot__composer textarea:placeholder-shown {
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-copilot__composer textarea::placeholder {
  color: var(--text-muted);
}

.note-copilot__composer textarea:focus {
  outline: none;
}

.note-copilot__composer textarea:disabled {
  opacity: 0.6;
}

.note-copilot__send {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.note-copilot__send:hover:not(:disabled) {
  background: var(--accent-hover);
}

.note-copilot__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Idle dictation is a secondary affordance, so it stays ghosted until it is
   actually recording. */
.note-copilot__send--mic.is-idle {
  background: transparent;
  color: var(--text-secondary);
}

.note-copilot__send--mic.is-idle:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot__send--mic.is-transcribing {
  background: transparent;
  color: var(--text-secondary);
}

.note-copilot__send--mic.is-recording {
  background: var(--accent);
  color: var(--accent-text);
  animation: note-copilot-pulse 1.6s ease-in-out infinite;
}

@keyframes note-copilot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-border);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-copilot__send--mic.is-recording {
    animation: none;
  }
}

/* `+` button, its menu, and pinned material ------------------------------- */

.note-copilot__plus {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.note-copilot__plus:hover:not(:disabled),
.note-copilot__plus.is-open {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot__plus.is-open {
  transform: rotate(45deg);
}

.note-copilot__plus:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.note-copilot-menu {
  position: fixed;
  z-index: 10050;
  padding: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background: var(--bg-popup);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 13px;
}

.note-copilot-menu__row {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.note-copilot-menu__row span {
  min-width: 0;
  flex: 1;
}

.note-copilot-menu__row svg {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.note-copilot-menu__row:hover,
.note-copilot-menu__row.is-open {
  background: var(--bg-hover);
}

.note-copilot-menu__row.is-active,
.note-copilot-menu__row.is-active svg {
  color: var(--text-primary);
}

.note-copilot-menu__chevron {
  transition: transform 150ms ease;
}

.note-copilot-menu__check {
  flex: 0 0 auto;
  color: var(--text-primary);
}

.note-copilot-menu__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border-visible);
}

/* The note list expands in place rather than flying out sideways: the panel is
   docked to the window edge, so a side submenu would have nowhere to go. */
.note-copilot-menu__notes {
  margin: 2px 0 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-visible);
}

.note-copilot-menu__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 6px;
  color: var(--text-muted);
}

.note-copilot-menu__search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}

.note-copilot-menu__search input:focus {
  outline: none;
}

.note-copilot-menu__notes-list {
  max-height: 208px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-visible) transparent;
}

.note-copilot-menu__note {
  display: block;
  width: 100%;
  padding: 7px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.note-copilot-menu__note:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot-menu__empty {
  margin: 0;
  padding: 8px 10px 10px;
  color: var(--text-muted);
  font-size: 12px;
}

/* What the next question carries: pinned files, notes, and the web toggle. */
.note-copilot__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px;
}

.note-copilot__attachment {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.005em;
}

.note-copilot__attachment--web {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-copilot__attachment svg {
  flex: 0 0 auto;
}

.note-copilot__attachment-name {
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-copilot__attachment button {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: background-color 120ms ease, opacity 120ms ease;
}

.note-copilot__attachment button:hover {
  background: var(--bg-hover);
  opacity: 1;
}

/* Echo of what a sent question carried, inside the user bubble. */
.note-copilot__msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.note-copilot__msg-attachment {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A citation inside the answer: a marker, not a printed URL. */
.note-copilot__cite {
  display: inline-block;
  margin: 0 1px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  vertical-align: 1px;
}

.note-copilot__cite:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Cited web results, each importable into the note ------------------------ */

.note-copilot__sources {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.note-copilot__sources-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Stacked, not side by side: at the panel's minimum width a title next to a
   button wraps to four lines. */
.note-copilot__source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 0;
  border-top: 1px solid var(--border-visible);
}

.note-copilot__source:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.note-copilot__source-text {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 2px;
}

.note-copilot__source-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-copilot__source-title svg {
  display: inline;
  margin-left: 4px;
  vertical-align: -1px;
}

.note-copilot__source-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.note-copilot__source-title svg {
  flex: 0 0 auto;
  opacity: 0.6;
}

.note-copilot__source-host {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.note-copilot__source-import {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  /* The accent is near-neutral on some themes, so an accent-tinted pill would
     read as disabled here; this one leans on the text colour instead. */
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.note-copilot__source-import:hover:not(:disabled) {
  border-color: var(--text-muted);
  background: var(--bg-elevated);
}

.note-copilot__source-import:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Windows paints the caption buttons (minimise / maximise / close) on top of
   every web layer, at the top-right of the window. In the note composer the
   dock runs full height and flush right, so its close and clear buttons would
   land underneath them. Inset the panel below that strip and hand the freed
   band to the window drag region, like the composer bar next to it.
   Keep 40px in sync with titleBarOverlay.height in electron/main/index.ts. */
body.electron-windows .note-composer > .note-copilot-dock {
  padding-top: 40px;
  -webkit-app-region: drag;
}

body.electron-windows .note-composer > .note-copilot-dock .note-copilot {
  flex: 1 1 auto;
  -webkit-app-region: no-drag;
}

/* The separator spans the drag band too — dragging it must resize, not move
   the window. */
body.electron-windows .note-composer > .note-copilot-dock .note-copilot__resizer {
  -webkit-app-region: no-drag;
}
/* Narrow desktop — the dock would starve the page, so it floats instead. */
@media (max-width: 1180px) {
  .note-copilot-dock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: var(--shadow-lg);
  }
}

@media print {
  .note-copilot-dock {
    display: none !important;
  }
}
/* Raccourcis outils + lecteur de lecture à voix haute, posés dans la note. */

.note-study-tools-menu {
  position: fixed;
  z-index: 10050;
  padding: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  background: var(--bg-popup);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 13px;
}

.note-study-tools-menu__lede {
  margin: 0;
  padding: 6px 10px 8px;
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.note-study-tools-menu__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.note-study-tools-menu__row:hover {
  background: var(--bg-hover);
}

.note-study-tools-menu__row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.note-study-tools-menu__ico {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
}

.note-study-tools-menu__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.note-study-tools-menu__name {
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.note-study-tools-menu__desc {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-study-tools-menu__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border-visible);
}

.note-study-tools-menu__all {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.note-study-tools-menu__all:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ─── Lecteur « écouter la note » ──────────────────────────────────────────── */

.note-read-aloud {
  position: fixed;
  z-index: 10040;
  right: 24px;
  bottom: 24px;
  left: auto;
  display: flex;
  width: min(520px, calc(100vw - 32px));
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-popup, var(--bg-card));
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.note-read-aloud__play {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: filter 150ms ease;
}

.note-read-aloud__play:hover:not(:disabled) {
  filter: brightness(1.08);
}

.note-read-aloud__play:disabled {
  cursor: progress;
  opacity: 0.65;
}

.note-read-aloud__skip {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.note-read-aloud__skip:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-read-aloud__skip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.note-read-aloud__main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
}

.note-read-aloud__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.005em;
}

.note-read-aloud__title {
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-read-aloud__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.note-read-aloud__scrub {
  width: 100%;
  height: 4px;
  padding: 0;
  border-radius: 999px;
  appearance: none;
  background: var(--border-visible);
  cursor: pointer;
}

.note-read-aloud__scrub::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: var(--text-primary);
}

.note-read-aloud__scrub::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 999px;
  background: var(--text-primary);
}

.note-read-aloud__scrub:disabled {
  cursor: default;
  opacity: 0.5;
}

.note-read-aloud__side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.note-read-aloud__speed {
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.note-read-aloud__speed:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-read-aloud__close {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.note-read-aloud__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.note-read-aloud__error {
  min-width: 0;
  flex: 1;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.note-read-aloud__retry {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .note-read-aloud {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }

  .note-read-aloud__skip {
    display: none;
  }
}

.note-read-aloud__spin {
  animation: note-read-aloud-spin 900ms linear infinite;
}

@keyframes note-read-aloud-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-read-aloud__spin {
    animation-duration: 2.4s;
  }
}
.note-composer {
  position: fixed;
  inset: var(--electron-titlebar-height, 0) 0 0;
  z-index: var(--z-mobile-chrome);
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  /* Notability-like workspace palette (always light on this screen) */
  --composer-panel-bg: #f5f6f8;
  --composer-stage-bg: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f6f8;
  --bg-card: #ffffff;
  --bg-hover: #eef0f3;
  --bg-elevated: #ffffff;
  --text-primary: #1a1a1b;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --icon-color: #5f6368;
  --border-visible: #e3e5e8;
  --border-hover: #cfd3d8;
  --accent: #6b8afd;
  --accent-hover: #5a7aef;
  --accent-text: #ffffff;
  --accent-subtle: color-mix(in srgb, #6b8afd 10%, transparent);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 24px 56px rgba(0, 0, 0, 0.18);
  --composer-danger: #d93025;

  color: var(--text-primary);
  background: var(--composer-stage-bg);
}

.note-composer button,
.note-composer input {
  font: inherit;
}

/* ── Sources panel ─────────────────────────────────────────────── */

.note-composer-panel {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--composer-panel-bg);
}

.note-composer-panel__inner {
  display: flex;
  width: 276px;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 16px;
}

.note-composer-panel__head {
  display: grid;
  min-height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
}

body.electron-windows .note-composer-panel__head {
  -webkit-app-region: drag;
}

body.electron-windows .note-composer-panel__head button {
  -webkit-app-region: no-drag;
}

.note-composer-panel__title {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-composer-icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.note-composer-icon-button:hover:not(:disabled) {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-icon-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.note-composer-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.note-composer-new-button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #0a0a0a;
  border-radius: 12px;
  color: #ffffff;
  background: #0a0a0a;
  box-shadow: 0 8px 18px color-mix(in srgb, #000000 24%, transparent);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.note-composer-new-button:hover:not(:disabled) {
  border-color: #1a1a1a;
  background: #1a1a1a;
}

.note-composer-new-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

.note-composer-new-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.note-composer-search {
  display: grid;
  min-height: 40px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--text-muted);
  background: var(--composer-stage-bg);
  transition: border-color 180ms ease;
}

.note-composer-search:focus-within {
  border-color: var(--border-hover);
}

.note-composer-search input {
  min-width: 0;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 13px;
  outline: none;
}

.note-composer-search input::placeholder {
  color: var(--text-muted);
}

.note-composer-search__clear {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.note-composer-search__clear:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-panel__scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.note-composer-panel__section {
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  padding: 8px 6px 6px;
  background: var(--composer-stage-bg);
}

.note-composer-panel__scroll > .note-composer-panel__section .note-composer-section-label:first-child {
  margin-top: 0;
}

.note-composer-section-label {
  margin: 12px 0 6px;
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.note-composer-panel__scroll > .note-composer-section-label:first-child {
  margin-top: 0;
}

.note-composer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-composer-list button {
  display: grid;
  width: 100%;
  min-height: 36px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 9px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.note-composer-list button:hover {
  border-color: transparent;
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-list button.is-active {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-list svg {
  color: var(--icon-color);
}

.note-composer-list__label {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-composer-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.note-composer-panel__empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border-visible);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-muted);
}

.note-composer-panel__empty svg {
  color: var(--text-muted);
}

.note-composer-panel__empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* ── Stage ─────────────────────────────────────────────────────── */

.note-composer-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--composer-stage-bg);
}

.note-composer-stage__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 64px;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}

body.electron-windows .note-composer-stage__bar {
  padding-right: 150px;
  -webkit-app-region: drag;
}

body.electron-windows .note-composer-stage__bar button,
body.electron-windows .note-composer-stage__bar input {
  -webkit-app-region: no-drag;
}

.note-composer-stage__bar-left,
.note-composer-stage__bar-right {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
}

.note-composer-stage__bar-left {
  justify-self: start;
}

.note-composer-stage__bar-right {
  justify-self: end;
}

.note-composer-course-select.app-select-trigger {
  width: auto;
  min-width: 128px;
  max-width: min(200px, 34vw);
  min-height: 34px;
  margin-left: 4px;
  padding: 6px 12px !important;
  border-color: var(--border-visible);
  background: var(--composer-stage-bg);
  font-size: 13px !important;
}

.note-composer-stage__scroll {
  container-type: inline-size;
  container-name: composer-stage;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.note-composer-stage__scroll--workspace {
  display: flex;
  overflow: hidden;
}

.note-composer-workspace {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.note-composer-editor-pane {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.note-composer-stage__actions {
  display: contents;
}

.note-canvas-rail {
  position: absolute;
  top: 12px;
  right: clamp(12px, 3vw, 32px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Hosted in the stage bar: the rail sits inline with the other actions. */
.note-canvas-rail--inline {
  position: static;
  top: auto;
  right: auto;
}

.note-rail-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.note-rail-button:hover:not(:disabled) {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-rail-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-rail-button[aria-pressed='true'] {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.note-rail-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.note-rail-more {
  position: relative;
}

.note-composer-editor-pane .note-document-heading--minimal {
  gap: 0;
  padding: 0 0 12px;
  border-bottom: 0;
}

.note-composer-editor-pane .note-document-title {
  min-height: 72px;
  font-size: clamp(2.75rem, 4.4vw, 3.9rem);
  letter-spacing: -0.04em;
}

@media (max-width: 768px) {
  .note-composer-editor-pane .note-document-title {
    min-height: 54px;
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }
}

.note-rail-spinner {
  animation: note-rail-spin 900ms linear infinite;
}

@keyframes note-rail-spin {
  to {
    transform: rotate(360deg);
  }
}

.note-composer-editor-pane--loading {
  display: flex;
  min-height: 240px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.note-composer-editor-pane .note-workspace__editor {
  min-height: 0;
  flex: 1 1 auto;
}

.note-composer-hero,
.note-composer-staged,
.note-composer-loading,
.note-composer-processing {
  display: flex;
  width: min(900px, calc(100% - 48px));
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 24px 0 56px;
  text-align: center;
}

.note-composer-mark {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 28px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.note-composer-mark > div {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--border-visible);
  border-radius: 18px;
  color: var(--accent);
  background: var(--composer-stage-bg);
  box-shadow: var(--shadow-xs);
}

.note-composer-hero h1,
.note-composer-staged h1,
.note-composer-processing h1 {
  margin: 18px 0 0;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}

.note-composer-hero > p,
.note-composer-staged > p,
.note-composer-loading > p,
.note-composer-processing > p {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1.6;
  text-wrap: pretty;
}

.note-composer-kicker {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.note-composer-processing h1 {
  margin-top: 8px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

/* ── Start picker (Google Workspace style) ─────────────────────── */

.note-composer-picker {
  display: grid;
  width: 100%;
  max-width: 620px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.note-composer-picker-card {
  display: flex;
  width: 100%;
  min-height: 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  padding: 28px 18px 24px;
  background: var(--composer-stage-bg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.note-composer-picker-card:hover {
  border-color: var(--border-hover);
  background: var(--composer-stage-bg);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.note-composer-picker-card:active {
  transform: translateY(0) scale(0.99);
}

.note-composer-picker-card--write {
  --picker-tint: #1a73e8;
  --picker-tint-bg: color-mix(in srgb, #1a73e8 14%, transparent);
}

.note-composer-picker-card--audio {
  --picker-tint: #ea4335;
  --picker-tint-bg: color-mix(in srgb, #ea4335 14%, transparent);
}

.note-composer-picker-card--import {
  --picker-tint: #34a853;
  --picker-tint-bg: color-mix(in srgb, #34a853 14%, transparent);
}

.note-composer-picker-card--youtube {
  --picker-tint: #e8710a;
  --picker-tint-bg: color-mix(in srgb, #e8710a 14%, transparent);
}

.note-composer-picker-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 14px;
  color: var(--picker-tint);
  background: var(--picker-tint-bg);
  transition: transform 180ms ease;
}

.note-composer-picker-card:hover .note-composer-picker-card__icon {
  transform: scale(1.06);
}

.note-composer-picker-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
}

.note-composer-picker-card__body strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.note-composer-picker-card__body span {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.note-composer-picker-card__chevron {
  display: none;
}

/* Below three comfortable columns, fall back to a single column. */
@container composer-stage (max-width: 640px) {
  .note-composer-picker {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .note-composer-picker-card {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 14px 16px;
    text-align: left;
  }

  .note-composer-picker-card__icon {
    width: 48px;
    height: 48px;
  }

  .note-composer-picker-card__body {
    align-items: flex-start;
    margin-top: 0;
  }

  .note-composer-picker-card__chevron {
    display: block;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
  }

  .note-composer-picker-card:hover .note-composer-picker-card__chevron {
    opacity: 1;
    color: var(--text-secondary);
    transform: translateX(0);
  }
}

/* ── Link step ───────────────────────────────────── */

.note-composer-link {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.note-composer-link input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 0 16px;
  color: var(--text-primary);
  background: var(--composer-stage-bg);
  font-size: 15px;
  letter-spacing: 0.005em;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.note-composer-link input::placeholder {
  color: var(--text-muted);
}

.note-composer-link input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.note-composer-link input[aria-invalid='true'] {
  border-color: var(--composer-danger);
}

.note-composer-link__error {
  margin: 0;
  color: var(--composer-danger);
  font-size: 13px;
  letter-spacing: 0.005em;
  text-align: left;
}

.note-composer-link__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.note-composer-link__actions .note-composer-primary-button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* ── Start picker dialog ────────────────────────────── */

.note-composer-start {
  position: fixed;
  z-index: var(--z-popover);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--text-primary) 34%, transparent);
}

.note-composer-start__dialog {
  position: relative;
  display: flex;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  border: 1px solid var(--border-visible);
  border-radius: 24px;
  padding: 32px 32px 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.note-composer-start__dialog .note-composer-mark {
  width: 64px;
  height: 64px;
  border-radius: 22px;
}

.note-composer-start__dialog .note-composer-mark > div {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.note-composer-start__dialog .note-composer-mark svg {
  width: 22px;
  height: 22px;
}

.note-composer-start__dialog h2 {
  margin: 16px 0 0;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.15;
  text-wrap: balance;
}

.note-composer-start__dialog > p {
  max-width: 420px;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.005em;
  line-height: 1.6;
  text-wrap: pretty;
}

.note-composer-picker--dialog {
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.note-composer-picker--dialog .note-composer-picker-card {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
}

.note-composer-picker--dialog .note-composer-picker-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.note-composer-picker--dialog .note-composer-picker-card__body {
  align-items: flex-start;
  margin-top: 0;
}

.note-composer-picker--dialog .note-composer-picker-card__chevron {
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

.note-composer-picker--dialog .note-composer-picker-card:hover .note-composer-picker-card__chevron {
  color: var(--text-secondary);
  opacity: 1;
  transform: translateX(0);
}

.note-composer-start__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.note-composer-start__close:hover {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-start__dismiss {
  margin-top: 20px;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.005em;
  transition: color 160ms ease, background-color 160ms ease;
}

.note-composer-start__dismiss:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.note-composer-start__close:focus-visible,
.note-composer-start__dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .note-composer-start__dialog {
    padding: 28px 20px 20px;
  }

  .note-composer-start__dialog h2 {
    font-size: 1.4rem;
  }
}

/* ── Buttons ───────────────────────────────────────────────────── */

.note-composer-primary-button,
.note-composer-secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.note-composer-primary-button {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}

.note-composer-primary-button:hover:not(:disabled) {
  background: var(--accent-hover);
}

.note-composer-secondary-button {
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
  background: var(--bg-card);
}

.note-composer-secondary-button:hover:not(:disabled) {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-primary-button:active:not(:disabled),
.note-composer-secondary-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.note-composer-primary-button:disabled,
.note-composer-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.note-composer-ghost-pill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.note-composer-ghost-pill:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-ghost-pill svg {
  color: var(--text-muted);
}

.note-composer-icon-button:focus-visible,
.note-composer-new-button:focus-visible,
.note-composer-picker-card:focus-visible,
.note-composer-primary-button:focus-visible,
.note-composer-secondary-button:focus-visible,
.note-composer-ghost-pill:focus-visible,
.note-composer-list button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Staged file ───────────────────────────────────────────────── */

.note-composer-file {
  display: grid;
  width: min(520px, 100%);
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  border: 1px solid var(--border-visible);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  text-align: left;
}

.note-composer-file > svg {
  color: var(--text-secondary);
}

.note-composer-file strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-composer-file span {
  color: var(--text-muted);
  font-size: 12px;
}

.note-composer-file button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.note-composer-file button:hover {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-staged__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* ── Processing ────────────────────────────────────────────────── */

.note-composer-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.note-composer-steps span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
}

.note-composer-steps span.is-active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.note-composer-steps span.is-done {
  color: var(--text-secondary);
}

.note-composer-steps span.is-done svg {
  color: var(--text-secondary);
}

.note-composer-spin {
  animation: note-composer-spin 700ms linear infinite;
}

@keyframes note-composer-spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-height: 820px) {
  .note-composer-mark {
    width: 64px;
    height: 64px;
    border-radius: 22px;
  }

  .note-composer-mark > div {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .note-composer-mark svg {
    width: 22px;
    height: 22px;
  }

  .note-composer-hero h1 {
    margin-top: 12px;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  }

  .note-composer-picker {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-composer *,
  .note-composer *::before,
  .note-composer *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Onglets « Ma note » / « Version IA » au-dessus du canevas. */
.note-composer-viewbar {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 10px 20px 4px;
}

/* Le sélecteur de vue reste centré sur l'écran, quelle que soit la barre —
   décalé d'un cran vers la gauche pour compenser la rangée d'actions à droite,
   qui tire l'équilibre visuel de ce côté. */
.note-composer-stage__bar-center {
  display: flex;
  min-width: 0;
  justify-content: center;
  justify-self: center;
  transform: translateX(-24px);
}

@media (max-width: 900px) {
  .note-composer-stage__bar-center {
    transform: none;
  }
}

.note-composer-loading > p {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 14px;
}
.note-backlinks-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: none;
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  cursor: default;
}

.note-backlinks {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(360px, 100vw);
  height: 100%;
  padding: 20px 20px 28px;
  border-left: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

.note-backlinks--sheet {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.note-backlinks__header button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.note-backlinks__unlinked {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-visible);
}

.note-backlinks__unlinked-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-backlinks__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.note-backlinks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.note-backlinks__header h2 {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.note-backlinks__header button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.note-backlinks__header button:hover {
  background: var(--bg-hover);
}

.note-backlinks__muted,
.note-backlinks__empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.note-backlinks__hint {
  margin-top: 8px !important;
  font-size: 13px !important;
}

.note-backlinks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.note-backlinks__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.note-backlinks__item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-border);
}

.note-backlinks__item strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.note-backlinks__item span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-backlinks__unlinked {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-visible);
}

.note-backlinks__unlinked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.note-backlinks__unlinked-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.note-backlinks__link-all,
.note-backlinks__convert {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.note-backlinks__link-all:hover,
.note-backlinks__convert:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.note-backlinks__unlinked-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.note-backlinks__unlinked-row .note-backlinks__item {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .note-backlinks {
    width: 100vw;
  }
}
.photo-reader-workspace {
  position: fixed;
  inset: var(--electron-titlebar-height, 0) 0 0;
  z-index: var(--z-mobile-chrome);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 50% -8%, var(--accent-subtle), transparent 32rem),
    var(--bg-primary);
}

.photo-reader-workspace button,
.photo-reader-workspace input {
  font: inherit;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.photo-reader-topbar {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 64px;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid var(--border-visible);
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-primary));
  box-shadow: var(--shadow-xs);
}

body.electron-windows .photo-reader-topbar {
  padding-right: 150px;
}

body.electron-windows .photo-reader-topbar button,
body.electron-windows .photo-reader-topbar input,
body.electron-windows .photo-reader-topbar [role='button'] {
  -webkit-app-region: no-drag;
}

.photo-reader-topbar__left,
.photo-reader-topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.photo-reader-topbar__actions {
  justify-content: flex-end;
}

.photo-reader-topbar__course {
  width: min(240px, 30vw);
}

.photo-reader-course-select.app-select-trigger {
  width: 100%;
  border-color: var(--border-visible);
  background: var(--bg-primary);
}

.photo-reader-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.photo-reader-identity span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
}

.photo-reader-identity strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.photo-reader-icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.photo-reader-icon-button:hover:not(:disabled) {
  border-color: var(--border-visible);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.photo-reader-icon-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.photo-reader-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.photo-reader-primary-button,
.photo-reader-secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.photo-reader-primary-button {
  border: 1px solid var(--accent);
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}

.photo-reader-primary-button:hover:not(:disabled) {
  background: var(--accent-hover);
}

.photo-reader-secondary-button {
  border: 1px solid var(--border-visible);
  color: var(--text-secondary);
  background: var(--bg-card);
}

.photo-reader-secondary-button:hover:not(:disabled) {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.photo-reader-primary-button:active:not(:disabled),
.photo-reader-secondary-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.photo-reader-primary-button:disabled,
.photo-reader-secondary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.photo-reader-workspace button:focus-visible,
.photo-reader-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Main / capture stage ─────────────────────────────────────────────────── */

.photo-reader-main {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.photo-reader-stage {
  display: flex;
  width: min(880px, calc(100% - 48px));
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 48px 0 72px;
  text-align: center;
}

.photo-reader-layered-icon {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 30px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.photo-reader-layered-icon::before {
  position: absolute;
  inset: 5px;
  content: '';
  border: 1px solid var(--accent-border);
  border-radius: 26px;
  opacity: 0.7;
}

.photo-reader-layered-icon > div {
  position: relative;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 19px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible), var(--shadow-sm);
}

.photo-reader-kicker,
.photo-reader-processing > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.photo-reader-stage h1,
.photo-reader-processing h1 {
  margin: 8px 0 0;
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.photo-reader-stage > p,
.photo-reader-processing > p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1.65;
  text-wrap: pretty;
}

.photo-reader-dropzone {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  border: 1px dashed var(--border-visible);
  border-radius: 20px;
  padding: 32px 24px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-secondary));
  box-shadow: inset 0 1px 0 var(--border-visible);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.photo-reader-dropzone.is-dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-subtle) 40%, var(--bg-card));
}

.photo-reader-dropzone__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 6px;
  border: 1px solid var(--accent-border);
  border-radius: 15px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible);
}

.photo-reader-dropzone strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.photo-reader-dropzone > span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.photo-reader-dropzone__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.photo-reader-benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.photo-reader-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--text-secondary);
  background: var(--accent-subtle);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.photo-reader-benefits svg {
  color: var(--accent);
}

.photo-reader-error {
  margin: 22px 0 0;
  color: var(--status-down);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Processing ───────────────────────────────────────────────────────────── */

.photo-reader-processing {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 72px;
  text-align: center;
}

.photo-reader-processing__mark {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 30px;
  background: radial-gradient(circle, var(--accent-subtle), transparent 70%);
}

.photo-reader-processing__mark > div {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 19px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible), var(--shadow-sm);
}

.photo-reader-processing__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.photo-reader-processing__steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--text-muted);
  background: var(--bg-card);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.photo-reader-processing__steps span.is-active {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

/* ── Reader layout ────────────────────────────────────────────────────────── */

.photo-reader-layout {
  display: grid;
  width: min(1320px, calc(100% - 48px));
  min-height: 100%;
  grid-template-areas:
    'canvas script'
    'player player';
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 20px;
  margin: 0 auto;
  padding: 24px 0 32px;
}

.photo-reader-canvas {
  display: flex;
  min-width: 0;
  grid-area: canvas;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  padding: 18px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-secondary));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-visible);
}

/* Shrink-wraps the rendered photo so the overlay boxes land on the right pixels. */
.photo-reader-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  line-height: 0;
}

.photo-reader-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(62vh, 720px);
}

.photo-reader-overlay {
  position: absolute;
  inset: 0;
}

.photo-reader-box {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.photo-reader-box:hover {
  border-color: var(--reading-marker-strong);
  background: color-mix(in srgb, var(--reading-marker) 40%, transparent);
}

/* Reads like a marker stroke on the page rather than a scrim over it. */
.photo-reader-box.is-active {
  border-color: var(--reading-marker-strong);
  background: var(--reading-marker);
  box-shadow:
    0 0 0 1px var(--reading-marker-strong),
    0 6px 22px color-mix(in srgb, var(--reading-marker-strong) 35%, transparent);
}

/* ── Script pane ──────────────────────────────────────────────────────────── */

.photo-reader-script {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-area: script;
  flex-direction: column;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-visible);
}

.photo-reader-script > header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-visible);
  padding: 16px 18px;
}

.photo-reader-script__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-subtle), var(--bg-elevated));
  box-shadow: inset 0 1px 0 var(--border-visible);
}

.photo-reader-script__icon + div {
  min-width: 0;
  flex: 1 1 auto;
}

.photo-reader-script > header span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.photo-reader-script > header h2 {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-reader-count {
  flex: 0 0 auto;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text-muted) !important;
  background: var(--bg-primary);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.photo-reader-script__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 12px;
  scrollbar-color: var(--border-visible) transparent;
  scrollbar-width: thin;
}

.photo-reader-line {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.005em;
  line-height: 1.65;
  text-align: left;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.photo-reader-line:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.photo-reader-line.is-active {
  border-color: var(--accent-border);
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.photo-reader-line--title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.photo-reader-line--formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

.photo-reader-line--list {
  padding-left: 22px;
  text-indent: -11px;
}

.photo-reader-line .is-spoken {
  border-radius: 4px;
  background: var(--reading-marker-text);
  box-shadow: 0 0 0 2px var(--reading-marker-text);
  color: var(--text-primary);
}

/* ── Player ───────────────────────────────────────────────────────────────── */

.photo-reader-player {
  display: grid;
  grid-area: player;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 18px;
  border: 1px solid var(--border-visible);
  border-radius: 20px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-secondary));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-visible);
}

.photo-reader-transport {
  display: flex;
  align-items: center;
  gap: 4px;
}

.photo-reader-play {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.photo-reader-play:hover:not(:disabled) {
  background: var(--accent-hover);
}

.photo-reader-play:active:not(:disabled) {
  transform: scale(0.96);
}

.photo-reader-play:disabled {
  border-color: var(--border-visible);
  color: var(--text-muted);
  background: var(--bg-hover);
  cursor: not-allowed;
}

.photo-reader-progress {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.photo-reader-progress span {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.photo-reader-track {
  position: relative;
  height: 8px;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 999px;
  background: var(--bg-hover);
  cursor: pointer;
}

.photo-reader-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--accent);
}

.photo-reader-track b {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  transform: translate(-1px, -50%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

.photo-reader-settings {
  display: flex;
  align-items: center;
  gap: 14px;
}

.photo-reader-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.photo-reader-voice-select.app-select-trigger {
  width: 168px;
  border-color: var(--border-visible);
  background: var(--bg-primary);
}

.photo-reader-speeds {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  color: var(--text-muted);
  background: var(--bg-primary);
}

.photo-reader-speeds button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.photo-reader-speeds button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.photo-reader-speeds button.is-active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-subtle);
}

.photo-reader-status {
  display: flex;
  align-items: center;
  gap: 7px;
  grid-column: 1 / -1;
  margin: 0;
  min-height: 18px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.photo-reader-status svg {
  color: var(--accent);
}

.photo-reader-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 12px;
}

.photo-reader-retry:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.photo-reader-spin {
  animation: photo-reader-spin 700ms linear infinite;
}

@keyframes photo-reader-spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .photo-reader-layout {
    grid-template-areas:
      'canvas'
      'script'
      'player';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .photo-reader-script__body {
    max-height: 320px;
  }
}

@media (max-width: 960px) {
  .photo-reader-identity {
    display: none;
  }

  .photo-reader-secondary-button span {
    display: none;
  }
}

@media (max-width: 768px) {
  .photo-reader-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .photo-reader-stage,
  .photo-reader-layout {
    width: calc(100% - 28px);
  }

  .photo-reader-canvas {
    padding: 10px;
  }

  .photo-reader-frame img {
    max-height: 46vh;
  }

  .photo-reader-player {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .photo-reader-progress {
    width: 100%;
  }

  .photo-reader-settings {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-reader-workspace *,
  .photo-reader-workspace *::before,
  .photo-reader-workspace *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
.smart-import-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--bg-primary) 82%,transparent)}
.smart-import-dialog{width:min(680px,100%);max-height:min(780px,calc(100dvh - 48px));display:flex;flex-direction:column;overflow:hidden;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-visible);border-radius:16px;box-shadow:var(--shadow-xl)}
.smart-import-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 24px 20px;flex:0 0 auto}
.smart-import-header__identity{display:flex;align-items:center;gap:16px;min-width:0}
.smart-import-header__copy{min-width:0}.smart-import-eyebrow,.smart-import-results-heading__eyebrow{display:block;margin-bottom:4px;color:var(--text-muted);font-size:11px;font-weight:650;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.smart-import-header h2{margin:0;color:var(--text-primary);font-size:22px;font-weight:650;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}.smart-import-header__copy>p{max-width:48ch;margin:5px 0 0;color:var(--text-secondary);font-size:14px;line-height:1.55;letter-spacing:.005em;text-wrap:pretty}
.smart-import-close,.smart-import-preview__remove{display:grid;place-items:center;color:var(--text-secondary);background:transparent;border:1px solid var(--border-visible);cursor:pointer;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,transform 160ms ease}.smart-import-close{width:44px;height:44px;flex:0 0 44px;border-radius:12px}.smart-import-close:hover,.smart-import-preview__remove:hover{color:var(--text-primary);background:var(--bg-hover);border-color:color-mix(in srgb,var(--text-muted) 52%,var(--border-visible))}.smart-import-close:active,.smart-import-preview__remove:active{transform:scale(.96)}
.smart-import-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 24px 20px;border-bottom:1px solid var(--border-visible);flex:0 0 auto}.smart-import-tab{position:relative;min-height:72px;display:flex;align-items:center;gap:11px;padding:12px;overflow:hidden;color:var(--text-secondary);text-align:left;background:transparent;border:1px solid var(--border-visible);border-radius:12px;cursor:pointer;transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease,transform 180ms ease}.smart-import-tab:hover{color:var(--text-primary);background:var(--bg-hover);border-color:color-mix(in srgb,var(--text-muted) 48%,var(--border-visible));transform:translateY(-1px)}.smart-import-tab:active{transform:scale(.985)}.smart-import-tab.is-active{color:var(--text-primary);background:var(--accent-subtle);border-color:var(--accent-border)}
.smart-import-tab__icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;color:var(--text-muted);background:linear-gradient(145deg,var(--bg-elevated),var(--bg-hover));border:1px solid var(--border-visible);border-radius:10px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-primary) 6%,transparent);transition:color 180ms ease,background 180ms ease,border-color 180ms ease}.smart-import-tab.is-active .smart-import-tab__icon{color:var(--accent-text);background:linear-gradient(145deg,var(--accent-hover),var(--accent));border-color:color-mix(in srgb,var(--accent-text) 12%,var(--accent))}.smart-import-tab__copy{display:flex;flex-direction:column;gap:3px;min-width:0}.smart-import-tab__label,.smart-import-tab__sub{overflow:hidden;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.smart-import-tab__label{font-size:13px;font-weight:650}.smart-import-tab__sub{color:var(--text-muted);font-size:11px;font-weight:500}.smart-import-tab__indicator{position:absolute;right:12px;bottom:0;left:12px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.smart-import-content{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 24px}.smart-import-flow{display:flex;flex-direction:column;gap:16px}.smart-import-intro{margin:0;padding:12px 14px;color:var(--text-secondary);font-size:14px;line-height:1.6;letter-spacing:.005em;background:color-mix(in srgb,var(--bg-secondary) 78%,transparent);border-left:2px solid var(--accent-border);border-radius:0 10px 10px 0;text-wrap:pretty}.smart-import-field{display:flex;flex-direction:column;gap:8px}.smart-import-label{color:var(--text-secondary);font-size:14px;font-weight:600;line-height:1.3}
.smart-import-dropzone{position:relative;min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px;overflow:hidden;color:var(--text-secondary);text-align:center;background:var(--bg-card);border:1.5px dashed color-mix(in srgb,var(--text-muted) 42%,var(--border-visible));border-radius:12px;cursor:pointer;transition:color 180ms ease,border-color 180ms ease,transform 180ms ease}.smart-import-dropzone:hover,.smart-import-dropzone.is-dragging{color:var(--text-primary);border-color:var(--accent-border);transform:translateY(-1px)}.smart-import-dropzone__label,.smart-import-dropzone__hint{position:relative}.smart-import-dropzone__label{color:var(--text-primary);font-size:14px;font-weight:600;line-height:1.35}.smart-import-dropzone__hint{color:var(--text-muted);font-size:12px;line-height:1.35}.smart-import-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.smart-import-preview{position:relative;overflow:hidden;background:var(--bg-primary);border:1px solid var(--border-visible);border-radius:12px}.smart-import-preview img{display:block;width:100%;max-height:200px;object-fit:cover}.smart-import-preview__remove{position:absolute;top:8px;right:8px;width:36px;height:36px;color:var(--text-primary);background:var(--bg-card);border-radius:10px;box-shadow:var(--shadow-sm)}
.smart-import-textarea{width:100%;min-height:132px;padding:14px 16px;color:var(--text-primary);font:inherit;font-size:14px;line-height:1.55;resize:vertical;background:var(--input-bg,var(--bg-primary));border:1px solid var(--border-visible);border-radius:12px;outline:none;transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease}.smart-import-textarea--schedule{min-height:144px}.smart-import-textarea--theory{min-height:168px}.smart-import-textarea::placeholder{color:var(--text-muted)}.smart-import-textarea:hover{border-color:color-mix(in srgb,var(--text-muted) 46%,var(--border-visible))}.smart-import-textarea:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-subtle)}.smart-import-counter{margin:-8px 0 0;color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}
.smart-import-primary{width:100%;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;color:var(--btn-primary-text);font-size:14px;font-weight:650;letter-spacing:.005em;background:var(--btn-primary-bg);border:1px solid var(--btn-primary-bg);border-radius:12px;box-shadow:var(--shadow-xs);cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease,opacity 160ms ease}.smart-import-primary:hover:not(:disabled){background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.smart-import-primary:active:not(:disabled){transform:scale(.99)}.smart-import-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.smart-import-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.smart-import-results-heading p{margin:0;color:var(--text-primary);font-size:15px;font-weight:650;line-height:1.35}.smart-import-reset{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--text-muted);font-size:12px;font-weight:550;background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease}.smart-import-reset:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-visible)}.smart-import-reset--push{margin-left:auto}.smart-import-results-list{max-height:320px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:1px}.smart-import-results-list--deadlines{max-height:300px}
.smart-import-result{width:100%;display:flex;align-items:flex-start;gap:12px;padding:14px;color:var(--text-primary);text-align:left;background:var(--bg-primary);border:1px solid var(--border-visible);border-radius:12px;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease}.smart-import-result:hover{background:var(--bg-hover);border-color:color-mix(in srgb,var(--text-muted) 48%,var(--border-visible));transform:translateY(-1px)}.smart-import-result.is-selected{background:var(--accent-subtle);border-color:var(--accent-border);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-primary) 4%,transparent)}.smart-import-check{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;margin-top:1px;color:transparent;background:transparent;border:1.5px solid var(--border-visible);border-radius:6px;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease}.smart-import-result.is-selected .smart-import-check{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.smart-import-result__content{flex:1;min-width:0}.smart-import-result__title-row,.smart-import-badges,.smart-import-result__meta,.smart-import-result__date{display:flex;align-items:center}.smart-import-result__title-row{gap:8px}.smart-import-course-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;box-shadow:0 0 0 2px var(--bg-card)}
.smart-import-result__title{min-width:0;overflow:hidden;color:var(--text-primary);font-size:14px;font-weight:650;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.smart-import-result__title--standalone{margin:7px 0 0;overflow:visible;white-space:normal}.smart-import-code{flex:0 0 auto;padding:2px 6px;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums;background:var(--bg-secondary);border:1px solid var(--border-visible);border-radius:6px}.smart-import-result__meta,.smart-import-result__date{gap:6px;margin:5px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.4}.smart-import-result__date{color:var(--text-primary);font-variant-numeric:tabular-nums}.smart-import-result__description{margin:5px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5;text-wrap:pretty}.smart-import-badges{flex-wrap:wrap;gap:6px}.smart-import-badge{padding:3px 7px;color:var(--text-primary);font-size:10px;font-weight:650;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;background:var(--accent-subtle);border:1px solid var(--accent-border);border-radius:6px}.smart-import-badge--muted{color:var(--text-secondary);background:var(--bg-secondary);border-color:var(--border-visible)}
.smart-import-chapters{display:flex;flex-wrap:wrap;gap:8px}.smart-import-chapter,.smart-import-include{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;color:var(--text-secondary);font-size:12px;font-weight:600;background:var(--bg-secondary);border:1px solid var(--border-visible);border-radius:9px;cursor:pointer;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,transform 160ms ease}.smart-import-chapter:hover,.smart-import-include:hover{color:var(--text-primary);background:var(--bg-hover)}.smart-import-chapter.is-active{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}.smart-import-chapter.is-selected:not(.is-active){border-color:var(--accent-border)}.smart-import-chapter-actions{display:flex;align-items:center;gap:8px}.smart-import-include{gap:6px;background:transparent}.smart-import-include.is-selected{color:var(--text-primary);background:var(--accent-subtle);border-color:var(--accent-border)}.smart-import-selection-count{color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}
.smart-import-summary{max-height:260px;overflow-y:auto;padding:16px;background:var(--bg-primary);border:1px solid var(--border-visible);border-radius:12px}.smart-import-summary__title{margin:0 0 10px;color:var(--text-primary);font-size:12px;font-weight:650;line-height:1.4;letter-spacing:.04em;text-transform:uppercase}.smart-import-summary__content{margin:0;color:var(--text-secondary);font:inherit;font-size:13px;line-height:1.65;white-space:pre-wrap}
.smart-import-close:focus-visible,.smart-import-tab:focus-visible,.smart-import-dropzone:focus-visible,.smart-import-preview__remove:focus-visible,.smart-import-primary:focus-visible,.smart-import-reset:focus-visible,.smart-import-result:focus-visible,.smart-import-chapter:focus-visible,.smart-import-include:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){.smart-import-backdrop{align-items:flex-end;padding:0}.smart-import-dialog{width:100%;max-height:calc(100dvh - 12px);border-right:0;border-bottom:0;border-left:0;border-radius:16px 16px 0 0}.smart-import-header{padding:20px 16px 16px}.smart-import-header h2{font-size:19px}.smart-import-header__copy>p{display:none}.smart-import-tabs{gap:6px;padding:0 16px 16px}.smart-import-tab{min-height:68px;flex-direction:column;justify-content:center;gap:6px;padding:9px 6px;text-align:center}.smart-import-tab__icon{width:32px;height:32px;flex-basis:32px}.smart-import-tab__sub{display:none}.smart-import-content{padding:16px 16px 24px}.smart-import-intro{font-size:13px}.smart-import-dropzone{min-height:128px;padding:20px 14px}.smart-import-chapter-actions{flex-wrap:wrap}.smart-import-reset--push{margin-left:0}}
@media(prefers-reduced-motion:reduce){.smart-import-close,.smart-import-preview__remove,.smart-import-tab,.smart-import-dropzone,.smart-import-textarea,.smart-import-primary,.smart-import-reset,.smart-import-result,.smart-import-chapter,.smart-import-include{transition:none}}
.knowledge-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.knowledge-map--disabled {
  display: grid;
  place-content: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.knowledge-map__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.knowledge-map__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.knowledge-map__back:hover {
  background: var(--bg-hover);
}

.knowledge-map__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-muted);
}

.knowledge-map__search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.knowledge-map__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.knowledge-map__filters button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.knowledge-map__filters button.is-active {
  background: var(--accent-subtle);
  border-color: var(--accent-border);
  color: var(--accent);
}

.knowledge-map__body {
  display: grid;
  grid-template-columns: 1fr min(320px, 36vw);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.knowledge-map__canvas {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.knowledge-map__grid {
  display: none;
}

.knowledge-map-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.knowledge-map-canvas__viewport {
  width: 100%;
  height: 100%;
  min-height: 420px;
  cursor: grab;
  background:
    radial-gradient(circle at 20% 20%, var(--accent-subtle), transparent 42%),
    var(--bg-primary);
  border-radius: 0;
}

.knowledge-map-canvas__viewport:active {
  cursor: grabbing;
}

.knowledge-map-canvas__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.knowledge-map-canvas__edge {
  stroke: var(--border-visible);
  stroke-width: 1.5;
  opacity: 0.85;
}

.knowledge-map-canvas__edge.is-active {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 1;
}

.knowledge-map-canvas__node {
  cursor: pointer;
  outline: none;
}

.knowledge-map-canvas__node-ring {
  opacity: 0.9;
}

.knowledge-map-canvas__node-core {
  fill: var(--bg-card);
  stroke: var(--border-visible);
  stroke-width: 1.25;
}

.knowledge-map-canvas__node.is-selected .knowledge-map-canvas__node-core {
  stroke: var(--accent);
  stroke-width: 2;
}

.knowledge-map-canvas__label {
  fill: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-anchor: middle;
  pointer-events: none;
}

.knowledge-map-canvas__controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-map-canvas__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.knowledge-map-canvas__controls button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.knowledge-map__definition {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}

.knowledge-map__source-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.knowledge-map__source-link svg {
  color: var(--accent);
}

.knowledge-map__source-link > span:first-of-type,
.knowledge-map__source-link span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.knowledge-map__source-link em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.knowledge-map__node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.knowledge-map__node:hover,
.knowledge-map__node.is-selected {
  border-color: var(--accent-border);
  background: var(--bg-hover);
}

.knowledge-map__node strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.knowledge-map__node em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted);
}

.knowledge-map__node em span {
  opacity: 0.8;
}

.knowledge-map__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mastery, var(--text-muted));
  flex-shrink: 0;
}

.knowledge-map__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  text-align: center;
  gap: 8px;
  padding: 32px;
}

.knowledge-map__empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, var(--accent-subtle), transparent 70%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--accent);
}

.knowledge-map__empty h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.knowledge-map__empty p,
.knowledge-map__muted {
  margin: 0;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

.knowledge-map__detail {
  padding: 24px;
  border-left: 1px solid var(--border-visible);
  background: var(--bg-secondary);
  overflow-y: auto;
}

.knowledge-map__detail-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.knowledge-map__detail h2 {
  margin: 8px 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.knowledge-map__mastery-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.knowledge-map__related h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.knowledge-map__related ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-map__related button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-visible);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.knowledge-map__related button span {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.knowledge-map__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.knowledge-map__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.knowledge-map__action:hover {
  background: var(--accent-hover);
}

.knowledge-map__action--ghost {
  background: transparent;
  border: 1px solid var(--border-visible);
  color: var(--text-primary);
}

.knowledge-map__action--ghost:hover {
  background: var(--bg-hover);
}

@media (max-width: 900px) {
  .knowledge-map__body {
    grid-template-columns: 1fr;
  }

  .knowledge-map__detail {
    border-left: none;
    border-top: 1px solid var(--border-visible);
    max-height: 40vh;
  }
}
.occlusion-surface {
  position: relative;
  width: 100%;
  min-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-visible);
  background: var(--bg-card);
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.occlusion-surface img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  pointer-events: none;
  background: var(--bg-secondary);
}

.occlusion-mask {
  position: absolute;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  border: 1.5px solid var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-border);
  pointer-events: none;
}

.occlusion-mask.is-draft {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-style: dashed;
}
.study-techniques-page .study-techniques-grid {
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  grid-auto-rows: 236px;
  align-items: stretch;
}

.technique-card--compact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
  padding: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-visible) 88%, var(--study-technique-accent));
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 8%, transparent), transparent 34%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--study-technique-surface) 38%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    box-shadow 0.2s ease;
}

.technique-card--compact:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--study-technique-accent) 34%, var(--border-visible));
  box-shadow:
    var(--shadow-md),
    0 0 0 1px color-mix(in srgb, var(--study-technique-accent) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.technique-card--compact .technique-card__glow {
  position: absolute;
  width: 124px;
  height: 124px;
  top: -64px;
  right: -54px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--study-technique-glow) 70%, transparent), transparent 68%);
  pointer-events: none;
}

.technique-card--compact .technique-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.technique-card--compact .technique-card__identity {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
}

.technique-card--compact .technique-card__copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
}

.technique-card--compact .technique-card__info-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--study-technique-accent) 22%, var(--border-visible));
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--text-primary) 10%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--study-technique-surface) 74%, transparent), color-mix(in srgb, var(--bg-card) 88%, transparent));
  color: color-mix(in srgb, var(--study-technique-accent) 82%, var(--text-primary));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent);
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.technique-card--compact .technique-card__info-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--study-technique-accent) 34%, var(--border-visible));
}

.technique-card--compact .technique-card__info-button:active {
  transform: scale(0.96);
}

.technique-card--compact .technique-card__icon-shell {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--study-technique-glow) 82%, transparent), transparent 70%);
}

.technique-card--compact .technique-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--study-technique-accent) 24%, var(--border-visible));
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--text-primary) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--study-technique-surface) 100%, transparent), color-mix(in srgb, var(--bg-card) 86%, transparent));
  color: var(--study-technique-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent),
    0 8px 18px color-mix(in srgb, var(--study-technique-glow) 50%, transparent);
}

.technique-card--compact .technique-card__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--study-technique-accent) 18%, var(--border-visible));
  border-radius: 999px;
  background: color-mix(in srgb, var(--study-technique-surface) 70%, transparent);
  color: color-mix(in srgb, var(--study-technique-accent) 72%, var(--text-primary));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.technique-card--compact .technique-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.technique-card--compact .technique-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.technique-card--compact .technique-card__description {
  margin: 0;
  max-width: 36ch;
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.technique-card--compact .technique-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
  padding-top: 0;
  border-top: none;
}

.technique-card--compact .technique-card__cta {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 14px;
  border-radius: 14px;
  font-size: 13.5px;
}

.technique-card--compact .technique-card__cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.technique-card--compact .technique-card__cta-pace {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  max-width: 52%;
  overflow: hidden;
  opacity: 0.92;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technique-card--compact .technique-card__cta-pace svg {
  flex: 0 0 auto;
}

.technique-card--compact .technique-card__cta:active {
  transform: scale(0.98);
}

/* Details overlay */
.technique-card--compact .technique-card__details {
  position: absolute;
  inset: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--study-technique-accent) 20%, var(--border-visible));
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--study-technique-accent) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 98%, transparent), color-mix(in srgb, var(--bg-hover) 94%, transparent));
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.technique-card--compact .technique-card__details::-webkit-scrollbar {
  width: 8px;
}

.technique-card--compact .technique-card__details::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-visible) 82%, transparent);
  border-radius: 999px;
}

.technique-card--compact .technique-card__details-header,
.technique-card--compact .technique-card__details-title-wrap,
.technique-card--compact .technique-card__details-item {
  display: flex;
  align-items: flex-start;
}

.technique-card--compact .technique-card__details-header {
  justify-content: space-between;
  gap: 12px;
}

.technique-card--compact .technique-card__details-title-wrap {
  gap: 12px;
  min-width: 0;
}

.technique-card--compact .technique-card__details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--study-technique-accent) 24%, var(--border-visible));
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--text-primary) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--study-technique-surface) 86%, transparent), color-mix(in srgb, var(--bg-card) 88%, transparent));
  color: var(--study-technique-accent);
}

.technique-card--compact .technique-card__details-copy-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.technique-card--compact .technique-card__details-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.technique-card--compact .technique-card__details-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--border-visible) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
  color: var(--text-secondary);
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.technique-card--compact .technique-card__details-close:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--study-technique-accent) 26%, var(--border-visible));
  color: var(--text-primary);
}

.technique-card--compact .technique-card__details-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.technique-card--compact .technique-card__details-text,
.technique-card--compact .technique-card__details-item p {
  margin: 0;
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
  font-size: 13px;
  line-height: 1.58;
}

.technique-card--compact .technique-card__details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.technique-card--compact .technique-card__details-item {
  gap: 10px;
}

.technique-card--compact .technique-card__details-bullet {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--study-technique-accent),
    color-mix(in srgb, var(--study-technique-accent) 72%, var(--text-primary))
  );
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--study-technique-surface) 54%, transparent);
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .study-techniques-page .study-techniques-grid {
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  }
}

/* ── Mobile: list-style premium cards ───────────────────────────────────── */
@media (max-width: 767px) {
  .study-techniques-page .study-techniques-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 256px;
    gap: 12px;
  }

  .technique-card--compact {
    gap: 14px;
    min-height: 256px;
    padding: 16px 16px 14px;
    border-radius: 20px;
    border-color: var(--border-visible);
    background:
      radial-gradient(
        120% 80% at 100% 0%,
        color-mix(in srgb, var(--study-technique-accent) 12%, transparent),
        transparent 52%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card) 100%, transparent),
        color-mix(in srgb, var(--bg-secondary) 96%, transparent)
      );
    box-shadow:
      var(--shadow-xs),
      inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
  }

  .technique-card--compact:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--study-technique-accent) 28%, var(--border-visible));
    box-shadow:
      var(--shadow-sm),
      inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
  }

  .technique-card--compact .technique-card__glow {
    width: 160px;
    height: 160px;
    top: -88px;
    right: -48px;
    opacity: 0.85;
  }

  .technique-card--compact .technique-card__top {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .technique-card--compact .technique-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .technique-card--compact .technique-card__identity {
    gap: 14px;
  }

  .technique-card--compact .technique-card__icon-shell {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .technique-card--compact .technique-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .technique-card--compact .technique-card__copy {
    gap: 7px;
  }

  .technique-card--compact .technique-card__eyebrow {
    min-height: 22px;
    padding: 0 9px;
    font-size: 10px;
    letter-spacing: 0.09em;
  }

  .technique-card--compact .technique-card__title {
    font-size: 1.2rem;
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .technique-card--compact .technique-card__info-button {
    width: 44px;
    height: 44px;
    margin-top: 2px;
  }

  .technique-card--compact .technique-card__body {
    gap: 0;
  }

  .technique-card--compact .technique-card__description {
    max-width: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
  }

  .technique-card--compact .technique-card__footer {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
  }

  .technique-card--compact .technique-card__cta {
    min-height: 48px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    box-shadow:
      0 10px 22px color-mix(in srgb, var(--study-technique-accent) 26%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent);
  }

  .technique-card--compact .technique-card__cta-pace {
    font-size: 12.5px;
  }

  .technique-card--compact .technique-card__details {
    inset: 0;
    max-height: 100%;
    padding: 18px 16px;
    border-radius: 20px;
  }

  .technique-card--compact .technique-card__details-close {
    width: 44px;
    height: 44px;
  }

  .technique-card--compact .technique-card__details-text,
  .technique-card--compact .technique-card__details-item p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Narrow phones */
@media (max-width: 380px) {
  .technique-card--compact .technique-card__title {
    font-size: 1.1rem;
  }
}
.mock-exam-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  min-width: 0;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.mock-exam-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mock-exam-content {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 32px 32px 64px;
}

.mock-exam-card {
  border: 1px solid var(--border-visible);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.mock-exam-choice {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border-visible);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.mock-exam-choice:hover {
  background: var(--bg-hover);
}

.mock-exam-choice:active {
  transform: scale(0.99);
}

.mock-exam-choice[data-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.mock-exam-focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mock-exam-question-layout {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 248px minmax(0, 1fr);
}

.mock-exam-question-nav {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-visible);
  background: var(--bg-secondary);
}

.mock-exam-question-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 40px 48px 120px;
}

.mock-exam-mobile-nav-button,
.mock-exam-mobile-nav-layer,
.mock-exam-mobile-footer {
  display: none;
}

.mock-exam-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-hover);
}

.mock-exam-progress-value {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left;
}

@media (max-width: 767px) {
  .mock-exam-content {
    padding: 20px 16px 48px;
  }

  .mock-exam-question-layout {
    display: block;
  }

  .mock-exam-question-nav {
    display: none;
  }

  .mock-exam-question-main {
    height: 100%;
    padding: 24px 16px 112px;
  }

  .mock-exam-mobile-nav-button,
  .mock-exam-mobile-footer {
    display: flex;
  }

  .mock-exam-mobile-nav-layer[data-open='true'] {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: flex-end;
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
  }

  .mock-exam-mobile-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    gap: 12px;
    border-top: 1px solid var(--border-visible);
    background: var(--bg-primary);
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mock-exam-choice,
  .mock-exam-progress-value {
    transition-duration: 1ms;
  }
}

/* Windows peint les boutons réduire / agrandir / fermer par-dessus toutes les
   couches web, en haut à droite de la fenêtre. L'examen occupe tout l'écran et
   pose justement là son chronomètre, son bouton d'envoi et sa fermeture : sans
   marge, ces cases passent sous les boutons système. On descend la surface sous
   la bande et on rend la place libérée au déplacement de fenêtre.
   Garder `--win-caption-height` en phase avec `titleBarOverlay.height`
   (electron/main/index.ts). */
body.electron-windows .mock-exam-root {
  padding-top: var(--win-caption-height, 40px);
  -webkit-app-region: drag;
}

body.electron-windows .mock-exam-root > * {
  -webkit-app-region: no-drag;
}
/* Settings — a strictly neutral, professional surface.
   The app shell uses cool-tinted dark greys; inside the settings modal we
   flatten every surface to true neutral so nothing reads as violet. */
:root {
  --settings-accent: #ededed;
  --settings-accent-hover: #ffffff;
  --settings-accent-text: #111111;
  --settings-accent-subtle: rgba(255, 255, 255, 0.07);
  --settings-accent-border: rgba(255, 255, 255, 0.16);
  --settings-backdrop: rgba(0, 0, 0, 0.62);
  --settings-image-overlay: rgba(0, 0, 0, 0.58);
  --settings-brand-surface: #ffffff;
  --settings-qr-surface: #ffffff;
  --settings-qr-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --settings-modal-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.3);

  /* Neutral greys used inside the modal only */
  --settings-bg-primary: #0f0f10;
  --settings-bg-secondary: #141416;
  --settings-bg-card: #19191b;
  --settings-bg-hover: #232326;
  --settings-bg-elevated: #232326;
  --settings-bg-popup: #232326;
  --settings-bg-popup-hover: #2b2b2f;
  --settings-border: rgba(255, 255, 255, 0.07);
  --settings-border-visible: rgba(255, 255, 255, 0.1);
  --settings-border-hover: rgba(255, 255, 255, 0.18);
  --settings-text-primary: #f2f2f2;
  --settings-text-secondary: #a1a1a3;
  --settings-text-muted: #6f6f73;
  --settings-sidebar-bg: #141416;
  --settings-nav-active: rgba(255, 255, 255, 0.08);
  --settings-nav-hover: rgba(255, 255, 255, 0.04);

  /* Native Windows caption buttons can't sit behind the modal, so while
     settings is open we repaint them to match the dimmed app underneath. */
  --settings-titlebar-dim: #070809;
  --settings-titlebar-symbol: #55555a;
  /* Keep in sync with titleBarOverlay.height in src/main/index.ts */
  --settings-caption-inset: 56px;
}

:root[data-theme="light"] {
  --settings-accent: #18181b;
  --settings-accent-hover: #000000;
  --settings-accent-text: #ffffff;
  --settings-accent-subtle: rgba(0, 0, 0, 0.05);
  --settings-accent-border: rgba(0, 0, 0, 0.14);
  --settings-backdrop: rgba(23, 23, 23, 0.42);
  --settings-modal-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 6px 20px rgba(0, 0, 0, 0.08);

  --settings-bg-primary: #ffffff;
  --settings-bg-secondary: #fafafa;
  --settings-bg-card: #ffffff;
  --settings-bg-hover: #f4f4f5;
  --settings-bg-elevated: #f4f4f5;
  --settings-bg-popup: #ffffff;
  --settings-bg-popup-hover: #f4f4f5;
  --settings-border: rgba(0, 0, 0, 0.06);
  --settings-border-visible: rgba(0, 0, 0, 0.09);
  --settings-border-hover: rgba(0, 0, 0, 0.16);
  --settings-text-primary: #171717;
  --settings-text-secondary: #52525b;
  --settings-text-muted: #8f8f96;
  --settings-sidebar-bg: #fafafa;
  --settings-nav-active: rgba(0, 0, 0, 0.06);
  --settings-nav-hover: rgba(0, 0, 0, 0.032);
  --settings-titlebar-dim: #9b9b9b;
  --settings-titlebar-symbol: #7a7a7a;
}

/* The scrim only dims — the app stays readable behind the modal.

   On Windows the caption buttons (minimise / maximise / close) are painted by
   the OS on top of every web layer, so they cannot be placed behind the panel.
   Inset the modal below that strip instead: the buttons then sit over the
   dimmed app, never over the settings panel. */
body.electron-windows .settings-modal-backdrop {
  padding-top: var(--settings-caption-inset);
}

body.electron-windows .settings-modal-shell {
  /* 32px = the largest scrim padding (lg:p-8) below the panel. */
  max-height: calc(100dvh - var(--settings-caption-inset) - 32px);
}

.settings-modal-shell {
  --accent: var(--settings-accent);
  --accent-hover: var(--settings-accent-hover);
  --accent-text: var(--settings-accent-text);
  --accent-subtle: var(--settings-accent-subtle);
  --accent-border: var(--settings-accent-border);
  --btn-primary-bg: var(--settings-accent);
  --btn-primary-bg-hover: var(--settings-accent-hover);
  --btn-primary-text: var(--settings-accent-text);

  --bg-primary: var(--settings-bg-primary);
  --bg-secondary: var(--settings-bg-secondary);
  --bg-card: var(--settings-bg-card);
  --bg-hover: var(--settings-bg-hover);
  --bg-elevated: var(--settings-bg-elevated);
  --bg-popup: var(--settings-bg-popup);
  --bg-popup-hover: var(--settings-bg-popup-hover);
  --border: var(--settings-border);
  --border-color: var(--settings-border);
  --border-visible: var(--settings-border-visible);
  --border-hover: var(--settings-border-hover);
  --text-primary: var(--settings-text-primary);
  --text-heading: var(--settings-text-primary);
  --text-secondary: var(--settings-text-secondary);
  --text-muted: var(--settings-text-muted);
  --icon-color: var(--settings-text-secondary);
  --icon-color-active: var(--settings-text-primary);
  --input-bg: var(--settings-bg-card);
  --input-border: var(--settings-border-visible);
  isolation: isolate;
}

/* Dropdown menus portal out of the shell — keep them on the same neutral scale. */
.settings-portal-surface {
  --bg-popup: var(--settings-bg-popup);
  --bg-popup-hover: var(--settings-bg-popup-hover);
  --border-visible: var(--settings-border-visible);
  --text-primary: var(--settings-text-primary);
  --text-secondary: var(--settings-text-secondary);
}

/* Close button — no chrome, it sits directly on the panel background. */
.settings-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.settings-close-btn:hover {
  background: var(--settings-nav-hover);
  color: var(--text-primary);
}

.settings-search-input {
  background: color-mix(in srgb, var(--bg-card) 80%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.settings-nav-item:hover,
.settings-feedback:hover {
  color: var(--text-primary) !important;
}

.settings-content {
  background: var(--bg-primary);
  scrollbar-gutter: stable;
}

.settings-section-head {
  position: relative;
}

.settings-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Every settings surface is flat — the background is the surface. */
.settings-card {
  background: none;
  border: none;
  box-shadow: none;
}

.settings-segmented-option:hover:not([aria-pressed="true"]) {
  color: var(--text-secondary) !important;
  background: var(--bg-hover) !important;
}

.settings-modal-shell button:focus-visible,
.settings-modal-shell a:focus-visible,
.settings-modal-shell input:focus-visible,
.settings-modal-shell textarea:focus-visible,
.settings-modal-shell select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-modal-shell button:not(:disabled):active {
  translate: 0 1px;
}

.settings-mobile-list > div,
.settings-mobile-list > .settings-mobile-nav-item {
  border-radius: 0;
  background: none;
}

@media (max-width: 640px) {
  .settings-residence-card {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-residence-card > button {
    justify-content: center;
    width: 100%;
  }

  .settings-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .settings-row > div:last-child {
    width: 100%;
  }

  .settings-row:has(.settings-toggle) {
    align-items: center;
    flex-direction: row;
    gap: 16px;
  }

  .settings-row:has(.settings-toggle) > div:first-child {
    flex: 1;
  }

  .settings-row:has(.settings-toggle) > div:last-child {
    width: auto;
  }

  .settings-row .settings-segmented,
  .settings-row > div:last-child > div {
    width: 100% !important;
  }

  .settings-row .settings-segmented-option {
    justify-content: center;
    flex: 1;
  }
}
/* Claude Design — Norex Landing v2 */
.lp-v2 {
    /* Palette professionnelle — noir/blanc chaud, neutres chaleureux (style Notion) */
    --bg:#ffffff;
    --bg-soft:#f7f7f5;
    --bg-elev:#ffffff;
    --card:#ffffff;
    --card-solid:#ffffff;
    --ink:#191918;
    --ink-2:#5f5e59;
    --ink-3:#908f89;
    --line:rgba(24,23,20,0.08);
    --line-2:rgba(24,23,20,0.13);
    --accent:#2a2925;
    --accent-2:#191918;
    --accent-3:#0f0e0d;
    --accent-ink:#ffffff;
    --accent-soft:rgba(25,24,20,0.055);
    --accent-line:rgba(25,24,20,0.16);
    --grad:linear-gradient(120deg,#4b4a45,#191918);
    --hero-accent:#2c4a6e;
    --text-muted:#908f89;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;

    box-sizing:border-box;
    background:var(--bg);color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;overflow-x:clip;
    min-height:100dvh;

  *, *::before, *::after { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  ::-webkit-scrollbar{width:11px;height:11px;}
  ::-webkit-scrollbar-track{background:var(--bg-soft);}
  ::-webkit-scrollbar-thumb{background:#d4d2cb;border-radius:6px;border:3px solid var(--bg-soft);}
  ::-webkit-scrollbar-thumb:hover{background:#bab7af;}

  .wrap{max-width:1152px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;white-space:nowrap;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
    color:var(--accent-2);border:1px solid var(--accent-line);background:var(--accent-soft);
  }
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .grad-text-suffix{display:inline-block;white-space:nowrap;}
  .grad-text-suffix::after{content:"";display:inline-block;width:.13em;height:.13em;border-radius:50%;background:var(--grad);vertical-align:baseline;transform:translateY(-.04em);margin-left:.03em;}
  .grad-dot{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:var(--grad);vertical-align:baseline;transform:translateY(-.04em);margin-left:.03em;}
  .rotating-word,.rotating-word-item{display:inline-block;vertical-align:bottom;}
  .rotating-word-accent{color:var(--hero-accent);font-style:italic;}
  .rotating-word-accent .rotating-word-item{color:inherit;}
  .hero-title-tail{
    display:inline-flex;
    align-items:baseline;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:0.3em;
    max-width:100%;
    font-size:8.6vw;
    font-size:14cqw;
    letter-spacing:-.045em;
  }
  .hero-title-tail__suffix{
    flex-shrink:0;
    white-space:nowrap;
  }
  h1,h2,h3{margin:0;}
  .h-sec{font-size:clamp(2rem,4.5vw,3.1rem);font-weight:680;line-height:1.04;letter-spacing:-.035em;color:var(--ink);}
  .lead{color:var(--ink-2);font-size:1.05rem;line-height:1.6;}
  .num{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.28em;color:var(--accent-2);}

  /* Buttons */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:.875rem;font-weight:600;transition:filter .2s,background .2s,transform .25s,box-shadow .25s,border-color .25s;border:none;}
  .btn .icon{transition:transform .25s cubic-bezier(.22,1,.36,1);}
  .btn:hover .icon{transform:translateX(3px);}
  .btn-primary{color:var(--accent-ink);background:var(--grad);padding:16px 28px;box-shadow:0 18px 44px -10px color-mix(in srgb,var(--accent) 25%,transparent);}
  .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:translateX(-130%) skewX(-6deg);transition:transform .8s ease;}
  .btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 24px 54px -12px color-mix(in srgb,var(--accent) 30%,transparent);}
  .btn-primary:hover::after{transform:translateX(130%) skewX(-6deg);}
  .btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--card);padding:16px 24px;}
  .btn-ghost:hover{background:var(--bg-elev);border-color:#cdcac2;transform:translateY(-2px);}

  /* Cards — lift + cursor-tracked glow border & interior sheen */
  .card{--mx:50%;--my:-30%;position:relative;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;box-shadow:0 1px 2px rgba(24,23,20,.04),0 12px 32px -26px rgba(24,23,20,.14);overflow:hidden;height:100%;}
  .card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 28px 64px -26px rgba(24,23,20,.2),0 2px 6px rgba(24,23,20,.05);}
  .card::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(25,24,20,.4),transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2;}
  .card::after{content:"";position:absolute;inset:0;border-radius:22px;background:radial-gradient(340px circle at var(--mx) var(--my),rgba(25,24,20,.05),transparent 68%);opacity:0;transition:opacity .35s;pointer-events:none;}
  .card:hover::before,.card:hover::after{opacity:1;}
  .ico{display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);}
  .tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);font-family:var(--mono);}

  svg{display:block;}
  .icon{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;}

  /* Reveal on scroll — the hidden state only exists under html.anim, which JS
     adds and then removes if it detects the frame clock isn't ticking. Two
     safeties below guarantee content can never stay stuck hidden. */
  .reveal{opacity:1;}
  &.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease var(--rd,0s),transform .75s cubic-bezier(.22,1,.36,1) var(--rd,0s);}
  &.anim .reveal.in{opacity:1;transform:translateY(0);}
  &.settled .reveal{opacity:1 !important;transform:none !important;}
  @media (prefers-reduced-motion:reduce){&.anim .reveal{opacity:1;transform:none;transition:none;}}

  /* Living background — aurora drift + cursor parallax + interactive grid + grain */
  .bg-layer{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--bg);pointer-events:none;}
  .bg-parallax{position:absolute;inset:-4%;will-change:transform;}
  .blob{position:absolute;border-radius:50%;filter:blur(84px);}
  .blob.b1{height:74vh;width:74vh;top:-20%;left:-6%;background:radial-gradient(circle,rgba(122,114,98,.14),transparent 62%);animation:float1 24s ease-in-out infinite;}
  .blob.b2{height:64vh;width:64vh;top:-8%;right:-6%;background:radial-gradient(circle,rgba(92,86,76,.11),transparent 62%);animation:float2 29s ease-in-out infinite;}
  .blob.b3{height:52vh;width:52vh;top:38%;left:36%;background:radial-gradient(circle,rgba(166,158,142,.13),transparent 60%);animation:float3 33s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,14px) scale(1.12)}66%{transform:translate(-24px,34px) scale(.94)}}
  @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-58px,22px) scale(.92)}66%{transform:translate(26px,-12px) scale(1.1)}}
  @keyframes float3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-22px) scale(1.14)}66%{transform:translate(-46px,12px) scale(.92)}}
  .grid-layer,.grid-hi{position:absolute;inset-inline:0;top:0;height:175%;background-size:46px 46px;will-change:transform;}
  .grid-layer{background-image:linear-gradient(rgba(24,23,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,23,20,.05) 1px,transparent 1px);
    -webkit-mask-image:radial-gradient(ellipse 80% 56% at 50% 0%,#000 8%,transparent 74%);
    mask-image:radial-gradient(ellipse 80% 56% at 50% 0%,#000 8%,transparent 74%);}
  .grid-hi{background-image:linear-gradient(rgba(25,24,20,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(25,24,20,.32) 1px,transparent 1px);
    -webkit-mask-image:radial-gradient(220px circle at var(--gx,-400px) var(--gy,-400px),#000,transparent 72%);
    mask-image:radial-gradient(220px circle at var(--gx,-400px) var(--gy,-400px),#000,transparent 72%);}
  .noise{position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");background-size:240px 240px;}
  .bg-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,var(--bg) 97%);}

  /* Nav */
  header.nav{position:fixed;inset-inline:0;top:0;z-index:50;padding:12px 12px 0;}
  .nav-inner{max-width:1152px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-radius:999px;padding:10px 24px;border:1px solid transparent;transition:all .3s;}
  .nav-inner.scrolled{border-color:var(--line);background:color-mix(in srgb,var(--bg-elev) 78%,transparent);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 14px 40px -18px rgba(24,23,20,.18);}
  .brand{display:flex;align-items:center;gap:10px;transition:transform .28s cubic-bezier(.22,1,.36,1);}
  .brand:hover{transform:translateY(-1px);}
  .brand .mark{height:36px;width:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;transition:transform .28s cubic-bezier(.22,1,.36,1);}
  .brand .mark .brand-logo{display:block;height:28px;width:28px;object-fit:contain;}
  .brand:hover .mark{transform:scale(1.06);}
  .brand .name{font-size:1.18rem;font-weight:700;letter-spacing:-.03em;transition:color .22s ease,letter-spacing .28s cubic-bezier(.22,1,.36,1);}
  .brand:hover .name{color:var(--ink);letter-spacing:-.025em;}
  .nav-links{display:flex;align-items:center;gap:4px;}
  .nav-links a,.nav-trust-trigger{position:relative;overflow:hidden;border-radius:999px;padding:8px 14px;font-size:.875rem;color:var(--ink-2);transition:color .22s ease,background .22s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1);}
  .nav-links a::after,.nav-trust-trigger::after{content:"";position:absolute;inset-inline:14px;bottom:6px;height:1.5px;border-radius:999px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,1,.36,1);opacity:.85;}
  .nav-links a:hover,.nav-trust-trigger:hover,.nav-trust.open .nav-trust-trigger{color:var(--ink);background:var(--bg-elev);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(24,23,20,.22);}
  .nav-links a:hover::after,.nav-trust-trigger:hover::after,.nav-trust.open .nav-trust-trigger::after{transform:scaleX(1);}
  .nav-links a:active,.nav-trust-trigger:active{transform:translateY(0);transition-duration:.12s;}
  .nav-trust{position:relative;}
  .nav-trust-trigger{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;cursor:pointer;}
  .nav-trust-chevron{transition:transform .25s cubic-bezier(.22,1,.36,1);}
  .nav-trust.open .nav-trust-chevron{transform:rotate(180deg);}
  .nav-trust-menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:60;width:min(22rem,calc(100vw - 32px));transform:translateX(-50%) translateY(8px) scale(.98);transform-origin:top center;border-radius:18px;border:1px solid var(--line-2);background:var(--card-solid);padding:14px;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 24px 60px -24px rgba(24,23,20,.28),0 2px 8px rgba(24,23,20,.06);transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .22s ease;}
  .nav-trust.open .nav-trust-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);}
  .nav-trust-kicker{margin:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);}
  .nav-trust-lead{margin:6px 0 12px;font-size:12px;line-height:1.5;color:var(--ink-2);}
  .nav-trust-list{margin:0;padding:0;list-style:none;display:grid;gap:4px;}
  .nav-trust-item{display:flex;align-items:flex-start;gap:10px;border-radius:12px;padding:10px 10px;color:inherit;text-decoration:none;transition:background .18s ease,transform .18s ease;}
  .nav-trust-item:hover{background:var(--bg-soft);transform:translateX(2px);}
  .nav-trust-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:30px;width:30px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);color:var(--accent-2);}
  .nav-trust-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .nav-trust-label{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2;}
  .nav-trust-desc{font-size:11px;line-height:1.35;color:var(--ink-3);}
  .nav-cta{display:flex;align-items:center;gap:6px;}
  .nav-cta .signin{padding:8px 14px;font-size:.875rem;color:var(--ink-2);border-radius:999px;border:1px solid transparent;transition:color .22s ease,background .22s ease,border-color .22s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1);}
  .nav-cta .signin:hover{color:var(--ink);background:var(--bg-elev);border-color:var(--line);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(24,23,20,.18);}
  .nav-cta .signin:active{transform:translateY(0);}
  .nav-cta .try{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:9px 18px;font-size:.875rem;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 10px 28px -8px color-mix(in srgb,var(--accent) 25%,transparent);transition:filter .22s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1);}
  .nav-cta .try::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-130%) skewX(-6deg);transition:transform .75s ease;}
  .nav-cta .try svg{position:relative;z-index:1;transition:transform .28s cubic-bezier(.22,1,.36,1);}
  .nav-cta .try:hover{filter:brightness(1.08);transform:translateY(-2px) scale(1.02);box-shadow:0 16px 36px -10px color-mix(in srgb,var(--accent) 34%,transparent);}
  .nav-cta .try:hover::after{transform:translateX(130%) skewX(-6deg);}
  .nav-cta .try:hover svg{transform:translate(2px,-2px);}
  .nav-cta .try:active{transform:translateY(0) scale(1);transition-duration:.12s;}
  @media (max-width:860px){.nav-links > a{display:none;}.nav-cta .signin{display:none;}}

  /* Hero */
  .hero{position:relative;padding:118px 0 36px;}
  .hero-grid{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr) clamp(400px,46vw,580px);}
  .hero-grid > div:first-child{min-width:0;container-type:inline-size;}
  .hero h1{margin-top:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:clamp(2.9rem,6.5vw,5.3rem);font-weight:680;line-height:.98;letter-spacing:-.045em;}
  .hero-title-line1{display:inline-block;white-space:nowrap;}
  .hero p.lead{margin-top:20px;max-width:32rem;font-size:clamp(1rem,2.4vw,1.18rem);line-height:1.65;}
  .hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
  .hero-trust{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-3);}
  .hero-trust span{display:flex;align-items:center;gap:6px;font-size:.75rem;}
  @media (max-width:980px){.hero-grid{grid-template-columns:1fr;}.hero-mock-wrap{display:none;}.hero{padding-top:96px;padding-bottom:48px;}}

  /* Browser window mock */
  .window{overflow:hidden;border-radius:18px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 50px 110px -34px rgba(24,23,20,.34),0 12px 30px -16px rgba(24,23,20,.16),inset 0 1px 0 rgba(255,255,255,.8);}
  .window .chrome{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
  .dots{display:flex;gap:6px;}
  .dots i{height:10px;width:10px;border-radius:50%;display:block;}
  .url{font-size:11px;color:var(--ink-3);font-family:var(--mono);}
  .window img,.window-shot img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:top center;}
  .window--full .window-shot{overflow:hidden;}
  .hero-mock-wrap{overflow:visible;padding-inline:16px;padding-block:20px;width:100%;max-width:clamp(380px,42vw,520px);justify-self:end;margin-right:-48px;}
  .hero-mock{width:100%;}
  .hero-mock .window{width:100%;}
  .hero-mock{position:relative;transform-style:preserve-3d;will-change:transform;}
  .hero-mock-body{position:relative;animation:mock-float 6s ease-in-out infinite;}
  .hero-mock--tilt.is-active .hero-mock-body{animation:none;}
  .hero-mock--tilt{cursor:pointer;}
  .hero-mock--tilt .window{will-change:transform;transition:box-shadow .35s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d;}
  .hero-mock--tilt.is-active .window{box-shadow:0 64px 130px -30px rgba(24,23,20,.42),0 20px 44px -14px rgba(24,23,20,.2),inset 0 1px 0 rgba(255,255,255,.8);}
  .hero-mock--tilt.is-active .glow{opacity:1;transform:scale(1.14);}
  .hero-mock .glow{position:absolute;inset:-32px;z-index:-1;border-radius:36px;background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);filter:blur(30px);opacity:.82;transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);}
  .window-shot{overflow:hidden;line-height:0;}
  @keyframes mock-float{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(-0.6deg)}66%{transform:translateY(-16px) rotate(0.6deg)}}
  @media (prefers-reduced-motion:reduce){.hero-mock-body{animation:none;}}
  .chip{position:absolute;z-index:20;display:flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;font-size:.75rem;color:var(--ink);border:1px solid var(--line-2);background:var(--bg-elev);box-shadow:0 16px 34px -14px rgba(24,23,20,.22);animation:bob 6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateZ(46px) translateY(0)}50%{transform:translateZ(46px) translateY(-8px)}}

  /* Marquee */
  .marquee-sec{position:relative;padding:12px 0 48px;margin-top:4px;background:transparent;border:none;overflow:visible;}
  .marquee-label{text-align:center;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin:0 0 14px;}
  .marquee-band{background:transparent;border-radius:0;overflow:hidden;min-height:56px;display:flex;align-items:center;}
  .marquee-mask{position:relative;margin-top:0;width:100%;overflow:hidden;}
  .marquee-mask::before,.marquee-mask::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;}
  .marquee-mask::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
  .marquee-mask::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
  .marquee-track{display:flex;width:max-content;align-items:center;gap:48px;will-change:transform;}
  .marquee-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600;letter-spacing:-.015em;color:var(--ink);}
  .marquee-item-name{color:var(--ink);}
  @media (prefers-reduced-motion:reduce){
    .marquee-track{flex-wrap:wrap;justify-content:center;width:auto;max-width:960px;margin:0 auto;padding:0 24px;gap:12px 28px;}
    .marquee-item{font-size:1rem;}
  }

  section{position:relative;}
  .pad{padding:96px 0;}
  .center-head{max-width:42rem;margin:0 auto 56px;text-align:center;}
  .soft-bg{background:var(--bg-soft);}

  /* Flow */
  .flow{display:grid;gap:20px;align-items:center;grid-template-columns:0.9fr auto 1.1fr;max-width:1000px;margin:0 auto;}
  .flow .conns{display:flex;justify-content:center;}
  .source{display:flex;flex-direction:column;justify-content:space-between;border-radius:24px;padding:20px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 24px 60px -28px rgba(24,23,20,.18);}
  .pillbox{margin-top:12px;display:flex;align-items:center;gap:8px;border-radius:16px;padding:12px;background:var(--bg-soft);border:1px solid var(--line);font-size:13px;color:var(--ink-3);}
  .mini-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
  .mini-chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 8px;font-size:10px;color:var(--ink-2);background:var(--bg-elev);border:1px solid var(--line);font-family:var(--mono);white-space:nowrap;}
  .gen{position:relative;overflow:hidden;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:12px;font-size:.875rem;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 12px 30px -12px rgba(25,24,20,.4);}
  .gen::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-130%);animation:genshine 3.6s ease-in-out infinite;}
  @keyframes genshine{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
  .conns path{stroke-dasharray:5 9;animation:dashflow 1.4s linear infinite;}
  @keyframes dashflow{to{stroke-dashoffset:-28;}}
  .outputs{display:grid;gap:12px;}
  .out{display:flex;align-items:center;gap:12px;border-radius:16px;padding:16px;background:var(--card-solid);border:1px solid var(--line);box-shadow:0 14px 36px -22px rgba(24,23,20,.14);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;}
  .out:hover{transform:translateX(5px);border-color:var(--accent-line);box-shadow:0 20px 44px -20px rgba(25,24,20,.2);}
  @media (max-width:880px){.flow{grid-template-columns:1fr;}.flow .conns{transform:rotate(90deg);height:40px;}}

  /* Bento */
  .bento{display:grid;gap:16px;grid-template-columns:repeat(6,1fr);}
  .col4{grid-column:span 4;}.col2{grid-column:span 2;}
  @media (max-width:880px){.bento{grid-template-columns:1fr;}.col4,.col2{grid-column:auto;}}

  /* Live mini-demos inside bento cards */
  .demo-chat{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
  .chat-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;color:var(--ink-3);}
  .chat-head .dot-on{height:7px;width:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14);animation:pulse-dot 2.4s ease-in-out infinite;}
  @keyframes pulse-dot{50%{box-shadow:0 0 0 6px rgba(34,197,94,.05);}}
  .msg{max-width:86%;border-radius:16px;padding:10px 14px;font-size:12.5px;line-height:1.6;}
  .msg.user{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 10px 24px -12px rgba(25,24,20,.4);}
  .msg.ai{align-self:flex-start;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px;min-height:20px;}
  .caret{display:inline-block;width:6px;height:12px;margin-left:2px;border-radius:1px;background:var(--accent);vertical-align:-2px;animation:blink 1.05s steps(2,start) infinite;}
  @keyframes blink{50%{opacity:0;}}
  .src-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s;}
  .src-chips.show{opacity:1;transform:none;}

  .deck{position:relative;margin-top:auto;padding-top:22px;height:106px;}
  .deck i{position:absolute;left:6%;right:6%;top:26px;height:76px;display:block;border-radius:14px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 14px 30px -16px rgba(24,23,20,.2);}
  .deck i.d2{transform:rotate(-3.5deg) translateY(9px) scale(.96);opacity:.65;}
  .deck i.d3{transform:rotate(2.5deg) translateY(5px) scale(.98);opacity:.85;}
  .deck .q,.deck .a{position:absolute;left:6%;right:6%;top:26px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 16px;text-align:center;border-radius:14px;}
  .deck .q{background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 14px 30px -16px rgba(24,23,20,.2);animation:swapQ 6s ease-in-out infinite;}
  .deck .a{background:linear-gradient(140deg,#34332e,#191918);color:#fff;opacity:0;box-shadow:0 14px 34px -14px rgba(25,24,20,.45);animation:swapA 6s ease-in-out infinite;}
  .deck b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;}
  .deck small{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;opacity:.55;}
  @keyframes swapQ{0%,42%{opacity:1;}50%,92%{opacity:0;}100%{opacity:1;}}
  @keyframes swapA{0%,42%{opacity:0;}50%,92%{opacity:1;}100%{opacity:0;}}

  .wave{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:auto;padding-top:18px;}
  .wave i{flex:1;max-width:7px;height:var(--h,50%);border-radius:3px;background:linear-gradient(180deg,#b4b0a7,#4c4a44);opacity:.9;transform-origin:bottom;animation:wv 1s ease-in-out var(--d,0s) infinite alternate;}
  @keyframes wv{from{transform:scaleY(.28);}to{transform:scaleY(1);}}
  .rec-row{margin-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--mono);}
  .rec-row .rec{display:flex;align-items:center;gap:6px;color:#dc2626;font-weight:700;letter-spacing:.08em;}
  .rec-row .rec i{height:7px;width:7px;border-radius:50%;background:#dc2626;animation:recblink 1.4s ease-in-out infinite;}
  @keyframes recblink{50%{opacity:.25;}}

  .cal{margin-top:auto;padding-top:18px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal span{font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-align:center;text-transform:uppercase;}
  .cal b{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/.92;border-radius:8px;font-size:10.5px;font-weight:500;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);}
  .cal b.rev::after{content:"";position:absolute;bottom:3px;height:3px;width:3px;border-radius:50%;background:var(--accent);}
  .cal b.today{border-color:var(--accent);color:var(--accent-2);font-weight:700;box-shadow:0 0 0 3px var(--accent-soft);}
  .cal b.exam{background:var(--grad);border:none;color:#fff;font-weight:700;box-shadow:0 6px 14px -6px rgba(25,24,20,.35);}
  .cal-cap{margin-top:10px;display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);}

  .pdf-demo{position:relative;margin-top:auto;padding-top:16px;height:96px;display:flex;align-items:center;gap:10px;}
  .pdf-file{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;width:52px;border-radius:10px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 10px 22px -12px rgba(24,23,20,.2);font-size:8px;font-weight:800;letter-spacing:.1em;color:#dc2626;}
  .pdf-demo > .icon{flex:none;color:var(--ink-3);}
  .fan{position:relative;flex:1;height:100%;}
  .fan i{position:absolute;left:2px;top:50%;height:34px;width:52px;margin-top:-17px;display:block;border-radius:8px;background:var(--card-solid);border:1px solid var(--accent-line);box-shadow:0 10px 20px -10px rgba(25,24,20,.32);opacity:0;animation:fanout 3.6s ease-in-out var(--fd,0s) infinite;}
  .fan i::after{content:"";position:absolute;left:9px;right:9px;top:10px;height:3px;border-radius:2px;background:rgba(25,24,20,.16);box-shadow:0 8px 0 rgba(25,24,20,.09);}
  @keyframes fanout{0%{transform:translate(-14px,0) scale(.5);opacity:0;}16%{opacity:1;}40%,78%{transform:var(--ft) scale(1);opacity:1;}96%,100%{transform:var(--ft) scale(.94);opacity:0;}}

  /* Split sections */
  .split{display:grid;gap:56px;align-items:center;grid-template-columns:1fr 1fr;}
  @media (max-width:920px){.split{grid-template-columns:1fr;}}
  .check-list{margin-top:32px;display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;}
  .check-list li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:15px;}
  .check-list .cdot{margin-top:2px;height:20px;width:20px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);}

  /* Flashcard */
  .flash-wrap{display:flex;flex-direction:column;align-items:center;}
  .flash{position:relative;width:100%;max-width:24rem;cursor:pointer;perspective:1200px;}
  .flash .glow{position:absolute;inset:-24px;z-index:-1;border-radius:32px;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);filter:blur(28px);}
  .flash .ghost{position:absolute;inset:0;display:block;border-radius:24px;background:var(--card-solid);border:1px solid var(--line);box-shadow:0 16px 36px -24px rgba(24,23,20,.18);}
  .flash .ghost.g1{transform:rotate(-4deg) translateY(13px) scale(.955);}
  .flash .ghost.g2{transform:rotate(2.5deg) translateY(7px) scale(.98);}
  .flash-inner{position:relative;min-height:240px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1);}
  .flash.flipped .flash-inner{transform:rotateY(180deg);}
  .face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;border-radius:24px;padding:24px;backface-visibility:hidden;}
  .face.front{background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 26px 64px -26px rgba(24,23,20,.2);}
  .face.back{background:var(--grad);color:#fff;transform:rotateY(180deg);box-shadow:0 26px 64px -24px color-mix(in srgb,var(--accent) 25%,transparent);}

  /* Stats */
  .stats{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);}
  .stat{border-radius:22px;padding:36px 24px;text-align:center;border:1px solid var(--line);background:var(--card);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;}
  .stat:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 22px 48px -26px rgba(25,24,20,.22);}
  .stat .v{font-size:clamp(2.2rem,4vw,3rem);font-weight:680;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

  /* Steps */
  .steps{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);}
  @media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.steps{grid-template-columns:1fr;}}

  /* Pricing */
  .toggle{margin-top:28px;display:inline-flex;align-items:center;border-radius:999px;padding:4px;background:var(--bg-elev);border:1px solid var(--line);}
  .toggle button{border:none;background:transparent;border-radius:999px;padding:6px 16px;font-size:12px;font-weight:500;color:var(--ink-2);transition:.2s;}
  .toggle button.active{background:var(--grad);color:#fff;}
  .plans{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:start;padding-top:18px;}
  @media (max-width:880px){.plans{grid-template-columns:1fr;max-width:26rem;margin:0 auto;}}
  .plan{--mx:50%;--my:-30%;position:relative;border-radius:24px;padding:28px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 3px rgba(24,23,20,.06);overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;}
  .plan::after{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(25,24,20,.045),transparent 68%);opacity:0;transition:opacity .3s;pointer-events:none;}
  .plan:hover::after{opacity:1;}
  .plan:hover{transform:translateY(-3px);box-shadow:0 26px 60px -28px rgba(24,23,20,.18);}
  .plan.hot{overflow:visible;background:var(--card-solid);border:1.5px solid var(--accent);box-shadow:0 34px 80px -28px color-mix(in srgb,var(--accent) 18%,transparent);transform:scale(1.02);}
  .plan.hot:hover{transform:scale(1.02) translateY(-3px);}
  .badge{position:absolute;top:-14px;left:50%;z-index:3;transform:translateX(-50%);border-radius:999px;padding:5px 14px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#fff;background:var(--grad);box-shadow:0 6px 18px -4px rgba(24,23,20,.28);white-space:nowrap;}
  .plan ul{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
  .plan ul li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--ink);}
  .plan .cta{margin-top:20px;display:block;width:100%;border-radius:999px;padding:12px;text-align:center;font-size:.875rem;font-weight:600;transition:.2s;}
  .plan .cta.hot{color:#fff;background:var(--grad);box-shadow:0 14px 34px -10px color-mix(in srgb,var(--accent) 25%,transparent);}
  .plan .cta.hot:hover{filter:brightness(1.07);}
  .plan .cta.flat{color:var(--ink);background:var(--bg-elev);border:1px solid var(--line);}
  .plan .cta.flat:hover{background:#efeeeb;}

  /* FAQ */
  .faq{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:8px;}
  .qa{border-radius:16px;padding:0 20px;border:1px solid var(--line);background:var(--card);transition:background .2s;}
  .qa.open{background:var(--bg-elev);}
  .qa button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;text-align:left;background:none;border:none;color:var(--ink);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;}
  .qa .ans{overflow:hidden;max-height:0;transition:max-height .3s ease;}
  .qa .ans p{margin:0;padding:0 0 20px;font-size:15px;color:var(--ink-2);line-height:1.65;}
  .qa .chev{flex:none;color:var(--ink-3);transition:transform .25s;}
  .qa.open .chev{transform:rotate(180deg);}

  /* CTA */
  .cta-box{position:relative;overflow:hidden;border-radius:32px;padding:80px 24px;text-align:center;max-width:1024px;margin:0 auto;background:linear-gradient(160deg,#1b1a18,#242320);border:1px solid rgba(255,255,255,.10);box-shadow:0 40px 100px -40px rgba(25,24,20,.32);}
  .cta-box .halo{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 0%,rgba(255,255,255,.14),transparent 65%);animation:pulse 8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
  .cta-box .gridfx{position:absolute;inset:0;opacity:.6;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 10%,transparent 75%);}
  .cta-box .sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.06) 50%,transparent 56%);transform:translateX(-100%);animation:ctasweep 7s ease-in-out infinite;}
  @keyframes ctasweep{0%,45%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}

  /* Footer */
  footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:64px 0 40px;}
  .foot-grid{display:grid;gap:40px;grid-template-columns:2fr 1fr 1fr;}
  @media (max-width:760px){.foot-grid{grid-template-columns:1fr;}}
  .foot-h{margin-bottom:16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);}
  .foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .foot-links a{font-size:.875rem;color:var(--ink-2);transition:.2s;}
  .foot-links a:hover{color:var(--ink);}
  .foot-bottom{margin-top:48px;border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;}
  .foot-bottom p,.foot-bottom span{font-size:12px;color:var(--ink-3);margin:0;}
  .progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:70;transform-origin:left;transform:scaleX(0);background:var(--grad);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 30%,transparent);}

}

/* Flat selectors — iOS Safari can drop nested rules inside .lp-mobile / .lp-v2 */
.lp-mobile .marquee-band .marquee-item,
.lp-v2 .marquee-band .marquee-item,
.lp-mobile .marquee-band .marquee-item-name,
.lp-v2 .marquee-band .marquee-item-name {
  color: var(--ink);
}
/* Claude Design — Norex Landing Mobile */
.lp-mobile {
    --bg:#ffffff;
    --bg-soft:#f7f7f5;
    --bg-elev:#ffffff;
    --card:#ffffff;
    --card-solid:#ffffff;
    --ink:#191918;
    --ink-2:#5f5e59;
    --ink-3:#908f89;
    --line:rgba(24,23,20,0.08);
    --line-2:rgba(24,23,20,0.13);
    --accent:#2a2925;
    --accent-2:#191918;
    --accent-3:#0f0e0d;
    --accent-ink:#ffffff;
    --accent-soft:rgba(25,24,20,0.055);
    --accent-line:rgba(25,24,20,0.16);
    --grad:linear-gradient(120deg,#4b4a45,#191918);
    --hero-accent:#2c4a6e;
    --text-muted:#908f89;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
    --nav-h:64px;

    box-sizing:border-box;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
    min-height:100dvh;
    width:100%;
    max-width:100%;
    min-width:0;

  *, *::before, *::after { box-sizing: border-box; }
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
  img{max-width:100%;display:block;}

  .wrap{max-width:560px;margin:0 auto;padding:0 20px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 13px;white-space:nowrap;
    font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;
    color:var(--accent-2);border:1px solid var(--accent-line);background:var(--accent-soft);
  }
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .grad-text-suffix{display:inline-block;white-space:nowrap;}
  .grad-text-suffix::after{content:"";display:inline-block;width:.13em;height:.13em;border-radius:50%;background:var(--grad);vertical-align:baseline;transform:translateY(-.04em);margin-left:.03em;}
  .grad-dot{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:var(--grad);vertical-align:baseline;transform:translateY(-.04em);margin-left:.03em;}
  .rotating-word,.rotating-word-item{display:inline-block;vertical-align:bottom;}
  .rotating-word-accent{color:var(--hero-accent);font-style:italic;}
  .rotating-word-accent .rotating-word-item{color:inherit;}
  .hero-title-tail{
    display:inline-flex;
    align-items:baseline;
    justify-content:flex-start;
    gap:0.28em;
    white-space:nowrap;
  }
  .hero-title-tail--fluid{
    justify-content:center;
  }
  .hero-title-tail__suffix{
    flex-shrink:0;
    white-space:nowrap;
  }
  h1,h2,h3{margin:0;}
  .h-sec{font-size:clamp(1.65rem,7.5vw,2.15rem);font-weight:680;line-height:1.08;letter-spacing:-.03em;color:var(--ink);}
  .lead{color:var(--ink-2);font-size:.98rem;line-height:1.62;}
  .num{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:var(--accent-2);}

  /* Buttons */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:.92rem;font-weight:600;transition:filter .2s,transform .25s,box-shadow .25s;border:none;min-height:50px;}
  .btn-primary{color:var(--accent-ink);background:var(--grad);padding:15px 26px;box-shadow:0 18px 44px -10px color-mix(in srgb,var(--accent) 25%,transparent);}
  .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:translateX(-130%) skewX(-6deg);animation:btnshine 6s ease-in-out infinite;}
  @keyframes btnshine{0%,62%{transform:translateX(-130%) skewX(-6deg)}82%,100%{transform:translateX(130%) skewX(-6deg)}}
  .btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--card);padding:15px 22px;}
  .btn-block{width:100%;}

  /* Cards */
  .card{position:relative;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(24,23,20,.04),0 12px 32px -26px rgba(24,23,20,.14);overflow:hidden;height:100%;}
  .ico{display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);}
  .tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-family:var(--mono);}

  svg{display:block;}
  .icon{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;}

  /* Reveal on scroll (with anim gate + safeties, as desktop) */
  .reveal{opacity:1;}
  &.anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--rd,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--rd,0s);}
  &.anim .reveal.in{opacity:1;transform:translateY(0);}
  &.settled .reveal{opacity:1 !important;transform:none !important;}
  @media (prefers-reduced-motion:reduce){&.anim .reveal{opacity:1;transform:none;transition:none;}}

  /* Background */
  .bg-layer{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--bg);pointer-events:none;}
  .blob{position:absolute;border-radius:50%;filter:blur(60px);}
  .blob.b1{height:56vh;width:56vh;top:-14%;left:-24%;background:radial-gradient(circle,rgba(122,114,98,.15),transparent 62%);animation:float1 24s ease-in-out infinite;}
  .blob.b2{height:48vh;width:48vh;top:-6%;right:-26%;background:radial-gradient(circle,rgba(92,86,76,.12),transparent 62%);animation:float2 29s ease-in-out infinite;}
  .blob.b3{height:42vh;width:42vh;top:42%;left:22%;background:radial-gradient(circle,rgba(166,158,142,.13),transparent 60%);animation:float3 33s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,10px) scale(1.1)}66%{transform:translate(-14px,22px) scale(.95)}}
  @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-28px,16px) scale(.93)}66%{transform:translate(14px,-8px) scale(1.08)}}
  @keyframes float3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-14px) scale(1.1)}66%{transform:translate(-24px,8px) scale(.93)}}
  .grid-layer{position:absolute;inset-inline:0;top:0;height:120vh;background-size:40px 40px;
    background-image:linear-gradient(rgba(24,23,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,23,20,.05) 1px,transparent 1px);
    -webkit-mask-image:radial-gradient(ellipse 130% 52% at 50% 0%,#000 8%,transparent 76%);
    mask-image:radial-gradient(ellipse 130% 52% at 50% 0%,#000 8%,transparent 76%);}
  .noise{position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");background-size:240px 240px;}
  .bg-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,var(--bg) 97%);}

  /* Progress */
  .progress{position:fixed;inset-inline:0;top:calc(var(--safe-top) + var(--nav-h));height:2px;z-index:70;transform-origin:left;transform:scaleX(0);background:var(--grad);}

  /* Nav — flat Notion-style bar */
  header.nav{
    position:fixed;inset-inline:0;top:0;z-index:50;
    padding-top:var(--safe-top);
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:var(--nav-h);padding:0 16px;
    max-width:560px;margin:0 auto;
  }
  .brand{display:flex;align-items:center;min-width:0;padding:0;border:none;background:transparent;cursor:pointer;}
  .brand .mark{height:34px;width:34px;flex:none;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;}
  .brand .mark .brand-logo{display:block;height:34px;width:34px;object-fit:contain;}
  .nav-cta{display:flex;align-items:center;gap:4px;flex:none;}
  .nav-cta .try{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;padding:10px 16px;
    font-size:.88rem;font-weight:600;line-height:1;
    color:#fff;background:var(--grad);
    box-shadow:none;white-space:nowrap;
  }
  .burger{
    height:44px;width:44px;flex:none;
    border:none;border-radius:8px;background:transparent;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:0;margin:0;margin-right:-6px;
  }
  .burger-line{display:block;height:2px;width:18px;background:var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease;}
  &.menu-open .burger .burger-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
  &.menu-open .burger .burger-line:nth-child(2){opacity:0;}
  &.menu-open .burger .burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Menu sheet */
  .scrim{position:fixed;inset:0;z-index:48;border:none;padding:0;margin:0;background:rgba(20,19,17,.26);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;}
  &.menu-open .scrim{opacity:1;visibility:visible;pointer-events:auto;}
  .menu{position:fixed;z-index:49;inset-inline:12px;top:calc(var(--nav-h) + var(--safe-top) + 8px);max-height:calc(100dvh - var(--nav-h) - var(--safe-top) - 20px);overflow-y:auto;border-radius:16px;border:1px solid var(--line);
    background:color-mix(in srgb,var(--bg-elev) 96%,transparent);backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 30px 70px -24px rgba(24,23,20,.32);padding:10px;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;pointer-events:none;
    transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1),visibility .25s;}
  &.menu-open .menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .menu a.item{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:600;}
  .menu a.item:active{background:var(--bg-soft);}
  .menu-trust{margin:2px 0;}
  .menu-trust-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 14px;border:none;border-radius:14px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:inherit;cursor:pointer;}
  .menu-trust-toggle:active{background:var(--bg-soft);}
  .menu-trust-chevron{transition:transform .25s cubic-bezier(.22,1,.36,1);}
  .menu-trust-chevron.open{transform:rotate(180deg);}
  .menu-trust-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1);}
  .menu-trust-panel.open{grid-template-rows:1fr;}
  .menu-trust-inner{overflow:hidden;padding:0 6px;}
  .menu-trust-panel.open .menu-trust-inner{padding-bottom:6px;}
  .menu-trust-kicker{margin:4px 6px 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);}
  .menu-trust-lead{margin:6px 6px 10px;font-size:12px;line-height:1.45;color:var(--ink-2);}
  .menu-trust-list{margin:0;padding:0;list-style:none;display:grid;gap:2px;}
  .menu-trust-item{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:12px;color:inherit;transition:background .18s ease;}
  .menu-trust-item:active{background:var(--bg-soft);}
  .menu-trust-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:30px;width:30px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);color:var(--accent-2);}
  .menu-trust-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .menu-trust-label{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2;}
  .menu-trust-desc{font-size:11px;line-height:1.35;color:var(--ink-3);}
  .menu .sep{height:1px;background:var(--line);margin:8px 6px;}
  .menu .signin{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:600;margin:4px 4px 8px;}
  .menu .try-big{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 4px 4px;min-height:50px;border-radius:999px;color:#fff;background:var(--grad);font-size:14px;font-weight:600;box-shadow:0 14px 34px -10px color-mix(in srgb,var(--accent) 25%,transparent);}

  /* Hero */
  .hero{position:relative;padding:calc(var(--nav-h) + var(--safe-top) + 24px) 0 56px;}
  .hero .wrap{text-align:center;}
  .hero h1{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:0;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:clamp(2.45rem,11.5vw,3.2rem);
    font-weight:680;
    line-height:1.02;
    letter-spacing:-.04em;
    text-align:center;
  }
  .hero p.lead{margin-top:16px;font-size:1rem;line-height:1.62;}
  .hero-cta-stack{
    display:flex;flex-direction:column;align-items:center;
    max-width:min(520px,calc(100vw - 40px));margin:24px auto 0;
  }
  .hero-cta-sync{
    display:flex;flex-direction:column;align-items:center;gap:32px;
    width:fit-content;max-width:100%;
  }
  .hero-actions{display:flex;flex-direction:column;gap:10px;width:min(100%,19rem);}
  .hero-cta-stack .btn{width:100%;white-space:nowrap;padding-left:20px;padding-right:20px;}
  .hero-cta-sync .marquee-label{
    display:table;margin:0 auto;text-align:center;
    max-width:min(520px,calc(100vw - 40px));
  }
  .hero-cta-stack .marquee-sec--inline{padding-top:28px;margin-top:0;width:100%;min-width:0;overflow:hidden;}
  .hero-cta-stack .marquee-sec--label-outside{padding-top:0;}
  .hero-trust{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:3px;color:var(--ink-3);max-width:21rem;}
  .hero-trust-item{display:flex;align-items:center;gap:5px;font-size:.7rem;line-height:1.15;}
  .hero-trust-mark{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    color:var(--accent-2);
  }

  /* Browser window mock */
  .window{overflow:hidden;border-radius:16px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 40px 90px -34px rgba(24,23,20,.32),0 12px 30px -16px rgba(24,23,20,.14);}
  .window .chrome{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
  .dots{display:flex;gap:5px;}
  .dots i{height:9px;width:9px;border-radius:50%;display:block;}
  .url{font-size:10px;color:var(--ink-3);font-family:var(--mono);}
  .window img{display:block;width:100%;}
  .hero-mock{position:relative;margin-top:32px;}
  .hero-mock .glow{position:absolute;inset:-20px;z-index:-1;border-radius:32px;background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);filter:blur(26px);}
  .chip{position:absolute;z-index:20;display:flex;align-items:center;gap:7px;border-radius:999px;padding:8px 12px;font-size:.72rem;color:var(--ink);border:1px solid var(--line-2);background:var(--bg-elev);box-shadow:0 16px 34px -14px rgba(24,23,20,.22);animation:bob 6s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

  /* Marquee — same track/item pattern as desktop (framer-motion) */
  .marquee-sec{position:relative;padding:32px 0 0;background:transparent;border:none;overflow:visible;}
  .marquee-label{text-align:center;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);margin:0 0 14px;}
  .marquee-band{background:transparent;border-radius:0;overflow:hidden;min-height:52px;display:flex;align-items:center;}
  .marquee-sec--inline{padding-top:28px;margin-top:8px;}
  .marquee-sec--inline .marquee-band{width:100%;max-width:none;margin-left:0;margin-right:0;}
  .marquee-sec--inline .marquee-mask{min-height:52px;display:flex;align-items:center;}
  .marquee-sec--inline .marquee-item{line-height:1.4;padding-block:6px;font-size:1.05rem;}
  .marquee-mask{position:relative;margin-top:0;width:100%;overflow:hidden;}
  .marquee-mask::before,.marquee-mask::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;}
  .marquee-mask::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
  .marquee-mask::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
  .marquee-track{display:flex;width:max-content;align-items:center;gap:36px;will-change:transform;}
  .marquee-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:1.05rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
  .marquee-item-name{color:var(--ink);}
  @media (prefers-reduced-motion:reduce){
    .marquee-track{flex-wrap:wrap;justify-content:center;width:auto;max-width:min(100%,560px);margin:0 auto;padding:0 20px;gap:10px 24px;transform:none !important;}
    .marquee-item{font-size:.95rem;}
  }

  section{position:relative;}
  .pad{padding:64px 0;}
  .center-head{margin:0 0 36px;text-align:center;}
  .soft-bg{background:var(--bg-soft);}

  /* Flow (vertical) */
  .flow-m{max-width:430px;margin:0 auto;display:flex;flex-direction:column;}
  .vconn{display:flex;justify-content:center;height:60px;}
  .vconn path{stroke-dasharray:5 9;animation:dashflow 1.4s linear infinite;}
  @keyframes dashflow{to{stroke-dashoffset:-28;}}
  .source{display:flex;flex-direction:column;border-radius:22px;padding:18px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 24px 60px -28px rgba(24,23,20,.18);}
  .pillbox{margin-top:12px;display:flex;align-items:center;gap:8px;border-radius:14px;padding:12px;background:var(--bg-soft);border:1px solid var(--line);font-size:12.5px;color:var(--ink-3);}
  .mini-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
  .mini-chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 8px;font-size:10px;color:var(--ink-2);background:var(--bg-elev);border:1px solid var(--line);font-family:var(--mono);white-space:nowrap;}
  .gen{position:relative;overflow:hidden;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:13px;font-size:.875rem;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 12px 30px -12px rgba(25,24,20,.4);}
  .gen::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-130%);animation:genshine 3.6s ease-in-out infinite;}
  @keyframes genshine{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
  .outputs{display:grid;gap:10px;}
  .out{display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px 16px;background:var(--card-solid);border:1px solid var(--line);box-shadow:0 14px 36px -22px rgba(24,23,20,.14);}

  /* Bento (1 col) */
  .bento{display:grid;gap:14px;grid-template-columns:1fr;}

  .demo-chat{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
  .chat-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;color:var(--ink-3);}
  .chat-head .dot-on{height:7px;width:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14);animation:pulse-dot 2.4s ease-in-out infinite;}
  @keyframes pulse-dot{50%{box-shadow:0 0 0 6px rgba(34,197,94,.05);}}
  .msg{max-width:88%;border-radius:16px;padding:10px 14px;font-size:12.5px;line-height:1.6;}
  .msg.user{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 10px 24px -12px rgba(25,24,20,.4);}
  .msg.ai{align-self:flex-start;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px;min-height:20px;}
  .caret{display:inline-block;width:6px;height:12px;margin-left:2px;border-radius:1px;background:var(--accent);vertical-align:-2px;animation:blink 1.05s steps(2,start) infinite;}
  @keyframes blink{50%{opacity:0;}}
  .src-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s;}
  .src-chips.show{opacity:1;transform:none;}

  .deck{position:relative;margin-top:auto;padding-top:20px;height:104px;}
  .deck i{position:absolute;left:6%;right:6%;top:24px;height:76px;display:block;border-radius:14px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 14px 30px -16px rgba(24,23,20,.2);}
  .deck i.d2{transform:rotate(-3.5deg) translateY(9px) scale(.96);opacity:.65;}
  .deck i.d3{transform:rotate(2.5deg) translateY(5px) scale(.98);opacity:.85;}
  .deck .q,.deck .a{position:absolute;left:6%;right:6%;top:24px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 16px;text-align:center;border-radius:14px;}
  .deck .q{background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 14px 30px -16px rgba(24,23,20,.2);animation:swapQ 6s ease-in-out infinite;}
  .deck .a{background:linear-gradient(140deg,#34332e,#191918);color:#fff;opacity:0;box-shadow:0 14px 34px -14px rgba(25,24,20,.45);animation:swapA 6s ease-in-out infinite;}
  .deck b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;}
  .deck small{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;opacity:.55;}
  @keyframes swapQ{0%,42%{opacity:1;}50%,92%{opacity:0;}100%{opacity:1;}}
  @keyframes swapA{0%,42%{opacity:0;}50%,92%{opacity:1;}100%{opacity:0;}}

  .wave{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:auto;padding-top:16px;}
  .wave i{flex:1;max-width:8px;height:var(--h,50%);border-radius:3px;background:linear-gradient(180deg,#b4b0a7,#4c4a44);opacity:.9;transform-origin:bottom;animation:wv 1s ease-in-out var(--d,0s) infinite alternate;}
  @keyframes wv{from{transform:scaleY(.28);}to{transform:scaleY(1);}}
  .rec-row{margin-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--mono);}
  .rec-row .rec{display:flex;align-items:center;gap:6px;color:#dc2626;font-weight:700;letter-spacing:.08em;}
  .rec-row .rec i{height:7px;width:7px;border-radius:50%;background:#dc2626;animation:recblink 1.4s ease-in-out infinite;}
  @keyframes recblink{50%{opacity:.25;}}

  .cal{margin-top:auto;padding-top:16px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal span{font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-align:center;text-transform:uppercase;}
  .cal b{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/.92;border-radius:8px;font-size:10.5px;font-weight:500;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);}
  .cal b.rev::after{content:"";position:absolute;bottom:3px;height:3px;width:3px;border-radius:50%;background:var(--accent);}
  .cal b.today{border-color:var(--accent);color:var(--accent-2);font-weight:700;box-shadow:0 0 0 3px var(--accent-soft);}
  .cal b.exam{background:var(--grad);border:none;color:#fff;font-weight:700;box-shadow:0 6px 14px -6px rgba(25,24,20,.35);}
  .cal-cap{margin-top:10px;display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);}

  .pdf-demo{position:relative;margin-top:auto;padding-top:14px;height:94px;display:flex;align-items:center;gap:10px;}
  .pdf-file{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;width:52px;border-radius:10px;background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 10px 22px -12px rgba(24,23,20,.2);font-size:8px;font-weight:800;letter-spacing:.1em;color:#dc2626;}
  .pdf-demo > .icon{flex:none;color:var(--ink-3);}
  .fan{position:relative;flex:1;height:100%;}
  .fan i{position:absolute;left:2px;top:50%;height:34px;width:52px;margin-top:-17px;display:block;border-radius:8px;background:var(--card-solid);border:1px solid var(--accent-line);box-shadow:0 10px 20px -10px rgba(25,24,20,.32);opacity:0;animation:fanout 3.6s ease-in-out var(--fd,0s) infinite;}
  .fan i::after{content:"";position:absolute;left:9px;right:9px;top:10px;height:3px;border-radius:2px;background:rgba(25,24,20,.16);box-shadow:0 8px 0 rgba(25,24,20,.09);}
  @keyframes fanout{0%{transform:translate(-14px,0) scale(.5);opacity:0;}16%{opacity:1;}40%,78%{transform:var(--ft) scale(1);opacity:1;}96%,100%{transform:var(--ft) scale(.94);opacity:0;}}

  /* Split sections (stacked) */
  .split{display:grid;gap:36px;grid-template-columns:1fr;}
  .check-list{margin-top:26px;display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;}
  .check-list li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:14.5px;line-height:1.5;}
  .check-list .cdot{margin-top:1px;height:20px;width:20px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);}

  /* Flashcard */
  .flash-wrap{display:flex;flex-direction:column;align-items:center;}
  .flash{position:relative;width:100%;max-width:22rem;cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent;}
  .flash .glow{position:absolute;inset:-20px;z-index:-1;border-radius:30px;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);filter:blur(24px);}
  .flash .ghost{position:absolute;inset:0;display:block;border-radius:22px;background:var(--card-solid);border:1px solid var(--line);box-shadow:0 16px 36px -24px rgba(24,23,20,.18);}
  .flash .ghost.g1{transform:rotate(-4deg) translateY(12px) scale(.955);}
  .flash .ghost.g2{transform:rotate(2.5deg) translateY(6px) scale(.98);}
  .flash-inner{position:relative;min-height:228px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1);}
  .flash.flipped .flash-inner{transform:rotateY(180deg);}
  .face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;border-radius:22px;padding:22px;backface-visibility:hidden;}
  .face.front{background:var(--card-solid);border:1px solid var(--line-2);box-shadow:0 26px 64px -26px rgba(24,23,20,.2);}
  .face.back{background:var(--grad);color:#fff;transform:rotateY(180deg);box-shadow:0 26px 64px -24px color-mix(in srgb,var(--accent) 25%,transparent);}

  /* Stats */
  .stats{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
  .stat{border-radius:20px;padding:26px 14px;text-align:center;border:1px solid var(--line);background:var(--card);}
  .stat .v{font-size:clamp(1.9rem,8vw,2.4rem);font-weight:680;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* Steps */
  .steps{display:grid;gap:14px;grid-template-columns:1fr;}

  /* Pricing */
  .toggle{margin-top:24px;display:inline-flex;align-items:center;border-radius:999px;padding:4px;background:var(--bg-elev);border:1px solid var(--line);}
  .toggle button{border:none;background:transparent;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--ink-2);transition:.2s;}
  .toggle button.active{background:var(--grad);color:#fff;}
  .plans{display:grid;gap:14px;grid-template-columns:1fr;max-width:430px;margin:0 auto;}
  .plan{position:relative;border-radius:22px;padding:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 3px rgba(24,23,20,.06);overflow:visible;}
  .plan.hot{background:var(--card-solid);border:1.5px solid var(--accent);box-shadow:0 34px 80px -28px color-mix(in srgb,var(--accent) 18%,transparent);}
  .plan.hot .topbar{position:absolute;inset-inline:0;top:0;height:2px;border-radius:2px 2px 0 0;background:var(--grad);}
  .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);border-radius:999px;padding:4px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#fff;background:var(--grad);}
  .plan ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
  .plan ul li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--ink);line-height:1.45;}
  .plan .cta{margin-top:18px;display:flex;align-items:center;justify-content:center;width:100%;border-radius:999px;min-height:48px;text-align:center;font-size:.875rem;font-weight:600;}
  .plan .cta.hot{color:#fff;background:var(--grad);box-shadow:0 14px 34px -10px color-mix(in srgb,var(--accent) 25%,transparent);}
  .plan .cta.flat{color:var(--ink);background:var(--bg-elev);border:1px solid var(--line);}

  /* FAQ */
  .faq{display:flex;flex-direction:column;gap:8px;}
  .qa{border-radius:16px;padding:0 16px;border:1px solid var(--line);background:var(--card);transition:background .2s;}
  .qa.open{background:var(--bg-elev);}
  .qa button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;text-align:left;background:none;border:none;color:var(--ink);font-size:.94rem;font-weight:600;letter-spacing:-.01em;line-height:1.4;}
  .qa .ans{overflow:hidden;max-height:0;transition:max-height .3s ease;}
  .qa .ans p{margin:0;padding:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.65;}
  .qa .chev{flex:none;color:var(--ink-3);transition:transform .25s;}
  .qa.open .chev{transform:rotate(180deg);}

  /* CTA */
  .cta-box{position:relative;overflow:hidden;border-radius:28px;padding:56px 22px;text-align:center;background:linear-gradient(160deg,#1b1a18,#242320);border:1px solid rgba(255,255,255,.10);box-shadow:0 40px 100px -40px rgba(25,24,20,.32);}
  .cta-box .halo{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.14),transparent 65%);animation:pulse 8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
  .cta-box .gridfx{position:absolute;inset:0;opacity:.6;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 10%,transparent 75%);}
  .cta-box .sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.06) 50%,transparent 56%);transform:translateX(-100%);animation:ctasweep 7s ease-in-out infinite;}
  @keyframes ctasweep{0%,45%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}

  /* Footer */
  footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:52px 0 calc(32px + var(--safe-bottom));}
  .foot-grid{display:grid;gap:36px;grid-template-columns:1fr;}
  .foot-h{margin-bottom:14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);}
  .foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .foot-links a{font-size:.9rem;color:var(--ink-2);}
  .foot-bottom{margin-top:40px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:10px;}
  .foot-bottom p,.foot-bottom span{font-size:12px;color:var(--ink-3);margin:0;}

}

/* Flat selectors — iOS Safari can drop nested rules inside .lp-mobile / .lp-v2 */
.lp-mobile .marquee-band .marquee-item,
.lp-v2 .marquee-band .marquee-item,
.lp-mobile .marquee-band .marquee-item-name,
.lp-v2 .marquee-band .marquee-item-name {
  color: var(--ink);
}