.p-story-root{--p-line-3:calc((100% + var(--frame-gap)) / 6);--p-span-8:calc((2 * 100% - var(--frame-gap)) / 3);background:var(--paper);color:var(--ink)}.p-story-root *{box-sizing:border-box}.p-story-root main :is(h1,h2,h3,h4,.p-hero-description,.p-hero-decision){font-variant-numeric:lining-nums}.p-hero-band{background:var(--project-color);color:var(--project-ink);padding-block:clamp(32px,4vw,56px) 8px}.p-hero-band :focus-visible{outline-color:var(--project-ink)}.p-hero-band .case-facts{border-color:color-mix(in srgb,var(--project-ink) 32%,transparent)}.p-hero-band .case-facts a,.p-hero-band .case-facts dd,.p-hero-band .case-facts dt{color:var(--project-ink);text-decoration-color:currentColor}.p-hero-band h1{margin:0 0 16px;font:400 var(--type-title)/1.05 var(--font-heading),serif;letter-spacing:-.02em}.p-hero-description{font:400 var(--type-deck)/1.25 var(--font-heading),serif}.p-hero-decision{max-width:62ch;margin:24px 0 8px;font:400 var(--type-voice)/1.5 var(--font-script),serif}.p-hero-meta-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:last baseline;gap:8px 32px;padding-bottom:24px}.p-hero-credit{max-width:var(--measure);margin:0;font-size:var(--type-body);line-height:1.6}.p-story-start{display:inline-flex;align-items:baseline;align-items:last baseline;flex-wrap:wrap;gap:6px;min-height:44px;padding-block:11px;color:inherit;font-size:var(--type-ui);line-height:22px}.p-story-start .arrow{align-self:center}.p-hero-stage{padding-block:48px}.p-story-chapter{padding-block:clamp(64px,8vw,128px)}@property --p-heading-cap{syntax:"<length>";inherits:true;initial-value:0}.p-chapter-heading{--p-heading-cap:1cap;row-gap:16px;margin-bottom:48px;font:400 var(--type-chapter)/1.08 var(--font-heading),serif}.p-chapter-heading>*{grid-column:1/-1;margin:0}.p-chapter-heading h2{font:400 var(--type-chapter)/1.08 var(--font-heading),serif;letter-spacing:-.02em;text-wrap:balance}.p-chapter-heading h2.p-heading-quoted{margin-left:-.33em;padding-left:.33em;text-indent:-.33em}@supports (hanging-punctuation:first){.p-chapter-heading h2.p-heading-quoted{text-indent:0;hanging-punctuation:first}}.p-chapter-number{color:var(--accent);font:400 var(--type-data)/1.4 var(--font-data),monospace;font-variant-numeric:tabular-nums}.p-chapter-copy{margin-bottom:48px}.p-chapter-copy p{font-size:var(--type-body);line-height:1.8;max-width:var(--measure)}.p-chapter-copy p+p{margin-top:24px}.p-chapter-copy h3{font:400 var(--type-subhead)/1.3 var(--font-heading),serif;margin:32px 0 16px}.p-caption-link,.p-chapter-copy a,.p-return-explorer,.p-sample-links>a:not(.p-sample-link){color:var(--accent)}.p-caption-link{position:relative;white-space:nowrap}.p-caption-link:before{content:"";position:absolute;top:50%;right:0;left:0;height:44px;translate:0 -50%}.p-caption-link .arrow{margin-left:6px}.p-tinted-section{background:var(--surface);border-block:1px solid var(--line)}.p-story-figure{margin:48px 0}.p-story-figure--fit{width:-moz-fit-content;width:fit-content;max-width:100%}.p-story-figure--fit>figcaption{width:0;min-width:100%}.p-mat{background:var(--mat);padding:clamp(8px,1.6vw,24px)}.p-surface-frame{background:var(--surface);border:1px solid var(--line)}.p-figure-mount{width:-moz-fit-content;width:fit-content;max-width:100%}.p-figure-mount img{display:block;max-width:100%;height:auto}.p-story-root figure figcaption{font-size:var(--type-caption);line-height:1.6;color:var(--muted);padding-top:16px}.p-story-root figure figcaption p{margin:0}.p-figure-scroller{max-height:690px;overflow:auto}.p-figure-scroller img{display:block;width:100%;height:auto}.p-story-pair{display:grid;gap:40px;margin:48px 0}.p-story-pair .p-story-figure{margin:0}.p-story-pair h3{font:400 var(--type-subhead)/1.3 var(--font-heading),serif;margin-bottom:16px}.p-story-pair .p-option-reason{max-width:var(--measure);margin-top:16px;font-size:var(--type-body);line-height:1.75}.p-button-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.p-button-group button{--px-ring:var(--line-strong);display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;color:var(--muted);font:400 var(--step--1)/1.2 var(--font-body),sans-serif;transition:color .16s var(--ease-out)}@media (hover:hover) and (pointer:fine){.p-button-group button:hover{color:var(--ink)}}.p-button-group button[aria-pressed=true]{--px-fill:var(--project-color);--px-ring:transparent;color:var(--project-ink)}.p-control-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}.p-control-row .p-button-group{margin-bottom:0}.p-artifact-switcher,.p-sketch-explorer{margin:48px 0}.p-artifact-window{height:560px;overflow:auto;background:var(--mat);padding:clamp(8px,1.6vw,24px)}.p-artifact-window img{display:block;max-width:100%;height:auto;margin:0 auto}.p-paired-artifacts{display:grid;gap:32px}.p-paired-artifacts h4{font:400 var(--type-subhead)/1.3 var(--font-heading),serif;margin-bottom:16px}.p-comparison-explanation{max-width:80ch;margin-top:24px;color:var(--muted);font-size:var(--type-caption);line-height:1.6}.p-recorded-exploration{margin:48px 0}.p-story-root video{display:block;border-radius:0;background:var(--surface);box-shadow:0 0 0 1px var(--line)}.p-recording-readable video{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.p-recording-framing{margin-top:16px}.p-recording-framing .p-button-group{margin-bottom:0}.p-recording-caption{max-width:80ch;margin-top:16px;color:var(--muted);font-size:var(--type-caption);line-height:1.6}.p-video-figure{margin:48px 0}.p-video-figure figcaption{max-width:80ch}.p-output-gallery{display:grid;gap:32px;margin:0}.p-output-selected{min-width:0;margin:0}.p-output-mat{background:var(--mat);padding:clamp(8px,1.4vw,16px)}.p-output-image{max-height:760px;overflow:auto;touch-action:pan-y;background:var(--mat)}.p-output-image:focus-visible{outline-color:var(--mat-ink)}.p-story-root .p-output-selected>figcaption{padding-top:48px}.p-output-image img{width:100%;height:auto;display:block}.p-output-interface img{max-width:570px;margin:auto}.scrub-wrap.p-output-scrub{--rail-accent:var(--accent)}.p-requirements-excerpt{min-height:350px;padding:clamp(16px,3vw,40px);background:var(--surface);border:1px solid var(--line)}.p-requirements-excerpt h2{font:400 var(--type-subhead)/1.3 var(--font-heading),serif;margin-bottom:16px}.p-requirements-excerpt li,.p-requirements-excerpt p{font-size:var(--type-body);line-height:1.65}.p-requirements-excerpt ul{list-style:disc;padding-left:24px;margin-block:24px}.p-requirements-excerpt li+li{margin-top:16px}.p-requirements-excerpt li::marker{color:var(--accent)}.p-variation-count{margin:0;color:var(--muted);font:400 var(--type-data)/1.4 var(--font-data),monospace;font-variant-numeric:tabular-nums}.p-gallery-arrows{display:flex;gap:8px}.p-gallery-arrows button{--px-ring:var(--line-strong);display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--muted);transition:color .16s var(--ease-out)}.p-gallery-arrows .arrow{width:20px;height:20px}@media (hover:hover) and (pointer:fine){.p-gallery-arrows button:not(:disabled):hover{color:var(--ink)}}.p-gallery-arrows button:disabled{--px-ring:var(--line);color:var(--line-strong);cursor:not-allowed}.p-output-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:24px}.p-output-thumbnails button{--px-fill:var(--mat);padding:0}@media (hover:hover) and (pointer:fine){.p-output-thumbnails button:hover{--px-ring:var(--line-strong)}}.p-output-thumbnails button[aria-selected=true]{--px-ring:var(--accent)}.p-output-thumbnails img{display:block;width:100%;height:auto;-webkit-mask:var(--px-mask);mask:var(--px-mask)}.p-output-thumbnails span{position:absolute;left:0;bottom:0;min-width:24px;padding:4px 8px;background:var(--surface-2);color:var(--ink);font:400 var(--type-data)/1 var(--font-data),monospace;font-variant-numeric:tabular-nums;-webkit-mask:var(--px-mask);mask:var(--px-mask)}.p-output-thumbnails button[aria-selected=true] span{background:var(--project-color);color:var(--project-ink)}.p-output-status{margin-top:16px;color:var(--muted);font-size:var(--type-caption);line-height:1.6}.p-output-status:empty{margin-top:0}.p-output-status button{min-height:44px;padding:0 8px;color:var(--accent)}.p-return-explorer{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:8px;font-size:var(--type-ui)}.p-sample{padding:clamp(24px,3vw,32px);background:var(--project-soft);border:1px solid var(--line)}.p-sample h3{font:400 var(--type-subhead)/1.3 var(--font-heading),serif;margin-bottom:16px}.p-sample-caption{max-width:var(--measure);font-size:var(--type-body);line-height:1.7}.p-sample-links{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:center;margin-top:24px}.p-sample-links>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--type-ui)}.p-sample-link{--px-fill:var(--project-color);padding:0 16px;color:var(--project-ink)}@media (min-width:800px){.p-chapter-heading{align-items:first baseline}.p-chapter-number{grid-column:1/span 2;translate:0 calc(1cap - var(--p-heading-cap))}.p-chapter-heading h2{grid-column:3/span 8}.p-chapter-copy,.p-return-explorer,.p-sample,.p-story-chapter>.p-story-figure--fit{margin-left:var(--p-line-3)}.p-story-chapter>.p-story-figure--fit{max-width:calc(100% - var(--p-line-3))}.p-hero-description,.p-sample{max-width:var(--p-span-8)}.p-paired-artifacts,.p-story-pair{grid-template-columns:1fr 1fr;-moz-column-gap:var(--frame-gap);column-gap:var(--frame-gap)}}@media (min-width:1024px){.p-output-gallery{grid-template-columns:minmax(0,1fr) 320px;gap:64px}.p-output-choices{align-self:start;position:sticky;top:88px}}@media (min-width:601px) and (max-width:1023px){.p-output-thumbnails{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (max-width:808px){.p-hero-stage,.p-story-root .p-output-selected>figcaption{padding-top:32px}}@media (max-width:600px){.p-artifact-window{height:440px}.p-output-thumbnails button{min-height:52px}}@media (prefers-reduced-motion:reduce){.p-story-root *{scroll-behavior:auto!important;transition:none!important}}