@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap");

body { font-family: var(--font-sans); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; margin: 0; font-size: 14px; line-height: 20px; }
.md-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.md-col { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
:where(.md-btn, .md-tab, .md-switch-track, .md-snippet-copy, .md-menu-item, .md-toast-close, .md-check input, .md-select select, .md-textarea):focus-visible,
.md-input:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:where(.md-menu-item):focus-visible { outline-offset: -2px; }

/* Materials — surface */
.md-material-base { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--material-base); }
.md-material-small { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--material-small); }
.md-material-medium { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--material-medium); }
.md-material-large { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--material-large); }
/* Materials — floating */
.md-material-tooltip { position: relative; background: var(--surface-floating); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--material-tooltip); font: 400 13px/18px var(--font-sans); padding: 6px 10px; }
.md-material-tooltip::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--surface-floating); border: 1px solid var(--border); border-top: 0; border-left: 0; left: calc(50% - 5px); bottom: -5px; transform: rotate(45deg); }
.md-material-tooltip[data-side="bottom"]::after { top: -5px; bottom: auto; transform: rotate(225deg); }
.md-material-tooltip[data-side="left"]::after { left: auto; right: -5px; top: calc(50% - 5px); bottom: auto; transform: rotate(-45deg); }
.md-material-tooltip[data-side="right"]::after { left: -5px; top: calc(50% - 5px); bottom: auto; transform: rotate(135deg); }
.md-material-menu { background: var(--surface-floating); border-radius: var(--radius-lg); box-shadow: var(--material-menu); }
.md-material-modal { background: var(--surface-floating); border-radius: var(--radius-lg); box-shadow: var(--material-modal); }
.md-material-fullscreen { background: var(--surface-floating); border-radius: var(--radius-xl); box-shadow: var(--material-fullscreen); }
.md-overlay { background: var(--overlay); }

/* Button */
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 var(--space-3); font: 500 14px/20px var(--font-sans); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; vertical-align: middle; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
/* Sizes. Height and type come from the size only — never from the variant, the label or the shape. */
.md-btn-sm { height: 32px; min-height: 32px; padding: 0 10px; font-size: 14px; line-height: 20px; }
.md-btn-md { height: 40px; min-height: 40px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.md-btn-lg { height: 48px; min-height: 48px; padding: 0 14px; font-size: 16px; line-height: 24px; }
.md-btn > svg, .md-btn > span > svg { flex: none; }
.md-btn-square.md-btn-sm { width: 32px; padding: 0; } .md-btn-square.md-btn-md { width: 40px; padding: 0; } .md-btn-square.md-btn-lg { width: 48px; padding: 0; }
/* Optical centring: centre the label on its cap height, then lift it 0.06em so lowercase-heavy
   labels (most of them) don't look low — TWK Everett's x-height sits well below its cap height. */
.md-btn > span:not(.md-spinner) { text-box: trim-both cap alphabetic; transform: translateY(-0.06em); }
.md-btn-lg { line-height: 24px; }
/* Pill — marketing and hero CTAs */
.md-btn-pill, .md-btn-rounded { border-radius: var(--radius-full); }
.md-btn-pill.md-btn-sm { padding: 0 14px; }
.md-btn-pill.md-btn-md { padding: 0 18px; }
.md-btn-pill.md-btn-lg { padding: 0 24px; }
.md-btn-pill.md-btn-secondary { border-color: var(--border-strong); }
.md-btn-pill.md-btn-secondary:hover:not(:disabled) { border-color: var(--border-control); background: var(--surface); }
.md-btn-pill.md-btn-square { padding: 0; }
.md-btn-primary { background: var(--primary); color: var(--on-primary); }
.md-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.md-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-control); }
.md-btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.md-btn-tertiary { background: transparent; color: var(--ink); }
.md-btn-tertiary:hover:not(:disabled) { background: var(--surface-hover); }
.md-btn-error { background: var(--red-700); color: var(--on-color); }
.md-btn-error:hover:not(:disabled) { background: var(--red-800); }
.md-btn-warning { background: var(--amber-700); color: var(--on-color-dark); }
.md-btn-warning:hover:not(:disabled) { background: var(--amber-800); }
/* Fixed black and white — the same colour in both themes. For buttons that sit on a fixed
   ground: a photo, a coloured band, an inverted hero. Every size has both. */
.md-btn-black, .md-btn-white { --_ink: #171717; --_ink-hover: #383838; --_paper: #ffffff; --_paper-hover: #f5f5f5; --_line: #e3e3e3; }
.md-btn-black { background: var(--_ink); color: var(--_paper); }
.md-btn-black:hover:not(:disabled) { background: var(--_ink-hover); }
.md-btn-white { background: var(--_paper); color: var(--_ink); border-color: var(--_line); }
.md-btn-white:hover:not(:disabled) { background: var(--_paper-hover); }
.md-btn-black:disabled, .md-btn-white:disabled { opacity: .45; }
.md-btn-black:focus-visible, .md-btn-white:focus-visible { outline-color: var(--_ink); }
.md-btn-white.md-btn-pill { border-color: var(--_line); }

.md-btn:disabled { background: var(--surface-hover); color: var(--ink-disabled); border-color: var(--border); cursor: not-allowed; }
.md-spinner { display: inline-block; flex: none; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid currentColor; border-right-color: transparent; animation: md-spin .7s linear infinite; }
@keyframes md-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .md-spinner { animation-duration: 2s; } }

/* Fields */
.md-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.md-label { font: 500 13px/16px var(--font-sans); color: var(--ink-muted); }
.md-input, .md-select { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-sm); transition: border-color .15s; }
.md-input:hover, .md-select:hover, .md-textarea:hover { border-color: var(--ink-muted); }
.md-input-sm { height: 32px; } .md-input-md { height: 40px; } .md-input-lg { height: 48px; }
.md-input input, .md-select select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 14px/20px var(--font-sans); padding: 0 var(--space-3); }
.md-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; border-radius: var(--radius-sm); }
.md-select select:focus-visible { outline-offset: 3px; }
.md-select-chev { position: absolute; right: 12px; pointer-events: none; color: var(--ink-muted); }
.md-input input::placeholder, .md-textarea::placeholder { color: var(--ink-disabled); }
.md-input-affix { display: flex; align-items: center; height: 100%; padding: 0 var(--space-3); color: var(--ink-muted); background: var(--surface-subtle); font-size: 14px; }
.md-input-affix:first-child { border-right: 1px solid var(--border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.md-input-affix:last-child { border-left: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.md-textarea { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; padding: 10px var(--space-3); background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: 400 14px/22px var(--font-sans); }
.md-input-error, .md-input-error:hover { border-color: var(--red-900); }
.md-input-disabled { background: var(--surface-subtle); border-color: var(--border); } .md-input-disabled input, .md-input-disabled select { cursor: not-allowed; color: var(--ink-disabled); }
.md-helper { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.md-helper-error { color: var(--red-900); }

/* Checkbox & radio */
.md-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.md-check input { appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none; width: 16px; height: 16px; border: 1px solid var(--border-control); border-radius: 4px; background: var(--surface); display: grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.md-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); background: var(--on-primary); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 6%, 38% 68%); transition: transform .1s; }
.md-check input:checked, .md-check input:indeterminate { background: var(--primary); border-color: var(--primary); }
.md-check input:checked::before { transform: scale(1); }
.md-check input:indeterminate::before { transform: scale(1); clip-path: inset(40% 5% 40% 5%); }
.md-radio input { border-radius: var(--radius-full); }
.md-radio input::before { width: 6px; height: 6px; border-radius: var(--radius-full); clip-path: none; }
.md-check-text { display: flex; flex-direction: column; }
.md-check-desc { color: var(--ink-muted); font-size: 13px; }
.md-check-disabled { color: var(--ink-disabled); cursor: not-allowed; } .md-check-disabled input { opacity: .5; cursor: not-allowed; }
.md-radio-group { display: flex; flex-direction: column; gap: var(--space-3); } .md-radio-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }

/* Switch */
.md-switch { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 14px/20px var(--font-sans); cursor: pointer; }
.md-switch-track { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border-radius: var(--radius-full); background: var(--surface-hover); border: 1px solid var(--border-control); cursor: pointer; transition: background .15s; }
.md-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink-muted); transition: transform .15s, background .15s; }
.md-switch-on { background: var(--primary); border-color: var(--primary); }
.md-switch-on .md-switch-thumb { transform: translateX(16px); background: var(--on-primary); }
.md-switch-sm .md-switch-track { width: 28px; height: 16px; } .md-switch-sm .md-switch-thumb { width: 10px; height: 10px; } .md-switch-sm .md-switch-on .md-switch-thumb { transform: translateX(12px); }
.md-switch-disabled { cursor: not-allowed; color: var(--ink-disabled); } .md-switch-disabled .md-switch-track { opacity: .5; cursor: not-allowed; }

/* Badge */
.md-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-full); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.md-badge-sm { height: 20px; padding: 0 6px; font-size: 11px; } .md-badge-lg { height: 32px; padding: 0 12px; font-size: 14px; }
.md-badge-gray { background: var(--gray-100); color: var(--gray-900); }
.md-badge-inverted { background: var(--primary); color: var(--on-primary); }
.md-badge-blue { background: var(--blue-100); color: var(--blue-900); }
.md-badge-green { background: var(--green-100); color: var(--green-900); }
.md-badge-amber { background: var(--amber-100); color: var(--amber-900); }
.md-badge-red { background: var(--red-100); color: var(--red-900); }
.md-badge-teal { background: var(--teal-100); color: var(--teal-900); }
.md-badge-purple { background: var(--purple-100); color: var(--purple-900); }
.md-badge-pink { background: var(--pink-100); color: var(--pink-900); }

/* StatusDot */
.md-status { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.md-status-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex: none; background: var(--gray-700); }
.md-status-success .md-status-dot { background: var(--green-700); }
.md-status-warning .md-status-dot { background: var(--amber-700); }
.md-status-error .md-status-dot { background: var(--red-700); }
.md-status-info .md-status-dot { background: var(--blue-700); }
.md-status-pulse .md-status-dot { animation: md-pulse 1.4s ease-in-out infinite; }
@keyframes md-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .md-status-pulse .md-status-dot { animation: none; } }

/* Avatar */
.md-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; border-radius: var(--radius-full); overflow: hidden; background: var(--gray-200); color: var(--ink); font-weight: 500; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 1px var(--border); }
.md-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-avatar-group { display: inline-flex; --md-avatar-overlap: -5px; } .md-avatar-group > * + * { margin-left: var(--md-avatar-overlap); } .md-avatar-group .md-avatar { box-shadow: 0 0 0 2px var(--surface); }
.md-avatar-more { background: var(--surface-hover); color: var(--ink-muted); }

/* Card — material-medium */
.md-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--material-medium); overflow: hidden; transition: box-shadow .15s; }
.md-card-interactive { cursor: pointer; } .md-card-interactive:hover { box-shadow: var(--material-large); }
.md-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.md-card-title { margin: 0; font: 500 20px/28px var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.md-card-desc { margin: var(--space-1) 0 0; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.md-card-actions { display: flex; gap: var(--space-2); }
.md-card-body { padding: var(--space-6); font: 400 14px/22px var(--font-sans); }
.md-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: var(--surface-subtle); border-top: 1px solid var(--border); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }

/* Tabs */
.md-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.md-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; background: none; border: 0; cursor: pointer; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); transition: color .15s; }
.md-tab:hover:not(:disabled) { color: var(--ink); }
.md-tab-on { color: var(--ink); font-weight:500; }
.md-tab-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.md-tab:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.md-tabs-seg { display: inline-flex; gap: 2px; padding: 2px; border: 0; border-radius: var(--radius-sm); background: var(--surface-hover); box-shadow: var(--material-base); }
.md-tabs-seg .md-tab { padding: 0 var(--space-3); height: 28px; border-radius: 4px; }
.md-tabs-seg .md-tab-on { background: var(--surface); box-shadow: var(--material-small); }
.md-tabs-seg .md-tab-on::after { display: none; }

/* Note */
.md-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.md-note-icon { display: flex; padding-top: 2px; color: var(--ink-muted); }
.md-note-text { flex: 1; min-width: 0; } .md-note-text strong { font-weight: 500; }
.md-note-action { flex: none; margin: -6px -8px -6px 0; }
.md-note-info { border-color: var(--blue-500); } .md-note-info .md-note-icon, .md-toast-icon.md-note-info { color: var(--blue-900); }
.md-note-success { border-color: var(--green-500); } .md-note-success .md-note-icon, .md-toast-icon.md-note-success { color: var(--green-900); }
.md-note-warning { border-color: var(--amber-500); } .md-note-warning .md-note-icon, .md-toast-icon.md-note-warning { color: var(--amber-900); }
.md-note-error { border-color: var(--red-500); } .md-note-error .md-note-icon, .md-toast-icon.md-note-error { color: var(--red-900); }
.md-note-fill.md-note-neutral { background: var(--gray-100); border-color: var(--gray-400); }
.md-note-fill.md-note-info { background: var(--blue-100); color: var(--blue-1000); }
.md-note-fill.md-note-success { background: var(--green-100); color: var(--green-1000); }
.md-note-fill.md-note-warning { background: var(--amber-100); color: var(--amber-1000); }
.md-note-fill.md-note-error { background: var(--red-100); color: var(--red-1000); }

/* Tooltip */
.md-tooltip-wrap { position: relative; display: inline-flex; }
.md-tooltip { position: absolute; z-index: var(--z-tooltip); white-space: nowrap; pointer-events: none; }
.md-tooltip-top { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.md-tooltip-bottom { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.md-tooltip-left { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.md-tooltip-right { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }

/* Menu */
.md-menu-wrap { position: relative; display: inline-block; }
.md-menu { position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; display: flex; flex-direction: column; }
.md-menu-end { left: auto; right: 0; }
.md-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 36px; padding: 0 10px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--ink); font: 400 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.md-menu-item:hover:not(:disabled), .md-menu-item:focus-visible { background: var(--surface-hover); }
.md-menu-item:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.md-menu-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.md-menu-danger { color: var(--red-900); }
.md-menu-sep { height: 1px; background: var(--border); margin: 6px -6px; }
.md-menu-head { padding: 8px 10px 4px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* Modal */
.md-modal-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.md-modal-inline { position: absolute; }
.md-modal { width: 100%; max-width: 440px; display: flex; flex-direction: column; max-height: 100%; }
.md-modal-sm { max-width: 360px; } .md-modal-lg { max-width: 640px; }
.md-modal-body { padding: var(--space-6); overflow: auto; font: 400 14px/22px var(--font-sans); }
.md-modal-title { margin: 0 0 var(--space-2); font: 500 24px/32px var(--font-sans); letter-spacing: -0.03em; }
.md-modal-desc { margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: 16px; line-height: 24px; }
.md-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: var(--surface-subtle); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.md-sheet { position: absolute; inset: var(--space-6) var(--space-6) 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: flex; flex-direction: column; }
.md-sheet .md-modal-body { flex: 1; }
.md-sheet .md-modal-foot { border-radius: 0; }

/* Toast */
.md-toast { display: flex; align-items: center; gap: var(--space-3); width: 360px; max-width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); }
.md-toast-icon { display: flex; }
.md-toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .md-toast-text strong { font-weight:500; } .md-toast-text span { color: var(--ink-muted); font-size: 13px; }
.md-toast-close { display: flex; padding: 6px; border: 0; background: none; color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer; } .md-toast-close:hover { background: var(--surface-hover); color: var(--ink); }

/* Progress */
.md-progress-wrap { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.md-progress-top { display: flex; justify-content: space-between; font: 400 13px/16px var(--font-sans); color: var(--ink-muted); }
.md-progress-val { font-variant-numeric: tabular-nums; color: var(--ink); }
.md-progress { height: 8px; border-radius: var(--radius-full); background: var(--gray-200); overflow: hidden; }
.md-progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease; }
.md-progress-success span { background: var(--green-700); } .md-progress-warning span { background: var(--amber-700); } .md-progress-error span { background: var(--red-700); } .md-progress-info span { background: var(--blue-700); }

/* Skeleton */
.md-skeleton { display: block; border-radius: var(--radius-sm); background: var(--gray-100); animation: md-fade 1.4s ease-in-out infinite; }
.md-skeleton-circle { border-radius: var(--radius-full); }
@keyframes md-fade { 50% { background: var(--gray-200); } }
@media (prefers-reduced-motion: reduce) { .md-skeleton { animation: none; } }

/* Snippet */
.md-snippet { position: relative; display: flex; align-items: flex-start; background: var(--surface-subtle); border-radius: var(--radius-md); box-shadow: var(--material-base); }
.md-snippet pre { flex: 1; margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; display: flex; flex-direction: column; font: 400 13px/24px var(--font-mono); color: var(--ink); }
.md-snippet-prompt { color: var(--ink-muted); user-select: none; }
.md-snippet-copy { margin: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.md-snippet-copy:hover { background: var(--surface-hover); color: var(--ink); }
.md-snippet-inverted { background: var(--primary); box-shadow: none; }
.md-snippet-inverted pre, .md-snippet-inverted .md-snippet-copy, .md-snippet-inverted .md-snippet-prompt { color: var(--on-primary); }
.md-snippet-inverted .md-snippet-copy:hover { background: var(--primary-hover); }

/* Kbd */
.md-kbd-group { display: inline-flex; gap: var(--space-1); }
.md-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--material-small); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.md-kbd-sm .md-kbd { min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; }

/* Grid — visible guides for marketing and editorial layouts */
.md-grid { --cols: 1; --guide: var(--border); position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--guide); border-left: 1px solid var(--guide); }
.md-grid-dashed { --guide-style: dashed; }
.md-grid > .md-grid-cell { position: relative; padding: var(--space-6); border-right: 1px var(--guide-style, solid) var(--guide); border-bottom: 1px var(--guide-style, solid) var(--guide); min-width: 0; }
.md-grid-dashed { border-top-style: dashed; border-left-style: dashed; }
.md-grid-cell-solid { background: var(--surface); z-index: 1; }
.md-grid-cross { position: absolute; width: 21px; height: 21px; z-index: 2; pointer-events: none; }
.md-grid-cross::before, .md-grid-cross::after { content: ""; position: absolute; background: var(--ink-muted); }
.md-grid-cross::before { left: 10px; top: 0; width: 1px; height: 21px; } .md-grid-cross::after { top: 10px; left: 0; height: 1px; width: 21px; }
.md-grid-cross-tl { left: -11px; top: -11px; } .md-grid-cross-tr { right: -11px; top: -11px; } .md-grid-cross-bl { left: -11px; bottom: -11px; } .md-grid-cross-br { right: -11px; bottom: -11px; }
@media (min-width: 640px) { .md-grid { --cols: var(--cols-sm, var(--cols-base, 1)); } }
@media (min-width: 960px) { .md-grid { --cols: var(--cols-md, var(--cols-sm, 1)); } }
@media (min-width: 1200px) { .md-grid { --cols: var(--cols-lg, var(--cols-md, var(--cols-sm, 1))); } }