/* SpinShare — landing + license pages.
   One structure, three design previews selected by <html data-theme>:
   tiles (Live Tiles, default) · deck (Fan Deck) · std (Standard). */

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-wdth-normal.woff2") format("woff2");
  font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens (tiles = default) ---------- */
:root {
  --bg: #ffffff;
  --surface: #f1f1f4;
  --raised: #ffffff;
  --ink: #0e0e10;
  --ink-2: #53535d;
  --line: #e2e2e8;
  --accent: #d80073;
  --accent-hover: #b8005f;
  --accent-ink: #ffffff;
  --fam-img: #d80073;
  --fam-pdf: #e51400;
  --fam-doc: #0050ef;
  --fam-tool: #007a73;
  --fam-video: #6c0eb9;
  --fam-audio: #008a2e;
  --fam-arc: #f0a30a;
  --fam-sub: #fa6800;
  --font: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --display: var(--font);
  --r: 0px;
  --r-sm: 0px;
  --btn-r: 0px;
  --shadow: none;
  --stage-r: 0px;
  --label: 600 .78rem/1.3 var(--font);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sel: rgb(216 0 115 / .22);
  color-scheme: light;
}
[data-theme="deck"] {
  --bg: #f4f4f6;
  --surface: #f8f8fa;
  --raised: #ffffff;
  --ink: #141414;
  --ink-2: #4a4f5a;
  --line: #e3e4ea;
  --accent: #2f5dff;
  --accent-hover: #1f47e0;
  --accent-ink: #ffffff;
  --fam-img: #ff4f8b;
  --fam-pdf: #e5334b;
  --fam-doc: #2f5dff;
  --fam-tool: #14a06c;
  --fam-video: #7a4dff;
  --fam-audio: #12b5c9;
  --fam-arc: #ffc21a;
  --fam-sub: #ff7a45;
  --font: "Archivo", "Segoe UI", system-ui, "Microsoft YaHei", "PingFang SC", sans-serif;
  --display: var(--font);
  --r: 14px;
  --r-sm: 10px;
  --btn-r: 12px;
  --shadow: none;
  --stage-r: 18px;
  --label: 650 .74rem/1.3 var(--font);
  --sel: rgb(47 93 255 / .18);
}
[data-theme="std"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --raised: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #63636a;
  --line: rgb(0 0 0 / .08);
  --accent: #5b4bff;
  --accent-hover: #4a39f0;
  --accent-ink: #ffffff;
  --fam-img: #5b4bff;
  --fam-pdf: #e5484d;
  --fam-doc: #0a6cff;
  --fam-tool: #2f9e66;
  --fam-video: #8b46ff;
  --fam-audio: #0e9f9f;
  --fam-arc: #f2b13d;
  --fam-sub: #f07845;
  --font: "Geist", "Segoe UI", system-ui, sans-serif;
  --display: var(--font);
  --r: 16px;
  --r-sm: 10px;
  --btn-r: 999px;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .14);
  --stage-r: 20px;
  --label: 550 .78rem/1.3 var(--font);
  --sel: rgb(91 75 255 / .2);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-drag: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
kbd {
  font: inherit; font-size: .86em; font-weight: 600; padding: .05em .4em;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: max(var(--r-sm), 4px);
  background: var(--raised); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.svg-defs { position: absolute; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--btn-r);
  padding: 13px 20px; min-height: 48px;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* keep resting paint under the ::before slab — jumping to --accent-hover on
   hover would flash at the slab's trailing edge; --rest (not --accent) is the
   real resting colour once slash.js has rotated it */
.btn-primary:hover { background: var(--rest, var(--accent)); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { border-color: #2f5dff; color: #2f5dff; background: var(--blue-soft); }
.btn-sm { min-height: 40px; padding: 9px 14px; font-size: .92rem; }
.btn-lg { min-height: 54px; padding: 15px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--bg); transition: box-shadow .2s; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 30px; height: 30px; flex: none; }
.mark use { display: none; }
[data-theme="tiles"] .m-tiles, [data-theme="deck"] .m-deck, [data-theme="std"] .m-std { display: inline; }
.wordmark { font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: .95rem; }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

/* ---------- Language switcher (port of the supastack popover) ---------- */
.lang-sw { position: relative; }
.lang-sw .ls-sum {
  display: inline-flex; align-items: center; gap: 7px; height: 40px;
  padding: 0 12px; font: 600 .85rem/1 var(--font); white-space: nowrap;
  color: var(--ink-2); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--btn-r);
  list-style: none;
  transition: border-color .18s, color .18s, background .18s;
}
.lang-sw .ls-sum::-webkit-details-marker { display: none; }
.lang-sw .ls-sum::marker { content: ""; }
.lang-sw .ls-sum:hover, .lang-sw[open] .ls-sum { border-color: var(--ink-2); color: var(--ink); }
.lang-sw .ls-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang-sw .ls-globe { width: 15px; height: 15px; display: block; }
.lang-sw .ls-chev { width: 14px; height: 14px; display: block; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.lang-sw[open] .ls-chev { transform: rotate(180deg); }
.ls-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 172px; margin: 0; padding: 6px; list-style: none;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgb(20 20 20 / .06), 0 14px 36px rgb(20 20 20 / .14), inset 0 1px 0 rgb(255 255 255 / .6);
}
.ls-pop li { margin: 0; }
.ls-pop a {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  min-height: 40px; padding: 0 10px; font-size: .85rem; color: var(--ink-2);
  text-decoration: none; border-radius: max(var(--r-sm) - 4px, 4px);
  transition: background .14s, color .14s;
}
.ls-pop a:hover { background: var(--surface); color: var(--ink); }
.ls-pop a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ls-pop a[aria-current] { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .lang-sw[open] .ls-pop { animation: lsPopIn .17s cubic-bezier(.2, .8, .2, 1); }
  .lang-sw[data-closing] .ls-pop { animation: lsPopOut .13s cubic-bezier(.4, 0, .7, .2) forwards; }
}
@keyframes lsPopIn {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes lsPopOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px) scale(.985); }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 5vh, 56px); }
.hero-head { display: grid; gap: 28px; }
.hero-copy { display: grid; gap: 22px; }
.hero-title { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .98; letter-spacing: -.03em; }
.hero-sub { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-cta .btn > svg { width: 20px; height: 20px; flex-shrink: 0; }
.download-note { margin: 14px 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.download-options { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.download-options > p:first-child { margin: 0 0 10px; font-weight: 600; }
.download-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.download-links a { color: var(--ink); text-underline-offset: 4px; padding: 8px 0; }
@media (max-width: 420px) {
  .nav .brand .wordmark { display: none; }
  .nav .nav-inner { gap: 8px; }
  .nav .btn { padding: 9px 10px; font-size: .85rem; }
}

/* ---------- Stage (demo desktop) ---------- */
.stage-wrap { margin-top: clamp(28px, 4.5vh, 44px); }
.stage {
  position: relative; height: clamp(480px, 68vh, 660px);
  isolation: isolate; user-select: none; -webkit-user-select: none;
  /* Files stay opaque; wallpaper fades into the page at the bottom. */
}
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}
.stage .wall {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 110px), transparent 100%);
}
.wall { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; background: #0050ef url("/img/wall-tiles.svg") center / cover; }
.desk { position: absolute; inset: 0 0 44px; }
.file { position: absolute; width: 104px; }
.file[hidden] { display: none; }
.file-btn, .ghost {
  display: grid; justify-items: center; align-content: start; gap: 6px;
  width: 104px; padding: 8px 4px 6px; border: 1px solid transparent; background: none;
  color: #fff; font: 500 .78rem/1.25 var(--font); text-align: center;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.file-btn:active { cursor: grabbing; }
.file-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.file.is-sel .file-btn { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .45); }
.fname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; max-width: 100%; }
.thumb { position: relative; display: grid; place-items: center; width: 64px; height: 56px; }
.thumb img { width: 64px; height: 44px; object-fit: cover; box-shadow: 0 1px 3px rgb(0 0 0 / .35); background: #fff; }
.thumb img[src*="invoice"] { width: 42px; height: 54px; }
.thumb.fx-crop img { width: 46px; height: 46px; }
.thumb.fx-bg { width: 64px; height: 50px; background: linear-gradient(135deg, #8a7bff, #ff7ab6); border-radius: 6px; }
.thumb.fx-bg img { width: 50px; height: 34px; border-radius: 3px; box-shadow: 0 4px 10px rgb(0 0 0 / .35); }
.thumb.fx-redact::after { content: ""; position: absolute; left: 12px; right: 20px; top: 24px; height: 7px; background: #000; }
.thumb.fx-redact:has(img[src*="redacted"])::after { display: none; }
.doc-thumb::before {
  content: ""; position: absolute; left: 11px; top: 2px; width: 42px; height: 52px; background: #fff;
  clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
}
.doc-thumb::after { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 2px; background: #c9ced8; box-shadow: 0 5px #c9ced8, 0 10px #c9ced8, 0 15px #c9ced8; }
.doc-thumb b {
  position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 1px 5px;
  font: 700 .7rem/1.35 var(--font); letter-spacing: .02em; color: #fff; background: var(--fam-doc);
}
.doc-thumb[data-fam="pdf"] b { background: var(--fam-pdf); }
.doc-thumb[data-fam="video"] b { background: var(--fam-video); }
.doc-thumb[data-fam="audio"] b { background: var(--fam-audio); }
.doc-thumb[data-fam="arc"] b { background: var(--fam-arc); color: #141414; }
.doc-thumb[data-fam="sub"] b { background: var(--fam-sub); color: #141414; }
/* folder results (Split → "stem pages/", Extract → "stem/") get a folder glyph */
.folder-thumb::before {
  content: ""; position: absolute; left: 11px; top: 18px; width: 42px; height: 30px;
  background: var(--fam-arc); border-radius: 3px 6px 5px 5px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
}
.folder-thumb::after {
  content: ""; position: absolute; left: 11px; top: 12px; width: 20px; height: 9px;
  background: var(--fam-arc); border-radius: 4px 4px 0 0;
}
/* newest result carries the flag (passes to each new result) */
.file.is-new::after {
  content: ""; position: absolute; right: 12px; top: 4px; width: 16px; height: 16px; pointer-events: none;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%); box-shadow: none;
}
[data-theme="deck"] .file.is-new::after { clip-path: none; width: 10px; height: 18px; right: 16px; top: -2px; border-radius: 0 0 2px 2px; background: #ff4f8b; }
[data-theme="std"] .file.is-new::after { clip-path: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; right: 14px; top: 2px; }
.file.lifting { opacity: .35; }
.file.returning { animation: settle .36s var(--ease); }
.file.pop { animation: pop .42s var(--ease) both; }
@keyframes pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes settle { from { transform: scale(.94); } to { transform: none; } }

.ghost { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; will-change: transform; transform-origin: 0 0; }
.ghost.mini .fname { opacity: 0; }
.ghost.on { opacity: .92; }
.ghost .thumb { filter: drop-shadow(0 10px 18px rgb(0 0 0 / .35)); }

/* origin = arrow tip; app.js placeCue() pins it beside the first file's thumbnail */
.cue {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  color: #fff; font: 800 1.6rem/1 var(--font); letter-spacing: -.02em; font-stretch: 112%; transition: opacity .3s;
}
.cue svg { position: absolute; left: -4px; top: -30px; width: 104px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cue span { position: absolute; left: 106px; top: -20px; transform: translateY(-50%); white-space: nowrap; }
.cue.gone { opacity: 0; }

.prompt, .legend {
  position: absolute; left: 50%; top: 16px; z-index: 35; display: flex; align-items: center; gap: 12px;
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .25s var(--ease);
  background: var(--ink); color: #fff; padding: 10px 14px; white-space: nowrap; font-size: .95rem;
}
.prompt.on, .legend.on { opacity: 1; transform: translate(-50%, 0); }
.legend.on { pointer-events: auto; }
.legend { gap: 6px; padding: 6px; }
.lg { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: transparent; border-radius: 6px; color: rgb(255 255 255 / .7); font: inherit; font-size: .88rem; cursor: pointer; }
.lg:hover { background: rgb(127 127 127 / .12); }
.lg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend[data-mode="format"] [data-lg="format"], .legend[data-mode="tools"] [data-lg="tools"], .legend[data-mode="actions"] [data-lg="actions"] { background: rgb(255 255 255 / .14); color: #fff; }
.legend.no-tools [data-lg="tools"] { opacity: .45; }
.lg.nope { animation: nope .4s; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kc {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; min-height: 26px;
  border: 1px solid currentColor; border-radius: max(var(--r-sm), 4px); font: 600 .78rem/1 var(--font);
  text-transform: lowercase;
}
.kc svg { width: 14px; height: 14px; }
.kc-lg { padding: 7px 12px; font-size: .9rem; animation: tap 1.3s var(--ease) infinite; }
.kc-lg svg { width: 18px; height: 18px; }
@keyframes tap { 0%, 55%, 100% { transform: none; } 65% { transform: translateY(3px) scale(.96); } }

.wheel-layer {
  position: absolute; left: 50%; top: 50%; z-index: 25; pointer-events: none;
  transform: translate(-50%, -50%) scale(.7); opacity: 0;
  transition: opacity .14s, transform .26s var(--ease);
}
.wheel-layer.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.wheel-svg { display: block; overflow: visible; }
.wheel-svg text { font: 600 13px var(--font); text-anchor: middle; pointer-events: none; }
.wheel-svg use { pointer-events: none; }
.wseg { cursor: pointer; }
.wseg path { fill: #fff; transition: fill .12s; }
.wseg text { fill: var(--ink); }
.wseg use { color: var(--ink); }
.wseg.hot path { fill: var(--fam-img); }
.wseg.hot[data-fam="pdf"] path { fill: var(--fam-pdf); }
.wseg.hot[data-fam="doc"] path { fill: var(--fam-doc); }
.wseg.hot[data-fam="tool"] path { fill: var(--fam-tool); }
.wseg.hot[data-fam="video"] path { fill: var(--fam-video); }
.wseg.hot[data-fam="audio"] path { fill: var(--fam-audio); }
.wseg.hot[data-fam="act"] path { fill: var(--fam-tool); }
.wseg.hot[data-fam="arc"] path { fill: var(--fam-arc); }
.wseg.hot[data-fam="sub"] path { fill: var(--fam-sub); }
.wseg.hot[data-fam="arc"] text, .wseg.hot[data-fam="arc"] use,
.wseg.hot[data-fam="sub"] text, .wseg.hot[data-fam="sub"] use { fill: #141414; color: #141414; }
.wseg.hot text { fill: #fff; }
.wseg.hot use { color: #fff; }
.hub circle { fill: var(--ink); }
.hub .hub-main { fill: #fff; font-size: 15px; font-weight: 700; }
.hub .hub-sub { fill: rgb(255 255 255 / .72); font-size: 10.5px; font-weight: 500; }

/* ---------- Bento interactivity ---------- */
.panel, .tool {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.panel:hover, .tool:hover { --lift: -4px; }
.panel:hover, .tool:hover { box-shadow: 0 22px 44px -18px rgb(20 24 40 / .4); }
.tool { cursor: pointer; }
.mini-wheel { cursor: crosshair; }
.mini-wheel .wseg { cursor: pointer; }
/* crop tile: the frame follows the ratio pill the user last clicked */
.crop-frame { transition: width .32s var(--ease), aspect-ratio .32s var(--ease), top .32s var(--ease), left .32s var(--ease); }
.tool-crop[data-ratio="16:9"] .crop-frame { width: 62%; aspect-ratio: 16 / 9; top: 20%; }
.tool-crop[data-ratio="9:16"] .crop-frame { width: 30%; aspect-ratio: 9 / 16; }
.tool-crop[data-ratio="4:3"] .crop-frame { width: 54%; aspect-ratio: 4 / 3; top: 16%; }
.tool-crop[data-ratio="3:4"] .crop-frame { width: 38%; aspect-ratio: 3 / 4; }
.tool-crop[data-ratio="Free"] .crop-frame { width: 50%; aspect-ratio: 4 / 3; border-style: dashed; }
/* add-bg tile: clicking cycles the gradient presets like the app's picker */
.bg-plate { transition: background .4s var(--ease); }
.bg-plate[data-preset="1"] { background: linear-gradient(135deg, #2f5dff, #12b5c9); }
.bg-plate[data-preset="2"] { background: linear-gradient(135deg, #ff7a45, #ff4f8b); }
.bg-plate[data-preset="3"] { background: linear-gradient(135deg, #141414, #474e5c); }
/* format cards: hovering only re-colours the border — nothing moves */
/* chain panel: hovering replays the conversion chain popping in */
@keyframes chainHop { 50% { transform: translateY(-6px) scale(1.05); } }
.panel-chain:hover .chain li { animation: chainHop .45s var(--ease); }
.panel-chain:hover .chain li:nth-child(2) { animation-delay: .09s; }
.panel-chain:hover .chain li:nth-child(3) { animation-delay: .18s; }
.panel .mini-wheel { transition: transform .3s var(--ease); }
.panel:hover .mini-wheel { transform: scale(1.03); }

.toast {
  position: absolute; left: 50%; bottom: 58px; z-index: 36; transform: translate(-50%, 8px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease);
  background: var(--ink); color: #fff; padding: 10px 16px; font-size: .9rem; white-space: nowrap;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.stage-help { margin: 14px auto 0; padding-inline: 24px; font-size: .9rem; color: var(--ink-2); max-width: 90ch; }

/* demo needs keyboard + mouse — hide it where those don't exist */
@media (pointer: coarse), (max-width: 1024px) {
  .stage-wrap { display: none; }
  .hero-cta a[href="#demo"] { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(80px, 12vw, 150px) 0; }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.section-head h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; }

/* highlighted word in a title — skewed marker slab behind the text,
   same skew family as the button slash */
.hl { position: relative; z-index: 0; white-space: nowrap; color: var(--hl-ink, inherit); padding-inline: .06em; }
.hl::before {
  content: ""; position: absolute; z-index: -1;
  inset: -.02em -.12em -.10em;
  background: var(--hl, #ffc21a); border-radius: .12em;
  transform: skewX(-10deg) rotate(-1.4deg);
}
.hl-pink { --hl: var(--brand-pink); --hl-ink: #fff; }
.hl-blue { --hl: #2f5dff; --hl-ink: #fff; }
.hl-amber { --hl: #ffc21a; }

.how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.panel { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.panel-art { display: grid; place-items: center; min-height: 300px; padding: 20px; }
.mini-wheel .wheel-svg { width: 268px; height: 268px; max-width: 100%; }
.panel-body { display: grid; gap: 8px; align-content: start; padding: 4px 24px 26px; }
.panel-body .kc { justify-self: start; }
.panel-body h3 { font-size: 1.3rem; letter-spacing: -.01em; margin-top: 4px; }
.panel-body p { color: var(--ink-2); }
.chain { display: grid; gap: 10px; justify-items: center; counter-reset: c; }
.chain li { display: flex; align-items: center; gap: 12px; width: 220px; padding: 8px 12px; background: var(--raised); border-radius: var(--r-sm); font-size: .92rem; font-weight: 600; }
.chain li + li { position: relative; }
.chain li + li::before { content: ""; position: absolute; left: 47px; top: -10px; width: 2px; height: 10px; background: var(--ink-2); }
.chain .thumb { width: 56px; height: 40px; }
.chain .thumb img { width: 56px; height: 38px; }
.chain .doc-thumb::before { left: 12px; top: 0; width: 32px; height: 40px; }
.chain .doc-thumb::after { left: 18px; top: 10px; width: 16px; box-shadow: 0 5px #c9ced8, 0 10px #c9ced8; }
.chain .doc-thumb b { left: 8px; bottom: 2px; }
/* Alt wheel panel: the six file actions as a pill cloud (no conversion) */
.act-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; max-width: 300px; }
.act-list li {
  padding: 9px 16px; background: var(--raised); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 650; font-size: .92rem; box-shadow: 0 1px 0 var(--line);
}

/* stat strip — headline numbers, fan-deck card */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; }
.stat-card {
  display: grid; gap: 10px; align-content: start; padding: 34px 30px 32px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 10px 28px -16px rgb(20 24 40 / .16);
}
.stat-card b { font: 800 clamp(3.2rem, 5.4vw, 4.4rem)/1 var(--font); letter-spacing: -.035em; font-stretch: 116%; color: var(--stat-c, var(--ink)); }
.stat-card:nth-child(1) { --stat-c: #2f5dff; }
.stat-card:nth-child(2) { --stat-c: #ff4f8b; }
.stat-card:nth-child(3) { --stat-c: #e8a300; }
.stat-card h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; }
.stat-card p { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.stat-card kbd { font: 600 .72rem/1 var(--font); padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; }
/* supported formats — one grouped card per family: icon chip, from chips → to chips, note */
.fmt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fmt-card {
  display: grid; gap: 14px; align-content: start;
  padding: 22px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  transition: border-color .18s var(--ease);
}
.fmt-head { display: flex; align-items: center; gap: 12px; }
.fmt-ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); color: #fff; background: var(--fam-img);
}
.fmt-ic svg { width: 20px; height: 20px; }
.fmt-card[data-fam="video"] .fmt-ic { background: var(--fam-video); }
.fmt-card[data-fam="audio"] .fmt-ic { background: var(--fam-audio); }
.fmt-card[data-fam="pdf"] .fmt-ic { background: var(--fam-pdf); }
.fmt-card[data-fam="doc"] .fmt-ic { background: var(--fam-doc); }
.fmt-card[data-fam="arc"] .fmt-ic { background: var(--fam-arc); }
.fmt-card[data-fam="sub"] .fmt-ic { background: var(--fam-sub); }
.fmt-head h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.fmt-flow { display: grid; gap: 10px; align-content: start; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fchip {
  font: 650 .74rem/1 var(--font); letter-spacing: .03em; font-style: normal;
  padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.fmt-arrow { font-style: normal; font-weight: 700; color: var(--ink-2); padding-inline: 2px; }
.fchips.to .fchip { color: #fff; border-color: transparent; }
.fmt-card[data-fam="img"] .fchips.to .fchip { background: var(--fam-img); }
.fmt-card[data-fam="video"] .fchips.to .fchip { background: var(--fam-video); }
.fmt-card[data-fam="audio"] .fchips.to .fchip { background: var(--fam-audio); }
.fmt-card[data-fam="pdf"] .fchips.to .fchip { background: var(--fam-pdf); }
.fmt-card[data-fam="doc"] .fchips.to .fchip { background: var(--fam-doc); }
.fmt-card[data-fam="arc"] .fchips.to .fchip { background: var(--fam-arc); }
.fmt-card[data-fam="sub"] .fchips.to .fchip { background: var(--fam-sub); }
/* light family colours take dark ink — same pairing as the wheel's CHIP table */
.fmt-card[data-fam="img"] .fchips.to .fchip,
.fmt-card[data-fam="audio"] .fchips.to .fchip,
.fmt-card[data-fam="arc"] .fchips.to .fchip,
.fmt-card[data-fam="sub"] .fchips.to .fchip { color: #141414; }
.fmt-card[data-fam="img"] .fmt-ic, .fmt-card[data-fam="audio"] .fmt-ic,
.fmt-card[data-fam="arc"] .fmt-ic, .fmt-card[data-fam="sub"] .fmt-ic { color: #141414; }
.fmt-note { font-size: .84rem; color: var(--ink-2); }
/* format cards: hovering only recolours the border — nothing lifts or tilts */
/* display-only — no hover on the formats grid */

.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
.tool { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface); }
.tool-crop { grid-column: span 2; grid-row: span 2; }
.tool-bg { grid-column: span 2; }
.tool-art { position: absolute; inset: 0; }
.tool-art > img { width: 100%; height: 100%; object-fit: cover; }
.tool-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 18px 20px; }
.tool-body h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.tool-body h3 svg { width: 22px; height: 22px; flex: none; }
.crop-frame { position: absolute; left: 22%; top: 12%; width: 46%; aspect-ratio: 1; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); }
.crop-frame i { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; }
.crop-frame i:nth-child(1) { left: -5px; top: -5px; border-width: 5px 0 0 5px; }
.crop-frame i:nth-child(2) { right: -5px; top: -5px; border-width: 5px 5px 0 0; }
.crop-frame i:nth-child(3) { left: -5px; bottom: -5px; border-width: 0 0 5px 5px; }
.crop-frame i:nth-child(4) { right: -5px; bottom: -5px; border-width: 0 5px 5px 0; }
.ratio-row { position: absolute; right: 16px; top: 16px; display: flex; gap: 4px; }
.ratio-row b { font: 600 .74rem/1 var(--font); padding: 6px 8px; background: rgb(0 0 0 / .72); color: #fff; }
.ratio-row b.on { background: #fff; color: #111; }
.bg-plate { position: absolute; inset: 0; display: grid; place-items: center; padding: 26px 26px 92px; background: linear-gradient(135deg, #8a7bff, #ff7ab6); }
.bg-plate img { width: 82%; max-width: 420px; border-radius: 10px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); }
.size-tag { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; background: rgb(0 0 0 / .62); color: #fff; font-weight: 700; }
.size-tag s { font-weight: 500; }
.tool-redact .tool-art > img { object-position: top left; }

.privacy-inner { display: grid; }

.pricing { padding-bottom: clamp(80px, 10vw, 130px); }
.pricing-inner { display: grid; justify-items: center; }
.pricing .section-head { margin-inline: auto; text-align: center; justify-items: center; }
.price-card { width: 100%; max-width: 560px; border-radius: var(--r); overflow: hidden; background: var(--raised); box-shadow: var(--shadow); }
.price-top { padding: 28px 30px 24px; background: var(--accent); color: var(--accent-ink); }
.price-label { font-weight: 700; font-size: 1rem; }
.store-anchor { margin-top: 3px; font-size: .85rem; opacity: .88; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.price-row s { font-size: 1.2rem; }
.price-now { font-size: clamp(3.4rem, 6vw, 4.6rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.price-once { font-size: .95rem; }
.price-anchor { margin-top: 10px; font-size: .92rem; opacity: .82; }
.price-body { padding: 24px 30px 28px; display: grid; gap: 18px; }
.scarcity { font-weight: 600; }
.tier-ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tier-ladder li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: baseline; gap: 5px 8px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
}
.tier-ladder li:nth-child(5), .tier-ladder li.tl-full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.tier-ladder li:nth-child(5) > b, .tier-ladder li.tl-full > b {
  grid-column: auto;
  font-size: .92rem;
  white-space: nowrap;
}
.tier-ladder li:nth-child(5) .tl-spots, .tier-ladder li.tl-full .tl-spots {
  grid-column: auto;
  grid-row: auto;
  font-size: .78rem;
  margin: 0 auto 0 8px;
  white-space: nowrap;
}
.tier-ladder li:nth-child(5) .tl-price, .tier-ladder li.tl-full .tl-price {
  grid-column: auto;
  grid-row: auto;
  font-size: 1rem;
  margin-left: auto;
  white-space: nowrap;
}
.tier-ladder li > b { grid-column: 1 / -1; font-size: .9rem; }
.tier-ladder .tl-spots { grid-column: 1; grid-row: 2; font-size: .75rem; }
.tier-ladder .tl-price { grid-column: 2; grid-row: 2; font-size: .95rem; }
/* The yellow notice already gives the remaining count. Keep the detailed
   progress caption accessible without repeating it as another full row. */
.tier-ladder .tl-cap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tier-ladder .tl-anchor, .tier-ladder .tl-tag { display: none; }
.tier-ladder li.past .tl-tag { display: block; grid-column: 1 / -1; justify-self: start; font-size: .6rem; padding: 3px 6px; }
.tier-ladder li.past { color: var(--ink-2); }
.tier-ladder li.past .tl-price { text-decoration: line-through; }
.tier-ladder li.locked { opacity: .62; }
.tl-tag { font: 650 .68rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.tier-ladder li.locked .tl-tag, .tier-ladder li.past .tl-tag { background: transparent; }
.tier-ladder li.cur { position: relative; border-color: var(--tl-accent, var(--accent)); }
.tier-ladder li.cur .tl-price { font-size: .95rem; }
.tl-spots { font-size: .82rem; color: var(--ink-2); }
.tl-price { font-weight: 700; }
.tl-bar { grid-column: 1 / -1; height: 6px; margin-top: 5px; border-radius: 999px; background: #e3e4ea; overflow: hidden; }
.tl-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tl-accent, var(--accent)); transition: width .8s var(--ease); }
.tl-bar i.w70 { width: 70%; } /* static fallback fill (matches STRIPE_MOCK_SOLD=7) — CSP bars inline style=, JS replaces it anyway */
.tl-cap { grid-column: 1 / -1; font-size: .82rem; color: #5b6270; }
.tl-anchor { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-2); }
.tier-ladder li.cur .tl-anchor, .tier-ladder li.past .tl-anchor { display: none; }
.included { display: grid; gap: 10px; }
.included li { display: flex; gap: 10px; align-items: center; }
.included svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.checkout-err { color: #c4001a; font-size: .92rem; font-weight: 600; }
.price-foot { font-size: .92rem; color: var(--ink-2); }

/* early reviews — three quiet cards above the pricing card */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 880px; margin-bottom: 34px; }
.quote { margin: 0; padding: 18px 20px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 12px; align-content: start; }
.quote blockquote { margin: 0; font-size: .95rem; line-height: 1.55; }
.quote figcaption { display: grid; gap: 2px; }
.quote figcaption b { font-size: .85rem; }
.quote figcaption span { font-size: .78rem; color: var(--ink-2); }
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; max-width: 560px; } }

/* honest badges + the local-only stats note under the card */
.trust-note { width: 100%; max-width: 560px; margin-top: 22px; font-size: .84rem; color: var(--ink-2); text-align: center; }

.footer { position: relative; z-index: 2; background: transparent; border-top: 0; padding: 28px 0 96px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: .9rem; color: var(--ink-2); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer .built-by { font-size: .85rem; color: var(--ink-2); }
.footer .built-by a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer .built-by a:hover { color: var(--brand-pink, #ff4f8b); }
.footer .mark { width: 24px; height: 24px; }
.footer .wordmark { color: var(--ink); font-size: 1.05rem; }

/* =====================================================================
   LIVE TILES — Metro typographic tiles. Flat colour, one family, no shadow.
   ===================================================================== */
[data-theme="tiles"] .wordmark { font-weight: 400; font-size: 1.45rem; text-transform: lowercase; letter-spacing: -.02em; }
[data-theme="tiles"] .nav-links a { text-transform: lowercase; font-size: 1rem; }
[data-theme="tiles"] .hero-copy { grid-template-columns: 1fr auto; column-gap: 48px; row-gap: 26px; align-items: end; }
[data-theme="tiles"] .hero-title {
  grid-column: 1 / -1; font-weight: 300; text-transform: lowercase;
  font-size: clamp(3.2rem, 9.6vw, 9.4rem); line-height: .9; letter-spacing: -.035em; margin-left: -.05em;
}
[data-theme="tiles"] .hero-cta { justify-content: flex-end; }
[data-theme="tiles"] .section-head { max-width: none; }
[data-theme="tiles"] .section-head h2 {
  font-weight: 300; text-transform: lowercase; font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: .92; letter-spacing: -.035em; margin-left: -.04em;
}
[data-theme="tiles"] .kc { text-transform: lowercase; letter-spacing: 0; }
[data-theme="tiles"] .file-btn { font-weight: 600; }
[data-theme="tiles"] .file.is-sel .file-btn { background: rgb(255 255 255 / .18); border: 2px solid #fff; }
[data-theme="tiles"] .prompt { background: var(--accent); }
[data-theme="tiles"] .kc { border-width: 2px; border-radius: 0; }
/* how: coloured live tiles */
[data-theme="tiles"] .panel { color: #fff; background: var(--fam-doc); }
[data-theme="tiles"] .panel-tools { background: var(--fam-tool); }
[data-theme="tiles"] .panel-chain { background: var(--accent); }
[data-theme="tiles"] .panel-body p { color: #fff; }
[data-theme="tiles"] .panel-body h3 { font-weight: 600; font-size: 1.45rem; text-transform: lowercase; }
[data-theme="tiles"] .panel .wseg path { fill: rgb(255 255 255 / .16); }
[data-theme="tiles"] .panel .wseg text, [data-theme="tiles"] .panel .wseg use { fill: #fff; color: #fff; }
[data-theme="tiles"] .panel .wseg.hot path { fill: #fff; }
[data-theme="tiles"] .panel-format .wseg.hot text { fill: var(--fam-doc); }
[data-theme="tiles"] .panel-tools .wseg.hot text, [data-theme="tiles"] .panel-tools .wseg.hot use { fill: var(--fam-tool); color: var(--fam-tool); }
[data-theme="tiles"] .panel .hub circle { fill: rgb(0 0 0 / .28); }
[data-theme="tiles"] .chain li { background: rgb(0 0 0 / .2); color: #fff; }
[data-theme="tiles"] .chain li + li::before { background: #fff; }
[data-theme="tiles"] .panel.inview .panel-art { animation: tileIn .7s var(--ease) both; }
@keyframes tileIn { from { transform: perspective(900px) rotateY(-24deg); transform-origin: left center; opacity: .2; } }
/* tools: live tiles with a peek band */
[data-theme="tiles"] .tool-body { background: var(--fam-tool); color: #fff; padding: 14px 18px 16px; transform: translateY(calc(100% - 52px)); transition: transform .5s var(--ease); }
[data-theme="tiles"] .tool-body p { color: #fff; }
[data-theme="tiles"] .tool-body h3 { font-weight: 600; text-transform: lowercase; font-size: 1.2rem; }
[data-theme="tiles"] .tool.inview .tool-body { animation: peek 7s var(--ease) 1s infinite; }
[data-theme="tiles"] .tool:nth-child(2).inview .tool-body { animation-delay: 2.6s; }
[data-theme="tiles"] .tool:nth-child(3).inview .tool-body { animation-delay: 4.2s; }
[data-theme="tiles"] .tool:nth-child(4).inview .tool-body { animation-delay: 5.8s; }
[data-theme="tiles"] .tool:hover .tool-body, [data-theme="tiles"] .tool:focus-within .tool-body { animation: none; transform: none; }
@keyframes peek { 0%, 8% { transform: translateY(calc(100% - 52px)); } 16%, 44% { transform: none; } 52%, 100% { transform: translateY(calc(100% - 52px)); } }
[data-theme="tiles"] .tool-crop .tool-body { background: var(--fam-img); }
[data-theme="tiles"] .tool-bg .tool-body { background: var(--fam-doc); }
[data-theme="tiles"] .tool-redact .tool-body { background: var(--ink); }
[data-theme="tiles"] .ratio-row b, [data-theme="tiles"] .size-tag { border-radius: 0; }
[data-theme="tiles"] .price-label { font-weight: 600; text-transform: lowercase; font-size: 1.2rem; }
[data-theme="tiles"] .price-now { font-size: clamp(4.4rem, 8vw, 6.4rem); }
[data-theme="tiles"] .price-card { border: 1px solid var(--line); }

/* =====================================================================
   FAN DECK — swatch chips around a rivet. Card stock on a cool table.
   ===================================================================== */
[data-theme="deck"] body { font-stretch: 100%; }
[data-theme="deck"] .nav { background: var(--bg); }
[data-theme="deck"] .wordmark, [data-theme="deck"] h1, [data-theme="deck"] h2, [data-theme="deck"] h3 { font-stretch: 116%; }
[data-theme="deck"] .wordmark { font-weight: 800; letter-spacing: -.01em; }
[data-theme="deck"] .hero-head { grid-template-columns: minmax(0, 920px); justify-content: center; text-align: center; }
[data-theme="deck"] .hero-copy { justify-items: center; }
[data-theme="deck"] .hero-cta { justify-content: center; }
[data-theme="deck"] .hero-title { font-weight: 800; letter-spacing: -.025em; font-size: clamp(2.6rem, 5.8vw, 5.4rem); line-height: 1; }
[data-theme="deck"] .btn { font-stretch: 108%; }
[data-theme="deck"] .btn-quiet { border-color: var(--ink); }
/* Aperture Vintage / Unsplash: img/demo-silk.LICENSE.md */
[data-theme="deck"] .wall {
  background: url("/img/demo-silk.webp") center 54% / cover no-repeat;
  opacity: .72;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / .4) 30px,
    #000 65px,
    #000 calc(100% - 120px),
    rgb(0 0 0 / .75) calc(100% - 75px),
    rgb(0 0 0 / .35) calc(100% - 35px),
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / .4) 30px,
    #000 65px,
    #000 calc(100% - 120px),
    rgb(0 0 0 / .75) calc(100% - 75px),
    rgb(0 0 0 / .35) calc(100% - 35px),
    transparent 100%
  );
}
[data-theme="deck"] .file-btn, [data-theme="deck"] .ghost { color: var(--ink); font-weight: 600; }
[data-theme="deck"] .file-btn:focus-visible { outline-color: var(--ink); }
[data-theme="deck"] .file.is-sel .file-btn { background: rgb(255 255 255 / .55); border-color: #fff; border-radius: 8px; }
[data-theme="deck"] .fname { background: #fff; padding: 2px 7px; border-radius: 4px; box-shadow: 0 1px 2px rgb(20 24 40 / .18); }
[data-theme="deck"] .file.is-sel .fname { background: var(--ink); color: #fff; }
[data-theme="deck"] .cue { color: var(--ink); }
[data-theme="deck"] .prompt, [data-theme="deck"] .legend, [data-theme="deck"] .toast { background: #fff; color: var(--ink); border-radius: 10px; box-shadow: var(--shadow); }
[data-theme="deck"] .lg { color: var(--ink-2); border-radius: 7px; }
[data-theme="deck"] .legend[data-mode="format"] [data-lg="format"], [data-theme="deck"] .legend[data-mode="tools"] [data-lg="tools"], [data-theme="deck"] .legend[data-mode="actions"] [data-lg="actions"] { background: var(--ink); color: #fff; }
[data-theme="deck"] .wheel-svg text { font-stretch: 112%; }
[data-theme="deck"] .wheel-layer::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(var(--r, 56px) * 2 + 8px); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%); background: #dde2ea; box-shadow: 0 0 0 3px #fff;
}
/* scalloped plate behind the fanned cards — same backdrop as the
   explorer/tools wheels (.cw-svg.cards .cw-card-plate) and the app */
[data-theme="deck"] .wheel-svg .cw-card-plate { fill: #e9eaf0; pointer-events: none; }
[data-theme="deck"] .chip-lift { transition: transform .18s var(--ease); }
[data-theme="deck"] .chip .chip-edge { fill: none; stroke: #fff; stroke-width: 3; }
[data-theme="deck"] .chip.hot .chip-lift { transform: translateY(-12px); }
[data-theme="deck"] .chip .ink-l text, [data-theme="deck"] .chip.hot .ink-l text { fill: #fff; }
[data-theme="deck"] .chip .ink-l use { color: #fff; }
[data-theme="deck"] .chip .ink-d text, [data-theme="deck"] .chip.hot .ink-d text { fill: #141414; }
[data-theme="deck"] .chip .ink-d use { color: #141414; }
[data-theme="deck"] .chip-lbl { font-size: 14px; font-weight: 800; }
[data-theme="deck"] .chip-lbl.sm { font-size: 11px; font-weight: 700; }
[data-theme="deck"] .chip-code { font-size: 8.5px; font-weight: 600; letter-spacing: .04em; opacity: .78; }
/* White rivet card, same as the app's deck wheel hub. */
[data-theme="deck"] .hub circle { fill: #fff; stroke: rgb(20 24 32 / .14); stroke-width: 1;
  filter: drop-shadow(0 8px 22px rgb(20 24 32 / .24)); }
[data-theme="deck"] .hub .hub-main { fill: #141414; font-size: 12px; }
[data-theme="deck"] .hub .hub-sub { fill: #5b6570; font-size: 8.5px; }
[data-theme="deck"] .section-head h2 { font-weight: 800; letter-spacing: -.02em; }
[data-theme="deck"] .panel, [data-theme="deck"] .tool { background: var(--raised); box-shadow: var(--shadow); }
[data-theme="deck"] .panel-art { background: var(--surface); margin: 10px 10px 0; border-radius: 6px; }
[data-theme="deck"] .panel-body { padding-top: 18px; }
[data-theme="deck"] .panel-body .kc { border-radius: 6px; background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="deck"] .chain li { box-shadow: 0 1px 0 var(--line); }
[data-theme="deck"] .tool-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
[data-theme="deck"] .tool { grid-column: auto; grid-row: auto; display: grid; padding: 10px; }
[data-theme="deck"] .tool-art { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; }
[data-theme="deck"] .tool-body { position: static; padding: 18px 10px 10px; }
[data-theme="deck"] .tool-body p { color: var(--ink-2); }
[data-theme="deck"] .bg-plate { padding-bottom: 26px; }
[data-theme="deck"] .ratio-row b, [data-theme="deck"] .size-tag { border-radius: 6px; }
[data-theme="deck"] .tool-body h3 svg { color: var(--accent); }
[data-theme="deck"] .price-top { background: var(--accent); padding-bottom: 24px; }
[data-theme="deck"] .price-card { border: 6px solid #fff; }
[data-theme="deck"] .price-label { font-stretch: 116%; font-weight: 800; }
[data-theme="deck"] .price-now { font-weight: 800; font-stretch: 116%; letter-spacing: -.03em; }
/* tricolor brand strip across the price card's top edge (inside the white frame) */
[data-theme="deck"] .price-card::before {
  content: ""; display: block; height: 5px;
  background: linear-gradient(90deg, #ff4f8b 0 33.34%, #ffc21a 33.34% 66.67%, #2f5dff 66.67% 100%);
}

/* =====================================================================
   STANDARD — the category, played straight: soft grey, white cards, one violet.
   ===================================================================== */
[data-theme="std"] .nav { background: rgb(245 245 247 / .82); backdrop-filter: saturate(1.6) blur(16px); }
[data-theme="std"] .wordmark { font-weight: 650; letter-spacing: -.03em; }
[data-theme="std"] .hero-head, [data-theme="std"] .hero-copy { justify-items: center; text-align: center; }
[data-theme="std"] .hero-title { font-weight: 650; letter-spacing: -.045em; font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1; max-width: 13ch; }
[data-theme="std"] .hero-sub { max-width: 54ch; }
[data-theme="std"] .btn-quiet { border-color: transparent; background: #fff; box-shadow: var(--shadow); }
[data-theme="std"] .btn-quiet:hover { background: #fff; color: var(--accent); }
[data-theme="std"] .wall { background: #9cb7c9 url("/img/wall-coast.jpg") center 30% / cover; }
[data-theme="std"] .wall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(10 30 50 / .22), rgb(0 0 0 / .26)); }
[data-theme="std"] .stage { box-shadow: 0 40px 80px -40px rgb(0 0 0 / .45); }
[data-theme="std"] .file-btn, [data-theme="std"] .ghost { font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / .9), 0 0 8px rgb(0 0 0 / .55); }
[data-theme="std"] .file.is-sel .file-btn { border-radius: 8px; }
[data-theme="std"] .thumb img { border-radius: 4px; }
[data-theme="std"] .prompt, [data-theme="std"] .legend, [data-theme="std"] .toast { border-radius: 999px; background: rgb(255 255 255 / .86); color: var(--ink); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .35); }
[data-theme="std"] .prompt { padding: 8px 18px 8px 8px; }
[data-theme="std"] .lg { border-radius: 999px; color: var(--ink-2); }
[data-theme="std"] .legend[data-mode="format"] [data-lg="format"], [data-theme="std"] .legend[data-mode="tools"] [data-lg="tools"], [data-theme="std"] .legend[data-mode="actions"] [data-lg="actions"] { background: var(--accent); color: #fff; }
[data-theme="std"] .kc { border-radius: 7px; }
[data-theme="std"] .wheel-layer::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--R, 132px) * 2 + 12px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgb(255 255 255 / .28); backdrop-filter: blur(18px); z-index: -1;
}
[data-theme="std"] .wseg path { fill: rgb(255 255 255 / .94); stroke: rgb(255 255 255 / .94); stroke-width: 10; stroke-linejoin: round; }
[data-theme="std"] .wseg.hot path { fill: var(--accent); stroke: var(--accent); }
[data-theme="std"] .wseg text { font-weight: 600; }
[data-theme="std"] .hub circle { fill: #fff; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .18)); }
[data-theme="std"] .hub .hub-main { fill: var(--ink); }
[data-theme="std"] .hub .hub-sub { fill: var(--ink-2); }
[data-theme="std"] .section-head { margin-inline: auto; text-align: center; justify-items: center; }
[data-theme="std"] .section-head h2 { font-weight: 650; letter-spacing: -.04em; }
[data-theme="std"] .panel, [data-theme="std"] .tool { background: #fff; box-shadow: var(--shadow); }
[data-theme="std"] .panel-art { background: #f5f5f7; margin: 8px 8px 0; border-radius: 12px; }
[data-theme="std"] .panel-body { padding-top: 20px; }
[data-theme="std"] .mini-wheel .wseg path { fill: #fff; stroke: #fff; }
[data-theme="std"] .mini-wheel .wseg.hot path { fill: var(--accent); stroke: var(--accent); }
[data-theme="std"] .chain li { box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
[data-theme="std"] .tool-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
[data-theme="std"] .tool { grid-column: auto; grid-row: auto; display: grid; }
[data-theme="std"] .tool-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
[data-theme="std"] .tool-body { position: static; padding: 22px 24px 26px; }
[data-theme="std"] .tool-body p { color: var(--ink-2); }
[data-theme="std"] .tool-body h3 svg { color: var(--accent); }
[data-theme="std"] .bg-plate { padding-bottom: 26px; }
[data-theme="std"] .ratio-row b { border-radius: 999px; padding: 6px 10px; backdrop-filter: blur(8px); }
[data-theme="std"] .size-tag { border-radius: 999px; }
[data-theme="std"] .privacy-inner, [data-theme="std"] .pricing-inner { grid-template-columns: 1fr; justify-items: center; }
[data-theme="std"] .price-card { width: 100%; max-width: 540px; }
[data-theme="std"] .price-top { background: #fff; color: var(--ink); text-align: center; padding-bottom: 8px; }
[data-theme="std"] .price-row { justify-content: center; }
[data-theme="std"] .price-label { color: var(--accent); }
[data-theme="std"] .price-now { font-weight: 650; letter-spacing: -.05em; }
[data-theme="std"] .price-once { color: var(--ink-2); }
[data-theme="std"] .scarcity, [data-theme="std"] .price-foot { text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .how-grid { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr 1fr; grid-template-rows: none; align-items: center; }
  .fmt-cards { grid-template-columns: repeat(2, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  [data-theme="deck"] .hero-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 32px); }
  .nav-inner { gap: 14px; height: 60px; }
  .nav-links { display: none; }
  .lang-sw { margin-left: auto; }
  .lang-sw .ls-name { display: none; }
  .nav .btn { margin-left: 0; flex-shrink: 0; }
  [data-theme="tiles"] .hero-copy { grid-template-columns: 1fr; }
  [data-theme="tiles"] .hero-cta { justify-content: flex-start; }
  .hero-cta .btn { flex: 1 1 auto; }
  .stage { height: 540px; }
  .file, .file-btn, .ghost { width: 92px; }
  .file-btn, .ghost { font-size: .74rem; }
  .legend [data-lg="esc"] { display: none; }
  .prompt { font-size: .86rem; }
  .panel { grid-template-columns: 1fr; }
  .panel-art { min-height: 260px; }
  .fmt-cards { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .tool-crop, .tool-bg { grid-column: auto; grid-row: auto; }
  [data-theme="deck"] .tool-grid, [data-theme="std"] .tool-grid { grid-template-columns: 1fr; }
  .prompt, .legend { top: 10px; max-width: calc(100% - 20px); }
  .legend .lg { padding: 6px 7px; }
  .price-top, .price-body { padding-inline: 22px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-theme="tiles"] .tool-body, [data-theme="tiles"] .tool.inview .tool-body { animation: none; transform: none; }
  .kc-lg { animation: none; }
}

/* =====================================================================
   License pages (thanks / recover) — inherit the active design tokens.
   ===================================================================== */
.thanks { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; }
.thanks-card {
  position: relative;
  width: min(480px, 100%); padding: 40px 32px; display: grid; justify-items: center; gap: 16px; text-align: center;
  background: var(--raised); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line);
}
.thanks-card > .lang-sw { position: absolute; top: 12px; right: 12px; }
.thanks-mark { width: 48px; height: 48px; display: none; }
[data-theme="tiles"] .mimg-tiles, [data-theme="deck"] .mimg-deck, [data-theme="std"] .mimg-std { display: block; }
.thanks-card .btn-primary { margin-top: 4px; }
.thanks-h1 { font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -.03em; line-height: 1.05; }
[data-theme="tiles"] .thanks-h1 { font-weight: 300; text-transform: lowercase; font-size: clamp(2.4rem, 7vw, 3.4rem); }
[data-theme="deck"] .thanks-h1 { font-weight: 800; font-stretch: 116%; }
[data-theme="std"] .thanks-h1 { font-weight: 650; letter-spacing: -.04em; }
.thanks-card .sub { color: var(--ink-2); }
.lic-label { display: block; font: var(--label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-align: left; margin-bottom: 6px; }
.lic-text {
  display: block; width: 100%; resize: none; font: 500 .8rem/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; word-break: break-all;
}
input.lic-text { font: 500 1rem/1.4 var(--font); padding: 12px 14px; }
.lic-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.lic-row { display: flex; justify-content: flex-end; margin: 10px 0 18px; }
.lic-row-full { margin-top: 14px; }
.lic-note { color: var(--ink-2); font-size: .9rem; margin-top: 14px; }
#lic-box, #rec-form { width: 100%; }
.thanks-card .license-support {
  margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); text-align: left; display: grid; gap: 16px;
}
.license-support .lic-note { margin: 0; font-size: .85rem; line-height: 1.65; overflow-wrap: anywhere; }
.license-steps { color: var(--ink); font-size: .85rem; font-weight: 600; line-height: 1.7; }
.license-test { padding: 12px 14px; margin-bottom: 16px; border: 1px solid #edc44c; border-radius: 10px; background: #fff6d7; color: #634900; text-align: left; font-size: .82rem; line-height: 1.6; }
.license-support #lic-emailed { position: relative; padding-left: 24px; color: var(--ink); }
.license-support #lic-emailed::before { content: '✓'; position: absolute; left: 0; color: #14805b; font-weight: 700; }
.license-tip { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.license-tip > svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.license-recovery { padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); line-height: 1.7; }
.license-recovery a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.thanks-back { width: 100%; padding-top: 4px; }
.thanks-home { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 40px; color: var(--ink-2); font-size: .82rem; font-weight: 600; text-decoration: none; }
.thanks-home svg { width: 16px; height: 16px; flex: none; }
.thanks-home:hover { color: var(--accent); }
.thanks-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 420px) {
  .thanks-card { padding: 56px 20px 24px; }
  .thanks-card .license-support { padding: 14px; }
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* =====================================================================
   Legal pages (privacy / terms) — bare text on the page, rendered by
   legal.js from the LEGAL data map (body[data-doc] picks the doc).
   ===================================================================== */
.legal-nav { border-bottom: 1px solid var(--line); }
.legal-nav-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.legal-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-nav .mark { width: 26px; height: 26px; }
.legal-nav-links { margin-left: auto; display: flex; gap: 20px; font-size: .95rem; }
.legal-nav-links a { text-decoration: none; color: var(--ink-2); }
.legal-nav-links a:hover { color: var(--ink); }
.legal-nav-links a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(80px, 10vw, 120px); }
.legal-inner { max-width: 720px; margin-inline: auto; }
.legal-inner > h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; }
[data-theme="tiles"] .legal-inner > h1 { font-weight: 300; text-transform: lowercase; }
[data-theme="deck"] .legal-inner > h1 { font-weight: 800; font-stretch: 116%; }
[data-theme="std"] .legal-inner > h1 { font-weight: 650; letter-spacing: -.04em; }
.legal-meta { color: var(--ink-2); margin-top: 14px; font-size: .95rem; }
.legal h2 { font-size: 1.3rem; margin: 2em 0 .55em; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: .8em; }
.legal ul { padding-left: 1.25em; list-style: disc; display: grid; gap: .45em; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); }
.legal-back { margin-top: 36px; }

/* ---------- Kicker ---------- */
.kicker { font: var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 0; }

/* ---------- Privacy (pitch heading, brand-colour proof chips) ---------- */
.privacy-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
.privacy-copy { display: grid; gap: 14px; align-content: start; max-width: 760px; }
.privacy-copy .section-head { margin-bottom: 0; }
.privacy-sub { color: var(--ink-2); max-width: 52ch; }
/* brand-colour proof chips under the pitch line */
.priv-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.priv-points li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 9px; background: var(--raised);
  border: 1px solid var(--line); border-radius: 999px;
  font: 700 .88rem/1 var(--font); white-space: nowrap;
}
.pp-ic {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; color: #fff;
}
.pp-ic svg { width: 15px; height: 15px; }
.priv-points [data-c="pink"] .pp-ic { background: #ff4f8b; }
.priv-points [data-c="amber"] .pp-ic { background: #ffc21a; color: #141414; }
.priv-points [data-c="blue"] .pp-ic { background: #2f5dff; }
/* physical keypress flashes its legend chip (Tangerine-style, our accent) */
.lg.kc-down .kc { background: var(--accent); color: #fff; border-color: transparent; }
.lg.kc-down { color: #fff; }

/* =====================================================================
   Background variants — bottom-left picker (choose a look, persisted).
   ===================================================================== */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
[data-bgv="tide"] body::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0,190 C200,140 420,240 720,190 C1020,140 1240,230 1440,180 L1440,0 L0,0 Z' fill='%23ff4f8b' fill-opacity='.10'/%3E%3Cpath d='M0,240 C240,300 480,190 780,250 C1080,310 1260,210 1440,260 L1440,0 L0,0 Z' fill='%23ffc21a' fill-opacity='.10'/%3E%3Cpath d='M0,120 C260,80 520,170 840,120 C1160,70 1320,150 1440,110 L1440,0 L0,0 Z' fill='%232f5dff' fill-opacity='.08'/%3E%3C/svg%3E") top/cover no-repeat;
}
[data-bgv="ribbon"] body::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-60,640 C300,540 540,760 900,640 C1180,550 1340,640 1520,560 L1520,720 C1300,800 1040,690 760,790 C480,890 180,760 -60,850 Z' fill='%232f5dff' fill-opacity='.09'/%3E%3Cpath d='M-60,560 C300,460 620,660 960,540 C1220,450 1380,540 1520,460 L1520,560 C1340,640 1180,550 900,640 C540,760 300,540 -60,640 Z' fill='%23ff4f8b' fill-opacity='.09'/%3E%3Cpath d='M-60,700 C240,620 560,830 880,710 C1140,610 1360,700 1520,620 L1520,720 C1340,800 1180,700 900,790 C620,880 300,730 -60,820 Z' fill='%23ffc21a' fill-opacity='.10'/%3E%3C/svg%3E") bottom/cover no-repeat;
}
[data-bgv="shore"] body::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0,760 C240,700 480,800 760,740 C1040,680 1240,780 1440,720 L1440,900 L0,900 Z' fill='%23ff4f8b' fill-opacity='.11'/%3E%3Cpath d='M0,800 C200,760 460,850 720,800 C980,750 1200,840 1440,790 L1440,900 L0,900 Z' fill='%23ffc21a' fill-opacity='.11'/%3E%3Cpath d='M0,840 C260,800 540,880 820,830 C1100,780 1300,860 1440,830 L1440,900 L0,900 Z' fill='%232f5dff' fill-opacity='.09'/%3E%3C/svg%3E") bottom/cover no-repeat;
}
[data-bgv="swell"] body::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0,60 C360,140 600,20 900,90 C1150,150 1330,60 1440,90 L1440,0 L0,0 Z' fill='%23ff4f8b' fill-opacity='.10'/%3E%3Cpath d='M0,900 L0,860 C300,800 620,900 920,830 C1180,770 1360,850 1440,810 L1440,900 Z' fill='%232f5dff' fill-opacity='.09'/%3E%3Cpath d='M0,440 C360,380 720,500 1080,430 C1260,395 1380,430 1440,410 L1440,470 C1320,490 1150,450 920,510 C640,580 320,470 0,530 Z' fill='%23ffc21a' fill-opacity='.08'/%3E%3C/svg%3E") center/cover no-repeat;
}
.bgv-pick {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow);
}
.bgv-label { font: 650 .7rem/1 var(--font); color: var(--ink-2); letter-spacing: .05em; text-transform: uppercase; }
.bgv-pick button { border: 1.5px solid transparent; background: none; padding: 3px; border-radius: 99px; cursor: pointer; display: grid; place-items: center; }
.bgv-pick button.on { border-color: var(--ink); }
.bgv-dot { width: 16px; height: 16px; border-radius: 99px; display: block; }
.d-wash { background: var(--bg); border: 1px solid var(--line); }
.d-drift { background: conic-gradient(#ff4f8b, #ffc21a, #2f5dff, #ff4f8b); }
.d-wave { background: linear-gradient(135deg, #ff4f8b 18%, #ffc21a 52%, #2f5dff 82%); }
.d-fan { background: conic-gradient(from 210deg, transparent 35%, #ff4f8b 50%, #ffc21a 70%, #2f5dff 90%); }
.d-mesh { background: radial-gradient(rgb(20 20 20 / .5) 1px, transparent 1.4px), var(--bg); background-size: 5px 5px; }

/* nav current page */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* =====================================================================
   Tools page (tools.html) — cards you can play with.
   ===================================================================== */
.tools-hero { padding: clamp(48px,7vw,88px) 0 clamp(20px,3vw,36px); }
.tools-hero h1 { font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1.02; letter-spacing: -.02em; margin-top: 14px; }
.tools-hero .sub { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; margin-top: 16px; }
.tools-chips { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.chip-nav { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: .95rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--btn-r); padding: 10px 16px; box-shadow: var(--shadow); }
.chip-nav:hover { border-color: var(--ink); }
.chip-nav b { font: 650 .74rem/1 var(--font); color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 3px 8px; }
.chip-nav svg { width: 18px; height: 18px; color: var(--ink-2); }

.tgroup { padding: clamp(28px,4vw,48px) 0; }
.tgroup > h2 { font-size: clamp(1.8rem,3.6vw,2.6rem); letter-spacing: -.02em; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.tkey { display: inline-flex; align-items: center; gap: 6px; font: 650 .9rem/1 var(--font); color: var(--ink-2); }
/* tool detail rows — Tangerine-style: real UI capture left, copy right */
.tgrid, .agrid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 30px); }
.toolcard, .actcard {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 4vw, 50px); align-items: center;
  background: var(--raised); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(18px, 3vw, 36px); overflow: hidden;
}
.tart { position: relative; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; touch-action: none; border-radius: 16px; }
.tart > img { width: 100%; height: 100%; object-fit: cover; }
.tart.shot { background: var(--bg); padding: 14px; }
.tart > img.tshot { object-fit: contain; object-position: center; border-radius: 10px; }
.tcopy { display: grid; gap: 12px; align-content: center; justify-items: start; min-width: 0; }
.tkicker { font: 800 .72rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--pane-fam, var(--accent)); }
.tpoints { list-style: none; display: grid; gap: 9px; margin-top: 8px; }
.tpoints li { position: relative; padding-left: 27px; font-size: .95rem; color: var(--ink); line-height: 1.45; }
.tpoints li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: var(--pane-fam, var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* pane → family colour for kickers, icons and checkmarks */
.tb-pane[data-pane="img"] { --pane-fam: var(--fam-img); }
.tb-pane[data-pane="video"] { --pane-fam: var(--fam-video); }
.tb-pane[data-pane="audio"] { --pane-fam: #0d7f8c; }
.tb-pane[data-pane="pdf"] { --pane-fam: var(--fam-pdf); }
.tb-pane[data-pane="arc"], .tb-pane[data-pane="actions"] { --pane-fam: #a8720a; }
/* deep-linked tool card gets a brief family-colour ring */
.toolcard.flash, .actcard.flash { animation: tflash 1.4s var(--ease) 1; }
@keyframes tflash { 0%, 55% { outline: 3px solid var(--pane-fam, var(--accent)); outline-offset: 4px; } 100% { outline: 3px solid transparent; outline-offset: 4px; } }
.tbody { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.tbody h3 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800; font-stretch: 116%; }
.tbody h3 svg { width: 18px; height: 18px; color: var(--ink-2); }
.tbody > p { color: var(--ink-2); font-size: .94rem; }


/* — interactive art pieces — */
.tart .crop-frame { position: absolute; left: 22%; top: 12%; width: 46%; aspect-ratio: 1; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); transition: width .32s var(--ease), aspect-ratio .32s var(--ease), top .32s var(--ease), left .32s var(--ease); }
.tart .crop-frame i { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; }
.tart .crop-frame i:nth-child(1) { left: -5px; top: -5px; border-width: 5px 0 0 5px; }
.tart .crop-frame i:nth-child(2) { right: -5px; top: -5px; border-width: 5px 5px 0 0; }
.tart .crop-frame i:nth-child(3) { left: -5px; bottom: -5px; border-width: 0 0 5px 5px; }
.tart .crop-frame i:nth-child(4) { right: -5px; bottom: -5px; border-width: 0 5px 5px 0; }
.tart[data-ratio="16:9"] .crop-frame { width: 62%; aspect-ratio: 16 / 9; top: 20%; }
.tart[data-ratio="9:16"] .crop-frame { width: 30%; aspect-ratio: 9 / 16; }
.tart[data-ratio="4:3"] .crop-frame { width: 54%; aspect-ratio: 4 / 3; top: 16%; }
.tart[data-ratio="3:4"] .crop-frame { width: 38%; aspect-ratio: 3 / 4; }
.tart[data-ratio="Free"] .crop-frame { width: 50%; aspect-ratio: 4 / 3; border-style: dashed; }
.rpill { font: 600 .74rem/1 var(--font); padding: 6px 8px; background: rgb(0 0 0 / .72); color: #fff; border: 0; cursor: pointer; }
.rpill:hover { background: rgb(0 0 0 / .85); }
.rpill.on { background: #fff; color: #111; }

.bg-plate-t { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px 22px 56px; transition: background .4s var(--ease); }
.bg-plate-t img { width: 74%; border-radius: 8px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); }
.bg-plate-t[data-preset="1"] { background: linear-gradient(135deg, #2f5dff, #12b5c9); }
.bg-plate-t[data-preset="2"] { background: linear-gradient(135deg, #ff7a45, #ff4f8b); }
.bg-plate-t[data-preset="3"] { background: linear-gradient(135deg, #141414, #474e5c); }
.swatches { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.swatches button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; box-shadow: var(--shadow); cursor: pointer; padding: 0; }
.swatches button.s1 { background: linear-gradient(135deg, #2f5dff, #12b5c9); }
.swatches button.s2 { background: linear-gradient(135deg, #ff7a45, #ff4f8b); }
.swatches button.s3 { background: linear-gradient(135deg, #141414, #474e5c); }

.cbar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; background: rgb(0 0 0 / .62); border-radius: 8px; padding: 10px 12px; }
.cbar input[type="range"] { flex: 1; accent-color: #fff; cursor: pointer; }
.cval { color: #fff; font: 700 .85rem/1 var(--font); white-space: nowrap; }
.cq { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; align-items: baseline; padding: 7px 11px; background: rgb(0 0 0 / .62); border-radius: 7px; color: #fff; font-weight: 700; font-size: .85rem; }
.cq s { font-weight: 500; opacity: .8; }
.tart[data-art="compress"] img { transition: filter .2s; }

.tart[data-art="redact"] { cursor: crosshair; }
.rbox { position: absolute; background: #000; border-radius: 2px; pointer-events: none; }
.rclear { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgb(0 0 0 / .68); color: #fff; border: 0; border-radius: 6px; font: 600 .72rem/1 var(--font); padding: 6px 9px; cursor: pointer; }
.rclear:hover { background: #000; }

.rsz-row { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.rdim { position: absolute; right: 14px; top: 14px; background: rgb(0 0 0 / .62); color: #fff; border-radius: 7px; padding: 7px 11px; font: 600 .82rem/1 var(--font); }
.tart[data-art="resize"] .rsz-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.tart[data-art="resize"] .rsz-img { width: var(--w, 82%); height: auto; border-radius: 6px; box-shadow: 0 10px 26px -10px rgb(0 0 0 / .4); transition: width .3s var(--ease); }

.exif { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 74%; background: var(--raised); border-radius: 8px; box-shadow: var(--shadow); padding: 14px 16px; text-align: left; }
.exif ul { display: grid; }
.exif li { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 5px 0; border-bottom: 1px solid var(--line); }
.exif li:last-child { border-bottom: 0; }
.exif .k { color: var(--ink-2); }
.exif .v { font-weight: 600; transition: color .3s, opacity .3s; }
.exif.stripped .v { color: var(--ink-2); opacity: .45; text-decoration: line-through; }
.strip-btn { position: absolute; left: 14px; bottom: 14px; border: 0; background: #2f5dff; color: #fff; border-radius: 7px; font: 650 .78rem/1 var(--font); padding: 8px 12px; cursor: pointer; }

.actcard .aart { aspect-ratio: auto; min-height: 280px; border-radius: 16px; }
.aart { position: relative; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.aart .atile { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: #fff; border: 2px solid #fff; box-shadow: var(--shadow); }
.aart .atile svg { width: 26px; height: 26px; }
.aart .amono { position: absolute; left: 12px; right: 12px; bottom: 10px; font: 500 .72rem/1.4 ui-monospace, Consolas, monospace; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

.cta-band { margin: clamp(28px,4vw,48px) auto clamp(64px,9vw,110px); max-width: 1240px; }
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 30px 34px; box-shadow: var(--shadow); }
.cta-card h2 { font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing: -.02em; }
.cta-card p { color: rgb(255 255 255 / .75); margin-top: 6px; }

@media (max-width: 860px) {
  .tb-wheels { grid-template-columns: 1fr; max-width: 440px; gap: 22px; }
  .tb-wheel-cell + .tb-wheel-cell {
    border-left: 0; border-top: 1px solid var(--line);
    padding-left: clamp(8px, 2vw, 28px); padding-top: 20px;
  }
  .tools-tabs { justify-content: center; }
}
@media (max-width: 720px) {
  .privacy-inner { grid-template-columns: 1fr; }
  .tools-hero .sub { font-size: 1rem; }
}
.aart .atile[data-c="a1"] { background: #2f5dff; }
.aart .atile[data-c="a2"] { background: #12b5c9; }
.aart .atile[data-c="a3"] { background: #7a4dff; }
.aart .atile[data-c="a4"] { background: #14a06c; }
.aart .atile[data-c="a5"] { background: #141414; }
.aart .atile[data-c="a6"] { background: #ff7a45; }

/* ---------- OS-aware pricing card ---------- */
.os-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font: 600 .8rem/1 var(--font); color: rgb(255 255 255 / .85); }
.os-badge svg { width: 15px; height: 15px; }
.mac-top, .mac-alt { display: none; }
.price-card[data-os="mac"] .price-top:not(.mac-top),
.price-card[data-os="mac"] .price-body:not(.mac-alt) { display: none; }
.price-card[data-os="mac"] .mac-top { display: block; }
.price-card[data-os="mac"] .mac-alt { display: grid; gap: 18px; }
.mac-soon { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }

/* =====================================================================
   Tools page — family wheel lines + instant-tool art pieces.
   ===================================================================== */
/* each group header lists what its wheels hold: Shift → formats · Ctrl → tools */
.wheels { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: -8px 0 22px; }
.wh { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wh > kbd { font: 700 .72rem/1 var(--font); padding: 5px 9px; }
.wh > i { font-style: normal; color: var(--ink-2); }
.wchips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.wchips b { font: 650 .72rem/1 var(--font); letter-spacing: .03em; padding: 5px 9px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--ink); }
.wnote { font-size: .8rem; color: var(--ink-2); }


/* shared bits for the instant-tool cards */
.vbtn { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; border: 0; background: #2f5dff; color: #fff; border-radius: 7px; font: 650 .78rem/1 var(--font); padding: 9px 13px; cursor: pointer; }
.vbtn svg { width: 15px; height: 15px; }
.otag { position: absolute; right: 14px; top: 14px; z-index: 3; background: rgb(0 0 0 / .62); color: #fff; border-radius: 7px; padding: 7px 11px; font: 600 .76rem/1 var(--font); }
.otag[data-pop] { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s var(--ease); }
.tart.muted .otag, .tart.leveled .otag, .tart.mono .otag, .tart.done .otag, .tart.on .otag { opacity: 1; transform: none; }

/* pseudo waveform — bar heights come from the nth-child weave below */
.wavebars { display: flex; align-items: center; gap: 2px; }
.wavebars i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--ink); height: calc(12% + var(--w, .5) * 76%); transition: height .45s var(--ease); }
.wavebars i:nth-child(4n+1) { --w: .34; } .wavebars i:nth-child(4n+2) { --w: .72; }
.wavebars i:nth-child(4n+3) { --w: .50; } .wavebars i:nth-child(5n) { --w: .92; }
.wavebars i:nth-child(7n) { --w: .20; } .wavebars i:nth-child(11n) { --w: .82; }
.wavebars i:nth-child(6n) { --w: .60; }
.tart .a-bg { position: absolute; left: 6%; right: 6%; top: 50%; height: 38%; transform: translateY(-50%); opacity: .5; }
.tart .a-bg i { background: var(--ink-2); }

/* video — Mute: speaker toggles, the audio track flattens */
.tart[data-art="vmute"] .vtrack { position: absolute; right: 14px; bottom: 17px; width: 50%; height: 30px; transition: opacity .35s, transform .35s var(--ease); transform-origin: bottom; }
.tart[data-art="vmute"] .vtrack i { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.tart.muted .vtrack { opacity: .14; transform: scaleY(.12); }
.vmute-btn .ic-off { display: none; }
.tart.muted .vmute-btn .ic-on { display: none; }
.tart.muted .vmute-btn .ic-off { display: block; }

/* video — Snapshot: filmstrip picks the frame */
.tart[data-art="snap"] > .snap-main { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.snap-main.f1, .sfr .fv1 { filter: saturate(.75) brightness(1.12); }
.snap-main.f3, .sfr .fv3 { filter: hue-rotate(-16deg) brightness(.9); }
.snap-main.f4, .sfr .fv4 { filter: saturate(1.45) brightness(.82) contrast(1.05); }
.film { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; padding: 6px; background: rgb(0 0 0 / .52); border-radius: 9px; }
.sfr { flex: 1; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; }
.sfr img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .72; transition: opacity .2s; }
.sfr.on { border-color: #fff; }
.sfr.on img { opacity: 1; }

/* audio — Normalize: bars level out to −16 LUFS */
.tart[data-art="norm"] .n-bars { position: absolute; left: 8%; right: 8%; top: 50%; height: 46%; transform: translateY(-50%); }
.tart.leveled .n-bars i { height: 56%; background: var(--accent); }
.tart[data-art="norm"] .lufs { position: absolute; right: 14px; top: 14px; background: rgb(0 0 0 / .62); color: #fff; border-radius: 7px; padding: 7px 11px; font: 700 .8rem/1 var(--font); }

/* audio — Visualize: a PNG card grows a waveform */
.tart[data-art="viz"] .png-out { position: absolute; left: 11%; right: 11%; top: 12%; bottom: 25%; display: grid; grid-template-rows: 1fr auto; gap: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 12px 14px; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .4s, transform .4s var(--ease); }
.tart.on[data-art="viz"] .png-out { opacity: 1; transform: none; }
.tart[data-art="viz"] .viz-bars { min-height: 0; }
.tart[data-art="viz"] .viz-bars i { height: 5%; background: var(--accent); transition: height .5s var(--ease); transition-delay: calc(var(--i, 0) * 20ms); }
.tart.on[data-art="viz"] .viz-bars i { height: calc(12% + var(--w, .5) * 76%); }
.tart[data-art="viz"] .png-name { font: 600 .72rem/1 var(--font); color: var(--ink-2); }

/* audio — Channels: two rows merge into one */
.tart[data-art="chan"] .chan-rows { position: absolute; left: 8%; right: 8%; top: 50%; height: 54%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; gap: 14%; }
.tart[data-art="chan"] .chan-rows > .wavebars { flex: 1; min-height: 0; overflow: hidden; transition: flex-grow .45s var(--ease), opacity .35s; }
.tart[data-art="chan"] .ch1 i { background: #2f5dff; }
.tart[data-art="chan"] .ch2 i { background: #ff4f8b; }
.tart.mono .chan-rows { gap: 0; }
.tart.mono .chan-rows > .ch2 { flex-grow: 0; opacity: 0; }
.tart[data-art="chan"] .ch-tag { position: absolute; right: 14px; top: 14px; background: rgb(0 0 0 / .62); color: #fff; border-radius: 7px; padding: 7px 11px; font: 600 .76rem/1 var(--font); }

/* pdf — Split: the doc slides aside, page files land in a dashed folder */
.tart[data-art="psplit"] .pdoc { position: absolute; left: 9%; top: 20%; width: 34%; height: 54%; background: var(--raised); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; gap: 4px; transition: transform .45s var(--ease), opacity .4s; }
.tart[data-art="psplit"] .pdoc::before { content: ""; position: absolute; right: -1px; top: -1px; width: 16px; height: 16px; background: var(--surface); clip-path: polygon(0 0, 100% 100%, 0 100%); border-radius: 0 7px 0 0; }
.tart[data-art="psplit"] .pdoc::after { content: ""; position: absolute; left: 16%; right: 16%; top: 20%; height: 30px; background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 9px); }
.tart[data-art="psplit"] .pdoc b { font: 700 .8rem/1 var(--font); margin-top: 52%; }
.tart[data-art="psplit"] .pdoc i { font-style: normal; font-size: .72rem; color: var(--ink-2); }
.tart.done[data-art="psplit"] .pdoc { transform: translateX(-16%) scale(.86); opacity: .8; }
.tart[data-art="psplit"] .pfold { position: absolute; right: 7%; top: 12%; width: 47%; bottom: 12%; border: 2px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-rows: auto 1fr; gap: 8px; opacity: 0; transform: translateX(14px); transition: opacity .4s, transform .45s var(--ease); }
.tart.done .pfold { opacity: 1; transform: none; }
.tart[data-art="psplit"] .pfold > b { font: 700 .78rem/1 var(--font); color: var(--ink-2); }
.tart[data-art="psplit"] .ppages { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.tart[data-art="psplit"] .ppages .stag { font: 600 .68rem/1 var(--font); padding: 6px 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 1px 2px rgb(20 24 40 / .08); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.tart.done .ppages .stag { opacity: 1; transform: none; }
.tart[data-art="psplit"] .stag-more { background: var(--surface); box-shadow: none; border-style: dashed; color: var(--ink-2); }

/* archive — Extract: the zip slides aside, the folder fills with files */
.tart[data-art="xtract"] .xbox { position: absolute; left: 8%; top: 30%; width: 36%; background: #ffc21a; border-radius: 9px; box-shadow: var(--shadow); padding: 14px 14px 14px 22px; display: grid; gap: 3px; transition: transform .45s var(--ease), opacity .4s; }
.tart[data-art="xtract"] .xbox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; border-radius: 9px 0 0 9px; background: repeating-linear-gradient(180deg, #e0a800 0 5px, #ffc21a 5px 10px); }
.tart[data-art="xtract"] .xbox b { font: 800 .9rem/1.1 var(--font); color: #141414; }
.tart[data-art="xtract"] .xbox i { font-style: normal; font-size: .72rem; color: #141414; opacity: .72; }
.tart.done[data-art="xtract"] .xbox { transform: translateX(-14%) scale(.86); opacity: .8; }
.tart[data-art="xtract"] .xfold { position: absolute; right: 7%; top: 15%; width: 47%; bottom: 11%; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .45s var(--ease); }
.tart[data-art="xtract"] .xfold::before { content: ""; position: absolute; left: -1px; top: -14px; width: 42%; height: 14px; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tart.done .xfold { opacity: 1; transform: none; }
.tart[data-art="xtract"] .xfold > b { font: 700 .8rem/1 var(--font); }
.tart[data-art="xtract"] .xfold ul { margin-top: 6px; display: grid; gap: 5px; }
.tart[data-art="xtract"] .xfold li { font: 500 .72rem/1.3 ui-monospace, Consolas, monospace; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.tart.done .xfold li { opacity: 1; transform: none; }

/* supported formats — flat display table (Tangerine-style, no cards/hover) */
.fmt-table { border-top: 1px solid var(--line); margin-top: 40px; }
.frow {
  display: grid; grid-template-columns: 170px 1fr minmax(0, 32ch); align-items: baseline;
  gap: 18px 32px; padding: 26px 4px; border-bottom: 1px solid var(--line);
}
.frow .flabel { font: 650 1.02rem var(--font); color: var(--ink); letter-spacing: -.01em; }
.frow .flist { color: var(--ink-2); font-size: .95rem; letter-spacing: .14em; line-height: 1.9; }
.frow .fnote { color: var(--ink-2); font-size: .84rem; text-align: right; line-height: 1.5; }
@media (max-width: 860px) {
  .frow { grid-template-columns: 1fr; gap: 6px; }
  .frow .fnote { text-align: left; }
}

/* wheel showcase tabs */
.how-tabs { display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; }
.how-tabs button {
  display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer;
  padding: 8px 18px 8px 10px; border-radius: 99px; color: var(--ink-2); font: 650 .95rem var(--font);
}
.how-tabs button b { font-weight: 650; }
.how-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.how-tabs button[aria-selected="true"] .kc { background: rgb(255 255 255 / .16); border-color: transparent; color: #fff; }
.how-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.is-pane[hidden] { display: none; }
.how-grid { grid-template-columns: 1fr; max-width: 920px; }

/* =====================================================================
   2026 FLAT DECK — light grey page, white rounded panels, brand colour.
   No shadows anywhere (except the file-action cards, carved out below).
   Colour lives in buttons, keys and the page waves.
   ===================================================================== */
:root {
  --brand-grad: linear-gradient(100deg, #ff4f8b 0%, #ff7a5c 30%, #ffc21a 62%, #6f9bff 100%);
  --brand-ink: #141414;
  --blue-soft: #e9eeff;
  --red-soft: #ffe7ef;
  --amber-soft: #fff3cd;
}
[data-theme="deck"] {
  --bg: #f4f4f6;
  --surface: #f7f7fa;
  --raised: #ffffff;
  --line: #e4e5eb;
}
*:not(.stat-card), *::before, *::after { box-shadow: none !important; }

/* ---------- scrolling page waves (absolute, so they move with content) ---------- */
body { position: relative; }
.page-waves {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.pw {
  position: absolute; left: 0; width: 100%;
  height: clamp(190px, 24vw, 340px);
  opacity: 1; display: block;
}
/* Landing: the bands live INSIDE their section (`.how` / `.pricing`) so they
   always sweep behind content — a fixed `top` used to land on the h2 at
   narrower widths. `.pw-c` alone stays in the body-level `.page-waves` layer,
   arcing behind the footer. */
.pw-a { top: 430px; }
.pw-b { top: 4150px; }
.pw-c { top: auto; bottom: 0; }
/* full-bleed braid anchored below the section heading, painted behind the
   section's content (z-index -1 → stays under the white panels) */
.wex, .pricing-inner, .stats-block { position: relative; }
.how .pw-a, .stats-block .pw-b {
  display: block; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -1;
}
.how .pw-a { top: -12px; }
/* sweeps behind the "300+ conversions" head + stat strip, kept high so the
   strokes hug the stats and don't cross into the file-actions section */
.stats-block .pw-b { top: -64px; }
.stats-block { margin-top: clamp(28px, 4.5vw, 56px); }
@media (prefers-reduced-motion: no-preference) {
  html.js .stats-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
  }
  html.js .stats-block.inview {
    opacity: 1;
    transform: none;
  }
}

/* ---------- file actions section (landing) ---------- */
.fa-board {
  display: grid; grid-template-columns: minmax(300px, 350px) 1fr;
  gap: 18px; align-items: stretch;
}
.fa-wheel-box {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 18px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.fa-wheel { width: min(292px, 70vw); }
.fa-wheel svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgb(20 24 40 / .22)); }
.fa-wheel .wseg { cursor: default; }
.fa-cap { font-size: .82rem; color: var(--ink-2); }
/* pressing the alt cap pops the wheel — same boost the wex keycaps use */
.fa-wheel-box.boost .fa-wheel { animation: wxk-boost .45s cubic-bezier(.16, 1, .3, 1); }
.fa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fa-card {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 18px 16px; display: grid; gap: 7px; align-content: start;
}
.fa-card .fa-ic { width: 22px; height: 22px; color: var(--ink-2); }
.fa-card b { font-size: .98rem; }
.fa-card p { font-size: .83rem; color: var(--ink-2); line-height: 1.5; }
.fa-note { margin-top: 16px; font-size: .84rem; color: var(--ink-2); }
.fa-sub { color: var(--ink-2); max-width: 52ch; font-size: 1.05rem; }
.fa-sub kbd, .stat kbd { font: inherit; }
@media (max-width: 900px) {
  .fa-board { grid-template-columns: 1fr; }
  .fa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .fa-grid { grid-template-columns: 1fr; } }
/* Tools: a 3-line braid behind the tab bar and an arc at the footer. */
.tools-page .pw-a { top: 260px; }
main, .footer { position: relative; z-index: 1; }
.nav { border-bottom: 1px solid transparent; }
.nav.scrolled { border-color: var(--line); }

/* ---------- colourful buttons ---------- */
.btn-primary {
  font-weight: 700;
  transition: filter .18s, transform .18s var(--ease);
}
.btn-primary:active { transform: translateY(1px); }
.nav .btn-primary, .cta-card .btn-primary { border: 0; }

/* =====================================================================
   Clean wheel
   ===================================================================== */
.cw-svg { width: 100%; height: auto; display: block; overflow: visible; user-select: none; }
.cw-svg text {
  text-anchor: middle; font-family: var(--font); fill: #3d4250;
  transition: fill .18s;
}
/* segs are focusable <g> elements — the UA/SVG ring and :focus-visible strokes
   draw as an ugly black rectangle (and :focus-visible matches on mouse click in
   some browsers). Keyboard focus already lights the .hot state via JS. */
.cw-svg .cw-seg,
.cw-svg .cw-seg:focus,
.cw-svg .cw-seg:focus-visible {
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.cw-svg .cw-seg path {
  fill: #e9eaf0; stroke: #e9eaf0; stroke-width: 1;
  transition: fill .18s, stroke .18s;
}
.cw-svg .cw-seg:hover path { fill: #dfe2ec; stroke: #dfe2ec; }
.cw-svg .cw-seg text { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.cw-svg .cw-seg use { color: #4b5160; transition: color .18s; }
.cw-svg .cw-hub { pointer-events: none; }
.cw-svg .cw-hub-circle { fill: #fff; stroke: var(--line); stroke-width: 1; }
.cw-svg .cw-hub-main { font-size: 17px; font-weight: 800; fill: var(--ink); letter-spacing: -.02em; }
.cw-svg .cw-hub-sub { font-size: 10.5px; font-weight: 600; fill: var(--ink-2); }
.cw-svg .cw-seg.hot path { stroke: transparent; }
.tone-blue .cw-seg.hot path { fill: #2f5dff; }
.tone-red .cw-seg.hot path { fill: #ff4f8b; }
.tone-amber .cw-seg.hot path { fill: #ffc21a; }
.tone-blue .cw-seg.hot text, .tone-blue .cw-seg.hot use { fill: #fff; color: #fff; }
.tone-red .cw-seg.hot text, .tone-red .cw-seg.hot use { fill: #fff; color: #fff; }
.tone-amber .cw-seg.hot text, .tone-amber .cw-seg.hot use { fill: #141414; color: #141414; }

/* card wheel — the app's Fan Deck chips: fanned rounded cards on a rivet hub */
.cw-svg.cards .cw-card-plate { fill: #e9eaf0; }
/* the shadow lives on the unrotated segment group, so the offset stays
   screen-down even though each card itself is fanned by rotate(mid) */
.cw-svg.cards .cw-seg {
  filter: drop-shadow(0 3px 5px rgb(20 20 20 / .22));
  transition: filter .2s var(--ease);
}
.cw-svg.cards .cw-seg:hover,
.cw-svg.cards .cw-seg.hot {
  filter: drop-shadow(0 6px 10px rgb(20 20 20 / .26));
}
.cw-svg.cards .cw-card-lift {
  transform-box: fill-box; transform-origin: center;
  transition: transform .2s var(--ease);
}
.cw-svg.cards .cw-card-bg {
  stroke: transparent; stroke-width: 2.5;
  transition: stroke .16s, filter .16s;
}
.cw-svg.cards .cw-card-edge { fill: none; stroke: #fff; stroke-width: 3; }
/* hover slides the card radially out of the deck — the parent group is
   rotate(mid), so -Y in local space points away from the hub */
.cw-svg.cards .cw-seg:hover .cw-card-lift,
.cw-svg.cards .cw-seg.hot .cw-card-lift { transform: translateY(-14px); }
.cw-svg.cards .cw-seg:hover .cw-card-bg,
.cw-svg.cards .cw-seg.hot .cw-card-bg { filter: brightness(1.04) saturate(1.04); }
.cw-svg.cards .ink-l { color: #fff; }
.cw-svg.cards .ink-d { color: #141414; }
.cw-svg.cards .ink-l use { color: #fff; }
.cw-svg.cards .ink-d use { color: #141414; }
.cw-svg.cards .cw-card-label {
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  fill: currentColor;
}
.cw-svg.cards .cw-card-code {
  font-size: 8.5px; font-weight: 650; letter-spacing: .08em;
  fill: currentColor; opacity: .72;
}
.cw-svg.cards.sm .cw-card-label { font-size: 13px; }
.cw-svg.cards.sm .cw-card-code { font-size: 7.4px; }
.cw-svg.cards.xsm .cw-card-label { font-size: 11px; letter-spacing: -.03em; }
.cw-svg.cards.xsm .cw-card-code { font-size: 6.6px; }
.cw-svg.cards .cw-hub-circle { fill: #fff; stroke: rgb(20 24 32 / .14); stroke-width: 1;
  filter: drop-shadow(0 8px 22px rgb(20 24 32 / .24)); }
.cw-svg.cards .cw-hub-main { fill: #141414; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cw-svg.cards .cw-hub-sub { fill: #5b6570; font-size: 9.5px; font-weight: 600; }
.cw-svg.cards.sm .cw-hub-main { font-size: 14px; }
.cw-svg.cards.sm .cw-hub-sub { font-size: 8.5px; }

/* =====================================================================
   Landing explorer — two wheels in one white panel (Tangerine layout)
   ===================================================================== */
.wex { margin-top: 4px; }
.wex-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  width: fit-content; max-width: 100%;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 18px; margin-bottom: 12px;
}
.wex-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  padding: 9px 13px; color: var(--ink-2);
  font: 650 .88rem/1 var(--font); white-space: nowrap;
  transition: background .16s, color .16s;
}
.wex-tabs button svg { width: 16px; height: 16px; }
.wex-tabs button:focus-visible { outline-offset: 1px; }

.wex-panel {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(14px, 2.2vw, 26px);
}
.wex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wex-cols.solo { grid-template-columns: minmax(0, 440px); justify-content: center; }
.wex-col {
  min-width: 0; display: grid; gap: 8px; justify-items: center;
  padding: clamp(12px, 1.8vw, 20px);
  border-radius: 18px;
}
.wex-col[hidden] { display: none; }
.wex-wheel { width: min(100%, 360px); }

/* =====================================================================
   Formats table (notes removed)
   ===================================================================== */
.frow { grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; }
.frow .flist { letter-spacing: .12em; }

/* =====================================================================
   Tools page — family tabs, two wheels on top, tool details below
   ===================================================================== */
.tools-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(18px, 2.6vw, 30px); }
.tools-hero h1 { margin-top: 10px; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.03em; font-stretch: 116%; }

.tools-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  width: fit-content; max-width: 100%;
  margin: 0 auto clamp(18px, 2.4vw, 28px);
  background: var(--raised); border: 1px solid var(--line); border-radius: 18px;
}
.tools-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  padding: 10px 15px; color: var(--ink-2);
  font: 650 .9rem/1 var(--font); white-space: nowrap;
  transition: background .16s, color .16s;
}
.tools-tabs button svg { width: 16px; height: 16px; }
/* each family tab wears its own brand colour when selected */
.tools-tabs button[data-pane="img"]     { --famc: #ff4f8b; --fami: #fff; }
.tools-tabs button[data-pane="video"]   { --famc: #d92844; --fami: #fff; }
.tools-tabs button[data-pane="audio"]   { --famc: #7a4dff; --fami: #fff; }
.tools-tabs button[data-pane="pdf"]     { --famc: #e5334b; --fami: #fff; }
.tools-tabs button[data-pane="arc"]     { --famc: #ffc21a; --fami: #141414; }
.tools-tabs button[data-pane="actions"] { --famc: #14a06c; --fami: #fff; }
.tools-tabs button:hover { background: var(--surface); }
.tools-tabs button:not([aria-selected="true"]):hover { color: var(--famc, var(--ink)); }
.tools-tabs button[aria-selected="true"] { background: var(--famc, var(--ink)); color: var(--fami, #fff); }
.tools-tabs button:focus-visible { outline-offset: 1px; }

.tool-board { padding: 0 0 clamp(54px, 8vw, 96px); }
.tb-pane[hidden] { display: none; }

.board-panel {
  padding: clamp(16px, 2.6vw, 32px);
  background: var(--raised); border: 1px solid var(--line); border-radius: 28px;
}
.tb-wheels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 980px; margin-inline: auto;
}
.tb-wheel-cell {
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
  justify-items: center; min-width: 0;
  padding: 2px clamp(8px, 2vw, 28px) 0;
}
.tb-wheel-cell + .tb-wheel-cell {
  border-left: 1px solid var(--line);
  padding-left: clamp(14px, 2.6vw, 34px);
}
.tb-wheels.solo { max-width: 480px; }
.tb-wheels.solo .tb-wheel-cell { padding-inline: 0; }
.tb-wheels.solo .tb-wheel-cell + .tb-wheel-cell { border-left: 0; }
.tb-wheel-head { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.tb-wheel-head .kc { flex: none; border: 0; }
.tb-wheel-head .kc.is-blue { background: var(--blue-soft); color: #2448d8; }
.tb-wheel-head .kc.is-red { background: var(--red-soft); color: #d92763; }
.tb-wheel-head .kc.is-amber { background: var(--amber-soft); color: #8a6100; }
.tb-wheel-head b { font-size: .9rem; font-weight: 750; white-space: nowrap; }
.tb-count {
  margin-left: auto; color: var(--ink-2);
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.board-wheel { width: min(100%, 360px); margin: 2px auto 0; }
.tb-cap { color: var(--ink-2); font-size: .78rem; text-align: center; }

.tgrid, .agrid { margin-top: clamp(18px, 2.6vw, 30px); }

/* ---------- tool cards ---------- */
.toolcard:hover, .actcard:hover { border-color: #cdd0db; }
.tart {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: var(--surface); touch-action: none;
}
.tart > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tart.dark { background: #151720; }
.toolcard.wide .tart { aspect-ratio: 21 / 9; }
.tfoot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tfoot > svg { width: 22px; height: 22px; color: var(--pane-fam, var(--ink-2)); flex: none; }
.tfoot b { font: 800 1.55rem/1.1 var(--font); letter-spacing: -.02em; font-stretch: 116%; }
.tdesc { color: var(--ink-2); font-size: .98rem; line-height: 1.55; max-width: 48ch; }

/* replay + action buttons */
.replay {
  position: absolute; right: 10px; top: 10px; z-index: 5;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / .6); border-radius: 50%;
  background: rgb(255 255 255 / .78); color: var(--ink);
  cursor: pointer; opacity: 0; transition: opacity .18s, background .18s;
  backdrop-filter: blur(4px);
}
.replay svg { width: 14px; height: 14px; }
.toolcard:hover .replay, .actcard:hover .replay, .replay:focus-visible { opacity: 1; }
.replay:hover { background: #fff; }
.vbtn, .strip-btn {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; padding: 9px 14px;
  background: #2f5dff; color: #fff;
  font: 750 .76rem/1 var(--font); cursor: pointer;
  transition: filter .16s, transform .16s var(--ease);
}
.vbtn:active, .strip-btn:active { transform: translateY(1px); }
.vbtn:disabled { cursor: default; opacity: .85; }
.vbtn svg { width: 15px; height: 15px; }
.otag {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  max-width: calc(100% - 110px);
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff;
  font: 600 .7rem/1.2 var(--font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otag.blurt { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease); }
.tart.done .otag.blurt, .tart.muted .otag.blurt, .tart.leveled .otag.blurt,
.tart.mono .otag.blurt, .tart.on .otag.blurt { opacity: 1; transform: none; }
.ping { animation: cardPing .9s var(--ease); }
@keyframes cardPing {
  0%, 100% { outline: 3px solid transparent; outline-offset: 0; }
  30% { outline: 3px solid var(--accent); outline-offset: 3px; }
}

/* ---------- crop ---------- */
.tart .crop-frame {
  position: absolute; left: 22%; top: 12%; width: 46%; aspect-ratio: 1;
  border: 2px solid #fff;
  outline: 100vmax solid rgb(10 12 18 / .48);
  cursor: move; z-index: 2;
  transition: width .3s var(--ease), height .3s var(--ease), top .3s var(--ease), left .3s var(--ease);
}
.tart .crop-frame i {
  position: absolute; width: 16px; height: 16px; border: 0 solid #fff; z-index: 3;
}
.tart .crop-frame i[data-c="nw"] { left: -5px; top: -5px; border-width: 5px 0 0 5px; cursor: nwse-resize; }
.tart .crop-frame i[data-c="ne"] { right: -5px; top: -5px; border-width: 5px 5px 0 0; cursor: nesw-resize; }
.tart .crop-frame i[data-c="sw"] { left: -5px; bottom: -5px; border-width: 0 0 5px 5px; cursor: nesw-resize; }
.tart .crop-frame i[data-c="se"] { right: -5px; bottom: -5px; border-width: 0 5px 5px 0; cursor: nwse-resize; }
.tart[data-ratio="16:9"] .crop-frame { width: 62%; aspect-ratio: 16 / 9; top: 20%; }
.tart[data-ratio="9:16"] .crop-frame { width: 30%; aspect-ratio: 9 / 16; }
.tart[data-ratio="4:3"] .crop-frame { width: 54%; aspect-ratio: 4 / 3; top: 16%; }
.tart[data-ratio="3:4"] .crop-frame { width: 38%; aspect-ratio: 3 / 4; }
.tart[data-ratio="Free"] .crop-frame { width: 50%; aspect-ratio: 4 / 3; border-style: dashed; }
.tart.cropping .crop-frame { border-color: #ffc21a; transition: none; }
.crop-dim {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff;
  font: 600 .68rem/1 var(--font);
}
.ratio-row {
  position: absolute; left: 50%; right: auto; top: auto; bottom: 10px; transform: translateX(-50%);
  z-index: 4; display: flex; gap: 4px;
  max-width: calc(100% - 24px); padding: 5px;
  background: rgb(14 16 24 / .58); border-radius: 999px;
  backdrop-filter: blur(6px); overflow-x: auto; scrollbar-width: none;
}
.ratio-row::-webkit-scrollbar { display: none; }
.rpill {
  border: 0; border-radius: 999px; padding: 6px 9px;
  background: transparent; color: rgb(255 255 255 / .82);
  font: 650 .7rem/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.rpill:hover { background: rgb(255 255 255 / .16); color: #fff; }
.rpill.on { background: #fff; color: #141414; }

/* ---------- background presets ---------- */
.bg-plate-t { position: absolute; inset: 0; display: grid; place-items: center; padding: 11%; transition: background .45s var(--ease); }
.bg-plate-t img { width: 72%; border-radius: 10px; border: 4px solid rgb(255 255 255 / .92); }
/* presets are real abstract plates in /img/bg/ (same files the app ships in
   resources/bg/) — url() in the stylesheet keeps style-src 'self' happy */
.bg-plate-t[data-preset] { background: #141414 center / cover no-repeat; }
.bg-plate-t[data-preset="aurora"] { background-image: url("/img/bg/aurora.webp"); }
.bg-plate-t[data-preset="ocean"] { background-image: url("/img/bg/ocean.webp"); }
.bg-plate-t[data-preset="sunset"] { background-image: url("/img/bg/sunset.webp"); }
.bg-plate-t[data-preset="grape"] { background-image: url("/img/bg/grape.webp"); }
.bg-plate-t[data-preset="mint"] { background-image: url("/img/bg/mint.webp"); }
.bg-plate-t[data-preset="sand"] { background-image: url("/img/bg/sand.webp"); }
.bg-plate-t[data-preset="rose"] { background-image: url("/img/bg/rose.webp"); }
.bg-plate-t[data-preset="graphite"] { background-image: url("/img/bg/graphite.webp"); }
.swatches { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; gap: 6px; }
.swatches button {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; background: none; cursor: pointer;
  display: grid; place-items: center; transition: transform .15s var(--ease);
}
.swatches button i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatches button[data-p] i { background: #141414 center / cover no-repeat; }
.swatches button[data-p="aurora"] i { background-image: url("/img/bg/aurora.webp"); }
.swatches button[data-p="ocean"] i { background-image: url("/img/bg/ocean.webp"); }
.swatches button[data-p="sunset"] i { background-image: url("/img/bg/sunset.webp"); }
.swatches button[data-p="grape"] i { background-image: url("/img/bg/grape.webp"); }
.swatches button[data-p="mint"] i { background-image: url("/img/bg/mint.webp"); }
.swatches button[data-p="sand"] i { background-image: url("/img/bg/sand.webp"); }
.swatches button[data-p="rose"] i { background-image: url("/img/bg/rose.webp"); }
.swatches button[data-p="graphite"] i { background-image: url("/img/bg/graphite.webp"); }
.swatches button:hover { transform: scale(1.1); }
.swatches button.on { outline: 2px solid #141414; outline-offset: 1px; }
.bg-name {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .62); color: #fff; font: 650 .7rem/1 var(--font);
}

/* ---------- compress ---------- */
.cq {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 750 .76rem/1 var(--font);
}
.cq s { font-weight: 500; opacity: .7; }
.csaved {
  position: absolute; left: 12px; top: 12px; z-index: 4;
  padding: 6px 10px; border-radius: 999px;
  background: #dcf7e8; color: #0b7a4b; font: 750 .7rem/1 var(--font);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--ease);
}
.tart.done .csaved { opacity: 1; transform: none; }
.tart[data-art="compress"] > img { transition: filter .5s, transform .5s var(--ease); }
.tart[data-art="compress"] > img.squeezed { filter: saturate(.82) contrast(.94); transform: scale(1.015); }

/* ---------- redact ---------- */
.tart[data-art="redact"] { cursor: crosshair; }
.redact-hint {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 600 .7rem/1 var(--font);
}
.rbox { position: absolute; z-index: 2; background: #000; border-radius: 3px; pointer-events: none; }
.rbox.auto { animation: rboxIn .3s var(--ease) both; }
@keyframes rboxIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.rclear {
  position: absolute; right: 50px; top: 12px; z-index: 4;
  padding: 6px 10px; border: 0; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 600 .7rem/1 var(--font); cursor: pointer;
}
.rclear:hover { background: #000; }

/* ---------- resize ---------- */
.rdim {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 600 .76rem/1 var(--font);
}
.tart[data-art="resize"] .rsz-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.tart[data-art="resize"] .rsz-img { width: var(--w, 82%); height: auto; border-radius: 9px; transition: width .3s var(--ease); }
.rsz-row { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; gap: 4px; padding: 5px; background: rgb(14 16 24 / .58); border-radius: 999px; }
.rsz-row .rpill { padding: 6px 9px; }

/* ---------- metadata ---------- */
.exif {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74%; padding: 12px 14px; z-index: 2;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  text-align: left;
}
.exif ul { display: grid; }
.exif li { display: flex; justify-content: space-between; gap: 10px; font-size: .79rem; padding: 5px 0; border-bottom: 1px solid var(--line); }
.exif li:last-child { border-bottom: 0; }
.exif .k { color: var(--ink-2); }
.exif .v { font-weight: 650; transition: color .3s, opacity .3s; }
.exif.stripped .v { color: var(--ink-2); opacity: .45; text-decoration: line-through; }

/* ---------- waveform pieces ---------- */
.wavebars { display: flex; align-items: center; gap: 2px; }
.wavebars i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--ink); height: calc(12% + var(--w, .5) * 76%); transition: height .45s var(--ease); }
.wavebars i:nth-child(4n+1) { --w: .34; } .wavebars i:nth-child(4n+2) { --w: .72; }
.wavebars i:nth-child(4n+3) { --w: .50; } .wavebars i:nth-child(5n) { --w: .92; }
.wavebars i:nth-child(7n) { --w: .20; } .wavebars i:nth-child(11n) { --w: .82; }
.wavebars i:nth-child(6n) { --w: .60; }
.tart .a-bg { position: absolute; left: 7%; right: 7%; top: 50%; height: 38%; transform: translateY(-50%); opacity: .5; }
.tart .a-bg i { background: var(--ink-2); }
.tart.dark .a-bg i { background: rgb(255 255 255 / .45); }

/* video — mute */
.tart[data-art="vmute"] .vtrack { position: absolute; right: 12px; bottom: 58px; width: 48%; height: 30px; transition: opacity .35s, transform .35s var(--ease); transform-origin: bottom; }
.tart[data-art="vmute"] .vtrack i { background: #fff; }
.tart.muted .vtrack { opacity: .13; transform: scaleY(.12); }
.vmute-btn .ic-off { display: none; }
.tart.muted .vmute-btn .ic-on { display: none; }
.tart.muted .vmute-btn .ic-off { display: block; }
.tart.muted .vmute-btn, .tart.muted .norm-btn, .tart.mono .chan-btn, .tart.leveled .norm-btn, .tart.done .cbtn { filter: brightness(1.02); }

/* video — snapshot */
.tart[data-art="snap"] > .snap-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.snap-main.f1, .sfr .fv1 { filter: saturate(.75) brightness(1.12); }
.snap-main.f3, .sfr .fv3 { filter: hue-rotate(-16deg) brightness(.9); }
.snap-main.f4, .sfr .fv4 { filter: saturate(1.45) brightness(.82) contrast(1.05); }
.film { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 5px; padding: 5px; background: rgb(14 16 24 / .55); border-radius: 10px; backdrop-filter: blur(6px); }
.sfr { flex: 1; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; }
.sfr img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .7; transition: opacity .2s; }
.sfr.on { border-color: #fff; }
.sfr.on img { opacity: 1; }

/* audio — normalize */
.tart[data-art="norm"] .n-bars { position: absolute; left: 9%; right: 9%; top: 50%; height: 44%; transform: translateY(-50%); }
.tart.leveled .n-bars i { height: 56%; background: var(--accent); }
.lufs {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 700 .72rem/1 var(--font);
}

/* audio — visualize */
.tart[data-art="viz"] .png-out {
  position: absolute; left: 10%; right: 10%; top: 12%; bottom: 26%;
  display: grid; grid-template-rows: 1fr auto; gap: 8px;
  padding: 11px 12px; background: var(--raised);
  border: 1px solid var(--line); border-radius: 11px;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .4s, transform .4s var(--ease);
}
.tart.on[data-art="viz"] .png-out { opacity: 1; transform: none; }
.tart[data-art="viz"] .viz-bars { min-height: 0; }
.tart[data-art="viz"] .viz-bars i { height: 5%; background: var(--accent); transition: height .5s var(--ease); transition-delay: calc(var(--i, 0) * 18ms); }
.tart.on[data-art="viz"] .viz-bars i { height: calc(12% + var(--w, .5) * 76%); }
.tart[data-art="viz"] .png-name { font: 600 .68rem/1 var(--font); color: var(--ink-2); }

/* audio — channels */
.tart[data-art="chan"] .chan-rows { position: absolute; left: 9%; right: 9%; top: 50%; height: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; gap: 12%; }
.tart[data-art="chan"] .chan-rows > .wavebars { flex: 1; min-height: 0; overflow: hidden; transition: flex-grow .45s var(--ease), opacity .35s; }
.tart[data-art="chan"] .ch1 i { background: #2f5dff; }
.tart[data-art="chan"] .ch2 i { background: #ff4f8b; }
.tart.mono .chan-rows { gap: 0; }
.tart.mono .chan-rows > .ch2 { flex-grow: 0; opacity: 0; }
.ch-tag {
  position: absolute; right: 50px; top: 12px; z-index: 3;
  padding: 6px 10px; border-radius: 999px;
  background: rgb(14 16 24 / .66); color: #fff; font: 600 .7rem/1 var(--font);
}

/* ---------- PDF split ---------- */
.tart[data-art="psplit"], .tart[data-art="xtract"] { background: #eef0f6; }
.tart[data-art="psplit"] .pdoc {
  position: absolute; left: 7%; top: 18%; width: 34%; height: 60%;
  display: grid; place-items: center; align-content: center; gap: 4px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 9px;
  transition: transform .45s var(--ease), opacity .4s;
}
.tart[data-art="psplit"] .pdoc::before { content: ""; position: absolute; right: -1px; top: -1px; width: 16px; height: 16px; background: #eef0f6; clip-path: polygon(0 0, 100% 100%, 0 100%); border-radius: 0 9px 0 0; }
.tart[data-art="psplit"] .pdoc::after { content: ""; position: absolute; left: 16%; right: 16%; top: 20%; height: 30px; background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 9px); }
.tart[data-art="psplit"] .pdoc b { font: 700 .76rem/1 var(--font); margin-top: 50%; }
.tart[data-art="psplit"] .pdoc i { font-style: normal; font-size: .68rem; color: var(--ink-2); }
.tart.done[data-art="psplit"] .pdoc { transform: translateX(-14%) scale(.88); opacity: .8; }
.tart[data-art="psplit"] .pfold {
  position: absolute; right: 6%; top: 12%; width: 48%; bottom: 12%;
  display: grid; grid-template-rows: auto 1fr; gap: 7px;
  padding: 10px 12px; border: 2px dashed #c7ccda; border-radius: 11px;
  opacity: 0; transform: translateX(14px); transition: opacity .4s, transform .45s var(--ease);
}
.tart.done .pfold { opacity: 1; transform: none; }
.tart[data-art="psplit"] .pfold > b { font: 700 .74rem/1 var(--font); color: var(--ink-2); }
.tart[data-art="psplit"] .ppages { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }
.tart[data-art="psplit"] .ppages .stag {
  font: 600 .64rem/1 var(--font); padding: 6px 7px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.tart.done .ppages .stag { opacity: 1; transform: none; }
.tart[data-art="psplit"] .stag-more { background: #e5e8f0; border-style: dashed; color: var(--ink-2); }

/* ---------- archive extract ---------- */
.tart[data-art="xtract"] .xbox {
  position: absolute; left: 7%; top: 28%; width: 36%;
  padding: 14px 14px 14px 22px; border-radius: 11px;
  background: #ffc21a; display: grid; gap: 3px;
  transition: transform .45s var(--ease), opacity .4s;
}
.tart[data-art="xtract"] .xbox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; border-radius: 11px 0 0 11px; background: repeating-linear-gradient(180deg, #e0a800 0 5px, #ffc21a 5px 10px); }
.tart[data-art="xtract"] .xbox b { font: 800 .86rem/1.1 var(--font); color: #141414; }
.tart[data-art="xtract"] .xbox i { font-style: normal; font-size: .68rem; color: #141414; opacity: .72; }
.tart.done[data-art="xtract"] .xbox { transform: translateX(-14%) scale(.88); opacity: .8; }
.tart[data-art="xtract"] .xfold {
  position: absolute; right: 6%; top: 16%; width: 48%; bottom: 11%;
  padding: 12px 14px; background: var(--raised);
  border: 1px solid var(--line); border-radius: 11px;
  opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .45s var(--ease);
}
.tart[data-art="xtract"] .xfold::before { content: ""; position: absolute; left: -1px; top: -13px; width: 42%; height: 13px; background: var(--raised); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tart.done .xfold { opacity: 1; transform: none; }
.tart[data-art="xtract"] .xfold > b { font: 700 .76rem/1 var(--font); }
.tart[data-art="xtract"] .xfold ul { margin-top: 7px; display: grid; gap: 5px; }
.tart[data-art="xtract"] .xfold li { font: 500 .68rem/1.3 ui-monospace, Consolas, monospace; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.tart.done .xfold li { opacity: 1; transform: none; }

/* =====================================================================
   File actions — six animated demos
   ===================================================================== */

.aart {
  position: relative; isolation: isolate;
  background: #eef0f6; border-radius: 16px; overflow: hidden;
}
.act-copy, .act-path, .act-transfer, .act-term, .act-show { position: absolute; inset: 0; transform: scale(1.45); }
.adone {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  padding: 6px 9px; border-radius: 999px;
  background: #dcf7e8; color: #0b7a4b;
  font: 700 .66rem/1 var(--font);
  opacity: 0; transform: translateY(4px);
}
@keyframes adoneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* copy → clipboard */
.ac-file {
  position: absolute; left: 9%; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  font: 650 .74rem/1 var(--font); white-space: nowrap;
}
.ac-file svg { width: 16px; height: 16px; color: #ff4f8b; }
.ac-fly {
  position: absolute; left: 22%; top: 50%; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: #ff4f8b;
  opacity: 0; z-index: 3;
}
.ac-fly svg { width: 16px; height: 16px; }
.aclip {
  position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
  width: 76px; height: 76px; display: grid; place-items: center; gap: 3px;
  border: 1.5px dashed #c7ccda; border-radius: 16px;
  background: #fff; color: var(--ink-2); font: 650 .6rem/1 var(--font);
}
.aclip svg { width: 22px; height: 22px; }
.play .ac-fly { animation: acFly 1.05s .15s var(--ease) both; }
.play .aclip { animation: clipBump .25s 1.08s var(--ease); }
.play .act-copy .adone { animation: adoneIn .28s 1.22s var(--ease) forwards; }
@keyframes acFly {
  0% { opacity: 0; left: 22%; transform: translateY(-50%) scale(.7); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 116px); transform: translateY(-50%) scale(.9); }
}
@keyframes clipBump { 50% { transform: translateY(-50%) scale(1.07); border-color: #ff4f8b; } }

/* copy path → typewriter */
.act-path { display: grid; place-items: center; padding: 16px; }
.ap-win { width: min(88%, 306px); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ap-bar, .as-bar {
  display: flex; align-items: center; gap: 5px; padding: 8px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.ap-bar i, .as-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.ap-bar i:nth-child(2), .as-bar i:nth-child(2) { background: #febc2e; }
.ap-bar i:nth-child(3), .as-bar i:nth-child(3) { background: #28c840; }
.ap-bar b, .as-bar b { margin-left: auto; font: 650 .58rem/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ap-line { display: flex; align-items: center; gap: 1px; padding: 14px 13px 16px; font: 500 .72rem/1.2 ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; }
.ap-text { width: 0; overflow: hidden; }
.ap-caret { width: 2px; height: 1.05em; background: var(--accent); opacity: 0; }
.play .ap-text { animation: apType .85s .2s steps(19, end) forwards; }
.play .ap-caret { animation: caretBlink .8s .2s infinite; }
.play .act-path .adone { animation: adoneIn .25s 1.18s var(--ease) forwards; }
@keyframes apType { to { width: 19ch; } }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* move to / copy to */
.tr-file {
  position: absolute; left: 7%; top: 50%; transform: translateY(-50%);
  width: 64px; padding: 9px 7px; display: grid; justify-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font: 600 .6rem/1 var(--font);
}
.tr-file svg { width: 21px; height: 21px; color: #ff4f8b; }
.tr-file i { font-style: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-fly {
  position: absolute; left: 24%; top: 50%; width: 30px; height: 30px; z-index: 3;
  display: grid; place-items: center; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: #ff4f8b; opacity: 0;
}
.tr-fly svg { width: 16px; height: 16px; }
.tr-folder {
  position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
  width: 96px; height: 76px; display: grid; place-items: center; align-content: center; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.tr-folder svg { width: 23px; height: 23px; color: var(--accent); }
.tr-folder b { font: 700 .68rem/1 var(--font); }
.tr-count { font: 500 .6rem/1 var(--font); color: var(--ink-2); font-style: normal; }
.play .tr-fly { animation: trFly 1.05s .15s var(--ease) both; }
.play .tr-folder { animation: folderBump .3s 1.18s var(--ease); }
.play .act-transfer .adone { animation: adoneIn .28s 1.32s var(--ease) forwards; }
.play .act-transfer[data-kind="move"] .tr-file { animation: fileOut .32s .95s var(--ease) forwards; }
@keyframes trFly {
  0% { opacity: 0; left: 24%; transform: translateY(-50%) scale(.7); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 132px); transform: translateY(-50%) scale(.9); }
}
@keyframes fileOut { to { opacity: .18; transform: translateY(-50%) scale(.9); } }
@keyframes folderBump { 50% { transform: translateY(-50%) scale(1.08); border-color: var(--accent); } }

/* terminal */
.act-term { display: grid; place-items: center; padding: 16px; }
.at-win { width: min(88%, 320px); background: #16181f; border-radius: 12px; overflow: hidden; padding-bottom: 12px; }
.at-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #1f222b; }
.at-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.at-bar i:nth-child(2) { background: #febc2e; }
.at-bar i:nth-child(3) { background: #28c840; }
.at-bar b { margin-left: auto; font: 650 .58rem/1 var(--font); letter-spacing: .05em; color: #9aa1b0; }
.at-line { display: flex; align-items: center; min-height: 2.4em; padding: 13px 13px 2px; font: 500 .7rem/1.4 ui-monospace, Consolas, monospace; color: #e8eaf0; white-space: nowrap; overflow: hidden; }
.at-prompt { color: #8ab4ff; }
.at-cmd { width: 0; overflow: hidden; color: #ffd166; }
.at-cmd::before { content: "cd C:\\Photos"; }
.at-caret { width: 2px; height: 1.05em; background: #ffd166; }
.at-ok { display: block; padding: 0 13px; color: #6ee7a8; font: 600 .62rem/1 ui-monospace, Consolas, monospace; opacity: 0; transform: translateY(4px); }
.play .at-cmd { animation: atType .8s .2s steps(12, end) forwards; }
.play .at-caret { animation: caretBlink .8s .2s infinite; }
.play .at-ok { animation: adoneIn .25s 1.08s var(--ease) forwards; }
@keyframes atType { to { width: 12ch; } }

/* show in explorer */
.act-show { display: grid; place-items: center; padding: 14px; }
.as-win { width: min(86%, 300px); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.as-row { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--line); font: 600 .68rem/1.2 var(--font); }
.as-row svg { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.as-target { background: transparent; transition: background .2s; }
.as-sel { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--accent); color: #fff; font: 650 .56rem/1 var(--font); opacity: 0; transform: scale(.85); }
.play .as-target { animation: asSel .2s .35s var(--ease) forwards; }
.play .as-sel { animation: asBadge .25s .55s var(--ease) forwards; }
@keyframes asSel { to { background: #e8eeff; } }
@keyframes asBadge { to { opacity: 1; transform: none; } }

@media (hover: none) { .replay { opacity: 1; } }

/* =====================================================================
   Tools CTA
   ===================================================================== */
.cta-card {
  background: linear-gradient(115deg, #ffe3ec 0%, #fff4d6 48%, #e4ebff 100%);
  color: var(--ink); border: 1px solid #f0dce6; border-radius: 22px;
}
.cta-card p { color: var(--ink-2); }

/* keep the landing's older tool tiles soft and rounded */
.tool { border-radius: var(--r); overflow: hidden; }
.tool-art { border-radius: 10px; }
.ratio-row b { border-radius: 999px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1000px) {
  .board-panel { grid-template-columns: minmax(0, 1fr); }
  .board-wheel-wrap { position: static; max-width: 340px; width: 100%; margin-inline: auto; }
  .wex-cols { grid-template-columns: 1fr 1fr; }
  /* detail rows stack: capture on top, copy below */
  .toolcard, .actcard { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .frow { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 760px) {
  .wex-cols, .wex-cols.solo { grid-template-columns: minmax(0, 1fr); }
  .wex-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .wex-tabs::-webkit-scrollbar { display: none; }
  .wex-panel { border-radius: 20px; }
  .wex-col { border-radius: 15px; }
  .board-panel { border-radius: 18px; }
  .toolcard, .actcard { border-radius: 16px; }
  .board-head { gap: 11px; }
  .board-icon { width: 40px; height: 40px; border-radius: 12px; }
  .board-icon svg { width: 20px; height: 20px; }
  .tfoot { padding: 10px 13px 12px; }
  .tout { max-width: 52%; font-size: .66rem; }
  .toolcard.wide .tart { aspect-ratio: 4 / 3; }
  .otag { max-width: calc(100% - 100px); font-size: .66rem; }
  .pw { height: clamp(150px, 32vw, 240px); }
  .pw-a { top: 320px; }
  .pw-b { display: none; }
  .pw-c { top: auto; bottom: 0; }
  .tools-page .pw-a { top: 205px; }
}
@media (max-width: 520px) {
  .board-lines { padding: 5px; }
  .board-line { padding: 7px 8px; gap: 6px; }
  .board-tags span { padding: 5px 8px; font-size: .68rem; }
  .tart { aspect-ratio: 5 / 4; }
  .aart { aspect-ratio: 16 / 10; }
  .csaved, .otag, .cq, .rdim, .lufs, .ch-tag { top: auto; bottom: 12px; right: 12px; }
  .csaved { top: 12px; bottom: auto; left: 12px; }
  .otag { display: none; }
  .crop-dim { font-size: .62rem; }
}

/* =====================================================================
   Explorer v3 — one surface, fan wheels, flat outputs
   ===================================================================== */
.wex { margin-top: 14px; }
.wex-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 0;
  width: 100%; max-width: 100%; margin-bottom: 16px;
  background: none; border: 0; border-radius: 0;
}
.wex-tabs button { border-radius: 12px; padding: 10px 14px; background: none; }
/* each family tab wears its own brand colour when selected */
.wex-tabs button[data-fam="img"]     { --famc: #ff4f8b; --fami: #fff; }
.wex-tabs button[data-fam="video"]   { --famc: #d92844; --fami: #fff; }
.wex-tabs button[data-fam="audio"]   { --famc: #7a4dff; --fami: #fff; }
.wex-tabs button[data-fam="pdf"]     { --famc: #e5334b; --fami: #fff; }
.wex-tabs button[data-fam="doc"]     { --famc: #2f5dff; --fami: #fff; }
.wex-tabs button[data-fam="arc"]     { --famc: #ffc21a; --fami: #141414; }
.wex-tabs button[data-fam="sub"]     { --famc: #ff7a45; --fami: #141414; }
.wex-tabs button[data-fam="actions"] { --famc: #14a06c; --fami: #fff; }
.wex-tabs button:hover { background: var(--raised); }
.wex-tabs button:not([aria-selected="true"]):hover { color: var(--famc, var(--ink)); }
.wex-tabs button[aria-selected="true"] { background: var(--famc, var(--ink)); color: var(--fami, #fff); }
.wex-panel {
  background: var(--raised); border: 1px solid var(--line); border-radius: 32px;
  padding: clamp(22px, 3.6vw, 44px) clamp(20px, 3.6vw, 46px) clamp(26px, 3vw, 40px);
}
.wex-cols { gap: 0; }
.wex-col { padding: 0; background: none; border: 0; border-radius: 0; gap: clamp(12px, 1.8vw, 20px); }
.wex-cols:not(.solo) .wex-col:first-child { padding-right: clamp(24px, 4.5vw, 64px); }
.wex-cols:not(.solo) .wex-col + .wex-col { border-left: 1px solid var(--line); padding-left: clamp(24px, 4.5vw, 64px); }
/* keycap tiles over each wheel (Tangerine-style: keycap + what the key does) */
.wex-title { margin: 0 0 10px; text-align: center; font: 700 1.05rem/1.2 var(--font); letter-spacing: -.01em; color: var(--ink-2); }
.wex-cap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.wex-cap .kc {
  min-width: 58px; min-height: 46px; justify-content: center; padding: 8px 14px;
  background: #fff; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 13px;
  font: 700 .82rem/1 var(--font); color: var(--ink); text-transform: lowercase; letter-spacing: .02em;
  cursor: pointer; transition: transform .12s, background .16s, border-color .16s;
}
.wex-cap .kc svg { width: 16px; height: 16px; }
.wex-cap .kc:hover { border-color: #c9ccd6; }
.wex-cap .kc:active {
  transform: translateY(3px) scale(.96);
  border-bottom-width: 1px;
  background: var(--amber-soft);
  border-color: #ffc21a;
  box-shadow: 0 0 0 3px rgb(255 194 26 / .35);
}
/* sustained held state — real key is physically down (clicks use the .pressed bounce) */
.wex-cap .kc.held,
.fa-wheel-box .kc.held {
  transform: translateY(3px) scale(.96);
  border-bottom-width: 1px;
  background: var(--amber-soft);
  border-color: #ffc21a;
  box-shadow: 0 0 0 3px rgb(255 194 26 / .35);
}
.wex-cap .kc.pressed,
.fa-wheel-box .kc.pressed {
  animation: kc-press .45s cubic-bezier(.16, 1, .3, 1);
  background: var(--amber-soft);
  border-color: #ffc21a;
}
@keyframes kc-press {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgb(255 194 26 / 0);
  }
  24% {
    transform: translateY(3px) scale(.95, .93);
    border-bottom-width: 1px;
    background: var(--amber-soft);
    border-color: #ffc21a;
    box-shadow: 0 0 0 4px rgb(255 194 26 / .4), 0 2px 6px rgb(255 194 26 / .25);
  }
  56% {
    transform: translateY(-1.5px) scale(1.03, 1.02);
    border-bottom-width: 3px;
    background: var(--amber-soft);
    border-color: #ffc21a;
    box-shadow: 0 0 0 2px rgb(255 194 26 / .2), 0 4px 10px rgb(255 194 26 / .15);
  }
  78% {
    transform: translateY(.5px) scale(.99, .99);
    border-bottom-width: 3px;
    border-color: #ffc21a;
  }
  100% {
    transform: translateY(0) scale(1);
    border-bottom-width: 3px;
    box-shadow: 0 0 0 0 rgb(255 194 26 / 0);
  }
}
.wex-cap-lbl { font: 600 .8rem/1.2 var(--font); color: var(--ink-2); }
/* each wheel sits on a cool gray stage matching the tool-card insets (.wxt-demo) */
.wex-stage {
  border-radius: 26px;
  padding: clamp(16px, 2.6vw, 30px) clamp(12px, 2vw, 26px) 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* pressing a keycap (or the real key) pops the wheel */
.wex-stage.boost .wex-wheel { animation: wxk-boost .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes wxk-boost { 35% { transform: scale(1.045); } }
.wex-stage .wex-wheel { width: min(100%, 350px); }
.wex-out {
  margin: 4px 0 0; min-height: 1.2em; font: 600 .8rem/1.3 var(--font); color: var(--ink-2);
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.wex-out b { font-weight: 700; color: var(--ink); font-family: var(--mono, "Cascadia Mono", monospace); font-size: .74rem; }
.wex-out i { font-style: normal; color: #b8b3a6; }
.wex-out { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* tools grid under the explorer — lives in toolgrid.css; spacing here */
.wxt { margin-top: clamp(22px, 3vw, 36px); }
.wex-wheel { width: min(100%, 360px); margin: 2px auto 0; }
.wex-cols.solo { grid-template-columns: minmax(0, 440px); }
.wex-cols.solo .wex-wheel { width: min(100%, 370px); }

/* fan blades: every sector carries a brand colour */
.cw-svg.fan .cw-seg path { fill: var(--sfc, #e9eaf0); stroke: #fff; stroke-width: 2.5; }
.cw-svg.fan .cw-seg text { fill: #fff; }
.cw-svg.fan .cw-seg use { color: #fff; }
.cw-svg.fan .cw-seg.li text { fill: #141414; }
.cw-svg.fan .cw-seg.li use { color: #141414; }
.cw-svg.fan .cw-seg:hover path { fill: var(--sfc); filter: brightness(1.08) saturate(1.06); }
.cw-svg.fan .cw-seg.hot path { fill: var(--sfc); filter: brightness(1.05) saturate(1.08); stroke: #141414; }

.cw-svg.fan.tone-blue .fc0 { --sfc: #2f5dff; }
.cw-svg.fan.tone-blue .fc1 { --sfc: #4f7dff; }
.cw-svg.fan.tone-blue .fc2 { --sfc: #7fa4ff; }
.cw-svg.fan.tone-blue .fc3 { --sfc: #b9ceff; }
.cw-svg.fan.tone-blue .fc4 { --sfc: #ffc21a; }
.cw-svg.fan.tone-blue .fc5 { --sfc: #ff7a5c; }
.cw-svg.fan.tone-blue .fc6 { --sfc: #ff4f8b; }

.cw-svg.fan.tone-red .fc0 { --sfc: #ff4f8b; }
.cw-svg.fan.tone-red .fc1 { --sfc: #ff6a7f; }
.cw-svg.fan.tone-red .fc2 { --sfc: #ff8a5c; }
.cw-svg.fan.tone-red .fc3 { --sfc: #ffb04d; }
.cw-svg.fan.tone-red .fc4 { --sfc: #ffc21a; }
.cw-svg.fan.tone-red .fc5 { --sfc: #ff7a9e; }
.cw-svg.fan.tone-red .fc6 { --sfc: #d92763; }

.cw-svg.fan.tone-amber .fc0 { --sfc: #ffc21a; }
.cw-svg.fan.tone-amber .fc1 { --sfc: #ffd34d; }
.cw-svg.fan.tone-amber .fc2 { --sfc: #ffb04d; }
.cw-svg.fan.tone-amber .fc3 { --sfc: #ff8a5c; }
.cw-svg.fan.tone-amber .fc4 { --sfc: #ff7a5c; }
.cw-svg.fan.tone-amber .fc5 { --sfc: #ff9a3d; }
.cw-svg.fan.tone-amber .fc6 { --sfc: #ffe14d; }

/* =====================================================================
   Brand buttons — slash.js picks entry and exit colors each cycle.
   ===================================================================== */
:root {
  --brand-blue: #2f5dff;
  --brand-pink: #ff4f8b;
  --brand-yellow: #ffc21a;
}
.btn-primary { position: relative; z-index: 0; }
.btn-primary,
[data-theme="deck"] .btn-primary,
.cta-card .btn-primary,
[data-theme="deck"] .cta-card .btn-primary,
.vbtn,
.strip-btn {
  overflow: hidden;
  isolation: isolate;
  /* No border: a transparent border exposes a ring of the base color. */
  background: var(--rest, var(--brand-blue));
  border: 0;
  color: var(--button-ink, #fff);
  transition: transform .16s var(--ease), color .28s cubic-bezier(.16, 1, .3, 1);
}
.btn-primary::before, .vbtn::before, .strip-btn::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0;
  background: var(--slash, var(--brand-pink));
  /* clip-path wipe, not transform: clip-path repaints on the main thread every
     frame, so a stale composited layer can never leave a half-swept wedge
     behind after hover. Leading edge keeps the old skewX slash (~14px). */
  clip-path: polygon(0 0, -2px 0, -16px 100%, 0 100%);
  visibility: hidden;
  transition: clip-path .28s cubic-bezier(.16, 1, .3, 1), visibility 0s .28s;
}
.btn-primary.slash-active::before,
.vbtn.slash-active::before,
.strip-btn.slash-active::before {
  clip-path: polygon(0 0, calc(100% + 16px) 0, calc(100% + 2px) 100%, 0 100%);
  visibility: visible;
  transition: clip-path .28s cubic-bezier(.16, 1, .3, 1), visibility 0s 0s;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .vbtn, .strip-btn { transition-duration: .01s; }
  .btn-primary::before, .vbtn::before, .strip-btn::before { transition-duration: .01s; }
}

/* formats list wraps instead of forcing a wide row */
.frow .flist { letter-spacing: .1em; word-spacing: .5em; }

@media (max-width: 760px) {
  .wex-panel { padding: 20px 16px 12px; border-radius: 22px; }
  .wex-tabs { gap: 0; padding: 0; margin-bottom: 12px; }
  .wex-tabs button { padding: 9px 12px; }
  .wex-cols { gap: 20px; }
  .wex-cols:not(.solo) .wex-col:first-child { padding-right: 0; }
  .wex-cols:not(.solo) .wex-col + .wex-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 20px;
  }
  .wex-wheel, .wex-cols.solo .wex-wheel { width: min(100%, 330px); }
}

/* final polish pass */
.price-once { white-space: nowrap; }
[data-theme="deck"] .price-card::before { display: none; }
/* price card plays the three brand colours: the border is THREE SOLID SECTIONS
   — each brand colour owns a hard-stopped ~120° arc of the perimeter (pink top,
   amber lower-right, cobalt lower-left); pink/amber glows inside the cobalt
   header, fan mark, tricolour tier ladder */
[data-theme="deck"] .price-card {
  border: 6px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from -90deg at 50% 50%,
      #ff4f8b 0deg 120deg,
      #ffc21a 120deg 240deg,
      #2f5dff 240deg 360deg) border-box;
}
[data-theme="deck"] .price-top {
  position: relative;
  background:
    radial-gradient(150px 110px at 88% -15%, rgb(255 194 26 / .38), transparent 72%),
    radial-gradient(160px 120px at -8% 115%, rgb(255 79 139 / .34), transparent 72%),
    var(--accent);
}
[data-theme="deck"] .price-fan {
  position: absolute; right: 22px; top: 20px; width: 62px; height: 62px;
  transform: rotate(8deg);
}
/* tier ladder: each tier carries a brand accent — pink / amber / cobalt / ink —
   used for the cur border strip, bar fill and tint */
[data-theme="deck"] .tier-ladder li:nth-child(1) { --tl-accent: #ff4f8b; }
[data-theme="deck"] .tier-ladder li:nth-child(2) { --tl-accent: #ffc21a; }
[data-theme="deck"] .tier-ladder li:nth-child(3) { --tl-accent: #2f5dff; }
[data-theme="deck"] .tier-ladder li:nth-child(4) { --tl-accent: #14a06c; }
[data-theme="deck"] .tier-ladder li:nth-child(5) { --tl-accent: #141414; }
[data-theme="deck"] .tier-ladder li:nth-child(1).cur { background: rgb(255 79 139 / .08); }
[data-theme="deck"] .tier-ladder li:nth-child(2).cur { background: rgb(255 194 26 / .16); }
[data-theme="deck"] .tier-ladder li:nth-child(3).cur { background: rgb(47 93 255 / .07); }
[data-theme="deck"] .tier-ladder li:nth-child(4).cur { background: rgb(20 160 108 / .08); }
[data-theme="deck"] .tier-ladder li:nth-child(5).cur { background: var(--surface); }
[data-theme="deck"] .scarcity {
  background: #ffc21a; color: #141414; border-radius: 12px;
  padding: 9px 14px; font-size: .88rem; display: inline-block;
}
/* inline-block above would defeat the [hidden] attribute — re-assert it
   (scarcity pill stays hidden until /api/tier answers, and at Full Price) */
[data-theme="deck"] .scarcity[hidden] { display: none; }
[data-theme="deck"] .included svg { color: #14a06c; }
@media (max-width: 520px) {
  .wex-tabs button svg { display: none; }
  .wex-tabs button { padding: 9px 11px; font-size: .82rem; }
}

/* tools board: stack the two wheels on narrow screens (later .tb-wheels rule above wins otherwise) */
@media (max-width: 860px) {
  .tb-wheels { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 22px; }
  .tb-wheel-cell + .tb-wheel-cell {
    border-left: 0; border-top: 1px solid var(--line);
    padding-left: clamp(8px, 2vw, 28px); padding-top: 20px;
  }
}
@media (max-width: 760px) {
  .tools-tabs {
    flex-wrap: nowrap; justify-content: flex-start;
    width: 100%; overflow-x: auto; scrollbar-width: none;
  }
  .tools-tabs::-webkit-scrollbar { display: none; }
}
/* =====================================================================
   Tools v3 — full 33-tool demo set
   ===================================================================== */

/* ---------- image: adjust ---------- */
.tart[data-art="adjust"] > .adj-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter .16s linear;
}
.adj-warm {
  position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light;
  opacity: 0; pointer-events: none; transition: opacity .16s linear;
}
.adj-panel {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  display: grid; gap: 5px; padding: 8px 10px;
  background: rgb(12 14 20 / .62); border-radius: 12px;
  backdrop-filter: blur(8px);
}
.adj-panel label { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px; }
.adj-panel span { color: rgb(255 255 255 / .78); font: 600 .54rem/1 var(--font); white-space: nowrap; }
.adj-panel input {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 3px; border-radius: 999px;
  background: rgb(255 255 255 / .3); outline: none; cursor: pointer;
}
.adj-panel input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0;
}
.adj-panel input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }
.adj-panel input:focus-visible { outline: 2px solid #ffc21a; outline-offset: 3px; }

/* ---------- image: annotate ---------- */
.an-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.an-svg * { vector-effect: non-scaling-stroke; }
.an-svg .an-item { transform-box: fill-box; transform-origin: center; }
.an-rect { fill: rgb(255 79 139 / .14); stroke: #ff4f8b; stroke-width: 2.4; }
.an-arrow { fill: none; stroke: #ff4f8b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.an-item { opacity: 0; }
.an-text {
  position: absolute; left: 58%; top: 62%; z-index: 3;
  padding: 5px 8px; border-radius: 7px;
  background: #ff4f8b; color: #fff; font: 750 .58rem/1 var(--font);
  pointer-events: none;
}
.tart.done .an-rect { animation: anIn .45s .06s var(--ease) forwards; }
.tart.done .an-arrow { animation: anIn .45s .34s var(--ease) forwards; }
.tart.done .an-text { animation: anIn .4s .6s var(--ease) forwards; }
@keyframes anIn {
  from { opacity: 0; transform: translateY(5px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.an-draw {
  position: absolute; z-index: 3; pointer-events: none;
  border: 2.5px solid #ff4f8b; border-radius: 3px;
  background: rgb(255 79 139 / .16);
}

/* ---------- image: QR ---------- */
.tart.qr-art { background: #eef0f6; }
.qr-sheet {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  width: 48%; aspect-ratio: 1; z-index: 2;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 6px;
  padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.qr-code { width: 100%; height: 100%; min-height: 0; image-rendering: pixelated; }
.qr-sheet i { font-style: normal; font-size: .5rem; line-height: 1.2; color: var(--ink-2); text-align: center; }
.qr-laser {
  position: absolute; left: 8%; width: 48%; top: 22%; height: 2px; z-index: 3;
  border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff4f8b 18%, #ff4f8b 82%, transparent);
}
.tart.scanning .qr-laser { animation: qrScan 1.05s cubic-bezier(.45, 0, .55, 1); }
@keyframes qrScan {
  0% { opacity: 0; top: 22%; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; top: 78%; }
}
.qr-result {
  position: absolute; right: 7%; top: 50%; z-index: 3;
  width: 35%; display: grid; gap: 3px; padding: 9px 10px;
  background: #151720; border-radius: 12px; color: #fff;
  opacity: 0; transform: translateY(-50%) translateX(8px);
  transition: opacity .3s, transform .35s var(--ease);
}
.qr-result svg { width: 16px; height: 16px; color: #6ee7a8; }
.qr-result b { font: 650 .55rem/1.3 ui-monospace, Consolas, monospace; word-break: break-all; }
.qr-result i { font-style: normal; font: 600 .5rem/1 var(--font); color: #6ee7a8; }
.tart.done .qr-result { opacity: 1; transform: translateY(-50%); }

/* ---------- tags (image / video / audio) ---------- */
.tart.tags-art { background: #151720; }
.tags-art > img { filter: brightness(.62) saturate(.9); }
.tags-art .tg-wave { position: absolute; left: 6%; right: 6%; top: 50%; height: 38%; transform: translateY(-50%); opacity: .45; }
.tags-art .tg-wave i { background: #fff; }
.tagsheet {
  position: absolute; left: 7%; right: 7%; top: 9%; bottom: 20%; z-index: 2;
  display: grid; align-content: start; gap: 4px; padding: 9px 11px;
  background: rgb(255 255 255 / .97); border-radius: 13px; overflow: hidden;
}
.tg-file {
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 5px; margin-bottom: 1px; border-bottom: 1px solid var(--line);
  font: 700 .58rem/1 var(--font); color: var(--ink-2);
}
.tg-file svg { width: 13px; height: 13px; }
.tagsheet label { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.tagsheet label span { color: var(--ink-2); font: 600 .52rem/1 var(--font); }
.tagsheet label i {
  font-style: normal; font: 600 .57rem/1.2 var(--font); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .3s;
}
.tart.done .tagsheet label i { color: #0b7a4b; }

/* ---------- video / audio: trim timeline ---------- */
.filmstrip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); opacity: .82; }
.filmstrip img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(10 12 18 / .15), rgb(10 12 18 / .62));
}
.tl-title {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  padding: 5px 9px; border-radius: 999px;
  background: rgb(12 14 20 / .62); color: #fff; font: 650 .58rem/1 var(--font);
}
.wavebars.tl-wave { position: absolute; left: 7%; right: 7%; top: 48%; height: 40%; transform: translateY(-50%); }
.tart.dark .tl-wave i { background: rgb(255 255 255 / .9); }
.vtl {
  position: absolute; left: 7%; right: 7%; bottom: 40px; height: 26px; z-index: 4;
  border-radius: 8px; background: rgb(255 255 255 / .2); touch-action: none;
}
.vtl-range {
  position: absolute; top: 0; bottom: 0;
  left: var(--a, 0%); right: calc(100% - var(--b, 100%));
  background: rgb(255 255 255 / .32); border-radius: 7px;
  transition: left .35s var(--ease), right .35s var(--ease);
}
.vtl-h {
  position: absolute; top: -4px; bottom: -4px; width: 12px; margin-left: -6px; padding: 0;
  border: 0; border-radius: 6px; background: #fff; cursor: ew-resize; z-index: 2;
  transition: left .35s var(--ease);
}
.vtl-h::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 9px; transform: translate(-50%, -50%);
  border-radius: 1px; background: rgb(20 20 20 / .35);
}
.vtl-h[data-h="a"] { left: var(--a, 0%); }
.vtl-h[data-h="b"] { left: var(--b, 100%); }
.tart.trimming .vtl-range, .tart.trimming .vtl-h, .tart.trimming .vtl-marker, .tart.trimming .vtl-at { transition: none; }
.vtime {
  position: absolute; left: 7%; bottom: 11px; z-index: 5;
  padding: 5px 9px; border-radius: 999px;
  background: rgb(12 14 20 / .62); color: #fff; font: 600 .56rem/1 var(--font);
}

/* ---------- video: split at ---------- */
.split-half {
  position: absolute; top: 16%; bottom: 34%; width: 42%; z-index: 3;
  display: grid; place-items: center; padding: 8px;
  background: rgb(255 255 255 / .94); border-radius: 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .4s var(--ease);
}
.split-half.left { left: 5%; }
.split-half.right { right: 5%; transition-delay: .08s; }
.split-half b { font: 700 .57rem/1.2 var(--font); color: var(--ink); }
.tart.done .split-half { opacity: 1; transform: none; }
.vtl.single { cursor: crosshair; }
.vtl-marker {
  position: absolute; top: -5px; bottom: -5px; left: var(--at, 50%);
  width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: #ffc21a; pointer-events: none;
  transition: left .25s var(--ease);
}
.vtl-marker::before {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #ffc21a;
}
.vtl-at {
  position: absolute; left: var(--at, 50%); top: -26px;
  transform: translateX(-50%); padding: 4px 7px; border-radius: 999px;
  background: rgb(12 14 20 / .7); color: #fff;
  font: 650 .54rem/1 var(--font); white-space: nowrap; pointer-events: none;
  transition: left .25s var(--ease);
}

/* ---------- video: speed ---------- */
.speed-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speed-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 12 18 / .18), rgb(10 12 18 / .78)); }
.speed-kicker {
  position: absolute; left: 11px; top: 12px; z-index: 3;
  color: rgb(255 255 255 / .62); font: 700 .5rem/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase;
}
.speed-times { position: absolute; right: 11px; top: 9px; z-index: 3; display: flex; align-items: baseline; gap: 7px; color: #fff; }
.speed-times s { font: 600 .58rem/1 var(--font); opacity: .55; }
.speed-times b { font: 800 1.05rem/1 var(--font); letter-spacing: -.02em; }
.speed-pills {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: flex; gap: 3px; padding: 4px;
  background: rgb(12 14 20 / .58); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.speed-pills::-webkit-scrollbar { display: none; }
.speed-pills .rpill { flex: 1 0 auto; padding: 6px 5px; font-size: .56rem; }
.tart[data-art="speed"] .otag { top: auto; bottom: 46px; right: 10px; }

/* ---------- video: join ---------- */
.join-in { position: absolute; left: 7%; top: 14%; width: 52%; z-index: 3; display: grid; gap: 5px; }
.jclip {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 6px; background: rgb(255 255 255 / .94); border-radius: 8px;
  transition: opacity .35s, transform .4s var(--ease);
}
.jclip img { width: 26px; height: 17px; object-fit: cover; border-radius: 3px; flex: none; }
.jclip b { flex: 1; min-width: 0; font: 650 .55rem/1 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jclip i { font-style: normal; font: 600 .5rem/1 var(--font); color: var(--ink-2); flex: none; }
.join-out {
  position: absolute; right: 7%; top: 18%; width: 32%; z-index: 3;
  display: grid; gap: 4px; padding: 10px;
  background: #fff; border-radius: 11px;
  opacity: 0; transform: translateX(10px);
  transition: opacity .35s, transform .4s var(--ease);
}
.join-out b { font: 700 .57rem/1.25 var(--font); }
.join-out i { font-style: normal; font: 600 .5rem/1 var(--font); color: var(--ink-2); }
.tart.done .join-out { opacity: 1; transform: none; }
.tart.done .join-in { opacity: .55; }
.tart.done .jclip:nth-child(2) { transform: translateX(4%); }
.tart.done .jclip:nth-child(3) { transform: translateX(8%); }

/* ---------- audio: bleep ---------- */
.tart[data-art="bleep"] .bl-wave { position: absolute; left: 6%; right: 6%; top: 50%; height: 44%; transform: translateY(-50%); }
.tart.dark .bl-wave i { background: rgb(255 255 255 / .9); }
.bleep-win {
  position: absolute; top: 15%; bottom: 33%; width: 13%; left: 58%; z-index: 3;
  display: grid; place-items: center;
  background: rgb(10 12 18 / .78); border: 2px solid #ffc21a; border-radius: 7px;
  opacity: 0; transform: scaleY(.2); transform-origin: center;
  transition: opacity .3s, transform .35s var(--ease);
}
.bleep-win i {
  font-style: normal; writing-mode: vertical-rl;
  font: 800 .48rem/1 var(--font); letter-spacing: .16em; color: #ffc21a;
}
.bleep-win b {
  position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  padding: 3px 6px; border-radius: 999px;
  background: rgb(12 14 20 / .78); color: #fff;
  font: 600 .48rem/1 var(--font); white-space: nowrap;
}
.tart.done .bleep-win { opacity: 1; transform: none; }

/* ---------- PDF: merge ---------- */
.tart[data-art="merge"] { background: #eef0f6; }
.merge-in { position: absolute; left: 7%; top: 13%; width: 50%; z-index: 3; display: grid; gap: 5px; }
.mpdf {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 7px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  transition: opacity .35s, transform .4s var(--ease);
}
.mpdf::before {
  content: "PDF"; flex: none; padding: 2px 4px; border-radius: 4px;
  background: #e5334b; color: #fff; font: 800 .4rem/1 var(--font); letter-spacing: .04em;
}
.mpdf b { flex: 1; min-width: 0; font: 650 .55rem/1 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpdf i { font-style: normal; font: 600 .5rem/1 var(--font); color: var(--ink-2); }
.merge-out {
  position: absolute; right: 7%; top: 22%; width: 33%; z-index: 3;
  display: grid; gap: 4px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  opacity: 0; transform: translateX(10px);
  transition: opacity .35s, transform .4s var(--ease);
}
.merge-out b { font: 700 .57rem/1.25 var(--font); }
.merge-out i { font-style: normal; font: 600 .5rem/1 var(--font); color: var(--ink-2); }
.tart.done .merge-out { opacity: 1; transform: none; }
.tart.done .merge-in { opacity: .5; transform: translateX(-4%); }

/* ---------- PDF: pages ---------- */
.tart.pages-art { background: #eef0f6; }
.pages-range {
  position: absolute; left: 11px; top: 11px; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font: 600 .62rem/1 var(--font);
}
.pages-range b { color: var(--ink); font-weight: 750; }
.pages-doc { position: absolute; left: 8%; right: 8%; top: 29%; bottom: 24%; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.pg {
  position: relative; min-width: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink-2); font: 700 .55rem/1 var(--font);
  transition: transform .25s var(--ease), border-color .2s, background .2s, color .2s;
}
.pg::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 16%; height: 30%;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 6px);
}
.pg.on { background: #fff8e3; border-color: #ffc21a; color: #141414; }
.pg.on::after { content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #ffc21a; }
.tart.done .pg.on { transform: translateY(-3px); }

/* ---------- PDF: compress (raster) ---------- */
.tart.pdf-c-art { background: #eef0f6; }
.pdf-sheet {
  position: absolute; left: 9%; top: 18%; width: 44%; bottom: 22%;
  display: grid; align-content: start; gap: 5px; padding: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
}
.pdf-sheet i { height: 4px; border-radius: 2px; background: var(--line); transition: background .4s; }
.pdf-sheet i:nth-child(1) { width: 64%; height: 7px; background: #d6d9e2; }
.pdf-sheet i:nth-child(2) { width: 100%; }
.pdf-sheet i:nth-child(3) { width: 88%; }
.pdf-sheet i:nth-child(4) { width: 72%; }
.tart.done .pdf-sheet i { background: #c8ccd8; }
.dpi-row {
  position: absolute; right: 10px; bottom: 12px; z-index: 4;
  display: flex; align-items: center; gap: 2px;
  padding: 3px 5px 3px 8px; border-radius: 999px;
  background: rgb(14 16 24 / .6); color: rgb(255 255 255 / .65);
  font: 650 .5rem/1 var(--font);
}
.dpi-row .rpill { padding: 5px 6px; font-size: .52rem; }

@media (max-width: 760px) {
  .qr-sheet { width: 44%; left: 6%; }
  .qr-result { width: 38%; right: 5%; }
  .qr-laser { left: 6%; width: 44%; }
  .join-out, .merge-out { width: 36%; right: 5%; }
  .join-in, .merge-in { width: 48%; left: 5%; }
}
@media (max-width: 520px) {
  .tart[data-art="pcompress"] .cq { bottom: 46px; }
  .adj-panel { gap: 3px; padding: 6px 8px; }
  .adj-panel label { grid-template-columns: max-content minmax(0, 1fr); }
  .tagsheet { top: 7%; bottom: 22%; padding: 7px 9px; gap: 3px; }
  .tagsheet label { grid-template-columns: 42px minmax(0, 1fr); }
  .qr-sheet i { display: none; }
}

/* ---------- changelog (data-driven from changelog.js) ---------- */
.cl-page { max-width: 760px; margin: 0 auto; padding: 56px 0 80px; }
.cl-title { font: 800 clamp(34px, 5vw, 46px)/1.05 "Archivo", "Segoe UI", sans-serif; letter-spacing: -.03em; margin: 0 0 8px; }
.cl-sub { color: var(--ink-2); font-size: 1rem; margin: 0 0 36px; }
.cl-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 28px 22px; margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(20,20,20,.05); overflow: hidden;
}
/* accent band + version chip = the colour identity of that release */
.cl-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cl-accent); }
.cl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cl-ver {
  background: var(--cl-accent); color: #fff; border-radius: 999px;
  font: 800 15px/1 "Archivo", "Segoe UI", sans-serif; padding: 7px 14px; letter-spacing: .01em;
}
.cl-date { color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.cl-notes { color: var(--ink-2); margin: 12px 0 4px; font-size: .95rem; }
.cl-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-list li { display: flex; gap: 12px; align-items: baseline; font-size: .95rem; line-height: 1.45; }
.cl-tag {
  flex: none; font: 700 .68rem/1 "Archivo", "Segoe UI", sans-serif; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; align-self: center;
}
.cl-new { background: #ff4f8b; color: #fff; }
.cl-better { background: #2f5dff; color: #fff; }
.cl-fix { background: #ffc21a; color: #141414; }
@media (max-width: 620px) { .cl-page { padding: 36px 0 56px; } .cl-card { padding: 20px 18px 18px; } }

/* Landing typography: color carries emphasis, not entire paragraphs. */
.title-blue { color: var(--brand-blue); }
.title-underline {
  text-decoration: underline;
  text-decoration-color: var(--brand-yellow);
  text-decoration-thickness: .1em;
  text-underline-offset: .07em;
  text-decoration-skip-ink: none;
}
.hero-title { padding-bottom: .12em; }
.section-head h2 { text-wrap: balance; }

/* A quiet, useful ending with a three-chip brand signature. */
.landing-footer {
  margin-top: 64px;
  padding: 64px 0 28px;
  background: var(--bg);
}
.landing-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(to right, var(--brand-pink) 0 33.333%, var(--brand-yellow) 33.333% 66.666%, var(--brand-blue) 66.666%);
}
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr .7fr; gap: 40px; padding-bottom: 56px; }
.landing-footer .mark { width: 38px; height: 38px; }
.landing-footer .wordmark { font-size: 1.5rem; }
.footer-intro > p { margin: 24px 0 14px; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.footer-platform { font-size: .9rem; color: var(--ink-2); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-column h3 { font-size: 1rem; margin-bottom: 12px; }
.footer-column a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ink-2); font-size: .95rem; }
.landing-footer .footer-column a:hover,
.landing-footer .footer-bottom > a:hover { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; }
.footer-bottom > a { padding-block: 10px; }
@media (max-width: 760px) {
  .landing-footer { margin-top: 40px; padding-top: 40px; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; padding-bottom: 32px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro > p { margin-top: 20px; }
  .footer-bottom { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; }
  .footer-bottom .built-by { flex-basis: 100%; order: 1; }
}
@media (max-width: 420px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}