@font-face {
  font-family: "Inter";
  src: url("/static/font/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/font/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Islands design tokens: load first, dark by default, light on [data-theme="light"], with one ramp per hue shared by both themes. */

/* Raw ramps, theme independent, running step 10 darkest to 160 lightest in 10 point increments. */

:root {
  --jb-gray-10:  #191A1C;  --jb-gray-20:  #212326;
  --jb-gray-30:  #26282C;  --jb-gray-40:  #33353B;
  --jb-gray-50:  #40434A;  --jb-gray-60:  #4C4F56;
  --jb-gray-70:  #5F6269;  --jb-gray-80:  #73767C;
  --jb-gray-90:  #8B8E94;  --jb-gray-100: #9FA2A8;
  --jb-gray-110: #B5B7BD;  --jb-gray-120: #C3C5CB;
  --jb-gray-130: #D1D3D9;  --jb-gray-140: #DDDFE4;
  --jb-gray-150: #E9EAEE;  --jb-gray-160: #F7F8F9;

  --jb-blue-10:  #131A28;  --jb-blue-20:  #182337;
  --jb-blue-30:  #1B283F;  --jb-blue-40:  #233558;
  --jb-blue-50:  #2A4371;  --jb-blue-60:  #2E4D89;
  --jb-blue-70:  #2F5EB9;  --jb-blue-80:  #3871E1;
  --jb-blue-90:  #538AF9;  --jb-blue-100: #71A1FE;
  --jb-blue-110: #92B7FF;  --jb-blue-120: #A7C5FF;
  --jb-blue-130: #BDD3FF;  --jb-blue-140: #D0DFFE;
  --jb-blue-150: #E3EBFE;  --jb-blue-160: #F7F8FF;

  --jb-green-10:  #111C15;  --jb-green-20:  #16261C;
  --jb-green-30:  #192C20;  --jb-green-40:  #203B2A;
  --jb-green-50:  #274B34;  --jb-green-60:  #29583C;
  --jb-green-70:  #2A6E47;  --jb-green-80:  #338555;
  --jb-green-90:  #4E9D6C;  --jb-green-100: #6DB083;
  --jb-green-110: #8EC39D;  --jb-green-120: #A3CFAE;
  --jb-green-130: #BBDBC2;  --jb-green-140: #CDE5D1;
  --jb-green-150: #E2EFE2;  --jb-green-160: #F5FAF3;

  --jb-red-10:  #291416;  --jb-red-20:  #371B1C;
  --jb-red-30:  #3F1E21;  --jb-red-40:  #56272B;
  --jb-red-50:  #6D3136;  --jb-red-60:  #80383E;
  --jb-red-70:  #A4414A;  --jb-red-80:  #C54E58;
  --jb-red-90:  #E4656E;  --jb-red-100: #F57E84;
  --jb-red-110: #FF9B9F;  --jb-red-120: #FFB0B2;
  --jb-red-130: #FFC4C5;  --jb-red-140: #FFD6D6;
  --jb-red-150: #FFE5E5;  --jb-red-160: #FFF6F5;

  --jb-yellow-10:  #201810;  --jb-yellow-20:  #2C2115;
  --jb-yellow-30:  #322517;  --jb-yellow-40:  #44321D;
  --jb-yellow-50:  #583E21;  --jb-yellow-60:  #694820;
  --jb-yellow-70:  #875817;  --jb-yellow-80:  #A56906;
  --jb-yellow-90:  #C28013;  --jb-yellow-100: #D59637;
  --jb-yellow-110: #E4AD5F;  --jb-yellow-120: #ECBC7B;
  --jb-yellow-130: #F4CD9A;  --jb-yellow-140: #FADBB3;
  --jb-yellow-150: #FDE7C9;  --jb-yellow-160: #FFF6E9;

  --jb-orange-10:  #261611;  --jb-orange-20:  #331D16;
  --jb-orange-30:  #3B2119;  --jb-orange-40:  #4F2C21;
  --jb-orange-50:  #643829;  --jb-orange-60:  #77402F;
  --jb-orange-70:  #964E37;  --jb-orange-80:  #B45E43;
  --jb-orange-90:  #CF7659;  --jb-orange-100: #E18C71;
  --jb-orange-110: #EEA58E;  --jb-orange-120: #F5B6A1;
  --jb-orange-130: #FBC7B7;  --jb-orange-140: #FED6CA;
  --jb-orange-150: #FFE6DD;  --jb-orange-160: #FFF6F3;

  --jb-purple-10:  #1C172B;  --jb-purple-20:  #261E3C;
  --jb-purple-30:  #2B2245;  --jb-purple-40:  #3A2D5F;
  --jb-purple-50:  #4A387B;  --jb-purple-60:  #574092;
  --jb-purple-70:  #6C4EBB;  --jb-purple-80:  #8060DB;
  --jb-purple-90:  #967BEF;  --jb-purple-100: #A894F6;
  --jb-purple-110: #BBACF9;  --jb-purple-120: #C9BDFA;
  --jb-purple-130: #D6CDFB;  --jb-purple-140: #E2DBFC;
  --jb-purple-150: #EDE8FD;  --jb-purple-160: #FAF6FE;

  --jb-teal-10:  #111C1B;  --jb-teal-20:  #152624;
  --jb-teal-30:  #182B2A;  --jb-teal-40:  #1E3A38;
  --jb-teal-50:  #244A46;  --jb-teal-60:  #285653;
  --jb-teal-70:  #2A6C67;  --jb-teal-80:  #31827B;
  --jb-teal-90:  #4B9B93;  --jb-teal-100: #6AAEA6;
  --jb-teal-110: #8CC1BA;  --jb-teal-120: #A2CDC7;
  --jb-teal-130: #B9D9D4;  --jb-teal-140: #CDE4E0;
  --jb-teal-150: #E1EEEC;  --jb-teal-160: #F5F9F8;

  /* Alpha overlays that composite with whatever is underneath, which is why one hover token works on every surface. */
  --jb-alpha-w-10: #FFFFFF10;  --jb-alpha-w-20: #FFFFFF17;
  --jb-alpha-w-30: #FFFFFF21;  --jb-alpha-w-40: #FFFFFF29;
  --jb-alpha-w-50: #FFFFFF3B;
  --jb-alpha-b-10: #00000008;  --jb-alpha-b-20: #00000012;
  --jb-alpha-b-30: #00000020;  --jb-alpha-b-50: #00000045;
}

/* Semantic layer, dark: islands are layer-0, the recessed canvas layer-1 and lighter than them, raised elements layer-2. */

:root {
  /* -- Layers ------------------------------------------------------------ */
  --jb-layer-0:        var(--jb-gray-10);   /* island surface */
  --jb-layer-0-inline: var(--jb-gray-20);   /* inset area inside an island */
  --jb-layer-1:        var(--jb-gray-30);   /* canvas */
  --jb-layer-2:        var(--jb-gray-40);   /* raised */

  /* -- Surfaces ---------------------------------------------------------- */
  --jb-bg-canvas:  var(--jb-layer-1);       /* app background, behind panels */
  --jb-bg-island:  var(--jb-layer-0);       /* every panel, card, content well */
  --jb-bg-inset:   var(--jb-layer-0-inline);/* code block, well inside a panel */
  --jb-bg-raised:  var(--jb-layer-2);       /* floating toolbar, feedback strip */
  --jb-bg-popup:   var(--jb-layer-1);       /* popup and dropdown surface */
  --jb-bg-dialog:  var(--jb-layer-0);       /* modal surface */

  /* Chrome sits flush with the canvas: toolbar, status bar and icon rail are deliberately not islands. */
  --jb-bg-toolbar:   var(--jb-bg-canvas);
  --jb-bg-statusbar: var(--jb-bg-canvas);
  --jb-bg-rail:      var(--jb-bg-canvas);

  /* -- Interaction (alpha, composites over any surface) ------------------ */
  --jb-bg-hover:       var(--jb-alpha-w-20);
  --jb-bg-pressed:     var(--jb-alpha-w-40);
  --jb-bg-hover-subtle: var(--jb-alpha-w-10);

  --jb-bg-selected:          var(--jb-blue-50);
  --jb-bg-selected-muted:    var(--jb-blue-40);
  --jb-bg-selected-inactive: var(--jb-gray-40);

  /* -- Borders ----------------------------------------------------------- */
  --jb-border-island:  var(--jb-gray-30);  /* island edge: same family as fill */
  --jb-border:         var(--jb-gray-40);  /* separator, divider */
  --jb-border-control: var(--jb-gray-50);  /* input, button outline */
  --jb-border-raised:  var(--jb-gray-70);  /* raised control outline */
  --jb-border-transparent: var(--jb-alpha-w-30);

  /* -- Foreground -------------------------------------------------------- */
  --jb-fg:           var(--jb-gray-130);  /* text-default */
  --jb-fg-secondary: var(--jb-gray-100);  /* AA compliant. See note below. */
  --jb-fg-tertiary:  var(--jb-gray-80);   /* JetBrains' text-secondary. Decorative. */
  --jb-fg-disabled:  var(--jb-gray-60);
  --jb-fg-placeholder: var(--jb-gray-80); /* no JetBrains token exists; chosen */
  --jb-fg-on-accent: #FFFFFF;
  --jb-fg-icon:      var(--jb-gray-120);
  --jb-fg-editor:    #BCBEC4;             /* literal in source, not ramped */

  /* --jb-fg-secondary maps to JetBrains' readable muted grey, and their darker secondary becomes --jb-fg-tertiary for decorative metadata. */

  /* -- Accent ------------------------------------------------------------ */
  --jb-accent:         var(--jb-blue-80);   /* #3871E1, identical in both themes */
  --jb-accent-hover:   var(--jb-blue-70);
  --jb-accent-pressed: var(--jb-blue-60);
  --jb-link:           var(--jb-blue-100);
  --jb-focus:          var(--jb-blue-80);   /* identical in both themes */

  /* Status colours in two intensities: solid fills a control, soft backs a banner, and they are not interchangeable. */
  --jb-error:             var(--jb-red-100);
  --jb-error-solid:       var(--jb-red-80);
  --jb-error-bg:          var(--jb-red-40);
  --jb-error-border:      var(--jb-red-60);
  /* The one red carrying --jb-fg-on-accent at 4.6:1, which is why it is the same step in both themes. */
  --jb-count-danger:      var(--jb-red-80);
  /* The ink pair, for a count that rides another number and has to read against the card rather than a fill. */
  --jb-count-danger-tint: var(--jb-red-100);
  --jb-count-accent-tint: var(--jb-blue-100);
  --jb-warning:           var(--jb-yellow-100);
  --jb-warning-solid:     var(--jb-yellow-80);
  --jb-warning-bg:        var(--jb-yellow-40);
  --jb-warning-border:    var(--jb-yellow-60);
  --jb-success:           var(--jb-green-100);
  --jb-success-solid:     var(--jb-green-80);
  --jb-success-bg:        var(--jb-green-40);
  --jb-success-border:    var(--jb-green-60);
  --jb-info:              var(--jb-fg);      /* JetBrains has no info hue */
  --jb-info-bg:           var(--jb-blue-40);
  --jb-info-border:       var(--jb-blue-60);

  /* -- Tabs -------------------------------------------------------------- */
  --jb-tab-selected-bg:            var(--jb-blue-40);
  --jb-tab-selected-border:        var(--jb-blue-60);
  --jb-tab-selected-bg-inactive:   var(--jb-gray-30);
  --jb-tab-hover-bg:               var(--jb-alpha-w-20);

  /* -- Toolbar action colors (the run/stop widget) ----------------------- */
  --jb-run:        var(--jb-green-80);
  --jb-run-hover:  var(--jb-green-70);
  --jb-stop:       var(--jb-red-80);
  --jb-stop-hover: var(--jb-red-70);

  /* -- Editor / code ----------------------------------------------------- */
  --jb-search-match: #BA9752;             /* literal in source */
  --jb-indent-guide: var(--jb-gray-40);
  --jb-inlay-bg:     var(--jb-alpha-w-30);
  --jb-inlay-border: var(--jb-alpha-w-50);
  --jb-caret-row:    #1F2024;             /* IslandSchemeDark.xml */
  --jb-caret:        #CED0D6;

  /* -- Data visualisation ------------------------------------------------ */
  --jb-chart-1: var(--jb-blue-90);
  --jb-chart-2: var(--jb-green-90);
  --jb-chart-3: var(--jb-orange-90);
  --jb-chart-4: var(--jb-purple-90);
  --jb-chart-5: var(--jb-teal-90);
  --jb-chart-6: var(--jb-yellow-90);
  --jb-chart-7: var(--jb-red-90);
  --jb-chart-8: var(--jb-gray-90);
  --jb-chart-grid: var(--jb-gray-40);

  --jb-syntax-keyword:  #D55FDE;
  --jb-syntax-string:   #88C877;
  --jb-syntax-number:   #EFBF6D;
  --jb-syntax-function: #61AFEF;
  --jb-syntax-metadata: #E5C07B;
  --jb-syntax-constant: #2BBAC5;
  --jb-syntax-error:    #E06C75;
}

/* Semantic layer, light: the mapping inverts, so the canvas is the darker grey and islands are white. */

[data-theme="light"] {
  --jb-layer-0:        var(--jb-gray-150);  /* canvas */
  --jb-layer-0-inline: var(--jb-gray-160);
  --jb-layer-1:        var(--jb-gray-160);
  --jb-layer-2:        #FFFFFF;             /* island surface */

  --jb-bg-canvas:  var(--jb-gray-150);
  --jb-bg-island:  #FFFFFF;
  --jb-bg-inset:   var(--jb-gray-160);
  --jb-bg-raised:  #FFFFFF;
  --jb-bg-popup:   #FFFFFF;
  --jb-bg-dialog:  var(--jb-gray-160);

  --jb-bg-toolbar:   var(--jb-bg-canvas);
  --jb-bg-statusbar: var(--jb-bg-canvas);
  --jb-bg-rail:      var(--jb-bg-canvas);

  --jb-bg-hover:        var(--jb-alpha-b-20);
  --jb-bg-pressed:      var(--jb-alpha-b-30);
  --jb-bg-hover-subtle: var(--jb-alpha-b-10);

  --jb-bg-selected:          var(--jb-blue-140);
  --jb-bg-selected-muted:    var(--jb-blue-150);
  --jb-bg-selected-inactive: var(--jb-gray-150);

  --jb-border-island:  var(--jb-gray-150);
  --jb-border:         var(--jb-gray-140);
  --jb-border-control: var(--jb-gray-130);
  --jb-border-raised:  var(--jb-gray-110);
  --jb-border-transparent: var(--jb-alpha-b-30);

  --jb-fg:           #000000;
  --jb-fg-secondary: var(--jb-gray-70);   /* #5F6269, JetBrains' text-muted */
  --jb-fg-tertiary:  var(--jb-gray-80);
  --jb-fg-disabled:  var(--jb-gray-100);
  --jb-fg-placeholder: var(--jb-gray-90);
  --jb-fg-icon:      var(--jb-gray-80);
  --jb-fg-editor:    #080808;

  --jb-accent-hover:   var(--jb-blue-70);
  --jb-accent-pressed: var(--jb-blue-60);
  --jb-link:           var(--jb-blue-70);

  --jb-error:          var(--jb-red-80);
  --jb-error-solid:    var(--jb-red-90);
  --jb-error-bg:       var(--jb-red-160);
  --jb-error-border:   var(--jb-red-130);
  --jb-count-danger:   var(--jb-red-80);
  --jb-count-danger-tint: var(--jb-red-80);
  --jb-count-accent-tint: var(--jb-blue-80);
  --jb-warning:        var(--jb-yellow-80);
  --jb-warning-solid:  var(--jb-yellow-90);
  --jb-warning-bg:     var(--jb-yellow-160);
  --jb-warning-border: var(--jb-yellow-130);
  --jb-success:        var(--jb-green-80);
  --jb-success-solid:  var(--jb-green-90);
  --jb-success-bg:     var(--jb-green-160);
  --jb-success-border: var(--jb-green-130);
  --jb-info:           #000000;
  --jb-info-bg:        var(--jb-blue-160);
  --jb-info-border:    var(--jb-blue-130);

  --jb-tab-selected-bg:          var(--jb-blue-150);
  --jb-tab-selected-border:      var(--jb-blue-120);
  --jb-tab-selected-bg-inactive: var(--jb-gray-150);
  --jb-tab-hover-bg:             var(--jb-alpha-b-20);

  --jb-run:        var(--jb-green-90);
  --jb-run-hover:  var(--jb-green-80);
  --jb-stop:       var(--jb-red-90);
  --jb-stop-hover: var(--jb-red-80);

  --jb-search-match: #FEE6B1;
  --jb-indent-guide: var(--jb-gray-150);
  --jb-inlay-bg:     var(--jb-alpha-b-20);
  --jb-inlay-border: var(--jb-alpha-b-50);
  --jb-caret-row:    #F5F8FE;
  --jb-caret:        #000000;

  --jb-chart-1: var(--jb-blue-80);
  --jb-chart-2: var(--jb-green-80);
  --jb-chart-3: var(--jb-orange-80);
  --jb-chart-4: var(--jb-purple-80);
  --jb-chart-5: var(--jb-teal-80);
  --jb-chart-6: var(--jb-yellow-80);
  --jb-chart-7: var(--jb-red-80);
  --jb-chart-8: var(--jb-gray-80);
  --jb-chart-grid: var(--jb-gray-150);

  --jb-syntax-keyword:  #A626A4;
  --jb-syntax-string:   #50A14F;
  --jb-syntax-number:   #986801;
  --jb-syntax-function: #4078F2;
  --jb-syntax-metadata: #C18401;
  --jb-syntax-constant: #0184BC;
  --jb-syntax-error:    #E45649;
}

/* Island.borderWidth of 6 is a gap, not a stroke: canvas coloured margin around each panel plus a 1px hairline. */

:root {
  --jb-island-radius:         16px;  /* Island.arc.compact. 20px = spacious. */
  --jb-island-radius-spacious: 20px; /* Island.arc */
  --jb-island-gap:             6px;  /* Island.borderWidth, used as grid gap */
  --jb-island-inactive:        0.56; /* Island.inactiveAlpha */
}

/* Spacing: eight steps on a 4px grid, and there are no other values. */

:root {
  --jb-sp-1: 4px;   /* icon to label inside a control */
  --jb-sp-2: 8px;   /* between related rows; tight inner padding */
  --jb-sp-3: 12px;  /* control inner padding; island inner padding */
  --jb-sp-4: 16px;  /* between controls in a row; panel padding */
  --jb-sp-5: 24px;  /* group / section break */
  --jb-sp-6: 32px;  /* page block separation */
  --jb-sp-7: 48px;  /* major page region */
  --jb-sp-8: 64px;  /* marketing section rhythm */

  --jb-hair:  1px;  /* borders only, never layout */
  --jb-nudge: 2px;  /* optical alignment only, never layout */
}

/* Sizing: JetBrains' literal values, not scaled up. */

:root {
  /* Controls. Button.minimumSize is 72 by 28 in the shipping theme, so 28px is the real IDE height. */
  --jb-h-control: 28px;
  --jb-h-dense:   24px;  /* compact mode */
  --jb-h-large:   36px;  /* touch and primary marketing CTA */
  --jb-w-button-min: 72px;

  --jb-row:       24px;  /* Tree.rowHeight / List.rowHeight */
  --jb-row-dense: 22px;  /* compact mode */
  --jb-tree-indent: 18px;/* Tree.leftChildIndent 7 + rightChildIndent 11 */

  /* Chrome */
  --jb-toolbar-h:    40px;  /* CustomHeader.kt. 32px in compact mode. */
  --jb-toolbar-btn:  30px;  /* MainToolbar.Button.size, 30x30 */
  --jb-statusbar-h:  28px;  /* font derived, ~29px at 13px. Rounded. */
  --jb-panel-head-h: 40px;  /* ToolWindow.Header.height is 41. Rounded. */
  --jb-rail-w:       40px;  /* stripe buttons are 40x40, packed, zero gap */
  --jb-sidebar-w:    240px;

  /* Tabs are two systems: editor tabs are JBTabs at 28, dialog tabs are JTabbedPane at 40. */
  --jb-tab-h:        28px;
  --jb-tab-pill-h:   28px;  /* IslandsTabPainter, 24px compact */
  --jb-tab-radius:   8px;   /* MainToolbar.Button.arc, capped (user directive 260724-spg) */
  --jb-tab-underline: 4px;  /* EditorTabs.underlineHeight */
  --jb-dialog-tab-h: 40px;

  /* Icons */
  --jb-icon:        16px;   /* default: buttons, tree, inline */
  --jb-icon-lg:     20px;   /* toolbar, rail, panel header */
  --jb-icon-sm:     12px;   /* status bar, dense metadata */
  --jb-icon-stroke: 1.5;    /* Lucide at 16px renders ~1.0px. See 08. */

  /* Content widths */
  --jb-measure:  68ch;
  --jb-form-max: 560px;
  --jb-page-max: 1280px;
}

/* Radius: the source has separate control and panel scales, collapsed onto 8 here so nothing reads rounder than the search bar. */

:root {
  --jb-r-sm:    4px;    /* tags, badges, tooltips, inline code, tab underline */
  --jb-r-md:    8px;    /* DEFAULT: buttons, inputs, selects, checkboxes */
  --jb-r-lg:    8px;    /* tab pills, toolbar button hover, popups (capped at the control radius, user directive 260724-spg) */
  --jb-r-panel: 8px;    /* islands: panels, cards, dialogs (capped at the control radius, user directive 260724-spg) */
  --jb-r-pill:  9999px; /* marketing CTA and avatars ONLY. Never in app UI. */
}

/* Typography. */

:root {
  --jb-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --jb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
             Menlo, Consolas, "Liberation Mono", monospace;

  /* 7 steps. App base is 13px, matching the IDE exactly. */
  --jb-t-1: 11px;  /* badge, status bar, dense numerals */
  --jb-t-2: 12px;  /* secondary label, help text (IDE "Medium", default -1) */
  --jb-t-3: 13px;  /* DEFAULT UI: controls, labels, table cells, nav */
  --jb-t-4: 14px;  /* body prose, comments, descriptions */
  --jb-t-5: 16px;  /* section heading (IDE H2, default +3) */
  --jb-t-6: 18px;  /* page heading (IDE H1, default +5) */
  --jb-t-7: 24px;  /* page title */

  /* 3 weights. No others exist. */
  --jb-w-normal: 400;
  --jb-w-medium: 500;
  --jb-w-semi:   600;

  --jb-lh-tight: 1.2;   /* headings, single line controls, editor default */
  --jb-lh-ui:    1.4;   /* UI labels that may wrap */
  --jb-lh-prose: 1.6;   /* body copy */
}

/* Motion, with durations taken from registry.properties. */

:root {
  --jb-dur-in:        130ms;  /* ide.animation.showing.duration */
  --jb-dur-out:       150ms;  /* ide.animation.hiding.duration */
  --jb-dur-tooltip:   150ms;  /* ide.tooltip.animationCycle */
  --jb-delay-tooltip: 300ms;

  --jb-ease-in:  ease-out;
  --jb-ease-out: ease-in;

  /* Instant by design, matching IDE defaults: tab switch, tree expand, list selection, panel collapse, theme switch. */
}

/* Elevation, for floating surfaces only; layout separation uses a border. */

:root {
  --jb-shadow-popup:  0 2px 8px rgba(0, 0, 0, 0.28);
  --jb-shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.36);
  --jb-shadow-toast:  0 4px 16px rgba(0, 0, 0, 0.32);
}

[data-theme="light"] {
  --jb-shadow-popup:  0 2px 8px rgba(0, 0, 0, 0.10);
  --jb-shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.14);
  --jb-shadow-toast:  0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Layers. */

:root {
  --jb-z-sticky:  100;
  --jb-z-overlay: 500;
  --jb-z-popover: 600;
  --jb-z-dialog:  700;
  --jb-z-toast:   800;
  --jb-z-tooltip: 900;
}

/* Responsive and accessibility. */

/* Touch. Keep the visual density, expand the hit area. Primer's approach. */
@media (pointer: coarse) {
  :root {
    --jb-h-control: 36px;
    --jb-row: 36px;
    --jb-tap-min: 44px;
  }
  input, select, textarea { font-size: 16px; } /* iOS zooms below 16px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --jb-dur-in: 0ms;
    --jb-dur-out: 0ms;
    --jb-dur-tooltip: 0ms;
  }
}

/* Breakpoints, reference only since custom properties cannot be used in media queries: 640, 1000, 1280 and 1540 are the permitted four. */