/* Four unboxed product stories with self-contained HTML interface demonstrations. */
#features { padding-block: 88px; }
.feature-intro-copy { min-width: 0; }
.feature-demo-note { margin-top: 12px; color: var(--text-muted); font-size: .8125rem; line-height: 1.6; }
.feature-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; column-gap: clamp(36px, 6vw, 88px); padding-block: 56px; border-top: 1px solid #d8e0e9; }
.feature-story:last-child { padding-bottom: 0; }
.feature-story:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.feature-story:nth-child(even) .feature-story-copy { grid-column: 2; grid-row: 1; }
.feature-story:nth-child(even) .feature-demo { grid-column: 1; grid-row: 1; }
.feature-story-copy { min-width: 0; }
.feature-story-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.feature-story-heading > svg { width: 26px; height: 26px; fill: none; stroke: #2563eb; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.feature-story-heading h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); letter-spacing: -.03em; }
.feature-pro { align-self: center; border: 1px solid #bdd1f7; border-radius: 5px; padding: 2px 6px; font-size: 11px; line-height: 1.5; color: #1d4ed8; }
.feature-story-desc { max-width: 47ch; color: #475569; font-size: 16px; line-height: 1.85; }
.feature-story-points { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.feature-story-points li { display: flex; align-items: start; gap: 10px; font-size: 14px; line-height: 1.7; color: #344154; }
.feature-story-points svg { margin-top: 4px; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #2563eb; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-demo { position: relative; min-width: 0; height: 370px; border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: 0 15px 36px -14px rgb(32 48 72 / .2), 0 1px 4px rgb(32 48 72 / .08); color: #263244; container-type: inline-size; isolation: isolate; }
.feature-demo [hidden] { display: none !important; }
.feature-demo svg { display: inline-block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.feature-demo button { font-family: inherit; line-height: inherit; }
.feature-demo button:active { transform: none; }
.feature-demo button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.feature-demo ::selection { background: #c9e1ff; color: #182230; }
.fd-topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; height: 47px; padding: 9px 16px; background: #f3f5f8; border-bottom: 1px solid #e1e6ee; font-size: 12px; white-space: nowrap; }
.fd-topbar > img { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.fd-topbar > strong { font-weight: 600; }
.fd-topbar > span:last-child { color: #526176; font-size: 11px; }
.fd-chrome-fill { flex: 1; min-width: 0; }
.fd-body { position: relative; height: calc(100% - 83px); overflow: hidden; }
.fd-status { display: flex; align-items: center; height: 36px; padding: 8px 16px; font-size: 11px; line-height: 1.5; color: #526176; background: #f8fafc; border-top: 1px solid #e1e6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-cursor { position: absolute; z-index: 12; top: 0; left: 0; width: 24px; height: 30px; pointer-events: none; transform: translate(30px, 300px); transition: transform 360ms cubic-bezier(.22,.65,.3,1), opacity 120ms; filter: drop-shadow(0 2px 1px rgb(17 24 39 / .2)); }
.fd-cursor > svg { width: 24px; height: 30px; fill: #253042; stroke: white; stroke-width: 1.5; }
.feature-demo.is-interacting .fd-cursor, .feature-demo:not(.is-running) .fd-cursor { opacity: 0; }
.fd-cursor.is-clicking::after { content: ''; position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border: 2px solid #2563eb; border-radius: 50%; animation: fd-click 300ms ease-out both; }
.fd-wiki { display: flex; gap: 7px; align-items: center; font: 23px/1 Georgia, serif; margin-bottom: 13px; }
.fd-wiki span { font: 13px/1.2 Georgia, serif; text-transform: uppercase; letter-spacing: .02em; }
.fd-note h4, .fd-long-document h4, .fd-pdf-paper h4, .fd-pdf-snapshot h4 { font: 26px/1.2 Georgia, serif; letter-spacing: 0; border-bottom: 1px solid #bec7d3; padding-bottom: 7px; margin-bottom: 11px; }
.fd-hotspot { cursor: pointer; }
.fd-word { color: #2457b2; font: inherit; padding: 1px 2px; border: 0; border-radius: 2px; background: #e3f0ff; box-shadow: inset 0 0 0 1px #afd1fb; }
.fd-link-button { display: inline-flex; align-items: center; gap: 14px; margin-top: 13px; padding: 7px 12px; border: 1px solid #79a7f1; border-radius: 5px; background: #edf4ff; color: #1d4ed8; font-size: 12px; }
.fd-link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 13px; border: 1px solid #a9c8f7; border-radius: 5px; background: #f5f9ff; width: 100%; text-align: left; color: #263244; }
.fd-link-card small { display: block; color: #526176; font-size: 10px; margin-bottom: 2px; }
.fd-link-card strong { display: block; font-size: 12px; font-weight: 550; }
.fd-hotspot.is-hovered { outline: 2px solid #2563eb; outline-offset: 1px; background-color: #dbeaff; }
.fd-url-preview { position: absolute; z-index: 8; width: 350px; max-width: calc(100% - 20px); padding: 12px 14px; border: 1px solid #c7c7c7; border-radius: 12px; background: #f2f2f2; box-shadow: 0 7px 20px rgb(25 40 63 / .12); pointer-events: none; animation: fd-preview 150ms ease-out; }
.fd-url-preview strong { display: block; font-size: 13px; }
.fd-url-preview > span { display: block; margin-top: 5px; font-size: 12px; color: #1454da; }
.fd-preview-bottom { display: flex; align-items: center; gap: 9px; min-width: 0; margin-top: 8px; }
.fd-copy-preview { flex: 0 0 auto; border: 1px solid #bfbfbf; border-radius: 6px; padding: 5px 8px; color: #303030; background: #e4e4e4; font-size: 11px; }
.fd-url-preview small { min-width: 0; font-size: 11px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #606060; }
.feature-demo.is-interacting .fd-url-preview { animation: none; opacity: 1; }
/* Saved screenshot viewer, reconstructed from the supplied light-theme reference. */
.fd-links[data-hotspots="true"] .fd-hotspot, .fd-capture-hotspot { background-image: linear-gradient(90deg, rgb(56 156 224 / .17), transparent 24%, transparent 76%, rgb(56 156 224 / .17)), linear-gradient(180deg, rgb(56 156 224 / .17), transparent 24%, transparent 76%, rgb(56 156 224 / .17)); }
.fd-browser-tabs { display: flex; align-items: end; gap: 4px; height: 38px; padding: 6px 8px 0; background: #e4e8ee; border-bottom: 1px solid #cdd4df; }
.fd-browser-tab { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 44%; height: 31px; padding: 7px 10px; border-radius: 7px 7px 0 0; color: #536074; font-size: 11px; }
.fd-browser-tab.is-active { background: white; color: #263244; flex: 1; box-shadow: 0 -2px 5px rgb(32 48 72 / .05); }
.fd-browser-tab strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.fd-browser-tab > span:last-child { margin-left: auto; }
.fd-tab-plus { padding: 6px; font-size: 17px; }
.fd-opened { position: absolute; z-index: 9; inset: 0; background: #fff; }
.fd-address { padding: 8px 16px; border-bottom: 1px solid #e1e6ee; background: #f3f5f8; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-opened article { padding: 19px 24px; }
.fd-opened-note { display: flex; align-items: center; gap: 6px; color: #047857; font-size: 11px; margin-bottom: 14px; }
.fd-opened h4 { font: 28px/1.2 Georgia, serif; letter-spacing: 0; margin-bottom: 14px; }
.fd-opened article > p:last-of-type { font-size: 13px; line-height: 1.8; }
.fd-back { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; border: 0; padding: 5px 0; background: transparent; color: #1d4ed8; font-size: 12px; }
.fd-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 5px; padding: 7px 10px; background: #2563eb; color: #fff; font-size: 11px; white-space: nowrap; }
.fd-action:hover, .fd-action.is-target { background: #1d4ed8; }
.fd-action-secondary { border: 1px solid #b7c3d3; color: #344154; background: #fff; }
.fd-action-secondary:hover, .fd-action-secondary.is-target { color: #1d4ed8; background: #edf4ff; border-color: #8bb1ef; }
.fd-action svg { width: 14px; height: 14px; }
.fd-capture { height: 500px; }
.fd-capture-chrome { position: relative; z-index: 3; height: 77px; background: #e4e8ee; }
.fd-capture-chrome .fd-browser-tab { max-width: 240px; }
.fd-tab-wiki { font: 17px/1 Georgia,serif; }
.fd-capture-toolbar { display: flex; align-items: center; gap: 9px; height: 39px; padding: 5px 12px; background: #fff; border-bottom: 1px solid #dce2ea; }
.fd-capture-navigation { display: flex; align-items: center; gap: 8px; color: #607086; }
.fd-capture-navigation svg { width: 14px; height: 14px; }
.fd-capture-address { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 27px; padding: 5px 9px; border-radius: 5px; background: #f1f4f8; color: #4b5a6f; font-size: 11px; }
.fd-capture-address svg { width: 12px; height: 12px; }
.fd-capture-address > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-extension { display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0; padding: 3px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.fd-extension img { width: 22px; height: 22px; }
.fd-extension:hover, .fd-extension[aria-expanded="true"] { background: #e8efff; }
.fd-capture-popup { position: absolute; z-index: 7; top: 72px; right: 13px; width: 340px; max-width: calc(100% - 20px); padding: 16px; border-radius: 11px; background: #fff; box-shadow: 0 12px 32px rgb(20 32 51 / .24); transform: scale(.8625); transform-origin: top right; animation: fd-preview 150ms ease-out; }
.fd-capture-popup-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.fd-capture-popup-brand .fd-capture-brand-icon { width: 38px; height: 38px; }
.fd-capture-popup-brand .fd-capture-brand-wordmark { display: block; width: 138px; height: auto; }
.fd-capture-popup-brand small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: #596773; }
.fd-capture-menu { display: grid; gap: 4px; }
.fd-capture-menu-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 55px; padding: 8px 7px; border: 0; border-radius: 6px; text-align: left; background: transparent; color: #171a20; }
button.fd-capture-menu-row { cursor: pointer; }
.fd-capture-menu > button:hover, .fd-capture-menu > button.is-target { background: #dcdfe3; }
.fd-capture-menu-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; color: #303841; }
.fd-capture-menu-icon svg { width: 19px; height: 19px; stroke-width: 1.9; }
.fd-capture-menu-copy { flex: 1; min-width: 0; }
.fd-capture-menu strong { display: block; font-size: 14px; font-weight: 650; line-height: 1.4; }
.fd-capture-menu small { display: block; margin-top: 3px; color: #596773; font-size: 11px; line-height: 1.5; }
.fd-capture-shortcut { flex-shrink: 0; align-self: center; border: 1px solid #bfc3c8; border-bottom-width: 2px; border-radius: 6px; padding: 3px 5px; color: #596773; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.fd-capture:lang(en) .fd-capture-menu strong { font-size: 13px; }
.fd-capture:lang(en) .fd-capture-menu small { font-size: 10px; }
.fd-capture .fd-body { height: calc(100% - 113px); }
.fd-capture-source { position: absolute; inset: 0; overflow: hidden; }
.fd-long-document { padding: 20px 25px; width: 100%; font-family: 'Segoe UI', sans-serif; background: #fff; }
.fd-long-document p { font-size: 13px; line-height: 1.8; margin-bottom: 13px; }
.fd-long-document .fd-document-end { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid #c5ceda; font-size: 11px; color: #526176; }
.fd-long-document h5, .fd-pdf-paper h5 { margin: 19px 0 10px; font: 20px/1.3 Georgia, serif; letter-spacing: 0; border-bottom: 1px solid #c5ceda; padding-bottom: 5px; }
.fd-mini-link { color: #2457b2; background: #dceeff; border-radius: 2px; }
.fd-capture .fd-mini-link { background: transparent; border-radius: 0; }
.fd-region-selection { position: absolute; z-index: 2; left: 12%; top: 20%; width: 76%; height: 52%; border: 1px solid #2563eb; box-shadow: 0 0 0 500px rgb(24 34 48 / .13); pointer-events: none; transition: height 360ms cubic-bezier(.22,.65,.3,1); }
.fd-region-selection::before, .fd-region-selection::after { content: ''; position: absolute; width: 6px; height: 6px; border: 1px solid #2563eb; background: white; }
.fd-region-selection::before { top: -3px; left: -3px; }
.fd-region-selection::after { bottom: -3px; right: -3px; }
.fd-region-start, .fd-region-end { position: absolute; width: 6px; height: 6px; border: 1px solid #2563eb; background: white; }
.fd-region-start { top: -3px; right: -3px; }
.fd-region-end { bottom: -3px; left: -3px; }
.fd-capture[data-capture-step="1"] .fd-region-selection { animation: fd-drag-selection 360ms cubic-bezier(.22,.65,.3,1) both; }
.fd-capture:is([data-capture-step="2"], [data-capture-step="3"], [data-capture-step="4"]) .fd-region-selection { height: 74%; }
.fd-capture[data-capture-step="3"] .fd-capture-source > .fd-long-document { animation: fd-region-scroll-first 1200ms cubic-bezier(.22,.65,.3,1) both; }
.fd-capture[data-capture-step="4"] .fd-capture-source > .fd-long-document { animation: fd-region-scroll-more 950ms cubic-bezier(.22,.65,.3,1) both; }
.fd-capture[data-capture-step="10"] .fd-capture-source > .fd-long-document { animation: fd-page-scroll 2500ms cubic-bezier(.22,.65,.3,1) both; }
.fd-region-scroll-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); border-radius: 4px; padding: 4px 7px; background: #2563eb; color: white; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.fd-cursor.is-dragging::before { content: ''; position: absolute; width: 6px; height: 6px; left: 18px; top: 19px; border-radius: 50%; background: #2563eb; border: 1px solid white; }
.fd-capture-flash { position: absolute; inset: 0; background: white; pointer-events: none; animation: fd-shutter 180ms ease-out both; }
.fd-capture-result { position: absolute; inset: 0; padding: 14px; display: grid; place-items: center; background: #edf1f6; }
.fd-shot-output { position: relative; box-shadow: 0 4px 14px rgb(25 40 63 / .16); }
.fd-shot-crop { position: absolute; inset: 0 auto auto 0; overflow: hidden; transform-origin: top left; background: #fff; }
.fd-shot-crop > .fd-long-document { position: absolute; top: 0; left: 0; }
.fd-capture-hotspot { position: absolute; z-index: 1; padding: 0; border: 0; border-radius: 2px; background-color: transparent; cursor: pointer; }
.fd-capture-hotspot.is-hovered { z-index: 2; outline: 1px solid #2563eb; outline-offset: 1px; }
.fd-pdf-source { height: 100%; display: grid; place-items: center; background: #edf1f6; padding: 18px 30px; }
.fd-pdf-snapshot { width: min(100%, 390px); padding: 17px 22px; background: white; box-shadow: 0 5px 17px rgb(25 40 63 / .13); font-family: 'Segoe UI', sans-serif; }
.fd-pdf-snapshot p { font-size: 13px; line-height: 1.8; margin-top: 10px; }
.fd-pdf-snapshot .fd-pdf-footnote { color: #526176; font-size: 10px; border-top: 1px solid #e1e6ee; padding-top: 7px; }
.fd-exporting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; background: #f4f7fb; }
.fd-exporting > svg { width: 40px; height: 40px; color: #2563eb; stroke-width: 1.3; }
.fd-exporting > strong { font-size: 13px; font-weight: 550; }
.fd-progress { width: 180px; height: 4px; border-radius: 3px; overflow: hidden; background: #d9e3f1; }
.fd-progress i { display: block; width: 100%; height: 100%; background: #2563eb; transform-origin: left; animation: fd-progress 900ms ease-out both; }
.fd-pdf-reader { position: absolute; inset: 0; background: #e9edf3; }
.fd-reader-tools { height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 17px; background: #dce3ed; font-size: 11px; color: #3c4b61; }
.fd-pdf-pages { height: calc(100% - 59px); overflow: hidden; padding: 15px 20px; }
.fd-pdf-paper { position: relative; width: min(100%, 370px); min-height: 290px; padding: 19px 24px; margin: 0 auto 14px; background: white; box-shadow: 0 2px 9px rgb(25 40 63 / .12); font-family: 'Segoe UI', sans-serif; }
.fd-pdf-paper p { font-size: 12px; line-height: 1.8; margin-top: 9px; }
.fd-pdf-paper h4 { font-size: 24px; }
.fd-pdf-paper h5 { font-size: 17px; }
.fd-pdf-paper > small { position: absolute; bottom: 10px; left: 50%; font-size: 10px; color: #64748b; }
.fd-pdf-link { font: inherit; padding: 0; border: 0; color: #2457b2; background: transparent; text-decoration: underline; text-underline-offset: 2px; }
.fd-reader-url { position: absolute; bottom: 0; left: 0; max-width: 100%; padding: 4px 9px; background: #fff; color: #344154; font-size: 10px; overflow-wrap: anywhere; box-shadow: 0 -1px 3px rgb(25 40 63 / .06); }
.fd-backup-toolbar { height: 50px; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid #e1e6ee; }
.fd-backup-toolbar > strong { font-size: 12px; font-weight: 550; white-space: nowrap; }
.fd-backup-toolbar > div { display: flex; gap: 7px; }
.fd-backup .fd-body { height: calc(100% - 133px); background: #f3f5f8; }
.fd-library { padding: 16px; }
.fd-folder-line { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 12px; color: #42526a; }
.fd-folder-line > span:last-child { margin-left: auto; }
.fd-library-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fd-library-tile { position: relative; padding: 5px 5px 9px; background: #fff; border: 1px solid #dce2ea; border-radius: 5px; min-width: 0; }
.fd-library-tile > strong { display: block; font-size: 11px; font-weight: 550; margin: 7px 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-library-tile > small { display: block; font-size: 9px; margin: 3px 3px 0; color: #5c6a7e; }
.fd-library-tile > svg { position: absolute; top: 10px; right: 8px; width: 12px; height: 12px; fill: #2563eb; color: #2563eb; }
.fd-tile-image { height: 96px; overflow: hidden; background: #f8fafc; padding: 9px 8px; font-family: Georgia, serif; color: #344154; }
.fd-tile-image > span:first-child { display: block; margin-bottom: 7px; font-size: 14px; }
.fd-tile-image strong { font-size: 12px; font-weight: 400; white-space: nowrap; }
.fd-tile-image p { font: 8px/1.7 'Segoe UI', sans-serif; margin-top: 7px; }
.fd-tile-image .fd-mini-link { font: 8px/1.6 'Segoe UI', sans-serif; }
.fd-backup[data-frame="2"] .fd-library-tile { animation: fd-package 800ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--tile-index) * 70ms); }
.fd-archive { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 27px; padding: 18px; }
.fd-archive-file { text-align: center; }
.fd-archive-file > svg { display: block; width: 52px; height: 52px; stroke-width: 1.3; color: #2563eb; margin: 0 auto 11px; }
.fd-archive-file strong { display: block; font-size: 16px; font-weight: 550; }
.fd-archive-file small { display: block; max-width: 28ch; font-size: 10px; line-height: 1.7; color: #526176; margin-top: 6px; }
.fd-archive-checks { display: grid; gap: 13px; }
.fd-archive-checks > span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #42526a; }
.fd-archive-checks svg { color: #047857; width: 14px; height: 14px; }
.fd-restore { padding: 14px 16px; }
.fd-import-file { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #1d4ed8; margin-bottom: 14px; }
.fd-import-progress { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 125px; }
.fd-import-progress strong { font-size: 12px; font-weight: 500; }
.fd-restored-library .fd-library-tile { animation: fd-restore 300ms ease-out both; animation-delay: calc(var(--tile-index) * 70ms); }
.fd-reader-filepath { height: 28px; padding: 6px 14px; font-size: 10px; color: #526176; background: #f8fafc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fd-app-folder { color: #ae7c0a; }
.fd-app-browser { color: #087c9b; }
.fd-window-controls svg { width: 52px; height: 20px; color: #64748b; }
.fd-explorer { height: 100%; background: #fff; }
.fd-explorer-path { display: flex; align-items: center; gap: 10px; height: 43px; padding: 8px 12px; border-bottom: 1px solid #e3e7ed; font-size: 12px; }
.fd-explorer-path > svg:nth-child(2) { color: #ae7c0a; }
.fd-explorer-search { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #dce2ea; border-radius: 4px; color: #526176; font-size: 10px; }
.fd-explorer-search svg { width: 13px; height: 13px; }
.fd-explorer-content { display: grid; grid-template-columns: 108px minmax(0,1fr); height: calc(100% - 68px); }
.fd-explorer-sidebar { padding: 15px 6px; background: #f7f8fa; border-right: 1px solid #e3e7ed; }
.fd-explorer-sidebar > span { display: flex; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 3px; font-size: 11px; }
.fd-explorer-sidebar .is-selected { background: #e4effc; }
.fd-explorer-files { padding: 12px 16px; }
.fd-explorer-files > p { font-size: 11px; color: #526176; padding-bottom: 7px; border-bottom: 1px solid #e3e7ed; margin-bottom: 11px; }
.fd-pdf-file { display: flex; align-items: center; flex-direction: column; gap: 5px; width: 112px; padding: 10px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #263244; cursor: default; }
.fd-pdf-file.is-selected, .fd-pdf-file:hover { border-color: #a9c8ef; background: #e9f3ff; }
.fd-pdf-file-icon { position: relative; width: 46px; height: 51px; color: #ad3434; }
.fd-pdf-file-icon svg { width: 46px; height: 51px; stroke-width: 1.2; }
.fd-pdf-file-icon b { position: absolute; left: 9px; top: 26px; padding: 2px 4px; background: #ad3434; color: white; font-size: 9px; }
.fd-pdf-file strong { font-size: 11px; font-weight: 550; }
.fd-pdf-file small { font-size: 9px; color: #526176; }
.fd-explorer-footer { height: 25px; padding: 5px 12px; border-top: 1px solid #e3e7ed; color: #526176; font-size: 10px; }
.fd-cursor.is-double-clicking::after { content: ''; position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border: 2px solid #2563eb; border-radius: 50%; animation: fd-click 240ms ease-out 2 both; }
/* The restored collection uses the supplied gallery structure, at demonstration scale. */
.fd-backup { height: 440px; }
.fd-backup[data-frame="6"] > .fd-topbar, .fd-backup[data-frame="6"] > .fd-backup-toolbar { display: none; }
.fd-backup[data-frame="6"] > .fd-body { height: calc(100% - 36px); }
.fd-backup[data-frame="6"] .fd-restore { height: 100%; padding: 0; }
.fd-backup[data-frame="6"] .fd-import-file { display: none; }
.fd-restored-library { display: grid; grid-template-columns: 112px minmax(0,1fr); height: 100%; background: #fafafa; }
.fd-gallery-sidebar { display: flex; flex-direction: column; padding: 10px 8px; border-right: 1px solid #dedede; background: #f5f5f5; min-width: 0; }
.fd-gallery-brand { display: flex; align-items: center; gap: 5px; padding: 7px 4px; margin-bottom: 16px; border: 1px solid #dedede; border-radius: 6px; }
.fd-gallery-brand strong { font-size: 14px; color: #151515; }
.fd-gallery-brand img { width: 20px; height: 20px; }
.fd-gallery-nav { display: grid; gap: 6px; }
.fd-gallery-nav > div, .fd-gallery-folder, .fd-gallery-preferences { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 7px 5px; font-size: 10px; color: #555; }
.fd-gallery-nav .is-selected { background: white; border: 1px solid #d8d8d8; border-radius: 5px; color: #262626; font-weight: 600; }
.fd-gallery-sidebar svg { width: 12px; height: 12px; }
.fd-gallery-sidebar small { margin-left: auto; padding: 1px 4px; border: 1px solid #dfdfdf; border-radius: 3px; font-size: 9px; font-weight: 400; }
.fd-gallery-folders { display: flex; justify-content: space-between; margin: 16px 5px 3px; padding-top: 14px; border-top: 1px solid #dedede; font-size: 10px; }
.fd-gallery-folder { font-size: 9px; }
.fd-gallery-preferences { margin-top: auto; border: 1px solid #dedede; border-radius: 5px; background: white; }
.fd-gallery-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fd-gallery-header { display: flex; align-items: center; gap: 7px; height: 45px; flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid #dedede; }
.fd-gallery-header strong { font-size: 13px; }
.fd-gallery-header > small { font-size: 9px; color: #636363; }
.fd-gallery-header > svg { width: 13px; height: 13px; }
.fd-gallery-theme { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 9px; color: #555; }
.fd-gallery-theme i { width: 20px; height: 12px; border-radius: 8px; padding: 2px; background: #8b8b8b; }
.fd-gallery-theme i::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: white; }
.fd-gallery-tools { flex-shrink: 0; padding: 10px 12px 8px; }
.fd-gallery-usage { display: flex; gap: 12px; font-size: 9px; color: #636363; margin-bottom: 9px; }
.fd-gallery-usage strong { color: #262626; }
.fd-gallery-search { display: flex; align-items: center; gap: 6px; height: 28px; padding: 5px 7px; border: 1px solid #dcdcdc; border-radius: 5px; font-size: 10px; color: #636363; white-space: nowrap; min-width: 0; overflow: hidden; }
.fd-gallery-search > span { overflow: hidden; text-overflow: ellipsis; }
.fd-gallery-search svg { width: 12px; height: 12px; }
.fd-gallery-options { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-size: 9px; color: #555; }
.fd-gallery-control { display: inline-flex; align-items: center; padding: 4px 6px; border: 1px solid #dedede; border-radius: 4px; white-space: nowrap; }
.fd-gallery-views { display: flex; gap: 6px; padding: 4px 5px; border: 1px solid #dedede; border-radius: 4px; }
.fd-gallery-views svg { width: 12px; height: 12px; }
.fd-gallery-size { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.fd-gallery-size i { position: relative; display: block; width: 42px; height: 4px; border-radius: 4px; background: #d5d5d5; }
.fd-gallery-size i::before { content: ''; display: block; height: 100%; width: 40%; border-radius: inherit; background: #2563eb; }
.fd-gallery-size i::after { content: ''; position: absolute; top: -3px; left: 35%; width: 10px; height: 10px; background: #2563eb; border-radius: 50%; }
.fd-gallery-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(142px,100%),1fr)); align-content: start; gap: 9px; padding: 2px 12px 12px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b1b1b1 #f4f4f4; }
.fd-gallery-card { position: relative; min-width: 0; padding: 5px 6px 7px; border: 1px solid #dcdcdc; border-radius: 6px; background: white; animation: fd-restore 300ms ease-out both; animation-delay: calc(var(--tile-index) * 70ms); }
.fd-gallery-thumbnail { height: 85px; padding: 6px 7px; overflow: hidden; background: #f8f9fb; color: #303030; font-family: Georgia,serif; }
.fd-thumbnail-heading { font-size: 13px; border-bottom: 1px solid #d9dee6; padding-bottom: 3px; }
.fd-thumbnail-heading span { font-size: 8px; }
.fd-gallery-thumbnail h5 { font-size: 10px; font-weight: 400; text-align: center; margin: 6px 0; }
.fd-thumbnail-columns { display: grid; grid-template-columns: 30px 1fr; gap: 4px; font: 5px/1.8 'Segoe UI',sans-serif; }
.fd-thumbnail-columns > span, .fd-thumbnail-columns em { color: #2457b2; font-style: normal; }
.fd-gallery-card > strong { display: block; font-size: 10px; line-height: 1.5; margin: 7px 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fd-gallery-card > small { display: block; font-size: 8px; color: #636363; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-gallery-favorite { position: absolute; right: 10px; top: 10px; color: #2563eb; }
.fd-gallery-favorite svg { width: 11px; height: 11px; fill: #2563eb; }
.fd-gallery-card-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.fd-gallery-card-actions > span { border: 1px solid #dedede; border-radius: 3px; padding: 3px 4px; font-size: 8px; color: #444; white-space: nowrap; }
.fd-gallery-card-actions .fd-gallery-delete { color: #b42318; }
.fd-gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 5px; flex-shrink: 0; min-height: 34px; padding: 5px 10px; border-top: 1px solid #dedede; font-size: 9px; color: #636363; }
.fd-gallery-footer > div { display: flex; align-items: center; gap: 5px; }
.fd-gallery-footer svg { width: 11px; height: 11px; }
.fd-gallery-page { padding: 4px 6px; border: 1px solid #2563eb; border-radius: 4px; color: #2563eb; }
.feature-demo *, .feature-demo *::after { animation-play-state: var(--fd-play-state, paused); }
.feature-demo.is-running { --fd-play-state: running; }
@keyframes fd-click { from { transform: scale(.4); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@keyframes fd-preview { from { opacity: .3; } to { opacity: 1; } }
@keyframes fd-drag-selection { from { width: 0; height: 0; } to { width: 76%; height: 52%; } }
@keyframes fd-region-scroll-first { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--fd-region-scroll-mid))); } }
@keyframes fd-region-scroll-more { from { transform: translateY(calc(-1 * var(--fd-region-scroll-mid))); } to { transform: translateY(calc(-1 * var(--fd-region-scroll-end))); } }
@keyframes fd-page-scroll {
  0%, 7% { transform: translateY(0); }
  31%, 37% { transform: translateY(calc(-.33 * var(--fd-full-scroll-end))); }
  61%, 67% { transform: translateY(calc(-.67 * var(--fd-full-scroll-end))); }
  94%, 100% { transform: translateY(calc(-1 * var(--fd-full-scroll-end))); }
}
@keyframes fd-shutter { 0% { opacity: 0; } 20% { opacity: .65; } 100% { opacity: 0; } }
@keyframes fd-progress { from { transform: scaleX(.03); } to { transform: scaleX(1); } }
@keyframes fd-package { to { opacity: 0; transform: translateX(calc((1 - var(--tile-index)) * 60px)) translateY(30px) scale(.55); } }
@keyframes fd-restore { from { opacity: .2; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  #features { padding-block: 64px; }
  .feature-story, .feature-story:nth-child(even) { grid-template-columns: 1fr; row-gap: 28px; padding-block: 38px; }
  .feature-story:nth-child(even) .feature-story-copy, .feature-story:nth-child(even) .feature-demo { grid-column: 1; grid-row: auto; }
  .feature-story-desc { max-width: 65ch; }
  .feature-story-points { margin-top: 20px; gap: 8px; }
  .feature-demo { max-width: 720px; width: 100%; }
}
@media (max-width: 640px) {
  #features { padding-block: 48px; }
  .feature-story-heading { margin-bottom: 16px; }
  .feature-story-desc { font-size: 15px; line-height: 1.8; }
  .feature-story { row-gap: 24px; }
}
@container (max-width: 400px) {
  .fd-url-preview { padding: 11px; }
  .fd-explorer-content { grid-template-columns: 86px minmax(0,1fr); }
  .fd-explorer-search > span { max-width: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fd-explorer-path { gap: 7px; }
  .fd-restored-library { grid-template-columns: 88px minmax(0,1fr); }
  .fd-gallery-sidebar { padding-inline: 5px; }
  .fd-gallery-brand { padding-inline: 3px; gap: 3px; }
  .fd-gallery-brand strong { font-size: 11px; }
  .fd-gallery-brand img { width: 16px; height: 16px; }
  .fd-gallery-nav > div { padding-inline: 3px; font-size: 9px; gap: 3px; }
  .fd-gallery-nav > div > span, .fd-gallery-folder > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fd-gallery-header { padding-inline: 8px; gap: 4px; flex-wrap: wrap; height: 56px; }
  .fd-gallery-theme { font-size: 8px; }
  .fd-gallery-tools { padding-inline: 8px; }
  .fd-gallery-cards { padding-inline: 8px; }
  .fd-gallery-size { margin-left: 0; }
  .fd-gallery-footer { flex-wrap: wrap; padding-inline: 8px; }
  .fd-link-card { margin-top: 11px; padding: 8px 10px; }
  .fd-link-button { margin-top: 11px; padding: 6px 10px; }
  .fd-topbar { padding-inline: 11px; gap: 7px; }
  .fd-topbar > span:last-child { font-size: 10px; }
  .fd-topbar .fd-action svg { display: none; }
  .fd-topbar .fd-action { font-size: 10px; padding: 6px 8px; }
  .fd-capture-toolbar { padding-inline: 9px; gap: 7px; }
  .fd-capture-navigation { gap: 6px; }
  .fd-capture-navigation svg:nth-child(2) { display: none; }
  .fd-capture-address { font-size: 10px; padding-inline: 6px; }
  .fd-capture-popup { right: 10px; padding: 13px; }
  .fd-status { padding-inline: 11px; font-size: 10px; }
  .fd-pdf-source { padding-inline: 17px; }
  .fd-pdf-snapshot { padding-inline: 17px; }
  .fd-pdf-paper { padding-inline: 18px; }
  .fd-backup-toolbar { padding-inline: 10px; gap: 5px; }
  .fd-backup-toolbar > strong { font-size: 11px; }
  .fd-backup-toolbar .fd-action { padding: 6px 7px; font-size: 10px; gap: 4px; }
  .fd-backup-toolbar .fd-action svg { display: none; }
  .fd-library, .fd-restore { padding-inline: 11px; }
  .fd-library-tiles { gap: 6px; }
  .fd-tile-image { padding-inline: 5px; }
  .fd-library-tile > small { font-size: 8px; }
  .fd-archive { gap: 14px; padding-inline: 12px; }
  .fd-archive-file strong { font-size: 14px; }
  .fd-archive-checks > span { font-size: 10px; }
}
@container (max-width: 300px) {
  .fd-capture-popup { padding: 12px; }
  .fd-capture-popup-brand { gap: 9px; margin-bottom: 14px; }
  .fd-capture-popup-brand .fd-capture-brand-icon { width: 34px; height: 34px; }
  .fd-capture-popup-brand .fd-capture-brand-wordmark { width: 124px; }
  .fd-capture-popup-brand small { font-size: 11px; }
  .fd-capture-menu-row { gap: 8px; padding: 7px 4px; min-height: 51px; }
  .fd-capture-menu-icon { width: 22px; flex-basis: 22px; }
  .fd-capture-menu strong { font-size: 12px; }
  .fd-capture:lang(en) .fd-capture-menu strong { font-size: 12px; }
  .fd-capture-menu small { font-size: 10px; }
  .fd-capture-shortcut { font-size: 9px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-demo .fd-cursor { display: none; }
  .feature-demo .fd-progress i { transform: scaleX(1); }
  .feature-demo .fd-restored-library .fd-library-tile { opacity: 1; transform: none; }
  .feature-demo .fd-gallery-card { animation: none; }
  .feature-demo .fd-capture-popup { animation: none; }
  .feature-demo .fd-capture-preview { animation: none; }
}

/* One window frame for every demo: same border, shadow, title-bar tone and dots as the gallery rail. */
.feature-demo { border: 1px solid #d5dde8; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 20px 40px -28px rgba(30, 50, 80, .3); }
.fd-topbar, .fd-browser-tabs { background: #f1f4f8; border-bottom-color: #e3e8ef; }
.fd-dots { display: flex; flex: 0 0 auto; align-self: center; gap: 6px; margin-right: 6px; }
.fd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3dae4; }
.fd-browser-tabs { padding-left: 14px; }
.fd-browser-tabs > .fd-dots { margin-right: 10px; }
.fd-pdf { height: 440px; }

/* Local library demo */
.fdg { height: 440px; }
.fdg-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: #ffffff; }
.fdg-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid #e3e8ef; background: #f8fafc; }
.fdg-nav { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #475569; font-size: 12px; text-align: left; cursor: pointer; }
.fdg-nav svg { width: 15px !important; height: 15px !important; }
.fdg-nav > span:not(.fdg-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdg-count { color: #94a3b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.fdg-nav:hover { background: #eef2f7; }
.fdg-nav.is-active { background: #e6eefc; color: #1d4ed8; font-weight: 600; }
.fdg-nav.is-active .fdg-count { color: #1d4ed8; }
.fdg-side-heading { margin: 12px 9px 4px; color: #94a3b8; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fdg-main { min-width: 0; padding: 12px 14px; overflow: hidden; }
.fdg-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid #e3e8ef; border-radius: 8px; color: #94a3b8; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.fdg-search svg { width: 14px !important; height: 14px !important; }
.fdg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.fdg-card { min-width: 0; overflow: hidden; border: 1px solid #e6ebf1; border-radius: 8px; background: #ffffff; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.fdg-card img { display: block; width: 100%; height: auto; aspect-ratio: 615 / 356; object-fit: cover; border-bottom: 1px solid #eef2f6; }
.fdg-card-body { display: grid; gap: 3px; padding: 7px 8px 8px; }
.fdg-card-body strong { overflow: hidden; color: #1e293b; font-size: 11.5px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.fdg-card-meta { display: flex; justify-content: space-between; gap: 6px; color: #64748b; font-size: 10.5px; line-height: 1.3; white-space: nowrap; }
.fdg-card-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fdg-card-links { color: #1d4ed8; }
@media (hover: hover) and (pointer: fine) {
  .fdg-card:hover { border-color: #bfd3f6; box-shadow: 0 8px 18px -12px rgba(30, 64, 175, .35); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .fdg-card { transition: none; } .fdg-card:hover { transform: none; } }
@media (max-width: 640px) {
  .fdg-body { grid-template-columns: 116px minmax(0, 1fr); }
  .fdg-side { padding: 10px 6px; }
  .fdg-nav { gap: 6px; padding: 6px 7px; font-size: 11px; }
  .fdg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 420px) {
  .fdg-body { grid-template-columns: minmax(0, 1fr); }
  .fdg-side { display: none; }
}

/* Annotate & edit demo: toolbar order and Pro tools follow the extension editor. */
.fd-annotate { height: 440px; }
.fdan-undo { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; border: 0; border-radius: 6px; background: transparent; color: #64748b; }
.fdan-undo:hover { background: #e6ebf2; }
.fdan-done.is-target { background: #1d4ed8; }
.fdan-tools { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px; border-bottom: 1px solid #e3e8ef; background: #ffffff; overflow: hidden; }
.fdan-tool { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #475569; font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; }
.fdan-tool svg { width: 15px !important; height: 15px !important; }
button.fdan-tool { cursor: pointer; }
button.fdan-tool:hover { background: #f1f4f8; }
.fdan-tool.is-active { background: #e6eefc; color: #1d4ed8; font-weight: 600; }
.fdan-sep { flex: 0 0 1px; height: 20px; margin: 0 4px; background: #e3e8ef; }
.fd-annotate .fdan-body { height: calc(100% - 47px - 44px - 36px); display: grid; place-items: center; padding: 16px 24px; background: #edf1f6; }
.fdan-paper { position: relative; width: min(100%, 470px); padding: 18px 22px 16px; background: #ffffff; box-shadow: 0 2px 9px rgb(25 40 63 / .12); color: #202122; font-family: 'Segoe UI', sans-serif; }
.fdan-paper h4 { margin-bottom: 8px; font: 22px/1.2 Georgia, serif; letter-spacing: 0; }
.fdan-paper p { margin-top: 8px; font-size: 12.5px; line-height: 1.75; }
.fdan-link { padding: 0 1px; border-radius: 3px; color: #2454ae; background: rgb(56 156 224 / .12); box-shadow: inset 0 0 0 1px rgb(56 156 224 / .32); }
.fdan-private { color: #54595d; font-size: 11px !important; }
.fdan-layer { position: absolute; inset: 0; pointer-events: none; }
.fdan-layer > * { position: absolute; opacity: 0; transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .8, .3, 1.2); }
.fdan-layer > .is-shown { opacity: 1; }
.fdan-box { border: 2.5px solid #ef4444; border-radius: 8px; }
.fdan-arrow { inset: 0; width: 100%; height: 100%; overflow: visible; }
.fdan-arrow-line { fill: none; stroke: #ef4444; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 520ms ease; }
.fdan-arrow.is-shown .fdan-arrow-line { stroke-dashoffset: 0; }
.fdan-arrow marker path { fill: #ef4444; }
.fdan-note { z-index: 2; padding: 4px 9px; border-radius: 6px; background: #ef4444; color: #ffffff; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translateY(6px); }
.fdan-note.is-shown { transform: none; }
/* Frosted region like the extension's rounded blur: no outline once drawn. */
.fdan-blurbox { border-radius: 6px; background: rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fdan-blurbox { background: rgb(203 213 225 / .92); } }
.fdan-num { z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1d4ed8; color: #ffffff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px #ffffff; transform: scale(.4); }
.fdan-num.is-shown { transform: none; }
.fd-annotate[data-frame="6"] .fdan-tools { opacity: .6; }
.fd-annotate[data-frame="6"] .fdan-link { animation: fdan-live 900ms ease-out 2; }
@keyframes fdan-live {
  0% { box-shadow: inset 0 0 0 1px rgb(56 156 224 / .32), 0 0 0 0 rgb(37 99 235 / .45); }
  100% { box-shadow: inset 0 0 0 1px rgb(56 156 224 / .32), 0 0 0 6px rgb(37 99 235 / 0); }
}
@container (max-width: 560px) {
  .fdan-tools { gap: 0; padding: 0 6px; }
  .fdan-tool > span { display: none; }
  .fdan-tool { gap: 3px; padding: 0 5px; }
  .fdan-sep { margin: 0 2px; }
  .fd-annotate .fdan-body { padding: 12px; }
  .fdan-paper { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdan-layer > *, .fdan-arrow-line { transition: none !important; }
  .fd-annotate[data-frame="6"] .fdan-link { animation: none; }
}

/* Library demo: page-text search. The highlight box marks where "Helvetica" sits in the Fantasia capture. */
.fdg-search { position: relative; transition: border-color 200ms ease, box-shadow 200ms ease; }
.fdg-search.is-focused { border-color: #93b4f0; box-shadow: 0 0 0 3px rgb(37 99 235 / .12); }
.fdg-search.has-query .fdg-placeholder { display: none; }
.fdg-placeholder { overflow: hidden; text-overflow: ellipsis; }
.fdg-query { color: #1e293b; font-weight: 500; }
.fdg-caret { display: none; width: 1px; height: 14px; margin-left: -6px; background: #1d4ed8; animation: fdg-caret 1s steps(1) infinite; }
.fdg-search.is-focused .fdg-caret { display: block; }
@keyframes fdg-caret { 50% { opacity: 0; } }
.fdg-thumb { position: relative; overflow: hidden; border-bottom: 1px solid #eef2f6; }
.fdg-thumb img { border-bottom: 0; }
.fdg-hit { position: absolute; left: 72.8%; top: 54%; width: 12.6%; height: 6.6%; border-radius: 3px; background: rgb(250 204 21 / .38); box-shadow: 0 0 0 1.5px #eab308; opacity: 0; transform: scale(.7); transition: opacity 220ms ease, transform 320ms cubic-bezier(.2, .8, .3, 1.3); }
.fdg-card.is-found { border-color: #93b4f0; box-shadow: 0 10px 22px -14px rgb(30 64 175 / .45); }
.fdg-card.is-found .fdg-hit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fdg-caret { animation: none; }
  .fdg-hit { transition: none; }
}

/* Small touches: five quiet cards closing the features section; shortcuts take the tall left card. */
#features .detail-intro { margin-top: 112px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dt-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid #e2e8f0; border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color 200ms ease, box-shadow 200ms ease; }
.dt-card:hover { border-color: #cfdcf3; box-shadow: 0 14px 30px -22px rgba(30, 64, 175, .35); }
.dt-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 10px; background: #e6eefc; color: var(--primary); }
.dt-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-card h3 { margin-bottom: 6px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; }
.dt-card p { color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }
.dt-keys { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef2f6; list-style: none; }
.dt-keys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: .8125rem; }
.dt-combo { display: inline-flex; gap: 4px; }
.dt-keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid #d5dde8; border-bottom-width: 2px; border-radius: 6px; background: #f8fafc; color: var(--text-primary); font: 600 .75rem/1 var(--font-sans); }
@media (min-width: 901px) {
  .detail-grid { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); }
  .dt-card--keys { grid-row: span 2; }
  .dt-card--keys .dt-keys { margin-top: auto; }
  .dt-card--keys p { margin-bottom: 16px; }
}
@media (max-width: 900px) {
  #features .detail-intro { margin-top: 80px; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-card--keys { grid-column: 1 / -1; }
  .dt-card--keys .dt-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 560px) {
  #features .detail-intro { margin-top: 64px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .dt-card { padding: 20px; }
  .dt-card--keys .dt-keys { grid-template-columns: minmax(0, 1fr); }
}

/* Share links demo. Dialog and share page values are copied from the extension's
   src/sharing/sharing.css and share-service/public/styles.css; both are drawn at full size
   and scaled to fit the demo window. */
.fd-share { height: 440px; }

/* Viewer (sender) */
.fdsv { position: absolute; inset: 0 0 36px; display: flex; flex-direction: column; background: #ffffff; }
.fdsv .fd-browser-tab img, .fdsp-window .fd-browser-tab img { width: 14px; height: 14px; }
.fdsv-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid #e7e7e7; background: #ffffff; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fdsv-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fdsv-title img { width: 26px; height: 26px; flex: 0 0 26px; }
.fdsv-title strong { display: block; color: #242424; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fdsv-title small { display: block; color: #686868; font-size: 10.5px; }
.fdsv-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-left: auto; overflow: hidden; }
.fdsv-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid #d3d3d3; border-radius: 6px; background: #ffffff; color: #242424; font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
button.fdsv-btn { cursor: pointer; }
.fdsv-share.is-target { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.fdsv-switch { display: inline-flex; align-items: center; gap: 6px; color: #242424; font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
.fdsv-switch i { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #2563eb; }
.fdsv-switch i::after { content: ''; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ffffff; }
.fdsv-canvas { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; background: #f3f3f3; overflow: hidden; }
.fdsv-shot { position: relative; width: min(100%, 470px); box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
.fdsv-shot img { display: block; width: 100%; height: auto; }
.fdsv-hot { position: absolute; border-radius: 4px; background-image: linear-gradient(to right, rgb(59 130 246 / .28), transparent 20%, transparent 80%, rgb(59 130 246 / .28)), linear-gradient(to bottom, rgb(59 130 246 / .28), transparent 20%, transparent 80%, rgb(59 130 246 / .28)); }

/* Share dialog (sender) */
.fdsr-modal { position: absolute; z-index: 7; inset: 0 0 36px; display: none; place-items: center; background: rgb(0 0 0 / .55); overflow: hidden; }
.fd-share[data-frame="1"] .fdsr-modal, .fd-share[data-frame="2"] .fdsr-modal { display: grid; animation: fdsh-fade 200ms ease-out; }
@keyframes fdsh-fade { from { opacity: 0; } }
.fdsr-dialog { position: absolute; left: 50%; top: 50%; width: 520px; max-height: var(--fdsr-max, 480px); overflow: hidden; border: 1px solid #e7e7e7; border-radius: 14px; background: #ffffff; color: #242424; font: 13px/1.5 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; box-shadow: 0 24px 64px rgb(0 0 0 / .18); transform: translate(-50%, -50%) scale(var(--fdsr-scale, 1)); }
.fdsr-scroll { padding: 22px 24px 24px; transition: transform 600ms cubic-bezier(.3, .7, .3, 1); }
.fdsr-dialog svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fdsr-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fdsr-header h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.fdsr-subtitle { margin: 6px 0 0; color: #686868; }
.fdsr-subtitle strong { color: #242424; font-weight: 600; }
.fdsr-close { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; color: #686868; }
.fdsr-facts { display: grid; gap: 10px; margin: 18px 0 0; padding: 14px 16px; border: 1px solid #e7e7e7; border-radius: 10px; background: #fafafa; list-style: none; }
.fdsr-facts li { display: flex; align-items: flex-start; gap: 10px; color: #242424; }
.fdsr-facts li svg { margin-top: 2px; color: #686868; }
.fdsr-facts .fdsr-warning { color: #92400e; font-weight: 600; }
.fdsr-facts .fdsr-warning svg { color: #92400e; }
.fdsr-facts .fdsr-danger { color: #b42318; font-weight: 600; }
.fdsr-facts .fdsr-danger svg { color: #b42318; }
.fdsr-create { display: grid; gap: 12px; margin-top: 18px; }
.fdsr-consent { display: flex; align-items: flex-start; gap: 10px; }
.fdsr-box { display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1.5px solid #8a8a8a; border-radius: 3px; background: #ffffff; color: #ffffff; }
.fdsr-box svg { width: 12px !important; height: 12px !important; stroke-width: 2.4 !important; opacity: 0; }
.fdsr-consent.is-checked .fdsr-box { border-color: #2563eb; background: #2563eb; }
.fdsr-consent.is-checked .fdsr-box svg { opacity: 1; }
.fdsr-primary { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 8px; background: #ededed; color: #9a9a9a; font: inherit; font-size: 14px; font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.fdsr-primary.is-ready { background: #2563eb; color: #ffffff; }
.fdsr-primary.is-busy { background: #1d4ed8; color: #ffffff; }
.fdsr-quota { margin: 8px 0 2px; color: #686868; font-size: 12px; font-weight: 600; }
.fdsr-limits { color: #686868; font-size: 11px; line-height: 1.6; }
.fdsr-records { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e7e7e7; }
.fdsr-records h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: #686868; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.fdsr-count { display: none; padding: 0 5px; border: 1px solid #e7e7e7; border-radius: 6px; background: #fafafa; font-size: 11px; font-weight: 500; }
.fdsr-empty { margin: 0; color: #686868; }
.fdsr-receipt { display: none; gap: 8px; padding: 12px 14px; border: 1px solid #e7e7e7; border-radius: 10px; }
.fd-share.has-receipt .fdsr-count { display: inline-block; }
.fd-share.has-receipt .fdsr-empty { display: none; }
.fd-share.has-receipt .fdsr-receipt { display: grid; animation: fdsh-fade 260ms ease-out; }
.fdsr-receipt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fdsr-receipt-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fdsr-badge { flex: none; padding: 0 6px; border: 1px solid currentColor; border-radius: 6px; color: #2563eb; font-size: 11px; line-height: 1.6; }
.fdsr-status { color: #686868; font-size: 12px; font-variant-numeric: tabular-nums; }
.fdsr-url { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid #d3d3d3; border-radius: 8px; background: #fafafa; font-size: 12px; overflow: hidden; white-space: nowrap; }
.fdsr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fdsr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 12px; border: 1px solid #d3d3d3; border-radius: 8px; background: #ffffff; color: #242424; font: inherit; font-size: 12px; font-weight: 500; }
.fdsr-btn.is-done { border-color: #2563eb; color: #1d4ed8; }
.fdsr-danger { margin-left: auto; border-color: transparent; color: #b42318; }

/* Share page (recipient) */
.fdsp-window { position: absolute; z-index: 8; inset: 0 0 36px; display: none; flex-direction: column; background: #f8f8f8; }
.fd-share[data-frame="3"] .fdsp-window, .fd-share[data-frame="4"] .fdsp-window { display: flex; animation: fdsh-fade 260ms ease-out; }
.fdsp-tab-icon { width: 14px !important; height: 14px !important; stroke-width: 2 !important; }
.fdsp-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fdsp-page { position: absolute; top: 0; left: 0; width: 960px; transform: scale(var(--fdsp-scale, .67)); transform-origin: 0 0; color: #242424; background: #f8f8f8; font: 14px/1.5 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fdsp-page svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fdsp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 32px; border-bottom: 1px solid #e7e7e7; background: #ffffff; }
.fdsp-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.fdsp-brand svg { width: 28px; height: 28px; }
.fdsp-top-actions { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.fdsp-select { padding: 6px 26px 6px 8px; border: 1px solid #e7e7e7; border-radius: 6px; background: #ffffff; }
.fdsp-get { text-decoration: underline; text-underline-offset: 3px; }
.fdsp-main { padding: 32px; }
.fdsp-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.fdsp-heading h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.fdsp-muted { margin: 0; color: #686868; font-size: 13px; }
.fdsp-actions { display: flex; flex-shrink: 0; align-items: center; gap: 16px; }
.fdsp-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.fdsp-check { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: #2563eb; color: #ffffff; }
.fdsp-check svg { width: 11px; height: 11px; stroke-width: 2.4; }
.fdsp-primary { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 14px; border: 1px solid #30343b; border-radius: 8px; background: #30343b; color: #ffffff; font: inherit; font-weight: 500; white-space: nowrap; transition: background-color 150ms ease; }
.fdsp-primary.is-hover { background: #454b55; }
.fdsp-image { border: 1px solid #e7e7e7; border-radius: 12px; overflow: hidden; background: #ffffff; }
.fdsp-canvas { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.fdsp-canvas img { display: block; width: 560px; max-width: 100%; height: auto; }
.fdsp-hotspots { position: absolute; inset: 0; }
.fdsp-hot { position: absolute; border-radius: 6px; --edge: rgb(59 130 246 / .2); background-image: linear-gradient(to right, var(--edge), transparent 20%, transparent 80%, var(--edge)), linear-gradient(to bottom, var(--edge), transparent 20%, transparent 80%, var(--edge)); }
.fdsp-hot.is-hovered { --edge: rgb(59 130 246 / .5); }
.fdsp-caption { margin-top: 16px; }
.fdsp-preview { position: absolute; z-index: 2; display: none; flex-direction: column; width: 230px; padding: 8px 10px; border: 1px solid #d3d3d3; border-radius: 10px; background: #ffffff; color: #242424; box-shadow: 0 10px 32px rgb(0 0 0 / .1); font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fdsp-preview.is-shown { display: flex; }
.fdsp-preview strong { font-size: 12px; }
.fdsp-preview > span { margin-top: 2px; color: #1d4ed8; font-size: 11px; }
.fdsp-preview-url { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.fdsp-copy { flex: none; padding: 3px 7px; border: 1px solid #d3d3d3; border-radius: 6px; background: #efefef; font-size: 10.5px; }
.fdsp-preview-url small { min-width: 0; overflow: hidden; color: #686868; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 560px) {
  .fdsv-actions .fdsv-btn:not(.fdsv-share), .fdsv-switch { display: none; }
  .fdsv-title strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .fdsr-modal, .fdsr-receipt, .fdsp-window { animation: none !important; }
  .fdsr-scroll { transition: none; }
}

/* Library demo: the extension's yellow "Text N" match badge on the thumbnail. */
.fdg-match { position: absolute; left: 6px; bottom: 6px; display: none; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; background: #facc15; color: #422006; font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.fdg-match svg { width: 11px !important; height: 11px !important; stroke-width: 2 !important; }
.fdg-card.is-found .fdg-match { display: inline-flex; }

/* Full-text search demo: library results, then the viewer with the match highlighted.
   Bar and highlight values follow the extension's viewer.css (.viewer-highlight-bar, .text-highlight.current). */
.fds .fdg-body { position: relative; }
.fds-viewer { position: absolute; z-index: 5; inset: 47px 0 36px; display: none; flex-direction: column; background: #f3f3f3; }
.fds.is-viewing .fds-viewer { display: flex; animation: fds-in 240ms ease-out; }
@keyframes fds-in { from { opacity: 0; } }
.fds-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e7e7e7; background: #ffffff; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fds-back { display: grid; place-items: center; width: 24px; height: 24px; color: #686868; }
.fds-back svg { width: 15px !important; height: 15px !important; }
.fds-head img { width: 24px; height: 24px; }
.fds-head strong { display: block; color: #242424; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fds-head small { display: block; color: #686868; font-size: 10.5px; }
.fds-bar { display: flex; align-items: center; gap: 10px; align-self: flex-start; max-width: calc(100% - 24px); margin: 10px 12px 0; padding: 4px 6px 4px 10px; border: 1px solid #e7e7e7; border-radius: 8px; background: #ffffff; box-shadow: 0 6px 18px -10px rgb(0 0 0 / .25); color: #242424; font: 11.5px/1.5 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fds-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fds-swatch { flex: none; width: 11px; height: 11px; border-radius: 3px; background: #facc1547; box-shadow: 0 0 0 1.5px #eab308d9; }
.fds-clear { flex: none; padding: 2px 7px; border-radius: 6px; color: #686868; font-size: 11px; }
.fds-canvas { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 14px 12px; overflow: hidden; }
.fds-shot { position: relative; width: min(100%, 470px); box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
.fds-shot img { display: block; width: 100%; height: auto; }
.fds-hl { position: absolute; left: 72.8%; top: 54%; width: 12.6%; height: 6.6%; border-radius: 3px; background: #fb923c66; box-shadow: 0 0 0 2px #ea580c; }
.fds.is-viewing .fds-hl { animation: fds-pulse 900ms ease-out 2 300ms; }
@keyframes fds-pulse { 50% { box-shadow: 0 0 0 2px #ea580c, 0 0 0 7px rgb(234 88 12 / .22); } }
.feature-story-note { margin-top: 18px; padding: 12px 14px; border: 1px solid #d9e4f5; border-radius: var(--radius-md); background: #f5f9ff; color: #1e3a8a; font-size: .875rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .fds.is-viewing .fds-viewer, .fds.is-viewing .fds-hl { animation: none; } }

/* Text and link match badges (extension: .card-match-count.text / .link). */
.fdg-matches { position: absolute; left: 6px; bottom: 6px; display: none; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 12px); }
.fdg-card.is-found .fdg-matches { display: flex; }
.fdg-matches .fdg-match { position: static; display: inline-flex; }
.fdg-match.link { background: #2563eb; color: #ffffff; }
/* Viewer: steps, link matches (dashed 3px edge, current: 3px outline 2px outside) and the link popup. */
.fds-swatches { display: inline-flex; gap: 3px; flex: none; }
.fds-swatch.link { background: transparent; box-shadow: inset 0 0 0 2px #2563eb; }
.fds-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fds-kinds { margin-left: 8px; color: #686868; }
.fds-steps { display: inline-flex; gap: 2px; flex: none; }
.fds-step { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #686868; }
.fds-step svg { width: 13px !important; height: 13px !important; stroke-width: 1.8 !important; }
.fds-hl { background: #facc1547; box-shadow: 0 0 0 1.5px #eab308d9; }
.fds-hl.is-current { background: #fb923c66; box-shadow: 0 0 0 2px #ea580c; }
.fds-link { position: absolute; border: 2px dashed #2563eb; border-radius: 4px; background-image: linear-gradient(to right, rgb(59 130 246 / .3), transparent 20%, transparent 80%, rgb(59 130 246 / .3)), linear-gradient(to bottom, rgb(59 130 246 / .3), transparent 20%, transparent 80%, rgb(59 130 246 / .3)); }
.fds-link.is-current { outline: 2px solid #2563eb; outline-offset: 2px; }
.fds-pop { position: absolute; z-index: 2; right: 27%; top: 40%; display: none; flex-direction: column; width: 250px; padding: 8px 10px; border: 1px solid #d3d3d3; border-radius: 10px; background: #ffffff; color: #242424; box-shadow: 0 10px 32px rgb(0 0 0 / .14); font: 11px/1.4 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
.fds-pop.is-shown { display: flex; animation: fds-in 200ms ease-out; }
.fds-pop strong { font-size: 12px; }
.fds-pop-domain { margin-top: 2px; color: #1d4ed8; }
.fds-pop-url { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.fds-copy { flex: none; padding: 3px 7px; border: 1px solid #d3d3d3; border-radius: 6px; background: #efefef; color: #242424; font-size: 10.5px; }
.fds-pop small { min-width: 0; color: #686868; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fds-pop mark { padding: 0 1px; border-radius: 2px; background: #facc15; color: #422006; }
@container (max-width: 560px) { .fds-kinds { display: none; } .fds-pop { right: 26%; width: 170px; } }

/* While a demo plays it is a presentation: no pointer hover, holds or clicks. */
.feature-demo.is-running * { pointer-events: none !important; }