/* Printable-parts design system v0.8.0. Generated by scripts/build-tokens.py from tokens.json. Do not edit. */
:root, [data-theme="light"] {
  color-scheme: light;
  --surface: #f8fafb; /* Page background and the stage background. Light follows the CNC Kitchen apps' paper tone. */
  --surface-raised: #ffffff; /* Panels, dialogs and cards that sit on surface: the controls sidebar, the header, the gallery tiles. */
  --surface-sunken: #edeff0; /* A recessed drawing area inside a panel, such as the board drawing in Sides: darker than surface in every theme (D90). Text on it stays ink. */
  --ink: #16222c; /* Body text, labels, legends on surface and surface-raised (13.7:1 or more). */
  --ink-muted: #5a6773; /* Notes, status-bar hints and units on surface and surface-raised (5.5:1 or more). */
  --border: #d9dfe4; /* Hairlines round groups: fieldsets and the More… and View… menus. Decorative only: 1.3:1, never the sole mark of a control. */
  --border-strong: #7b8791; /* Borders of inputs, selects, buttons and gallery tiles; 3.5:1 or more on surface and surface-raised. */
  --divider: #d9dfe4; /* Rules between regions: under the header, above the plan bar and the status bar, beside the sidebar and the step rail. */
  --error: #b00020; /* Error text and invalid-field outline on surface and surface-raised (7:1). From the project's own #b00020. Always paired with the message text. */
  --warning: #8a5a00; /* Skådis Air: a warning that does not block, such as a board larger than the bed or a thickness outside 4 to 5.5 mm. Text on surface (5.6:1 light). Always with words. */
  --action: #0469b0; /* The primary button's fill (the only filled control); the ring and border of every selected state; the chosen radio's dot and a pressed Sides box; links and the focus ring (5.5:1 on surface). */
  --action-tint: #e9f2f9; /* Hover on a control that can be used, and every selected state (D26); text on it stays ink. */
  --on-action: #ffffff; /* Text on action fills (5.7:1 or more). */
  --scrim: #16222c80; /* The page behind an open modal dialog (its ::backdrop), dimmed so the dialog stands out 3:1: in light by its face, in dark by its border-strong edge, as no dimming of a dark page lifts a dark dialog off it. ink at 50 % in light, black at 50 % in dark. */
  --model-panel: #9aa7b5; /* A panel piece in the 3D stage (project's 0x9aa7b5). Same in both themes: a material, not UI. */
  --model-joint: #5f6b77; /* Joint strips and cross pieces in the stage (0x5f6b77). */
  --model-outline: #3c4650; /* Edge lines over the stage (0x3c4650). */
  --model-tape: #d9822b; /* Foam seal tape in the stage (0xd9822b). Orange means seal. */
  --model-tpu: #2b2b2b; /* Printed TPU seal parts in the stage (0x2b2b2b). Lighter on the dark stage, where the near-black seal and its outline both vanished (1.29:1 and 1.90:1). */
  --model-board: #c9cdd1; /* Skådis Air: a pegboard in the stage (0xc9cdd1). A material, not UI. Same in both themes. */
  --model-board-outline: #4a525a; /* Skådis Air: edge lines over the board (0x4a525a). */
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0f161c;
  --surface-raised: #17212a;
  --surface-sunken: #0c1217;
  --ink: #e6ecf1;
  --ink-muted: #9aa7b3;
  --border: #2a3641;
  --border-strong: #7b8a97;
  --divider: #2a3641;
  --error: #ff8a9a;
  --warning: #e0b050;
  --action: #5aaef0;
  --action-tint: #12303f;
  --on-action: #06202f;
  --scrim: #00000080;
  --model-tpu: #666666;
}
:root {
  --space-1: 0.25rem; /* Between a label and its input; above a note. */
  --space-2: 0.5rem; /* Between radio options; inside a tile. */
  --space-3: 0.75rem; /* Above each label in a fieldset; toolbar gaps. */
  --space-4: 1rem; /* Panel padding and gaps between fieldsets. */
  --space-5: 1.5rem; /* A dialog's padding, and the gap above its buttons. */
  --space-6: 2rem; /* Page padding on the long-text pages. */
  --measure: 46rem; /* Maximum width of running text (the measuring guide, docs). The tool itself is not a column: see workbench. */
  --panel-width: 23.75rem; /* Width of the controls sidebar (380px), at most half the screen, beside the stage; collapsing it with an edge toggle is planned, not built. */
  --header-h: 3rem; /* Height of the header toolbar (48px). One of the bars side by side: with the plan bar's and the status bar's, it sets H, the least screen height for the sidebar beside the stage (D75). */
  --status-h: 2rem; /* Height of the status bar's row, inside its padding (space-1 above and below) and its top rule: the bar is 41px in all. One of the bars side by side, where it keeps one row, its hint cut short (D75). */
  --tap: 2.75rem; /* Minimum touch target (44px). */
  --control-h: 2.25rem; /* Height of buttons, choice buttons, toggles, rail buttons, inputs and selects (a field's block padding is derived from it, D68), the side of a Select's chevron square, and the least height of map cells and disclosure summaries. Becomes tap (44px) on touch screens: its touch value, which tokens.css sets once, for a coarse pointer. */
  --control-pad-y: calc((var(--control-h) - 1lh) / 2); /* Derived, never set: what control-h leaves of one line, above it and below it. A Disclosure summary's block padding, and a field's less its border, so one line of either is control-h tall (D68). control-h is read at the root, its touch value on a touch screen; lh where the padding is, so the line is the element's own. */
  --field-pad-x: 0.55rem; /* Inline padding inside inputs and selects; their block padding is derived from control-h (D68). */
  --icon-gap: 0.45em; /* Space between an icon and its label; a radio or a Sides box, drawn with a ring border, sits icon-gap plus ring from its label. */
  --radio-size: 1.05em; /* Diameter of the radio mark inside a Choice button, and the side of the Sides box. */
  --ring: 2px; /* Width of focus outlines, selected outlines, the radio's and the Sides box's border, and the action-tint gap inside a chosen radio. The radio's offsets are derived from it. */
  --dialog-w: 32rem; /* Maximum width of a dialog; on a narrower screen it keeps space-4 from each edge. */
  --opacity-disabled: 0.55; /* Opacity of a disabled control. */
  --stage-fit: 0.85; /* How much of the stage the part fills when it is framed: its outline spans this share of the stage's limiting side (D15). */
  --stage-min-fill: 0.25; /* Zooming out stops when the part's outline spans this share of the stage's shorter side, so it never shrinks to a dot (D15). */
  --plan-line-min: 7rem; /* The least width of the plan bar's sentence on any screen, so about two lines of 14 or more characters: the bar is one row on every screen, the sentence beside the primary button, which shows a short label (D39, D75). Measured, not guessed: with the short label the sentence is 117px at 320px wide, the narrowest checked screen (Chromium), and 185px beside the sidebar at 768px; beside the full label it was 15px. Nothing in the stylesheet reads it; scripts/check-previews.py fails a screen where the sentence is narrower. */
  --number-field-w: 12rem; /* Widest a number field grows: a number and its spinner, not the sidebar's width. */
  --line: 1px; /* Width of every hairline: control borders, group borders and the rules between regions. */
  --sides-w: 6rem; /* Skådis Air: width of the board drawing in Sides. */
  --sides-h: 4.5rem; /* Skådis Air: height of the board drawing in Sides. */
  --stage-phone-h: 45svh; /* Below the breakpoint, the 3D view's share of the screen height; the plan bar and status bar sit under it, not inside it (D25). svh, so a phone's sliding toolbar never resizes it. */
  --breakpoint-wide: 56rem; /* Screen width at which the sidebar sits beside the stage, on a screen at least H tall: the least height at which the header, the plan bar and the status bar, one row each, leave the 3D view 40 %, which scripts/build-tokens.py derives from their tokens (D75). A media query cannot read a variable, so the stylesheet repeats it; scripts/build-tokens.py checks the two match. */
  --breakpoint-header: 64rem; /* Screen width from which the header shows its actions in its row; narrower, they sit in More… (D28), and the version with them (D51). Wider than breakpoint-wide, so the tool's name stays whole beside them (D49). Checked like the breakpoints. */
  --breakpoint-short: 30rem; /* Below this screen height nothing is pinned: on a short or zoomed screen the stage scrolls with the page, so it never hides the form (D25), and the 3D view's own controls go into View… (D36). Side by side does not wait for it: a screen goes side by side from H tall (D75). A media query cannot read a variable; scripts/build-tokens.py checks the stylesheet repeats it. */
  --landscape-ratio: 4/3; /* A screen at least this much wider than tall and at least breakpoint-side-min wide puts the sidebar beside the stage from H tall, as breakpoint-wide does (D75), so a landscape phone is not stacked (D25). Narrower, it stacks and pins nothing (D41). Checked like the breakpoints. */
  --breakpoint-side-min: 48rem; /* The least width for the sidebar beside the stage on a landscape screen narrower than breakpoint-wide (D41): such a screen stacks as a phone held upright does and pins nothing, so the view keeps stage-phone-h and the page scrolls. With H, the least height side by side (D75), it makes the least screen side by side. Checked like the breakpoints. */
  --radius-sm: 8px; /* Buttons, inputs, selects, gallery tiles and notices: softly rounded. */
  --radius-md: 14px; /* Fieldset groups and dialogs. */
  --font-ui: "FiraCode Nerd Font", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-regular: 400; /* the regular face in fonts/ */
  --weight-bold: 700; /* the bold face in fonts/ */
  --icon-rise: 0.0454em; /* derived from the font: its icons' centre sits this far under its capitals' (D88) */
  --text-title: 700 2.5rem/1.1 var(--font-ui); /* Page or tool name on a header-less page (landing, about). */
  --text-section: 700 1.4rem/1.2 var(--font-ui); /* A dialog's heading (the h2 in .ws-dialog). */
  --text-step: 700 1.1rem/1.3 var(--font-ui); /* The step's title at the top of the sidebar ("Window"), and the tool's name in a wide header. */
  --text-body: 400 0.9375rem/1.5 var(--font-ui); /* Labels, field values and paragraphs. */
  --text-legend: 700 0.9375rem/1.4 var(--font-ui); /* Fieldset legends and details summaries. */
  --text-note: 400 0.8125rem/1.45 var(--font-ui); /* Help text under a field and error messages. */
  --text-label-caps: 400 0.75rem/1.3 var(--font-ui); /* Section labels in the sidebar, uppercase and tracked (OPENING, SEAL); the status bar takes its size in normal case, so hints read as sentences. */
  --text-label-caps-tracking: 0.08em; /* the shorthand cannot carry letter spacing */
  --text-code: 400 0.875rem/1.4 var(--font-ui); /* A type style for code set apart, as .ws-type-code; nothing in bundle.css applies it. An inline <code>, such as -print-8, keeps the text's size, in the one family with ligatures off. */
}
@media (pointer: coarse) {
  :root {
    --control-h: var(--tap);
  }
}
.ws-type-title {
  font-family: var(--font-ui);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.ws-type-section {
  font-family: var(--font-ui);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.ws-type-step {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.ws-type-body {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.ws-type-legend {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}
.ws-type-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.ws-type-label-caps {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-type-code {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "FiraCode Nerd Font";
  src: url("fonts/FiraCodeNF.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  ascent-override: 96.85%;
  descent-override: 26.23%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: "FiraCode Nerd Font";
  src: url("fonts/FiraCodeNF-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  ascent-override: 97.08%;
  descent-override: 26.00%;
  line-gap-override: 0%;
  font-display: swap;
}