/* styles/tokens.css
 * Canvas variables, same names as website.pen (coGvv). Light mode only.
 * Viewports: M below 900px, D from 900px, W from 1680px. @media cannot read custom
 * properties, so the breakpoints are repeated literally in tokens.css (D and W),
 * typography.css (D and W), layout.css (D: split, grid) and surfaces.css (D and W: edge textures).
 * Change a breakpoint in all four files. */
@layer tokens {
  :root {
    color-scheme: light;

    /* Color */
    /* Text. --ink is body and headings. --ink-2 is secondary text on light surfaces
       (captions, card body); --ink-muted is the muted text role (meta lines, helper
       copy). The two are near-identical on purpose: they track separate canvas roles
       and may diverge. --ink-55 is for text on white and paper only; it fails contrast
       on fern (2.37:1), so use --white or --mist on inverse surfaces. */
    --ink: #0c1f1b;
    --ink-2: #3f4b48;
    --ink-muted: #3f504b;
    --ink-55: #5e6b68;
    --fern: #003829;
    --mist: #e7f3ef;
    --paper: #f4f8f6;
    --white: #fff;
    /* Hover chip on light surfaces (actions board r9m4P) */
    --mint: #bfe6d6;
    --white-25: #ffffff40;
    --fern-30: #0038294d;
    --black-35: #00000059;
    /* Brief web app fern, for the avatar and other real app UI */
    --fern-app: #00513d;
    /* --orange is 3.18:1 on white, below AA for text. Marks, rules and handwritten
       annotations only; never body or UI text. */
    --orange: #e56f0c;
    /* Essay band (komiq, BRqWQ, DHIxx): the ≠ between PDLC and SDLC and its circle scribble */
    --orange-deep: #cc5f0b;
    --magenta: #b22e8b;
    --slate: #4e6375;
    --line: #0c1f1b1f;
    --line-2: #e4e7e6;
    --rule-cell: #e4e7e6;
    --rule-edge: #b9c1be;
    --field-edge: #677b76;
    --error: #b8293d;
    --error-on-inverse: #ff888d;
    --success: #006c52;
    --success-on-inverse: #66dbb4;

    /* actions board */
    /* Button hover and pressed fills: primary lifts to a brighter fern and sinks to near
       black; inverse lifts to mint and sinks to a deeper mint. */
    --fern-hover: #0e6b4f;
    --fern-pressed: #00140d;
    --mint-pressed: #8fcfb6;
    --shadow-btn-hover: 0 6px 16px #00382959;
    --shadow-btn-hover-inverse: 0 6px 16px #00000066;
    --shadow-btn-pressed: inset 0 3px 6px #000000a6;
    --shadow-btn-pressed-inverse: inset 0 3px 6px #00382980;
    /* Site chrome states board (WWTMI): the header's Book a demo deepens on hover and
       presses darker still, with no shadow. */
    --chrome-cta-hover: #00261c;
    --chrome-cta-pressed: #00180f;

    /* primitives board */
    /* Secondary text on fern: index, timecode (70%) and meta line (85%). 7.19:1 and 9.89:1. */
    --white-70: #ffffffb3;
    --white-85: #ffffffd9;
    /* Step numeral. The board draws ink at 40% (2.50:1 on white); 48% is the closest alpha
       that clears 3:1 for large text on white (3.12:1), paper (3.07:1) and mist (3.03:1). */
    --ink-48: #0c1f1b7a;

    /* forms board */
    /* White alphas for fields on fern: disabled fill (5%), disabled edge and checked-disabled
       fill (15%), disabled text (40%, exempt as disabled), field edge (55%, 5.01:1), hover edge (90%). */
    --white-5: #ffffff0d;
    --white-15: #ffffff26;
    --white-40: #ffffff66;
    --white-55: #ffffff8c;
    --white-90: #ffffffe6;

    /* artifacts board */
    /* Dark shells and the video player: white alphas for borders (10%, 12%), the unplayed
       chapter track (35%, non-text), the CC edge (60%) and dark breadcrumb text (65%, 9.6:1
       on ink). Ink scrims dim the poster: hover and paused 30%, loading 50%, ended 60%.
       --black-25 is the on-inverse window shadow. --ink-sep is the breadcrumb separator,
       a decorative glyph (aria-hidden), so it is exempt from text contrast. */
    --white-10: #ffffff1a;
    --white-12: #ffffff1f;
    --white-35: #ffffff59;
    --white-60: #ffffff99;
    --white-65: #ffffffa6;
    --ink-30: #0c1f1b4d;
    --ink-50: #0c1f1b80;
    --ink-60: #0c1f1b99;
    --black-25: #00000040;
    --ink-sep: #a3aca9;

    /* recipes board */
    /* Stage strip: hairlines at ink 15%, current-stage tint at fern 12%. Up next pressed
       card body at white 80% on fern (12.0:1). */
    --ink-15: #0c1f1b26;
    --fern-12: #0038291f;
    --white-80: #ffffffcc;

    /* editorial board */
    /* Editorial rules: ink 16% under filters, list items, previously and definition rows;
       white 20% between featured figures and above the wide editorial-hero foot. */
    --ink-16: #0c1f1b29;
    --white-20: #ffffff33;

    /* Home frames (GWGeW, EkOkW, c09ZZd) */
    /* Rules: ink 20% (M quote rule), 24% (benchmark header), 35% (quote and FAQ grids);
       white 30% (problem dateline). App window shadows: D and W, then M. */
    --ink-20: #0c1f1b33;
    --ink-24: #0c1f1b3d;
    --ink-35: #0c1f1b59;
    --white-30: #ffffff4d;
    --white-50: #ffffff80;
    --white-88: #ffffffe0;
    --elevation-app: 0 1px 2px #00000014, 0 24px 60px #041e161a;
    --elevation-app-m: 0 24px 48px #041e1640;
    /* Decision chips in product shots: pending (orange), confirmed (fern), superseded (grey),
       5.17:1, 6.54:1 and 4.55:1 on their fills; on the dark agents card 5.62:1 and 7.38:1.
       The frames draw superseded ink #66706b (4.48:1); this is the nearest grey that clears
       4.5:1. It is also the grey for meta text in the shots (5.2:1 on white). */
    --chip-pending-bg: #fbede4;
    --chip-pending-ink: #a84612;
    --chip-confirmed-bg: #e6f1ec;
    --chip-confirmed-ink: #1f5f43;
    --chip-superseded-bg: #eef0ef;
    --chip-superseded-ink: #656f6a;
    --chip-pending-bg-dark: #e0855a2e;
    --chip-pending-ink-dark: #f4a47c;
    --chip-confirmed-bg-dark: #ffffff14;
    --chip-confirmed-ink-dark: #a8d8c0;
    /* Product shot surfaces: the agents card, the Monday brief's decision card and its
       quiet button edge, avatar tint, secondary body text, terminal accent. */
    --agents-bg: #0a2e25;
    --needs-bg: #fffaf7;
    --needs-edge: #e8c7b3;
    --btn-quiet-edge: #aeb8b3;
    --avatar-bg: #dce9e3;
    --ink-desc: #3f4b46;
    --term-accent: #8fd3b4;

    /* Brief web app palette for the faux app (js/faux-app.js): the app's semantic tokens
       (brief packages/ui tokens-semantic.css, light mode), converted from OKLCH to hex. */
    --app-ink: #000;
    --app-ink-2: #505050;
    --app-placeholder: #919191;
    --app-line: #e5e2e1;
    --app-line-strong: #c6c6c6;
    --app-soft: #f3f0ef;
    --app-panel: #f9f8f7;
    --app-fern-hover: #006c52;
    --app-fern-soft: #e8f3ec;
    --app-fern-line: #b3e3cf;
    --app-fern-chip: #d3ebdd;
    --app-amber-ink: #994700;
    --app-amber-soft: #fff4eb;
    --app-critical: #d63f50;
    --app-track: #46bf99;
    --app-shadow-sm: 0 2px 4px #00000014, 0 0 1px #00000029;
    /* The composer's resting edge in the frames' app snapshots (GWGeW, EkOkW) */
    --app-composer-line: #b1bbb8;
    /* The composer's attach (+) glyph in the same snapshots (all three frames) */
    --app-composer-icon: #7b7b7b;

    /* Additive (BRI-7762): colors the Personas frames (S0KQOH, JHRBo, n637L1) draw in transcribed
       product UI that no token covers yet. Slack DM window: --slack-source is the source pill
       fill, --slack-edge the "View in Brief" button edge. Brief app windows: sidebar and its
       edge, the top bar and its edge, --app-ink-strong (Home, the current row, the current crumb),
       --app-brand (current bar, New Persona, Accept Persona, Suggested), the tab track and the
       active tab's shadow, --app-field-edge (search, select, signal chips), table rules and the
       suggested and accepted row fills, the High pill (--app-high on --app-high-bg, 8.1:1), the
       Medium pill fill, the interview line highlight and text ink, the source doc
       subtitle, proposal body ink (11.4:1) and the Reject fill (white on it 8.1:1). */
    --slack-source: #1d9bd11a;
    --slack-edge: #1d1c1d30;
    --app-ink-strong: #111;
    --app-sidebar: #fafaf9;
    --app-sidebar-edge: #ececea;
    --app-bar: #fcfbfa;
    --app-bar-edge: #eceae8;
    --app-brand: #1e4d3b;
    --app-tabs: #f1efee;
    --app-tab-shadow: 0 1px 3px #0000001a;
    --app-field-edge: #e2e0df;
    --app-row-rule: #e6e4e2;
    --app-row-suggested: #eef6f2;
    --app-row-accepted: #f1f8f4;
    --app-high: #8b1a2a;
    --app-high-bg: #f3eff1;
    --app-medium-bg: #191919e6;
    --app-quote-mark: #e3f2ea;
    --app-quote-text: #1f1f1f;
    --app-subtitle: #2b2b2b;
    --app-body: #3a3a3a;
    --app-reject: #9b1b30;

    /* Interaction */
    --focus-ring: var(--fern);
    --selection-bg: var(--mist);
    --selection-fg: var(--ink);
    /* Sticky nav height: 64 compact (M), 72 from D */
    --nav-h: 64px;
    --dur-fast: 120ms ease-out;
    --dur-overlay: 160ms;
    --hover-open: 150ms;
    --hover-close: 300ms;

    /* Fonts */
    --font-display: Piazzolla, Georgia, "Times New Roman", serif;
    --font-body: "Spline Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --font-mono: "Spline Sans Mono", ui-monospace, sfmono-regular, menlo, consolas, monospace;
    --font-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;

    /* Spacing scale (all viewports) */
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    /* Page rhythm: mobile values; D and W override below */
    --page-gutter: 24px;
    --container-max: 1280px;
    --measure: min(100%, 36rem);
    --section-xs: 56px;
    --section-sm: 72px;
    --section-md: 76px;
    --section-lg: 88px;
    --section-xl: 96px;
    --section-2xl: 100px;
    --section-3xl: 120px;
    --edge-h: 60px;

    /* Layout primitive defaults; set on any element to override for its subtree */
    --stack-gap: var(--space-24);
    --cluster-gap: var(--space-16);
    --grid-gap: var(--space-16);
    --grid-min: 16rem;
    --split-gap: var(--space-24);
    /* Artifact shell width; a shell sets its D width (utilities.css artifact behavior) */
    --artifact-w: 100%;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Elevation */
    --elevation-subtle: 0 2px 4px #0c1f1b14;
    --elevation-low: 0 3px 8px #0c1f1b1a;
    --elevation-floating: 0 8px 24px #0c1f1b12;
    --elevation-window: 0 16px 40px #0c1f1b14;
    --elevation-raised: 0 12px 32px var(--black-35);
    --elevation-overlay: 0 24px 56px #0000004d;

    /* Additive (BRI-7753): colors the Creating Tickets frames (H78TYO, bLhsb, DAu7Y) draw in
       transcribed product UI and that the foundation has no token for. --orange-ink is orange
       as text (6.45:1 on white): pending notes, labels and refs. --orange-tint and --orange-wash
       are the pending chip and band fills. --brief-surface is the Brief record card;
       --jira-key on --jira-key-bg is the Jira issue-key pill (4.61:1). */
    --orange-ink: #994700;
    --orange-tint: #fdebdb;
    --orange-wash: #fff9f3;
    --brief-surface: #fbfaf6;
    --jira-key: #0c66e4;
    --jira-key-bg: #e9f2ff;

    /* Additive (BRI-7760): colors the Release Readiness frames (Ml6lO, WRLTx, e65Tz) draw in the
       transcribed Jira ticket: --chip-edge is the source chip outline, --fern-3 the status line
       fill (fern at 3%), --orange-40 the outline of the pending chips. */
    --chip-edge: #d9dedc;
    --fern-3: #00382908;
    --orange-40: #e56f0c66;

    /* Additive (BRI-7759): colors the Revisiting Decisions frames (mbyvT, CRqcW, DQH9c) draw in
       transcribed Brief and Slack product UI and that the foundation has no token for. Text
       values pass AA on white: --shot-text 17.4:1, --shot-text-2 5.33:1, --shot-chip-ink 12.6:1,
       --slack-ink-2 6.26:1; white on --shot-confirmed 10.0:1 and on --slack-green 5.34:1. The
       orange alphas are the highlight fill (7%), the re-evaluate fill (6%) and its edge (35%). */
    --shot-text: #1a1a1a;
    --shot-text-2: #6b6b6b;
    --shot-chip: #f3f3f2;
    --shot-chip-edge: #e6e6e4;
    --shot-chip-ink: #333;
    --shot-icon: #8a8a8a;
    --shot-confirmed: #1f4a3b;
    --shot-divider: #edebea;
    --shot-callout: #f4f4f2;
    --shot-field-edge: #d9dedc;
    --shot-modal-shadow: 0 2px 8px #0c1f1b0f;
    --orange-7: #e56f0c12;
    --orange-6: #e56f0c0f;
    --orange-35: #e56f0c59;
    --slack-ink: #1d1c1d;
    --slack-ink-2: #616061;
    --slack-badge: #1d1c1d12;
    --slack-green: #007a5a;
    --slack-button-edge: #d0d0d0;
    --slack-line: #e8e8e8;
    --font-slack: Lato, "Helvetica Neue", arial, sans-serif;

    /* Additive (BRI-7758): Slack colors the Answering in Slack thread card (qqaHR, tMWDp,
       blNSE) draws beyond the block above. --slack-link on --slack-mention is 5.6:1 (the
       @mention pill and source links); --slack-field is the composer edge. */
    --slack-link: #1264a3;
    --slack-mention: #e8f5fa;
    --slack-field: #ddd;

    /* Additive (BRI-7755): the Coding with Agents frames (ZWDMq, ITpMT, mpVj3). The Claude Code
       terminal transcribed from the video: --term-bg window, --term-raised prompt band, --term-ink
       text (13.1:1), --term-dim muted text (8.1:1), --term-error hook errors (6.6:1). The change
       table's statuses on white: --status-landed (5.4:1), --status-held (5.1:1). */
    --term-bg: #1e1f1e;
    --term-raised: #2b2c2b;
    --term-ink: #e4e5e2;
    --term-dim: #b4b6b2;
    --term-error: #ff7b72;
    --status-landed: #1f7a45;
    --status-held: #c43d3d;

    /* Additive (BRI-7754): colors the Customer Feedback frames (oF2GB, LlDUC, W6doM) draw in
       transcribed product UI that the blocks above have no token for. Slack text, rules and the
       day pill edge reuse --slack-ink, --slack-ink-2, --slack-line and --slack-field; record text
       reuses --shot-text and --shot-text-2. Highlighted rows: orange at 10% (light cards) and 15%
       (terminal). Black record titles; record rules; the outlined tag green (6.2:1); the count
       chip text and edge. The coding agent terminal, --console-* (apart from BRI-7755's --term-*):
       window, title bar, text, path grey, error red and the quoted decision. */
    --orange-10: #e56f0c1a;
    --orange-15: #e56f0c26;
    --shot-black: #000;
    --shot-rule: #e5e2e1;
    --shot-tag: #1f6b55;
    --shot-count: #3a3a3a;
    --shot-count-edge: #d5d3d2;
    --console-bg: #191a19;
    --console-bar: #262626;
    --console-ink: #ededed;
    --console-meta: #9a9a9a;
    --console-error: #d9a19a;
    --console-quote: #f3d9c9;
    /* Dimmed rows. The frames draw them at 45% opacity, which puts their text at 1.9 to 4.0:1.
       Each is the frame's own colour at the lowest opacity that clears 4.5:1 on its surface:
       Slack, Brief and feature text #767676 (4.54:1), ink and ink-55 #6d7976 (4.52:1), the green
       tag #42826f (4.51:1), the decision chip #67716e on its dimmed fill (4.53:1), terminal text
       and paths #828282 (4.54:1), terminal errors #9f7973 (4.54:1). Non-text parts (avatars,
       icons, rules, edges, fills) keep the frames' 45%. */
    --shot-dim: #767676;
    --shot-dim-ink: #6d7976;
    --shot-dim-tag: #42826f;
    --shot-dim-chip: #67716e;
    --console-dim: #828282;
    --console-dim-error: #9f7973;

    /* Additive (BRI-7757): the Decision History frames (yyx3A, QmUHr, A6sLXc). --white-18 rules the
       hero's chapter list on fern; --orange-50 is the pin leader on the product shot. The --doc-*
       values are the transcribed Brief document window (its edge is --shot-field-edge): its shadow,
       the collapsed sidebar and its edge, body text (13.9:1 on white), the table head fill and the
       list dots. */
    --white-18: #ffffff2e;
    --orange-50: #e56f0c80;
    --doc-window-shadow: 0 8px 24px #0c1f1b14;
    --doc-sidebar: #fcfbfa;
    --doc-sidebar-edge: #eceae8;
    --doc-text: #2e2e2e;
    --doc-table-head: #fafaf9;
    --doc-bullet: #9a9a9a;

    /* Additive (BRI-7763): the Product Leadership frames (EbXYO, mfzCv, Z6Dk1). --shot-guide and
       --shot-rule-cool are the transcribed launch panel's column guides and its row, head and lane
       rules; --shot-done, --shot-rework and --shot-rework-ink are the rework figure's done and
       rework pills (5.7:1); --shot-conflict-edge outlines the spec card the conflict cell flags;
       --ink-6 and --ink-40 are the timeline's event chip fill and dot; --mist-2 is secondary text
       on fern (lede, caption and attribution, 9.9:1). */
    --shot-guide: #f0eeed;
    --shot-rule-cool: #e3e8e5;
    --shot-done: #ddf1ea;
    --shot-rework: #fceee2;
    --shot-rework-ink: #9c4407;
    --shot-conflict-edge: #f3c9a4;
    --ink-6: #0c1f1b0f;
    --ink-40: #0c1f1b66;
    --mist-2: #d6e3dc;
    /* Additive (BRI-7756): colors the Code Review frames (u6eJ8g, DWV0p, SC6Wj) draw in transcribed
       product UI and that the foundation has no token for. --gh-* are the GitHub commit view: ink,
       muted ink (icons, owner, line numbers, 5.74:1 on --gh-subtle), rules, the file header and gutter
       fill, the SHA chip fill. --diff-keyword is the diff's SQL keyword ink (4.87:1). --app-prose is the
       Brief document's paragraph ink. --brief-rule is the rule under the bars and between the rows of
       the commit facts and Brief's answer. */
    --gh-ink: #1f2328;
    --gh-ink-muted: #59636e;
    --gh-line: #d1d9e0;
    --gh-subtle: #f6f8fa;
    --gh-sha: #818b981f;
    --diff-keyword: #6b7370;
    --app-prose: #2e2e2e;
    --brief-rule: #e3e6e2;

    /* Additive (BRI-7761): the Status Reporting frames (M2zsme, xzReC, GvHcD). --slack-placeholder
       is the grey bar standing in for carried-over lines in a Slack reply; --elevation-doc is the
       Brief document window's shadow (0 20 48, ink 8%). */
    --slack-placeholder: #ededed;
    --elevation-doc: 0 20px 48px #0c1f1b14;
    /* Defaults for settable shells, each the value its declaration had: the side caption's line
       height (artifacts.css), the media crop's D track list (artifacts.css), the indexed row's
       block padding (primitives.css). A page sets its frame's value in its own concern file. */
    --caption-side-lh: 1.5;
    --media-crop-columns: minmax(0, 860px) minmax(0, 1fr);
    --indexed-row-pad: 11px;
    /* Additive (BRI-7764): colors the AI Transformation frames (vKITz, aDCQL, m3k12K) draw and
       that no token covers. --ink-deck is the decks and footnote body (14.8:1 on white).
       --pending-tint is the decision record's pending pill fill (--chip-pending-ink on it 4.93:1).
       --mint-ink is the agent log result, the terminal's tool call, the ledger's Brief head and the
       case rule (10.4:1 on --fern-deep, 8.2:1 on fern). --fern-deep is the terminal window;
       --white-4 its highlighted rows, --white-8 the agent log rules, --paper-90 its body text
       (11.7:1 on a highlighted row). --mist-70 is the ledger's field label on fern at 390 (6.5:1).
       --stat-muted is the benchmark's Without column (4.71:1 on white). --orange-aa is the context
       decay figure's GONE status: the frames draw --orange (3.18:1 at 11px), and this is the same
       hue at the lightness that clears 4.5:1 (4.53:1). */
    --ink-deck: #1f2a24;
    --pending-tint: #fbe7d6;
    --mint-ink: #8edbbe;
    --fern-deep: #062219;
    --white-4: #ffffff0a;
    --white-8: #ffffff14;
    --paper-90: #f4f8f6e6;
    --mist-70: #e7f3efb3;
    --stat-muted: #6b7672;
    --orange-aa: #bc5b0a;
    /* Additive (BRI-7768): the Careers frames (yMpVN, Z5gb8, cBNRL) draw the hero register's mono
       keys (LOCATION, TEAM, OPEN ROLES) in ink at 80% (#0C1F1BCC), 9.1:1 on white. */
    --ink-80: #0c1f1bcc;
    /* Additive (BRI-7767): the About frames (h6DJh, ZwYZb, W0b6MD) draw the lifecycle figure's
       empty coding-agent cells on fern in white at 6% (#FFFFFF0F). Its register keys and the
       letter's sign-off reuse --ink-80. */
    --white-6: #ffffff0f;
    /* Additive (BRI-7776): the Termynal transcript on the campaign pages (/ship-faster/ hero), as
       it rendered before the swap. --term-window is the window; --term-light-close, -min and -max
       are the three window lights (decorative); --term-text is output (15.2:1 on the window),
       --term-prompt the $ prompt and system lines (5.1:1), --term-typed the user's typed input
       (10.8:1) and --term-agent the commands the agent runs itself (8.4:1). */
    --term-window: #0f1115;
    --term-light-close: #d9515d;
    --term-light-min: #f4c025;
    --term-light-max: #3ec930;
    --term-text: #e4e7ec;
    --term-prompt: #7a8599;
    --term-typed: #4ade80;
    --term-agent: #fb923c;

    /* Additive (BRI-7805): motion. One movement for the hero entrance and the once-only
       figure reveal: rise --space-12 and fade, decelerating. Hover and focus keep --dur-fast. */
    --dur-settle: 480ms;
    --dur-reveal: 400ms;
    --dur-stagger: 40ms;
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (min-width: 900px) {
    :root {
      --nav-h: 72px;
      --page-gutter: 80px;
      --measure: 720px;
      --section-xs: 96px;
      --section-sm: 120px;
      --section-md: 128px;
      --section-lg: 144px;
      --section-xl: 160px;
      --section-2xl: 168px;
      --section-3xl: 200px;
      --edge-h: 73px;
      --split-gap: var(--space-48);
    }
  }

  @media (min-width: 1680px) {
    :root {
      --page-gutter: 120px;
      --container-max: 1680px;
      --measure: 760px;
      --section-xs: 115px;
      --section-sm: 144px;
      --section-md: 154px;
      --section-lg: 173px;
      --section-xl: 192px;
      --section-2xl: 202px;
      --section-3xl: 240px;
    }
  }
}