:root {
  color-scheme: light;
  --paper: #f6f8ff; --ink: #132548; --muted: #415371; --rule: #b8c9e5;
  --accent: #254dcc; --accent-hover: #173baf; --accent-soft: #e3ecff;
  --inverse: #ffffff; --support: #ffdf75; --focus: #132548; --selection: #c7d9ff;
  --chart-primary: #254dcc; --chart-reference: #526482;
}
body { background: var(--paper); color: var(--ink); }
/* Keep native scrolling available and reserve its gutter to avoid layout shifts. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
/* A decorative ruler inset from both classic and overlay native scrollbars. */
.scroll-position { position: fixed; z-index: 20; top: 50%; right: 1.5rem; width: 18px; height: 82px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; transform: translateY(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms; }
.scroll-position.is-scrolling { opacity: 1; visibility: visible; }
.scroll-position-tick { display: block; width: 4px; height: 2px; background: var(--rule); }
.scroll-position-tick:nth-child(even) { width: 8px; }
.scroll-position-tick:nth-child(4n + 1) { width: 14px; }
.scroll-position-marker { position: absolute; top: var(--scroll-position, 0%); right: 0; width: 18px; height: 2px; background: var(--ink); transform: translateY(-50%); }
.site-header { border-bottom: 2px solid var(--rule); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding-block: 3.2rem 4.5rem; }
.eyebrow, .section-label { color: var(--accent); }
h1, h2 { letter-spacing: -.05em; font-weight: 800; }
h1 { margin-top: 1.2rem; font-size: clamp(3rem, 4.7vw, 4.4rem); line-height: 1.05; text-wrap: initial; }
h1 span { color: var(--accent); }
.claim-marker { font-size: .4em; line-height: 0; vertical-align: super; letter-spacing: 0; }
.hero-footnote { max-width: 60ch; margin-top: 1rem; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
h2 { font-size: clamp(2.15rem, 3.3vw, 3.2rem); }
.intro { margin-top: 1.7rem; font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.hero-description { color: var(--muted); margin-top: 1.2rem; max-width: 43ch; }
.hero h1 { margin-top: 0; }
.store-download { position: relative; }
.store-button { cursor: pointer; }
button.store-button img { opacity: .45; filter: grayscale(1); }
.store-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.store-note { position: absolute; z-index: 2; bottom: calc(100% + .6rem); left: 0; width: max-content; max-width: min(19rem, calc(100vw - 3rem)); margin: 0; padding: .55rem .75rem; border: 1px solid var(--rule); border-radius: .3rem; background: var(--paper); color: var(--ink); font-size: .875rem; line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 120ms; }
/* Keep the status hoverable while crossing the small gap above its badge. */
.store-note::after { content: ""; position: absolute; inset: 100% 0 auto; height: .6rem; }
.store-download.is-status-visible .store-note,
.store-downloads:not(.has-status-interactions) .store-download:focus-within .store-note { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .store-downloads:not(.has-status-interactions) .store-download:hover .store-note { opacity: 1; visibility: visible; }
}
.purchase-model { margin-top: 1rem; color: var(--muted); font-size: 1rem; font-weight: 500; }
.camera-stage { display: flex; justify-content: center; align-items: center; position: relative; }
/* The original screen layers and native Xcode device chrome are flattened
   into responsive assets. A separate rounded shadow avoids Safari clipping
   a drop-shadow filter to the image bounds while the image first loads. */
.iphone-frame { position: relative; display: block; width: min(276px, 100%); aspect-ratio: 492 / 990; }
.iphone-frame::before { content: ""; position: absolute; inset: 0 1.83%; border-radius: 18% / 9%; box-shadow: 0 20px 40px rgb(7 17 40 / 24%); pointer-events: none; }
.iphone-frame img { position: relative; width: 100%; height: auto; }
.camera-figure > figcaption { margin-top: 1rem; text-align: center; font-size: .9375rem; font-weight: 500; color: var(--muted); }
.idea { border-top: 2px solid var(--rule); padding-block: 3.5rem 4.5rem; }
.idea-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; margin-top: 1.5rem; }
.idea-prose { max-width: 47ch; color: var(--muted); }
.idea-prose p + p { margin-top: 1rem; }
.photo-comparison { margin-top: 2.5rem; }
.photo-comparison-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.photo-comparison-panel { min-width: 0; }
.photo-comparison-panel:first-child { width: min(264px, 100%); justify-self: center; }
.photo-comparison-label { margin-bottom: 1rem; color: var(--accent); font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.life-photo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, .8vw, .75rem); }
.life-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: .3rem; background: var(--accent-soft); }
.life-photo-single { width: min(264px, 100%); margin-inline: auto; }
.life-photo img { position: absolute; width: 500%; height: 200%; max-width: none; left: calc(-100% * var(--photo-column)); top: calc(-100% * var(--photo-row)); }
.photo-comparison figcaption { margin-top: 1.25rem; }
.photo-comparison figcaption strong { display: block; font-size: 1.125rem; font-weight: 700; }
.camera-figure .render-note, .photo-comparison figcaption span { display: block; margin-top: .3rem; color: var(--muted); font-size: .875rem; font-weight: 450; }
.storage-disclosure { margin-top: 2.5rem; }
.storage-disclosure > summary { display: flex; align-items: center; gap: .65rem; width: fit-content; min-height: 44px; margin-inline: auto; padding: .5rem .9rem; border: 0; color: var(--accent); font-size: 1rem; font-weight: 700; line-height: 1.5; list-style: none; cursor: pointer; }
.storage-disclosure > summary::-webkit-details-marker { display: none; }
.storage-disclosure > summary:hover { color: var(--accent-hover); }
.storage-disclosure > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.storage-disclosure-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.storage-disclosure[open] .storage-disclosure-arrow { transform: rotate(180deg); }
.storage-graphic { margin-top: 1.25rem; padding: 2.2rem; background: var(--accent-soft); border-left: 8px solid var(--accent); }
.storage-graphic figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.8rem; }
.storage-graphic figcaption strong { font-size: 1.5rem; font-weight: 800; }
.storage-graphic figcaption > span { color: var(--muted); font-size: .9375rem; font-weight: 600; }
.storage-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 1.3rem; }
.storage-row p { display: flex; flex-direction: column; }
.storage-row p strong { font-size: 2.65rem; line-height: 1.15; letter-spacing: -.04em; color: var(--accent); }
.storage-row p span { color: var(--muted); font-size: 1rem; }
.storage-blocks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .45rem; padding-block: .65rem; border-block: 2px solid var(--rule); }
.storage-blocks span { height: 3.5rem; background: var(--chart-primary); border-radius: 2px; }
.reference-blocks span { background: var(--chart-reference); }
.graphic-note { max-width: none; margin-top: 1.5rem; font-size: .9375rem; color: var(--muted); }
.capacity-estimates { margin-top: 2.5rem; }
.capacity-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.capacity-table caption { text-align: left; margin-bottom: 1.5rem; }
.capacity-table caption strong { display: block; font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
.capacity-table caption span { display: block; margin-top: .6rem; color: var(--muted); font-size: 1rem; }
.capacity-table th, .capacity-table td { padding: 1.15rem min(1.25rem, 2vw); border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
.capacity-table thead { background: var(--ink); color: var(--inverse); }
.capacity-table thead th { font-size: 1rem; font-weight: 700; }
.capacity-table th:first-child { width: 40%; }
.capacity-table tbody th { font-size: 1.25rem; font-weight: 750; }
.capacity-table td { background: var(--accent-soft); }
.capacity-table td strong { display: inline-block; color: var(--accent); font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
.capacity-table td span { display: inline-block; margin-left: .65rem; color: var(--muted); font-size: 1rem; }
/* Setup is three independent concepts, with the site's existing ruled rhythm. */
.details { padding-block: 3.7rem 4rem; border-top: 2px solid var(--rule); }
.setup-concept { margin-top: 2rem; }
.setup-concept + .setup-concept { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.setup-category { color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
.setup-concept h2 { margin-top: .65rem; font-size: clamp(1.8rem, 2.8vw, 2.5rem); letter-spacing: -.04em; }
.setting-graphics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 2rem; }
.setting-graphic:first-child { padding-right: 3rem; }
.setting-graphic + .setting-graphic { padding-left: 3rem; border-left: 1px solid var(--rule); }
.setting-graphic h3 { font-size: 1.15rem; letter-spacing: -.015em; }
.setting-graphic figcaption > span { display: block; margin-top: .3rem; color: var(--muted); font-size: .9375rem; }
.setting-options { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0; padding: 0; }
/* Equal illustration rows balance the dense pixel grids with the lighter photo icons. */
.setting-options li { display: grid; grid-template-rows: 112px auto; justify-items: center; align-items: center; gap: .7rem; min-width: 0; }
.setting-options svg { width: min(80px, 100%); aspect-ratio: 1; }
.setting-options .file-symbol { width: min(112px, 100%); }
.setting-options span { color: var(--ink); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.pixel-light { fill: var(--accent-soft); }
.pixel-mid { fill: var(--rule); }
.pixel-dark { fill: var(--accent); }
/* The plate lowers and the block thins; photo artwork keeps the same proportions. */
.compression-arrow { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.compression-plate { fill: var(--accent); }
.file-photo-frame { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.file-photo-sun { fill: var(--accent); }
.file-photo-landscape { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setting-graphic > p { font-size: 1rem; color: var(--muted); max-width: 45ch; }
.setup-note { color: var(--muted); font-size: .9375rem; }
.setup-concept > .setup-note { margin-top: 1.4rem; }
.sample-slot { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: 1.7rem; max-width: 40rem; }
.sample-slot[hidden] { display: none; }
.sample-frame { display: grid; align-content: center; text-align: center; aspect-ratio: 3 / 2; border: 1px dashed var(--rule); border-radius: .3rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.sample-slot strong { display: block; font-size: 1rem; font-weight: 650; }
.sample-slot p > span { display: block; margin-top: .35rem; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.camera-demo-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 1rem; }
.motion-control { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--muted); font-size: .875rem; }
.motion-control input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.motion-control label { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.motion-control input:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.camera-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.camera-demo { min-width: 0; }
.demo-stage { aspect-ratio: 320 / 208; overflow: hidden; border-radius: .3rem; background: var(--ink); }
.demo-stage > svg { width: 100%; height: 100%; }
.open-demo { background: var(--accent-soft); }
.phone-side { fill: var(--muted); }
.phone-screen { fill: #000; }
.phone-edge { fill: none; stroke: var(--rule); stroke-width: 1; opacity: .65; }
.camera-control-button { fill: var(--rule); }
.camera-control-feedback { fill: var(--inverse); opacity: 1; }
.opened-app text { fill: var(--inverse); font-size: 14px; font-weight: 650; text-anchor: middle; }
.control-label { fill: var(--muted); font-size: 9px; font-weight: 600; }
/* Wider, softly tapered fingertips with complete nail beds. */
.finger-skin { stroke: #a27e69; stroke-width: .8; stroke-linejoin: round; }
.finger-nail { fill: #f4dfd2; stroke: #bd9682; stroke-width: .8; }
.nail-edge { fill: none; stroke: #fff5eb; stroke-width: 1.5; stroke-linecap: round; }
.finger-crease { fill: none; stroke: #ae826c; stroke-width: .75; stroke-linecap: round; opacity: .45; }
.control-thumb { transform-origin: 185px 160px; transform: translate(-2px, 0) rotate(-2deg); }
.shutter-finger { transform: translateY(-5px); }
.photo-demo, .video-demo { background: #000; }
.shutter-mask { fill: #000; }
.photo-shutter, .video-ready-shutter { fill: #fff; transform-origin: 160px 145.455px; }
.capture-response { fill: none; stroke: #fff; stroke-width: 1; opacity: .4; transform-origin: 160px 145.455px; }
.recording-shutter, .recording-state > circle { fill: #ff3b30; }
.recording-shutter { transform-origin: 160px 145.455px; }
.recording-pill { fill: #000; fill-opacity: .72; }
.recording-state text { fill: #fff; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.video-ready-shutter { opacity: 0; }
.camera-demo figcaption { margin-top: 1rem; }
.camera-demo h3 { font-size: 1.1rem; }
.camera-demo p { margin-top: .4rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.camera-demo .camera-launch-note { font-size: .875rem; }
.library-concept > p:not(.setup-category) { max-width: 62ch; margin-top: 1rem; color: var(--muted); font-size: 1rem; }
.library-concept > .library-note { color: var(--ink) !important; font-weight: 600; }
/* Static defaults tell the whole story; motion only adds the interaction. */
@media (prefers-reduced-motion: no-preference) {
  .control-thumb { animation: thumb-press 6s ease-in-out infinite; }
  .camera-control-feedback { animation: control-feedback 6s ease-in-out infinite; }
  .opened-app { animation: open-lolog 6s ease-in-out infinite; }
  .photo-demo .shutter-finger { animation: photo-tap 6s ease-in-out infinite; }
  .photo-shutter { animation: photo-shutter 6s ease-in-out infinite; }
  .capture-response { animation: capture-ring 6s ease-in-out infinite; }
  .video-demo .shutter-finger { animation: video-hold 6s ease-in-out infinite; }
  .video-ready-shutter { animation: video-ready 6s ease-in-out infinite; }
  .recording-shutter, .recording-state { animation: video-recording 6s ease-in-out infinite; }
}
.camera-concept:has(#pause-setup-motion:checked) .demo-stage * { animation-play-state: paused; }
/* A continuous grip: the thumb rolls its pad inward, then relaxes. */
@keyframes thumb-press {
  0%, 22%, 48%, 100% { transform: translate(2px, 1px) rotate(0deg); }
  29%, 39% { transform: translate(-2px, 0) rotate(-2deg); }
}
@keyframes control-feedback { 0%, 24%, 48%, 100% { opacity: 0; } 29%, 39% { opacity: 1; } }
@keyframes open-lolog { 0%, 29%, 96%, 100% { opacity: 0; } 39%, 82% { opacity: 1; } }
@keyframes photo-tap {
  0%, 12%, 55%, 100% { opacity: 0; transform: translateY(40px); }
  26%, 36% { opacity: 1; transform: translateY(0); }
  29%, 32% { opacity: 1; transform: translateY(-5px); }
}
@keyframes photo-shutter { 0%, 26%, 38%, 100% { transform: scale(1); } 29%, 32% { transform: scale(.86); } }
@keyframes capture-ring { 0%, 32%, 48%, 100% { opacity: 0; transform: scale(.8); } 36% { opacity: .45; transform: scale(1); } 44% { opacity: 0; transform: scale(1.2); } }
@keyframes video-hold {
  0%, 12%, 92%, 100% { opacity: 0; transform: translateY(40px); }
  26%, 80% { opacity: 1; transform: translateY(0); }
  33%, 74% { opacity: 1; transform: translateY(-5px); }
}
@keyframes video-ready { 0%, 46%, 88%, 100% { opacity: 1; } 50%, 80% { opacity: 0; } }
@keyframes video-recording { 0%, 46%, 88%, 100% { opacity: 0; } 50%, 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .motion-control { display: none; } }
.site-footer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; padding-block: 1rem; }
.site-footer nav { flex-wrap: wrap; align-items: center; gap: 0 .65rem; }
.site-footer nav a { font-size: inherit; font-weight: inherit; }
.site-footer nav span { color: var(--muted); }
.footer-contact { max-width: 100%; }
.policy-page { min-height: 100vh; display: flex; flex-direction: column; }
.policy-content { flex: 1; padding-block: 3.2rem 4.5rem; }
.policy-content h1 { margin-top: 0; }
.policy-content p { margin-top: 1.5rem; color: var(--muted); }
.policy-content .text-link { margin-top: 1.5rem; }
.policy-article { width: min(100%, 68ch); margin-inline: auto; }
.policy-article h1 { font-size: clamp(2.125rem, 3.8vw, 3rem); margin-top: 1.5rem; }
.policy-article h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.025em; margin-top: 2.5rem; }
.policy-article h3 { font-size: 1.125rem; line-height: 1.4; margin-top: 1.5rem; }
.policy-article p { max-width: none; margin-top: 1rem; }
.policy-article .policy-date { font-size: 1rem; margin-top: .75rem; }
.policy-article ul { margin-block: 1rem 0; padding-left: 1.35rem; color: var(--muted); }
.policy-article li + li { margin-top: .35rem; }
.policy-article a { overflow-wrap: anywhere; }
.policy-article .policy-back { margin-top: 0; }
@media (max-width: 1100px) {
  .hero { gap: 2.5rem; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-copy { max-width: 650px; }
  .camera-link { width: min(276px, 100%); }
  .idea-content { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .idea-prose { max-width: 60ch; }
  .storage-row { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 767px) {
  .scroll-position { right: .25rem; width: 12px; }
  .scroll-position-tick:nth-child(4n + 1) { width: 10px; }
  .scroll-position-marker { width: 12px; }
  .hero { padding-block: 2.3rem 3rem; }
  h1 { font-size: clamp(2.75rem, 10.6vw, 4.25rem); }
  .intro { font-size: 1.3rem; margin-top: 1.4rem; }
  .idea { padding-block: 2.5rem 3rem; }
  .photo-comparison-panels { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .photo-comparison-panel:first-child { width: min(176px, 100%); justify-self: start; }
  .life-photo-single { width: min(176px, 100%); margin-inline: 0; }
  .storage-graphic { padding: min(1.25rem, 4vw); border-left-width: 5px; }
  .storage-row { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1.6rem; }
  .storage-blocks { gap: .3rem; }
  .storage-blocks span { height: 2.7rem; }
  .capacity-table td span { display: block; margin: .3rem 0 0; }
  .details { padding-block: 2.8rem 1.5rem; }
  .setup-concept + .setup-concept { margin-top: 2rem; padding-top: 2rem; }
  .setting-graphics { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .setting-graphic:first-child { padding-right: 0; }
  .setting-graphic + .setting-graphic { padding: 1.8rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .setting-graphic > p { max-width: 55ch; }
  .camera-demos { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .camera-demo { width: min(100%, 420px); }
  .sample-slot { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
  .policy-content { padding-block: 2.3rem 3rem; }
}
@media (max-width: 480px) {
  .store-downloads { gap: 1.15rem .75rem; }
  .store-download:has([data-store="google-play"]) .store-note { top: calc(100% + .6rem); bottom: auto; }
  .store-download:has([data-store="google-play"]) .store-note::after { inset: auto 0 100%; }
}
@media (forced-colors: active) {
  .store-button img { opacity: 1; }
  .store-note { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .scroll-position-tick, .scroll-position-marker { background: CanvasText; }
  .storage-graphic { border: 2px solid CanvasText; }
  .storage-blocks span { background: CanvasText; }
  .iphone-frame { outline: 1px solid CanvasText; }
}