/*
  TapDownload v3 - a tool page, not a showcase. Structure follows what works for downloaders (tool first, centered,
  results right under it, then how-to / what you can save / why / FAQ); trust comes from it working, plainly.
  Motion is small and useful only: entrance, loading skeleton, results stagger, button states, FAQ open, toast.
  One slow ambient glow behind the tool (paused for reduced motion). Light + dark from tokens.
*/
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2')}

:root{
  --brand-text:#6E6200; --mark:#141414;
  --bg:#FFFFFF; --bg2:#F6F5F2; --card:#FFFFFF; --ink:#141414; --grey:#5E5D59; --line:#E6E4DF; --line2:#D6D3CC;
  --brand:#FFFC00; --on-brand:#141414; --brand-soft:#FFFDD6; --ok:#11753D; --ok-soft:#E8F5EC; --err:#B3261E; --tile:#ECEAE5;
  --shadow:0 1px 2px rgba(20,20,20,.06),0 8px 24px rgba(20,20,20,.06);
  --r:14px; --ease:cubic-bezier(0.23,1,0.32,1);
  --sans:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0F0F10; --brand-text:#FFFC00; --mark:#FFFC00; --bg2:#161618; --card:#1B1B1D; --ink:#F2F1EE; --grey:#A6A49F; --line:#2A2A2D; --line2:#38383C;
    --brand:#FFFC00; --brand-soft:#2A2906; --ok:#4CC27E; --ok-soft:#14261B; --err:#FF7A6E; --tile:#232326;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0F0F10; --brand-text:#FFFC00; --mark:#FFFC00; --bg2:#161618; --card:#1B1B1D; --ink:#F2F1EE; --grey:#A6A49F; --line:#2A2A2D; --line2:#38383C;
    --brand:#FFFC00; --brand-soft:#2A2906; --ok:#4CC27E; --ok-soft:#14261B; --err:#FF7A6E; --tile:#232326;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
main,footer{overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.fd-stage :focus-visible,.fd-final.dark :focus-visible,.fd-viewer :focus-visible,.fd-selbar :focus-visible{outline-color:#FFFC00}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}
.fd-wrap{width:min(1120px,100% - 48px);margin-inline:auto}
@media (max-width:600px){.fd-wrap{width:calc(100% - 32px)}}
.fd-i{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.fd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fd-skip{position:absolute;left:16px;top:-80px;z-index:90;padding:10px 14px;border-radius:10px;background:var(--brand);color:var(--on-brand);font-weight:700}
.fd-skip:focus{top:10px}

/* entrance + reveals: once, short, from below */
html.js [data-reveal]{opacity:0;translate:0 14px;transition:opacity 500ms var(--ease),translate 500ms var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js [data-reveal].in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{translate:none;transition:opacity 200ms ease;transition-delay:0ms}}

/* ---------- buttons ---------- */
.fd-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;background:var(--brand);color:var(--on-brand);font:700 16px/1 var(--sans);text-decoration:none;white-space:nowrap;
  transition:background-color 150ms var(--ease),scale 120ms var(--ease),box-shadow 150ms var(--ease)}
.fd-btn:active{scale:.97}
@media (hover:hover) and (pointer:fine){.fd-btn:hover{box-shadow:0 6px 18px -6px var(--brand)}}
.fd-btn.line{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
@media (hover:hover) and (pointer:fine){.fd-btn.line:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.fd-btn.sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
.fd-btn.full{width:100%}
.fd-btn .fd-i{width:18px;height:18px}
.fd-btn:disabled{cursor:progress;opacity:.8}
.fd-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.fd-btn.done{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}

/* ---------- header ---------- */
.fd-head{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.9);color:#F2F1EE;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.fd-head .fd-wrap{height:64px;display:flex;align-items:center;gap:28px}
.fd-logo{display:inline-flex;align-items:center;gap:9px;font:800 20px/1 var(--sans);letter-spacing:-.03em;text-decoration:none}
.fd-logo-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--brand);color:var(--on-brand)}
.fd-logo-mark .fd-i{width:16px;height:16px}
.fd-links{display:flex;gap:24px;margin-left:auto}
.fd-links a{font-weight:600;font-size:15px;color:rgba(242,241,238,.62);text-decoration:none;transition:color 150ms var(--ease)}
.fd-links a:hover,.fd-links a[aria-current]{color:#fff}
.fd-menu-btn{display:none;margin-left:auto;appearance:none;background:rgba(255,255,255,.06);color:#F2F1EE;border:1px solid rgba(255,255,255,.14);border-radius:10px;height:40px;padding:0 14px;font-weight:700;font-size:14px;cursor:pointer;align-items:center;gap:6px}
.fd-menu{inset:auto;position:fixed;top:72px;right:16px;margin:0;width:min(280px,calc(100% - 32px));padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);
  transform-origin:top right;opacity:1;scale:1;transition:opacity 180ms var(--ease),scale 180ms var(--ease),display 180ms allow-discrete,overlay 180ms allow-discrete}
.fd-menu:not(:popover-open){opacity:0;scale:.96}
@starting-style{.fd-menu:popover-open{opacity:0;scale:.96}}
.fd-menu a{display:block;padding:12px;border-radius:10px;font-weight:600;text-decoration:none}
.fd-menu a:hover,.fd-menu a:focus-visible{background:var(--bg2)}
@media (max-width:820px){.fd-links{display:none}.fd-menu-btn{display:inline-flex}}

/* ---------- hero + the tool ---------- */
.fd-hero{position:relative;padding:72px 0 56px;text-align:center;isolation:isolate}
.fd-hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-140px;width:min(900px,140vw);height:520px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 22%,transparent),transparent);filter:blur(10px);opacity:.7}
@media (prefers-reduced-motion:no-preference){.fd-hero::before{animation:fd-glow 14s ease-in-out infinite alternate}}
@keyframes fd-glow{to{translate:-46% 30px;scale:1.08}}
.fd-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fd-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600}
.fd-badge .fd-i{width:14px;height:14px;color:var(--ok)}
.fd-hero h1{margin:18px auto 0;font-size:clamp(36px,5.4vw,60px);max-width:16ch}
.fd-hero h1 span{color:var(--brand)}
.fd-lede{margin:14px auto 0;max-width:52ch;font-size:clamp(17px,1.5vw,19px);color:var(--grey)}
.fd-tool{width:100%;max-width:720px;margin:30px auto 0;text-align:left}
.fd-field{display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:box-shadow 200ms var(--ease)}
.fd-field:focus-within{box-shadow:var(--shadow),inset 0 0 0 2px var(--mark)}
.fd-field > .fd-i{width:20px;height:20px;margin-left:10px;color:var(--grey)}
.fd-field input{flex:1;min-width:0;height:48px;padding:0 4px;border:0;outline:0;background:transparent;color:var(--ink);font:500 17px/1 var(--sans)}
.fd-field input::placeholder{color:var(--grey);opacity:1}
.fd-paste{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;background:var(--bg2);font-weight:600;font-size:14px;color:var(--ink);transition:background-color 150ms var(--ease)}
.fd-paste:hover{background:var(--line)}
.fd-paste[hidden]{display:none}
.fd-field .fd-btn{min-width:132px}
.fd-tool label{display:block;font-weight:600;font-size:14px;margin:0 0 8px 4px;color:var(--grey)}
.fd-under{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:10px 4px 0;min-height:22px}
.fd-detect{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--grey)}
.fd-detect.ok{color:var(--ok)}
.fd-detect.no{color:var(--err)}
.fd-detect .fd-i{width:15px;height:15px}
.fd-try{font-size:14px;color:var(--grey)}
.fd-try button{appearance:none;border:0;background:none;cursor:pointer;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.fd-msg{margin:8px 4px 0;font-size:15px;font-weight:600;color:var(--err)}
.fd-msg:empty{display:none}
.fd-spin{animation:fd-spin 800ms linear infinite}
@keyframes fd-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.fd-spin{animation:none}}
@media (max-width:560px){
  .fd-hero{padding:44px 0 40px}
  .fd-field{flex-wrap:wrap;padding:6px}
  .fd-field > .fd-i{display:none}
  .fd-field input{flex-basis:100%;height:52px;padding:0 10px}
  .fd-paste{flex:1;height:48px;justify-content:center}
  .fd-field .fd-btn{flex:2;min-width:0}
}
/* mini screens on the how-to cards */
.fd-mini{height:150px;margin:0 -4px 18px;padding:14px;border-radius:12px;background:var(--bg2);display:flex;flex-direction:column;justify-content:center;gap:6px;overflow:hidden}
.fd-mini .row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:var(--card);font-size:13px;font-weight:600;color:var(--grey)}
.fd-mini .row .fd-i{width:15px;height:15px}
.fd-mini .row.hot{color:var(--ink);box-shadow:inset 0 0 0 2px var(--mark)}
.fd-mini .bar{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 10px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.fd-mini .bar span{flex:1;overflow:hidden;white-space:nowrap;color:var(--ink)}
.fd-mini .bar b{padding:7px 10px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-size:12px}
.fd-mini .file{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--card)}
.fd-mini .file img{width:30px;height:44px;border-radius:6px;object-fit:cover}
.fd-mini .file strong{display:block;font-size:13px}
.fd-mini .file small{color:var(--grey);font:500 11px/1.3 var(--mono)}
.fd-mini .file .ok{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.fd-mini .file .ok .fd-i{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-steps li .fd-mini > *{opacity:0;translate:0 8px;transition:opacity 400ms var(--ease),translate 400ms var(--ease);transition-delay:calc(250ms + var(--j,0) * 90ms)}
  html.js .fd-steps li.in .fd-mini > *{opacity:1;translate:0 0}
  html.js .fd-steps li .fd-mini .bar span{clip-path:inset(0 100% 0 0);transition:clip-path 900ms steps(24) 450ms}
  html.js .fd-steps li.in .fd-mini .bar span{clip-path:inset(0 0 0 0)}
}

/* a dark band for rhythm */
.fd-sec.dark{background:#141414;color:#F2F1EE}
.fd-sec.dark .fd-why p,.fd-sec.dark .fd-head2 p{color:#A6A49F}
.fd-sec.dark .fd-why .ic{background:rgba(76,194,126,.14);color:#4CC27E}
@media (prefers-color-scheme:dark){.fd-sec.dark{background:#1B1B1D}}

.fd-hero.slim{padding:48px 0 44px}
.fd-crumbs ol{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--grey)}
.fd-crumbs li + li::before{content:"/";margin-right:6px}
.fd-crumbs a{color:var(--ink);font-weight:600}

/* ---------- results ---------- */
.fd-result{padding:8px 0 64px}
.fd-result[hidden]{display:none}
.fd-res{padding:24px;border-radius:20px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);
  opacity:1;translate:0 0;transition:opacity 280ms var(--ease),translate 380ms var(--ease)}
@starting-style{.fd-result:not([hidden]) .fd-res{opacity:0;translate:0 12px}}
@media (prefers-reduced-motion:reduce){@starting-style{.fd-result:not([hidden]) .fd-res{translate:0 0}}}
/* loading skeleton */
.fd-skel .fd-owner{opacity:.9}
.fd-bone{border-radius:10px;background:linear-gradient(90deg,var(--tile) 0%,var(--bg2) 50%,var(--tile) 100%) 0 0/200% 100%}
@media (prefers-reduced-motion:no-preference){.fd-bone{animation:fd-shimmer 1.2s linear infinite}}
@keyframes fd-shimmer{to{background-position:-200% 0}}
.fd-owner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fd-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--tile)}
.fd-owner > div{flex:1;min-width:0}
.fd-owner-name{font-size:clamp(22px,2.4vw,28px)}
.fd-owner-name:focus{outline:none}
.fd-owner-sub{font-size:14px;color:var(--grey)}
.fd-open{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--grey)}
.fd-open:hover{color:var(--ink)}
.fd-notice{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--brand-soft);font-weight:600}
.fd-tabs{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:var(--bg2);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.fd-tab{appearance:none;border:0;background:none;cursor:pointer;padding:9px 14px;border-radius:9px;font-weight:700;font-size:15px;white-space:nowrap;color:var(--grey);transition:background-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease)}
.fd-tab b{margin-left:6px;font:600 12px/1 var(--mono);color:var(--grey)}
.fd-tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fd-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.fd-bar[hidden]{display:none}
.fd-filter{display:flex;gap:6px;flex-wrap:wrap}
.fd-filter button{appearance:none;border:0;cursor:pointer;min-height:36px;padding:0 12px;border-radius:999px;background:var(--bg2);font-weight:600;font-size:14px;transition:background-color 150ms var(--ease),color 150ms var(--ease)}
.fd-filter button b{margin-left:4px;font-weight:700}
.fd-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.fd-filter button:disabled{opacity:.45;cursor:default}
.fd-back{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;margin-top:16px;color:var(--grey)}
.fd-back:hover{color:var(--ink)}
.fd-hl-title{margin-top:6px;font-size:clamp(20px,2vw,24px)}
.fd-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 14px;margin-top:18px}
.fd-tile{display:flex;flex-direction:column;gap:8px;min-width:0;position:relative}
@media (prefers-reduced-motion:no-preference){
  .fd-tile,.fd-covers li{animation:fd-in 420ms var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
}
@keyframes fd-in{from{opacity:0;translate:0 10px}}
.fd-ph{appearance:none;border:0;padding:0;cursor:zoom-in;position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:var(--tile)}
.fd-ph img{width:100%;height:100%;object-fit:cover;transition:scale 400ms var(--ease)}
@media (hover:hover) and (pointer:fine){.fd-ph:hover img{scale:1.04}}
.fd-play{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1 var(--mono)}
.fd-play .fd-i{width:11px;height:11px}
.fd-facts{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--grey)}
.fd-facts b{color:var(--ink);font-weight:700}
.fd-pick{position:absolute;right:8px;top:8px;z-index:2;display:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;background:var(--card);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fd-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fd-pick .on{display:none;color:var(--mark)}
.fd-pick input:checked ~ .on{display:block}
.fd-pick input:checked ~ .off{display:none}
.fd-pick input:focus-visible ~ svg{outline:2px solid var(--mark);outline-offset:2px}
.fd-pick .fd-i{width:22px;height:22px}
.fd-picking .fd-pick{display:flex}
.fd-picking .fd-tile:has(input:checked) .fd-ph{outline:3px solid var(--brand);outline-offset:-3px}
.fd-more{margin-top:24px}
.fd-covers{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 14px;margin-top:18px}
.fd-cover{appearance:none;border:0;background:none;cursor:pointer;text-align:left;width:100%;display:flex;flex-direction:column;gap:8px}
.fd-cover .fd-ph{cursor:pointer}
.fd-cover strong{font-size:15px;line-height:1.3}
.fd-empty{margin-top:20px;color:var(--grey)}
.fd-single{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;margin-top:20px;align-items:start}
.fd-player{aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000}
.fd-player video{width:100%;height:100%;object-fit:contain;background:#000}
.fd-spec dl{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr)}
.fd-spec dt,.fd-spec dd{padding:10px 0;border-bottom:1px solid var(--line)}
.fd-spec dt{color:var(--grey)}
.fd-spec dd{font-weight:600}
.fd-caption{margin-top:16px;max-width:56ch}
.fd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fd-note{margin-top:14px;max-width:60ch;font-size:14px;color:var(--grey)}
.fd-selbar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;translate:-50% 0;display:flex;align-items:center;gap:10px;width:min(560px,calc(100% - 24px));padding:8px 8px 8px 16px;border-radius:16px;background:var(--ink);color:var(--bg);box-shadow:0 12px 32px rgba(0,0,0,.25);
  opacity:1;transition:opacity 200ms var(--ease),translate 260ms var(--ease)}
.fd-selbar[hidden]{display:none}
@starting-style{.fd-selbar{opacity:0;translate:-50% 16px}}
.fd-selbar p{flex:1;font-weight:700;font-size:15px}
.fd-selbar .fd-btn.line{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
@media (prefers-color-scheme:dark){.fd-selbar .fd-btn.line{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}}
@media (max-width:640px){
  .fd-res{padding:16px;border-radius:16px}
  .fd-grid,.fd-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .fd-single{grid-template-columns:minmax(0,1fr)}
  .fd-player{width:min(100%,300px)}
  .fd-actions .fd-btn{width:100%}
}

/* ---------- preview ---------- */
.fd-viewer{margin:auto;border:0;padding:0;background:#0B0B0B;color:#F4F2EE;max-width:100vw;max-height:100dvh;width:100%;height:100%;
  opacity:1;transition:opacity 200ms var(--ease),display 200ms allow-discrete,overlay 200ms allow-discrete}
.fd-viewer:not([open]){opacity:0}
@starting-style{.fd-viewer[open]{opacity:0}}
.fd-viewer::backdrop{background:#000}
.fd-vbox{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.fd-vtop{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 13px/1.3 var(--mono)}
.fd-vmedia{position:relative;min-height:0}
.fd-vmedia > img,.fd-vmedia > video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.fd-vnav{display:flex;align-items:center;justify-content:center;gap:12px}
.fd-ibtn{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;transition:background-color 150ms var(--ease)}
.fd-ibtn:hover{background:rgba(255,255,255,.22)}
.fd-ibtn:disabled{opacity:.35;cursor:default}
.fd-ibtn .fd-i{width:20px;height:20px}

/* ---------- content sections ---------- */
.fd-sec{padding:80px 0}
.fd-sec.alt{background:var(--bg2)}
@media (max-width:820px){.fd-sec{padding:60px 0}}
.fd-head2{text-align:center;max-width:640px;margin:0 auto 40px}
.fd-head2 h2{font-size:clamp(28px,3.4vw,40px)}
.fd-head2 p{margin-top:12px;color:var(--grey);font-size:18px}
.fd-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.fd-steps li{position:relative;padding:26px 24px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.fd-steps .n{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:10px;background:var(--brand-soft);color:var(--brand-text);font-weight:800;font-size:18px}
.fd-steps h3{margin-top:16px;font-size:19px}
.fd-steps p{margin-top:6px;color:var(--grey);font-size:16px}
@media (max-width:820px){.fd-steps{grid-template-columns:minmax(0,1fr)}}
.fd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fd-card{padding:22px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 200ms var(--ease),translate 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.fd-card:hover{translate:0 -2px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line2)}}
a.fd-card{text-decoration:none;display:block}
.fd-card{overflow:hidden}
.fd-card .ph{display:block;aspect-ratio:16/11;margin:-22px -22px 16px;overflow:hidden;background:var(--tile)}
.fd-card .ph img{width:100%;height:100%;object-fit:cover;transition:scale 500ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.fd-card:hover .ph img{scale:1.04}}
.fd-card .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bg2)}
.fd-card .ic .fd-i{width:22px;height:22px}
.fd-card h3{margin-top:14px;font-size:18px}
.fd-card p{margin-top:6px;color:var(--grey);font-size:15px}
.fd-card .fmt{display:inline-block;margin-top:12px;padding:3px 8px;border-radius:6px;background:var(--bg2);font:600 12px/1.5 var(--mono)}
@media (max-width:980px){.fd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fd-cards{grid-template-columns:minmax(0,1fr)}}
.fd-cant{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:24px;font-size:15px;color:var(--grey)}
.fd-cant span{display:inline-flex;align-items:center;gap:6px}
.fd-cant .fd-i{width:16px;height:16px;color:var(--err)}
.fd-why{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.fd-why li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px}
.fd-why .ic{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ok-soft);color:var(--ok)}
.fd-why .ic .fd-i{width:20px;height:20px}
.fd-why h3{font-size:17px;align-self:center}
.fd-why p{color:var(--grey);font-size:15px}
@media (max-width:860px){.fd-why{grid-template-columns:minmax(0,1fr)}}
.fd-faq{max-width:780px;margin:0 auto}
.fd-faq details{border-bottom:1px solid var(--line)}
.fd-faq details:first-child{border-top:1px solid var(--line)}
.fd-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0;padding:14px 12px;border-radius:12px;font-weight:700;font-size:17px;line-height:1.35;transition:background-color 150ms var(--ease)}
.fd-faq summary:hover{background:var(--bg2)}
.fd-faq summary::-webkit-details-marker{display:none}
.fd-faq summary .fd-pm{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);transition:rotate 220ms var(--ease)}
.fd-faq summary .fd-pm .fd-i{width:17px;height:17px}
.fd-faq details[open] summary .fd-pm{rotate:45deg}
.fd-faq details > div{padding:0 12px 18px;color:var(--grey)}
.fd-faq details > div p + p{margin-top:10px}
/* smooth open where the browser can animate to auto height */
@supports (interpolate-size:allow-keywords){
  .fd-faq{interpolate-size:allow-keywords}
  .fd-faq details::details-content{height:0;overflow:clip;transition:height 260ms var(--ease),content-visibility 260ms allow-discrete}
  .fd-faq details[open]::details-content{height:auto}
  @media (prefers-reduced-motion:reduce){.fd-faq details::details-content{transition:none}}
}
.fd-prose{max-width:760px;margin:0 auto}
.fd-prose h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:12px}
.fd-prose h2:not(:first-child){margin-top:44px}
.fd-prose p,.fd-prose li{font-size:17px;color:var(--grey)}
.fd-prose p + p,.fd-prose p + ul,.fd-prose p + ol,.fd-prose ul + p,.fd-prose ol + p,.fd-prose p + .fd-table-wrap{margin-top:14px}
.fd-prose b{color:var(--ink)}
.fd-prose ol,.fd-prose ul{padding-left:1.25em}
.fd-prose li + li{margin-top:8px}
.fd-prose code{font:500 14px/1.4 var(--mono);padding:2px 6px;border-radius:6px;background:var(--bg2);color:var(--ink);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fd-table-wrap{overflow-x:auto}
.fd-table{width:100%;border-collapse:collapse;font-size:15px}
.fd-table th,.fd-table td{text-align:left;vertical-align:top;padding:12px 10px 12px 0;border-bottom:1px solid var(--line)}
.fd-table thead th{font-size:13px;color:var(--grey);font-weight:600}
.fd-table tbody th{font-weight:700;color:var(--ink);width:34%}
.fd-legal{padding:48px 0 88px}
.fd-legal .fd-wrap{max-width:760px}
.fd-legal h1{font-size:clamp(34px,4.4vw,48px)}
.fd-legal h2{font-size:22px;margin-top:36px}
.fd-legal p,.fd-legal li{margin-top:10px;font-size:17px;color:var(--grey)}
.fd-legal b{color:var(--ink)}
.fd-legal ul{padding-left:1.2em}
.fd-legal code{font:500 14px/1.4 var(--mono);padding:1px 5px;border-radius:5px;background:var(--bg2)}
.fd-final{padding:72px 0 80px;text-align:center}
.fd-final h2{font-size:clamp(28px,3.4vw,40px)}
.fd-final p{margin-top:10px;color:var(--grey)}
footer{padding:40px 0 44px;border-top:1px solid var(--line);background:var(--bg2)}
.fd-foot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:24px;font-size:15px}
.fd-foot-brand{display:flex;align-items:center;gap:9px;font:800 19px/1 var(--sans);letter-spacing:-.03em;margin-bottom:12px}
.fd-foot p{max-width:44ch;color:var(--grey);font-size:14px}
.fd-foot nav{display:flex;flex-direction:column;gap:8px}
.fd-foot a{text-decoration:none;color:var(--grey)}
.fd-foot a:hover{color:var(--ink)}
@media (max-width:700px){.fd-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fd-foot > div{grid-column:1 / -1}}

/* ---------- toast ---------- */
.fd-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;translate:-50% 0;display:flex;align-items:center;gap:8px;opacity:1;max-width:calc(100% - 32px);padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;box-shadow:0 12px 32px rgba(0,0,0,.25);transition:opacity 260ms var(--ease),translate 260ms var(--ease)}
.fd-toast[hidden]{display:none}
@starting-style{.fd-toast{opacity:0;translate:-50% 12px}}
@media (prefers-reduced-motion:reduce){@starting-style{.fd-toast{translate:-50% 0}}}
body:has(.fd-selbar:not([hidden])) .fd-toast{bottom:calc(88px + env(safe-area-inset-bottom))}

/* =================================================================================================
   v4 effects layer (2026-10-30): dark story-wall hero, glass tool with a live border, word rise,
   cursor glow, bento tiles that each animate one idea. Two perpetual loops only (the wall, the border),
   both paused off-screen and off for reduced motion.
   ================================================================================================= */
@property --fd-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.fd-stage{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#0A0A0B calc(100% - 150px),var(--bg));color:#F2F1EE;text-align:center;padding:96px 0 168px}
.fd-stage::before{content:"";position:absolute;z-index:-1;left:50%;top:20px;width:min(900px,120vw);height:560px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,0,.20),rgba(255,236,0,.06) 55%,transparent);filter:blur(20px)}

.fd-stage .fd-wrap{position:relative;z-index:2}
.fd-stage .fd-wrap::before{content:"";position:absolute;z-index:-1;left:50%;top:-110px;width:min(1100px,130vw);height:calc(100% + 220px);translate:-50% 0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,10,11,.86),rgba(10,10,11,.62) 55%,transparent);
  -webkit-mask-image:linear-gradient(#000 58%,transparent 84%);mask-image:linear-gradient(#000 58%,transparent 84%)}
/* cursor light: follows the pointer over the stage (fine pointers only) */
.fd-stage .fd-torch{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 400ms var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(255,246,140,.08),transparent 60%)}
@media (hover:hover) and (pointer:fine){.fd-stage:hover .fd-torch{opacity:1}}

/* the corridor: snaps flow left to right through the tool. Left wall = stories fading (grey, a timer running out),
   right wall = the same moments saved (full colour, a "Saved" tag). Each wall leans into depth toward the centre. */
.fd-flow{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:1000px;perspective-origin:50% 46%;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 230px),transparent calc(100% - 120px));mask-image:linear-gradient(#000 calc(100% - 230px),transparent calc(100% - 120px))}
.fd-side{position:absolute;top:34px;width:56%;display:grid;gap:16px}
.fd-side.in{left:-6%;transform:rotateY(42deg);transform-origin:0 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 26%,transparent 80%);mask-image:linear-gradient(90deg,#000 26%,transparent 80%)}
.fd-side.out{right:-6%;transform:rotateY(-42deg);transform-origin:100% 50%;
  -webkit-mask-image:linear-gradient(270deg,#000 26%,transparent 80%);mask-image:linear-gradient(270deg,#000 26%,transparent 80%)}
.fd-flow .lane{overflow:visible}
.fd-flow .track{display:flex;gap:16px;width:max-content}
.fd-flow .c{position:relative;flex:none;width:118px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#1B1B1D;box-shadow:0 18px 36px -16px rgba(0,0,0,.9)}
.fd-flow .c img{width:100%;height:100%;object-fit:cover}
.fd-flow .tag{position:absolute;left:7px;top:7px;display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;font:700 10px/1 var(--mono);white-space:nowrap}
.fd-flow .tag .fd-i{width:10px;height:10px}
.fd-side.in .c{opacity:.62}
.fd-side.in .c img{filter:grayscale(1) brightness(.62) contrast(.92)}
.fd-side.in .tag{background:rgba(10,10,11,.72);color:#FFF6A6;box-shadow:inset 0 0 0 1px rgba(255,246,166,.25)}
.fd-side.out .c{box-shadow:0 18px 36px -16px rgba(0,0,0,.9),0 0 0 1.5px rgba(76,194,126,.55)}
.fd-side.out .tag{background:rgba(10,10,11,.72);color:#4CC27E;box-shadow:inset 0 0 0 1px rgba(76,194,126,.35)}
@media (prefers-reduced-motion:no-preference){
  .fd-flow .track{animation:fd-flow var(--t,50s) linear infinite}
  .fd-flow .lane:nth-child(2) .track{animation-delay:-17s}
  .fd-flow .lane:nth-child(3) .track{animation-delay:-31s}
  .fd-stage.paused .fd-flow .track,.fd-stage.paused .fd-glass::before{animation-play-state:paused}
}
@keyframes fd-flow{from{translate:-50% 0}to{translate:0 0}}
.fd-gate{display:none}
@media (max-width:860px){
  /* phones: no 3D walls. One lane at the top, above the title; a snap turns from fading (grey, timer) to saved as it crosses the line */
  .fd-side{display:none}
  .fd-flow{-webkit-mask-image:none;mask-image:none}
  .fd-stage:has(.fd-gate),.fd-stage.slim:has(.fd-gate){padding-top:206px}
  .fd-gate{display:block;position:absolute;left:0;right:0;top:24px;height:150px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .fd-gate .lane{position:absolute;inset:0}
  .fd-gate .ghost{clip-path:inset(-20px 50% -20px 0)}
  .fd-gate .saved{clip-path:inset(-20px 0 -20px 50%)}
  .fd-gate .track{gap:12px;animation-duration:30s}
  .fd-gate .c{width:84px;border-radius:12px}
  .fd-gate .ghost .c{opacity:.78}
  .fd-gate .ghost .c img{filter:grayscale(1) brightness(.7) contrast(.92)}
  .fd-gate .ghost .tag{background:rgba(10,10,11,.72);color:#FFF6A6}
  .fd-gate .saved .c{box-shadow:0 0 0 1.5px rgba(76,194,126,.55)}
  .fd-gate .saved .tag{background:rgba(10,10,11,.72);color:#4CC27E}
  .fd-gate .tag{left:5px;top:5px;padding:3px 5px;font-size:8.5px}
  .fd-gate::after{content:"";position:absolute;left:50%;top:-10px;bottom:-10px;width:2px;translate:-1px 0;border-radius:2px;
    background:linear-gradient(transparent,#FFFC00 20%,#FFF6A6 50%,#FFFC00 80%,transparent);box-shadow:0 0 18px 2px rgba(255,252,0,.45)}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .fd-gate .track{animation:fd-flow 30s linear infinite}
  .fd-stage.paused .fd-gate .track{animation-play-state:paused}
}

.fd-stage .fd-badge{background:rgba(255,255,255,.06);color:#F2F1EE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fd-stage .fd-badge .fd-i{color:#4CC27E}
.fd-stage h1{margin:20px auto 0;font-size:clamp(44px,7.2vw,92px);line-height:1;letter-spacing:-.04em;max-width:none}
.fd-stage h1 .w{display:inline-block}
.fd-stage h1 .accent{background:linear-gradient(100deg,#FFFDE0,#FFFC00 45%,#FFF59A 75%,#FFEA00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.fd-stage .fd-lede{color:rgba(242,241,238,.68);max-width:46ch}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-stage h1 .w{opacity:0;translate:0 .4em;filter:blur(6px);animation:fd-word 900ms var(--ease) both;animation-delay:calc(150ms + var(--i,0) * 120ms)}
  html.js .fd-stage h1 .accent{animation:fd-word 900ms var(--ease) both,fd-sheen 3.2s ease-in-out 1.4s 1 both;animation-delay:calc(150ms + var(--i,0) * 120ms),1.4s}
}
@keyframes fd-word{to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes fd-sheen{from{background-position:100% 0}to{background-position:0 0}}

/* the tool on the stage: glass card with a slowly turning light around its edge */
.fd-glass{position:relative;margin:34px auto 0;max-width:760px;padding:1px;border-radius:20px;background:rgba(255,255,255,.08)}
.fd-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--fd-a),transparent 0deg,rgba(255,150,100,.5) 60deg,transparent 120deg,transparent 240deg,rgba(255,190,150,.28) 300deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (prefers-reduced-motion:no-preference){.fd-glass::before{animation:fd-turn 7s linear infinite}}
@keyframes fd-turn{to{--fd-a:360deg}}
.fd-glass .fd-tool{margin:0;max-width:none;padding:14px;border-radius:19px;background:rgba(18,18,20,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.fd-glass .fd-field{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fd-glass .fd-field:focus-within{box-shadow:inset 0 0 0 2px #FF7A2F,0 0 0 6px rgba(255,236,0,.13)}
.fd-glass .fd-field input{color:#F2F1EE}
.fd-glass .fd-field input::placeholder{color:rgba(242,241,238,.5)}
.fd-glass .fd-field > .fd-i{color:rgba(242,241,238,.5)}
.fd-glass .fd-paste{background:rgba(255,255,255,.08);color:#F2F1EE}
.fd-glass .fd-paste:hover{background:rgba(255,255,255,.14)}
.fd-glass .fd-detect{color:rgba(242,241,238,.6)}
.fd-glass .fd-detect.ok{color:#4CC27E}
.fd-glass .fd-detect.no,.fd-glass .fd-msg{color:#FF8A7E}
.fd-glass .fd-under{margin:0 6px;min-height:0;text-align:left}.fd-stage .fd-glass .fd-under{min-height:35px}.fd-glass .fd-detect:not(:empty){margin-top:10px}
.fd-glass .fd-msg{text-align:left;margin:8px 6px 0}
.fd-works{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font-size:14px;color:rgba(242,241,238,.55)}
.fd-works span{display:inline-flex;align-items:center;gap:6px}
.fd-works .fd-i{width:15px;height:15px;color:rgba(255,190,150,.8)}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-stage .fd-rise{opacity:0;translate:0 16px;animation:fd-word 800ms var(--ease) both;filter:none;animation-delay:var(--d,600ms)}
}
@media (max-width:560px){.fd-stage{padding:56px 0 64px}.fd-glass .fd-tool{padding:10px}}
.fd-stage.slim{padding:72px 0 84px}
.fd-stage.slim h1{font-size:clamp(38px,5.6vw,72px)}
.fd-stage .fd-crumbs a{color:#F2F1EE}
.fd-stage .fd-crumbs ol{color:rgba(242,241,238,.55)}

/* button: a sheen passes over it on hover */
.fd-btn{position:relative;overflow:hidden}
.fd-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);translate:-120% 0;pointer-events:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.fd-btn:hover::after{translate:120% 0;transition:translate 700ms var(--ease)}}
.fd-btn.line::after{display:none}

/* cursor glow on cards: a soft light under the pointer and a lit edge */
.fd-glow{position:relative}
.fd-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,236,0,.08),transparent 60%)}
@media (hover:hover) and (pointer:fine){.fd-glow:hover::before{opacity:1}}

/* bento: six tiles, each animates its own idea once when it scrolls in */
.fd-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px}
.fd-tile2{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:24px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;min-width:0}
.fd-tile2 h3{font-size:20px}
.fd-tile2 p{color:var(--grey);font-size:15px;max-width:40ch}
.fd-tile2 .art{flex:1;position:relative;display:grid;place-items:center;min-height:120px;margin-bottom:12px}
.fd-tile2.big{grid-column:span 2;grid-row:span 2}
.fd-tile2.wide{grid-column:span 2}
.fd-tile2.ink{background:#141414;color:#F2F1EE;box-shadow:none}
.fd-tile2.ink p{color:#A6A49F}
@media (max-width:980px){.fd-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.fd-tile2.big{grid-column:span 2;grid-row:auto}}
@media (max-width:560px){.fd-bento{grid-template-columns:minmax(0,1fr)}.fd-tile2.big,.fd-tile2.wide{grid-column:auto}}
/* fan of snaps */
.fd-fan{position:relative;width:100%;height:300px}
.fd-fan img{position:absolute;left:50%;top:50%;width:150px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45);translate:-50% -50%;
  transition:rotate 700ms var(--ease),translate 700ms var(--ease)}
.fd-fan .f1{rotate:-14deg;translate:-120% -46%}
.fd-fan .f2{rotate:-5deg;translate:-80% -52%}
.fd-fan .f3{rotate:5deg;translate:-20% -52%}
.fd-fan .f4{rotate:14deg;translate:20% -46%}
.fd-fan .tag{position:absolute;z-index:2;padding:6px 10px;border-radius:999px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font:600 12px/1 var(--mono)}
.fd-fan .t1{left:6%;bottom:8%}.fd-fan .t2{right:8%;top:6%}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-tile2:not(.in) .fd-fan img{rotate:0deg;translate:-50% -50%}
  @media (hover:hover) and (pointer:fine){.fd-tile2.big:hover .fd-fan .f1{translate:-135% -44%;rotate:-18deg}.fd-tile2.big:hover .fd-fan .f4{translate:35% -44%;rotate:18deg}}
}
@media (max-width:560px){.fd-fan{height:240px}.fd-fan img{width:118px}}
/* files dropping into a ZIP */
.fd-zip{position:relative;width:220px;height:130px}
.fd-zip .file{position:absolute;left:50%;top:0;width:150px;padding:8px 10px;border-radius:10px;background:var(--bg2);font:600 12px/1.2 var(--mono);text-align:left;translate:-50% 0;box-shadow:inset 0 0 0 1px var(--line)}
.fd-zip .file:nth-child(1){top:2px;left:44%;rotate:-7deg;color:transparent}.fd-zip .file:nth-child(2){top:10px;left:56%;rotate:6deg;color:transparent}.fd-zip .file:nth-child(3){top:22px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.fd-zip .box{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:800}
.fd-zip .box .fd-i{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-tile2 .fd-zip .file{translate:-50% -40px;opacity:0;transition:translate 700ms var(--ease),opacity 500ms var(--ease);transition-delay:calc(200ms + var(--k,0) * 160ms)}
  html.js .fd-tile2.in .fd-zip .file{translate:-50% 0;opacity:1}
  html.js .fd-tile2 .fd-zip .box{transition:scale 300ms var(--ease) 950ms}
  html.js .fd-tile2.in .fd-zip .box{scale:1.06}
}
/* play bar */
.fd-play2{width:100%;max-width:220px}
.fd-play2 .scr{display:grid;place-items:center;aspect-ratio:16/10;border-radius:12px;background:#141414 center/cover;color:#fff}
.fd-play2 .scr span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#141414}
.fd-play2 .scr .fd-i{width:18px;height:18px}
.fd-play2 .bar{height:4px;margin-top:10px;border-radius:4px;background:var(--line);overflow:hidden}
.fd-play2 .bar b{display:block;height:100%;width:100%;background:var(--brand-text);transform-origin:left;scale:.62 1}
@media (prefers-reduced-motion:no-preference){html.js .fd-tile2 .fd-play2 .bar b{scale:0 1;transition:scale 2.2s var(--ease) 300ms}html.js .fd-tile2.in .fd-play2 .bar b{scale:.62 1}}
/* ads being removed */
.fd-noads{display:grid;gap:8px;width:100%;max-width:220px}
.fd-noads span{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:repeating-linear-gradient(45deg,var(--bg2) 0 8px,var(--card) 8px 16px);box-shadow:inset 0 0 0 1px var(--line);font:700 12px/1 var(--mono);color:var(--grey)}
.fd-noads span::after{content:"";width:60%;height:2px;background:var(--err);transform-origin:left;scale:1 1}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-tile2 .fd-noads span::after{scale:0 1;transition:scale 500ms var(--ease);transition-delay:calc(300ms + var(--k,0) * 180ms)}
  html.js .fd-tile2.in .fd-noads span::after{scale:1 1}
  html.js .fd-tile2 .fd-noads span{transition:opacity 500ms var(--ease);transition-delay:calc(800ms + var(--k,0) * 180ms)}
  html.js .fd-tile2.in .fd-noads span{opacity:.35}
}
/* real-file chips */
.fd-spec2{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fd-spec2 span{padding:8px 12px;border-radius:999px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--mono)}
.fd-spec2 span.hot{background:var(--brand-soft);color:var(--brand-text);box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-tile2 .fd-spec2 span{opacity:0;translate:0 8px;transition:opacity 400ms var(--ease),translate 400ms var(--ease);transition-delay:calc(200ms + var(--k,0) * 110ms)}
  html.js .fd-tile2.in .fd-spec2 span{opacity:1;translate:0 0}
}
/* lock + ring */
.fd-lock{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--ok-soft);color:var(--ok)}
.fd-lock .fd-i{width:30px;height:30px}
.fd-lock::after{content:"";position:absolute;inset:-10px;border-radius:28px;box-shadow:0 0 0 2px var(--ok);opacity:0}
@media (prefers-reduced-motion:no-preference){html.js .fd-tile2.in .fd-lock::after{animation:fd-ring 1.4s var(--ease) 300ms 2}}
@keyframes fd-ring{from{opacity:.6;scale:.8}to{opacity:0;scale:1.25}}
/* @username typing */
.fd-type{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--mono);max-width:100%}
.fd-type span{white-space:nowrap;overflow:hidden}
.fd-type i{width:2px;height:16px;background:var(--mark)}
@media (prefers-reduced-motion:no-preference){
  html.js .fd-tile2 .fd-type span{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s steps(13) 300ms}
  html.js .fd-tile2.in .fd-type span{clip-path:inset(0 0 0 0)}
}
.fd-cant2{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font-size:15px;color:var(--grey)}
.fd-cant2 span{display:inline-flex;align-items:center;gap:6px}
.fd-cant2 .fd-i{width:16px;height:16px;color:var(--err)}

/* closing call: dark, with the glow */
.fd-final.dark{position:relative;isolation:isolate;overflow:hidden;background:#0A0A0B;color:#F2F1EE}
.fd-final.dark::before{content:"";position:absolute;z-index:-1;left:50%;top:60%;width:min(760px,120vw);height:420px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,0,.18),transparent);filter:blur(16px)}
.fd-final.dark h2{font-size:clamp(34px,4.6vw,56px)}
.fd-final.dark p{color:rgba(242,241,238,.62)}
.fd-final.dark .fd-glass{margin-top:30px}

/* =================================================================================================
   v5 (review fixes): header actions, example links in the box, the results demo, one feature grid
   ================================================================================================= */
.fd-navcta{margin-left:4px}
.fd-theme{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);color:#F2F1EE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fd-theme:hover{background:rgba(255,255,255,.12)}
.fd-theme .fd-i{width:18px;height:18px}
.fd-theme .moon{display:none}
:root[data-theme="dark"] .fd-theme .sun{display:none}
:root[data-theme="dark"] .fd-theme .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fd-theme .sun{display:none}:root:not([data-theme="light"]) .fd-theme .moon{display:block}}
.fd-head .fd-wrap .fd-actions2{display:flex;align-items:center;gap:8px}
@media (max-width:820px){.fd-navcta{display:none}.fd-menu-btn{margin-left:0}.fd-head .fd-wrap .fd-actions2{margin-left:auto}}

/* example links type into the empty box, with the badge the real detector shows */
.fd-example{display:flex;align-items:center;gap:6px;font-size:14px;color:rgba(242,241,238,.55)}
.fd-example b{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(76,194,126,.14);color:#7FD9A4;font-weight:600;font-size:13px;opacity:0;transition:opacity 250ms var(--ease)}
.fd-example b.on{opacity:1}
.fd-example b .fd-i{width:13px;height:13px}
.fd-example[hidden]{display:none}
.fd-glass .fd-under .fd-example{margin-top:10px}

/* real, counted social proof (shown only once there is something worth showing) */
.fd-stat{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:rgba(242,241,238,.7)}
.fd-stat[hidden]{display:none}
.fd-stat .fd-i{width:16px;height:16px;color:#7FD9A4}

/* the results demo: the real result card, with sample photos, playing select -> ZIP once */
/* one feature grid: a single wide feature card, then six equal tiles */
.fd-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;padding:28px 32px;margin-bottom:16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.fd-feature h3{font-size:clamp(22px,2.4vw,28px)}
.fd-feature p{margin-top:8px;color:var(--grey);font-size:16px;max-width:42ch}
.fd-feature .fd-fan{height:280px}
.fd-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fd-tiles .fd-tile2 .art{min-height:120px;flex:none;height:132px}
@media (max-width:980px){.fd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .fd-feature{grid-template-columns:minmax(0,1fr);padding:22px;gap:8px}
  .fd-feature .fd-fan{height:210px}
  .fd-feature .fd-fan img{width:96px}
  .fd-tiles{grid-template-columns:minmax(0,1fr)}
  .fd-tiles .fd-tile2{padding:20px}
  .fd-tiles .fd-tile2 .art{height:104px;min-height:0;margin-bottom:6px}
  .fd-mini{height:126px}
  .fd-steps li{padding:20px}
}
.fd-filter .fd-chipbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:var(--bg2);font-weight:600;font-size:14px}
.fd-filter .fd-chipbtn b{margin-left:4px;font-weight:700}
.fd-filter .fd-chipbtn.on{background:var(--ink);color:var(--bg)}
.fd-tiles .fd-tile2{justify-content:flex-start}
@media (max-width:640px){.fd-owner .fd-open{flex-basis:100%}}

/* ==========================================================================
   v6: save options (format + real quality) and "download several" with a review step
   ========================================================================== */
.fd-save2{display:flex;gap:6px}
.fd-save2 .fd-btn:first-child{flex:1;min-width:0}
.fd-save2 .fd-optbtn{flex:none;width:40px;padding:0}
@media (max-width:640px){.fd-save2 .fd-btn:first-child{padding:0 8px}.fd-save2 .fd-btn:first-child .fd-i{display:none}}
.fd-picking .fd-tile .fd-ph{cursor:pointer}

/* the picker */
.fd-optpanel.fd-inline{margin-top:22px;max-width:440px}
.fd-opt-wait{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--grey);font-weight:600;font-size:15px}
.fd-optgroup + .fd-optgroup{margin-top:16px}
.fd-optlabel{margin-bottom:8px;font-size:14px;font-weight:700;color:var(--grey)}
.fd-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--bg2)}
.fd-seg button{appearance:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;border-radius:9px;font:700 14px/1.1 var(--sans);color:var(--grey);
  transition:background-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease)}
.fd-seg button .fd-i{width:17px;height:17px;flex:none}
.fd-seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.fd-qlist{display:grid;gap:8px}
.fd-qlist button{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:12px;background:var(--card);color:var(--ink);text-align:left;box-shadow:inset 0 0 0 1px var(--line2);
  transition:box-shadow 160ms var(--ease),background-color 160ms var(--ease)}
.fd-qlist button[aria-checked="true"]{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--mark)}
.fd-qlist .r{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow 160ms var(--ease)}
.fd-qlist button[aria-checked="true"] .r{box-shadow:inset 0 0 0 6px var(--mark)}
.fd-qlist b{display:block;font-size:15px;line-height:1.3}
.fd-qlist small{display:block;font:500 13px/1.4 var(--mono);color:var(--grey)}
.fd-optnote{margin-top:12px;font-size:14px;line-height:1.5;color:var(--grey)}
.fd-optnote .fd-i{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.fd-go{margin-top:16px}

/* the sheet: a card on wide screens, a bottom sheet on phones */
.fd-optsdlg{margin:auto;border:0;padding:0;background:transparent;color:var(--ink);width:min(460px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible}
.fd-optsdlg.fd-basket{width:min(640px,calc(100% - 32px))}
.fd-optsdlg::backdrop{background:rgba(0,0,0,.55)}
.fd-optscard{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border-radius:20px;background:var(--card);box-shadow:0 24px 64px rgba(0,0,0,.3)}
.fd-basket .fd-optscard{overscroll-behavior:contain}
.fd-optshead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.fd-optshead h2{font-size:21px;line-height:1.2;letter-spacing:-.01em}
.fd-optswhat{margin-top:3px;font-size:14px;color:var(--grey)}
.fd-xbtn{appearance:none;border:0;cursor:pointer;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bg2);color:var(--ink);transition:background-color 150ms var(--ease)}
.fd-xbtn:hover{background:var(--line)}
.fd-xbtn .fd-i{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){
  .fd-optsdlg[open]{animation:fd-sheet 280ms var(--ease)}
  .fd-optsdlg[open]::backdrop{animation:fd-fade 200ms linear}
}
@keyframes fd-sheet{from{opacity:0;translate:0 18px}}
@keyframes fd-fade{from{opacity:0}}
@media (max-width:640px){
  .fd-optsdlg,.fd-optsdlg.fd-basket{margin:auto 0 0;width:100%;max-height:92dvh}
  .fd-optscard{max-height:92dvh;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
}

/* download several: quick select */
.fd-quick{margin-top:12px;padding:12px;border-radius:14px;background:var(--bg2)}
.fd-quick[hidden]{display:none}
.fd-quick p{margin-bottom:8px;font-size:14px;font-weight:700;color:var(--grey)}
.fd-quick .fd-filter button{background:var(--card);box-shadow:inset 0 0 0 1px var(--line2)}
.fd-quick .fd-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.fd-quick .fd-filter button{display:inline-flex;align-items:center;gap:5px}
.fd-quick .fd-filter button b{margin-left:0}
.fd-quick .fd-filter button .fd-i{width:14px;height:14px;flex:none}
.fd-selbar p{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.fd-selbar p b{font-size:15px}
.fd-selbar p span{font-size:13px;font-weight:600;opacity:.7}
.fd-selbar .fd-btn.line{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 40%,transparent)}

/* download several: the review */
.fd-bk{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.fd-bklist{min-height:min(190px,32dvh);flex:1 1 auto;overflow:auto;margin:0 -20px;padding:8px 20px 4px;overscroll-behavior:contain}
.fd-bkgroup + .fd-bkgroup{margin-top:18px}
.fd-bkgroup h3{margin-bottom:10px;font-size:15px;line-height:1.3}
.fd-bkgroup h3 b{margin-left:4px;font:600 13px/1 var(--mono);color:var(--grey)}
.fd-bkgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:12px 10px}
.fd-bkgrid li{position:relative}
.fd-bkgrid .fd-ph{cursor:default;border-radius:9px}
.fd-bkgrid .fd-play{left:4px;bottom:4px;padding:2px 5px;font-size:10px}
.fd-bkgrid .fd-play .fd-i{width:9px;height:9px}
.fd-bkx{appearance:none;border:0;cursor:pointer;position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);box-shadow:0 0 0 2px var(--card)}
.fd-bkx::before{content:"";position:absolute;inset:-9px}
.fd-bkx .fd-i{width:13px;height:13px}
@media (max-width:640px){.fd-bklist{margin:0 -16px;padding:8px 16px 4px}}
.fd-bkfoot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.fd-bkfoot > .fd-btn{white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
.fd-bkprog{display:grid;gap:6px;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--grey)}
.fd-bkprog i{display:block;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--mark) calc(var(--p) * 100%),var(--bg2) 0)}
.fd-bkall{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:12px;background:var(--ok-soft);color:var(--ok);font-weight:700}
.fd-bkmore{margin-top:10px}
.fd-bkmore summary{cursor:pointer;width:fit-content;padding:6px 0;font-size:14px;font-weight:700;color:var(--ink)}
.fd-bkpartlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;max-height:min(140px,22dvh);overflow:auto;margin-top:6px;padding:2px}
.fd-bkpartlist .fd-btn{padding:0 8px;gap:5px;font-size:13px}
.fd-bkpartlist .fd-btn .fd-i{width:14px;height:14px}
.fd-bkpartlist .fd-btn small{font:500 12px/1 var(--mono);color:var(--grey)}
.fd-bkpartlist .fd-btn.done small{color:inherit}

/* ==========================================================================
   v9: "What lands in your Downloads": five big file cards. Each one downloads (ring), then shows what its format is:
   the video plays, the full-size photo sharpens inside its measure marks, the sound moves, the GIF loops, the ZIP fans open
   ========================================================================== */
.fd-dl-sec{padding-top:28px}
.fd-shelf{max-width:1060px;margin:0 auto}
.fd-files{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ff{min-width:0;transition:translate 260ms var(--ease)}
@media (hover:hover) and (pointer:fine){.ff:hover{translate:0 -6px}.ff:hover .pic{box-shadow:0 26px 50px -22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}}
.ff .pic{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111113;isolation:isolate;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow 260ms var(--ease)}
.ff .pic > img{width:100%;height:100%;object-fit:cover}
.ff .fmt{position:absolute;z-index:3;left:10px;top:10px;padding:5px 8px;border-radius:8px;background:rgba(10,10,11,.7);color:#fff;font:700 11.5px/1 var(--mono);letter-spacing:.05em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ff .play{position:absolute;z-index:3;left:10px;bottom:14px;display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:rgba(10,10,11,.66);color:#fff;font:600 11.5px/1 var(--mono)}
.ff .play .fd-i{width:10px;height:10px}
.ff .nm{margin-top:12px;display:grid;gap:3px;min-width:0}
.ff .nm b{display:block;min-height:2.5em;font:600 13px/1.25 var(--mono);overflow-wrap:anywhere}
.ff .nm small{font-size:13px;line-height:1.35;color:var(--grey)}
/* video: a play bar runs along the bottom */
.vid .bar{position:absolute;z-index:3;left:10px;right:10px;bottom:6px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.vid .bar i{display:block;height:100%;background:#FFFC00;transform-origin:left;transform:scaleX(.35)}
/* full-size photo: measure marks in the corners and the true size */
.full .cm{position:absolute;z-index:3;width:18px;height:18px;border:2px solid rgba(255,255,255,.85)}
.full .cm.a{left:8px;top:40px;border-right:0;border-bottom:0}.full .cm.b{right:8px;top:40px;border-left:0;border-bottom:0}
.full .cm.c{left:8px;bottom:8px;border-right:0;border-top:0}.full .cm.d{right:8px;bottom:8px;border-left:0;border-top:0}
.full .size{position:absolute;z-index:3;left:50%;bottom:16px;translate:-50% 0;padding:5px 9px;border-radius:999px;background:rgba(10,10,11,.7);color:#fff;font:600 11.5px/1 var(--mono);white-space:nowrap}
/* audio */
.aud .pic{display:grid;place-items:center;align-content:center;gap:22px;background:radial-gradient(120% 70% at 50% 0%,#2F2D0A,#0B0B0B 72%);color:#FFF6A6}
.aud .note{width:34px;height:34px}
.aud .wave{display:flex;align-items:center;gap:3px;height:70px}
.aud .wave i{display:block;width:3px;height:calc(var(--h) * 1%);border-radius:3px;background:linear-gradient(#FFF6A6,#FFFC00)}
/* ZIP: three snaps that fan out of one file */
.zip .pic{background:radial-gradient(120% 70% at 50% 0%,#26262C,#0B0B0B 72%)}
.zip .fan{position:absolute;inset:0;display:grid;place-items:center}
.zip .fan span{position:absolute;width:52%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 0 2px #1B1B1D;transition:rotate 700ms cubic-bezier(.34,1.4,.64,1),translate 700ms cubic-bezier(.34,1.4,.64,1)}
.zip .fan img{width:100%;height:100%;object-fit:cover}
.zip .fan span:nth-child(1){rotate:-11deg;translate:-21% 4%}
.zip .fan span:nth-child(2){rotate:10deg;translate:21% 2%}
.zip .fan span:nth-child(3){rotate:-1deg;translate:0 -3%}
.zip .fan span:not(:last-child) img{filter:brightness(.75)}
/* the download: a ring fills over a dimmed card, then a tick */
.ff .dl{position:absolute;z-index:4;left:50%;top:50%;width:56px;height:56px;translate:-50% -50%;display:grid;place-items:center;color:#fff;opacity:0}
.ff .dl .ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.ff .dl circle{fill:none;stroke-width:3.5}
.ff .dl .t{stroke:rgba(255,255,255,.22)}
.ff .dl .p{stroke:#FFFC00;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:0}
.ff .dl .fd-i{width:18px;height:18px}
.ff .ok{position:absolute;z-index:4;right:10px;top:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#4CC27E;color:#0B0B0B}
.ff .ok .fd-i{width:13px;height:13px}
.ff .pic::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(5,5,6,.55);opacity:0;pointer-events:none}
.fd-shelfsum{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto 0;max-width:520px}
.fd-shelfsum .line{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.fd-shelfsum .line i{display:block;height:100%;background:var(--ok);transform-origin:left}
.fd-shelfsum .txt{display:grid;font:600 13px/1 var(--mono);color:var(--grey);white-space:nowrap}
.fd-shelfsum .txt > span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px}
.fd-shelfsum .txt .a{opacity:0}
.fd-shelfsum .txt .fd-i{width:14px;height:14px;color:var(--ok)}
.fd-cap{margin-top:12px;text-align:center;font-size:13px;color:var(--grey)}

@media (prefers-reduced-motion:no-preference){
  /* arrival: cards rise in, each downloads in turn (ring fills, veil lifts, tick pops), then the summary turns green */
  html.js .fd-shelf:not(.in) .ff{opacity:0;translate:0 22px}
  html.js .fd-shelf.in .ff{transition:opacity 460ms var(--ease),translate 560ms var(--ease);transition-delay:calc(var(--k) * 90ms)}
  html.js .fd-shelf .ff .pic::after{opacity:1}
  html.js .fd-shelf.in .ff .pic::after{opacity:0;transition:opacity 420ms var(--ease) calc(1250ms + var(--k) * 300ms)}
  html.js .fd-shelf .ff .dl{opacity:1}
  html.js .fd-shelf:not(.in) .ff .dl .p{stroke-dashoffset:113.1}
  html.js .fd-shelf.in .ff .dl .p{transition:stroke-dashoffset 820ms cubic-bezier(.45,0,.2,1) calc(420ms + var(--k) * 300ms)}
  html.js .fd-shelf.in .ff .dl{opacity:0;scale:1.25;transition:opacity 260ms linear calc(1250ms + var(--k) * 300ms),scale 360ms var(--ease) calc(1250ms + var(--k) * 300ms)}
  html.js .fd-shelf:not(.in) .ff .ok{opacity:0;scale:.3}
  html.js .fd-shelf.in .ff .ok{transition:opacity 200ms linear calc(1300ms + var(--k) * 300ms),scale 460ms cubic-bezier(.34,1.56,.64,1) calc(1300ms + var(--k) * 300ms)}
  html.js .fd-shelf:not(.in) .fd-shelfsum .line i{transform:scaleX(0)}
  html.js .fd-shelf.in .fd-shelfsum .line i{transition:transform 2.2s cubic-bezier(.45,0,.2,1) .4s}
  html.js .fd-shelf:not(.in) .fd-shelfsum .txt .a{opacity:1}
  html.js .fd-shelf:not(.in) .fd-shelfsum .txt .b{opacity:0}
  html.js .fd-shelf.in .fd-shelfsum .txt .a{opacity:0;transition:opacity 200ms linear 2.6s}
  html.js .fd-shelf.in .fd-shelfsum .txt .b{transition:opacity 300ms linear 2.7s}
  /* the full-size photo comes in soft (a preview) and sharpens to the full file */
  html.js .fd-shelf:not(.in) .full .pic > img{filter:blur(7px);scale:1.06}
  html.js .fd-shelf.in .full .pic > img{transition:filter 700ms var(--ease) 1.6s,scale 900ms var(--ease) 1.6s}
  html.js .fd-shelf:not(.in) .full .cm{opacity:0;scale:1.6}
  html.js .fd-shelf.in .full .cm{transition:opacity 300ms linear 1.9s,scale 500ms var(--ease) 1.9s}
  /* the ZIP opens: three snaps start stacked and fan out once it has downloaded */
  html.js .fd-shelf:not(.in) .zip .fan span{rotate:0deg;translate:0 0}
  html.js .fd-shelf.in .zip .fan span{transition-delay:2.55s}
  /* while on screen, after arrival: the video plays, the sound moves, the GIF loops, the photo drifts */
  html.js .fd-shelf.in .vid .bar i{animation:fd-playbar 11s linear 1.4s infinite}
  html.js .fd-shelf.in .vid .pic > img{animation:fd-drift2 14s ease-in-out 1.4s infinite alternate}
  html.js .fd-shelf.in .aud .wave i{animation:fd-eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--h) * -11ms)}
  html.js .fd-shelf.in .gif .pic > img{animation:fd-gif 1.6s steps(8) 2.3s infinite alternate}
  .fd-shelf.paused .ff *{animation-play-state:paused!important}
}
@keyframes fd-playbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fd-drift2{to{scale:1.08;translate:0 -2%}}
@keyframes fd-gif{from{scale:1.1;translate:-3% 1%}to{scale:1.14;translate:3% -1%}}
@keyframes fd-eq{to{scale:1 .45}}
html.js .fd-shelf.in .fd-shelfsum .txt .b{color:var(--ink)}

@media (max-width:980px){
  /* narrower screens: the shelf scrolls sideways with the next card peeking in */
  .fd-files{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 8px;margin:0 -24px;scrollbar-width:none;overscroll-behavior-x:contain}
  .fd-files::-webkit-scrollbar{display:none}
  .ff{flex:0 0 clamp(170px,44vw,230px);scroll-snap-align:center}
}
@media (max-width:600px){.fd-files{padding:4px 16px 8px;margin:0 -16px}.ff{flex-basis:56vw}}

/* the closing section opens with the same lane as the phone hero: snaps turn from fading to saved as they cross the line */
.fd-endgate{position:relative;height:150px;margin:0 0 34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.fd-endgate .lane{position:absolute;inset:0}
.fd-endgate .ghost{clip-path:inset(-20px 50% -20px 0)}
.fd-endgate .saved{clip-path:inset(-20px 0 -20px 50%)}
.fd-endgate .track{display:flex;gap:12px;width:max-content}
.fd-endgate .c{position:relative;flex:none;width:84px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#1B1B1D}
.fd-endgate .c img{width:100%;height:100%;object-fit:cover}
.fd-endgate .tag{position:absolute;left:5px;top:5px;display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:999px;background:rgba(10,10,11,.72);font:700 8.5px/1 var(--mono);white-space:nowrap}
.fd-endgate .tag .fd-i{width:9px;height:9px}
.fd-endgate .ghost .c{opacity:.78}
.fd-endgate .ghost .c img{filter:grayscale(1) brightness(.7) contrast(.92)}
.fd-endgate .ghost .tag{color:#FFF6A6}
.fd-endgate .saved .c{box-shadow:0 0 0 1.5px rgba(76,194,126,.55)}
.fd-endgate .saved .tag{color:#4CC27E}
.fd-endgate::after{content:"";position:absolute;left:50%;top:-10px;bottom:-10px;width:2px;translate:-1px 0;border-radius:2px;
  background:linear-gradient(transparent,#FFFC00 20%,#FFF6A6 50%,#FFFC00 80%,transparent);box-shadow:0 0 18px 2px rgba(255,252,0,.45)}
@media (min-width:861px){.fd-endgate{height:190px}.fd-endgate .c{width:107px}.fd-endgate .track{gap:16px}.fd-endgate .tag{font-size:10px;padding:4px 7px}}
@media (prefers-reduced-motion:no-preference){
  .fd-endgate .track{animation:fd-flow 34s linear infinite}
  .fd-final.paused .fd-endgate .track{animation-play-state:paused}
}
.fd-final.dark{padding-top:44px}

/* tile art: on phones each picture sets its own height, so none can reach into its title */
.fd-play2{max-width:200px}
@media (max-width:700px){.fd-tiles .fd-tile2 .art{height:auto;min-height:0;margin-bottom:10px}}

/* the closing section (its lane alone is 64 snaps) skips layout and paint until it nears the screen. It sits below
   every menu target, so its placeholder height can't throw off a jump; the features section was tried too, but its
   height changes too much with the screen width for one placeholder, and menu jumps to the FAQ missed by up to 230 px */
#again{content-visibility:auto;contain-intrinsic-size:auto 460px}

/* ==========================================================================
   v11: easy for a first-timer: three picture steps under the box, a "Show me how" guide, and where the file went
   ========================================================================== */
.fd-3steps{list-style:none;display:flex;justify-content:center;gap:14px;margin:22px auto 0;max-width:640px}
.fd-3steps li{position:relative;flex:1;display:grid;justify-items:center;gap:3px;padding:14px 8px 12px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#F2F1EE}
.fd-3steps .n{position:absolute;left:9px;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FFFC00;color:#141414;font:800 12px/1 var(--sans)}
.fd-3steps .fd-i{width:28px;height:28px;color:#FFFC00;margin-bottom:2px}
.fd-3steps b{font-size:15px;line-height:1.2}
.fd-3steps small{font-size:12.5px;line-height:1.3;color:rgba(242,241,238,.6)}
.fd-3steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:8px;height:8px;border-top:2px solid rgba(255,252,0,.7);border-right:2px solid rgba(255,252,0,.7);rotate:45deg;translate:0 -50%}
.fd-howwrap{margin-top:14px}
.fd-howbtn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.08);color:#F2F1EE;font:700 15px/1 var(--sans);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color 150ms var(--ease)}
.fd-howbtn .fd-i{width:16px;height:16px;color:#FFFC00}
@media (hover:hover) and (pointer:fine){.fd-howbtn:hover{background:rgba(255,255,255,.15)}}
@media (max-width:560px){
  .fd-3steps{gap:10px;margin-top:18px}
  .fd-3steps li{padding:30px 4px 10px}
  .fd-3steps .n{left:50%;top:7px;translate:-50% 0;width:20px;height:20px;font-size:11px}
  .fd-3steps .fd-i{width:24px;height:24px}
  .fd-3steps b{font-size:13.5px}
  .fd-3steps small{font-size:11.5px}
  .fd-3steps li:not(:last-child)::after{right:-9px;width:6px;height:6px}
}
/* the Paste button points itself out after the guide */
@media (prefers-reduced-motion:no-preference){.fd-paste.fd-pulse{animation:fd-hot 1.3s ease-in-out 2}}

/* "Show me how" */
.fd-guide{margin:auto;border:0;padding:0;background:transparent;color:var(--ink);width:min(440px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:visible}
.fd-guide::backdrop{background:rgba(0,0,0,.62)}
.fd-guide .card{max-height:calc(100dvh - 24px);overflow:auto;padding:18px 18px 16px;border-radius:22px;background:var(--card);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.fd-guide .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fd-guide h2{font-size:21px;line-height:1.2}
.fd-guide .slides{position:relative;height:452px}
.fd-guide .slide{position:absolute;inset:0;display:grid;justify-items:center;align-content:start;gap:16px;opacity:0;visibility:hidden;transition:opacity 280ms var(--ease),visibility 0s linear 280ms}
.fd-guide .slide.on{opacity:1;visibility:visible;transition:opacity 280ms var(--ease)}
.fd-guide figcaption{display:flex;align-items:flex-start;gap:12px;max-width:350px;font-size:17px;line-height:1.4;text-align:left}
.fd-guide figcaption .num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#FFFC00;color:#141414;font:800 16px/1 var(--sans)}
.fd-guide figcaption small{display:block;margin-top:4px;font-size:14px;color:var(--grey)}
.fd-guide .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.fd-guide .nav .fd-btn{min-width:112px}
.fd-guide .nav .fd-btn:disabled{opacity:.35;cursor:default}
.fd-guide .dots{display:flex;gap:6px}
.fd-guide .dots i{width:8px;height:8px;border-radius:4px;background:var(--line2);transition:width 200ms var(--ease),background-color 200ms var(--ease)}
.fd-guide .dots i.on{width:22px;background:var(--mark)}
/* the little screens */
.fd-guide .scr{position:relative;width:184px;height:340px;border-radius:26px;overflow:hidden;background:#0B0B0B;box-shadow:0 0 0 6px #1B1B1D,0 22px 40px -18px rgba(0,0,0,.55);color:#fff}
.fd-guide .scr > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-guide .tap{position:absolute;z-index:3;width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7))}
.fd-guide .tap .fd-i{width:34px;height:34px}
.fd-guide .snap .side{position:absolute;right:10px;bottom:46px;display:grid;gap:14px}
.fd-guide .snap .side i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff}
.fd-guide .snap .side .fd-i{width:18px;height:18px}
.fd-guide .snap .side i.hot{background:#FFFC00;color:#141414}
.fd-guide .snap .tap{right:-2px;bottom:16px}
.fd-guide .sheet > img{filter:brightness(.4)}
.fd-guide .sheet .panel{position:absolute;left:0;right:0;bottom:0;display:grid;gap:6px;padding:12px 10px 16px;border-radius:18px 18px 0 0;background:#1B1B1D}
.fd-guide .sheet .panel b{font-size:13px;text-align:center;margin-bottom:2px}
.fd-guide .sheet .row{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.07);font-size:12.5px;font-weight:700}
.fd-guide .sheet .row .fd-i{width:16px;height:16px}
.fd-guide .sheet .row.hot{background:#FFFC00;color:#141414}
.fd-guide .sheet .tap{right:22px;bottom:58px}
.fd-guide .site{display:grid;align-content:start;gap:10px;padding:18px 12px;background:linear-gradient(#0A0A0B,#18181A)}
.fd-guide .site .brand{display:flex;align-items:center;gap:6px;font:800 13px/1 var(--sans)}
.fd-guide .site .brand i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#FFFC00;color:#141414}
.fd-guide .site .brand .fd-i{width:13px;height:13px}
.fd-guide .site .field{display:flex;align-items:center;gap:6px;margin-top:22px;padding:11px 10px;border-radius:10px;background:#1B1B1D;box-shadow:inset 0 0 0 1px #2A2A2D;color:#A6A49F;font-size:11.5px}
.fd-guide .site .field .fd-i{width:13px;height:13px}
.fd-guide .site .btns{display:grid;grid-template-columns:1fr 1.35fr;gap:6px}
.fd-guide .site .paste,.fd-guide .site .dl,.fd-guide .site .save{display:flex;align-items:center;justify-content:center;gap:5px;padding:11px 6px;border-radius:10px;font:700 12px/1 var(--sans)}
.fd-guide .site .paste{background:#2E2E31;color:#fff}
.fd-guide .site .dl,.fd-guide .site .save{background:#FFFC00;color:#141414}
.fd-guide .site .fd-i{width:14px;height:14px}
.fd-guide .site .btns + .tap{left:30px;top:146px}
.fd-guide .site .tile{position:relative;height:178px;margin-top:4px;border-radius:12px;overflow:hidden}
.fd-guide .site .tile img{width:100%;height:100%;object-fit:cover}
.fd-guide .site .done{display:flex;align-items:center;justify-content:center;gap:5px;color:#4CC27E;font:700 12px/1 var(--sans)}
.fd-guide .site .done .fd-i{width:14px;height:14px}
.fd-guide .site .done + .tap{left:96px;top:262px}
@media (prefers-reduced-motion:no-preference){
  .fd-guide .slide.on .hot{animation:fd-hot 1.6s ease-in-out infinite}
  .fd-guide .slide.on .tap{animation:fd-tap 1.6s ease-in-out infinite}
  .fd-guide .slide.on .done{animation:fd-done 1.6s ease-in-out infinite}
}
@keyframes fd-hot{0%,100%{box-shadow:0 0 0 0 rgba(255,252,0,.75)}60%{box-shadow:0 0 0 12px rgba(255,252,0,0)}}
@keyframes fd-tap{0%,100%{translate:0 0;scale:1}40%{translate:-4px -4px;scale:.86}}
@keyframes fd-done{0%,45%{opacity:0;translate:0 4px}60%,100%{opacity:1;translate:0 0}}
@media (max-width:640px){.fd-guide{margin:auto 0 0;width:100%;max-height:96dvh}.fd-guide .card{border-radius:22px 22px 0 0;max-height:96dvh;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

/* after the first save: where the file is */
.fd-where{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:75;translate:-50% 0;width:min(440px,calc(100% - 24px));padding:16px;border-radius:18px;
  background:var(--card);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 0 0 1px var(--line);transition:opacity 220ms var(--ease),translate 300ms var(--ease)}
@starting-style{.fd-where{opacity:0;translate:-50% 18px}}
.fd-where .t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.fd-where .t .fd-i{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.fd-where ol{list-style:none;display:grid;gap:10px;margin:12px 0 14px}
.fd-where li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.35}
.fd-where li .n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFFC00;color:#141414;font:800 12px/1 var(--sans)}
.fd-where li .fd-i{flex:none;width:20px;height:20px;color:var(--grey)}
.fd-where .fd-btn{width:100%}
body:has(.fd-where) .fd-toast{display:none}

/* v12 guides (2026-10-31): long-form pages on the existing type and colour tokens, left-aligned for reading.
   Tool box at the end reuses the dark closing band (.fd-final.dark) so the paste box looks the same everywhere. */
.fd-article .fd-ghead{max-width:760px;margin:0 auto;padding:40px 0 4px}
.fd-article .fd-crumbs ol{justify-content:flex-start;color:var(--grey)}
.fd-article .fd-crumbs a{color:var(--ink)}
.fd-article h1{margin:14px 0 0;max-width:none;font-size:clamp(32px,4.6vw,50px);line-height:1.06;letter-spacing:-.03em;text-align:left}
.fd-byline{margin-top:14px;font-size:14px;color:var(--grey)}
.fd-byline b{color:var(--ink);font-weight:600}
.fd-answer{margin-top:20px;padding:18px 20px;border-left:4px solid var(--mark);border-radius:0 14px 14px 0;background:var(--bg2);font-size:18px;line-height:1.55;color:var(--ink)}
.fd-toc{margin-top:22px;padding:16px 20px 18px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.fd-toc p{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.fd-toc ul{margin-top:8px;padding-left:0;list-style:none;columns:2 250px;column-gap:28px;font-size:15px}
.fd-toc li{break-inside:avoid;padding:3px 0}
.fd-toc a{color:var(--ink);text-underline-offset:3px}
.fd-article .fd-gbody{padding:8px 0 64px}
.fd-article .fd-prose h2{scroll-margin-top:8px}
.fd-article .fd-prose h3{margin-top:28px;font-size:20px;line-height:1.3}
.fd-article .fd-prose h3 + p,.fd-article .fd-prose h3 + ol,.fd-article .fd-prose h3 + ul{margin-top:8px}
.fd-article .fd-prose ol + h3,.fd-article .fd-prose ul + h3,.fd-article .fd-prose p + h3{margin-top:28px}
.fd-article .fd-prose a{color:var(--ink);text-underline-offset:3px}
.fd-article .fd-prose .fd-table-wrap + p,.fd-article .fd-prose .fd-note + p,.fd-article .fd-prose p + .fd-note,.fd-article .fd-prose ol + .fd-note,.fd-article .fd-prose ul + .fd-note{margin-top:16px}
.fd-note{padding:14px 18px;border-radius:14px;background:var(--bg2);font-size:16px;color:var(--grey)}
.fd-note b{color:var(--ink)}
.fd-sources{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--grey)}
.fd-sources li{font-size:14px}
.fd-article .fd-final{padding-top:64px}
.fd-article .fd-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fd-card .fd-tag{display:inline-block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
@media (max-width:600px){.fd-article .fd-ghead{padding-top:28px}.fd-answer{font-size:17px;padding:16px}.fd-toc ul{columns:1}}
.fd-about{margin-top:10px;font-size:14px;line-height:1.5;color:var(--grey);max-width:62ch}
.fd-byline a{color:inherit;text-underline-offset:3px}
.fd-fig{margin:24px 0 0}
.fd-fig img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.fd-fig figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--grey)}
.fd-prose .fd-fig + p,.fd-prose .fd-fig + h3,.fd-prose .fd-fig + h2,.fd-prose .fd-fig + .fd-note,.fd-prose .fd-fig + ul{margin-top:18px}
.fd-fig a{display:block;border-radius:16px}