/* Native app colors and proportions, inside a local, illustrative phone demo. */
.hero-demo{width:min(390px,100%);min-width:0;margin-inline:auto;--demo-purple:#b4a6ff;--demo-text:#f2f3fa;--demo-muted:rgba(225,228,245,.62);--demo-line:#2b3047;--demo-bg:#0f1220;--demo-card:#191d30}
.demo-invitation{text-align:center;margin-bottom:15px;min-height:42px}
.demo-invitation-label{font-size:13px;font-weight:600;color:var(--paper)}
.demo-invitation-label > span{color:var(--lavender);font-size:21px;vertical-align:-2px;margin-right:6px}
.demo-invitation p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.demo-phone{scroll-margin-top:12px;position:relative;width:min(342px,100%);margin-inline:auto;padding:7px;border:1px solid #777182;border-radius:47px;background:linear-gradient(140deg,#514b58,#16131c 25%,#302b37 65%,#645b6d);box-shadow:0 0 0 1px #08060b,0 0 0 3px #24202b,0 28px 60px -15px #000b,0 0 85px -25px #8c69d62b}
.demo-phone::before,.demo-phone::after{content:"";position:absolute;left:-4px;width:3px;background:linear-gradient(90deg,#2b2632,#756c80);border-radius:2px}
.demo-phone::before{top:112px;height:25px;box-shadow:0 41px 0 #514859,0 76px 0 #514859}
.demo-phone::after{left:auto;right:-4px;top:169px;height:57px;background:linear-gradient(90deg,#756c80,#2b2632)}
.demo-screen{container-type:inline-size;position:relative;display:flex;flex-direction:column;aspect-ratio:440/956;overflow:hidden;border-radius:39px;background:var(--demo-bg);color:var(--demo-text);color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 0 0 1px #000}
.demo-statusbar{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:12px;font-weight:600;position:relative}
.demo-status-icons{display:flex;align-items:center;gap:3px}
.demo-status-icons > svg{width:37px;height:15px}
.demo-battery{position:relative;font-size:9px;line-height:12px;letter-spacing:-.3px;background:#30c858;color:#fff;border-radius:3px;padding:0 2px}
.demo-battery::after{content:"";position:absolute;right:-2px;top:4px;width:1.5px;height:5px;border-radius:0 1px 1px 0;background:#30c858}
.demo-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:91px;height:25px;border-radius:20px;background:#030408}
.demo-island::after{content:"";position:absolute;right:10px;top:8px;width:8px;height:8px;background:radial-gradient(circle at 40% 40%,#222839,#07080c 65%);border-radius:50%}
.demo-viewport{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.demo-viewport::-webkit-scrollbar{display:none}
/* On a touch screen, a swipe over the list moves the page. Every item is still a tap away on the map. */
@media(pointer:coarse){.hero-demo:is([data-demo-state="list"],[data-demo-behind="list"]) .demo-viewport{overflow-y:hidden}}
.demo-panel{min-height:100%;padding:0 13px 8px;display:flex;flex-direction:column;animation:demo-reveal .2s ease-out}
.demo-panel h2{font-size:25px;letter-spacing:-.025em;line-height:1.15;font-weight:700;margin:0;color:var(--demo-text)}
.demo-panel [data-demo-focus]:focus{outline:none}
.demo-panel button:focus-visible,.demo-panel a:focus-visible,.demo-quality-option:has(input:focus-visible){outline:2px solid var(--demo-purple);outline-offset:2px}
.demo-panel button{color:var(--demo-text)}
.demo-native-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:9px;position:relative;min-height:37px;margin:1px 2px 6px}
.demo-glass-button{height:33px;min-width:61px;border:1px solid #41465b;border-radius:22px;padding:0 13px;background:linear-gradient(#303549,#292d3e);box-shadow:inset 0 1px 1px #ffffff0c;font-size:13px;line-height:1;font-weight:500}
.demo-glass-button:hover{background:#3c4158}
.demo-more-button{width:33px;min-width:33px;padding:0;font-size:13px;letter-spacing:1px}
.demo-select-all{margin-right:auto;padding:5px 0;border:0;background:transparent;color:var(--demo-purple)!important;font-size:11px;min-height:33px}
.demo-native-overview{font-size:11.5px;line-height:1.4;color:var(--demo-muted);margin:11px 2px 12px;min-height:32px}
.demo-map{position:relative;isolation:isolate;width:100%;aspect-ratio:1.5;flex-shrink:0;border-radius:13px;overflow:hidden;background:#1b1f33;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:2px}
.demo-map-tile{position:absolute;isolation:isolate;overflow:hidden;border:1px solid var(--demo-bg);border-radius:5px;padding:0;background-color:#1b1f33;background-clip:padding-box;text-align:left;transition:filter .15s,box-shadow .15s}
.demo-map-tile::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#0009);z-index:-1;pointer-events:none}
.demo-map-tile:hover{filter:brightness(1.14)}
.demo-map-tile:focus-visible{outline-offset:-3px!important;z-index:2}
.demo-map-size{position:absolute;left:5px;bottom:4px;font-size:10px;line-height:1.1;font-weight:600;white-space:nowrap;text-shadow:0 1px 3px #000b}
.demo-map-fallback{position:relative;display:flex;align-items:flex-end;padding:4px;font-size:9px;text-shadow:0 1px 3px #000}
.demo-map-fallback:first-child{grid-row:span 2}
.demo-map-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--demo-purple)}
.demo-map-tile[aria-pressed="true"]::after{inset:0;background:#8b72e85c}
.demo-item-check{display:none;position:absolute;z-index:3;right:4px;top:4px;width:16px;height:16px;align-items:center;justify-content:center;border-radius:50%;background:var(--demo-purple);color:#161126;font-size:11px;font-weight:700;line-height:1;box-shadow:0 1px 3px #0005}
[data-demo-item][aria-pressed="true"] > .demo-item-check{display:flex}
.demo-native-row > .demo-item-check{left:6px;right:auto;top:18px;width:17px;height:17px}
.demo-native-row[aria-pressed="true"] .demo-rank{visibility:hidden}
.demo-filter{display:flex;align-items:stretch;flex-shrink:0;height:26px;background:#272a3b;border-radius:20px;padding:2px;margin:11px 2px 10px}
.demo-filter > button{flex:1;border:0;border-radius:18px;background:transparent;font-size:10px;padding:0 5px;line-height:1.2}
.demo-filter > button[aria-pressed="true"]{background:#626575;box-shadow:0 1px 3px #0002}
.demo-filter > button:hover{background:#44485b}
.demo-native-files{border-radius:16px;background:var(--demo-card);overflow:hidden;flex-shrink:0}
.demo-native-row{position:relative;width:100%;border:0;background:transparent;display:grid;grid-template-columns:16px 34px minmax(0,1fr);gap:8px;align-items:center;padding:8px 12px 8px 9px;min-height:52px;text-align:left}
.demo-native-row + .demo-native-row::after{content:"";position:absolute;top:0;left:66px;right:0;border-top:1px solid #262b40}
.demo-native-row:hover{background:#23283e}
.demo-native-row:focus-visible{outline-offset:-3px!important}
.demo-native-row[aria-pressed="true"]{background:#b4a6ff1a}
.demo-rank{font-size:10px;font-weight:600;color:var(--demo-muted);text-align:center}
.demo-native-row[aria-pressed="true"] .demo-rank{color:var(--demo-purple)}
.demo-native-thumb{position:relative;width:34px;height:34px;border-radius:7px;display:block;background-color:#292e45}
.demo-native-info{display:block;min-width:0}
.demo-native-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px;line-height:1.1;white-space:nowrap}
.demo-native-size{font-size:13px;font-weight:600;letter-spacing:-.015em}
.demo-native-kind{font-size:9.5px;color:var(--demo-muted)}
.demo-native-date{display:block;margin-top:3px;color:var(--demo-muted);font-size:9.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-native-track{display:block;height:3px;border-radius:3px;background:#2c314a;margin-top:5px;overflow:hidden}
.demo-native-track > span{display:block;height:100%;border-radius:3px;background:var(--demo-purple)}
.demo-selection{position:sticky;bottom:0;z-index:4;margin-top:8px;padding:12px 10px;display:flex;align-items:center;gap:7px;background:#24293eed;backdrop-filter:blur(15px);border:1px solid #454963;border-radius:15px;box-shadow:0 -10px 25px #0005}
.demo-selection > div{min-width:0;flex:1}
.demo-selection strong{font-size:12px;display:block}
.demo-selection p{font-size:9px;color:var(--demo-muted);line-height:1.35;margin-top:3px}
.demo-delete-button{background:#ff5b611f;border:1px solid #ff5b6140;color:#ff7379!important;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:600}
.demo-delete-button:disabled{opacity:.4}
.demo-options-menu{position:absolute;right:0;top:40px;width:186px;z-index:6;background:#303448f5;border:1px solid #4e5368;border-radius:14px;padding:4px 0;backdrop-filter:blur(20px);box-shadow:0 8px 20px #0006}
.demo-options-menu > button,.demo-options-menu > a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 15px;background:transparent;border:0;font-size:12px;text-align:left;line-height:1.1}
.demo-options-menu > a{border-top:1px solid #45495d}
.demo-options-menu > button:hover,.demo-options-menu > a:hover{background:#ffffff0a}
.demo-options-menu > p{font-size:9px;color:var(--demo-muted);padding:5px 15px 7px}
/* Video posters and dedicated photos share native thumbnail framing. */
[data-demo-media]{background-repeat:no-repeat;background-size:cover;background-position:center}
[data-demo-media="iceland"]{background-image:url("images/demo-video-iceland.webp")}
[data-demo-media="mountain"]{background-image:url("images/demo-video-mountain.webp")}
[data-demo-media="sea"]{background-image:url("images/demo-video-sea.webp")}
[data-demo-media="dog"]{background-image:url("images/demo-video-dog.webp")}
[data-demo-media="cafe"]{background-image:url("images/demo-video-cafe.webp")}
[data-demo-media="concert"]{background-image:url("images/demo-video-concert.webp")}
[data-demo-media="breakfast"]{background-image:url("images/demo-video-breakfast.webp")}
/* The real app keeps the video's aspect ratio, playback controls, and compact glass panel. */
.demo-panel.demo-viewer{height:100%;min-height:100%;padding:.9cqw 2.7cqw 1.4cqw;background:#000;animation:none}
.demo-viewer-nav{display:grid;grid-template-columns:10cqw 1fr 10cqw;align-items:center;gap:2.7cqw;min-height:10cqw;flex-shrink:0;margin:1.6cqw .9cqw 1.8cqw}
.demo-viewer-back{width:10cqw;height:10cqw;padding:2.4cqw;border:1px solid #ffffff16;background:linear-gradient(#292929e8,#1e2728ed);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 1px #ffffff09}
.demo-viewer-back > svg{width:5.6cqw;height:5.6cqw}
.demo-viewer-count{justify-self:center;border:1px solid #ffffff16;border-radius:24px;background:linear-gradient(#292929e8,#1e2728ed);padding:2.5cqw 4cqw;font-size:3.5cqw;font-weight:600;line-height:1.25;box-shadow:inset 0 1px 1px #ffffff09}
.demo-viewer-image{position:relative;isolation:isolate;overflow:hidden;min-height:0;flex:1;width:100%;margin:0 auto;background-color:#000;background-size:contain}
.demo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.demo-backdrop-photo > .demo-video{object-position:center top}
.demo-player-transport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4cqw;pointer-events:none;z-index:1}
.demo-player-transport button{display:grid;place-items:center;flex-shrink:0;pointer-events:auto;width:44px;height:44px;padding:8px;border:1px solid #ffffff18;border-radius:50%;background:#68517dc9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 12px #0002;color:#fff;transition:background .15s,opacity .15s}
.demo-player-transport button:hover:not(:disabled){background:#806598ed}
.demo-player-transport .demo-player-play{width:58px;height:58px;padding:15px;background:#7462a1d9}
.demo-player-transport button:disabled{opacity:.4}
.demo-player-transport svg{display:block;width:100%;height:100%;overflow:visible}
.demo-viewer-image[data-playing="true"] .demo-player-transport{opacity:.55}
.demo-viewer-image:hover .demo-player-transport,.demo-viewer-image:focus-within .demo-player-transport{opacity:1}
.demo-viewer-image[data-loading="true"] .demo-player-play{box-shadow:0 0 0 3px #b4a6ff66}
.demo-player-playback{display:flex;align-items:center;gap:6px;flex-shrink:0;min-height:38px;margin:3cqw 0 0;padding:0 3cqw;border-radius:30px;background:#1c1c1e;color:#a6a6ad;font-size:3.1cqw;font-variant-numeric:tabular-nums;line-height:1}
.demo-player-playback > span{min-width:3.8ch;white-space:nowrap}
.demo-player-playback > span:last-child{text-align:right}
.demo-player-playback input{appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:32px;margin:0;background:transparent;cursor:pointer;--demo-progress:0%}
.demo-player-playback input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to right,#ecebf3 var(--demo-progress),#5f5f65 var(--demo-progress))}
.demo-player-playback input::-moz-range-track{height:5px;border-radius:5px;background:#5f5f65}
.demo-player-playback input::-moz-range-progress{height:5px;border-radius:5px;background:#ecebf3}
.demo-player-playback input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-2.5px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004}
.demo-player-playback input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}
.demo-player-playback input:disabled{cursor:default;opacity:.6}
.demo-player-playback input:focus-visible{outline:2px solid var(--demo-purple);outline-offset:2px;border-radius:5px}
.demo-player-note{flex-shrink:0;text-align:center;color:#9998a5;font-size:2.9cqw;line-height:1.4;margin:1.5cqw 0 2cqw}
.demo-player-status{flex-shrink:0;text-align:center;color:#cfc5ff;font-size:3cqw;line-height:1.4;margin:0 0 2cqw}
.demo-player-status:empty{display:none}
.demo-viewer-details{position:relative;flex-shrink:0;border:1px solid #a1b5b12b;border-radius:6.4cqw;padding:3.6cqw 4cqw 3.2cqw;background:linear-gradient(165deg,#1b393fd9 0,#232526f0 38%,#222222f7);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:inset 0 1px 1px #ffffff08}
.demo-viewer-copy{max-height:40cqw;overflow-y:auto;scrollbar-width:none}
.demo-viewer-heading{font-size:4.1cqw;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff}
.demo-viewer-heading > strong{font-size:inherit;font-weight:inherit}
.demo-viewer-meta,.demo-viewer-impact{font-size:3.1cqw;line-height:1.4;color:#ffffffb3}
.demo-viewer-meta{margin-top:.5cqw}
.demo-viewer-impact{margin-top:1.7cqw}
.demo-viewer-actions{display:flex;gap:1.9cqw;margin-top:3cqw}
.demo-viewer-actions .demo-viewer-action{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:10cqw;padding:2cqw .8cqw;border:0;border-radius:50px;background:#ffffff1a;color:#fff;font-size:3.5cqw;font-weight:600;line-height:1.2;text-align:center}
.demo-viewer-actions .demo-viewer-action:hover:not(:disabled){background:#ffffff26}
.demo-viewer-actions .demo-viewer-action:disabled{opacity:.4}
.demo-viewer-actions .demo-viewer-action[aria-pressed="true"]{background:var(--demo-purple);color:#161126}
.demo-viewer-actions .demo-viewer-delete{color:#ff776f}
.demo-primary{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:44px;border:0;border-radius:12px;padding:11px 10px;background:var(--demo-purple);color:#19152c!important;font-size:12px;font-weight:600;line-height:1.4;transition:background .18s,transform .18s}
.demo-primary:hover:not(:disabled){background:#c5baff;transform:translateY(-1px)}
.demo-primary > svg{width:18px;height:18px;flex-shrink:0}
.demo-secondary{display:flex;align-items:center;justify-content:center;min-height:40px;width:100%;border:0;background:transparent;font-size:11px;font-weight:600;color:var(--demo-purple)!important;text-decoration:none}
.demo-secondary:hover{text-decoration:underline;text-underline-offset:3px}
/* Fitted native-style sheets sit over the same dimmed media viewer. */
.hero-demo:is([data-demo-state="viewer"],[data-demo-state="quality"],[data-demo-state="writing"],[data-demo-state="confirm"],[data-demo-state="done"],[data-demo-state="photos-help"],[data-demo-behind="viewer"]) .demo-screen{background:#000}
.demo-sheet-stage{position:relative;isolation:isolate;height:100%;min-height:100%;justify-content:flex-end;padding:0 6px;animation:none;background:#000}
.demo-sheet-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.demo-backdrop-nav{position:absolute;left:13px;right:13px;top:4px;display:flex;align-items:center;justify-content:center;opacity:.32;z-index:1;min-height:33px}
.demo-backdrop-back{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;background:linear-gradient(#292929e8,#1e2728ed)}
.demo-backdrop-back > svg{width:20px;height:20px}
.demo-backdrop-count{border-radius:24px;background:linear-gradient(#292929e8,#1e2728ed);padding:9px 15px;font-size:11px;font-weight:600;line-height:1.3}
.demo-sheet-backdrop .demo-backdrop-photo{position:absolute;inset:44px 24px 0;opacity:.65;background-size:contain;background-position:center top}
.demo-done .demo-backdrop-photo,.demo-photos-help .demo-backdrop-photo{opacity:1}
/* Leave media visible above even the longest sheet on narrow phones. */
.demo-sheet{position:relative;flex-shrink:0;max-height:calc(100% - 96px);overflow-y:auto;scrollbar-width:none;padding:8cqw 4.4cqw 9cqw;border-radius:8.5cqw;background:#1c2036;animation:demo-sheet-enter .24s ease-out}
.demo-sheet::-webkit-scrollbar{display:none}
.demo-sheet-grabber{position:absolute;top:1.35cqw;left:50%;transform:translateX(-50%);height:.9cqw;width:13cqw;border-radius:5px;background:#63677e}
.demo-sheet-stage .demo-sheet h2{font-size:6.5cqw;line-height:1.18;letter-spacing:-.015em;font-weight:700}
.demo-sheet-subtitle{font-size:3.25cqw;line-height:1.45;color:var(--demo-muted);margin-top:1.8cqw}
.demo-kept-original{font-size:3.15cqw;line-height:1.45;margin-top:3cqw;color:var(--demo-text)}
.demo-qualities{padding:0;border:0;min-width:0;display:flex;flex-direction:column;flex-shrink:0;gap:0;margin:3.8cqw 0 0;border-radius:4cqw;background:#2a2e47;overflow:hidden}
.demo-quality-option{position:relative;display:flex;align-items:center;gap:2.7cqw;min-height:12.3cqw;padding:2cqw 3.4cqw;cursor:pointer;line-height:1.2}
.demo-quality-option + .demo-quality-option{border-top:1px solid #ffffff08}
.demo-quality-option:hover{background:#ffffff05}
.demo-quality-option:has(input:focus-visible){outline-offset:-2px!important}
.demo-quality-option input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:5.4cqw;height:5.4cqw;border:1.2px solid #70758d;border-radius:50%;margin:0;background:transparent;display:grid;place-content:center}
.demo-quality-option input:checked{background:var(--demo-purple);border-color:var(--demo-purple)}
.demo-quality-option input:checked::after{content:"";display:block;width:2.35cqw;height:2.35cqw;border-radius:50%;background:#0f1220}
.demo-quality-description{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqw}
.demo-quality-description > strong{font-size:3.7cqw;line-height:1.1;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.demo-quality-meta{display:flex;align-items:baseline;gap:1.8cqw;font-size:2.9cqw;line-height:1.1;color:var(--demo-muted);white-space:nowrap}
.demo-quality-meta b{font-size:2.5cqw;font-weight:700;letter-spacing:.04em;color:var(--demo-purple)}
.demo-quality-saving{font-size:3.2cqw;line-height:1.15;color:var(--demo-purple);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-sheet-note{font-size:2.95cqw;line-height:1.4;color:var(--demo-muted);margin-top:3.2cqw}
.demo-free-note{margin-top:1.5cqw}
.demo-sheet-actions{display:flex;flex-direction:column;gap:2.3cqw;margin-top:4.3cqw}
.demo-sheet-actions .demo-primary,.demo-sheet-actions .demo-secondary{border:0;border-radius:50px;width:100%;min-height:11cqw;padding:2.5cqw 2cqw;font-size:3.85cqw;font-weight:600;line-height:1.25;gap:0}
.demo-sheet-actions .demo-secondary{background:#2a2e47}
.demo-sheet-actions .demo-secondary:hover{text-decoration:none;background:#333851}
.demo-sheet-actions .demo-primary:hover{transform:none}
.demo-writing-track{height:1.35cqw;background:#2a2e47;border-radius:8px;margin-top:4.8cqw;overflow:hidden}
.demo-writing-track > span{display:block;height:100%;width:0;background:var(--demo-purple);border-radius:8px;transition:width .35s linear}
.demo-writing-progress{font-size:3.3cqw;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--demo-muted);margin-top:2.1cqw}
.demo-original-note{font-size:3.3cqw;line-height:1.5;margin-top:3.7cqw;color:var(--demo-text)}
.demo-writing .demo-sheet-note{margin-top:1.8cqw}
.demo-sheet-actions .demo-stop{color:#ff716b!important}
.demo-replacement{margin-top:4cqw;background:#2a2e47;border:0;border-radius:4cqw;padding:0 3.5cqw}
.demo-replacement > div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3.5cqw 0;font-size:3.3cqw;line-height:1.3}
.demo-replacement > div + div{border-top:1px solid #ffffff08}
.demo-replacement strong{font-size:4cqw;white-space:nowrap}
.demo-replacement > div:last-child strong{color:var(--demo-purple)}
.demo-replacement small{display:block;color:var(--demo-muted);margin-top:1cqw;font-size:2.8cqw}
.demo-simulation-note{color:var(--demo-purple);font-size:3cqw;line-height:1.4;margin-top:2.4cqw}
.demo-result-eyebrow{font-size:2.95cqw;font-weight:700;line-height:1.2;letter-spacing:.035em;color:var(--demo-muted);margin-bottom:1.8cqw}
.demo-done .demo-sheet h2{font-size:7.3cqw;letter-spacing:-.025em;line-height:1.15}
.demo-result-change{font-size:3.75cqw;line-height:1.4;margin-top:1.7cqw;color:var(--demo-muted)}
.demo-storage-result{margin-top:4cqw;border-radius:4cqw;background:#2a2e47;overflow:hidden}
.demo-storage-result > div{display:grid;grid-template-columns:21cqw minmax(0,1fr);gap:1.5cqw;padding:2.7cqw 3.5cqw;font-size:3.4cqw;line-height:1.4}
.demo-storage-result > div + div{border-top:1px solid #ffffff08}
.demo-storage-result strong{font-weight:600}
.demo-storage-result p{font-size:inherit;line-height:inherit;color:var(--demo-muted)}
.demo-sheet-actions .demo-photos-button{font-size:3.45cqw}
.demo-photos-directions{margin:4.4cqw 0 0;padding-left:4cqw;display:grid;gap:3cqw;font-size:3.5cqw;line-height:1.5}
@keyframes demo-sheet-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* iOS's own delete alert, measured from a screenshot of the app, over the screen that asked for it. */
.demo-panel.demo-delete-confirm{position:absolute;inset:0;z-index:5;min-height:0;padding:0;align-items:center;justify-content:center;background:#0000008c;animation:demo-alert-dim .2s ease-out}
.demo-alert{display:flex;flex-direction:column;width:72.5cqw;padding:5.2cqw 3.5cqw 3.6cqw;border:1px solid #ffffff1f;border-radius:6.8cqw;background:#2c2c2ed6;backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 8cqw 16cqw -4cqw #000a;animation:demo-alert-enter .24s ease-out}
.demo-panel.demo-delete-confirm h2{margin:0 3cqw;font-size:4cqw;line-height:5cqw;font-weight:600;letter-spacing:-.015em;color:#fff;text-wrap:pretty}
.demo-alert-message{margin:1.2cqw 3cqw 0;font-size:3.5cqw;line-height:4.55cqw;letter-spacing:-.015em;color:#ffffff8c;white-space:pre-line}
.demo-alert-photo{position:relative;flex-shrink:0;width:100%;aspect-ratio:1.41;margin-top:3.5cqw;border-radius:3.3cqw;overflow:hidden;background-size:contain;background-color:#000}
.demo-alert-actions{display:flex;gap:1.85cqw;margin-top:5.4cqw}
.demo-alert-actions button{flex:1;min-width:0;min-height:10.9cqw;padding:1cqw;border:0;border-radius:50px;background:#ffffff26;color:#fff;font-size:4cqw;font-weight:500;line-height:1.2}
.demo-alert-actions button:hover{filter:brightness(1.12)}
.demo-alert-actions .demo-alert-delete{background:#1a9fff;font-weight:600}
@keyframes demo-alert-dim{from{background:#0000}to{background:#0000008c}}
@keyframes demo-alert-enter{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.demo-home-indicator{height:4px;flex-shrink:0;width:104px;margin:7px auto 8px;border-radius:5px;background:#f0f1f7}
.demo-steps{list-style:none;padding:0;margin:21px auto 0;display:flex;align-items:center;justify-content:center;gap:18px;max-width:342px}
.demo-steps li{display:flex;align-items:center;gap:6px;font-size:12px;color:#8d8396;line-height:1.4;transition:color .2s}
.demo-steps li > span{font-size:11px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #493f54;border-radius:50%;font-variant-numeric:tabular-nums}
.demo-steps li[data-active="true"]{color:var(--paper)}
.demo-steps li[data-active="true"] > span{background:var(--lavender);border-color:var(--lavender);color:var(--ink)}
.hero-demo figcaption{font-size:12px;color:#93899d;text-align:center;margin-top:12px;line-height:1.6}
.demo-no-script{font-size:13px;text-align:center;color:var(--muted);margin-top:7px}
@keyframes demo-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:801px){.hero:has(.hero-demo){padding-top:28px;padding-bottom:29px}.hero-demo{transform:translateX(14px)}}
@media(max-width:1100px) and (min-width:801px){.hero-demo{transform:none}.demo-phone{width:min(325px,100%)}}
@media(max-width:800px){.hero:has(.hero-demo){gap:31px}.hero-demo{width:min(360px,100%)}.demo-invitation{margin-bottom:16px}.demo-phone{width:min(342px,calc(100% - 6px))}.demo-steps{margin-top:20px}}
@media(max-width:374px){.demo-phone{border-radius:41px;padding:6px}.demo-screen{border-radius:34px}.demo-panel{padding-inline:11px}.demo-panel h2{font-size:23px}.demo-native-toolbar{margin-bottom:7px}.demo-native-overview{font-size:10px;margin-top:9px}.demo-native-row{grid-template-columns:12px 31px minmax(0,1fr);gap:7px;padding-inline:7px}.demo-native-thumb{width:31px;height:31px}.demo-native-size{font-size:12px}.demo-native-kind,.demo-native-date{font-size:8.5px}.demo-map-size{font-size:8px;left:4px}.demo-steps{gap:15px}.demo-statusbar{padding-inline:20px}.demo-status-icons > svg{width:30px}.demo-island{width:78px}}
@media(max-width:374px){.demo-sheet-stage{padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.demo-panel,.demo-sheet,.demo-panel.demo-delete-confirm,.demo-alert{animation:none}.demo-map-tile,.demo-primary,.demo-writing-track > span,.demo-quality-option,.demo-steps li{transition:none}}