@font-face{ font-family: Archivo; src: url('/assets/fonts/archivo-black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face{ font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans.ttf') format('truetype'); font-weight: 400; font-display: swap; }
.pet-chapter{ color-scheme: light; --field: #bec9d7; --ink: #1b222b; --muted: #445161; --line: #8d9baa; font-family: 'DM Sans', Arial, sans-serif; color: var(--ink); background: var(--field); }
.pet-chapter *{ box-sizing: border-box; }
.pet-chapter{ scroll-behavior: smooth; }
.pet-chapter,.pet-chapter #p-pet-title,.pet-chapter h2,.pet-chapter h3,.pet-chapter p,.pet-chapter figure{ margin: 0; }
.pet-chapter:has(dialog[open]){ overflow: hidden; }
.pet-chapter a{ color: inherit; text-decoration: none; }
.pet-chapter a:hover{ text-decoration: underline; text-underline-offset: 5px; }
.pet-chapter button{ font: inherit; cursor: pointer; color: inherit; }
.pet-chapter button:disabled{ cursor: default; }
.pet-chapter :focus-visible{ outline: 3px solid currentColor; outline-offset: 5px; }
.pet-chapter [hidden]{ display: none !important; }
.pet-chapter img{ display: block; width: 100%; height: auto; }
.pet-chapter .wrap{ width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.pet-chapter .skip-link{ position: fixed; top: 12px; left: 12px; z-index: 5; padding: 14px 20px; background: var(--ink); color: white; transform: translateY(-180%); }
.pet-chapter .skip-link:focus{ transform: none; }
.pet-chapter .experience-header{ display: flex; justify-content: space-between; align-items: center; min-height: 84px; border-bottom: 1px solid var(--line); gap: 24px; }
.pet-chapter .wordmark{ position: relative; display: block; width: max-content; flex-shrink: 0; padding: .07em .5em .1em; font: 900 1.85rem/1 Archivo, sans-serif; letter-spacing: -.08em; white-space: nowrap; }
.pet-chapter .wordmark .mark-word{ display: block; }
.pet-chapter .wordmark .brand-dot{ margin-right: .06em; }
.pet-chapter .wordmark .mark-brackets{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pet-chapter .wordmark:hover{ text-decoration: none; }
.pet-chapter .back-link{ display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; }
.pet-chapter .eyebrow{ font-size: .625rem; letter-spacing: .08em; line-height: 1.5; }
.pet-chapter .device-hero{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 3%; align-items: center; min-height: 560px; padding-block: 36px 24px; }
.pet-chapter #p-pet-title{ font: 900 clamp(4.5rem, 8.5vw, 8rem)/1 Archivo, sans-serif; letter-spacing: -.09em; margin: 18px 0 20px -.04em; }
.pet-chapter .lead{ font-size: clamp(1.25rem, 2.2vw, 1.8rem); letter-spacing: -.04em; line-height: 1.2; }
.pet-chapter .intro-copy > p:last-child{ max-width: 355px; margin-top: 18px; font-size: .9375rem; line-height: 1.7; }
.pet-chapter h2{ font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.14; letter-spacing: -.04em; font-weight: 400; }
.pet-chapter .device-gallery{ position: relative; left: clamp(-24px, -2vw, -8px); height: 480px; min-width: 0; }
.pet-chapter .device-print{ position: absolute; width: 76%; max-width: 490px; }
.pet-chapter .print-early{ top: 20px; left: 1%; transform: rotate(-9deg); }
.pet-chapter .print-current{ bottom: 18px; right: 1%; transform: rotate(7deg); }
.pet-chapter .paper{ background: #f8f7f3; border: 1px solid #c9c8c180; padding: 10px 10px 0; box-shadow: 0 13px 24px -17px #19232780; animation: pet-chapter-print-drift 8s ease-in-out infinite; }
.pet-chapter .print-current .paper{ animation-delay: -3.4s; }
.pet-chapter .paper::before{ content: ''; position: absolute; top: -13px; left: 38%; width: 25%; height: 28px; z-index: 1; background: #ece3c699; border-inline: 1px dashed #a9a28b55; transform: rotate(-4deg); pointer-events: none; }
.pet-chapter .print-current .paper::before{ left: 9%; transform: rotate(6deg); }
.pet-chapter .image-button{ display: block; padding: 0; width: 100%; border: 0; background: #eae7de; }
.pet-chapter .paper figcaption{ display: grid; gap: 8px; padding: 12px 4px 16px; color: #27313f; }
.pet-chapter .drawing-caption{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .75rem; letter-spacing: .025em; }
.pet-chapter .paper figcaption p{ font-size: .875rem; line-height: 1.5; letter-spacing: 0; }
@keyframes pet-chapter-print-drift{ 0%, 100% { translate: -7px 3px; rotate: -.9deg; } 50% { translate: 7px -13px; rotate: .9deg; } }
.pet-chapter .motion-paused .paper,.pet-chapter .motion-hidden .paper,.pet-chapter:has(dialog[open]) .paper{ animation-play-state: paused; }
.pet-chapter .interaction{ padding: 26px 30px; background: #192327; color: #f1f0e9; }
.pet-chapter .hello-steps{ list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 22px 0 0; padding: 0; }
.pet-chapter .hello-steps li{ position: relative; border-top: 1px solid #536267; padding: 16px 0 0 26px; }
.pet-chapter .hello-steps li > span{ position: absolute; left: 0; top: 21px; font-size: .625rem; color: #bed5bd; }
.pet-chapter .hello-steps h3{ font-size: 1.125rem; font-weight: 400; margin: 0 0 8px; letter-spacing: -.02em; }
.pet-chapter .hello-steps p{ font-size: .8125rem; line-height: 1.6; color: #c1cacd; }
.pet-chapter .os-section{ padding-block: 38px 32px; }
.pet-chapter .section-heading{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.pet-chapter #p-motion-toggle{ background: transparent; border: 0; border-bottom: 1px solid var(--muted); min-height: 44px; padding: 8px 0; font-size: .75rem; }
.pet-chapter .viewer-stage{ display: block; position: relative; container-type: inline-size; background: #101010; }
.pet-chapter .build{ display: grid; grid-template-columns: 1fr 2fr; gap: 5%; border-top: 1px solid var(--line); padding-block: 30px 38px; }
.pet-chapter .build p{ font-size: .9375rem; line-height: 1.75; }
.pet-chapter .build .parts{ margin-top: 16px; font-size: .8125rem; }
.pet-chapter .parts a{ text-decoration: underline; text-underline-offset: 3px; }
.pet-chapter .experience-footer{ display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-block: 12px 22px; }
.pet-chapter .experience-footer p{ font-size: .625rem; letter-spacing: .04em; }
.pet-chapter #p-image-viewer{ width: min(1200px, calc(100vw - 32px), calc((100dvh - 210px) * var(--image-ratio, 1.7))); max-width: none; max-height: calc(100dvh - 32px); border: 0; padding: 18px; background: #f8f7f3; color: var(--ink); }
.pet-chapter #p-image-viewer::backdrop{ background: #0b1118d9; }
.pet-chapter .viewer-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 12px; }
.pet-chapter .viewer-toolbar h2{ font-size: 1.1rem; }
.pet-chapter .viewer-bottom{ display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-top: 16px; }
.pet-chapter #p-viewer-description{ font-size: .8125rem; line-height: 1.6; max-width: 650px; }
.pet-chapter .viewer-nav{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pet-chapter .viewer-nav button{ border: 1px solid #a4adb4; width: 44px; height: 44px; background: transparent; }
.pet-chapter #p-viewer-count{ font-size: .6875rem; white-space: nowrap; }
@media (max-width: 900px){.pet-chapter .device-hero{ grid-template-columns: .8fr 1.2fr; min-height: 480px; }
.pet-chapter .device-gallery{ height: 380px; }
.pet-chapter .device-print{ width: 84%; }
.pet-chapter .print-early{ top: 24px; }
.pet-chapter .print-current{ bottom: 36px; }
.pet-chapter .paper{ padding: 7px 7px 0; }

}
@media (max-width: 600px){.pet-chapter .wrap{ width: calc(100% - 36px); }
.pet-chapter .experience-header{ min-height: 72px; }
.pet-chapter .wordmark{ font-size: 1.6rem; }
.pet-chapter .device-hero{ grid-template-columns: 1fr; gap: 16px; padding-block: 26px 20px; }
.pet-chapter #p-pet-title{ font-size: 5rem; margin-block: 12px 16px; }
.pet-chapter .intro-copy > p:last-child{ font-size: .875rem; margin-top: 12px; max-width: 470px; }
.pet-chapter .device-gallery{ left: -4px; height: clamp(300px, 89vw, 440px); margin-top: 4px; }
.pet-chapter .device-print{ width: 77%; }
.pet-chapter .print-early{ top: 16px; left: 2%; }
.pet-chapter .print-current{ bottom: 15px; right: 2%; }
.pet-chapter .paper figcaption{ min-height: 30px; font-size: .5625rem; }
.pet-chapter .paper::before{ height: 22px; top: -10px; }
.pet-chapter .interaction{ padding: 22px; }
.pet-chapter .hello-steps{ grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.pet-chapter .os-section{ padding-block: 28px; }
.pet-chapter .build{ grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
.pet-chapter .build p{ font-size: .875rem; }
.pet-chapter .experience-footer{ flex-wrap: wrap; gap: 4px; }
.pet-chapter #p-image-viewer{ padding: 12px; width: calc(100vw - 24px); }
.pet-chapter .viewer-bottom{ flex-direction: column; gap: 12px; }
.pet-chapter .viewer-nav{ align-self: end; }

}
@media (orientation: landscape) and (max-height: 600px){.pet-chapter #p-image-viewer{ width: min(760px, calc(100vw - 32px)); }
.pet-chapter .viewer-stage{ width: min(100%, calc((100dvh - 155px) * var(--image-ratio, 1.7))); margin-inline: auto; }
.pet-chapter .viewer-bottom{ padding-top: 10px; }
.pet-chapter #p-viewer-description{ font-size: .6875rem; }
 }
@media (prefers-reduced-motion: reduce){.pet-chapter{ scroll-behavior: auto; }
.pet-chapter .paper{ animation: none; }
 }
.pet-chapter .image-save-dialog{ width: min(390px, calc(100% - 36px)); padding: 24px; background: var(--paper); border-radius: 4px; box-shadow: 0 20px 80px #0005; }
.pet-chapter .image-save-top{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pet-chapter .image-save-top h2{ font-size: 1.65rem; font-weight: 400; letter-spacing: -.05em; }
.pet-chapter .image-save-dialog p{ font-size: .875rem; line-height: 1.5; margin-top: 12px; }
.pet-chapter .image-save-actions{ display: flex; gap: 12px; margin-top: 22px; }
.pet-chapter .image-save-actions button{ background: var(--ink); color: var(--paper); padding: 12px 16px; min-height: 44px; font-size: .875rem; }
.pet-chapter .image-save-actions button:disabled{ opacity: .5; }
.pet-chapter #p-image-save-status:empty{ display: none; }
.pet-chapter{ --paper: #f8f7f3; }
.pet-chapter .device-print{ transition: filter .2s ease; }
.pet-chapter .device-print.is-front{ z-index: 2; filter: drop-shadow(0 8px 8px #19232720); }
.pet-chapter .device-print.is-back{ z-index: 1; }
.pet-chapter .device-gallery:hover .paper{ animation-play-state: paused; }
.pet-chapter #p-os-preview{ display: block; width: 100%; height: 820px; border: 0; }
.pet-chapter .os-note{ margin-top: 9px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.pet-chapter .viewer-nav{ flex-wrap: wrap; justify-content: end; }
.pet-chapter .viewer-nav .save-options{ width: auto; padding-inline: 12px; font-size: .75rem; }
.pet-chapter .image-save-dialog{ border: 0; color: var(--ink); }
.pet-chapter .image-save-dialog::backdrop{ background: #0b1118d9; }
.pet-chapter .image-save-top button,.pet-chapter .image-save-actions button{ border: 0; }
@media (max-width: 600px){.pet-chapter #p-os-preview{ height: 520px; }
 }
@media (prefers-reduced-motion: reduce){.pet-chapter .device-print{ transition: none; }
 }
.pet-chapter .dismiss-button{ flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; }
.pet-chapter .dismiss-button:hover{ background: #0000000d; }
.pet-chapter .dismiss-button:focus-visible{ outline: 3px solid currentColor; outline-offset: 6px; }
.pet-chapter .case-study{ max-width: 1200px; margin-inline: auto; }
.pet-chapter .project-story.case-study{ display: block; max-width: 1280px; margin-top: 40px; padding: 0; border: 0; }
.pet-chapter .case-study .case-section{ padding-block: clamp(36px, 5vw, 72px); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.pet-chapter .case-study .case-section:has(> .case-detail:last-child){ padding-bottom: 22px; }
.pet-chapter .case-study .case-label{ display: block; margin: 0 0 26px; font-size: .6875rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pet-chapter .case-study .case-split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: clamp(28px, 6vw, 80px); }
.pet-chapter .case-study .case-section h2{ margin: 0; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 400; line-height: 1.13; letter-spacing: -.055em; text-wrap: balance; }
.pet-chapter .case-study .case-section .case-statement{ font-family: Archivo, sans-serif; font-weight: 900; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.065em; }
.pet-chapter .case-study .case-copy{ max-width: 60ch; font-size: 1rem; line-height: 1.7; }
.pet-chapter .case-study .case-copy > p + p,.pet-chapter .case-study .case-copy > h2 + p{ margin-top: 18px; }
.pet-chapter .case-study .case-copy h3{ margin: 0 0 9px; font-size: 1.25rem; line-height: 1.25; font-weight: 400; letter-spacing: -.03em; }
.pet-chapter .case-study .case-notes{ margin: 28px 0 0; }
.pet-chapter .case-study .case-notes > div{ padding-block: 17px; border-top: 1px solid var(--line); }
.pet-chapter .case-study .case-notes > div:last-child{ padding-bottom: 0; }
.pet-chapter .case-study dt{ font-weight: 400; font-size: 1.125rem; letter-spacing: -.025em; line-height: 1.35; }
.pet-chapter .case-study dd{ margin: 8px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.pet-chapter .case-study .case-detail{ margin-top: 24px; border: 0; font-size: .875rem; line-height: 1.7; }
.pet-chapter .case-study .case-detail summary{ padding: 15px 0; min-height: 48px; cursor: pointer; color: var(--ink); }
.pet-chapter .case-study .case-detail summary:hover{ text-decoration: underline; text-underline-offset: 5px; }
.pet-chapter .case-study .case-detail-content{ display: grid; gap: 16px; max-width: 76ch; padding: 0 0 24px; color: var(--muted); }
.pet-chapter .case-study .case-detail-content p{ margin: 0; }
.pet-chapter .case-study .case-detail a{ text-decoration: underline; text-underline-offset: 4px; }
.pet-chapter .case-study .case-sequence{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 36px 0 0; }
.pet-chapter .case-study .case-sequence > div{ border-top: 1px solid var(--line); padding-top: 18px; }
.pet-chapter .case-study .case-sequence dt{ font-size: .6875rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .07em; }
.pet-chapter .case-study .case-sequence dd{ margin-top: 14px; max-width: 36ch; }
.pet-chapter .case-study .case-status{ margin-top: 16px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.pet-chapter .case-study .case-return{ display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-size: .8125rem; border-bottom: 1px solid var(--line); }
.pet-chapter .case-study .study-polaroid{ position: relative; min-width: 0; margin: 0; padding: 10px 10px 0; color: #27313f; background: var(--paper); box-shadow: 0 14px 28px -16px #19232780; transform: rotate(-2deg); }
.pet-chapter .case-study .study-polaroid::before{ content: ''; position: absolute; z-index: 1; top: -11px; left: 34%; width: 27%; height: 23px; background: #ece3c699; border-inline: 1px dashed #a9a28b55; transform: rotate(-5deg); pointer-events: none; }
.pet-chapter .case-study .study-photo-open{ display: block; width: 100%; padding: 0; border: 0; background: transparent; }
.pet-chapter .case-study .case-palette{ display: flex; height: 12px; margin-top: 10px; }
.pet-chapter .case-study .case-palette span{ min-width: 0; }
.pet-chapter .case-study .study-print-label{ display: block; color: var(--muted); font-size: .625rem; }
.pet-chapter .case-study .case-caption{ max-width: 78ch; margin-top: 22px; color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.pet-chapter .case-study .case-emphasis{ padding-left: 20px; border-left: 2px solid var(--muted); font-size: 1.25rem; line-height: 1.5; letter-spacing: -.025em; }
.pet-chapter .case-study .case-future{ padding-bottom: 28px; }
@media (max-width: 700px){.pet-chapter .project-story.case-study{ margin-top: 28px; }
.pet-chapter .case-study .case-split{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pet-chapter .case-study .case-label{ margin-bottom: 20px; }
.pet-chapter .case-study .case-copy{ font-size: .9375rem; }
.pet-chapter .case-study .case-sequence{ grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; }
.pet-chapter .case-study .case-sequence dd{ max-width: none; margin-top: 8px; }
.pet-chapter .case-study .case-emphasis{ font-size: 1.125rem; padding-left: 16px; }

}
.pet-chapter .case-study .case-detail summary{ display: flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 0; list-style: none; font-size: .8125rem; }
.pet-chapter .case-study .case-detail summary::-webkit-details-marker{ display: none; }
.pet-chapter .case-study .case-detail summary::before{ content: '+'; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid var(--muted); border-radius: 50%; font-size: 1rem; line-height: 1; }
.pet-chapter .case-study .case-detail[open] > summary::before{ content: '−'; }
.pet-chapter .case-study .case-detail-content{ margin: 12px 0 0 12px; padding: 0 0 0 22px; border-left: 1px solid var(--line); }
.pet-chapter .case-study .case-inline-link{ text-decoration: underline; text-underline-offset: 4px; }
.pet-chapter .case-study .study-switch{ display: flex; flex-wrap: wrap; gap: 0 24px; border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.pet-chapter .case-study .study-switch legend{ padding: 0; margin-bottom: 8px; font-size: .6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.pet-chapter .case-study .study-switch label{ position: relative; cursor: pointer; }
.pet-chapter .case-study .study-switch input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.pet-chapter .case-study .study-switch label span{ display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; font-size: .875rem; }
.pet-chapter .case-study .study-switch input:checked + span{ border-color: currentColor; }
.pet-chapter .case-study .study-switch input:focus-visible + span{ outline: 3px solid currentColor; outline-offset: 4px; }
.pet-chapter .case-study .study-switch label:hover span{ color: var(--muted); }
.pet-chapter .case-study .extraction-study{ margin-top: 32px; }
.pet-chapter .case-study .extraction-study .study-switch{ width: fit-content; justify-content: center; margin-inline: auto; text-align: center; }
.pet-chapter .case-study .extraction-pair{ --study-image-height: clamp(200px, 25vw, 360px); display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 48px); margin: 38px 0 0; padding-block: 8px; }
.pet-chapter .case-study .extraction-pair figure{ flex: 0 0 auto; min-width: 0; margin: 0; width: calc(var(--study-image-height) * var(--photo-ratio) + 20px); }
.pet-chapter .case-study .extraction-match{ display: grid; justify-items: center; }
.pet-chapter .case-study .extraction-match .study-polaroid{ transform: rotate(2deg); }
.pet-chapter .case-study .extraction-pair img{ display: block; width: 100%; height: auto; }
.pet-chapter .case-study .extraction-pair figcaption{ display: flex; flex-direction: column; gap: 4px; margin-top: 0; padding: 18px 4px 24px; font-size: .75rem; text-align: center; line-height: 1.5; }
.pet-chapter .case-study .extraction-pair figcaption span{ color: var(--muted); }
.pet-chapter .case-study .extraction-study > .case-caption{ max-width: 80ch; margin-inline: auto; text-align: center; }
.pet-chapter .pet-intro{ display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 350px); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: 30px 40px; }
.pet-chapter .pet-intro #p-pet-title{ font-size: clamp(4rem, 6.5vw, 6rem); margin: 12px 0 24px; }
.pet-chapter .pet-intro-copy .lead{ font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.16; letter-spacing: -.045em; }
.pet-chapter .pet-intro-copy > p:not(.lead):not(.eyebrow){ max-width: 40ch; margin-top: 12px; font-size: .9375rem; line-height: 1.65; }
.pet-chapter .pet-intro-device{ width: min(100%, 350px); margin: 0; justify-self: center; transform: rotate(3deg); }
.pet-chapter .pet-screen-link{ display: block; border-radius: 22px; }
.pet-chapter .pet-intro-device img{ display: block; width: 100%; height: auto; border: 12px solid #22262b; border-radius: 22px; box-shadow: 0 20px 30px -22px #17212c99; }
.pet-chapter .pet-intro-links{ display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; }
.pet-chapter .pet-intro .pet-intro-links a{ border-bottom: 0; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .8125rem; text-decoration: underline; text-underline-offset: 5px; }
.pet-chapter .os-section.pet-live{ padding-block: 24px 44px; }
.pet-chapter .pet-live .section-heading{ width: min(100%, 960px); margin-inline: auto; margin-bottom: 22px; }
.pet-chapter .pet-live .section-heading h2{ font-size: 1.35rem; }
.pet-chapter .pet-live .os-note{ max-width: 64ch; }
.pet-chapter .pet-live #p-os-preview{ width: min(100%, 960px); margin-inline: auto; }
.pet-chapter .pet-demo-note{ margin-top: 14px; text-align: center; font-size: .6875rem; line-height: 1.5; color: var(--muted); }
.pet-chapter .case-study .case-compact-notes{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pet-chapter .case-study .case-compact-notes > div{ border: 0; padding: 0; }
.pet-chapter .case-study .case-compact-notes dt{ font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }
.pet-chapter .case-study .pet-exchange{ display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 32px 0 0; gap: 30px; }
.pet-chapter .case-study .pet-exchange li{ border-top: 1px solid var(--line); padding-top: 18px; }
.pet-chapter .case-study .pet-exchange span{ display: block; margin-bottom: 10px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pet-chapter .case-study .pet-exchange strong{ font-size: 1.125rem; font-weight: 400; letter-spacing: -.025em; }
.pet-chapter .case-study .pet-design-row{ display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(28px, 6vw, 80px); margin-top: 28px; }
.pet-chapter .case-study .pet-design-row + .pet-design-row{ margin-top: 56px; }
.pet-chapter .case-study .pet-design-row h3,.pet-chapter .case-study .pet-nfc-note h3{ font-size: 1.5rem; line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }
.pet-chapter .case-study .pet-design-row .case-caption{ margin-top: 14px; font-size: .75rem; }
.pet-chapter .case-study .pet-screen-study{ min-width: 0; margin: 0; }
.pet-chapter .case-study .pet-screen-study img{ display: block; width: 100%; height: auto; border: 12px solid #22262b; border-radius: 22px; box-shadow: 0 20px 30px -22px #17212c99; }
.pet-chapter .case-study .pet-screen-study figcaption,.pet-chapter .case-study .pet-portrait-study figcaption{ margin-top: 18px; font-size: .75rem; line-height: 1.5; text-align: center; color: var(--muted); }
.pet-chapter .case-study .pet-orientation-stage{ display: grid; justify-items: center; align-content: center; gap: 16px; width: min(100%, 360px); min-width: 0; margin: 0 auto; }
.pet-chapter .case-study .pet-orientation-device{ position: relative; width: 100%; aspect-ratio: 1088 / 637; border: 10px solid #22262b; border-radius: 20px; background: #111316; box-shadow: 0 20px 30px -22px #17212c99; }
.pet-chapter .case-study [data-view="portrait"] .pet-orientation-device{ width: 58.55%; aspect-ratio: 637 / 1088; }
.pet-chapter .case-study .pet-orientation-content{ position: absolute; inset: 0; overflow: hidden; border-radius: 10px; }
.pet-chapter .case-study .pet-orientation-content > img{ width: 100%; height: 100%; object-fit: fill; }
.pet-chapter .case-study .pet-orientation-stage figcaption{ min-height: 2.8em; font-size: .75rem; line-height: 1.4; text-align: center; color: var(--muted); }
.pet-chapter .case-study .pet-portrait-screen{ display: grid; align-content: start; padding: 10px; color: #f1f0eb; background: #111316; }
.pet-chapter .case-study .pet-orientation-outgoing{ position: absolute; left: 50%; top: 50%; overflow: hidden; border-radius: 10px; pointer-events: none; }
.pet-chapter .case-study .pet-orientation-outgoing > .pet-orientation-content{ width: 100%; height: 100%; }
.pet-chapter .case-study .pet-wire-top{ display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #34373d; font-size: 9px; }
.pet-chapter .case-study .pet-portrait-screen > strong{ margin-top: 16px; font: 900 28px/.94 Archivo, sans-serif; letter-spacing: -.04em; }
.pet-chapter .case-study .pet-wire-sub{ margin-top: 10px; font-size: 9px; color: #a7acb3; }
.pet-chapter .case-study .pet-wire-hello{ justify-self: center; margin-block: 16px; font-size: 26px; letter-spacing: -.06em; color: #bfd6b8; }
.pet-chapter .case-study .pet-wire-label{ font-size: 8px; color: #a7acb3; }
.pet-chapter .case-study .pet-wire-projects{ display: grid; gap: 5px; margin-top: 8px; }
.pet-chapter .case-study .pet-wire-projects span{ padding: 7px; background: #1c1e23; font-size: 10px; text-align: center; border-radius: 4px; }
.pet-chapter .case-study .pet-display-study img{ transition: filter .4s ease; }
.pet-chapter .case-study [data-view="mono"] .pet-display-study img{ filter: grayscale(1); }
.pet-chapter .case-study .pet-nfc-note{ display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(28px, 6vw, 80px); margin-top: 72px; }
.pet-chapter .case-study .pet-nfc-note p{ font-size: .9375rem; line-height: 1.7; max-width: 42ch; }
.pet-chapter .case-study .pet-card-actions{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.pet-chapter .case-study .pet-card-actions button{ min-height: 44px; padding: 8px 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: inherit; font-size: .8125rem; }
.pet-chapter .case-study .pet-card-stage{ min-width: 0; padding: 30px 0; perspective: 1300px; transform: rotate(2deg); }
.pet-chapter .case-study .pet-card-turn{ position: relative; aspect-ratio: 7 / 4; transform-style: preserve-3d; }
.pet-chapter .case-study [data-side="back"] .pet-card-turn{ transform: rotateY(180deg); }
.pet-chapter .case-study .pet-card-face{ position: absolute; inset: 0; backface-visibility: hidden; box-shadow: 0 16px 28px -16px #19232780; }
.pet-chapter .case-study .pet-card-back{ transform: rotateY(180deg); }
.pet-chapter .case-study .pet-card-face > img{ width: 100%; height: 100%; object-fit: contain; }
.pet-chapter .case-study .pet-card-tag{ position: absolute; width: 17%; height: auto; right: 6%; top: 10%; opacity: 0; filter: drop-shadow(0 2px 2px #19232725); }
.pet-chapter .case-study [data-tag="placed"] .pet-card-tag{ opacity: 1; }
.pet-chapter .case-study .case-field{ padding-bottom: 12px; }
.pet-chapter .case-study .pet-next{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px 80px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.pet-chapter .case-study .pet-next h3{ font-size: 1.35rem; font-weight: 400; letter-spacing: -.04em; }
.pet-chapter .case-study .pet-next p{ font-size: .9375rem; line-height: 1.65; color: var(--muted); max-width: 55ch; }
.pet-chapter .case-study .pet-next .case-return{ grid-column: 2; justify-self: start; margin-top: 0; }
.pet-chapter .case-study .pet-hardware{ margin-top: 28px; }
.pet-chapter .case-study .pet-hardware .parts{ display: grid; gap: 6px; justify-items: start; }
.pet-chapter .case-study .pet-hardware .parts a{ display: inline-flex; align-items: center; min-height: 36px; }
.pet-chapter .case-study .device-gallery{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; position: relative; left: auto; height: auto; margin-top: 48px; padding: 12px 10px 22px; }
.pet-chapter .case-study .pet-build-study{ min-width: 0; }
.pet-chapter .case-study .device-print{ position: relative; width: 100%; max-width: none; inset: auto; margin: 0; transform: rotate(-2deg); }
.pet-chapter .case-study .pet-prototype-photos .device-print{ transform: rotate(2deg); }
.pet-chapter .case-study .device-gallery .paper{ padding: 12px 12px 0; animation: none; }
.pet-chapter .case-study .device-gallery figcaption{ display: flex; justify-content: center; align-items: center; min-height: 70px; padding: 10px 0 16px; font-size: .75rem; line-height: 1.5; text-align: center; }
.pet-chapter .case-study .pet-prototype-photos figcaption{ display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
.pet-chapter .case-study .pet-prototype-photos figcaption button{ display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; padding: 0; color: inherit; font: inherit; font-size: 1.25rem; }
.pet-chapter .case-study .pet-prototype-photos figcaption button:hover{ background: #17212c0d; }
.pet-chapter .case-study .pet-prototype-photos figcaption button:focus-visible{ outline: 2px solid currentColor; outline-offset: -3px; }
.pet-chapter .case-study .pet-prototype-photos{ --photo-ratio: 4 / 3; }
.pet-chapter .case-study .palette-game{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 6vw, 80px); min-height: 460px; margin: 28px 0 0; padding: 16px 0; }
.pet-chapter .case-study .palette-game-print{ width: min(100%, calc(370px * var(--photo-ratio, 1) + 20px)); justify-self: center; }
.pet-chapter .case-study .palette-image-stage img{ display: block; width: 100%; height: auto; }
.pet-chapter .case-study [data-state="guessing"] .palette-image-stage img{ filter: grayscale(1); }
.pet-chapter .case-study .palette-game-print figcaption{ display: grid; gap: 5px; padding: 18px 2px 22px; text-align: center; font-size: .75rem; line-height: 1.4; }
.pet-chapter .case-study .palette-game-controls{ position: relative; min-width: 0; width: min(100%, 430px); padding-bottom: 56px; }
.pet-chapter .case-study .palette-instruction{ max-width: 32ch; margin: 0 0 24px; font-size: 1rem; line-height: 1.6; letter-spacing: -.025em; }
.pet-chapter .case-study .palette-options{ display: grid; gap: 16px; }
.pet-chapter .case-study .guess-option{ position: relative; display: block; width: 100%; padding: 6px 6px 22px; border: 0; border-radius: 0; background: var(--paper); color: var(--muted); text-align: right; font: inherit; box-shadow: 0 5px 12px -7px #17212c66; transform: rotate(-1deg); transition: transform 350ms ease, opacity 350ms ease; }
.pet-chapter .case-study .guess-option:nth-child(2){ transform: rotate(1deg); }
.pet-chapter .case-study .guess-option:nth-child(3){ transform: rotate(-.5deg); }
.pet-chapter .case-study .guess-option-label{ position: absolute; bottom: 4px; right: 8px; font-size: .625rem; line-height: 1.4; }
.pet-chapter .case-study .guess-palette-bar{ display: flex; height: 40px; width: 100%; }
.pet-chapter .case-study .guess-palette-bar > span{ min-width: 0; }
.pet-chapter .case-study .guess-option:hover:not([aria-disabled="true"]),.pet-chapter .case-study .guess-option:focus-visible,.pet-chapter .case-study .guess-option[data-result="correct"]{ transform: rotate(0deg) translateY(-2px); }
.pet-chapter .case-study .guess-option[data-result="correct"]{ color: var(--ink); }
.pet-chapter .case-study .guess-option[data-result="other"]{ opacity: .4; }
.pet-chapter .case-study .guess-option[aria-disabled="true"]{ cursor: default; }
.pet-chapter .case-study .palette-feedback{ min-height: 1.7em; margin: 18px 0 8px; font-size: .75rem; line-height: 1.7; color: var(--muted); }
.pet-chapter .case-study .palette-actions{ display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pet-chapter .case-study .palette-actions button,.pet-chapter .case-study .palette-explore{ min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: .8125rem; text-align: left; }
.pet-chapter .case-study .palette-actions [aria-disabled="true"]{ color: var(--muted); border-color: transparent; cursor: default; }
.pet-chapter .case-study .palette-explore{ position: absolute; bottom: 0; left: 0; max-width: 100%; margin: 0; font-size: .75rem; }
.pet-chapter .case-study .palette-game button:focus-visible,.pet-chapter .case-study .analysis-option:focus-visible,.pet-chapter .case-study .study-photo-open:focus-visible{ outline: 2px solid var(--ink); outline-offset: 5px; }
.pet-chapter .case-study .case-distribution{ --analysis-photo-height: clamp(280px, 26vw, 350px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 28px clamp(32px, 6vw, 80px); margin: 38px 0 0; }
.pet-chapter .case-study .analysis-categories{ display: grid; grid-template-rows: auto 1fr; gap: 18px; min-height: calc(var(--analysis-photo-height) + 88px); }
.pet-chapter .case-study .analysis-heading{ font-size: 1.125rem; letter-spacing: -.025em; margin: 0 0 9px; }
.pet-chapter .case-study .analysis-options{ display: grid; grid-template-rows: repeat(6, 1fr); }
.pet-chapter .case-study .analysis-option{ display: grid; grid-template-columns: minmax(0, 1fr) 66px 18px; align-items: center; gap: 18px; width: 100%; padding: 13px 0; background: transparent; border: 0; border-radius: 0; font: inherit; font-size: .8125rem; text-align: left; color: var(--muted); }
.pet-chapter .case-study .analysis-option[aria-pressed="true"],.pet-chapter .case-study .analysis-option:hover{ color: var(--ink); }
.pet-chapter .case-study .analysis-option[aria-pressed="true"] > span:first-child{ text-decoration: underline; text-underline-offset: 4px; }
.pet-chapter .case-study .analysis-count{ text-align: right; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.pet-chapter .case-study .analysis-count > span{ display: inline-block; margin-left: 8px; font-size: .6875rem; }
.pet-chapter .case-study .analysis-pointer{ visibility: hidden; font-size: 1.125rem; }
.pet-chapter .case-study .analysis-option[aria-pressed="true"] .analysis-pointer{ visibility: visible; }
.pet-chapter .case-study .distribution-track{ display: block; height: 4px; margin-top: 10px; background: #44516112; }
.pet-chapter .case-study .distribution-track > span{ display: block; height: 100%; background: currentColor; }
.pet-chapter .case-study .analysis-print-stage{ display: grid; min-width: 0; padding: 0 12px; }
.pet-chapter .case-study .analysis-example{ display: grid; justify-items: center; align-content: start; width: 100%; }
.pet-chapter .case-study .analysis-photos{ width: 100%; }
.pet-chapter .case-study .analysis-photo{ display: grid; justify-items: center; }
.pet-chapter .case-study .analysis-photo[hidden]{ display: none; }
.pet-chapter .case-study .analysis-example[hidden]{ display: none; }
.pet-chapter .case-study .analysis-example .study-polaroid{ width: min(100%, calc(var(--analysis-photo-height) * var(--photo-ratio) + 20px)); transform: rotate(2deg); }
.pet-chapter .case-study .analysis-example img{ display: block; width: 100%; height: auto; }
.pet-chapter .case-study .analysis-example figcaption{ padding: 6px 0; text-align: center; font-size: .75rem; line-height: 1.5; }
.pet-chapter .case-study .case-observations > .case-caption{ max-width: 52ch; }
.pet-chapter .case-study .analysis-example-note{ max-width: 38ch; margin-top: 18px; text-align: center; font-size: .8125rem; line-height: 1.6; }
.pet-chapter .case-study .analysis-example-note .study-print-label{ margin-bottom: 6px; }
@media (max-width: 700px){.pet-chapter .case-study .palette-game,.pet-chapter .case-study .case-distribution{ grid-template-columns: minmax(0, 1fr); gap: 30px; min-height: 0; }
.pet-chapter .case-study .palette-game{ margin-top: 22px; padding: 12px 0; }
.pet-chapter .case-study .palette-game-print{ width: min(100%, calc(240px * var(--photo-ratio, 1) + 20px)); }
.pet-chapter .case-study .palette-game-controls{ width: 100%; max-width: 430px; justify-self: center; }
.pet-chapter .case-study .palette-instruction{ margin-bottom: 12px; font-size: 1rem; }
.pet-chapter .case-study .palette-options{ gap: 12px; }
.pet-chapter .case-study .guess-palette-bar{ height: 30px; }
.pet-chapter .case-study .palette-feedback{ margin-top: 14px; }
.pet-chapter .case-study .palette-actions{ gap: 8px 20px; }
.pet-chapter .case-study .palette-actions button{ font-size: .75rem; }
.pet-chapter .case-study .analysis-categories{ min-height: 0; }
.pet-chapter .case-study .analysis-options{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; min-height: 0; gap: 0 22px; }
.pet-chapter .case-study .analysis-option{ grid-template-columns: minmax(0, 1fr) 36px; align-items: start; gap: 8px; min-height: 76px; font-size: .75rem; }
.pet-chapter .case-study .analysis-count{ font-size: 1rem; }
.pet-chapter .case-study .analysis-count > span{ display: block; margin: 4px 0 0; font-size: .625rem; }
.pet-chapter .case-study .analysis-pointer{ display: none; }
.pet-chapter .case-study .analysis-print-stage{ padding: 12px; }
.pet-chapter .case-study .analysis-example{ min-height: 0; }
.pet-chapter .case-study .analysis-example .study-polaroid{ width: min(100%, calc(240px * var(--photo-ratio) + 20px)); }

}
.pet-chapter .case-study .device-gallery .paper{ animation: none; }
.pet-chapter .motion-paused .pet-display-study img{ transition: none; }
@media (max-width: 700px){.pet-chapter .pet-intro{ grid-template-columns: 1fr; gap: 32px; padding-block: 4px 32px; }
.pet-chapter .pet-intro-device{ width: min(92%, 300px); }
.pet-chapter .pet-intro-device img{ border-width: 8px; border-radius: 16px; }
.pet-chapter .case-study .device-gallery{ grid-template-columns: minmax(0, 1fr); gap: 36px; padding-inline: 6px; }
.pet-chapter .case-study .pet-hardware > summary{ column-gap: 10px; row-gap: 6px; }
.pet-chapter .pet-intro-copy .lead br{ display: none; }
.pet-chapter .os-section.pet-live{ padding-block: 12px 32px; }
.pet-chapter .pet-live .section-heading{ gap: 14px; align-items: start; }
.pet-chapter .pet-live .os-note{ font-size: .75rem; }
.pet-chapter .case-study .case-compact-notes{ gap: 20px; }
.pet-chapter .case-study .pet-exchange{ grid-template-columns: 1fr; gap: 16px; }
.pet-chapter .case-study .pet-exchange li{ display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding-top: 14px; }
.pet-chapter .case-study .pet-exchange span{ margin: 0; }
.pet-chapter .case-study .pet-exchange strong{ font-size: 1rem; }
.pet-chapter .case-study .pet-design-row,.pet-chapter .case-study .pet-nfc-note,.pet-chapter .case-study .pet-next{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pet-chapter .case-study .pet-design-row{ margin-top: 30px; }
.pet-chapter .case-study .pet-design-row + .pet-design-row{ margin-top: 32px; }
.pet-chapter .case-study .pet-orientation-stage{ min-height: 0; }
.pet-chapter .case-study .pet-screen-study img{ border-width: 8px; border-radius: 15px; }
.pet-chapter .case-study .pet-next .case-return{ grid-column: 1; }
.pet-chapter .case-study .pet-nfc-note,.pet-chapter .case-study .pet-next{ gap: 12px; }
.pet-chapter .case-study .extraction-pair{ --study-image-height: calc((100vw - 80px) / 1.667); gap: 16px; margin-top: 28px; }
.pet-chapter .case-study .extraction-pair figure{ width: calc(var(--study-image-height) * var(--photo-ratio) + 12px); }
.pet-chapter .case-study .extraction-pair .study-polaroid{ padding: 6px 6px 0; }
.pet-chapter .case-study .extraction-pair figcaption{ padding: 12px 2px 18px; }
.pet-chapter .case-study .extraction-pair figcaption{ font-size: .6875rem; }
.pet-chapter .case-study .extraction-study > .case-caption{ text-align: left; }

}
@media (prefers-reduced-motion: reduce){.pet-chapter .case-study .pet-display-study img{ transition: none; }
 }
.pet-chapter .case-study .study-photo-window,.pet-chapter .case-study .palette-image-stage{ position: relative; display: block; width: 100%; aspect-ratio: var(--photo-ratio, 1); overflow: hidden; }
.pet-chapter .case-study .study-photo-window > img,.pet-chapter .case-study .palette-image-stage > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pet-chapter .case-study .palette-image-stage > canvas{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pet-chapter .case-study .palette-flight{ position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; border-radius: 3px; opacity: 0; box-shadow: 0 0 12px 3px var(--flight-color); background: var(--flight-color); }
.pet-chapter .case-study .analysis-example-controls{ display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.pet-chapter .case-study [data-analysis-caption]{ white-space: nowrap; }
.pet-chapter .case-study .analysis-example-controls button{ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.pet-chapter .case-study .analysis-example-controls button:hover{ background: #17212c0d; }
.pet-chapter .case-study .analysis-example-controls button:focus-visible{ outline: 2px solid currentColor; outline-offset: -3px; }
.pet-chapter .case-study .case-possibilities{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); margin-top: 42px; }
.pet-chapter .case-study .case-possibilities h3{ margin-top: 14px; font-size: 1.5rem; font-weight: 400; line-height: 1.25; letter-spacing: -.04em; }
.pet-chapter .case-study .case-possibilities .case-status{ margin: 0; }
.pet-chapter .case-study .case-possibilities .case-notes{ margin-top: 18px; }
@media (max-width: 700px){.pet-chapter .case-study .case-possibilities{ grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }

}
.pet-chapter .motion-paused .case-study .guess-option{ transition: none; }
@media (prefers-reduced-motion: reduce){.pet-chapter .case-study .guess-option{ transition: none; }
 }