/* GENERATED by scripts/build-site.mjs from sarv/tokens.css, sarv/surfaces.css, sarv/pressables.css, sarv/list-nav.css, sarv/chip.css, sarv/badge.css, sarv/tooltip.css, sarv/tile.css, sarv/progress.css, sarv/panel.css, sarv/quote.css, sarv/plaque.css, sarv/field.css, sarv/kicker.css, sarv/callout.css, sarv/status.css, sarv/switch.css, sarv/dialog.css, sarv/sheet.css, folio/fonts.css, folio/tokens.css, folio/form.css, folio/components.css, folio/article.css, folio/sections.css, folio/booking.css, folio/assistant.css. Edit the sources, then rebuild. */
:root, .sh-world { --sarv-paper: var(--neutral-50, #faf9f7); --sarv-ink: var(--neutral-900, #1f1f1f); --sarv-muted: #5e574b; --sarv-clay: var(--orange-500, #a64823); --sarv-clay-dark: #8a3a1b; --sarv-green: #49734d; --sarv-green-dark: #3a5d3e; --sarv-success-bg: #f1f8ec; --sarv-parch: #f5eedf; --sarv-bone: #efe8dc; --sarv-wood: #5a3d27; --sarv-wood-mid: #7a5233; --sarv-edge: #3b2718; --sarv-progress-track: #e9dcc3; --sarv-brass: #c9a24a; --sarv-brass-light: #ecd290; --sarv-rule: #c9b08a; --sarv-rule-dark: #a5835c; --sarv-halo: #fff8e6; --sarv-veil: rgb(251 247 238 / .94); --sarv-inverse-ink-soft: #f1e6d0; --sarv-grain: repeating-linear-gradient(0deg, rgba(90, 61, 39, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 61, 39, .025) 0 1px, transparent 1px 7px); --sarv-paper-bg: var(--sarv-grain), radial-gradient(120% 90% at 0% 0%, #fffbf2, transparent 60%), linear-gradient(180deg, #f9f3e6, #f1e7d4); --sarv-wood-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 6px, rgba(255, 255, 255, .05) 6px 7px, transparent 7px 11px), linear-gradient(180deg, #6f4b2f, #57391f); --sarv-clay-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 6px), linear-gradient(180deg, #b5552c, #9a4220); --sarv-ui: "Pixelify Sans", system-ui, sans-serif; --sarv-display: "Pixelify Sans", system-ui, sans-serif; --sarv-body: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --sarv-t-display: 700 24px/32px var(--sarv-display); --sarv-t-heading: 600 20px/28px var(--sarv-ui); --sarv-t-body: 400 16px/28px var(--sarv-body); --sarv-t-speech: 400 16px/24px var(--sarv-body); --sarv-t-button: 600 16px/16px var(--sarv-ui); --sarv-t-control: 500 16px/16px var(--sarv-ui); --sarv-t-status: 600 16px/24px var(--sarv-ui); --sarv-t-small: 400 12px/16px var(--sarv-body); --sarv-t-label: 500 12px/16px var(--sarv-body); --sarv-s1: 4px; --sarv-s2: 8px; --sarv-s3: 12px; --sarv-s4: 16px; --sarv-s5: 24px; --sarv-s6: 32px; --sarv-s7: 40px; --sarv-s8: 48px; --sarv-s9: 64px; --sarv-s10: 80px; --sarv-s11: 96px; --sarv-hit: 48px; --sarv-well: #1d130b; --sarv-badge: #e9dcc0; --sarv-badge-wait: #f3da94; --sarv-badge-ok: #cfe0c8; --sarv-badge-ok-edge: #9fbd96; --sarv-badge-ok-edge-dark: #7b9a73; --sarv-badge-wait-edge: #d9b85a; --sarv-badge-wait-edge-dark: #b8963b; --sarv-badge-ink: var(--sarv-ink-mid); --sarv-badge-track: .08em; --sarv-kicker-track: .08em; --sarv-tool-on-bg: var(--sarv-wood-bg); --sarv-tool-on-ink: var(--sarv-plaque-ink); --sarv-tool-on-edge: var(--sarv-brass); --sarv-white: #fff; --sarv-ink-soft: #39342c; --sarv-say-bubble-bg: var(--sarv-white); --sarv-on-clay: var(--sarv-white); --sarv-on-green: #fffaf0; --sarv-edge-primary: #6e2b12; --sarv-edge-primary-dark: #4a1c0b; --sarv-edge-on: #2a4530; --sarv-btn-pad: var(--sarv-s2) var(--sarv-s5); --sarv-btn-pad-sm: var(--sarv-s1) var(--sarv-s4); --sarv-btn-min-sm: var(--sarv-s7); --sarv-btn-min-dense: var(--sarv-s7); --sarv-btn-gap: var(--sarv-s2); --sarv-btn-icon: 16px; --sarv-edge-gold: #8a6a22; --sarv-edge-gold-dark: #5e4714; --sarv-disabled: .45; --sarv-press: 2px; --sarv-hairline: #e3d6bd; --sarv-selected: #f4ead6; --sarv-hover: color-mix(in srgb, var(--sarv-clay) 10%, transparent); --sarv-current: color-mix(in srgb, var(--sarv-clay) 20%, var(--sarv-paper)); --sarv-list-row: 48px; --sarv-list-icon: 20px; --sarv-list-bar: 4px; --sarv-list-gap: 4px; --sarv-list-gap-inline: 12px; --sarv-t-chip: 500 16px/24px var(--sarv-ui); --sarv-chip-depth: 4px; --sarv-chip-pad-dot: 28px; --sarv-chip-dot: 7px; --sarv-chip-dot-x: 11px; --sarv-chip-dot-shade: rgba(0, 0, 0, .55); --sarv-chip-ring: color-mix(in srgb, var(--sarv-clay) 55%, transparent); --sarv-chip-ring-green: color-mix(in srgb, var(--sarv-green) 70%, transparent); --sarv-t-tip: 500 16px/24px var(--sarv-ui); --sarv-tip-depth: 4px; --sarv-tip-gap: 8px; --sarv-tip-max: 320px; --sarv-logo-rest: brightness(0) opacity(.5); --sarv-tile-size: 40px; --sarv-tile-icon: 20px; --sarv-tile-shine: rgba(255, 255, 255, .5); --sarv-card-depth: 8px; --sarv-t-num-xl: 600 48px/56px var(--sarv-body); --sarv-plaque-depth: 6px; --sarv-plaque-icon: 24px; --sarv-plaque-ink: #fbf5e8; --sarv-t-plaque-kicker: 600 12px/16px var(--sarv-body); --sarv-t-plaque: 600 16px/20px var(--sarv-ui); --sarv-field-bg: var(--sarv-mount); --sarv-field-invalid-bg: #fff7f3; --sarv-field-depth: 4px; --sarv-field-halo: 3px; --sarv-t-field: 500 16px/24px var(--sarv-body); --sarv-t-field-label: 600 16px/24px var(--sarv-ui); --sarv-t-hint: 400 16px/24px var(--sarv-body); --sarv-switch-w: 52px; --sarv-switch-h: 28px; --sarv-switch-knob: 20px; --sarv-switch-inset: 4px; --sarv-switch-depth: 2px; --sarv-switch-move: .14s; --sarv-switch-off: #e6d9bf; --sarv-switch-knob-on: #fbf5e8; --sarv-seg-depth: 4px; --sarv-seg-icon: 20px; --sarv-seg-divider: #e3d6bd; --sarv-seg-selected: #f4ead6; --sarv-seg-on-ink: #fbf7ee; --sarv-sheet-max: 88dvh; --sarv-sheet-bar: calc(var(--sarv-s4) + var(--sarv-hit) + var(--sarv-s2)); --sarv-sheet-menu-w: 480px; --sarv-sheet-handle-w: 40px; --sarv-sheet-handle-h: 4px; --sarv-scrim: rgba(28, 20, 12, .52); --sarv-fast: .12s; --sarv-quick: .2s; --sarv-move: .46s; --sarv-ease: cubic-bezier(.2, .8, .2, 1); --sarv-t-meta: 500 16px/24px var(--sarv-body); --sarv-t-num: 600 32px/40px var(--sarv-body); --sarv-t-stat: 600 32px/40px var(--sarv-body); --sarv-t-lede: 400 20px/32px var(--sarv-body); --sarv-t-aside: italic 400 16px/24px var(--sarv-body); --sarv-t-callout: var(--sarv-t-hint); --sh-t-meta: var(--sarv-t-meta); --sh-t-num: var(--sarv-t-num); --sh-paper: var(--sarv-paper); --sh-ink: var(--sarv-ink); --sh-muted: var(--sarv-muted); --sh-clay: var(--sarv-clay); --sh-clay-dark: var(--sarv-clay-dark); --sh-green: var(--sarv-green); --sh-green-dark: var(--sarv-green-dark); --sh-parch: var(--sarv-parch); --sh-bone: var(--sarv-bone); --sh-wood: var(--sarv-wood); --sh-wood-mid: var(--sarv-wood-mid); --sh-edge: var(--sarv-edge); --sh-brass: var(--sarv-brass); --sh-brass-light: var(--sarv-brass-light); --sh-rule: var(--sarv-rule); --sh-rule-dark: var(--sarv-rule-dark); --sh-halo: var(--sarv-halo); --sh-grain: var(--sarv-grain); --sh-paper-bg: var(--sarv-paper-bg); --sh-wood-bg: var(--sarv-wood-bg); --sh-clay-bg: var(--sarv-clay-bg); --sh-ui: var(--sarv-ui); --sh-display: var(--sarv-display); --sh-body: var(--sarv-body); --sh-t-display: var(--sarv-t-display); --sh-t-heading: var(--sarv-t-heading); --sh-t-body: var(--sarv-t-body); --sh-t-speech: var(--sarv-t-speech); --sh-t-button: var(--sarv-t-button); --sh-t-control: var(--sarv-t-control); --sh-t-small: var(--sarv-t-small); --sh-t-label: var(--sarv-t-label); --sh-s1: var(--sarv-s1); --sh-s2: var(--sarv-s2); --sh-s3: var(--sarv-s3); --sh-s4: var(--sarv-s4); --sh-s5: var(--sarv-s5); --sh-s6: var(--sarv-s6); --sh-hit: var(--sarv-hit); --sh-well: var(--sarv-well); --sh-badge: var(--sarv-badge); --sh-badge-wait: var(--sarv-badge-wait); --sh-badge-ok: var(--sarv-badge-ok); --sh-fast: var(--sarv-fast); --sh-quick: var(--sarv-quick); --sh-move: var(--sarv-move); --sh-ease: var(--sarv-ease); --sarv-black: #000; --sarv-shade: #2a221a; --sarv-curtain: #1f1f1f; --sarv-scene-ink: #fffaf0; --sarv-caption-bg: radial-gradient(closest-side, rgba(22, 15, 9, .52), rgba(22, 15, 9, .34) 55%, rgba(22, 15, 9, .1) 85%, transparent); --sarv-scene-halo: color-mix(in srgb, var(--sarv-black) 80%, transparent); --sarv-scene-halo-strong: color-mix(in srgb, var(--sarv-black) 90%, transparent); --sarv-aim-ink: #f6ead0; --sarv-aim-bg: #1f140b; --sarv-aim-ink-live: #fff3d6; --sarv-aim-dot: #e9503a; --sarv-wood-edge-dark: #24170e; --sarv-placeholder-bg: linear-gradient(180deg, #ece2cd, #e2d4b8); --sarv-callout-bg: #f6ead3; --sarv-placeholder: #efe3c8; --sarv-mount: #fffdf8; --sarv-rule-soft: #d9c9ab; --sarv-ink-mid: #4a4439; --sarv-selected-green: #e4ecd9; --sarv-drop-shadow: color-mix(in srgb, var(--sarv-shade) 35%, transparent); --sarv-shelf-bg: linear-gradient(#dcc6a0, #ccb185); --sarv-mount-edge: #b99e72; --sarv-book-ink: #2b2118; --sarv-book-page: #efe4cf; --sarv-book-page-edge: #cdbb98; --sarv-book-ink-soft: #4a3a28; --sarv-star: #b57d16; --sarv-sky-day: #a9c9dc; --sarv-night-edge: #2a3352; --sarv-night-edge-dark: #151a2c; --sarv-night-bg: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px), linear-gradient(180deg, #313c60, #222a46); --sarv-keycap: #f3e4bf; --sarv-keycap-ink: #2a1b0e; --sarv-selected-gold: #f3e3b6; --sarv-sky-ink: #e9e2cf; --sarv-sky-figure: rgba(160, 182, 232, .85); --sarv-sky-deep: #05070c; --sarv-cta-bg: linear-gradient(#f3da94, #e0bb5c); --sarv-cta-ink: #2b1f0c; --sarv-cta-bg-hover: linear-gradient(#f7e2a6, #e6c46b); --sarv-piano-now: #fff3c9; --sarv-key-btn: #4a3424; --sarv-key-btn-edge: #2b1c10; --sarv-key-btn-hover: #5d4230; --sarv-key-white: linear-gradient(#f7f1e4, #e9e0cd); --sarv-key-white-ink: #3a2a1a; --sarv-key-white-edge: #cfc3aa; --sarv-key-black: linear-gradient(#34281f, #14100c); --sarv-key-black-ink: #f0e4cf; --sarv-key-black-edge: #050403; --sarv-key-white-down: linear-gradient(#f4cf8c, #e9a85a); --sarv-key-white-down-edge: #b97a2c; --sarv-key-white-glow: rgba(243, 187, 98, .55); --sarv-key-black-down: linear-gradient(#c9633a, #8c3f22); --sarv-key-black-down-edge: #4a1f0f; --sarv-key-black-glow: rgba(201, 99, 58, .6); --sarv-groove: #efe4cb; --sarv-groove-line: #e6d8bb; --sarv-data-contract: #3d5a73; --sarv-data-freelance: #b88a22; --sarv-plan-house: #efe3c8; --sarv-plan-visited: #e9d3a9; --sarv-scroll-thumb-edge: #7d6320; --sarv-scroll-thumb-rim: #3a2a18; --sarv-scroll-track: #ecdfc4; } @media (min-width: 640px) { :root, .sh-world { --sarv-t-display: 700 32px/40px var(--sarv-display); } } @media (min-width: 1024px) { :root, .sh-world { --sarv-t-num: 600 40px/48px var(--sarv-body); --sarv-t-num-xl: 600 64px/72px var(--sarv-body); } } .sarv-inverse { --sarv-ink: var(--sarv-halo); --sarv-clay-dark: var(--sarv-brass-light); --sarv-rule-dark: var(--sarv-brass); --sarv-hover: color-mix(in srgb, var(--sarv-brass-light) 14%, transparent); } .sarv-inverse .sarv-paper { --sarv-ink: var(--neutral-900, #1f1f1f); --sarv-clay-dark: #8a3a1b; --sarv-rule-dark: #a5835c; --sarv-hover: color-mix(in srgb, var(--sarv-clay) 10%, transparent); color: var(--sarv-ink); }
:where(.sh-plaque, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-pop, .sh-trail, .sh-cta, .sh-look-label, .sh-learn, .sh-doorhint, .sh-hover, .sh-tip, .sh-panel-close, .sh-panel-back, .sh-card, .sh-progress, .px-progress, .sh-panel, .sh-switch, .sh-choice, .sh-details, .sh-deck-bar, .sh-deck-drawer, .sh-logo, .sh-toast, .sh-pbtn, .sh-tooltip, .sh-signmenu, .sh-menu, .sh-obshint, .sh-sheet, .px-edge, .px-t-card, .px-seg, .px-plaque, .px-btn, .px-tool, .px-folio, .px-versions-list, .px-chip, .px-slot, .px-input, .sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-exhibit, .px-evidence, .px-decision, .px-article-hero, .px-zoom, .px-invite, .px-quote, .px-glimpse, .px-next, .px-case-pic, .px-tile, .px-cert, .px-letter, .px-slotbox, .px-choices button, .folio .ias-chatbot-pill, .folio .ias-chatbot-window, .folio .ias-chatbot-close-btn, .folio .ias-chatbot-chip, .folio .ias-chatbot-followup-chip, .folio .ias-chatbot-input, .folio .ias-chatbot-message, .folio .ias-chatbot-send-btn) { box-shadow: 0 -2px 0 var(--b), 0 2px 0 var(--b), -2px 0 0 var(--b), 2px 0 0 var(--b), 0 var(--lift) 0 var(--e, var(--b)), var(--ring, 0 0 #0000); } .px-seg button[data-tip]::after, .px-logos a::after, .px-cal-day.is-off::after { box-shadow: 0 -2px 0 var(--b), 0 2px 0 var(--b), -2px 0 0 var(--b), 2px 0 0 var(--b), 0 var(--lift) 0 var(--e, var(--b)), var(--ring, 0 0 #0000); }
:where(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque) { --lift: var(--depth, 6px); transition: transform var(--sarv-fast, .12s) ease-out, --lift var(--sarv-fast, .12s) ease-out, color var(--sarv-fast, .12s) ease-out, background-color var(--sarv-fast, .12s) ease-out; } @media (hover: hover) { :is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):hover:not(:disabled, [aria-disabled="true"], [aria-current="page"]) { transform: --b: var(--b-hover, var(--sarv-clay)); transform: translateY(calc(var(--sarv-press) * -1)); --lift: calc(var(--depth, 6px) + var(--sarv-press)); } } :is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):is(:active, .is-down):not(:disabled, [aria-disabled="true"]) { transform: translateY(var(--sarv-press)); --lift: calc(var(--depth, 6px) - var(--sarv-press)); transition-duration: .08s; } @media (prefers-reduced-motion: reduce) { :is(.px-btn, .px-tool, .px-plaque, .px-zoom, .px-exhibit, .px-glimpse, .px-cert, .px-choices button, .px-slot, .ias-chatbot-pill, .ias-chatbot-close-btn, .ias-chatbot-chip, .ias-chatbot-followup-chip, .ias-chatbot-send-btn, .sh-tool, .sh-navbtn, .sh-chip, .sh-btn, .sh-cta, .sh-panel-close, .sh-panel-back, .sh-plaque):is(:hover, :active) { transform: none; } } .px-btn, .sh-btn { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --depth: 6px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sarv-btn-gap); min-height: var(--sarv-hit); padding: var(--sarv-btn-pad); border: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-button); font-variant-ligatures: none; text-align: center; text-decoration: none; cursor: pointer; position: relative; } :is(.px-btn, .sh-btn) :is(.px-icon, .sh-icon) { width: var(--sarv-btn-icon); height: var(--sarv-btn-icon); } :is(.px-btn-primary, .sh-btn-primary) { --b: var(--sarv-edge-primary); --e: var(--sarv-edge-primary-dark); background: var(--sarv-clay-bg); color: var(--sarv-on-clay) !important; } :is(.px-btn-sm, .sh-btn-sm) { --depth: 4px; min-height: var(--sarv-btn-min-sm); padding: var(--sarv-btn-pad-sm); } :is(.px-btn-quiet, .sh-btn-quiet) { --b: transparent; --e: transparent; --b-hover: transparent; background: none; text-decoration: underline; text-decoration-color: var(--sarv-rule-dark); text-underline-offset: 6px; padding-inline: var(--sarv-s2); } :is(.px-btn-quiet, .sh-btn-quiet):is(:active, :focus-visible) { color: var(--sarv-clay-dark); text-decoration-color: currentColor; text-decoration-thickness: 2px; } @media (hover: hover) { :is(.px-btn-quiet, .sh-btn-quiet):hover { color: var(--sarv-clay-dark); text-decoration-color: currentColor; text-decoration-thickness: 2px; } } :is(.px-btn, .sh-btn):is(:disabled, [aria-disabled="true"]) { opacity: var(--sarv-disabled); cursor: default; pointer-events: none; } :is(.px-btn, .sh-btn)[aria-busy="true"] { cursor: progress; pointer-events: none; transform: translateY(var(--sarv-press)); --lift: calc(var(--depth, 6px) - var(--sarv-press)); } :is(.px-btn, .sh-btn)[aria-busy="true"]::after { content: ""; width: 8px; height: 8px; background: currentColor; animation: sarv-blink .8s steps(2) infinite; } @keyframes sarv-blink { 50% { opacity: .2; } } .sh-tool[aria-expanded="true"]:not(.sh-time) { --b: var(--sarv-tool-on-edge); --e: var(--sarv-wood-edge-dark); background: var(--sarv-tool-on-bg); color: var(--sarv-tool-on-ink); }
:where(.sh-signlist, .sh-menulist, .px-toc ol, .px-toc-sm ol, .px-tour-nav ol) { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sarv-list-gap); } :where(.px-toc ol, .px-toc-sm ol) { margin-top: var(--sarv-s2); } :is(.sh-signitem, .sh-menuitem, .px-toc li > a, .px-toc-sm li > a, .px-tour-nav li > a) { box-sizing: border-box; width: 100%; min-height: var(--sarv-list-row); display: flex; align-items: center; gap: var(--sarv-list-gap-inline); padding: var(--sarv-s2) var(--sarv-s3); margin: 0; border: 0; border-inline-start: var(--sarv-list-bar) solid var(--sarv-hairline); background: transparent; color: var(--sarv-ink); text-align: start; text-decoration: none; cursor: pointer; font: var(--sarv-t-control); font-variant-ligatures: none; transition: background-color var(--sarv-fast) ease-out, border-color var(--sarv-fast) ease-out; } :is(.sh-signitem, .sh-menuitem, .px-toc li > a, .px-toc-sm li > a, .px-tour-nav li > a) .sh-icon, :is(.px-toc li > a, .px-toc-sm li > a) .px-icon { flex: none; width: var(--sarv-list-icon); height: var(--sarv-list-icon); color: var(--sarv-clay-dark); } :where(.sh-signitem-name, .sh-menuitem-name) { flex: 1; min-width: 0; } :is(.sh-signitem-here) { flex: none; width: var(--sarv-s2); height: var(--sarv-s2); background: transparent; } :is(.sh-signitem, .sh-menuitem):focus-visible { background: var(--sarv-hover); border-inline-start-color: var(--sarv-rule-dark); } @media (hover: hover) { :is(.sh-signitem, .sh-menuitem, .px-toc li > a, .px-toc-sm li > a, .px-tour-nav li > a):hover { background: var(--sarv-hover); border-inline-start-color: var(--sarv-rule-dark); } } :where(.sh-signitem, .sh-menuitem):focus-visible { outline-offset: -3px; } :is(.sh-signitem.is-visited) .sh-signitem-here { background: var(--sarv-green-dark); opacity: .55; } :is(.sh-signitem.is-current, .px-toc li > a[aria-current="true"], .px-toc-sm li > a[aria-current="true"], .px-tour-nav li > a[aria-current="true"]) { background: var(--sarv-current); border-inline-start-color: var(--sarv-clay); font-weight: 700; } :is(.sh-signitem.is-current, .px-toc li > a[aria-current="true"], .px-toc-sm li > a[aria-current="true"], .px-tour-nav li > a[aria-current="true"]) :is(.sh-icon, .px-icon) { color: var(--sarv-clay); } :is(.sh-signitem.is-current) .sh-signitem-here { background: var(--sarv-clay); } @media (prefers-reduced-motion: reduce) { :is(.sh-signitem, .sh-menuitem, .px-toc li > a, .px-toc-sm li > a, .px-tour-nav li > a) { transition: none; } }
:is(.sh-chip, .ias-chatbot-chip, .ias-chatbot-followup-chip) { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --depth: var(--sarv-chip-depth); position: relative; display: inline-flex; align-items: center; gap: var(--sarv-s2); min-height: var(--sarv-hit); padding: var(--sarv-s2) var(--sarv-s4); padding-inline-start: var(--sarv-chip-pad-dot); border: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-chip); font-variant-ligatures: none; text-align: start; cursor: pointer; } :is(.sh-chip, .ias-chatbot-chip, .ias-chatbot-followup-chip)::before { content: ""; position: absolute; inset-inline-start: var(--sarv-chip-dot-x); top: 50%; width: var(--sarv-chip-dot); height: var(--sarv-chip-dot); translate: 0 -50%; background: var(--sarv-wood); box-shadow: inset 0 1px 1px var(--sarv-chip-dot-shade), 0 0 0 2px var(--sarv-chip-ring); } :is(.sh-chip):has(> .sh-icon) { padding-inline-start: var(--sarv-s3); } :is(.sh-chip):has(> .sh-icon)::before { display: none; } :is(.sh-chip) > .sh-icon { color: var(--sarv-clay-dark); } :is(.sh-chip, .ias-chatbot-chip, .ias-chatbot-followup-chip):is(:focus-visible) { color: var(--sarv-clay-dark); } @media (hover: hover) { :is(.sh-chip, .ias-chatbot-chip, .ias-chatbot-followup-chip):hover { color: var(--sarv-clay-dark); } } :is(.sh-chip, .ias-chatbot-chip, .ias-chatbot-followup-chip):focus-visible { --b: var(--sarv-clay); } :is(.sh-chip.is-green) > .sh-icon { color: var(--sarv-green); } :is(.sh-chip.is-green)::before { box-shadow: inset 0 1px 1px var(--sarv-chip-dot-shade), 0 0 0 2px var(--sarv-chip-ring-green); } :is(.sh-chip.is-green):is(:focus-visible) { --b: var(--sarv-green); color: var(--sarv-green-dark); } @media (hover: hover) { :is(.sh-chip.is-green):hover { --b: var(--sarv-green); color: var(--sarv-green-dark); } } :is(.px-slot) { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --depth: var(--sarv-chip-depth); display: inline-flex; align-items: center; justify-content: center; min-height: var(--sarv-hit); min-width: var(--sarv-hit); padding: var(--sarv-s2) var(--sarv-s4); border: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-chip); font-variant-ligatures: none; text-align: center; cursor: pointer; } :is(.px-slot):is(:focus-visible) { color: var(--sarv-clay-dark); } @media (hover: hover) { :is(.px-slot):hover { color: var(--sarv-clay-dark); } } :is(.px-slot):focus-visible { --b: var(--sarv-clay); } :is(.px-slot)[aria-checked="true"] { --b: var(--sarv-edge-primary); --e: var(--sarv-edge-primary-dark); background: var(--sarv-clay-bg); color: var(--sarv-on-clay); }
:is(.px-chip, .ias-chatbot-link-chip, .sh-dir-badge) { font: var(--sarv-t-label); letter-spacing: var(--sarv-badge-track); text-transform: uppercase; color: var(--sarv-badge-ink); } :is(.px-chip.is-ok, .sh-dir-badge[data-s="read"]) { background: var(--sarv-badge-ok); --b: var(--sarv-badge-ok-edge); --e: var(--sarv-badge-ok-edge-dark); } :is(.px-chip.is-wait, .sh-dir-badge[data-s="reading"]) { background: var(--sarv-badge-wait); --b: var(--sarv-badge-wait-edge); --e: var(--sarv-badge-wait-edge-dark); }
.sh-tip, .sh-tooltip, .px-seg button[data-tip]::after, .px-logos a::after, .px-cal-day.is-off::after { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --lift: var(--sarv-tip-depth); padding: var(--sarv-s2) var(--sarv-s3); background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-tip); font-variant-ligatures: none; text-transform: none; letter-spacing: normal; pointer-events: none; opacity: 0; transition: opacity var(--sarv-fast) ease-out; } @media (prefers-reduced-motion: reduce) { .sh-tip, .sh-tooltip, .px-seg button[data-tip]::after, .px-logos a::after, .px-cal-day.is-off::after { transition: none; } }
:is(.sh-dir-tile, .sh-dcard-tile, .px-h-tile) { flex: none; width: var(--sarv-tile, var(--sarv-tile-size)); height: var(--sarv-tile, var(--sarv-tile-size)); display: grid; place-items: center; background: var(--sarv-badge); border: 2px solid var(--sarv-rule-dark); box-shadow: inset 2px 2px 0 var(--sarv-tile-shine); color: var(--sarv-clay-dark); } :is(.sh-dir-tile, .sh-dcard-tile, .px-h-tile) > :is(.sh-icon, .px-icon) { width: var(--sarv-tile-icon); height: var(--sarv-tile-icon); color: inherit; }
:is(.sh-progress, .px-progress) { --b: var(--sarv-wood-mid); --e: var(--sarv-edge); --lift: 4px; width: min(264px, 70vw); height: 20px; padding: 4px; background: var(--sarv-progress-track); } :is(.sh-progress, .px-progress) > span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--sarv-green) 0 12px, transparent 12px 15px); transition: width .3s ease-out; } .sh-house { display: grid; grid-template-columns: repeat(7, 12px); grid-auto-rows: 12px; margin-bottom: 2px; } .sh-b { display: block; opacity: 0; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18), inset 2px 2px 0 rgba(255, 255, 255, .2); } .sh-b.is-on { opacity: 1; animation: sh-place .28s ease-out both; } .sh-b.is-air { visibility: hidden; animation: none; } .sh-b.is-r { background: var(--sh-clay); } .sh-b.is-p { background: var(--sh-bone); } .sh-b.is-w { background: #8fb3c4; } .sh-house.is-home .sh-b.is-w { background: var(--sarv-brass); }    .sh-b.is-d { background: var(--sh-wood); } .sh-b.is-g { background: var(--sh-green); } @keyframes sh-place { from { opacity: 0; transform: translateY(-10px); } }
:is(.sh-card, .px-invite, .px-next, .px-letter, .px-quote, .px-proof, .px-slotbox) { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --lift: var(--sarv-card-depth); background: var(--sarv-paper-bg); }
:is(.sh-quote, .px-quote) > blockquote { position: relative; margin: 0; font: var(--sarv-t-body); } :is(.sh-quote, .px-quote) > blockquote::before { content: "\201C"; display: block; height: 22px; font: 400 48px/40px var(--sarv-display); color: var(--sarv-clay); } :is(.sh-quote, .px-quote) blockquote p { margin: 0; } :is(.sh-quote, .px-quote) figcaption { display: grid; gap: var(--sarv-s1); } :is(.sh-quote, .px-quote) cite { font-style: normal; font-weight: 600; }
:is(.sh-plaque, .px-plaque), .folio .ias-chatbot-pill { --b: var(--sarv-brass); --e: var(--sarv-edge); --depth: var(--sarv-plaque-depth); --b-hover: var(--sarv-brass-light); display: inline-flex; align-items: center; gap: var(--sarv-s3); min-height: var(--sarv-hit); padding: 0 var(--sarv-s4) 0 var(--sarv-s3); border: 0; color: var(--sarv-plaque-ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; background: radial-gradient(circle at 6px 6px, var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) 6px, var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at 6px calc(100% - 6px), var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--sarv-brass-light) 1.5px, transparent 2.2px), var(--sarv-wood-bg); } :is(.sh-plaque, .px-plaque) > :is(.sh-icon, .px-mark):first-child, .folio .ias-chatbot-pill > .px-icon { flex: none; width: var(--sarv-plaque-icon); height: var(--sarv-plaque-icon); color: var(--sarv-brass-light); } :is(.sh-plaque, .px-plaque) > .sh-icon:last-child:not(:first-child) { flex: none; width: 16px; height: 16px; margin-inline-start: 2px; opacity: .8; transition: transform var(--sarv-quick) ease-out; } :is(.sh-plaque-text, .px-plaque-text) { display: grid; min-width: 0; } :is(.sh-plaque .sh-title, .px-plaque-name) { margin: 0; font: var(--sarv-t-plaque-kicker); letter-spacing: .03em; color: var(--sarv-brass-light); white-space: nowrap; } :is(.sh-plaque .sh-chapter, .px-plaque-page) { margin: 0; font: var(--sarv-t-plaque); font-variant-ligatures: none; color: var(--sarv-plaque-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.sh-plaque, .px-plaque)[aria-expanded="true"] { --b: var(--sarv-brass-light); } :is(.sh-plaque, .px-plaque)[aria-expanded="true"] > .sh-icon:last-child:not(:first-child) { transform: rotate(180deg); }
:is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input) { --b: var(--sarv-rule-dark); --e: var(--sarv-rule-dark); --lift: var(--sarv-field-depth); width: 100%; min-height: var(--sarv-hit); box-sizing: border-box; padding: var(--sarv-s3) var(--sarv-s4); border: 0; border-radius: 0; background: var(--sarv-field-bg); color: var(--sarv-ink); font: var(--sarv-t-field); font-variant-ligatures: none; -webkit-appearance: none; appearance: none; caret-color: var(--sarv-clay); } :is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input)::placeholder { color: var(--sarv-muted); opacity: 1; } @media (hover: hover) { :is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input):hover { --b: var(--sarv-wood-mid); --e: var(--sarv-wood-mid); } } :is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input):focus-visible { --b: var(--sarv-clay); --e: var(--sarv-clay); outline: var(--sarv-field-halo) solid var(--sarv-brass); outline-offset: var(--sarv-s1); } :is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input)[aria-invalid="true"] { --b: var(--sarv-clay); --e: var(--sarv-clay); background: var(--sarv-field-invalid-bg); } :is(.sh-field, .sh-ask-input, .sh-dir-search, .sh-skysearch, .px-input, .ias-chatbot-input):disabled { opacity: var(--sarv-disabled); } :is(.sh-field-row > label, .px-field > label) { font: var(--sarv-t-field-label); color: var(--sarv-ink); } :is(.sh-field-hint, .px-hint) { margin: 0; font: var(--sarv-t-hint); color: var(--sarv-muted); } :is(.sh-field-err, .px-error) { margin: 0; display: flex; gap: var(--sarv-s2); align-items: flex-start; font: var(--sarv-t-hint); color: var(--sarv-clay-dark); } :is(.sh-field-err, .px-error) :is(.sh-icon, .px-icon) { margin-top: var(--sarv-s1); } :is(.sh-field-err, .px-error)[hidden] { display: none; }
:is(.px-label, .px-facts dt, .px-stats dt, .px-glimpse-body .px-credit, .px-shelf-name, .px-voices-group, .sh-decision strong, .sh-fact dt, .sh-toc-glabel, .sh-tab) { font: var(--sarv-t-label); letter-spacing: var(--sarv-kicker-track); text-transform: uppercase; } .px-label { color: var(--sarv-green-dark); } :is(.px-facts dt, .px-stats dt, .px-glimpse-body .px-credit) { color: var(--sarv-muted); } :is(.px-shelf-name, .px-voices-group, .sh-decision strong, .sh-fact dt, .sh-toc-glabel) { color: var(--sarv-clay-dark); }
:is(.sh-decision, .sh-fact, .px-foot > .px-summary) { padding: var(--sarv-s3) var(--sarv-s4); background: var(--sarv-callout-bg); border-inline-start: 4px solid var(--sarv-clay-dark); } :is(.sh-decision, .sh-fact) { font: var(--sarv-t-callout); color: var(--sarv-ink-soft); } .sh-summary { font: var(--sarv-t-lede); color: var(--sarv-ink-soft); } .sh-metrics strong { font: var(--sarv-t-stat); } .sh-metrics span { font: var(--sarv-t-hint); } :is(.sh-hover.is-glimpse, .sh-toast, .sh-gallery figcaption .sh-verse) { font: var(--sarv-t-aside); }
:is(.px-form-status, .sh-idea-status) { margin: 0; font: var(--sarv-t-status); color: var(--sarv-ink); } :is(.px-form-status, .sh-idea-status)[data-state="error"] { color: var(--sarv-clay-dark); }
.sh-switch { --b: var(--sarv-wood-mid); --lift: var(--sarv-switch-depth); position: relative; flex: none; width: var(--sarv-switch-w); height: var(--sarv-switch-h); padding: 0; border: 0; background: var(--sarv-switch-off); cursor: pointer; } .sh-switch::after { content: ""; position: absolute; inset: calc((var(--sarv-hit) - var(--sarv-switch-h)) / -2); } .sh-knob { position: absolute; top: var(--sarv-switch-inset); inset-inline-start: var(--sarv-switch-inset); width: var(--sarv-switch-knob); height: var(--sarv-switch-knob); background: var(--sarv-wood-mid); transition: inset-inline-start var(--sarv-switch-move) ease-out; } @media (hover: hover) { .sh-switch:hover { --b: var(--sarv-clay); } } .sh-switch[aria-checked="true"] { --b: var(--sarv-green-dark); background: var(--sarv-green); } .sh-switch[aria-checked="true"] .sh-knob { inset-inline-start: calc(var(--sarv-switch-w) - var(--sarv-switch-knob) - var(--sarv-switch-inset)); background: var(--sarv-switch-knob-on); } .px-seg { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --lift: var(--sarv-seg-depth); display: inline-flex; background: var(--sarv-paper-bg); } .px-seg button { display: inline-flex; align-items: center; gap: var(--sarv-s2); min-height: var(--sarv-hit); padding: 0 var(--sarv-s4); border: 0; background: none; color: var(--sarv-muted); font: var(--sarv-t-button); font-variant-ligatures: none; cursor: pointer; transition: color var(--sarv-fast) ease-out, background-color var(--sarv-fast) ease-out; } .px-seg button:lang(ar) { font-family: system-ui, sans-serif; font-weight: 600; } .px-seg button + button { box-shadow: inset 2px 0 0 var(--sarv-seg-divider); } @media (hover: hover) { .px-seg button:hover { color: var(--sarv-ink); background: var(--sarv-seg-selected); } } .px-seg button .px-icon { width: var(--sarv-seg-icon); height: var(--sarv-seg-icon); } .px-seg button[aria-pressed="true"] { color: var(--sarv-seg-on-ink); background: var(--sarv-clay); } @media (hover: hover) { .px-seg button[aria-pressed="true"]:hover { background: var(--sarv-clay-dark); color: var(--sarv-seg-on-ink); } }
:is(.sh-panel, .px-folio, .px-versions-list, .folio .ias-chatbot-window) { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --lift: var(--sarv-card-depth); padding: 0; border: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); } :is(.sh-panel, .px-folio)::backdrop { background: var(--sarv-scrim); } :is(.sh-panel, .px-folio)[open], .folio .ias-chatbot-widget.expanded .ias-chatbot-window { animation: sarv-dialog-rise var(--sarv-quick) var(--sarv-ease); } @keyframes sarv-dialog-rise { from { opacity: 0; transform: translateY(var(--sarv-s4)); } } @media (prefers-reduced-motion: reduce) { :is(.sh-panel, .px-folio)[open], .folio .ias-chatbot-widget.expanded .ias-chatbot-window { animation: none; } } .sh-world.is-reduced .sh-panel[open] { animation: none; } :is(.px-folio-head, .ias-chatbot-header) { display: flex; align-items: center; justify-content: space-between; gap: var(--sarv-s4); padding: var(--sarv-s4) var(--sarv-s4) var(--sarv-s4) var(--sarv-s5); border-bottom: 2px solid var(--sarv-hairline); background: var(--sarv-parch); } .px-folio-head { position: sticky; top: 0; } :is(.px-folio-head h2, .ias-chatbot-header-title) { margin: 0; font: var(--sarv-t-heading); font-family: var(--sarv-ui); font-variant-ligatures: none; } .folio .ias-chatbot-window { --b: var(--sarv-brass); --e: var(--sarv-edge); } .folio .ias-chatbot-header { border-bottom-color: var(--sarv-brass); background: var(--sarv-wood-bg); color: var(--sarv-plaque-ink); } :is(.sh-panel-close, .sh-panel-back, .ias-chatbot-close-btn, .px-folio-head .px-tool.is-icon) { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --depth: 4px; display: grid; place-items: center; box-sizing: border-box; width: var(--sarv-hit); height: var(--sarv-hit); min-height: 0; flex: none; padding: 0; border: 0; cursor: pointer; background: var(--sarv-paper-bg); color: var(--sarv-ink); }
.sh-menu { --sarv-sheet-w: var(--sarv-sheet-menu-w); --b: var(--sarv-rule); --e: var(--sarv-rule-dark); padding: 0; border: 0; border-radius: 0; background: var(--sarv-paper-bg); color: var(--sarv-ink); } :is(.sh-menu, .sh-panel)::backdrop { background: var(--sarv-scrim); } @media (max-width: 809.98px), (max-height: 499.98px) { .sh-world :is(.sh-menu, .sh-panel) { box-sizing: border-box; inset: auto 0 0 0; width: min(100%, var(--sarv-sheet-w, 100%)); max-width: 100%; margin: auto auto 0; --lift: 0px; max-height: min(var(--sarv-sheet-max), calc(100dvh - max(var(--sarv-s5), env(safe-area-inset-top)))); overscroll-behavior: contain; } .sh-world :is(.sh-menu, .sh-panel)[open] { animation: sarv-sheet-rise var(--sarv-quick) var(--sarv-ease); } .sh-world :is(.sh-menu, .sh-panel)::before { content: ""; position: absolute; z-index: 3; top: var(--sarv-s2); left: 50%; width: var(--sarv-sheet-handle-w); height: var(--sarv-sheet-handle-h); margin-left: calc(var(--sarv-sheet-handle-w) / -2); background: var(--sarv-rule); pointer-events: none; } } @media (max-height: 499.98px) and (orientation: landscape) { .sh-world :is(.sh-menu, .sh-panel) { inset: max(var(--sarv-s5), env(safe-area-inset-top)) 0 auto 0; margin: 0 auto auto; height: calc(100dvh - max(var(--sarv-s5), env(safe-area-inset-top))); } } @media (max-width: 639.98px) { .folio :is(.px-folio, .ias-chatbot-window) { box-sizing: border-box; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: auto auto 0; --lift: 0px; padding-bottom: env(safe-area-inset-bottom); max-height: min(var(--sarv-sheet-max), calc(100dvh - max(var(--sarv-s5), env(safe-area-inset-top)))); overscroll-behavior: contain; } .folio .ias-chatbot-window { height: min(var(--sarv-sheet-max), calc(100dvh - max(var(--sarv-s5), env(safe-area-inset-top)))); } .folio .px-folio[open], .folio .ias-chatbot-widget.expanded .ias-chatbot-window { animation: sarv-sheet-rise var(--sarv-quick) var(--sarv-ease); } .folio :is(.px-folio, .ias-chatbot-window)::before { content: ""; position: absolute; z-index: 3; top: var(--sarv-s2); left: 50%; width: var(--sarv-sheet-handle-w); height: var(--sarv-sheet-handle-h); margin-left: calc(var(--sarv-sheet-handle-w) / -2); background: var(--sarv-rule); pointer-events: none; } } .sh-world :is(.sh-panel).is-scrolled::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: var(--sarv-sheet-bar); background: inherit; box-shadow: 0 var(--sarv-s1) 0 var(--sarv-rule); pointer-events: none; } .sh-menu[open] { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: max(var(--sarv-s4), env(safe-area-inset-bottom)); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); } .sh-world .sh-menu.is-dragging { animation: none; transition: none; } @keyframes sarv-sheet-rise { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .sh-world :is(.sh-menu, .sh-panel)[open], .folio .px-folio[open], .folio .ias-chatbot-widget.expanded .ias-chatbot-window { animation: none; } } .sh-world.is-reduced :is(.sh-menu, .sh-panel)[open] { animation: none; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/vendor/fonts.gstatic.com/547062430ce141b8-iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/vendor/fonts.gstatic.com/547062430ce141b8-iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/vendor/fonts.gstatic.com/547062430ce141b8-iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/vendor/fonts.gstatic.com/547062430ce141b8-iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Chonburi'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/vendor/fonts.gstatic.com/145acb31e7f67843-8AtqGs-wOpGRTBq66LWdHLw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/world/fonts/pixelify-sans.woff2) format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/assets/world/fonts/jetbrains-mono.woff2) format('woff2'); } @font-face { font-family: 'Chonburi Georgia'; src: local('Georgia'); size-adjust: 127.7%; } @font-face { font-family: 'Chonburi Times'; src: local('Times New Roman'), local('Times'); size-adjust: 139.6%; } @font-face { font-family: 'Rubik Arial'; font-weight: 300 500; src: local('Arial'), local('Helvetica'); size-adjust: 105.5%; } @font-face { font-family: 'Rubik Arial'; font-weight: 600 700; src: local('Arial Bold'), local('Helvetica Bold'); size-adjust: 103.2%; } @font-face { font-family: 'Rubik Roboto'; font-weight: 300 500; src: local('Roboto'), local('Segoe UI'); size-adjust: 118%; } @font-face { font-family: 'Rubik Roboto'; font-weight: 600 700; src: local('Roboto Bold'), local('Segoe UI Bold'); size-adjust: 117%; } @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Courier New'), local('Consolas'); size-adjust: 100%; } @font-face { font-family: 'Pixelify Arial'; src: local('Arial'), local('ArialMT'); font-weight: 400 700; size-adjust: 105.4%; ascent-override: 87.3%; descent-override: 26.6%; line-gap-override: 0%; }
@property --ring { syntax: '*'; inherits: false; } @property --lift { syntax: '<length>'; inherits: false; initial-value: 6px; } :root { color-scheme: light; --site-page: #fbf7ee; --site-ink: var(--sarv-ink); --site-muted: var(--sarv-muted); --site-action: var(--sarv-clay); --site-action-dark: var(--sarv-clay-dark); --site-action-bg: var(--sarv-clay-bg); --site-evidence: var(--sarv-green); --site-evidence-dark: var(--sarv-green-dark); --site-raised: var(--sarv-paper-bg); --site-raised-solid: var(--sarv-parch); --site-identity: var(--sarv-wood-bg); --site-fitting: var(--sarv-brass); --site-fitting-light: var(--sarv-brass-light); --site-rule: var(--sarv-rule); --site-rule-dark: var(--sarv-rule-dark); --site-hairline: #e3d6bd; --site-selected: #f4ead6; --site-link: var(--site-action-dark); --site-halo: var(--sarv-halo); --site-f-display: 'Pixelify Sans', 'Pixelify Arial', system-ui, sans-serif; --site-f-body: var(--sarv-body); --site-f-ui: var(--sarv-ui); --site-f-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', var(--sarv-body); --site-t-display: 600 40px/48px var(--site-f-display); --site-t-h2: 600 32px/40px var(--site-f-display); --site-t-h3: 600 20px/28px var(--site-f-body); --site-t-lede: 400 20px/32px var(--site-f-body); --site-t-body: 400 16px/28px var(--site-f-body); --site-t-caption: 400 16px/24px var(--site-f-body); --site-t-label: var(--sarv-t-label); --site-t-control: var(--sarv-t-button); --site-t-meta: var(--sarv-t-meta); --site-t-num: var(--sarv-t-num); --site-container: 1200px; --site-gutter: 16px; --site-section: 64px; --site-measure: 66ch; } @media (min-width: 640px) { :root { --site-t-display: 600 48px/56px var(--site-f-display); --site-t-h3: 600 24px/32px var(--site-f-body); --site-t-lede: 400 24px/36px var(--site-f-body); --site-t-body: 400 20px/32px var(--site-f-body); --site-gutter: 24px; --site-section: 96px; } } @media (min-width: 1024px) { :root { --site-t-display: 600 64px/72px var(--site-f-display); --site-t-h2: 600 40px/48px var(--site-f-display); --site-gutter: 32px; } } .folio *, .folio *::before, .folio *::after { box-sizing: border-box; } .folio, .folio body { background: var(--site-page); } .folio body { margin: 0; color: var(--site-ink); font: var(--site-t-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .folio :where(h1, h2, h3) { text-wrap: pretty; margin: 0; font-variant-ligatures: none !important; } .folio :where(h1) { text-wrap: balance; } .folio .px-nb { white-space: nowrap; } .folio :where(h1) { font: var(--site-t-display); letter-spacing: 0; } .folio :where(h2) { font: var(--site-t-h2); } .folio :where(h3) { font: var(--site-t-h3); } .folio :where(a) { color: inherit; } .folio :where(p, li, dd, figcaption, td) a:where(:not([class])) { color: var(--site-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--sarv-fast) ease-out; } .folio :where(p, li, dd, figcaption, td) a:where(:not([class])):hover { color: var(--site-action); text-decoration-thickness: 2px; } .folio :where(p, li, dd, figcaption, td) a[target="_blank"]:where(:not([class], :has(img, svg, picture)))::after { content: ""; content: "" / " (opens in a new tab)"; display: inline-block; width: .75em; height: .75em; margin-inline-start: 4px; background: currentColor; vertical-align: -.05em; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27square%27%3E%3Cpath d=%27M7 17 17 7M9 7h8v8%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27square%27%3E%3Cpath d=%27M7 17 17 7M9 7h8v8%27/%3E%3C/svg%3E") center / contain no-repeat; } [dir="rtl"] .folio a[target="_blank"]::after, .folio [dir="rtl"] a[target="_blank"]::after { transform: scaleX(-1); } .folio :where(img) { max-width: 100%; height: auto; } .folio :focus-visible { outline: 3px solid var(--site-ink); outline-offset: 3px; --ring: 0 0 0 6px var(--site-halo); } .folio-wrap { width: min(100% - 2 * var(--site-gutter), var(--site-container)); margin-inline: auto; } @media (prefers-reduced-motion: reduce) { .folio *, .folio *::before, .folio *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }
:where(button, summary) { color: inherit; } .px-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: none; } .px-btn { white-space: nowrap; } .px-mail-short { display: none; } @media (max-width: 359px) { .px-btn { white-space: normal; overflow-wrap: anywhere; } .px-mail-addr { display: none; } .px-mail-short { display: inline; } :is(.px-invite, .px-next) .px-actions { display: grid; grid-template-columns: minmax(0, 1fr); } :is(.px-invite, .px-next) .px-actions .px-btn { justify-content: center; } } .px-tool { --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: var(--sarv-hit); padding: 0 16px; border: 0; background: var(--site-raised); color: var(--site-ink); font: var(--site-t-control); font-variant-ligatures: none; text-decoration: none; cursor: pointer; white-space: nowrap; } .px-tool.is-icon { width: var(--sarv-hit); padding: 0; justify-content: center; } .px-fieldset { display: grid; gap: 24px; border: 0; margin: 0; padding: 0; min-width: 0; } .px-field { display: grid; gap: 8px; } textarea.px-input { min-height: 160px; resize: vertical; } .px-label { margin: 0; } .px-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .px-letter { padding: 32px; } .px-letter .px-form-status:empty { display: none; }
.folio body { overflow-x: clip; } .px-edge { } .folio :is(.px-tool.is-world, .px-glimpse):hover:not(:disabled) { --b: var(--site-evidence-dark); } .px-menu-line { transition: color var(--sarv-fast) ease-out, background-color var(--sarv-fast) ease-out; } .px-glyph { display: inline-block; width: 16px; text-align: center; font: 700 16px/16px var(--site-f-mono, ui-monospace, monospace); font-variant-ligatures: none; } .px-seg button:lang(ar) .px-glyph, .px-glyph:lang(ar) { font-family: system-ui, sans-serif; font-size: 16px; } .px-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px 24px; } .px-nav { display: flex; align-items: center; gap: 12px; } .px-tool[aria-current="page"] { --b: var(--site-action); color: var(--site-action-dark); } .px-tool[aria-current="page"]::after { content: ""; width: 8px; height: 8px; background: var(--site-action); } .px-tool.is-world { --b: var(--site-evidence-dark); --e: var(--sarv-edge-on); color: var(--site-evidence-dark); } .px-menu-open { display: none; } @media (max-width: 1023.98px) { .px-nav .px-tool:not(.px-menu-open) { display: none; } .px-menu-open { display: inline-flex; } } .px-folio { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; } .px-folio-body { padding: 24px; display: grid; gap: 8px; } .px-menu-line { display: grid; gap: 4px; padding: 12px 16px; text-decoration: none; color: inherit; border-inline-start: 4px solid transparent; } .px-menu-line:hover { background: var(--site-selected); border-color: var(--site-rule-dark); } .px-menu-line[aria-current="page"] { border-color: var(--site-action); background: var(--site-selected); } .px-menu-line b { font: var(--site-t-control); font-variant-ligatures: none; } .px-menu-line span { font: var(--site-t-caption); color: var(--site-muted); } .px-viewer { width: min(1080px, calc(100vw - 32px)); } .px-viewer img { display: block; width: 100%; height: auto; } .px-chip { --b: var(--site-rule); --e: var(--site-rule-dark); --lift: 0px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--site-raised-solid); white-space: nowrap; } .px-chip .px-icon { width: 16px; height: 16px; } .px-exhibit { min-width: 0; grid-template-columns: minmax(0, 1fr); --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 8px; display: grid; grid-template-rows: auto 1fr; background: var(--sarv-white); color: inherit; text-decoration: none; } .px-exhibit img { display: block; width: 100%; aspect-ratio: 1024 / 587; object-fit: cover; border-bottom: 2px solid var(--site-rule); } .px-exhibit-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; } .px-exhibit-body > .px-exhibit-go { margin-top: auto; align-self: flex-start; } .px-exhibit h3 { font: var(--site-t-h3); } .px-exhibit-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .px-exhibit-go { display: inline-flex; gap: 8px; align-items: center; font: var(--site-t-control); font-variant-ligatures: none; color: var(--site-action-dark); } .px-exhibit.is-soon { opacity: .9; } .px-evidence { --b: var(--site-rule); --e: var(--site-rule-dark); --lift: 6px; background: var(--site-raised); padding: 24px; display: grid; gap: 12px; align-content: start; } .px-evidence strong { font: var(--site-t-num); color: var(--site-evidence-dark); display: block; padding-bottom: 12px; border-bottom: 2px solid var(--site-evidence); } .px-evidence p { margin: 0; font: var(--site-t-caption); color: var(--site-ink); } .px-evidence .px-qualifier { color: var(--site-muted); } .px-decision { --b: var(--site-evidence); --e: var(--site-evidence-dark); --lift: 8px; background: var(--site-raised); padding: 24px; display: grid; gap: 12px; } .px-decision h2 { font: var(--site-t-h2); font-size: 32px; line-height: 40px; } .px-decision p { margin: 0; } .px-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 2px solid var(--site-rule); background: var(--site-raised-solid); font: var(--site-t-caption); } .px-alert .px-icon { margin-top: 2px; } .px-alert.is-error { border-color: var(--site-action); background: var(--sarv-field-invalid-bg); color: var(--site-action-dark); } .px-alert.is-success { border-color: var(--site-evidence); background: var(--sarv-success-bg); color: var(--site-evidence-dark); } .px-footer { background: var(--site-identity); color: var(--sarv-plaque-ink); padding-block: 48px; margin-top: var(--site-section); box-shadow: 0 -4px 0 var(--sarv-edge); } .px-footer :focus-visible { outline-color: var(--site-fitting-light); } .px-exhibit.is-locked, .px-case.is-locked .px-case-pic { position: relative; } .px-lock { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1024 / 587; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: var(--sarv-veil); opacity: 0; visibility: hidden; transition: opacity var(--sarv-quick) var(--sarv-ease), visibility var(--sarv-quick); } .px-case.is-locked .px-lock { inset: 0; aspect-ratio: auto; } .px-lock-msg { font: var(--site-t-h3); color: var(--site-ink); } .is-locked:hover .px-lock, .is-locked:focus-within .px-lock { opacity: 1; visibility: visible; } @media (hover: none) { .px-lock { opacity: 1; visibility: visible; background: none; justify-content: flex-end; padding: 12px; pointer-events: none; } .px-lock .px-btn { pointer-events: auto; } .px-lock-msg { display: none; } } html.px-in::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--site-page); animation: px-t-failsafe 0s 2.5s forwards; } @keyframes px-t-failsafe { to { opacity: 0; visibility: hidden; } } .px-t { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; display: grid; place-items: center; } .px-t > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .px-t-card { --b: var(--sarv-wood-mid); --e: var(--sarv-edge); --lift: 4px; position: relative; display: grid; justify-items: center; gap: 16px; padding: 24px 28px 22px; background: var(--sarv-paper-bg); opacity: 0; transition: opacity .2s steps(3, end); } .px-t.is-lifting { pointer-events: none; } .px-t-card.is-on { opacity: 1; } .px-t-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html.px-in::before, .px-t { display: none; } }
.px-page { background: var(--site-page); min-height: 100vh; } .px-skip { position: absolute; inset-inline-start: 16px; top: -64px; z-index: 50; padding: 12px 16px; background: var(--site-ink); color: var(--sarv-white); font: var(--site-t-control); font-variant-ligatures: none; } .px-skip:focus { top: 16px; } .px-num { font-family: var(--site-f-mono); letter-spacing: 0; text-transform: none; } .px-article { padding-block: 0 var(--site-section); } .px-crumb { display: flex; align-items: center; gap: var(--sarv-s2); margin: 0 0 var(--sarv-s2); font: var(--sarv-t-control); color: var(--site-muted); } .px-crumb > a { margin-inline-start: calc(var(--sarv-s2) * -1); } .px-crumb-here { display: inline-flex; align-items: center; gap: var(--sarv-s2); color: var(--site-ink); } .px-crumb-here::after { content: ""; width: var(--sarv-s2); height: var(--sarv-s2); background: var(--site-action); flex: none; } .px-article-head { display: grid; gap: 16px; max-width: 880px; } .px-article-head h1 { max-width: 20ch; } .px-summary { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 54ch; } .px-facts { display: flex; flex-wrap: wrap; margin: 8px 0 0; padding: 0; border-block: 2px solid var(--site-hairline); } .px-facts div { padding: 16px 32px 16px 0; } .px-facts dd { margin: 4px 0 0; font: var(--site-t-meta); } .px-article-hero { margin: 48px 0 0; width: 100%; --b: var(--site-rule); --e: var(--site-rule-dark); --lift: 8px; background: var(--site-raised); display: grid; place-items: center; } .px-article-hero img { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; } .px-article-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 64px; } .px-toc { display: none; } .px-toc-sm { margin: 32px 0 0; } .px-toc-sm summary { display: inline-flex; gap: 8px; align-items: center; min-height: var(--sarv-hit); padding: 0 16px; cursor: pointer; font: var(--site-t-control); font-variant-ligatures: none; background: var(--site-raised); border: 2px solid var(--site-rule); list-style: none; } .px-toc-sm summary::-webkit-details-marker { display: none; } @media (min-width: 1024px) { .px-toc-sm { display: none; } .px-article-body { grid-template-columns: 272px minmax(0, 1fr); gap: 64px; } .px-toc { display: block; position: sticky; top: 24px; align-self: start; } } .px-reading { max-width: var(--site-measure); min-width: 0; } .px-reading > * + * { margin-top: var(--site-section); } .px-reading > .px-decision { margin-top: 0; } .px-reading h2 { font: var(--site-t-h2); font-size: 32px; line-height: 40px; } .px-reading h3 { margin: 32px 0 8px; } .px-reading p { margin: 0 0 16px; } .px-reading .px-lede { font: var(--site-t-lede); color: var(--sarv-ink-soft); margin: 8px 0 24px; } .px-chapter, .px-evidence-block, .px-invite { scroll-margin-top: 24px; } .px-evidence-row { display: grid; gap: 24px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); } .px-qualifier { margin-top: 4px !important; font-style: italic; } .px-evidence-block { container-type: inline-size; } @container (min-width: 720px) { .px-evidence-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 0 24px; } .px-evidence { grid-row: span 3; grid-template-rows: subgrid; } } .px-figure { margin: 32px 0; } .px-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sarv-white); cursor: zoom-in; --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 6px; transition: --lift .08s ease-out, transform .08s ease-out; } .px-zoom img { display: block; width: 100%; height: auto; } :is(.px-figure.is-tall, .px-hero-shot) .px-zoom { max-height: var(--crop, 560px); overflow: hidden; } :is(.px-figure.is-tall, .px-hero-shot) .px-zoom::before { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; background: linear-gradient(transparent, var(--sarv-white)); pointer-events: none; } .px-zoom-hint { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: inline-flex; gap: 8px; align-items: center; padding: 4px 12px; background: var(--site-raised-solid); font: var(--site-t-label); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 -2px 0 var(--site-rule), 0 2px 0 var(--site-rule), -2px 0 0 var(--site-rule), 2px 0 0 var(--site-rule); } .px-figure figcaption { margin-top: 16px; font: var(--site-t-caption); color: var(--site-muted); } .px-viewer { max-height: calc(100dvh - 32px); } .px-viewer img { display: block; width: 100%; height: auto; } .px-viewer img.is-fit { width: auto; max-width: 100%; max-height: calc(100dvh - 160px); margin-inline: auto; } .px-invite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px; } .px-invite p { margin: 0; } .px-actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; } .px-related { margin-top: var(--site-section); display: grid; gap: 32px; } .px-related-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .px-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .px-related-all { margin: 0; } .px-footer-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .px-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 64px; } } .px-footer .px-plaque-name { color: var(--site-fitting-light); margin: 0 0 12px; } .px-footer-line { margin: 0; font: var(--site-t-caption); max-width: 44ch; color: var(--sarv-inverse-ink-soft); } .px-footer-links { list-style: none; margin: 0; margin-inline-start: calc(-1 * var(--sarv-s2)); padding: 0; display: grid; gap: var(--sarv-s1); justify-items: start; align-content: start; } .px-footer-versions { margin-top: var(--sarv-s6); } .px-versions { position: relative; margin-inline-start: calc(-1 * var(--sarv-s2)); } .px-versions > summary { list-style: none; cursor: pointer; width: max-content; } .px-versions > summary::-webkit-details-marker { display: none; } .px-versions-list { position: absolute; inset-block-end: calc(100% + var(--sarv-s2)); inset-inline-start: 0; z-index: 5; width: min(360px, calc(100vw - 2 * var(--site-gutter))); } .px-versions-list .px-folio-body { padding: var(--sarv-s3); gap: var(--sarv-s1); } .px-chiplist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .px-evidence-note { margin-top: 24px !important; max-width: 60ch; color: var(--site-muted); } .px-notice { margin: 0; } .px-screens { display: grid; gap: 40px 32px; margin: 32px 0; grid-template-columns: minmax(0, 1fr); } .px-screen { display: grid; gap: 8px; align-content: start; min-width: 0; } .px-reading .px-screen h3 { margin: 0; } .px-screen p { margin: 0; } .px-screen-pics { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; } .px-screens-cap { grid-column: 1 / -1; margin: 0 !important; font: var(--site-t-caption); color: var(--site-muted); } .px-screens.is-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-screens.is-phone .px-screen.is-multi { grid-column: 1 / -1; } .px-screens.is-phone .px-screen.is-multi .px-screen-pics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); } .px-screens.is-phone .px-screen-pics .px-zoom { max-width: 240px; } .px-screens.is-phone .px-zoom-hint { display: none; } @media (min-width: 640px) { .px-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-screens.is-phone { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .px-screen.is-multi { grid-column: 1 / -1; } .px-screens:not(.is-phone) .px-screen.is-multi .px-screen-pics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .px-article-hero.is-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 32px; padding: 32px 24px 0; } .px-article-hero.is-pair img { width: auto; max-width: 100%; height: 440px; object-fit: contain; box-shadow: 0 0 0 2px var(--site-rule); } @media (max-width: 639.98px) { .px-article-hero.is-pair { width: 100%; flex-direction: column; align-items: center; gap: 16px; padding: 16px 16px 0; } .px-article-hero.is-pair img { width: 100%; height: auto; } } .px-hero-shot { margin: 48px 0 0; --crop: none; } .px-hero-shot .px-zoom { max-height: none; aspect-ratio: 15 / 8; } .px-hero-shot.is-device .px-zoom { display: grid; justify-items: center; padding-top: var(--sarv-s6); background: var(--site-raised); } .px-hero-shot.is-device .px-zoom img { width: min(360px, 72%); box-shadow: 0 0 0 2px var(--site-rule); } @media (max-width: 639.98px) { .px-hero-shot.is-device .px-zoom { aspect-ratio: 4 / 5; padding-top: var(--sarv-s4); } } @media (min-width: 768px) { .px-article-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--sarv-s7) 64px; align-items: start; } .px-article-top .px-hero-shot { margin: 0; --crop: 640px; } .px-article-top .px-hero-shot.is-device .px-zoom { aspect-ratio: auto; padding: 0; background: var(--sarv-white); } .px-article-top .px-hero-shot.is-device .px-zoom img { width: 100%; box-shadow: none; } } .px-screens.is-phone .px-screen-pics { display: flex; flex-wrap: wrap; gap: 16px; } .px-screens.is-phone .px-screen-pics .px-zoom { width: min(240px, calc(50% - 8px)); } .px-screens.is-phone .px-screen:not(.is-multi) .px-screen-pics .px-zoom { width: 100%; } .px-spec { margin: 32px 0; display: grid; gap: 16px; --b: var(--site-rule); --e: var(--site-rule-dark); } .px-spec.is-hero { margin: 48px 0 0; } .px-spec-case { background: var(--sarv-white); box-shadow: 0 -2px 0 var(--b), 0 2px 0 var(--b), -2px 0 0 var(--b), 2px 0 0 var(--b), 0 8px 0 var(--e); display: grid; min-width: 0; } .px-spec-label { margin: 0; padding: 12px 16px; border-bottom: 2px solid var(--site-hairline); font: var(--site-t-label, 500 12px/16px var(--site-f-mono)); letter-spacing: .04em; text-transform: uppercase; color: var(--site-muted); } .px-spec-stage { padding: 16px; min-width: 0; overflow-x: auto; } .px-spec-stage:focus-visible { outline: 3px solid var(--site-ink); outline-offset: -3px; } .px-spec > figcaption { margin: 0; font: var(--site-t-caption); color: var(--site-muted); } @media (min-width: 768px) { .px-spec-stage { padding: 24px; } } .px-principles { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); counter-reset: pr; } @media (min-width: 768px) { .px-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .px-principles li { border: 2px solid var(--site-rule); background: var(--site-raised-solid); padding: 24px; display: grid; gap: 8px; align-content: start; counter-increment: pr; } .px-principles li::before { content: counter(pr, decimal-leading-zero); font: var(--site-t-label, 500 12px/16px var(--site-f-mono)); color: var(--site-muted); } .px-reading .px-principles h3 { margin: 0; font: var(--site-t-h3); } .px-principles p { margin: 0; } .px-principles .px-example { font: var(--site-t-caption); color: var(--site-muted); padding-top: 8px; border-top: 2px solid var(--site-hairline); } .px-deflist { margin: 24px 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--site-hairline); } .px-deflist > div { padding: 16px 0; border-bottom: 2px solid var(--site-hairline); display: grid; gap: 4px; } .px-deflist dt { font: 600 16px/24px var(--site-f-body); margin: 0; } .px-deflist dd { margin: 0; color: var(--site-muted); } @media (min-width: 768px) { .px-deflist > div { grid-template-columns: 192px minmax(0, 1fr); gap: 24px; } } .px-tokentable { margin: 24px 0; overflow-x: auto; } .px-tokentable table { border-collapse: collapse; width: 100%; } .px-tokentable th, .px-tokentable td { text-align: start; padding: 12px 16px 12px 0; border-bottom: 2px solid var(--site-hairline); font: var(--site-t-body, 400 16px/24px var(--site-f-body)); } .px-tokentable th { font: 500 12px/16px var(--site-f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--site-muted); } .px-tokentable td:first-child { font-family: var(--site-f-mono); font-size: 14px; } .px-note { margin: 16px 0 0; font: var(--site-t-caption); color: var(--site-muted); } .px-flow { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); counter-reset: fl; } .px-flow li { border: 2px solid var(--site-rule); background: var(--site-raised-solid); padding: 16px 24px; font: 600 16px/24px var(--site-f-body); position: relative; counter-increment: fl; } .px-flow li + li { margin-top: 24px; } .px-flow li + li::before { content: ''; position: absolute; inset-inline-start: 24px; top: -24px; height: 24px; border-inline-start: 2px solid var(--site-rule-dark); } .px-flow li span { display: block; font: 400 16px/24px var(--site-f-body); color: var(--site-muted); margin-top: 4px; } @media (min-width: 768px) { .px-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .px-flow li + li { margin-top: 0; margin-inline-start: 24px; } .px-flow li + li::before { inset-inline-start: -26px; top: 50%; height: 0; width: 24px; border-inline-start: 0; border-top: 2px solid var(--site-rule-dark); } } .px-spec-stage.is-flush { padding: 12px; } @media (min-width: 768px) { .px-spec-stage.is-flush { padding: 12px; } } .px-spec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 16px; border-bottom: 2px solid var(--site-hairline); } .px-spec-head .px-spec-label { padding: 0; border: 0; } .px-spec-tools { display: flex; flex-wrap: wrap; gap: 12px; } .px-spec-tools[hidden], .px-spec-hint[hidden] { display: none; } .px-spec-hint { margin: 0; padding: 0 16px 12px; font: var(--site-t-caption); color: var(--site-muted); } .px-view { margin-top: 24px; display: grid; gap: 12px; justify-items: start; } .px-view[hidden], .px-viewbar[hidden] { display: none; } .px-view .px-label { margin: 0; } .px-viewbar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 30; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--site-page); border-top: 2px solid var(--site-hairline); } html[data-spec-view] .px-viewbar:not([hidden]) { display: flex; } @media (min-width: 1024px) { .px-viewbar, html[data-spec-view] .px-viewbar:not([hidden]) { display: none; } } .px-spec-status { margin: 0; font: var(--site-t-label, 500 12px/16px var(--site-f-mono)); letter-spacing: .04em; text-transform: uppercase; color: var(--site-muted); } .px-spec-foot { margin: 0; padding: 12px 16px; border-top: 2px solid var(--site-hairline); display: flex; flex-wrap: wrap; gap: 4px 24px; font: var(--site-t-label, 500 12px/16px var(--site-f-mono)); letter-spacing: .04em; text-transform: uppercase; color: var(--site-muted); } .px-spec-foot b { color: var(--site-ink); } @media (max-width: 1023px) { .px-viewbar { padding-right: 72px; gap: 8px; } .px-viewbar .px-seg button { padding: 0 8px; gap: 6px; } } .px-view-cap { margin: 0; font: var(--site-t-label, 500 12px/16px var(--site-f-mono)); letter-spacing: .04em; text-transform: uppercase; color: var(--site-muted); } .px-view .px-label + .px-view-cap { margin-top: 4px; } .px-exhibit-sum { margin: 0; font: var(--site-t-caption); color: var(--site-ink); } .px-view .px-seg button, .px-viewbar .px-seg button { position: relative; padding: 0 14px; gap: 0; min-width: var(--sarv-hit); justify-content: center; } .px-view .px-seg button > span:not(.px-glyph), .px-viewbar .px-seg button > span:not(.px-glyph) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .px-seg button[data-tip]::after { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + var(--sarv-tip-gap)); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; z-index: 5; } .px-seg button[data-tip]:focus-visible::after { opacity: 1; } @media (hover: hover) { .px-seg button[data-tip]:hover::after { opacity: 1; } } .px-h { display: flex; align-items: flex-start; gap: var(--sarv-s3); } .px-h > .px-h-tile { margin-top: calc((1lh - var(--sarv-tile-size)) / 2); } .px-tour { margin: 32px 0; } .px-tour-panels { display: grid; gap: var(--sarv-s7); min-width: 0; } .px-tour-panel { display: grid; gap: var(--sarv-s4); align-content: start; min-width: 0; } .px-tour-copy { display: grid; gap: var(--sarv-s2); align-content: start; } .px-tour-copy :is(h3, p) { margin: 0; } .px-tour.is-phone .px-screen-pics { display: flex; flex-wrap: wrap; gap: var(--sarv-s4); } .px-tour.is-phone .px-screen-pics .px-zoom { width: min(280px, 100%); } .px-tour.is-phone .px-tour-panel.is-multi .px-screen-pics .px-zoom { width: min(220px, calc(50% - 8px)); } .px-tour .px-screens-cap { margin-top: var(--sarv-s4) !important; } .px-tour-nav { display: none; } .px-tour-panel { scroll-margin-top: var(--sarv-s5); } @media (min-width: 1024px) { .px-tour { display: grid; grid-template-columns: minmax(150px, 180px) minmax(0, 1fr); gap: var(--sarv-s6); align-items: start; } .px-tour-nav { display: block; position: sticky; top: var(--sarv-s5); } .px-tour .px-screens-cap { grid-column: 1 / -1; } } @media (min-width: 768px) { .px-tour.is-phone .px-tour-panel + .px-tour-panel { padding-top: var(--sarv-s7); border-top: 2px solid var(--site-hairline); } } .px-tour-panels { container-type: inline-size; } @container (min-width: 600px) { .px-tour.is-phone .px-tour-panel:not(.is-multi) { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sarv-s6); align-items: center; } } @container (min-width: 860px) { .px-tour.is-phone .px-tour-panel.is-multi { grid-template-columns: minmax(0, 1fr) 456px; gap: var(--sarv-s6); align-items: center; } } .px-tour.is-phone .px-zoom-hint { display: none; }
.px-section { margin-top: var(--site-section); } .px-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; } .px-section-head > div { display: grid; gap: 8px; max-width: 60ch; } .px-section-head p { margin: 0; color: var(--site-muted); } .px-welcome { display: grid; gap: 40px; align-items: center; padding-block: 24px 0; } .px-welcome-copy { display: grid; gap: 24px; justify-items: start; } .px-welcome h1 em { font-style: normal; color: var(--site-action); } .px-welcome h1 em.is-green { color: var(--site-evidence); } .px-welcome .px-lede { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 46ch; } .px-welcome .px-roots { margin: 0; max-width: 52ch; color: var(--site-muted); font: var(--site-t-caption); } .px-links-row { display: flex; flex-wrap: wrap; gap: var(--sarv-s2); margin: 0; margin-inline-start: calc(-1 * var(--sarv-s2)); padding: 0; list-style: none; } .px-portrait { margin: 0; justify-self: center; } .px-portrait img { display: block; width: calc(var(--n) * 2px); max-width: 100%; height: auto; image-rendering: pixelated; } @media (min-width: 1024px) { .px-welcome { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; padding-block: 48px 0; } .px-portrait img { width: calc(var(--n) * 3px); } } .px-work-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .px-work-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .px-work-grid > .px-stack { display: grid; gap: 32px; } } .px-stack { display: grid; gap: 32px; min-width: 0; } @media (min-width: 1024px) { .px-work-grid:has(.px-stack > :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .px-work-grid:has(.px-stack > :nth-child(3)) > .px-stack { display: contents; } } .px-outcome { font: var(--site-t-meta); color: var(--site-evidence-dark); } .px-qual { font: var(--site-t-caption); color: var(--site-muted); } .px-section-more { margin: 32px 0 0; } .px-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 48px; grid-template-columns: minmax(0, 1fr); counter-reset: way; } @media (min-width: 768px) { .px-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .px-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .px-ways li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--site-hairline); counter-increment: way; } .px-ways li::before { content: counter(way, decimal-leading-zero); font: var(--site-t-label); letter-spacing: .08em; color: var(--site-action-dark); } .px-ways h3 { font: var(--site-t-h3); font-size: 20px; line-height: 28px; } .px-ways p { margin: 0; font: var(--site-t-caption); color: var(--sarv-ink-soft); } .px-ways.has-icons li { grid-template-columns: var(--sarv-tile-size) minmax(0, 1fr); column-gap: var(--sarv-s4); } .px-ways.has-icons li > * , .px-ways.has-icons li::before { grid-column: 2; } .px-ways.has-icons li > .px-h-tile { grid-column: 1; grid-row: 1 / span 2; align-self: start; } .px-ways.has-icons li::before { content: none; } .px-ways .px-decision { grid-column: 1 / -1; counter-increment: none; } .px-ways .px-decision::before { content: none; } @media (min-width: 1024px) { .px-ways .px-decision { grid-column: span 1; } } .px-decision a { display: inline-flex; gap: 8px; align-items: center; font: var(--site-t-control); font-variant-ligatures: none; color: var(--site-action-dark); } .px-logos { margin: 0 0 48px; padding: var(--sarv-s3) 0; list-style: none; border-block: 2px solid var(--site-hairline); text-align: center; text-wrap: balance; } .px-logos li { display: inline-block; vertical-align: middle; margin: var(--sarv-s3) var(--sarv-s2); } @media (min-width: 768px) { .px-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sarv-s5) var(--sarv-s7); padding: var(--sarv-s5) 0; text-align: start; } .px-logos li { margin: 0; } } .px-logos a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sarv-hit); min-width: var(--sarv-hit); } .px-logos img { display: block; filter: var(--sarv-logo-rest); transition: filter var(--sarv-fast); } .px-logos a:is(:hover, :focus-visible) img { filter: none; } @media (prefers-reduced-motion: reduce) { .px-logos img { transition: none; } } .px-quotes { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .px-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .px-quote { margin: 0; display: grid; gap: 16px; align-content: start; padding: 24px; } .px-quote blockquote { font-family: var(--site-f-body); } .px-quote .px-role { font: var(--site-t-caption); color: var(--site-muted); } .px-glimpses { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .px-glimpse { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; color: inherit; background: var(--site-raised); --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 6px; transition: transform .08s ease-out, --lift .08s ease-out; } .px-glimpse-pic { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--site-identity); color: var(--site-fitting-light); overflow: hidden; border-bottom: 2px solid var(--site-rule); } .px-glimpse-pic img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; } .px-glimpse-pic .px-icon { width: 48px; height: 48px; stroke-width: 1.5; } .px-glimpse-body { padding: 16px 24px 24px; display: grid; gap: 8px; align-content: start; } .px-glimpse-body b { font: var(--site-t-control); font-variant-ligatures: none; } .px-glimpse-body span { font: var(--site-t-caption); color: var(--site-muted); } .px-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; padding: 48px 32px; } .px-next p { margin: 0; max-width: 56ch; } @media (min-width: 1024px) { .px-next { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 48px; } .px-next .px-actions { justify-content: end; } } .px-work-head { display: grid; gap: 16px; padding-block: 24px 0; max-width: 880px; } .px-work-head p { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 54ch; } .px-case-list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 48px; } .px-case { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; text-decoration: none; color: inherit; } .px-case-pic { --b: var(--site-rule); --e: var(--site-rule-dark); --lift: 8px; background: var(--sarv-white); transition: transform var(--sarv-quick) var(--sarv-ease), --lift var(--sarv-quick) var(--sarv-ease); } .px-case-pic img { display: block; width: 100%; aspect-ratio: 1024 / 587; object-fit: cover; } .px-case:hover .px-case-pic { --b: var(--site-action); transform: translateY(-2px); --lift: 10px; } .px-case:active .px-case-pic { transform: translateY(2px); --lift: 6px; transition-duration: .08s; } .px-case:focus-visible { outline: none; } .px-case:focus-visible .px-case-pic { outline: 3px solid var(--site-ink); outline-offset: 3px; --ring: 0 0 0 6px var(--site-halo); } .px-case-text { display: grid; gap: 12px; justify-items: start; } .px-case-text h2 { font: var(--site-t-h2); font-size: 32px; line-height: 40px; } .px-case-text p { margin: 0; } .px-case .px-exhibit-go { margin-top: 4px; } .px-case.is-soon { cursor: default; } @media (min-width: 1024px) { .px-case { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } .px-case.is-lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .px-case.is-lead .px-case-text h2 { font: var(--site-t-h2); } .px-case-list > li:nth-child(even) .px-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .px-case-list > li:nth-child(even) .px-case-pic { order: 2; } } .px-ds-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--sarv-white); } .px-ds-strip img { aspect-ratio: 1 / 1; object-fit: cover; } .px-ways .px-decision { padding-top: 24px; border-top: 0; } .px-ways .px-decision h3 { font: var(--site-t-h3); } .px-next-copy { display: grid; gap: 16px; } @media (hover: hover) { .px-logos li { position: relative; } .px-logos a::after { content: attr(data-name); position: absolute; inset-block-end: calc(100% + var(--sarv-tip-gap)); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; } .px-logos a:is(:hover, :focus-visible)::after { opacity: 1; } } .px-read-chip { position: fixed; inset: 0 auto auto 0; z-index: 30; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; background: var(--site-action); color: var(--sarv-on-clay); font: var(--site-t-control); font-variant-ligatures: none; pointer-events: none; opacity: 0; transition: opacity var(--sarv-fast); will-change: transform; box-shadow: 0 -2px 0 var(--site-action-dark), 0 2px 0 var(--site-action-dark), -2px 0 0 var(--site-action-dark), 2px 0 0 var(--site-action-dark), 0 4px 0 var(--site-action-dark); } .px-read-chip.is-on { opacity: 1; } .px-read-chip .px-icon { width: 16px; height: 16px; } .px-way-seen { display: grid; gap: 4px; margin-top: 8px; padding: 12px 16px; min-height: 48px; text-decoration: none; color: var(--site-ink); background: var(--site-raised); border-inline-start: 4px solid var(--site-evidence); } .px-way-seen span:last-child { display: inline-flex; gap: 8px; align-items: center; font: var(--site-t-caption); font-weight: 600; } .px-way-seen:hover { border-color: var(--site-action); } .px-way-seen:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; } .px-page-head { display: grid; gap: 40px; align-items: start; padding-block: 24px 0; } .px-page-head-copy { display: grid; gap: 16px; justify-items: start; max-width: 720px; } .px-page-head .px-lede { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 54ch; } .px-page-head .px-line { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 56ch; } .px-page-head .px-line.is-strong { color: var(--site-ink); font-weight: 600; } .px-page-head .px-chiplist, .px-page-head .px-actions { margin-top: 8px; } .px-partner-line { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 0; font: var(--site-t-caption); color: var(--site-muted); } .px-partner-line a { display: inline-flex; align-items: center; min-height: 48px; } .px-partner-line img { display: block; height: 24px; width: auto; } @media (min-width: 1024px) { .px-page-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; } } .px-prose { display: grid; gap: 16px; max-width: var(--site-measure); } .px-prose p { margin: 0; } .px-two { display: grid; gap: 24px; } @media (min-width: 1024px) { .px-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; } } .px-story { display: grid; gap: 40px; } .px-story-text { display: grid; gap: 16px; max-width: var(--site-measure); } .px-story-text p { margin: 0; font: var(--site-t-lede); } .px-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; margin: 0; padding: 24px 0; border-block: 2px solid var(--site-hairline); } .px-stats div { display: flex; flex-direction: column-reverse; gap: 4px; } .px-stats dd { margin: 0; font-size: 40px; line-height: 48px; color: var(--site-evidence-dark); } @media (min-width: 1024px) { .px-story { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: center; } .px-stats { display: flex; flex-direction: column; gap: 24px 48px; border-block: 0; border-inline-start: 2px solid var(--site-hairline); padding: 0 0 0 32px; } } .px-toolkit { display: grid; gap: 40px; } .px-shelf { display: grid; gap: 16px; } .px-shelf-name { margin: 0; } .px-shelf-row { position: relative; list-style: none; margin: 0; padding: 24px 24px 0; display: flex; flex-wrap: wrap; gap: 16px 16px; align-items: flex-end; background: var(--site-raised); box-shadow: 0 -2px 0 var(--site-rule), -2px 0 0 var(--site-rule), 2px 0 0 var(--site-rule); } .px-shelf-row::after { content: ""; flex: 0 0 calc(100% + 48px); height: 8px; margin: 0 -24px; background: var(--sarv-wood-bg); box-shadow: 0 2px 0 var(--site-rule-dark); } .px-shelf-row > li { width: 112px; } .px-tile { display: grid; justify-items: center; align-content: start; gap: 8px; width: 100%; min-height: 48px; padding: 12px 8px; color: var(--site-ink); background: var(--sarv-white); --b: var(--site-rule); --e: var(--site-rule-dark); --lift: 4px; } .px-tile-logo { width: 48px; height: 48px; display: grid; place-items: center; } .px-tile-logo svg, .px-tile-logo img { width: 40px; height: 40px; object-fit: contain; } .px-tile-name { font: var(--site-t-caption); font-weight: 600; text-align: center; overflow-wrap: anywhere; } .px-toolkit-close { margin: 48px 0 0; font: var(--site-t-h2); max-width: 24ch; } .px-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .px-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .px-certs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .px-cert { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; background: var(--site-raised); --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 6px; transition: transform var(--sarv-quick) var(--sarv-ease), --lift var(--sarv-quick) var(--sarv-ease); } .px-cert .px-zoom { box-shadow: none; border-bottom: 2px solid var(--site-rule); } .px-cert .px-zoom.px-zoom:is(:hover, :active) { transform: none; --b: var(--site-rule); --lift: var(--depth); } .px-cert .px-zoom img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--sarv-white); padding: 8px; box-sizing: border-box; } .px-cert .px-zoom:focus-visible { outline: 3px solid var(--site-ink); outline-offset: -3px; } .px-cert p { margin: 0; overflow-wrap: anywhere; padding: 16px; font: var(--site-t-caption); font-weight: 600; } @media (max-width: 359px) { .px-certs { grid-template-columns: minmax(0, 1fr); } } .px-voices-group { margin: 40px 0 24px; } .px-voices { columns: 1; column-gap: 32px; } @media (min-width: 768px) { .px-voices { columns: 2; } } @media (min-width: 1024px) { .px-voices { columns: 3; } } .px-voices .px-quote { break-inside: avoid; margin-bottom: 32px; } .px-quote-src { justify-self: start; margin-inline-start: calc(-1 * var(--sarv-s2)); } .px-contact { display: grid; gap: 48px; margin-top: 48px; } .px-elsewhere dl { display: flex; flex-wrap: wrap; gap: 16px 48px; } .px-elsewhere dl { margin: 0; } .px-elsewhere dt { font: var(--site-t-caption); color: var(--site-muted); } .px-elsewhere dd { margin: 0; } .px-elsewhere a { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; } .px-elsewhere .px-icon { width: 16px; height: 16px; } .px-episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .px-episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .px-episodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .px-episode { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; background: var(--site-raised); box-shadow: 0 -2px 0 var(--site-rule), 0 2px 0 var(--site-rule), -2px 0 0 var(--site-rule), 2px 0 0 var(--site-rule), 0 4px 0 var(--site-rule-dark); } .px-episode img { width: 96px; height: 96px; display: block; background: var(--sarv-white); } .px-episode > span { display: grid; gap: 4px; } .px-episode b { font-weight: 600; } .px-episode > span > span { font: var(--site-t-caption); color: var(--site-muted); } .px-plain { max-width: 760px; padding-block: 24px 0; } .px-plain h1 { margin: 0 0 16px; } .px-plain h2 { margin: 48px 0 16px; font: var(--site-t-h3); } .px-plain p, .px-plain li { max-width: var(--site-measure); } .px-plain ul { padding-inline-start: 24px; display: grid; gap: 8px; } .px-choices { display: grid; gap: 16px; margin: 16px 0 32px; } .px-choices button { display: grid; gap: 4px; text-align: start; padding: 16px 24px; min-height: 48px; cursor: pointer; font: inherit; color: var(--site-ink); background: var(--sarv-white); border: 0; --b: var(--site-rule); --e: var(--site-rule-dark); --depth: 4px; } .px-choices button:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 3px; --ring: 0 0 0 6px var(--site-halo); } .px-choices button[aria-pressed="true"] { --b: var(--site-action); --e: var(--site-action-dark); background: var(--sarv-field-invalid-bg); } .px-choices strong { font-weight: 600; } .px-choices span { font: var(--site-t-caption); color: var(--site-muted); } .px-404 { padding-block: 64px; display: grid; gap: 16px; justify-items: start; } .px-404 h1, .px-404 p { margin: 0; } .px-proof { display: grid; gap: var(--sarv-s6); align-items: center; padding: var(--sarv-s6); } .px-proof-copy { display: grid; gap: var(--sarv-s3); justify-items: start; } .px-proof-copy > * { margin: 0; } .px-proof-num { font: var(--sarv-t-num-xl); color: var(--site-evidence-dark); } .px-proof-what { font: var(--site-t-h3); } .px-proof-note { font: var(--site-t-caption); color: var(--site-muted); max-width: 40ch; } .px-proof .px-btn-quiet { margin-inline-start: calc(-1 * var(--sarv-s2)); } @media (min-width: 768px) { .px-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sarv-s7) 64px; padding: var(--sarv-s7) 48px; } } @media (min-width: 1024px) { :is(.px-page-head, .px-work-head, .px-plain) { padding-block: 48px 0; } }
.px-booking .px-live, .px-booking .px-down { display: grid; gap: 24px; } .px-booking .px-down { align-self: start; } .px-booking :is(.px-live, .px-down, .px-summary, .px-hint, .px-error)[hidden] { display: none; } .px-pick { border: 0; margin: 0; padding: 0; min-width: 0; } .px-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--sarv-s3); } .px-slotbox { display: grid; gap: var(--sarv-s3); padding: var(--sarv-s4); } .px-zone { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sarv-s1) var(--sarv-s3); font: var(--site-t-body); font-weight: 600; } .px-zone > .px-label { font-weight: 500; } .px-when, .px-you { display: grid; gap: var(--sarv-s5); align-content: start; min-width: 0; } .px-you { grid-template-rows: auto auto 1fr; border-block-start: 2px solid var(--sarv-rule); padding-block-start: var(--sarv-s5); } .px-you .px-grow { display: grid; grid-template-rows: auto 1fr; } .px-you .px-grow textarea { min-height: 8rem; height: 100%; resize: none; } .px-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sarv-s4); border-block-start: 2px solid var(--sarv-rule); padding-block-start: var(--sarv-s5); } .px-foot > .px-summary { flex: 1 1 24rem; } .px-foot > .px-actions { margin-inline-start: auto; } @media (min-width: 900px) { .px-booking .px-live { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; align-items: stretch; } .px-when { padding-inline-end: var(--sarv-s7); } .px-you { border-block-start: 0; padding-block-start: 0; border-inline-start: 2px solid var(--sarv-rule); padding-inline-start: var(--sarv-s7); } .px-foot { grid-column: 1 / -1; } } .px-slots > .px-hint { margin: 0; grid-column: 1 / -1; } .px-field > .px-hint { margin: 0; } .px-summary { margin: 0; font: var(--site-t-body); } .px-summary b { font-weight: 700; } .px-booking .px-down p { margin: 0; font: var(--site-t-body); } .px-booking .px-done { display: grid; gap: 16px; } .px-booking .px-done h2 { margin: 0; outline: 0; } .px-booking > * { min-width: 0; } .px-booking .px-done p { margin: 0; overflow-wrap: anywhere; } .px-booking .px-done > .px-icon { width: 40px; height: 40px; color: var(--sarv-green); } .px-done-when { display: grid; gap: var(--sarv-s1); padding: var(--sarv-s4) var(--sarv-s5); border-inline-start: 4px solid var(--sarv-clay); background: var(--site-raised-solid); } .px-booking .px-done .px-done-date { font: var(--site-t-body); font-weight: 600; } .px-booking .px-done .px-done-time { font: var(--site-t-h2); } .px-booking .px-done .px-done-zone { font: var(--site-t-caption); } .px-done-list { margin: 0; display: grid; gap: var(--sarv-s3); } .px-done-list > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sarv-s1) var(--sarv-s4); } .px-done-list dt.px-label { margin: 0; min-width: 12ch; } .px-done-list dd { margin: 0; overflow-wrap: anywhere; } .px-mail { padding: 0 var(--sarv-s1); border-block-end: 2px solid var(--sarv-clay); background: var(--site-raised-solid); color: inherit; font-weight: 700; } .px-done-next { display: grid; gap: var(--sarv-s3); border-block-start: 2px solid var(--sarv-rule); padding-block-start: var(--sarv-s5); } .px-booking .px-done .px-done-next h3 { margin: 0; font: var(--site-t-h3); } @media (max-width: 480px) { .px-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .px-booking .px-foot > .px-actions { flex: 1 1 100%; margin-inline-start: 0; } .px-booking .px-actions .px-btn { width: 100%; } } .px-cal { display: grid; gap: var(--sarv-s4); } .px-cal > .px-hint { margin: 0; } .px-cal[aria-busy="true"] { min-height: calc(var(--sarv-hit) + var(--sarv-s4) + 16px + var(--px-weeks, 5) * (var(--sarv-hit) + var(--sarv-s2))); align-content: start; } .px-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sarv-s3); } .px-cal-title { margin: 0; font: var(--sarv-t-heading); } .px-cal-nav[data-dir="prev"] .px-icon { transform: scaleX(-1); } .px-cal-nav:disabled { opacity: .35; cursor: default; } :dir(rtl) .px-cal-nav .px-icon { transform: scaleX(-1); } :dir(rtl) .px-cal-nav[data-dir="prev"] .px-icon { transform: none; } .px-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sarv-s2); } .px-cal-wd { text-align: center; } .px-cal-day { min-width: 0; padding-inline: 0; } .px-cal-day.is-off { position: relative; display: grid; place-items: center; min-height: var(--sarv-hit); color: var(--sarv-muted); opacity: .6; font: var(--sarv-t-chip); font-variant-ligatures: none; cursor: default; outline: 0; } .px-cal-day.is-off::after { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + var(--sarv-tip-gap)); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; z-index: 5; } .px-cal-day.is-off.is-end::after { inset-inline-start: auto; inset-inline-end: 0; translate: 0 0; } .px-cal-day.is-off.is-start::after { inset-inline-start: 0; translate: 0 0; } .px-cal-day.is-off:focus::after { opacity: 1; } @media (hover: hover) { .px-cal-day.is-off:hover::after { opacity: 1; } }
.folio .ias-chatbot-widget { position: fixed; inset: auto 0 0 auto; z-index: 40; pointer-events: none; font: var(--site-t-caption); } .folio .ias-chatbot-widget > * { pointer-events: auto; } .folio .ias-chatbot-pill { position: fixed; inset: auto 24px 24px auto; font: var(--site-t-control); font-variant-ligatures: none; } .folio .ias-chatbot-pill .placeholder { white-space: nowrap; } .folio .ias-chatbot-pill { transition: opacity var(--sarv-fast, .12s) ease-out; } .folio.ias-over-field .ias-chatbot-pill { opacity: 0; pointer-events: none; } @media (max-width: 639.98px) { .folio.ias-scrolling .ias-chatbot-pill, .folio:has(:is(input, textarea, select):focus) .ias-chatbot-pill { opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .folio .ias-chatbot-pill { transition: none; } } @media (max-width: 639.98px) { .folio .ias-chatbot-pill { inset: auto 16px 16px auto; } } .folio.ias-compact .ias-chatbot-pill { width: var(--sarv-hit); padding: 0; justify-content: center; } .folio.ias-compact .ias-chatbot-pill .placeholder { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .folio .ias-chatbot-widget.expanded .ias-chatbot-pill { display: none; } .folio .ias-chatbot-overlay { position: fixed; inset: 0; z-index: 39; background: var(--sarv-scrim); opacity: 0; pointer-events: none; transition: opacity var(--sarv-quick); } .folio .ias-chatbot-overlay.active { opacity: 1; pointer-events: auto; } .folio .ias-chatbot-window { display: none; position: fixed; grid-template-rows: auto minmax(0, 1fr) auto; } @media (min-width: 640px) { .folio .ias-chatbot-window { inset: auto 24px 32px auto; width: min(440px, calc(100vw - 48px)); height: min(680px, calc(100dvh - 72px)); } } .folio .ias-chatbot-widget.expanded .ias-chatbot-window { display: grid; } .folio .ias-chatbot-header-title { display: inline-flex; align-items: center; gap: 12px; } .folio .ias-chatbot-header-title .px-icon { color: var(--sarv-brass-light); } .folio .ias-chatbot-content { overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; } .folio .ias-chatbot-empty-view { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .folio .ias-chatbot-suggestions { width: 100%; } .folio .ias-chatbot-empty-portrait-wrap { width: 128px; height: 145px; justify-self: start; } .folio .ias-chatbot-empty-portrait { display: block; width: 128px; height: 145px; image-rendering: pixelated; } .folio .ias-chatbot-empty-title { margin: 0; font: var(--site-t-h2); font-size: 24px; line-height: 32px; } .folio .ias-chatbot-empty-desc { margin: 8px 0 0; font: var(--site-t-caption); color: var(--site-muted); } .folio .ias-chatbot-suggestion-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; } .folio .ias-chatbot-chip, .folio .ias-chatbot-followup-chip { width: 100%; } .folio .ias-chatbot-followup-container { display: grid; gap: 12px; } .folio .ias-chatbot-message { --lift: 4px; max-width: 92%; padding: 12px 16px; font: var(--sarv-t-speech); overflow-wrap: anywhere; } .folio .ias-chatbot-message.user { --b: var(--sarv-edge-primary); --e: var(--sarv-edge-primary-dark); align-self: flex-end; background: var(--site-action-bg); color: var(--sarv-on-clay); } .folio .ias-chatbot-message.bot { --b: var(--site-rule); --e: var(--site-rule-dark); align-self: flex-start; background: var(--sarv-say-bubble-bg); } .folio .ias-chatbot-message a { color: var(--site-evidence-dark); text-underline-offset: 4px; } .folio .ias-chatbot-link-chip { display: inline-flex; gap: 8px; align-items: center; margin: 4px 8px 4px 0; padding: 4px 12px; background: var(--site-raised-solid); color: var(--site-ink) !important; text-decoration: none; box-shadow: 0 -2px 0 var(--site-rule), 0 2px 0 var(--site-rule), -2px 0 0 var(--site-rule), 2px 0 0 var(--site-rule); } .folio .ias-chatbot-thinking { display: inline-flex; align-items: center; gap: 12px; color: var(--site-muted); } .folio .ias-thinking-icon { display: none; } .folio .ias-thinking-dots { display: inline-flex; gap: 4px; } .folio .ias-thinking-dots span { width: 8px; height: 8px; background: var(--site-evidence); animation: px-blink 1.2s steps(2) infinite; } .folio .ias-thinking-dots span:nth-child(2) { animation-delay: .2s; } .folio .ias-thinking-dots span:nth-child(3) { animation-delay: .4s; } .folio .ias-chatbot-footer { display: flex; gap: 12px; align-items: center; padding: 16px; border-top: 2px solid var(--sarv-brass); background: var(--sarv-wood-bg); } .folio .ias-chatbot-input { flex: 1; min-width: 0; width: auto; } .folio .ias-chatbot-send-btn { --b: var(--sarv-edge-primary); --e: var(--sarv-edge-primary-dark); --depth: 4px; display: grid; place-items: center; width: var(--sarv-hit); height: var(--sarv-hit); padding: 0; border: 0; cursor: pointer; background: var(--site-action-bg); color: var(--sarv-on-clay); } .folio .ias-chatbot-send-btn svg { width: 16px; height: 16px; } .folio .ias-chatbot-close-btn .px-icon, .folio .ias-chatbot-pill .px-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } .folio .ias-chatbot-answer-reveal { animation: none; } @media (prefers-reduced-motion: reduce) { .folio .ias-thinking-dots span { animation: none; } }