/* Fonts: Magistral regular @font-face declaration */
@font-face {
  font-family: "Magistral";
  src: url(fonts/magistral.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Root variables: the theme API. A new theme repaints this block and nothing below the marker */
:root {
  /* Both modes resolve through light-dark() against the used color-scheme, so the scheme is declared here */
  color-scheme: light dark;

  /* Layout */
  --sl-layout-container: 1320px;
  --sl-layout-sidebar: 400px;
  --sl-layout-gutter: 24px;
  --sl-layout-grid: 10px;

  /* Colour: page, surfaces, borders */
  --sl-bg: light-dark(#ffffff, #111827);
  --sl-bg-subtle: light-dark(#f2f4f7, #1a2130);
  --sl-bg-muted: light-dark(#e4e9ef, #212a3a);
  /* The one band dark in both modes: the footer wordmark and the flag are images with white baked in */
  --sl-bg-inverse: #2a303c;
  --sl-surface: light-dark(#f8f9fb, #151d2b);
  /* The well inside the inverse band, one step below it, and fixed for the same reason the band is */
  --sl-surface-sunken: #22272f;
  --sl-border: light-dark(#e8ebee, #2a3444);
  --sl-border-subtle: light-dark(#ebebee, #232c3a);
  --sl-border-muted: light-dark(#d9d9dc, #35404f);
  --sl-border-strong: light-dark(#cad2da, #3b4757);
  --sl-border-inverse: #3b4049;

  /* Colour: text; every tone clears AA on the darkest ground it meets, so `subtle` reads the same tone */
  --sl-text: light-dark(#222222, #e5e7eb);
  --sl-text-strong: light-dark(#223345, #f3f4f6);
  --sl-text-muted: light-dark(#64717e, #9aa4b2);
  --sl-text-subtle: var(--sl-text-muted);
  /* The muted text and the link that read on the inverse band. The band does not turn over, so neither do they */
  --sl-text-inverse: #aab3bf;

  /* Colour: brand and status; a mark never reads a `-subtle` or `-muted` tint, which turns over with the page */
  --sl-primary: light-dark(#30a2f6, #38a9de);
  --sl-primary-subtle: light-dark(#64b1e1, #16323f);
  --sl-primary-strong: light-dark(#1c6e9e, #5cbcea);
  --sl-primary-inverse: #7cc4ee;
  --sl-success: light-dark(#248234, #46c95d);
  --sl-success-subtle: light-dark(#79d78a, #14301b);
  --sl-success-muted: light-dark(#6dd27f, #1b3d23);
  --sl-warning: light-dark(#f47a20, #f0932b);
  --sl-warning-strong: light-dark(#c2410c, #ffb057);
  --sl-warning-subtle: light-dark(#ffa024, #3a2a12);
  --sl-danger: light-dark(#a92c2c, #f06a6a);
  --sl-accent: light-dark(#8c2ca9, #b370cf);
  --sl-info: light-dark(#1d9bf0, #4cb2f0);
  --sl-info-subtle: light-dark(#78c6fb, #14283a);
  --sl-info-muted: light-dark(#6dbaf7, #1a3348);
  /* Text on a solid brand fill: white in light, dark in dark, where the ramp reverses and the fill is the bright one */
  --sl-on-solid: light-dark(#ffffff, #0b1220);
  /* The text on a tinted disc of the floating menu, as the admin theme declares it: white in light, the solid text in dark */
  --sl-solid-text: light-dark(var(--sl-on-solid), #ffffff);

  /* Categorical: the season skins carry a white headline at AA large and do not turn over with the mode */
  --sl-season-winter: #4c8cc9;
  --sl-season-spring: #5d82b7;
  --sl-season-summer: #789e66;
  --sl-season-autumn: #bb887a;
  --sl-season-newyear: #5e98d6;

  /* Control and icon sizes */
  --sl-size-control: 34px;
  --sl-size-chip: 26px;
  --sl-size-tile: 46px;
  --sl-size-avatar: 34px;
  --sl-size-icon-xs: 16px;
  --sl-size-icon-sm: 18px;
  --sl-size-icon-md: 24px;
  --sl-size-icon-lg: 32px;
  --sl-size-icon-xl: 48px;

  /* Type sizes: `hero` is above every heading, the slider headline and the dashboard version; on `display` it would size as an h1 */
  --sl-font-hero: 38px;
  --sl-font-display: 32px;
  --sl-font-h1: 24px;
  --sl-font-h2: 20px;
  --sl-font-h3: 18px;
  --sl-font-h4: 16px;
  --sl-font-body: 14px;
  --sl-font-small: 13px;
  /* The smallest step reads 12 in both themes and the small one 13: 11 read too small */
  --sl-font-micro: 12px;
  /* The face of a quotation: a serif in italic sets the quoted words apart from the running text */
  --sl-face-quote: Georgia, "Times New Roman", serif;
  /* The face of code: the mono font each system already carries, so no file is fetched for it */
  --sl-face-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sl-line-tight: 1.2;
  --sl-line-normal: 1.45;
  --sl-line-loose: 1.6;
  --sl-weight-normal: 400;
  --sl-weight-medium: 500;
  --sl-weight-semibold: 600;
  --sl-weight-bold: 700;
  --sl-track-wide: 0.4px;
  /* A headline number at the hero step is set tighter than the face spaces it, so the digits read as one figure */
  --sl-track-tight: -1px;
  --sl-fade-subtle: 0.8;
  --sl-fade-muted: 0.55;
  --sl-fade-disabled: 0.45;

  /* The ladders every theme shares, values included. The steps above 8 are the second rhythm of a page */
  --sl-space-1: 2px;
  --sl-space-2: 4px;
  --sl-space-3: 8px;
  --sl-space-4: 10px;
  --sl-space-5: 12px;
  --sl-space-6: 16px;
  --sl-space-7: 20px;
  --sl-space-8: 24px;
  /* The second rhythm: the gap between the sections of a page, which sits above every gap inside a component */
  --sl-space-9: 32px;
  --sl-space-10: 40px;
  --sl-space-11: 48px;
  --sl-radius-1: 4px;
  --sl-radius-2: 8px;
  --sl-radius-3: 12px;
  --sl-radius-pill: 999px;
  --sl-radius-circle: 50%;

  /* Shadows: the roles a lift takes, from the hairline under a control to the ring a focused one draws */
  --sl-shadow-xs: 0 1px 2px light-dark(rgba(42, 48, 60, 0.12), rgba(0, 0, 0, 0.5));
  --sl-shadow-raised: 0 1px 4px 0 var(--sl-scrim-subtle);
  --sl-shadow-float: 0 6px 12px light-dark(rgba(0, 0, 0, 0.175), rgba(0, 0, 0, 0.66));
  --sl-shadow-inset: inset 0 1px 2px 0 var(--sl-scrim-subtle);
  --sl-shadow-focus: 0 0 0 var(--sl-ring-width) var(--sl-ring-bg);
  --sl-shadow-color: light-dark(rgba(42, 48, 60, 0.18), rgba(0, 0, 0, 0.62));
  --sl-panel-shadow: 0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.62));

  /* Components: form field, shared by input, textarea, select and file controls */
  --sl-field-height: 30px;
  /* A list that picks several options grows up to this height, and a longer one scrolls inside it */
  --sl-select-height: 240px;
  --sl-field-pad-x: var(--sl-space-5);
  --sl-field-pad-y: var(--sl-space-3);
  --sl-field-bg: var(--sl-bg);
  --sl-field-border: var(--sl-border-strong);
  --sl-field-radius: var(--sl-radius-1);
  --sl-field-text: var(--sl-text-muted);
  --sl-field-ring: var(--sl-ring-bg);
  --sl-field-shadow: inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.45));
  /* The caption column grows to its longest caption up to this share of the form */
  --sl-form-label-width: 40%;

  /* Components: the window canon, one dialog with four axes */
  --sl-modal-width: 560px;
  --sl-modal-height: 42px;
  --sl-modal-gap: 24px;
  --sl-modal-pad-x: 20px;

  /* Components: check, switch, forum icon, image placeholder, avatar */
  --sl-check-width: 16px;
  --sl-check-bg: var(--sl-primary);
  --sl-switch-width: 58px;
  --sl-switch-height: 24px;
  --sl-forum-width: 64px;
  /* The meta row of an article: a row height and no control, so the component is what names it */
  --sl-meta-height: 24px;
  /* The list thumbnail is square, so one name carries both sides */
  --sl-thumb-height: 60px;
  --sl-placeholder-height: 64px;
  --sl-avatar-border: 6px;

  /* Components: the login bar and its dropdown */
  --sl-login-height: 30px;
  --sl-login-width: 162px;
  --sl-login-pad-x: 15px;
  --sl-login-pad-y: 5px;
  --sl-login-gap: 8px;
  --sl-login-radius: 15px;
  --sl-drop-width: 180px;
  --sl-drop-pad-x: 20px;
  --sl-drop-pad-y: 20px;
  --sl-drop-radius: 6px;

  /* Components: the button - one gradient face, one shadow for both bevel edges and the lift, a label one step brighter */
  --sl-btn-bg: linear-gradient(to top, light-dark(#f8f9fb, #232d3d) 0%, light-dark(#ebedf1, #1a2230) 100%);
  --sl-btn-text: light-dark(#2a303c, #e5e7eb);
  --sl-btn-shadow:
    inset 0 0 0 1px light-dark(rgba(247, 251, 255, 0.95), rgba(255, 255, 255, 0.06)),
    0 0 0 1px light-dark(rgba(202, 210, 218, 0.85), rgba(0, 0, 0, 0.6)),
    0 2px 4px light-dark(rgba(42, 48, 60, 0.16), rgba(0, 0, 0, 0.55));
  --sl-btn-mix: 85%;

  /* Gradients: each one at a single address, its stops read from the colour tokens */
  --sl-grad-line: linear-gradient(
    90deg,
    rgba(100, 177, 225, 0) 0%,
    rgba(100, 177, 225, 0.35) 12%,
    rgba(48, 162, 246, 0.7) 32%,
    var(--sl-primary-strong) 50%,
    rgba(48, 162, 246, 0.7) 68%,
    rgba(100, 177, 225, 0.35) 88%,
    rgba(100, 177, 225, 0) 100%
  );
  --sl-grad-gloss: linear-gradient(
    145deg,
    light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0)
  );
  /* The caption shade over a picture, shared by the site strip and the brand archive */
  --sl-grad-caption: linear-gradient(
    to bottom,
    transparent 20%,
    color-mix(in srgb, var(--sl-pres-ground-bg) 20%, transparent) 45%,
    var(--sl-pres-ground-bg) 100%
  );
  --sl-grad-progress-1: linear-gradient(to top, #00adee 10%, var(--sl-progress-1) 90%);
  --sl-grad-progress-2: linear-gradient(to top, #8fc857 10%, var(--sl-progress-2) 90%);
  --sl-grad-progress-3: linear-gradient(to top, #faa51a 10%, var(--sl-progress-3) 90%);
  --sl-grad-progress-4: linear-gradient(to top, #dd5f5f 10%, var(--sl-progress-4) 90%);
  --sl-grad-progress-5: linear-gradient(to top, #bf5fdd 10%, var(--sl-progress-5) 90%);

  /* Categorical: the five level-meter tones; a poll cycles them by option number, so none carries a rank */
  --sl-progress-1: #0078a5;
  --sl-progress-2: #5c9425;
  --sl-progress-3: #f47a20;
  --sl-progress-4: #a92c2c;
  --sl-progress-5: #8c2ca9;

  /* Components: the level meter track. The fill takes the track less its own hairline on each side */
  --sl-progress-bg: var(--sl-border);
  --sl-progress-border: var(--sl-border-strong);
  --sl-progress-radius: 3px;
  --sl-progress-height: 10px;

  /* Components: the gradients one component owns each - the changelog day head and the two edge tabs */
  --sl-changelog-date-bg: linear-gradient(135deg, var(--sl-info-subtle) 0%, var(--sl-info-muted) 100%);
  --sl-feedback-bg: linear-gradient(to right, var(--sl-info-subtle) 0%, var(--sl-info-muted) 100%);
  --sl-idea-bg: linear-gradient(to right, var(--sl-success-subtle) 0%, var(--sl-success-muted) 100%);

  /* Colour: washes and veils; a tint lies over what is behind it, a scrim hides it, and the editor package reads the base */
  /* The bar between lower menu items survives only on the widest step, where the menu is one row that cannot wrap */
  --sl-sep-height: 16px;
  --sl-scrim-subtle: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  --sl-scrim-muted: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55));
  --sl-scrim: color-mix(in srgb, var(--sl-text-strong) 34%, transparent);
  --sl-scrim-strong: color-mix(in srgb, var(--sl-text-strong) 58%, transparent);
  --sl-tint: color-mix(in srgb, var(--sl-primary) 10%, transparent);
  --sl-tint-strong: color-mix(in srgb, var(--sl-primary) 24%, transparent);

  /* Motion: the switch every duration is multiplied by, three durations and two curves; the property a transition animates stays literal */
  --sl-time-scale: 1;
  --sl-time-fast: calc(0.15s * var(--sl-time-scale));
  --sl-time-base: calc(0.2s * var(--sl-time-scale));
  --sl-time-slow: calc(0.35s * var(--sl-time-scale));
  --sl-ease-out: ease;
  --sl-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Components: the stagger a fan opens its items by, not a duration; the curve is the one shape the ladder cannot hold */
  --sl-dial-dur: calc(0.05s * var(--sl-time-scale));
  /* The overshoot a poll option answers a click with: a curve leaving the 0-1 range is a different kind of motion */
  --sl-vote-ease: cubic-bezier(0.3, 1.6, 0.5, 1);
  --sl-alert-dur: calc(1.8s * var(--sl-time-scale));
  --sl-fav-dur: calc(0.55s * var(--sl-time-scale));
  /* The overshoot the favourite icon pops with, the same kind of motion as the poll option above */
  --sl-fav-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sl-flash-dur: calc(5s * var(--sl-time-scale));
  /* Freshness is read as a rate: each age step breathes at its own speed, so no ladder governs them */
  --sl-fresh-dur: calc(1.5s * var(--sl-time-scale));
  --sl-fresh-now-dur: calc(0.8s * var(--sl-time-scale));
  --sl-fresh-day-dur: calc(1.5s * var(--sl-time-scale));
  --sl-fresh-days-dur: calc(1.9s * var(--sl-time-scale));
  --sl-fresh-week-dur: calc(4s * var(--sl-time-scale));
  --sl-fresh-month-dur: calc(2.6s * var(--sl-time-scale));
  --sl-marquee-dur: calc(5s * var(--sl-time-scale));
  /* A marquee moves in discrete steps, one per character of the line it carries, so its curve is a step function */
  --sl-marquee-ease: steps(50);
  --sl-modal-dur: calc(0.22s * var(--sl-time-scale));
  /* The overshoot a dialog opens with: a curve leaving the 0-1 range is a different kind of motion, not a ladder step */
  --sl-modal-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  /* The overshoot of an alert: a success tick lands from its turn */
  --sl-alert-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sl-pulse-dur: calc(2s * var(--sl-time-scale));
  /* The motion of the presentation cockpit, as the panel moves its own: a light round a frame under the hand and an arc filling */
  --sl-aurora-dur: calc(5.4s * var(--sl-time-scale));
  --sl-knob-dur: calc(1.4s * var(--sl-time-scale));
  /* A running figure, one series in both themes: how long it runs, which setFigureRun() of slaed.js reads off its flare, the colour it runs in and its glow */
  --sl-figure-dur: calc(0.9s * var(--sl-time-scale));
  --sl-figure-text: var(--sl-success);
  --sl-figure-shadow: 0 0 var(--sl-space-5) var(--sl-success);
  --sl-skel-dur: calc(1.2s * var(--sl-time-scale));
  --sl-spin-dur: calc(6s * var(--sl-time-scale));

  /* Layers in overlap order: a value between two of them is a missing step, never a number picked to win */
  --sl-z-base: 0;
  --sl-z-raised: 1;
  --sl-z-overlay: 3;
  --sl-z-dropdown: 30;
  /* The section rail of the presentation page stays over the content it scrolls, under every dropdown of the header */
  --sl-z-sticky: 40;
  --sl-z-popover: 1000;
  --sl-z-modal: 3000;
  --sl-z-toast: 10000;

  /* The focus ring: one width, gap and alpha for outline and box-shadow alike */
  --sl-ring-width: 2px;
  --sl-ring-gap: 2px;
  --sl-ring-mix: 18%;
  --sl-ring-bg: color-mix(in srgb, var(--sl-primary) var(--sl-ring-mix), transparent);

  /* Components: geometry; what a figure sizes decides whether it is a token, never how large it is */
  --sl-alert-border: 3px;
  /* The action of an alert is a chip: under the hand a ring of the alert tone this wide, and the share of a tone its ring and a quiet disc carry */
  --sl-alert-act-ring: 3px;
  --sl-alert-act-mix: 18%;
  --sl-arrow-width: 8px;
  --sl-aside-width: 170px;
  --sl-ava-border: 4px;
  /* The disc the avatar stands on: the halo it wears against the page, and the lift under it */
  --sl-avatar-shadow: 0 0 0 4px var(--sl-bg), var(--sl-panel-shadow);
  --sl-bar-shadow: 0 1px 2px 0 var(--sl-scrim-muted);
  --sl-avatar-width: 64px;
  --sl-avatar-height: 64px;
  --sl-avatar-min-height: 78px;
  --sl-badge-width: 20px;
  --sl-badge-height: 20px;
  --sl-btn-height: 30px;
  --sl-bullet-bg: light-dark(#65486c, #b98cc2);
  --sl-cab-act-width: 76px;
  --sl-cab-msg-width: 28px;
  --sl-cab-msg-height: 28px;
  --sl-cab-ring-width: 112px;
  --sl-cab-ring-height: 112px;
  --sl-calc-width: 65px;
  --sl-card-shadow: 0 1px 3px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.42));
  --sl-changelog-width: 1400px;
  --sl-changelog-body-border: 4px;
  --sl-changelog-files-height: 300px;
  --sl-changelog-stat-width: 50px;
  --sl-check-tick-border: 2px;
  --sl-check-tick-width: 4px;
  --sl-check-tick-height: 8px;
  /* A tinted pill paints one wash of its own colour, and the pointer deepens that wash rather than naming a second colour */
  /* A code block opens folded to this height when it is long: twenty of its lines */
  --sl-code-max-height: 20lh;
  --sl-chip-mix: 14%;
  --sl-chip-bg: color-mix(in srgb, currentColor var(--sl-chip-mix), transparent);
  --sl-chip-tint-mix: 24%;
  --sl-chip-tint-bg: color-mix(in srgb, currentColor var(--sl-chip-tint-mix), transparent);
  /* The keys of the admin block are washed in their own tone: the ground carries this much of it, the border three times, a pointer twice */
  --sl-adm-mix: 8%;
  /* The floating menu: a round app is one tile, the light end of its disc keeps this much of its tone, a pop stops at this size, all sections at the wide one */
  --sl-dock-height: var(--sl-size-tile);
  --sl-dock-gap: var(--sl-space-3);
  --sl-dock-mix: 62%;
  --sl-dock-width: 600px;
  --sl-dock-max-width: 340px;
  --sl-dock-max-height: min(72vh, 560px);
  --sl-col-amount-width: 15%;
  --sl-col-check-width: 36px;
  --sl-col-form-width: 35%;
  --sl-col-last-width: 140px;
  --sl-col-num-width: 45px;
  --sl-col-status-width: 80px;
  --sl-com-width: 130px;
  --sl-com-arrow-width: 17px;
  --sl-com-ava-border: 2px;
  --sl-com-ava-width: 64px;
  --sl-com-ava-height: 64px;
  --sl-com-item-width: 93px;
  --sl-crumb-bar-height: 2px;
  --sl-demo-height: 76px;
  --sl-node-find-width: 200px;
  /* The halo a speed dial opens behind its items: the step it clears the chip by on every side */
  --sl-dial-gap: 6px;
  --sl-donut-width: 76px;
  --sl-donut-height: 76px;
  /* The thickness of the session ring, which is the donut less its hole, halved */
  --sl-donut-ring: 8px;
  /* The dark mode veil over the photo bands; transparent in light, where the photograph needs no help */
  --sl-band-bg: light-dark(transparent, rgba(8, 16, 26, 0.5));
  /* The one white that never turns over: the photo band, the footer wordmark, the edge tabs and the dial chips have no dark variant */
  --sl-band-text: #ffffff;
  /* The beam across both photo bands runs at an even rate, because an eased pass hurries through the middle the eye watches */
  --sl-beam-width: 30%;
  --sl-beam-dur: calc(8s * var(--sl-time-scale));
  --sl-beam-bg: light-dark(rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.42));
  /* The light that follows the pointer over the page */
  --sl-pointer-width: 300px;
  /* The two tabs standing on the page edges: how tall one is, and the gutter a wide page reserves for one per side */
  --sl-edge-width: 40px;
  --sl-edge-height: 190px;
  --sl-editor-height: 100px;
  --sl-editor-max-height: 50vh;
  /* The command capsule of an editor beside its tab: wider than this it scrolls instead of pushing the tab off its line */
  --sl-capsule-max-width: 60%;
  --sl-entry-height: 42px;
  /* The lower menu is as tall as the top bar, a floor below the wide step; its link height is a thumb target on a phone */
  --sl-fmenu-height: var(--sl-topbar-height);
  --sl-fmenu-min-height: 44px;
  --sl-f-title-width: 28px;
  --sl-f-title-height: 3px;
  /* The favourite burst: the ring, its share of the brand colour and two spark sets, one per pseudo-element */
  --sl-fav-ring: 14px;
  --sl-fav-mix: 60%;
  --sl-fav-shadow:
    13px -13px var(--sl-warning), -13px -13px var(--sl-primary), 15px 7px var(--sl-warning);
  --sl-spark-shadow:
    -15px 7px var(--sl-primary), 10px 14px var(--sl-warning), -10px 14px var(--sl-primary);
  --sl-flash-max-height: 200px;
  --sl-flash-bar-height: 2px;
  --sl-fp-width: 160px;
  --sl-fp-height: 40px;
  --sl-fp-ava-width: 100px;
  --sl-fp-ava-height: 100px;
  --sl-header-height: 116px;
  /* A tile paints ground and border from its own colour; where that colour is a scoped tone only the ratio can be hoisted */
  --sl-ico-mix: 12%;
  --sl-ico-bg: color-mix(in srgb, currentColor var(--sl-ico-mix), var(--sl-bg));
  --sl-ico-border: color-mix(in srgb, currentColor 26%, var(--sl-border));
  --sl-tile-mix: 45%;
  --sl-hub-head-height: 34px;
  --sl-hub-row-height: 46px;
  --sl-info-row-height: 31px;
  --sl-item-height: 38px;
  --sl-letter-width: 16px;
  --sl-letter-height: 16px;
  --sl-live-dot-border: 2px;
  --sl-live-dot-width: 12px;
  --sl-live-dot-height: 12px;
  --sl-logo-height: 59px;
  --sl-login-drop-width: 260px;
  --sl-madein-width: 54px;
  --sl-menu-width: 150px;
  --sl-meter-height: 8px;
  --sl-metric-min-width: 150px;
  --sl-mode-width: var(--sl-size-control);
  --sl-mode-height: var(--sl-size-control);
  --sl-mode-bg: linear-gradient(to right, color-mix(in srgb, var(--sl-primary) 35%, var(--sl-surface-sunken)), var(--sl-surface-sunken));
  --sl-modal-border: 3px;
  --sl-modal-btn-mix: 86%;
  --sl-modal-act-bg: color-mix(in srgb, currentColor 13%, transparent);
  --sl-modal-act-width: 28px;
  --sl-modal-act-height: 28px;
  --sl-modal-btn-width: 116px;
  --sl-modal-btn-height: 32px;
  --sl-msg-width: 440px;
  --sl-msg-brand-width: 240px;
  /* A state lamp's tone is its left edge alone: an amber figure on the page ground fails the contrast crawler */
  --sl-opt-lamp-border: 3px;
  /* The preset gallery of the settings page is capped and scrolls, or one field runs its tile past a thousand points */
  --sl-opt-max-height: 280px;
  /* The rail height is a sum of tokens, not of text, which is why its caption is held to one line */
  --sl-opt-rail-height: 68px;
  --sl-panel-feed-height: 150px;
  --sl-pmf-ava-width: 26px;
  --sl-pmf-ava-height: 26px;
  --sl-pmf-blank-width: 420px;
  --sl-pmf-chip-width: 19px;
  --sl-pmf-chip-height: 19px;
  --sl-pmf-day-bg: color-mix(in srgb, var(--sl-bg-subtle) 94%, transparent);
  --sl-pmf-head-width: 40ch;
  --sl-pmf-mate-width: 40px;
  --sl-pmf-mate-height: 40px;
  --sl-pmf-meta-width: 46%;
  --sl-pmf-pane-height: 340px;
  --sl-pmf-slot-width: 28px;
  --sl-pmf-slot-height: 28px;
  --sl-pmf-text-width: 62ch;
  --sl-pmf-who-width: 44px;
  --sl-pmf-who-height: 44px;
  --sl-popover-min-width: 220px;
  /* Components: the presentation page; every animation is a multiple of the one beat --sl-pres-dur */
  --sl-pres-dur: calc(4s * var(--sl-time-scale));
  --sl-pres-shadow: 0 0 var(--sl-space-5) var(--sl-tint-strong);
  --sl-pres-bg: linear-gradient(color-mix(in srgb, var(--sl-pres-border) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sl-pres-border) 20%, transparent) 1px, transparent 1px);
  --sl-pres-height: 360px;
  --sl-pres-width: 132px;
  --sl-pres-min-height: 200px;
  --sl-pres-panel-bg: light-dark(var(--sl-surface), #0b1d2c);
  --sl-pres-ground-bg: light-dark(var(--sl-bg), #081824);
  --sl-pres-inset-bg: light-dark(var(--sl-bg-subtle), #10283b);
  /* The centre of a core: the brand wash laid opaque over the panel, so the wires meeting behind a core never show through */
  --sl-pres-core-bg: color-mix(in srgb, var(--sl-primary) 24%, var(--sl-pres-panel-bg));
  --sl-pres-border: light-dark(var(--sl-border), #1c4159);
  --sl-pres-frame-border: light-dark(var(--sl-border-strong), #27546c);
  --sl-pres-text: light-dark(var(--sl-text), #ecf8ff);
  --sl-pres-muted-text: light-dark(var(--sl-text-muted), #83a5ba);
  --sl-pres-link-text: light-dark(var(--sl-primary-strong), #6fc8ff);
  --sl-pres-good-text: light-dark(color-mix(in srgb, var(--sl-success) 90%, var(--sl-text)), #72e6b0);
  --sl-pres-warn-text: light-dark(var(--sl-warning-strong), #ffd37d);
  /* The veil over the photos of the presentation: none by day, a dusk by night so a bright picture does not glare on the dark page */
  --sl-pres-photo-bg: light-dark(transparent, rgba(4, 12, 22, 0.32));
  /* The rain of code behind the guard scene: the faint tint by day, the stronger one by night, where the faint one vanishes */
  --sl-pres-rain-bg: light-dark(var(--sl-tint), var(--sl-tint-strong));
  /* The presentation gauge rings: the cockpit and vitals size, the small statistics size; the share is the one share of its tone every glow of the site carries, a ring of focus or a tint is not a glow */
  --sl-gauge-width: 128px;
  --sl-gauge-height: 128px;
  --sl-gauge-min-width: 56px;
  --sl-gauge-min-height: 56px;
  --sl-gauge-mix: 50%;
  /* The light that runs round the frame of a block under the hand: the line it burns on, the share of the frame it covers, the colour it starts in and the one of its head; --sl-aurora-dur at 0s turns it off */
  --sl-aurora-width: var(--sl-space-1);
  --sl-aurora-mix: 20%;
  --sl-aurora-border: var(--sl-primary);
  --sl-aurora-ring: var(--sl-accent);
  /* The glass of the cockpit lamp: gloss and a shaded rim on a disc of the light steps, so its muted words hold 4.5:1; dark on the presentation panel */
  --sl-gauge-bg:
    radial-gradient(ellipse 62% 34% at 50% 12%, var(--sl-beam-bg), transparent 72%),
    radial-gradient(circle at 50% 22%, transparent 50%, light-dark(var(--sl-shadow-color), transparent) 100%),
    radial-gradient(circle at 50% 30%, light-dark(var(--sl-bg), var(--sl-pres-inset-bg)), light-dark(var(--sl-bg-subtle), var(--sl-pres-panel-bg)) 60%,
      light-dark(var(--sl-bg-muted), var(--sl-pres-panel-bg)));
  --sl-gauge-shadow:
    drop-shadow(0 var(--sl-space-3) var(--sl-space-6) var(--sl-shadow-color))
    drop-shadow(0 var(--sl-space-4) var(--sl-space-7) light-dark(var(--sl-shadow-color), transparent))
    drop-shadow(0 var(--sl-space-1) var(--sl-space-2) light-dark(var(--sl-shadow-color), transparent));
  /* The guard scene: the court height and the house width every other part is measured against */
  --sl-guard-height: 420px;
  --sl-guard-width: 224px;
  /* The chart plot of the rhythm section and the hourly bars, and the sparkline floor of a runtime card */
  --sl-plot-height: 238px;
  --sl-plot-min-height: 54px;
  /* The tone the ornament quotation mark carries behind an owner voice */
  --sl-quote-mix: 18%;
  /* A site screenshot card and a brand archive tile row */
  --sl-site-height: 270px;
  --sl-brand-height: 210px;
  --sl-preview-width: 24px;
  --sl-preview-height: 24px;
  --sl-preview-max-width: 48px;
  --sl-preview-max-height: 48px;
  --sl-profile-ava-width: 112px;
  --sl-profile-ava-height: 112px;
  --sl-profile-dot-border: 3px;
  --sl-profile-dot-width: 16px;
  --sl-profile-dot-height: 16px;
  --sl-proof-bg: color-mix(in srgb, var(--sl-danger) 6%, var(--sl-surface));
  --sl-proof-border: color-mix(in srgb, var(--sl-danger) 35%, var(--sl-border-subtle));
  /* A live element answers with a ring that grows and fades: its reach and its starting share of colour */
  --sl-pulse-ring: 8px;
  --sl-pulse-mix: 55%;
  --sl-qr-width: min(64vw, 256px);
  --sl-radio-height: 20px;
  --sl-row-bg: color-mix(in srgb, var(--sl-warning) 7%, transparent);
  --sl-scroll-height: 190px;
  --sl-search-width: 340px;
  --sl-search-min-width: 180px;
  /* The round search button keeps one bevel; the pointer changes its face, never its lift */
  --sl-search-shadow:
    inset 0 1px 1px 0 light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
    0 1px 2px light-dark(rgba(42, 48, 60, 0.12), rgba(0, 0, 0, 0.5));
  /* The plain segmented switch: a sunken track, cells over it and a raised plate under the chosen one */
  --sl-seg-height: var(--sl-size-control);
  --sl-seg-pad-x: 0;
  --sl-seg-pad-y: 0;
  --sl-seg-bg: var(--sl-bg-muted);
  --sl-seg-text: var(--sl-text-muted);
  --sl-seg-knob-bg: var(--sl-bg);
  --sl-seg-knob-text: var(--sl-text-strong);
  --sl-seg-knob-shadow: var(--sl-shadow-raised);
  /* The panel the user card unfolds is pinned this far above the card's bottom edge and may not grow past it */
  --sl-session-gap: 36px;
  --sl-shot-max-height: min(62vh, 460px);
  --sl-shot-side-height: 40vh;
  --sl-skel-height: 24px;
  --sl-skel-width: 54%;
  --sl-sort-width: 10px;
  /* A nested list marks its depth by repeating its own bullet, one step to the right per level */
  --sl-sublist-bg: light-dark(#7282a3, #97a8c2);
  --sl-sublist-two-bg: light-dark(#b9aca6, #cebeb1);
  --sl-sublist-shadow: 15px 0 0 light-dark(#97a8c2, #7282a3);
  --sl-sublist-two-shadow: 15px 0 0 light-dark(#cebeb1, #b9aca6), 30px 0 0 light-dark(#d9c9bc, #a1958a);
  /* The gap the knob of a switch keeps from its track on every side, and the lift the knob rides on */
  --sl-switch-gap: 2px;
  --sl-switch-knob-shadow: 0 1px 3px light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.6));
  /* A switch turned on: its track and the answer on its knob, the system green by day and a mint by night, which reads at 11:1 */
  --sl-switch-on-bg: light-dark(var(--sl-success), #72e6b0);
  --sl-switch-on-text: light-dark(var(--sl-success), #72e6b0);
  --sl-table-border: 2px;
  --sl-t-icon-width: 32px;
  --sl-table-height: 30px;
  --sl-tooltip-min-width: 150px;
  --sl-tooltip-max-width: 300px;
  --sl-topbar-height: 50px;
  /* The height a dialog button takes on a narrow screen, where the pointer is a finger rather than a cursor */
  --sl-touch-height: 40px;
  --sl-veil-height: 18px;
  --sl-view-max-width: 680px;
  --sl-vote-width: 15px;
  --sl-vote-height: 15px;
  --sl-wordmark-width: 170px;
  --sl-wordmark-img-width: 150px;

  /* Components the editor package sizes: the toolbar window, the upload panel, the emoji picker */
  --sl-editor-mode-height: 28px;
  --sl-editor-tab-height: 24px;
  --sl-editor-tab-width: 70px;
  --sl-emoji-max-height: 420px;
  --sl-emoji-grid-height: 292px;
  --sl-emoji-full-gap: 150px;
  --sl-empty-width: 440px;
  --sl-fm-as-height: 30px;
  --sl-fm-body-height: 56vh;
  --sl-fm-busy-bg: color-mix(in srgb, var(--sl-bg) 74%, transparent);
  --sl-fm-drop-height: 140px;
  --sl-fm-empty-width: 440px;
  --sl-fm-field-height: 34px;
  --sl-fm-filter-height: 28px;
  --sl-fm-kind-bg: color-mix(in srgb, var(--sl-bg) 88%, transparent);
  --sl-fm-kind-height: 17px;
  --sl-fm-mode-width: 28px;
  --sl-fm-panel-height: 420px;
  --sl-fm-pick-bg: color-mix(in srgb, var(--sl-bg) 88%, transparent);
  --sl-fm-pick-height: 24px;
  --sl-fm-pick-width: 24px;
  --sl-fm-props-height: 108px;
  --sl-fm-quota-height: 6px;
  --sl-fm-row-height: 32px;
  --sl-fm-row-width: 44px;
  --sl-fm-search-height: 32px;
  --sl-fm-tile-height: 74px;
  --sl-rail-width: 3px;
  --sl-rail-max-width: 150px;
  --sl-skel-row-height: 10px;
  --sl-skel-tile-height: 78px;
  --sl-switch-bg: color-mix(in srgb, var(--sl-primary) 35%, var(--sl-bg));
}

/* Motion off: the reduced-motion setting and the option of the panel set the one switch every duration of the API block is multiplied by */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-time-scale: 0;
  }
}

:root[data-sl-still] {
  --sl-time-scale: 0;
}

/* --- end tokens --- */

/* The mode switch: data-theme is light, dark or auto; any other value or none follows the operating system */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Navigation: an in-page anchor, the link back to #top among them, scrolls smoothly unless the reader asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-sl-still]) {
    scroll-behavior: smooth;
  }
}

/* Reset: the attribute wins over every class, because a component setting display would otherwise keep on the screen what the page has taken off it */
[hidden] {
  display: none !important;
}

/* Reset: zero margins, padding and borders on all HTML elements */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Base: global element styles, typography, links and form defaults */
body {
  background: var(--sl-bg);
  min-width: 0;
}

body,
select,
input,
textarea,
button {
  font-family: Arial, system-ui, -apple-system, sans-serif;
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-normal);
  color: var(--sl-text);
  outline: none;
}

a {
  text-decoration: none;
  color: var(--sl-primary-strong);
}

a:hover {
  cursor: pointer;
  color: var(--sl-primary-strong);
  text-decoration: none;
}

a:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
}

a img {
  border: 0 none;
}

a > img {
  vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--sl-weight-normal);
  line-height: var(--sl-line-tight);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--sl-font-h1);
  margin: var(--sl-space-9) 0 var(--sl-space-4) 0;
  display: block;
  color: var(--sl-text);
}

h2 {
  font-size: var(--sl-font-h2);
  margin: var(--sl-space-8) 0 var(--sl-space-4);
  display: block;
  color: var(--sl-text);
}

h3 {
  font-size: var(--sl-font-h3);
  margin: var(--sl-space-6) 0 var(--sl-space-3);
  display: block;
  color: var(--sl-text);
}

h4 {
  font-size: var(--sl-font-h4);
  margin: var(--sl-space-1) 0;
  display: inline;
  color: var(--sl-text);
}

h5 {
  font-size: var(--sl-font-body);
  margin: 0;
  display: block;
  color: var(--sl-text);
}

p,
dl,
dd,
pre,
ul,
ol,
blockquote {
  margin-bottom: var(--sl-space-7);
}

legend {
  color: var(--sl-primary);
  font-weight: var(--sl-weight-bold);
  padding: var(--sl-space-3);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
}

fieldset {
  overflow: visible;
  padding: var(--sl-space-3);
  margin: var(--sl-space-3) 0 0;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
}

optgroup {
  font-family: Arial, Tahoma, sans-serif;
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-normal);
  color: var(--sl-text);
  outline: none;
}

strong,
b {
  font-weight: var(--sl-weight-bold);
}

em,
cite,
i {
  font-style: italic;
}

caption {
  text-align: left;
}

th,
td {
  vertical-align: middle;
}

small {
  font-size: var(--sl-font-small);
}

hr {
  margin-top: var(--sl-space-7);
  margin-bottom: var(--sl-space-4);
  border: 0;
  border-top: 1px solid var(--sl-border);
}

ul {
  padding-left: var(--sl-space-8);
  list-style: disc outside;
}

ol {
  padding-left: var(--sl-space-8);
  list-style: decimal outside;
}

table {
  max-width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
  min-height: 0;
  line-height: var(--sl-line-tight);
  margin: var(--sl-space-2) 0 0;
  vertical-align: baseline;
  accent-color: var(--sl-primary);
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

input[placeholder] {
  text-overflow: ellipsis;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button[disabled],
input[disabled] {
  cursor: default;
}

/* Code reads in the face of code wherever it stands: inline, in a block, as a key or as the output of a program */
code,
kbd,
samp,
pre {
  font-family: var(--sl-face-mono);
}

blockquote {
  background: var(--sl-bg);
  border-left: 1px solid var(--sl-border-strong);
  border-right: 1px solid var(--sl-border-strong);
  color: var(--sl-text-muted);
  font-family: var(--sl-face-quote);
  font-style: italic;
  margin: var(--sl-space-2);
  padding: var(--sl-space-2);
  border-radius: var(--sl-radius-2);
}

blockquote::before {
  color: var(--sl-border-strong);
  content: "\201c";
  font-size: var(--sl-font-display);
  line-height: 0.1em;
  margin-right: var(--sl-space-3);
  vertical-align: -0.4em;
}

blockquote::after {
  color: var(--sl-border-strong);
  content: "\201d";
  font-size: var(--sl-font-display);
  line-height: 0.1em;
  margin-left: var(--sl-space-2);
  vertical-align: -0.4em;
}

blockquote > p:first-child {
  display: inline;
}

/* Attachments: parser [attach] thumbnails and full-size images, framing and alignment modifiers */
.sl-attach {
  display: inline-block;
  max-width: 100%;
  margin: 0 var(--sl-space-3) var(--sl-space-3) 0;
}

.sl-attach img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sl-attach-left {
  float: left;
}

.sl-attach-right {
  float: right;
  margin: 0 0 var(--sl-space-3) var(--sl-space-3);
}

.sl-attach-center {
  display: block;
  float: none;
  margin: 0 auto var(--sl-space-3);
}