/* Design philosophy comes before the gestures it explains. */
#design { padding-top:65px;padding-bottom:60px; }
.design-intro { max-width:850px;margin-top:50px; }
.design-intro h2 { font-size:clamp(30px,3.6vw,48px);line-height:1.4;margin:20px 0 25px; }
.design-intro>p:last-child { max-width:710px;line-height:2;color:var(--muted);font-size:15px; }
.design-card-label { display:block;margin-top:20px;font:9px monospace;letter-spacing:.1em;color:#8f759f; }
#design .principles-grid { margin-top:46px; }
#design .principles-grid h3 { margin-top:16px; }
.design-closing { margin-top:35px;padding-top:22px;border-top:1px solid #c2a6fa20;font-size:15px;color:#c5afd8; }
/* Shorter scroll runways and less empty caption space, with a larger native demonstration. */
.scroll-story { margin-top:40px; }
.story-pin { min-height:0;padding-block:12px;gap:45px; }
.story-visual { max-width:510px; }
.story-caption { min-height:0;margin-top:24px;padding-top:18px; }
.story-steps { margin-top:12px; }
.story-scroll-hint { margin-top:12px; }
.story-caption h4 { font-size:21px; }
.story-step-body { font-size:14px; }
.duplicate-cache { opacity:.65;translate:0 0; }
/* The farewell history is a full interactive chart beside the retained-memory atlas. */
.farewell-section { padding-top:50px;padding-bottom:40px; }
.farewell-layout { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:85px;align-items:center;margin-top:45px; }
.farewell-copy h2 { font-size:clamp(31px,3.2vw,43px);line-height:1.45;letter-spacing:-.04em;margin:22px 0 27px; }
.farewell-copy>p:not(.atlas-component-note) { font-size:15px;color:var(--muted);line-height:2; }
.history-panel { margin-left:auto; }
.history-panel .farewell-native-heading strong { font-size:24px; }.history-panel .farewell-native-heading b { font-size:29px; }
.history-panel .farewell-native-note { font-size:11px;line-height:1.8;margin:15px 0; }
.history-panel .farewell-totals { padding:14px; }.history-panel .farewell-totals strong { font-size:20px; }.history-panel .farewell-totals small { font-size:11px; }
.history-basis { display:flex;gap:4px;background:#100b1c;border:1px solid #c2a6fa22;border-radius:12px;padding:4px;margin-top:20px; }
.history-basis button { flex:1;min-height:42px;font-size:12px;color:#a89ab6;border-radius:8px; }
.history-basis button[aria-pressed=true] { background:#c2a6fa25;color:#edddff; }
.history-panel .farewell-basis-note { font-size:11px;line-height:1.8;min-height:20px;margin:12px 0; }
.history-recorded { display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;color:#a795b7;margin-top:20px; }
.history-recorded>strong { font-size:25px;font-weight:450;color:#d6bef1;font-variant-numeric:tabular-nums; }
.history-media-counts { display:flex;gap:22px;font-size:11px;color:#a795b7;margin-top:9px; }.history-media-counts b { font-weight:500;color:#d6c0e7; }
.history-panel .atlas-period { margin-top:14px; }.history-panel .atlas-period button { min-height:40px; }
.history-panel .farewell-coverage { margin-top:18px;padding:12px;border:1px solid #c2a6fa16;background:#c2a6fa06; }
.history-panel .farewell-coverage p { font-size:11px;line-height:1.8; }.history-panel .farewell-coverage svg { flex:none;width:15px;height:15px; }
.history-panel .demo-data-note { font-size:10px;line-height:1.9; }
.history-panel .chart-legend button { display:flex;align-items:center;gap:5px;min-height:36px;font-size:10px;text-align:left;color:#a994bc; }
.history-panel .chart-legend button i { display:inline-block;width:6px;height:6px;border-radius:50%;flex:none; }.history-panel .chart-legend button b { font-weight:450;color:#cfb7e7; }
#farewell-chart { outline-offset:5px;border-radius:6px; }
/* Single-photo chrome follows the current App: metadata, tool capsule, badges, pill and filmstrip. */
.demo-single-chrome { position:absolute;left:8px;right:8px;top:51px;display:flex;justify-content:space-between;gap:5px;align-items:flex-start;opacity:0;pointer-events:none;z-index:6;transition:opacity .3s; }
.demo-metadata { background:#36283eaa;border:1px solid #c2a6fa18;border-radius:8px;padding:7px 5px;min-width:0;color:#eee7f4;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.demo-metadata strong { display:block;font-size:6.8px;font-weight:500;white-space:nowrap; }.demo-metadata small { display:block;font-size:6.5px;white-space:nowrap;margin-top:3px;color:#bbaaC8; }
.demo-single-tools { display:flex;align-items:center;gap:3px;flex:none;padding:5px 4px;border:1px solid #ffffff22;border-radius:22px;background:#291f3bf0; }.demo-single-tools>span { display:grid;place-items:center;width:17px;height:22px;color:#c2a6fa; }.demo-single-tools svg { width:13px;height:13px; }.demo-single-tools>i { width:1px;height:16px;background:#c2a6fa33;margin-inline:1px; }
.demo-single-footer { position:absolute;left:13px;right:13px;bottom:81px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:7px;opacity:0;transition:opacity .3s;z-index:5; }
.demo-single-footer>span:first-child { display:flex;gap:4px;align-items:center;color:#c2a6fa; }.demo-single-footer i svg { width:9px;height:9px; }.demo-footer-pill { background:#36283ec9;border:1px solid #c2a6fa20;border-radius:20px;padding:6px 8px;font-size:6px; }
.demo-filmstrip { display:flex;justify-content:center;align-items:center;gap:3px;position:absolute;left:10px;right:10px;bottom:29px;height:36px;opacity:0;transition:opacity .3s; }
.demo-filmstrip>span { width:21px;height:27px;border-radius:2px;overflow:hidden; }.demo-filmstrip>span.active { height:35px;border:1px solid #c2a6fa; }.demo-filmstrip img { width:100%;height:100%;object-fit:cover; }
.demo-phone[data-phase="1"] .demo-single-chrome,.demo-phone[data-phase="2"] .demo-single-chrome,.demo-phone[data-phase="1"] .demo-single-footer,.demo-phone[data-phase="2"] .demo-single-footer,.demo-phone[data-phase="1"] .demo-filmstrip,.demo-phone[data-phase="2"] .demo-filmstrip { opacity:1; }
.demo-phone:not([data-phase="0"]) .app-top,.demo-phone:not([data-phase="0"]) .demo-app-navigation { opacity:0; }
.demo-phone .demo-focus-date { display:none; }
.demo-phone:not([data-phase="0"]) .scroll-demo-gallery { top:108px;bottom:74px;-webkit-mask-image:none;mask-image:none; }
.demo-phone:not([data-phase="0"]) .scroll-demo-photo img { object-fit:contain; }.demo-phone:not([data-phase="0"]) .scroll-demo-photo { background:#140e21; }
/* Keep the directory at the screen edge, with a quiet track instead of a floating panel. */
.section-rail { display:none;position:fixed;z-index:70;left:14px;top:calc(50% + 24px);transform:translateY(-50%);width:132px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s; }
.section-rail.is-visible { opacity:1;visibility:visible;pointer-events:auto; }
.rail-panel { padding:4px;background:none;border:0;box-shadow:none; }
.rail-panel header { display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:5px; }.rail-panel header>span { font-size:10px;letter-spacing:.02em;color:#93809f; }.rail-panel header button { width:28px;height:32px;display:grid;place-items:center;color:#897198;flex:none; }.rail-panel header svg { width:13px;height:13px; }
.rail-panel nav { display:flex;flex-direction:column;gap:1px;border-left:1px solid #c2a6fa12;max-height:calc(100dvh - 220px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b69bcc33 transparent; }.rail-panel nav[hidden] { display:none; }
.rail-panel a { position:relative;display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 6px;color:#94819f;font-size:12px;line-height:1.35;transition:color .2s; }.rail-panel a small { font:9px monospace;color:#776483;flex:0 0 12px; }.rail-panel a[aria-current] { color:#d6baf0;font-size:14px;font-weight:550; }.rail-panel a[aria-current]::before { content:"";position:absolute;width:2px;height:18px;left:-1px;border-radius:2px;background:#b69bcc88; }.rail-panel a[aria-current] small { color:#c2a6da; }.rail-panel a:hover,.rail-panel a:focus-visible { color:#f0dfff;background:#c2a6fa08; }.section-rail:focus-within .rail-panel header>span,.section-rail:hover .rail-panel header>span { color:#b49bc6; }
.rail-progress { display:block;height:1px;background:#c2a6fa0a;margin:10px 4px 3px;overflow:hidden; }.rail-progress i { display:block;height:100%;background:#c2a6fa55;transform:scaleX(var(--rail-progress,0));transform-origin:left; }
.section-rail.is-collapsed { width:36px; }.is-collapsed .rail-panel { padding:2px; }.is-collapsed .rail-panel header { margin:0; }.is-collapsed header>span,.is-collapsed .rail-progress { display:none; }.is-collapsed header button { width:32px;height:32px; }.is-collapsed header svg { rotate:180deg; }
@media(min-width:1640px) { .section-rail { display:block; } }
@media(max-width:1000px) { .farewell-layout { gap:35px;grid-template-columns:1fr 1fr; }.farewell-copy h2 { font-size:32px; }.story-pin { gap:30px; } }
@media(max-width:850px) { .farewell-layout { grid-template-columns:1fr;gap:30px; }.farewell-copy { max-width:680px; }.history-panel { max-width:650px;margin:0 auto; }.design-intro>p:last-child { font-size:14px; } }
@media(max-width:760px) { .story-pin { gap:16px; }.story-caption { margin-top:14px;padding-top:12px; }.story-caption h4 { font-size:17px; }.story-step-body { font-size:12px; }.story-steps { margin-top:7px; }.story-scroll-hint { margin-top:8px; }.farewell-copy h2 { font-size:30px; }.farewell-section { padding-top:30px; }.farewell-layout { margin-top:25px; }#design { padding-top:35px;padding-bottom:30px; }.design-intro { margin-top:30px; }.design-intro h2 { font-size:30px; }.design-card-label { margin-top:15px; } }
@media(max-width:380px) { .farewell-copy h2 { font-size:27px; }.history-basis button { font-size:11px; }.history-recorded { font-size:11px; }.history-panel .farewell-native-heading strong { font-size:22px; }.story-caption h4 { font-size:16px; }.story-step-body { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .section-rail,.demo-single-chrome,.demo-single-footer,.demo-filmstrip { transition:none; }.scroll-story { height:auto!important; }.story-pin { min-height:0; } }
@media(min-width:851px) { .farewell-layout { align-items:start; }.farewell-copy { position:sticky;top:115px; }.atlas-copy { align-self:start;position:sticky;top:115px; }.atlas-layout { align-items:start; } }
@media(max-width:380px) { .native-stat>strong { font-size:24px; }.production-stats .stat-readout { font-size:29px; }.native-storage-overview b { font-size:14px; } }
.demo-footer-pill.pending { background:#c2a6fa;color:#140e21;border-color:transparent; }

/* Single-photo quick menu stays within the media area; the chrome never moves. */
.demo-quick-layer { position:absolute;inset:108px 0 108px;z-index:8;pointer-events:none; }
.demo-quick-menu { position:absolute;left:42px;top:76px;width:174px;padding:3px 0;border:1px solid #d8c1f32b;border-radius:12px;background:#292033f2;box-shadow:0 10px 28px #0005;opacity:0;transform:translateY(5px) scale(.97);transform-origin:60% 0;transition:opacity .2s,transform .2s; }
.demo-quick-menu>div { height:27px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#dfccee;font-size:8px; }
.demo-quick-menu>div>svg { width:12px;height:12px;flex:none; }.demo-quick-menu>div>span { flex:1; }.demo-quick-menu>div>svg:last-child:not(:first-child) { opacity:0; }
.demo-quick-menu>small { display:block;border-top:1px solid #c2a6fa20;margin-top:3px;padding:7px 10px 4px;color:#9784a8;font-size:6.5px; }
.menu-visible .demo-quick-menu { opacity:1;transform:none; }
.demo-hold-point { position:absolute;left:148px;top:58px;width:16px;height:16px;border:1px solid #e6d5f3a0;box-shadow:0 0 0 4px #c2a6fa0c;border-radius:50%;opacity:0;transition:opacity .2s; }
.demo-phone[data-action="open"] .demo-hold-point,.demo-phone[data-action="reopen"] .demo-hold-point { opacity:1; }
.demo-phone[data-action="favorite"] [data-demo-action="favorite"],.demo-phone[data-action="archive"] [data-demo-album="main"] { background:#c2a6fa24;color:#f4e8ff; }
.demo-phone[data-liked="true"] [data-demo-action="favorite"]>svg { fill:#c2a6fa; }
.demo-phone[data-action="archive"] [data-demo-album="main"]>svg:last-child { opacity:1; }
.demo-quick-feedback { position:absolute;top:170px;left:30px;right:30px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c2a6fa30;border-radius:20px;background:#2b203ae8;padding:9px;color:#eedaff;font-size:8px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s; }
.demo-quick-feedback>svg { width:12px;height:12px; }.saved .demo-quick-feedback:not(.demo-like-feedback),.demo-phone[data-action="liked"] .demo-like-feedback { opacity:1;transform:none; }
.demo-single-footer [data-experience-icon="heart"],.demo-single-footer [data-experience-icon="album"]+span,.demo-single-footer [data-experience-icon="album"] { opacity:0;transition:opacity .2s; }
.demo-single-footer.liked [data-experience-icon="heart"] { opacity:1; }.demo-single-footer.liked [data-experience-icon="heart"] svg { fill:#c2a6fa; }.demo-single-footer.archived [data-experience-icon="album"],.demo-single-footer.archived [data-experience-icon="album"]+span { opacity:1; }
@media(prefers-reduced-motion:reduce) { .demo-quick-menu,.demo-quick-feedback,.demo-hold-point,.rail-panel a { transition:none; } }

.demo-phone:not([data-phase="0"]) .scroll-demo-photo>span { opacity:0; }

/* Center the two desktop stories in the space below the fixed header. */
@media (min-width:761px) and (prefers-reduced-motion:no-preference) {
  .scroll-story .story-pin { min-height:calc(100svh - 119px); }
}