/* Generated from central values in build-tokens.py. */
:root {
  --kleis-color-brand-navy: #003B5E;
  --kleis-color-brand-gray: #4B5B6B;
  --kleis-color-surface: #EAE7E1;
  --kleis-color-surface-raised: #FFFFFF;
  --kleis-color-surface-selected: #D9EEFA;
  --kleis-color-surface-hover: #D9EEFA;
  --kleis-color-text: #003B5E;
  --kleis-color-text-secondary: #4B5B6B;
  --kleis-color-text-muted: #4B5B6B;
  --kleis-color-text-inverse: #FFFFFF;
  --kleis-color-border: #D5D9DD;
  --kleis-color-border-strong: #4B5B6B;
  --kleis-color-interactive: #003B5E;
  --kleis-color-interactive-hover: #002D48;
  --kleis-color-focus: #003B5E;
  --kleis-color-success-text: #326246;
  --kleis-color-success-bg: #EFF5EE;
  --kleis-color-warning-text: #805200;
  --kleis-color-warning-bg: #FFF3DC;
  --kleis-color-danger-text: #A13030;
  --kleis-color-danger-bg: #FCEEEE;
  --kleis-color-knowledge-accent: #003B5E;
  --kleis-color-knowledge-text: #003B5E;
  --kleis-color-knowledge-bg: #D9EEFA;
  --kleis-color-commerce-accent: #4B5B6B;
  --kleis-color-commerce-text: #4B5B6B;
  --kleis-color-commerce-bg: #EAE7E1;
  --kleis-color-agent-accent: #80652E;
  --kleis-color-agent-text: #80652E;
  --kleis-color-agent-bg: #EAE7E1;
  --kleis-font-family: "Nunito Sans", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --kleis-font-weight-regular: 400;
  --kleis-font-weight-medium: 500;
  --kleis-font-weight-semibold: 600;
  --kleis-font-weight-bold: 700;
  --kleis-font-size-display: clamp(2.25rem, 4.5vw, 4rem);
  --kleis-font-size-h1: 2.5rem;
  --kleis-font-size-h2: 2rem;
  --kleis-font-size-h3: 1.5rem;
  --kleis-font-size-h4: 1.25rem;
  --kleis-font-size-body: 1rem;
  --kleis-font-size-label: 0.875rem;
  --kleis-font-size-meta: 0.75rem;
  --kleis-line-height-display: 1.1;
  --kleis-line-height-heading: 1.18;
  --kleis-line-height-body: 1.6;
  --kleis-line-height-label: 1.45;
  --kleis-space-1: 4px;
  --kleis-space-2: 8px;
  --kleis-space-3: 12px;
  --kleis-space-4: 16px;
  --kleis-space-5: 24px;
  --kleis-space-6: 32px;
  --kleis-space-7: 48px;
  --kleis-space-8: 64px;
  --kleis-space-9: 80px;
  --kleis-space-10: 96px;
  --kleis-radius-none: 0;
  --kleis-radius-control: 8px;
  --kleis-radius-small: 2px;
  --kleis-radius-full: 999px;
  --kleis-border-width: 1px;
  --kleis-focus-width: 2px;
  --kleis-control-height: 44px;
  --kleis-control-height-compact: 36px;
  --kleis-icon-size: 20px;
  --kleis-grid-max: 1312px;
  --kleis-shell-sidebar: 220px;
  --kleis-inspector-min: 280px;
  --kleis-inspector-max: 360px;
  --kleis-duration-fast: 120ms;
  --kleis-duration-standard: 180ms;
  --kleis-duration-slow: 240ms;
  --kleis-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --kleis-motion-duration-instant: 0ms;
  --kleis-motion-duration-feedback: 120ms;
  --kleis-motion-duration-enter: 180ms;
  --kleis-motion-duration-exit: 120ms;
  --kleis-motion-duration-panel: 240ms;
  --kleis-motion-duration-editorial: 320ms;
  --kleis-motion-duration-activity: 900ms;
  --kleis-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --kleis-motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --kleis-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --kleis-motion-ease-linear: linear;
  --kleis-motion-distance-local: 4px;
  --kleis-motion-distance-panel: 8px;
  --kleis-motion-distance-editorial: 16px;
  --kleis-motion-opacity-hidden: 0;
  --kleis-motion-opacity-visible: 1;
  --kleis-motion-iterations-once: 1;
  --kleis-motion-fill-enter: both;
  --kleis-shadow-none: none;
  --kleis-shadow-dialog: 0 16px 48px #003B5E26;
  --kleis-layer-base: 0;
  --kleis-layer-sticky: 2;
  --kleis-layer-navigation: 5;
  --kleis-layer-skip: 10;
  --kleis-opacity-disabled: 0.55;
  --kleis-color-overlay: #003B5E66;
  --kleis-color-danger-hover: #852626;
  --kleis-color-disabled-bg: #E8ECEF;
  --kleis-color-disabled-border: #CFD7DD;
  --kleis-color-success-border: #A4B6A7;
  --kleis-color-warning-border: #A47C37;
  --kleis-color-danger-border: #B86767;
  --kleis-font-family-code: ui-monospace, SFMono-Regular, Consolas, monospace;
  --kleis-control-padding-block: 9px;
  --kleis-control-padding-inline: 18px;
  --kleis-control-gap: 8px;
  --kleis-control-border-width: 1px;
  --kleis-control-radius: 8px;
  --kleis-control-hit-target: 44px;
  --kleis-control-selection-glyph: 20px;
  --kleis-focus-offset: 3px;
  --kleis-logo-width-min: 130px;
  --kleis-logo-width-navigation: 148px;
  --kleis-logo-width-default: 163px;
  --kleis-table-padding-block: 16px;
  --kleis-table-padding-compact: 8px;
  --kleis-table-padding-inline: 16px;
  --kleis-table-selection-column: 52px;
  --kleis-chart-width-mobile: 640px;
  --kleis-measure-reading: 75ch;
  --kleis-line-height-chinese: 1.7;
  --kleis-line-height-chinese-heading: 1.3;
  --kleis-letter-spacing-heading: -0.02em;
  --kleis-letter-spacing-display: -0.025em;
  --kleis-letter-spacing-eyebrow: 1.6px;
  --kleis-metric-28px: 28px;
  --kleis-metric-56px: 56px;
  --kleis-metric-negative--7px: -.7px;
  --kleis-metric-22px: 22px;
  --kleis-metric-10px: 10px;
  --kleis-metric-6px: 6px;
  --kleis-metric-negative-100px: -100px;
  --kleis-palette-fff: #fff;
  --kleis-metric-1-4px: 1.4px;
  --kleis-metric-14px: 14px;
  --kleis-metric-26px: 26px;
  --kleis-metric-1480px: 1480px;
  --kleis-metric-21px: 21px;
  --kleis-metric-65ch: 65ch;
  --kleis-metric-15px: 15px;
  --kleis-metric-13px: 13px;
  --kleis-palette-f3f6f7: #EAE7E1;
  --kleis-metric-66px: 66px;
  --kleis-metric-110px: 110px;
  --kleis-metric-160px: 160px;
  --kleis-metric-30px: 30px;
  --kleis-metric-210px: 210px;
  --kleis-palette-003b5e0b: #1832470b;
  --kleis-palette-003b5e15: #18324715;
  --kleis-metric-11px: 11px;
  --kleis-palette-bccbd3: #D5D9DD;
  --kleis-metric-100px: 100px;
  --kleis-metric-90px: 90px;
  --kleis-metric-5px: 5px;
  --kleis-metric-negative-1px: -1px;
  --kleis-metric-40px: 40px;
  --kleis-metric-11pt: 11pt;
  --kleis-metric-30pt: 30pt;
  --kleis-metric-23pt: 23pt;
  --kleis-metric-14pt: 14pt;
  --kleis-metric-190mm: 190mm;
  --kleis-metric-170px: 170px;
  --kleis-metric-10pt: 10pt;
  --kleis-metric-21pt: 21pt;
  --kleis-metric-16pt: 16pt;
  --kleis-metric-13pt: 13pt;
  --kleis-metric-9pt: 9pt;
  --kleis-metric-150px: 150px;
  --kleis-metric-170mm: 170mm;
  --kleis-metric-8pt: 8pt;
  --kleis-metric-7px: 7px;
  --kleis-metric--2px: .2px;
  --kleis-metric-168px: 168px;
  --kleis-metric-negative--8px: -.8px;
  --kleis-metric-negative--3px: -.3px;
  --kleis-metric-26pt: 26pt;
  --kleis-metric-12pt: 12pt;
  --kleis-palette-f7f9fa: #EAE7E1;
  --kleis-metric-88px: 88px;
  --kleis-palette-526778: #4B5B6B;
  --kleis-metric-9-5pt: 9.5pt;
  --kleis-metric-25px: 25px;
  --kleis-palette-d7e1e7: #D5D9DD;
  --kleis-metric-560px: 560px;
  --kleis-metric-740px: 740px;
  --kleis-metric-680px: 680px;
  --kleis-metric-50px: 50px;
  --kleis-metric-326px: 326px;
  --kleis-metric-381px: 381px;
  --kleis-palette-f3f7f9: #EAE7E1;
  --kleis-metric-200px: 200px;
  --kleis-palette-003b5e22: #18324722;
  --kleis-palette-003b5eaa: #183247aa;
  --kleis-palette-aa3e3e: #AA3E3E;
  --kleis-palette-003b5e77: #18324777;
  --kleis-metric-60px: 60px;
  --kleis-palette-d4e1e8: #D5D9DD;
  --kleis-metric-540px: 540px;
  --kleis-metric-34pt: 34pt;
  --kleis-metric-24pt: 24pt;
  --kleis-metric-330px: 330px;
  --kleis-metric-23-82px: 23.82px;
  --kleis-metric-42px: 42px;
  --kleis-metric-18pt: 18pt;
  --kleis-metric-390px: 390px;
  --kleis-metric-720px: 720px;
  --kleis-metric-420px: 420px;
  --kleis-metric-240px: 240px;
  --kleis-palette-b9ccd6: #D5D9DD;
  --kleis-metric-950px: 950px;
  --kleis-palette-f1f8f6: #EEF2FB;
  --kleis-palette-f2f6fc: #EAF5FA;
  --kleis-metric-17px: 17px;
  --kleis-palette-c9e0dc: #C7D3EF;
  --kleis-metric-104px: 104px;
  --kleis-palette-edf1f3: #EAE7E1;
  --kleis-metric-9999px: 9999px;
  --kleis-palette-003b5e04: #18324704;
  --kleis-metric-180px: 180px;
  --kleis-metric-7pt: 7pt;
  --kleis-metric-negative-1-4px: -1.4px;
  --kleis-metric--6px: .6px;
  --kleis-metric-19px: 19px;
  --kleis-metric-800px: 800px;
  --kleis-metric-34px: 34px;
  --kleis-metric-54px: 54px;
  --kleis-metric-negative-1-8px: -1.8px;
  --kleis-metric-negative--5px: -.5px;
  --kleis-metric-1040px: 1040px;
  --kleis-palette-dfeaec: #EAE7E1;
  --kleis-metric-55px: 55px;
  --kleis-metric-1-5px: 1.5px;
  --kleis-metric-60ch: 60ch;
  --kleis-metric-704px: 704px;
  --kleis-metric-38px: 38px;
  --kleis-metric-16ch: 16ch;
  --kleis-palette-f4f7f9: #EAE7E1;
  --kleis-palette-b8d5d6: #B5C8EB;
  --kleis-palette-e8f2f2: #EEF2FB;
  --kleis-palette-fff2df: #fff2df;
  --kleis-palette-e5c898: #e5c898;
  --kleis-palette-7b4c00: #7b4c00;
  --kleis-palette-ccdce5: #D5D9DD;
  --kleis-palette-9d6100: #9d6100;
  --kleis-palette-fff4e4: #fff4e4;
  --kleis-metric-70px: 70px;
  --kleis-palette-dbe5eb: #D5D9DD;
  --kleis-metric-95px: 95px;
  --kleis-metric-18mm: 18mm;
  --kleis-metric-10-5pt: 10.5pt;
  --kleis-metric-6mm: 6mm;
  --kleis-metric-43mm: 43mm;
  --kleis-metric-31pt: 31pt;
  --kleis-metric-7mm: 7mm;
  --kleis-metric-negative-1pt: -1pt;
  --kleis-metric-4mm: 4mm;
  --kleis-metric-27pt: 27pt;
  --kleis-metric-8-5pt: 8.5pt;
  --kleis-metric-5mm: 5mm;
  --kleis-metric-15pt: 15pt;
  --kleis-metric-17pt: 17pt;
  --kleis-metric-8mm: 8mm;
  --kleis-metric-3mm: 3mm;
  --kleis-metric-28pt: 28pt;
  --kleis-metric-2-5mm: 2.5mm;
  --kleis-metric-25pt: 25pt;
  --kleis-metric-2mm: 2mm;
  --kleis-metric-3-5mm: 3.5mm;
  --kleis-metric-38mm: 38mm;
  --kleis-metric-1-5mm: 1.5mm;
  --kleis-color-transparent: transparent;
  --kleis-metric-4px: 4px;
  --kleis-metric-2px: 2px;
  --kleis-metric-3px: 3px;
  --kleis-font-size-36px: 36px;
  --kleis-font-size-56px: 56px;
  --kleis-letter-spacing-negative-1-7px: -1.7px;
  --kleis-letter-spacing-negative--7px: -.7px;
  --kleis-font-size-22px: 22px;
  --kleis-font-size-18px: 18px;
  --kleis-metric-20px: 20px;
  --kleis-metric-75ch: 75ch;
  --kleis-metric-12px: 12px;
  --kleis-metric-1px: 1px;
  --kleis-letter-spacing-1-4px: 1.4px;
  --kleis-metric-9px: 9px;
  --kleis-metric-220px: 220px;
  --kleis-letter-spacing-1-6px: 1.6px;
  --kleis-font-size-21px: 21px;
  --kleis-metric-44px: 44px;
  --kleis-metric-18px: 18px;
  --kleis-metric-24px: 24px;
  --kleis-font-size-15px: 15px;
  --kleis-font-size-13px: 13px;
  --kleis-metric-52px: 52px;
  --kleis-font-size-11px: 11px;
  --kleis-font-size-28px: 28px;
  --kleis-font-size-11pt: 11pt;
  --kleis-font-size-30pt: 30pt;
  --kleis-font-size-23pt: 23pt;
  --kleis-font-size-14pt: 14pt;
  --kleis-metric-96px: 96px;
  --kleis-font-size-10pt: 10pt;
  --kleis-font-size-21pt: 21pt;
  --kleis-font-size-16pt: 16pt;
  --kleis-font-size-13pt: 13pt;
  --kleis-font-size-9pt: 9pt;
  --kleis-metric-48px: 48px;
  --kleis-font-size-8pt: 8pt;
  --kleis-letter-spacing--2px: .2px;
  --kleis-font-size-40px: 40px;
  --kleis-letter-spacing-negative--8px: -.8px;
  --kleis-font-size-44px: 44px;
  --kleis-font-size-10px: 10px;
  --kleis-metric-80px: 80px;
  --kleis-metric-16px: 16px;
  --kleis-letter-spacing-negative--3px: -.3px;
  --kleis-font-size-26pt: 26pt;
  --kleis-font-size-12pt: 12pt;
  --kleis-font-size-9-5pt: 9.5pt;
  --kleis-font-size-25px: 25px;
  --kleis-metric-8px: 8px;
  --kleis-font-size-26px: 26px;
  --kleis-font-size-34pt: 34pt;
  --kleis-font-size-24pt: 24pt;
  --kleis-metric-36px: 36px;
  --kleis-font-size-18pt: 18pt;
  --kleis-metric-32px: 32px;
  --kleis-metric-64px: 64px;
  --kleis-font-size-17px: 17px;
  --kleis-font-size-7pt: 7pt;
  --kleis-metric-640px: 640px;
  --kleis-letter-spacing-negative-1-4px: -1.4px;
  --kleis-letter-spacing--6px: .6px;
  --kleis-font-size-19px: 19px;
  --kleis-font-size-30px: 30px;
  --kleis-font-size-34px: 34px;
  --kleis-font-size-54px: 54px;
  --kleis-letter-spacing-negative-1-8px: -1.8px;
  --kleis-letter-spacing-negative--5px: -.5px;
  --kleis-letter-spacing-1-5px: 1.5px;
  --kleis-font-size-42px: 42px;
  --kleis-letter-spacing-1px: 1px;
  --kleis-font-size-38px: 38px;
  --kleis-font-size-10-5pt: 10.5pt;
  --kleis-font-size-31pt: 31pt;
  --kleis-letter-spacing-negative-1pt: -1pt;
  --kleis-font-size-27pt: 27pt;
  --kleis-font-size-8-5pt: 8.5pt;
  --kleis-font-size-15pt: 15pt;
  --kleis-font-size-17pt: 17pt;
  --kleis-font-size-28pt: 28pt;
  --kleis-font-size-25pt: 25pt;
  --kleis-palette-7c7c7c: #7C7C7C;
  --kleis-metric-negative-1-2px: -1.2px;
  --kleis-metric-1120px: 1120px;
  --kleis-metric-1440px: 1440px;
  --kleis-metric-440px: 440px;
  --kleis-palette-eef7f5: #EEF2FB;
  --kleis-metric-490px: 490px;
  --kleis-metric-300px: 300px;
  --kleis-font-family-ornamental: "Nunito Sans Condensed", "Nunito Sans", "PingFang TC", "Noto Sans TC", sans-serif;
  --kleis-font-weight-ornamental: 700;
  --kleis-font-weight-ornamental-strong: 700;
  --kleis-font-size-ornamental: clamp(3rem, 8vw, 7.5rem);
  --kleis-font-size-ornamental-section: clamp(2.5rem, 5vw, 4.5rem);
  --kleis-line-height-ornamental: 1.08;
  --kleis-letter-spacing-ornamental: -0.02em;
  --kleis-measure-ornamental: 16ch;
  --kleis-font-size-ornamental-chinese: clamp(2.25rem, 5vw, 4.5rem);
  --kleis-line-height-ornamental-chinese: 1.35;
  --kleis-ornamental-accent-width: 48px;
  --kleis-ornamental-accent-stroke: 3px;
  --kleis-ornamental-heading-gap: 24px;
  --kleis-font-size-ornamental-print: 54pt;
  --kleis-font-size-ornamental-section-print: 38pt;
  --kleis-font-size-ornamental-chinese-print: 22pt;
  --kleis-rich-popover-max-height: 360px;
  --kleis-rich-command-width: 560px;
  --kleis-color-ink: #183247;
  --kleis-color-aegean: #214BA6;
  --kleis-color-azure: #006D9E;
  --kleis-color-azure-display: #3D96CD;
  --kleis-color-bougainvillea: #A82E6E;
  --kleis-color-terracotta: #96553D;
  --kleis-color-plaster: #FCFAF6;
  --kleis-color-stone: #F0EBE2;
  --kleis-color-editorial-accent: #80652E;
  --kleis-color-editorial-bg: #EAE7E1;
  --kleis-font-family-display: "Nunito Sans Condensed", "Nunito Sans", "PingFang TC", "Noto Sans TC", sans-serif;
  --kleis-font-family-chinese: "PingFang TC", "Noto Sans TC", "Nunito Sans", sans-serif;
  --kleis-font-family-chinese-display: "PingFang TC", "Noto Sans TC", sans-serif;
  --kleis-color-display: #003B5E;
  --kleis-font-weight-display: 700;
  --kleis-font-optical-sizing: auto;
  --kleis-font-synthesis: none;
  --kleis-button-sheen: none;
  --kleis-button-depth: 0 2px 6px #003B5E0D;
  --kleis-button-depth-pressed: none;
  --kleis-range-channel-gradient: linear-gradient(#D5D9DD,#D5D9DD);
  --kleis-range-knob-gradient: linear-gradient(#FFFFFF,#FFFFFF);
  --kleis-range-channel-height: 6px;
  --kleis-range-knob-size: 22px;
  --kleis-font-display-optical-cut: normal;
  --kleis-font-weight-chinese-display: 600;
  --kleis-record-plate-inset: none;
  --kleis-label-frame-inset: none;
  --kleis-font-family-heading: "Nunito Sans", "PingFang TC", "Noto Sans TC", sans-serif;
  --kleis-font-weight-heading: 600;
  --kleis-border-width-surface: 1px;
  --kleis-border-color-surface: #D5D9DD;
  --kleis-instrument-face: #FFFFFF;
  --kleis-instrument-case: #D5D9DD;
  --kleis-instrument-metal: #4B5B6B;
  --kleis-instrument-ink: #003B5E;
  --kleis-instrument-scale: #4B5B6B;
  --kleis-instrument-track: #D5D9DD;
  --kleis-instrument-needle: #003B5E;
  --kleis-instrument-stroke-minor: 1px;
  --kleis-instrument-stroke-major: 1.5px;
  --kleis-instrument-radius: 16px;
  --kleis-instrument-tick-gap: 8px;
  --kleis-instrument-label-spacing: .08em;
  --kleis-instrument-bezel-inset: none;
  --kleis-instrument-panel-space: 24px;
  --kleis-instrument-dial-size: 240px;
  --kleis-layer-overlay: 20;
  --kleis-layer-tooltip: 30;
  --kleis-surface-page: #EAE7E1;
  --kleis-surface-panel: #FFFFFF;
  --kleis-surface-inset: #EAE7E1;
  --kleis-surface-overlay: #FFFFFF;
  --kleis-surface-inverse: #101A24;
  --kleis-surface-hover: #D9EEFA;
  --kleis-surface-active: #C8E4F5;
  --kleis-surface-selected: #D9EEFA;
  --kleis-surface-disabled: #E8ECEF;
  --kleis-text-disabled: #536470;
  --kleis-border-selected: #003B5E;
  --kleis-icon-stroke: 1.5;
  --kleis-icon-size-small: 16px;
  --kleis-icon-size-default: 20px;
  --kleis-icon-size-large: 24px;
  --kleis-icon-size-editorial: 32px;
  --kleis-type-dense-line-height: 1.5;
  --kleis-type-label-tracking: 0.02em;
  --kleis-type-meta-tracking: 0.02em;
  --kleis-type-code-line-height: 1.5;
  --kleis-letter-spacing-normal: 0;
  --kleis-radius-panel: 16px;
  --kleis-color-conflict-text: #A13030;
  --kleis-color-conflict-bg: #FCEEEE;
  --kleis-layout-field-gap: 24px;
  --kleis-layout-label-gap: 8px;
  --kleis-layout-helper-gap: 8px;
  --kleis-layout-action-gap: 12px;
  --kleis-layout-related-gap: 16px;
  --kleis-layout-panel-padding: 24px;
  --kleis-layout-panel-padding-small: 16px;
  --kleis-layout-section-gap: 64px;
  --kleis-layout-section-gap-small: 48px;
  --kleis-status-padding-block: 4px;
  --kleis-status-padding-inline: 10px;
  --kleis-status-icon-gap: 6px;
  --kleis-status-radius: 999px;
  --kleis-status-font-size: 14px;
  --kleis-status-line-height: 20px;
  --kleis-status-font-weight: 600;
  --kleis-layout-heading-body-gap: 16px;
  --kleis-layout-paragraph-gap: 16px;
  --kleis-layout-subheading-before: 32px;
  --kleis-layout-subheading-after: 12px;
  --kleis-gradient-editorial-wash: linear-gradient(120deg, #EAE7E1 0%, #FFFFFF 42%, #D9EEFA 100%);
  --kleis-color-editorial-warm-gray: #EAE7E1;
  --kleis-color-editorial-ice-blue: #D9EEFA;
  --kleis-gradient-editorial-primary: linear-gradient(90deg, #003B5E 0%, #C9A96B 48%, #EAE7E1 78%, #D9EEFA 100%);
  --kleis-color-syntax-string: #00626E;
  --kleis-color-syntax-literal: #71539C;
  --kleis-color-data-brass: #80652E;
  --kleis-color-brand-graphite: #4B5B6B;
  --kleis-color-brand-soft-brass: #C9A96B;
  --kleis-color-identifier-namespace: #003B5E;
  --kleis-color-identifier-type: #4B5B6B;
  --kleis-color-identifier-value: #4B5B6B;
  --kleis-color-identifier-version: #80652E;
  --kleis-color-identifier-delimiter: #4B5B6B;
  --kleis-table-row-background: #FFFFFF;
  --kleis-table-row-alt-background: #D9EEFA;
  --kleis-table-border-color: #D5D9DD;
}

.kleis-container { width: min(calc(100% - 32px), var(--kleis-grid-max)); margin-inline: auto; }
.kleis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kleis-space-4); }
.kleis-span-4, .kleis-span-6, .kleis-span-8, .kleis-span-12 { grid-column: span 4; min-width: 0; }
.kleis-shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.kleis-shell-main { min-width: 0; padding: var(--kleis-space-5) var(--kleis-space-4); }
.kleis-detail { display: grid; grid-template-columns: 1fr; gap: var(--kleis-space-5); }
@media (min-width: 480px) { .kleis-container { width: min(calc(100% - 48px), var(--kleis-grid-max)); } .kleis-shell-main { padding-inline: var(--kleis-space-5); } }
@media (min-width: 768px) { .kleis-container { width: min(calc(100% - 64px), var(--kleis-grid-max)); } .kleis-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--kleis-space-5); } .kleis-span-6, .kleis-span-8, .kleis-span-12 { grid-column: span 8; } .kleis-shell-main { padding: var(--kleis-space-6); } }
@media (min-width: 1200px) { .kleis-container { width: min(calc(100% - 128px), var(--kleis-grid-max)); } .kleis-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kleis-span-6 { grid-column: span 6; } .kleis-span-8 { grid-column: span 8; } .kleis-span-12 { grid-column: span 12; } .kleis-shell { grid-template-columns: var(--kleis-shell-sidebar) minmax(0, 1fr); } .kleis-shell-main { padding: var(--kleis-metric-40px); } }
@media (min-width: 1600px) { .kleis-container { width: min(calc(100% - 160px), var(--kleis-grid-max)); } }
/* Main-region query: do not allocate an inspector from the viewport width alone. */
.kleis-detail-region { container-type: inline-size; }
@container (min-width: 920px) { .kleis-detail { grid-template-columns: minmax(480px, 1fr) clamp(var(--kleis-inspector-min), 30cqw, var(--kleis-inspector-max)); } }