:root {
  color-scheme: light dark;
  --bg: #f3f4f6;
  --bg-rgb: 243,244,246;
  --text: #15171b;
  --secondary: #656a73;
  --muted: #8b9098;
  --glass: rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.72);
  --glass-subtle: rgba(255,255,255,.36);
  --line: rgba(20,23,28,.105);
  --highlight: rgba(255,255,255,.76);
  --shadow: rgba(25,30,40,.13);
  --blue: #0a84ff;
  --blue-soft: rgba(10,132,255,.13);
  --blue-glow: rgba(10,132,255,.26);
  --sidebar: rgba(235,237,241,.54);
  --radius: 24px;
  --hero-secondary-start: #3f4652;
  --hero-secondary-end: #777e89;
}@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090b10;
    --bg-rgb: 9,11,16;
    --text: #f5f6f8;
    --secondary: #a4a8b0;
    --muted: #737983;
    --glass: rgba(31,34,42,.58);
    --glass-strong: rgba(39,43,52,.69);
    --glass-subtle: rgba(28,31,38,.38);
    --line: rgba(255,255,255,.115);
    --highlight: rgba(255,255,255,.105);
    --shadow: rgba(0,0,0,.38);
    --blue: #0a84ff;
    --blue-soft: rgba(10,132,255,.18);
    --blue-glow: rgba(10,132,255,.34);
    --sidebar: rgba(20,23,29,.62);
    --hero-secondary-start: #f3f5f9;
    --hero-secondary-end: #9aa2af;
  }
}:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f6;
  --bg-rgb: 243,244,246;
  --text: #15171b;
  --secondary: #656a73;
  --muted: #8b9098;
  --glass: rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.72);
  --glass-subtle: rgba(255,255,255,.36);
  --line: rgba(20,23,28,.105);
  --highlight: rgba(255,255,255,.76);
  --shadow: rgba(25,30,40,.13);
  --blue: #0a84ff;
  --blue-soft: rgba(10,132,255,.13);
  --blue-glow: rgba(10,132,255,.26);
  --sidebar: rgba(235,237,241,.54);
  --hero-secondary-start: #3f4652;
  --hero-secondary-end: #777e89;
}:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090b10;
  --bg-rgb: 9,11,16;
  --text: #f5f6f8;
  --secondary: #a4a8b0;
  --muted: #737983;
  --glass: rgba(31,34,42,.58);
  --glass-strong: rgba(39,43,52,.69);
  --glass-subtle: rgba(28,31,38,.38);
  --line: rgba(255,255,255,.115);
  --highlight: rgba(255,255,255,.105);
  --shadow: rgba(0,0,0,.38);
  --blue: #0a84ff;
  --blue-soft: rgba(10,132,255,.18);
  --blue-glow: rgba(10,132,255,.34);
  --sidebar: rgba(20,23,29,.62);
  --hero-secondary-start: #f3f5f9;
  --hero-secondary-end: #9aa2af;
}/* v0.11 — temporary light/dark background lab --------------------------- */:root body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='9' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
  mix-blend-mode:soft-light;
}:root[data-theme="dark"] body::after {
  opacity:.075;
  mix-blend-mode:soft-light;
}/* Closest to the Dubai reference: peach horizon haze + dusty lilac sky. */:root[data-theme="light"][data-light-background="dubai-haze"] body {
  background-color:#eee7e9;
  background-image:
    radial-gradient(ellipse 88% 60% at 13% 27%, rgba(243,183,169,.70) 0%, rgba(237,188,184,.36) 31%, transparent 66%),
    radial-gradient(ellipse 74% 56% at 91% 4%, rgba(114,116,188,.48) 0%, rgba(154,144,195,.28) 40%, transparent 72%),
    radial-gradient(ellipse 82% 66% at 68% 72%, rgba(207,174,189,.30) 0%, transparent 64%),
    linear-gradient(155deg,#ebe1e5 0%,#e9d8dc 37%,#c8bed8 72%,#aaa9d2 100%);
}/* Warmer and more luminous — sunrise peach with only a lavender edge. */:root[data-theme="light"][data-light-background="peach-bloom"] body {
  background-color:#f1e5e0;
  background-image:
    radial-gradient(ellipse 84% 65% at 16% 18%, rgba(252,188,164,.72) 0%, rgba(246,199,185,.40) 35%, transparent 68%),
    radial-gradient(ellipse 72% 55% at 88% 12%, rgba(174,153,205,.36) 0%, transparent 67%),
    radial-gradient(ellipse 62% 58% at 58% 88%, rgba(236,205,194,.38) 0%, transparent 70%),
    linear-gradient(145deg,#f4ebe5 0%,#eddad8 52%,#d9cedd 78%,#c8c5dd 100%);
}/* Cooler, airier and slightly more technical. */:root[data-theme="light"][data-light-background="lavender-air"] body {
  background-color:#e9e7ef;
  background-image:
    radial-gradient(ellipse 72% 60% at 13% 34%, rgba(235,186,180,.45) 0%, transparent 64%),
    radial-gradient(ellipse 88% 68% at 87% 12%, rgba(129,133,204,.50) 0%, rgba(161,157,211,.28) 43%, transparent 72%),
    radial-gradient(ellipse 68% 58% at 54% 88%, rgba(183,189,222,.34) 0%, transparent 68%),
    linear-gradient(150deg,#eee7eb 0%,#ded9e8 43%,#c4c4df 72%,#afb4d7 100%);
}/* Same atmospheric family with a single large, non-repeating contour field. */:root[data-theme="light"][data-light-background="soft-contours"] body {
  background-color:#eee6e7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='1200' viewBox='0 0 1800 1200' fill='none'%3E%3Cg stroke='%238b7fa8' stroke-opacity='.12' stroke-width='1.6'%3E%3Cpath d='M-120 850C220 560 480 470 780 520c310 52 480 263 810 170 178-50 300-176 430-340'/%3E%3Cpath d='M-170 915C170 625 450 535 760 585c320 52 500 270 840 177 180-50 320-181 455-352'/%3E%3Cpath d='M-210 982C135 692 425 600 745 650c330 52 520 279 870 185 185-50 333-184 470-360'/%3E%3Cpath d='M-245 1050C100 760 397 666 727 715c342 51 545 286 900 194 191-49 345-186 485-370'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 84% 62% at 12% 22%, rgba(245,186,170,.60) 0%, rgba(237,193,186,.27) 38%, transparent 67%),
    radial-gradient(ellipse 82% 65% at 88% 7%, rgba(120,121,190,.44) 0%, rgba(160,149,199,.24) 43%, transparent 70%),
    linear-gradient(150deg,#eee5e6 0%,#e6d7dc 44%,#c7bdd7 74%,#aaa9d1 100%);
  background-size:100% 100%,cover,cover,cover;
  background-position:center;
}/* Dark option 1 — current Slurp atmosphere: near-black with restrained blue/violet depth. */:root[data-theme="dark"][data-dark-background="midnight-tide"] body {
  background-color:#090b10;
  background-image:
    radial-gradient(ellipse 78% 58% at 26% 18%, rgba(24,91,166,.20) 0%, rgba(20,69,129,.085) 42%, transparent 70%),
    radial-gradient(ellipse 68% 58% at 86% 55%, rgba(91,66,161,.14) 0%, rgba(67,48,123,.055) 46%, transparent 72%),
    radial-gradient(ellipse 76% 56% at 53% 104%, rgba(20,43,72,.18) 0%, transparent 67%),
    linear-gradient(155deg,#080a0f 0%,#0b1018 44%,#090b12 72%,#08090d 100%);
}/* Dark option 2 — cleaner, richer navy/cobalt with a cool-blue horizon glow. */:root[data-theme="dark"][data-dark-background="blue-hour"] body {
  background-color:#07101c;
  background-image:
    radial-gradient(ellipse 86% 62% at 18% 22%, rgba(22,105,206,.28) 0%, rgba(11,66,137,.12) 38%, transparent 69%),
    radial-gradient(ellipse 72% 56% at 91% 12%, rgba(48,78,163,.22) 0%, transparent 68%),
    radial-gradient(ellipse 90% 52% at 55% 100%, rgba(9,54,101,.24) 0%, transparent 70%),
    linear-gradient(150deg,#060b12 0%,#081626 42%,#091426 69%,#070b12 100%);
}/* Dark option 3 — luxurious indigo/plum, still restrained enough for product UI. */:root[data-theme="dark"][data-dark-background="violet-dusk"] body {
  background-color:#0d0a12;
  background-image:
    radial-gradient(ellipse 78% 62% at 16% 23%, rgba(72,63,156,.23) 0%, rgba(59,45,126,.095) 42%, transparent 70%),
    radial-gradient(ellipse 68% 60% at 88% 17%, rgba(144,65,135,.17) 0%, rgba(103,49,105,.06) 45%, transparent 72%),
    radial-gradient(ellipse 78% 54% at 58% 102%, rgba(43,48,99,.18) 0%, transparent 68%),
    linear-gradient(150deg,#09090f 0%,#110d1b 43%,#120d19 70%,#090a0e 100%);
}/* Dark option 4 — mostly neutral graphite with a very subtle silver-blue atmospheric lift. */:root[data-theme="dark"][data-dark-background="graphite-glow"] body {
  background-color:#0d0f12;
  background-image:
    radial-gradient(ellipse 82% 60% at 20% 19%, rgba(106,126,153,.16) 0%, rgba(72,87,107,.055) 43%, transparent 71%),
    radial-gradient(ellipse 70% 55% at 91% 49%, rgba(58,76,105,.12) 0%, transparent 69%),
    radial-gradient(ellipse 80% 50% at 50% 105%, rgba(82,88,98,.10) 0%, transparent 66%),
    linear-gradient(155deg,#0b0d10 0%,#11151a 45%,#0d1116 72%,#090b0e 100%);
}* { box-sizing: border-box; }html { scroll-behavior: smooth; }body {
  margin: 0;
  min-width: 320px;
  background-color: var(--bg);
  background-image: none;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-color .45s ease, color .28s ease;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}a { color: inherit; text-decoration: none; }button, a { -webkit-tap-highlight-color: transparent; }.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }.ambient { position: fixed; pointer-events: none; filter: blur(70px); z-index: -1; opacity: .5; border-radius: 999px; }.ambient-a { width: 540px; height: 540px; left: 50%; top: 120px; transform: translateX(-80%); background: rgba(10,132,255,.16); }.ambient-b { width: 420px; height: 420px; right: -80px; top: 560px; background: rgba(90,80,255,.09); }.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; }.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 670; letter-spacing: -.02em; }.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 5px 16px rgba(0,0,0,.14); }nav { display: flex; align-items: center; gap: 30px; font-size: 14px; color: var(--secondary); }nav a { transition: color .18s ease, background .18s ease; }nav a:hover { color: var(--text); }.nav-cta { color: var(--text); padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-subtle); backdrop-filter: blur(18px) saturate(130%); }.theme-toggle { height:38px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:var(--glass-subtle); color:var(--text); display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); transition:background .22s ease,transform .18s ease,border-color .18s ease; }.theme-toggle:hover { transform:translateY(-1px); }.theme-toggle-icon { position:relative; width:17px; height:17px; flex:0 0 17px; color:var(--secondary); }.theme-toggle-icon svg { position:absolute; inset:0; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1); }.theme-toggle .icon-sun { opacity:1; transform:rotate(0deg) scale(1); }.theme-toggle .icon-moon { opacity:0; transform:rotate(-18deg) scale(.72); }:root[data-theme="light"] .theme-toggle .icon-sun { opacity:0; transform:rotate(18deg) scale(.72); }:root[data-theme="light"] .theme-toggle .icon-moon { opacity:1; transform:rotate(0deg) scale(1); }.theme-toggle-label { display:inline-block; min-width:32px; color:var(--text); line-height:1; }.background-picker {
  height:38px;
  padding:0 8px 0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass-subtle);
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--secondary);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  transition:opacity .22s ease,transform .22s ease,border-color .18s ease;
}:root[data-theme="dark"] .light-background-picker { display:none; }:root[data-theme="light"] .dark-background-picker { display:none; }.background-picker label { font-size:11px; font-weight:620; color:var(--muted); }.background-picker-swatch { width:14px; height:14px; flex:0 0 14px; border-radius:50%; box-shadow:inset 0 0 0 .7px rgba(255,255,255,.35),0 1px 4px rgba(0,0,0,.20); }.light-background-swatch { background:linear-gradient(135deg,#f0b5a5,#a0a0d0); }.dark-background-swatch { background:linear-gradient(135deg,#122b4c,#261d3e); }:root[data-light-background="peach-bloom"] .light-background-swatch { background:linear-gradient(135deg,#fac0a9,#cbb6d3); }:root[data-light-background="lavender-air"] .light-background-swatch { background:linear-gradient(135deg,#e5bab5,#858bcd); }:root[data-light-background="soft-contours"] .light-background-swatch { background:linear-gradient(135deg,#eeb4aa,#8f86bc); }:root[data-dark-background="blue-hour"] .dark-background-swatch { background:linear-gradient(135deg,#0b376d,#244c96); }:root[data-dark-background="violet-dusk"] .dark-background-swatch { background:linear-gradient(135deg,#342b77,#783c73); }:root[data-dark-background="graphite-glow"] .dark-background-swatch { background:linear-gradient(135deg,#303943,#14191f); }.background-picker select {
  appearance:none;
  -webkit-appearance:none;
  height:30px;
  min-width:104px;
  padding:0 22px 0 7px;
  border:0;
  outline:0;
  color:var(--text);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23656a73' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
  font:inherit;
  font-size:12px;
  font-weight:610;
  cursor:pointer;
}.hero { padding:72px 0 86px; text-align:center; position:relative; }.hero::before { content: ""; position: absolute; width: min(760px, 78vw); height: 500px; left: 50%; top: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(10,132,255,.12) 0%, rgba(10,132,255,.035) 42%, transparent 72%); filter: blur(12px); pointer-events: none; z-index: -1; }.hero-product { display: inline-flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 17px; font-weight: 650; letter-spacing: -.02em; }.hero-icon { width: 62px; height: 62px; border-radius: 15px; box-shadow: 0 14px 34px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.08); }.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 13px; font-weight: 620; letter-spacing: .01em; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue-glow); }.hero h1 { margin: 28px auto 20px; max-width: 940px; font-size: clamp(66px, 8.1vw, 104px); line-height: .91; letter-spacing: -.067em; font-weight: 760; }.hero h1 span { color: transparent; background: linear-gradient(180deg, var(--hero-secondary-start) 8%, var(--hero-secondary-end) 100%); -webkit-background-clip: text; background-clip: text; }.hero-copy { max-width: 650px; margin: 0 auto; color: var(--secondary); font-size: clamp(18px, 1.9vw, 21px); line-height: 1.48; letter-spacing: -.018em; }.hero-actions { margin-top: 28px; display: flex; justify-content: center; gap: 10px; }.button { height: 48px; padding: 0 21px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: transform .18s ease, filter .18s ease, background .18s ease; }.button:hover:not(.disabled) { transform: translateY(-1px); filter: brightness(1.04); }.button.primary { background: var(--blue); border-color: rgba(255,255,255,.18); color: white; box-shadow: 0 10px 30px rgba(10,132,255,.30), inset 0 1px rgba(255,255,255,.24); }.button.secondary { background: var(--glass-subtle); backdrop-filter: blur(18px) saturate(130%); }.button.disabled { cursor: default; opacity: .72; min-width: 132px; }.platform-note { font-size:12px; color:var(--muted); margin:14px 0 0; }.glass-panel { background: var(--glass); border: 1px solid var(--line); box-shadow: inset 0 1px var(--highlight), 0 28px 70px var(--shadow); backdrop-filter: blur(34px) saturate(140%); -webkit-backdrop-filter: blur(34px) saturate(140%); }.app-stage { margin: 46px auto 0; max-width: 1160px; perspective: 1400px; }.app-window { border-radius: 28px; overflow: hidden; text-align: left; min-height: 600px; transform: rotateX(1.8deg); transform-origin: center bottom; box-shadow: inset 0 1px var(--highlight), 0 45px 110px rgba(0,0,0,.21), 0 0 0 1px rgba(255,255,255,.02); }.window-topbar { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: var(--glass-subtle); padding: 0 17px; }.traffic-lights { display: flex; gap: 8px; }.traffic-lights span { width: 12px; height: 12px; border-radius: 50%; background: rgba(127,127,127,.34); border: 1px solid rgba(127,127,127,.16); }.mini-brand { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 650; color: var(--secondary); }.mini-brand img { width: 19px; height: 19px; border-radius: 5px; }.app-body { display: grid; grid-template-columns: 190px 1fr; min-height: 546px; }.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); padding: 18px 12px; }.side-item { height: 36px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--secondary); margin-bottom: 3px; }.side-item.active { background: var(--blue-soft); color: var(--text); }.side-icon { width: 16px; text-align: center; font-size: 14px; color: var(--secondary); }.side-item.active .side-icon { color: var(--blue); }.side-separator { border-top: 1px solid var(--line); margin: 12px 8px; }.side-item.muted { color: var(--muted); }.app-content { padding: 105px 58px 58px; display: flex; flex-direction: column; align-items: center; }.download-title { text-align: center; margin-bottom: 27px; }.download-title h2 { margin: 0 0 5px; font-size: 30px; letter-spacing: -.035em; }.download-title p { margin: 0; font-size: 14px; color: var(--secondary); }.url-demo { width: min(100%, 710px); height: 72px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong); box-shadow: inset 0 1px var(--highlight), 0 10px 28px rgba(0,0,0,.10); display: flex; align-items: center; padding: 0 13px 0 23px; gap: 14px; position: relative; overflow: visible; transition: border-color .25s ease, box-shadow .25s ease; }.url-demo.active { border-color: rgba(10,132,255,.68); box-shadow: inset 0 1px var(--highlight), 0 8px 24px rgba(0,0,0,.09), 0 0 18px var(--blue-glow); }.url-demo.analyzing { border-color: rgba(10,132,255,.88); }.link-icon { color: var(--muted); font-size: 20px; }.demo-url { flex: 1; color: var(--muted); font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.url-demo.active .demo-url { color: var(--text); }#demo-button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(127,127,127,.13); color: var(--muted); font-size: 20px; cursor: pointer; position: relative; z-index: 4; transition: .2s ease; }.url-demo.active #demo-button { background: var(--blue); color: white; box-shadow: 0 0 18px var(--blue-glow); }.ripple { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; border: 1px solid var(--blue); }.url-demo.pulse .ripple-one { animation: urlpulse .9s ease-out; }.url-demo.pulse .ripple-two { animation: urlpulse .9s .08s ease-out; }@keyframes urlpulse { 0% { opacity: 0; transform: scale(.985); box-shadow: 0 0 0 rgba(10,132,255,0); } 22% { opacity: .95; box-shadow: 0 0 18px var(--blue-glow), inset 0 0 5px rgba(218,238,255,.3); } 100% { opacity: 0; transform: scale(1.035); box-shadow: 0 0 35px rgba(10,132,255,0); } }.url-demo.analyzing::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--angle), transparent 0 69%, rgba(10,132,255,.2) 77%, var(--blue) 84%, rgba(226,244,255,.98) 88%, var(--blue) 91%, transparent 98%); -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: chase 1.15s linear infinite; filter: drop-shadow(0 0 5px var(--blue-glow)); }@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }@keyframes chase { to { --angle: 360deg; } }.demo-hint { color: var(--muted); font-size: 12px; margin-top: 16px; min-height: 16px; }.result-card { width: min(100%, 680px); margin-top: 24px; min-height: 92px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass-subtle); padding: 12px 14px; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.22,.8,.24,1); }.result-card.visible { opacity: 1; transform: none; }.thumb { width: 64px; height: 64px; border-radius: 13px; background: linear-gradient(145deg, #182b46, #4385c9); display: grid; place-items: center; color: rgba(255,255,255,.85); }.result-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }.result-meta strong { font-size: 13px; }.result-meta span { font-size: 11px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.result-download { border: 0; border-radius: 9px; background: var(--blue); color: white; height: 32px; padding: 0 12px; font-size: 11px; font-weight: 650; }.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 76px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }.trust-strip div { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); align-items: center; text-align: center; }.trust-strip div:last-child { border-right: 0; }.trust-strip strong { font-size: 13px; }.trust-strip span { color: var(--muted); font-size: 11px; }.section { padding-top: 150px; }.section-heading { text-align: center; max-width: 690px; margin: 0 auto 52px; }.section-heading.left { text-align: left; max-width: none; margin-left: 0; }.section-heading h2, .privacy-card h2, .download-card h2 { margin: 11px 0 12px; font-size: clamp(38px, 5vw, 58px); line-height: 1; letter-spacing: -.05em; }.section-heading p, .privacy-card p, .download-card p { color: var(--secondary); font-size: 17px; line-height: 1.55; margin: 0; }.kicker { color: var(--blue); }.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }.feature-card { min-height: 330px; border-radius: var(--radius); padding: 28px; box-shadow: inset 0 1px var(--highlight), 0 18px 45px rgba(0,0,0,.09); overflow: hidden; position: relative; }.feature-card h3 { font-size: 24px; letter-spacing: -.035em; margin: 26px 0 8px; }.feature-card p { color: var(--secondary); font-size: 14px; line-height: 1.55; max-width: 500px; margin: 0; }.feature-large { min-height: 300px; }.feature-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(127,127,127,.11); border: 1px solid var(--line); font-size: 18px; box-shadow: inset 0 1px var(--highlight); }.feature-icon.blue { background: var(--blue-soft); color: var(--blue); }.mini-url { height: 54px; border-radius: 999px; background: var(--glass-subtle); border: 1px solid var(--line); position: absolute; left: 28px; right: 28px; bottom: 29px; display: flex; align-items: center; padding: 0 9px 0 18px; color: var(--muted); font-size: 12px; }.mini-url span { flex: 1; }.mini-url b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: white; }.quality-pills { display: flex; gap: 8px; position: absolute; bottom: 30px; left: 28px; }.quality-pills span { padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--glass-subtle); color: var(--secondary); font-size: 11px; }.quality-pills span:first-child { background: var(--blue-soft); color: var(--blue); border-color: rgba(10,132,255,.18); }.queue-lines { position: absolute; left: 28px; right: 28px; bottom: 31px; display: grid; gap: 8px; }.queue-lines i { height: 9px; border-radius: 999px; background: linear-gradient(90deg,var(--blue) 0 68%,rgba(127,127,127,.11) 68%); opacity: .82; }.queue-lines i:nth-child(2) { background: linear-gradient(90deg,var(--blue) 0 39%,rgba(127,127,127,.11) 39%); opacity: .5; }.queue-lines i:nth-child(3) { background: rgba(127,127,127,.11); opacity: 1; }.browser-row { position: absolute; left: 28px; bottom: 30px; display: flex; gap: 8px; }.browser-row span { border-radius: 10px; border: 1px solid var(--line); padding: 9px 12px; font-size: 11px; color: var(--secondary); background: var(--glass-subtle); }.engine-line { position: absolute; left: 28px; right: 28px; bottom: 30px; display: flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--glass-subtle); font-size: 11px; color: var(--secondary); gap: 9px; }.engine-line b { margin-left: auto; color: #34c759; font-weight: 650; }.pulse { width: 7px; height: 7px; background: #34c759; border-radius: 50%; box-shadow: 0 0 9px rgba(52,199,89,.35); }.how-section { padding-bottom: 10px; }.steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.steps article { padding: 30px 30px 10px 0; border-right: 1px solid var(--line); min-height: 210px; }.steps article + article { padding-left: 30px; }.steps article:last-child { border-right: 0; }.step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; }.steps h3 { margin: 38px 0 8px; font-size: 20px; letter-spacing: -.03em; }.steps p { color: var(--secondary); line-height: 1.55; font-size: 13px; margin: 0; max-width: 280px; }.privacy-card { min-height: 410px; border-radius: 30px; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; padding: 58px; gap: 60px; }.privacy-card h2 { font-size: clamp(38px,4.6vw,56px); }.privacy-visual { text-align: center; color: var(--muted); font-size: 11px; }.mac-outline { width: 220px; height: 150px; border: 1px solid var(--line); background: var(--glass-subtle); border-radius: 18px; margin: 0 auto 15px; display: grid; place-items: center; box-shadow: inset 0 1px var(--highlight), 0 12px 35px rgba(0,0,0,.10); }.shield { width: 62px; height: 62px; border-radius: 18px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 27px; font-weight: 650; border: 1px solid rgba(10,132,255,.2); }.download-section { padding-bottom: 130px; }.download-card { border-radius: 30px; min-height: 230px; padding: 40px 44px; display: grid; grid-template-columns: 100px 1fr auto; gap: 30px; align-items: center; }.download-card > img { width: 100px; height: 100px; border-radius: 24px; box-shadow: 0 18px 40px rgba(0,0,0,.19); }.download-card h2 { font-size: 36px; margin: 8px 0; }.download-card p { font-size: 14px; max-width: 560px; }footer { border-top: 1px solid var(--line); min-height: 150px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: center; padding: 28px 0; color: var(--muted); font-size: 11px; }.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--secondary); }.footer-brand img { width: 34px; height: 34px; border-radius: 9px; }.footer-brand span { display: flex; flex-direction: column; gap: 2px; }.footer-brand strong { color: var(--text); font-size: 13px; }.footer-brand small { font-size: 10px; }.footer-links { display: flex; gap: 24px; }.footer-links a:hover { color: var(--text); }footer > p { grid-column: 1 / -1; margin: 10px 0 0; }@media (max-width: 850px) {
  nav a:not(.nav-cta) { display: none; }
  .theme-toggle { padding: 0 10px; }
  .background-picker label { display:none; }
  .background-picker select { min-width:98px; }
  .hero { padding-top: 52px; }
  .hero-product { font-size: 16px; }
  .hero-icon { width: 58px; height: 58px; border-radius: 14px; }
  .hero h1 { font-size: clamp(58px,14vw,92px); }
  .app-window { min-height: 500px; }
  .app-body { grid-template-columns: 1fr; min-height: 445px; }
  .sidebar { display: none; }
  .app-content { padding: 90px 28px 45px; }
  .trust-strip { grid-template-columns: repeat(2,1fr); row-gap: 24px; }
  .trust-strip div:nth-child(2) { border-right: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps article, .steps article + article { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .steps article:last-child { border-bottom: 0; }
  .steps h3 { margin-top: 22px; }
  .privacy-card { grid-template-columns: 1fr; padding: 38px; }
  .privacy-visual { order: -1; }
  .download-card { grid-template-columns: 78px 1fr; padding: 32px; }
  .download-card > img { width: 78px; height: 78px; border-radius: 19px; }
  .download-card .button { grid-column: 1 / -1; width: 100%; }
}@media (max-width: 560px) {
  .shell { width: min(100% - 28px, 1160px); }
  .theme-toggle { width:40px; justify-content:center; padding:0; }
  .theme-toggle-label { display:none; }
  .background-picker { display:none; }
  .site-header { height: 68px; }
  .brand img { width: 32px; height: 32px; }
  .hero-product { gap: 10px; font-size: 15px; }
  .hero-icon { width: 50px; height: 50px; border-radius: 13px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .app-stage { margin-top: 36px; }
  .app-window { border-radius: 18px; min-height: 460px; }
  .window-topbar { height: 48px; }
  .app-content { padding: 70px 16px 30px; }
  .download-title h2 { font-size: 22px; }
  .url-demo { height: 58px; padding-left: 15px; }
  .result-card { grid-template-columns: 48px 1fr; }
  .thumb { width: 48px; height: 48px; }
  .result-download { display: none; }
  .trust-strip { margin-top: 48px; padding: 20px 0; }
  .section { padding-top: 110px; }
  .section-heading { margin-bottom: 34px; }
  .feature-card { padding: 22px; min-height: 300px; }
  .mini-url, .engine-line { left: 22px; right: 22px; }
  .quality-pills, .queue-lines, .browser-row { left: 22px; }
  .privacy-card { padding: 28px 22px; gap: 35px; }
  .mac-outline { width: 185px; height: 125px; }
  .download-section { padding-bottom: 90px; }
  .download-card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 28px 22px; }
  footer { grid-template-columns: 1fr; gap: 26px; }
  .footer-links { justify-content: flex-start; }
}@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}/* ──────────────────────────────────────────────────────────
   Slurp in action — product showcase
   Inspired by the rhythm of premium product highlight galleries,
   while using Slurp's own interface, motion and visual language.
   ────────────────────────────────────────────────────────── */.showcase-section {
  --scene-bg: #05070c;
  --scene-panel: rgba(19,23,31,.76);
  --scene-panel-strong: rgba(29,34,44,.88);
  --scene-line: rgba(255,255,255,.105);
  --scene-muted: rgba(235,240,248,.56);
  position: relative;
  margin-top: 150px;
  padding: 128px 0 112px;
  background:
    radial-gradient(900px 430px at 50% -90px, rgba(10,132,255,.15), transparent 68%),
    radial-gradient(700px 420px at 92% 55%, rgba(10,132,255,.08), transparent 65%),
    var(--scene-bg);
  color: #f7f9fc;
  overflow: hidden;
}.showcase-section::before,
.showcase-section::after { content:""; position:absolute; left:0; right:0; height:80px; pointer-events:none; z-index:1; }.showcase-section::before { top:0; background: linear-gradient(180deg, rgba(255,255,255,.018), transparent); }.showcase-section::after { bottom:0; background: linear-gradient(0deg, rgba(255,255,255,.014), transparent); }.showcase-head { position: relative; z-index:2; margin-bottom: 54px; }.showcase-kicker { color:#5cabff; font-size:14px; font-weight:650; }.showcase-head h2 { margin:12px 0 14px; font-size:clamp(48px,6.5vw,80px); line-height:.98; letter-spacing:-.055em; }.showcase-head p { margin:0; max-width:650px; color:var(--scene-muted); font-size:18px; line-height:1.5; }.showcase-viewport { position:relative; z-index:2; overflow:hidden; }.showcase-rail {
  display:flex;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:0 max(24px, calc((100vw - 1160px)/2)) 12px;
  scroll-padding-left:max(24px, calc((100vw - 1160px)/2));
  -webkit-overflow-scrolling:touch;
}.showcase-rail::-webkit-scrollbar { display:none; }.scene-card {
  flex:0 0 min(82vw, 1020px);
  scroll-snap-align:start;
  position:relative;
  min-height:650px;
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(650px 420px at 74% 64%, rgba(10,132,255,.12), transparent 70%),
    linear-gradient(145deg, rgba(24,28,37,.92), rgba(10,12,18,.96));
  border:1px solid rgba(255,255,255,.105);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 38px 90px rgba(0,0,0,.31);
}.scene-card:nth-child(2) { background: radial-gradient(600px 430px at 68% 58%, rgba(10,132,255,.18), transparent 68%), linear-gradient(145deg, rgba(19,24,34,.96), rgba(7,9,14,.98)); }.scene-card:nth-child(3) { background: radial-gradient(540px 380px at 75% 55%, rgba(69,130,226,.12), transparent 70%), linear-gradient(145deg, rgba(22,25,33,.96), rgba(8,10,15,.98)); }.scene-card:nth-child(4) { background: radial-gradient(570px 410px at 70% 60%, rgba(10,132,255,.10), transparent 70%), linear-gradient(145deg, rgba(20,23,31,.96), rgba(8,10,15,.98)); }.scene-copy { position:absolute; z-index:5; top:35px; left:39px; right:39px; display:flex; align-items:flex-start; gap:16px; }.scene-copy > span { color:rgba(255,255,255,.34); font-size:12px; font-weight:700; letter-spacing:.08em; padding-top:6px; }.scene-copy p { margin:0; max-width:660px; color:rgba(255,255,255,.66); font-size:clamp(20px,2.3vw,29px); line-height:1.18; letter-spacing:-.03em; }.scene-copy strong { color:#fff; font-weight:700; }.scene-canvas { position:absolute; left:38px; right:38px; bottom:-54px; top:135px; display:flex; align-items:flex-end; justify-content:center; }.scene-window { width:min(100%, 860px); height:480px; border-radius:23px 23px 0 0; overflow:hidden; background:rgba(22,26,34,.84); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px rgba(255,255,255,.11), 0 32px 80px rgba(0,0,0,.42); backdrop-filter:blur(30px) saturate(140%); transform:translateY(24px) scale(.985); opacity:.68; transition:transform .65s cubic-bezier(.22,.82,.2,1), opacity .55s ease; }.scene-card.is-active .scene-window { transform:translateY(0) scale(1); opacity:1; }.scene-titlebar { height:47px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 15px; background:rgba(255,255,255,.025); border-bottom:1px solid var(--scene-line); }.scene-lights { display:flex; gap:7px; }.scene-lights i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.05); }.scene-window-brand { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:650; color:rgba(255,255,255,.58); }.scene-window-brand img { width:18px; height:18px; border-radius:5px; }.scene-layout { display:grid; grid-template-columns:160px 1fr; height:433px; }.scene-sidebar { padding:14px 10px; background:rgba(7,10,15,.34); border-right:1px solid var(--scene-line); }.scene-side { height:33px; display:flex; align-items:center; gap:8px; padding:0 9px; border-radius:8px; color:rgba(255,255,255,.44); font-size:11px; margin-bottom:3px; }.scene-side b { width:15px; text-align:center; font-size:13px; font-weight:500; }.scene-side.active { background:rgba(10,132,255,.15); color:rgba(255,255,255,.88); }.scene-side.active b { color:#37a1ff; }.scene-main { position:relative; padding:72px 48px 38px; overflow:hidden; }.scene-heading { text-align:center; }.scene-heading h3 { margin:0 0 5px; color:#fff; font-size:27px; letter-spacing:-.035em; }.scene-heading p { margin:0; color:rgba(255,255,255,.48); font-size:13px; }.scene-url { width:min(100%, 560px); height:59px; border-radius:999px; margin:25px auto 0; display:flex; align-items:center; gap:11px; padding:0 10px 0 18px; position:relative; color:rgba(255,255,255,.84); font-size:13px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.09), 0 14px 28px rgba(0,0,0,.18); }.scene-link { color:rgba(255,255,255,.4); font-size:17px; }.scene-go { margin-left:auto; flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#0a84ff; color:white; font-size:18px; font-weight:700; box-shadow:0 0 18px rgba(10,132,255,.35); }.scene-caption { text-align:center; margin-top:13px; color:rgba(255,255,255,.38); font-size:11px; }/* Paste: blank field -> URL -> Slurp perimeter ripple */.paste-copy { flex:1; min-width:0; position:relative; height:20px; }.paste-placeholder,.paste-value { position:absolute; inset:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.paste-placeholder { color:rgba(255,255,255,.35); }.paste-value { color:rgba(255,255,255,.9); opacity:0; transform:translateY(3px); }.scene-card.is-active .paste-placeholder { animation:pastePlaceholder 4.8s both; }.scene-card.is-active .paste-value { animation:pasteValue 4.8s both; }.paste-ripple { position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; border:1px solid rgba(10,132,255,.95); }.scene-card.is-active .ripple-a { animation:showcaseRipple 4.8s .92s both; }.scene-card.is-active .ripple-b { animation:showcaseRipple 4.8s 1.04s both; }@keyframes pastePlaceholder { 0%,16%{opacity:1} 21%,100%{opacity:0} }@keyframes pasteValue { 0%,17%{opacity:0;transform:translateY(3px)} 22%,100%{opacity:1;transform:none} }@keyframes showcaseRipple {
  0%,4% { opacity:0; transform:scale(.992); box-shadow:0 0 0 rgba(10,132,255,0); }
  10% { opacity:1; transform:scale(1); box-shadow:0 0 16px rgba(10,132,255,.62), inset 0 0 7px rgba(220,242,255,.42); }
  20% { opacity:.72; transform:scale(1.018); box-shadow:0 0 28px rgba(10,132,255,.33); }
  32%,100% { opacity:0; transform:scale(1.035); box-shadow:0 0 36px rgba(10,132,255,0); }
}/* Analyze: electric blue perimeter chase with cool white specular crest */.analyze-field { border-color:rgba(10,132,255,.72); box-shadow:inset 0 1px rgba(255,255,255,.1), 0 0 19px rgba(10,132,255,.17); }.analyze-field::before { content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background:conic-gradient(from var(--showcase-angle), transparent 0 67%, rgba(10,132,255,.16) 75%, #0a84ff 83%, #78c7ff 87%, #f2fbff 89%, #79c7ff 91%, #0a84ff 94%, transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; filter:drop-shadow(0 0 8px rgba(10,132,255,.58)); }.scene-card.is-active .analyze-field::before { opacity:1; animation:showcaseChase 1.15s linear infinite; }.scene-card.is-active .analyze-field { animation:analyzeBreathe 2.2s ease-in-out infinite; }.analyzing-dots { font-size:12px; letter-spacing:1px; }.analyze-status { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px; color:rgba(255,255,255,.44); font-size:11px; }.analyze-status i { width:6px; height:6px; border-radius:50%; background:#0a84ff; box-shadow:0 0 12px rgba(10,132,255,.7); }.scene-card.is-active .analyze-status i { animation:statusPulse 1.2s ease-in-out infinite; }@property --showcase-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }@keyframes showcaseChase { to { --showcase-angle:360deg; } }@keyframes analyzeBreathe { 50% { box-shadow:inset 0 1px rgba(255,255,255,.1), 0 0 28px rgba(10,132,255,.25); } }@keyframes statusPulse { 50% { opacity:.35; transform:scale(.75); } }/* Choose: media and controls settle into place in sequence */.choose-scene { padding-top:48px; }.detected-media { width:min(100%,570px); margin:0 auto; display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; opacity:0; transform:translateY(16px); }.scene-card.is-active .detected-media { animation:sceneRise .55s .15s both cubic-bezier(.2,.8,.2,1); }.detected-thumb { height:74px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,#132438,#397fc6); color:rgba(255,255,255,.82); box-shadow:inset 0 1px rgba(255,255,255,.13); }.detected-copy small { color:#62b3ff; font-size:9px; letter-spacing:.09em; font-weight:750; }.detected-copy h3 { margin:5px 0 4px; font-size:20px; letter-spacing:-.025em; }.detected-copy p { margin:0; color:rgba(255,255,255,.42); font-size:11px; }.choice-panel { width:min(100%,570px); margin:18px auto 0; padding:3px 16px; border-radius:17px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); opacity:0; transform:translateY(14px); }.scene-card.is-active .choice-panel { animation:sceneRise .55s .55s both cubic-bezier(.2,.8,.2,1); }.choice-line { min-height:50px; display:grid; grid-template-columns:90px 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.07); font-size:11px; }.choice-line:last-child { border-bottom:0; }.choice-line > span { color:rgba(255,255,255,.48); }.choice-pills { display:flex; gap:6px; }.choice-pills b { padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.6); font-weight:600; }.choice-pills b.selected { background:rgba(10,132,255,.18); color:#7ac5ff; border-color:rgba(10,132,255,.25); }.choice-select { justify-self:end; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.055); color:rgba(255,255,255,.75); }.choice-select i { color:rgba(255,255,255,.35); font-style:normal; margin-left:8px; }.scene-download { display:flex; align-items:center; gap:8px; margin:17px auto 0; height:36px; padding:0 16px; border:0; border-radius:999px; background:#0a84ff; color:white; font:inherit; font-size:11px; font-weight:700; box-shadow:0 10px 24px rgba(10,132,255,.24); opacity:0; transform:translateY(9px) scale(.98); }.scene-card.is-active .scene-download { animation:buttonArrive .45s .95s both cubic-bezier(.2,.8,.2,1), buttonGlow 2.5s 1.4s ease-in-out infinite; }@keyframes sceneRise { to { opacity:1; transform:none; } }@keyframes buttonArrive { to { opacity:1; transform:none; } }@keyframes buttonGlow { 50% { box-shadow:0 10px 30px rgba(10,132,255,.42), 0 0 16px rgba(10,132,255,.18); } }/* Queue: row enters, progress moves */.queue-scene { padding-top:43px; }.queue-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.queue-heading h3 { margin:0 0 3px; font-size:25px; letter-spacing:-.035em; }.queue-heading p { margin:0; color:rgba(255,255,255,.42); font-size:11px; }.queue-setting { color:rgba(255,255,255,.48); font-size:10px; padding:7px 10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.035); }.queue-demo-row { display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.085); background:rgba(255,255,255,.04); margin-bottom:8px; opacity:0; transform:translateY(14px); }.scene-card.is-active .primary-row { animation:sceneRise .5s .2s both cubic-bezier(.2,.8,.2,1); }.scene-card.is-active .waiting-row { animation:sceneRise .5s .58s both cubic-bezier(.2,.8,.2,1); }.queue-thumb { width:58px; height:48px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(140deg,#162b42,#4789ca); color:rgba(255,255,255,.72); }.queue-thumb.alt { background:linear-gradient(140deg,#2a2734,#7b657f); }.queue-copy { display:flex; min-width:0; flex-direction:column; gap:4px; }.queue-copy strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.queue-copy > span { color:rgba(255,255,255,.42); font-size:10px; }.queue-track { width:100%; height:4px; margin-top:3px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }.queue-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0a84ff,#70c4ff); box-shadow:0 0 10px rgba(10,132,255,.45); }.scene-card.is-active .queue-track i { animation:queueProgress 4.6s .55s both cubic-bezier(.25,.65,.2,1); }.queue-percent,.queue-more { color:rgba(255,255,255,.46); font-size:10px; font-variant-numeric:tabular-nums; }@keyframes queueProgress { 0%{width:6%} 100%{width:72%} }.showcase-controls { position:relative; z-index:3; margin-top:30px; display:flex; align-items:center; gap:13px; }.showcase-toggle { width:38px; height:38px; flex:0 0 38px; border-radius:50%; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(14px); font-size:12px; }.showcase-toggle .play-icon { display:none; font-size:11px; margin-left:2px; }.showcase-toggle.paused .pause-icon { display:none; }.showcase-toggle.paused .play-icon { display:inline; }.showcase-dots { height:38px; display:flex; align-items:center; gap:5px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(14px); }.scene-dot { width:36px; height:28px; padding:0 5px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; }.scene-dot i { display:block; width:100%; height:3px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.19); position:relative; }.scene-dot i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#fff; transform-origin:left; transform:scaleX(0); }.scene-dot.active i { background:rgba(255,255,255,.26); }.scene-dot.active i::after { transform:scaleX(var(--scene-progress,0)); }.scene-dot:not(.active):hover i { background:rgba(255,255,255,.34); }@media (max-width: 850px) {
  .showcase-section { margin-top:110px; padding:92px 0 86px; }
  .showcase-head { margin-bottom:38px; }
  .showcase-head p { font-size:16px; }
  .showcase-rail { gap:16px; padding-left:24px; scroll-padding-left:24px; }
  .scene-card { flex-basis:88vw; min-height:570px; border-radius:26px; }
  .scene-copy { top:28px; left:28px; right:28px; }
  .scene-copy p { font-size:21px; }
  .scene-canvas { left:22px; right:22px; top:125px; bottom:-42px; }
  .scene-window { height:430px; }
  .scene-layout { grid-template-columns:1fr; height:383px; }
  .scene-sidebar { display:none; }
  .scene-main { padding-left:30px; padding-right:30px; }
}@media (max-width: 560px) {
  .showcase-section { margin-top:90px; padding:76px 0 74px; }
  .showcase-head { margin-bottom:28px; }
  .showcase-head h2 { font-size:48px; }
  .showcase-head p { font-size:15px; }
  .showcase-rail { padding-left:14px; scroll-padding-left:14px; gap:12px; }
  .scene-card { flex-basis:92vw; min-height:510px; border-radius:22px; }
  .scene-copy { top:22px; left:22px; right:22px; gap:10px; }
  .scene-copy p { font-size:18px; }
  .scene-copy > span { font-size:10px; }
  .scene-canvas { left:13px; right:13px; top:112px; bottom:-36px; }
  .scene-window { height:390px; border-radius:18px 18px 0 0; }
  .scene-titlebar { height:43px; }
  .scene-layout { height:347px; }
  .scene-main { padding:58px 16px 26px; }
  .scene-heading h3 { font-size:23px; }
  .scene-heading p { font-size:11px; }
  .scene-url { height:54px; padding-left:15px; font-size:11px; }
  .scene-go { flex-basis:36px; width:36px; height:36px; }
  .choose-scene { padding-top:32px; }
  .detected-media { grid-template-columns:86px 1fr; gap:12px; }
  .detected-thumb { height:62px; }
  .detected-copy h3 { font-size:16px; }
  .choice-line { grid-template-columns:72px 1fr; }
  .choice-pills b:nth-child(3) { display:none; }
  .queue-scene { padding-top:30px; }
  .queue-setting { display:none; }
  .queue-demo-row { grid-template-columns:48px 1fr auto; padding:10px; }
  .queue-thumb { width:48px; height:42px; }
  .showcase-controls { margin-top:20px; }
}/* v0.12 — Made for Mac / material showcase ----------------------------- */.beauty-section { position:relative; padding:155px 0 145px; overflow:hidden; }.beauty-heading { text-align:center; max-width:860px; position:relative; z-index:2; }.beauty-heading h2 { margin:10px 0 14px; font-size:clamp(50px,6.5vw,80px); line-height:.97; letter-spacing:-.06em; }.beauty-heading p { max-width:670px; margin:0 auto; color:var(--secondary); font-size:18px; line-height:1.5; }.beauty-stage { position:relative; margin-top:68px; padding-bottom:42px; }.beauty-atmosphere { position:absolute; pointer-events:none; border-radius:50%; filter:blur(64px); opacity:.75; transition:background .5s ease,opacity .35s ease,transform .8s ease; }.beauty-atmosphere-a { width:520px; height:410px; left:-40px; top:-70px; background:rgba(10,132,255,.24); }.beauty-atmosphere-b { width:500px; height:430px; right:-30px; bottom:-25px; background:rgba(137,84,210,.18); }:root[data-theme="light"] .beauty-atmosphere-a { background:rgba(245,178,162,.48); opacity:.78; }:root[data-theme="light"] .beauty-atmosphere-b { background:rgba(126,128,201,.36); opacity:.78; }.beauty-app-window { --beauty-text:rgba(247,249,252,.98); --beauty-secondary:rgba(238,242,248,.61); --beauty-muted:rgba(235,240,248,.38); --beauty-line:rgba(255,255,255,.14); --beauty-window:rgba(18,22,31,.35); --beauty-sidebar:rgba(12,16,24,.34); --beauty-surface:rgba(255,255,255,.075); position:relative; height:650px; overflow:hidden; border-radius:30px; color:var(--beauty-text); background:var(--beauty-window); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px rgba(255,255,255,.16),0 50px 120px rgba(0,0,0,.30),0 0 0 1px rgba(0,0,0,.10); backdrop-filter:blur(42px) saturate(165%); -webkit-backdrop-filter:blur(42px) saturate(165%); transition:background .42s ease,border-color .35s ease,box-shadow .42s ease,color .35s ease; isolation:isolate; }:root[data-theme="light"] .beauty-app-window { --beauty-text:rgba(25,28,34,.96); --beauty-secondary:rgba(39,45,54,.60); --beauty-muted:rgba(58,65,76,.42); --beauty-line:rgba(28,35,44,.10); --beauty-window:rgba(255,255,255,.30); --beauty-sidebar:rgba(246,248,251,.31); --beauty-surface:rgba(255,255,255,.31); border-color:rgba(255,255,255,.68); box-shadow:inset 0 1px rgba(255,255,255,.90),0 50px 115px rgba(64,57,75,.18),0 0 0 1px rgba(65,70,84,.07); }.beauty-app-window::before { content:""; position:absolute; width:520px; height:520px; left:4%; top:5%; border-radius:50%; background:rgba(10,132,255,.17); filter:blur(80px); z-index:-1; }.beauty-app-window::after { content:""; position:absolute; width:460px; height:420px; right:-2%; bottom:-5%; border-radius:50%; background:rgba(121,77,186,.12); filter:blur(78px); z-index:-1; }:root[data-theme="light"] .beauty-app-window::before { background:rgba(243,176,161,.30); }:root[data-theme="light"] .beauty-app-window::after { background:rgba(119,122,194,.23); }.beauty-titlebar { height:54px; position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--beauty-line); background:rgba(255,255,255,.025); backdrop-filter:blur(28px); }.beauty-traffic-lights { display:flex; gap:8px; padding-left:18px; }.beauty-traffic-lights i { width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18); }.beauty-traffic-lights i:nth-child(1){background:#ff5f57}.beauty-traffic-lights i:nth-child(2){background:#febc2e}.beauty-traffic-lights i:nth-child(3){background:#28c840}.beauty-window-title { display:flex; align-items:center; gap:7px; color:var(--beauty-secondary); font-size:12px; font-weight:650; }.beauty-window-title img { width:19px; height:19px; border-radius:5px; }.beauty-app-layout { height:calc(100% - 54px); display:grid; grid-template-columns:226px 1fr; }.beauty-sidebar { display:flex; flex-direction:column; padding:24px 12px 12px; background:var(--beauty-sidebar); border-right:1px solid var(--beauty-line); backdrop-filter:blur(38px) saturate(170%); -webkit-backdrop-filter:blur(38px) saturate(170%); }.beauty-sidebar-brand { display:flex; align-items:center; gap:9px; padding:0 10px 12px; }.beauty-sidebar-brand img { width:25px; height:25px; border-radius:50%; }.beauty-sidebar-brand strong { font-size:18px; letter-spacing:-.025em; }.beauty-sidebar-line { height:1px; margin:1px 8px 10px; background:var(--beauty-line); }.beauty-sidebar-spacer { flex:1; }.beauty-nav { height:38px; display:flex; align-items:center; gap:10px; padding:0 11px; border-radius:10px; color:var(--beauty-secondary); font-size:13px; }.beauty-nav + .beauty-nav { margin-top:4px; }.beauty-nav span { width:18px; text-align:center; color:inherit; font-size:14px; }.beauty-nav b { font-weight:520; }.beauty-nav.active { background:rgba(10,132,255,.16); color:var(--beauty-text); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.07); }.beauty-nav.active span { color:#2196ff; }:root[data-theme="light"] .beauty-nav.active { background:rgba(10,132,255,.105); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.34); }.beauty-nav.utility { color:var(--beauty-muted); }.beauty-main { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }.beauty-main::before { content:""; position:absolute; width:520px; height:320px; top:62px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(37,116,210,.15),transparent 67%); filter:blur(16px); }:root[data-theme="light"] .beauty-main::before { background:radial-gradient(ellipse,rgba(255,255,255,.32),transparent 68%); }.beauty-main-copy { text-align:center; position:relative; z-index:2; transform:translateY(-42px); }.beauty-main-copy h3 { margin:0 0 6px; font-size:29px; letter-spacing:-.04em; }.beauty-main-copy p { margin:0; color:var(--beauty-secondary); font-size:14px; }.beauty-url { position:relative; z-index:2; width:min(690px,calc(100% - 90px)); height:60px; transform:translateY(-18px); border-radius:999px; padding:0 10px 0 19px; display:flex; align-items:center; gap:11px; background:var(--beauty-surface); border:1px solid rgba(255,255,255,.15); box-shadow:inset 0 1px rgba(255,255,255,.11),0 13px 35px rgba(0,0,0,.12); backdrop-filter:blur(30px) saturate(155%); -webkit-backdrop-filter:blur(30px) saturate(155%); color:var(--beauty-muted); font-size:14px; }:root[data-theme="light"] .beauty-url { border-color:rgba(40,50,65,.10); box-shadow:inset 0 1px rgba(255,255,255,.75),0 13px 35px rgba(66,60,75,.09); }.beauty-link { font-size:17px; }.beauty-url > span:nth-child(2) { flex:1; }.beauty-url button { width:40px; height:40px; border:0; border-radius:50%; background:rgba(10,132,255,.95); color:white; font:inherit; font-size:18px; box-shadow:0 8px 24px rgba(10,132,255,.30),inset 0 1px rgba(255,255,255,.20); }.beauty-floating-sheet { position:absolute; z-index:3; left:50%; bottom:33px; transform:translateX(-50%); width:min(650px,calc(100% - 110px)); min-height:74px; border-radius:22px; padding:12px 13px 12px 20px; display:grid; grid-template-columns:1fr 1px 1fr auto; align-items:center; gap:20px; background:rgba(29,34,43,.31); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 58px rgba(0,0,0,.20); backdrop-filter:blur(44px) saturate(175%); -webkit-backdrop-filter:blur(44px) saturate(175%); }:root[data-theme="light"] .beauty-floating-sheet { background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.68); box-shadow:inset 0 1px rgba(255,255,255,.92),0 22px 58px rgba(70,62,82,.13); }.beauty-floating-sheet > div { display:flex; flex-direction:column; gap:3px; min-width:0; }.beauty-floating-sheet span { color:var(--beauty-muted); font-size:10px; }.beauty-floating-sheet strong { color:var(--beauty-text); font-size:13px; font-weight:620; }.beauty-sheet-divider { width:1px; height:34px; background:var(--beauty-line); }.beauty-floating-sheet button { border:0; height:39px; padding:0 16px; border-radius:999px; background:#0a84ff; color:white; font:inherit; font-size:12px; font-weight:650; box-shadow:0 9px 26px rgba(10,132,255,.27),inset 0 1px rgba(255,255,255,.22); }.beauty-edge-highlight { position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px rgba(255,255,255,.13),inset 1px 0 rgba(255,255,255,.035); }:root[data-theme="light"] .beauty-edge-highlight { box-shadow:inset 0 1px rgba(255,255,255,.88),inset 1px 0 rgba(255,255,255,.30); }.beauty-notes { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:24px; color:var(--muted); font-size:11px; }.beauty-notes i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.52; }@media (max-width:900px) { .beauty-section{padding:120px 0}.beauty-app-window{height:570px;border-radius:24px}.beauty-app-layout{grid-template-columns:185px 1fr}.beauty-sidebar{padding-inline:9px}.beauty-url{width:calc(100% - 52px)}.beauty-floating-sheet{width:calc(100% - 60px)} }@media (max-width:650px) { .beauty-section{padding:105px 0}.beauty-stage.shell{width:100%}.beauty-heading{padding:0 20px}.beauty-app-window{height:500px;border-radius:0;border-left:0;border-right:0}.beauty-app-layout{grid-template-columns:1fr}.beauty-sidebar{display:none}.beauty-main-copy{transform:translateY(-35px)}.beauty-url{width:calc(100% - 32px);height:56px;transform:translateY(-15px)}.beauty-floating-sheet{width:calc(100% - 28px);grid-template-columns:1fr auto;gap:12px;padding:11px 12px 11px 16px}.beauty-floating-sheet > div:nth-child(3),.beauty-sheet-divider{display:none}.beauty-notes{padding:0 18px;flex-wrap:wrap}.beauty-atmosphere{opacity:.5} }/* v0.6 — one-window How It Works ---------------------------------------- */:root[data-theme="dark"] .how-real-section, .how-real-section {
  --app-text: #f5f6f8;
  --app-secondary: rgba(238,242,248,.62);
  --app-muted: rgba(235,240,248,.40);
  --app-line: rgba(255,255,255,.105);
  --app-surface: rgba(34,39,49,.66);
  --app-surface-strong: rgba(38,44,55,.78);
  --app-sidebar: rgba(18,22,29,.67);
  --app-selection: rgba(10,132,255,.16);
  position: relative;
  padding: 155px 0 125px;
  overflow: hidden;
}:root[data-theme="light"] .how-real-section { --app-text:#17191d; --app-secondary:rgba(35,39,46,.62); --app-muted:rgba(55,61,70,.42); --app-line:rgba(20,24,30,.10); --app-surface:rgba(255,255,255,.58); --app-surface-strong:rgba(250,251,253,.72); --app-sidebar:rgba(235,238,243,.60); --app-selection:rgba(10,132,255,.11); }.how-real-section::before {
  content:""; position:absolute; width:900px; height:680px; left:50%; top:330px; transform:translateX(-50%);
  background:radial-gradient(circle at 22% 30%,rgba(10,132,255,.24),transparent 39%),radial-gradient(circle at 78% 56%,rgba(103,73,220,.17),transparent 42%);
  filter:blur(52px); opacity:.72; pointer-events:none;
}.how-real-heading { text-align:center; position:relative; z-index:2; max-width:850px; }.how-real-heading h2 { margin:10px 0 13px; font-size:clamp(50px,6.4vw,78px); line-height:.98; letter-spacing:-.058em; }.how-real-heading p { margin:0 auto; max-width:660px; color:var(--secondary); font-size:18px; line-height:1.5; }.how-real-stage { margin-top:62px; position:relative; z-index:2; }.how-app-window {
  position:relative; width:100%; height:690px; border-radius:27px; overflow:hidden;
  background:linear-gradient(135deg,rgba(36,42,54,.77),rgba(14,17,24,.86));
  border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.12),0 42px 100px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.15);
  backdrop-filter:blur(36px) saturate(150%); -webkit-backdrop-filter:blur(36px) saturate(150%);
  color:var(--app-text); isolation:isolate;
}.how-window-glow { position:absolute; inset:-30%; z-index:-1; background:radial-gradient(circle at 64% 32%,rgba(35,106,186,.22),transparent 35%),radial-gradient(circle at 38% 76%,rgba(106,68,184,.15),transparent 34%); filter:blur(18px); }.how-titlebar { position:absolute; inset:0 0 auto; height:52px; z-index:8; pointer-events:none; }.how-traffic-lights { position:absolute; left:17px; top:18px; display:flex; gap:8px; }.how-traffic-lights i { width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18); }.how-traffic-lights i:nth-child(1){background:#ff5f57}.how-traffic-lights i:nth-child(2){background:#febc2e}.how-traffic-lights i:nth-child(3){background:#28c840}.how-app-layout { height:100%; display:grid; grid-template-columns:236px 1fr; }.how-sidebar { display:flex; flex-direction:column; min-width:0; padding-top:42px; background:var(--app-sidebar); border-right:1px solid var(--app-line); backdrop-filter:blur(30px) saturate(145%); }.how-sidebar-header { height:46px; display:flex; align-items:center; gap:9px; padding:0 14px 0 22px; }.how-sidebar-header img { width:23px; height:23px; border-radius:50%; }.how-sidebar-header strong { font-size:19px; letter-spacing:-.025em; }.how-sidebar-toggle { margin-left:auto; width:32px; height:30px; display:grid; place-items:center; color:var(--app-secondary); }.how-sidebar-toggle svg,.how-nav-icon svg,.how-folder-button svg,.how-primary-download svg,.how-replay svg,.how-link-icon,.how-analyzed-source svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }.how-sidebar-toggle svg { width:17px; height:17px; }.how-sidebar-divider { height:1px; background:var(--app-line); margin:8px 12px 11px; }.how-sidebar-divider.bottom { margin-top:0; margin-bottom:5px; }.how-app-nav,.how-utility-nav { padding:0 12px; }.how-app-nav { display:block; }.how-nav-row { width:100%; height:38px; border:0; border-radius:10px; background:transparent; color:var(--app-secondary); display:flex; align-items:center; gap:10px; padding:0 12px; font:inherit; font-size:14px; text-align:left; cursor:pointer; transition:background .22s ease,color .22s ease,box-shadow .22s ease; }.how-nav-row + .how-nav-row { margin-top:4px; }.how-nav-icon { width:20px; height:22px; display:grid; place-items:center; flex:0 0 20px; }.how-nav-icon svg { width:19px; height:19px; }.how-nav-row.utility { cursor:default; }.how-nav-new { background:var(--app-selection); color:var(--app-text); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.07); }.how-nav-new .how-nav-icon { color:#2196ff; }.how-queue-badge { margin-left:auto; min-width:20px; padding:2px 6px; border-radius:99px; color:#58aaff; background:rgba(10,132,255,.13); font-size:10px; text-align:center; opacity:0; transform:scale(.8); transition:.25s ease; }.how-app-window[data-state="queue"] .how-nav-new,.how-app-window[data-state="history"] .how-nav-new { background:transparent; color:var(--app-secondary); box-shadow:none; }.how-app-window[data-state="queue"] .how-nav-new .how-nav-icon,.how-app-window[data-state="history"] .how-nav-new .how-nav-icon { color:inherit; }.how-app-window[data-state="queue"] .how-nav-queue { background:var(--app-selection); color:var(--app-text); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.07); }.how-app-window[data-state="queue"] .how-nav-queue .how-nav-icon { color:#2196ff; }.how-app-window[data-state="history"] .how-nav-history { background:var(--app-selection); color:var(--app-text); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.07); }.how-app-window[data-state="history"] .how-nav-history .how-nav-icon { color:#2196ff; }.how-app-window[data-state="queue"] .how-queue-badge,.how-app-window[data-state="result"] .how-queue-badge { opacity:1; transform:none; }.how-sidebar-spacer { flex:1; }.how-utility-nav { padding-bottom:9px; }.how-app-main { min-width:0; height:100%; position:relative; overflow:hidden; background:rgba(7,9,14,.12); }.how-state-panel { position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .28s ease,transform .34s cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="paste"] .how-new-state,.how-app-window[data-state="analyze"] .how-new-state,.how-app-window[data-state="result"] .how-result-state,.how-app-window[data-state="queue"] .how-queue-state,.how-app-window[data-state="history"] .how-history-state { opacity:1; transform:none; pointer-events:auto; }.how-new-state { display:grid; place-items:center; }.how-new-center { width:min(760px,calc(100% - 90px)); transform:translateY(-8px); text-align:center; }.how-new-heading { height:62px; position:relative; }.how-new-heading h3 { position:absolute; left:0; right:0; top:0; margin:0; font-size:25px; font-weight:650; letter-spacing:-.035em; transition:opacity .2s ease,transform .2s ease; }.how-new-heading p { position:absolute; left:0; right:0; top:36px; margin:0; color:var(--app-secondary); font-size:14px; transition:opacity .2s ease,transform .2s ease; }.how-heading-analyzing,.how-subtitle-analyzing { opacity:0; transform:translateY(3px); }.how-app-window[data-state="analyze"] .how-heading-new,.how-app-window[data-state="analyze"] .how-subtitle-new { opacity:0; transform:translateY(-3px); }.how-app-window[data-state="analyze"] .how-heading-analyzing,.how-app-window[data-state="analyze"] .how-subtitle-analyzing { opacity:1; transform:none; }.how-url-card { position:relative; height:56px; margin-top:16px; border-radius:999px; display:flex; align-items:center; gap:12px; padding:0 11px 0 18px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.15); box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.14); text-align:left; }.how-link-icon { width:18px; height:18px; color:var(--app-muted); flex:0 0 18px; }.how-url-value { flex:1; min-width:0; position:relative; height:24px; display:flex; align-items:center; font-size:18px; }.how-url-placeholder,.how-url-pasted { position:absolute; left:0; right:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.how-url-placeholder { color:var(--app-muted); }.how-url-pasted { color:var(--app-text); opacity:0; transform:translateY(2px); }.how-url-clear { color:var(--app-muted); width:20px; text-align:center; opacity:0; font-size:19px; transition:opacity .18s ease; }.how-url-action { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .22s cubic-bezier(.2,.9,.3,1.4); }.how-url-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.how-url-effects {
  position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px);
  overflow:visible; pointer-events:none; z-index:3;
}.how-url-card { transition:border-color .18s ease,box-shadow .18s ease; }.how-url-card.paste-ripple-active { border-color:rgba(10,132,255,.30); }.how-app-window[data-state="analyze"] .how-url-card {
  border-color:rgba(10,132,255,.30);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 4px 26px rgba(10,132,255,.11);
}.how-app-window[data-state="paste"] .how-url-pasted { animation:howPasteValue .14s .36s forwards ease-out; }.how-app-window[data-state="paste"] .how-url-placeholder { animation:howPastePlaceholder .11s .34s forwards ease-out; }.how-app-window[data-state="paste"] .how-url-clear { animation:howFadeIn .12s .42s forwards; }.how-url-action.action-ready { background:#0a84ff; color:#fff; box-shadow:0 0 12px rgba(10,132,255,.34); }.how-url-action.action-pop { animation:howActionPop .41s both; }.how-app-window[data-state="analyze"] .how-url-pasted { opacity:1; transform:none; }.how-app-window[data-state="analyze"] .how-url-placeholder { opacity:0; }.how-app-window[data-state="analyze"] .how-url-clear { opacity:1; }.how-app-window[data-state="analyze"] .how-url-action {
  background:rgba(10,132,255,.14); color:rgba(10,132,255,.58); box-shadow:none; transform:none;
}.how-paste-preview { width:min(650px,calc(100% - 60px)); min-height:78px; margin:16px auto 0; display:flex; align-items:center; gap:12px; padding:10px; border-radius:15px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.095); text-align:left; opacity:0; transform:translateY(8px); }.how-paste-preview > img { width:92px; height:56px; object-fit:cover; border-radius:9px; }.how-paste-preview div { display:flex; flex-direction:column; gap:4px; min-width:0; }.how-paste-preview strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.how-paste-preview span { color:var(--app-muted); font-size:11px; }.how-app-window[data-state="paste"] .how-paste-preview { animation:howPreviewIn .32s 1.28s forwards cubic-bezier(.2,.8,.2,1); }.how-new-hint { margin:14px 0 0; color:var(--app-muted); font-size:11px; }.how-app-window[data-state="paste"] .how-new-hint { animation:howHintFade .25s .35s forwards; }.how-app-window[data-state="analyze"] .how-paste-preview,.how-app-window[data-state="analyze"] .how-new-hint { opacity:0; }.how-result-state { padding:26px 42px 118px; overflow:hidden; }.how-result-scroll { max-width:940px; margin:0 auto; }.how-media-summary { display:grid; grid-template-columns:404px 1fr; gap:24px; align-items:center; }.how-media-summary > img { width:404px; aspect-ratio:16/9; object-fit:cover; border-radius:22px; border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 42px rgba(0,0,0,.18); }.how-media-copy { text-align:left; }.how-media-copy h3 { margin:0 0 8px; font-size:28px; line-height:1.07; letter-spacing:-.038em; }.how-media-copy > strong { display:block; color:#30a0ff; font-size:17px; margin-bottom:9px; }.how-media-copy p { margin:0 0 9px; color:var(--app-secondary); font-size:14px; }.how-media-copy p span { padding:0 5px; color:var(--app-muted); }.how-media-copy small { display:flex; align-items:center; gap:6px; color:var(--app-muted); font-size:11px; }.how-favicon { width:14px; height:14px; border-radius:4px; display:grid; place-items:center; background:#f22; color:white; font-size:7px; }.how-analyzed-source { max-width:940px; height:40px; margin:16px auto 18px; padding:0 12px; display:flex; align-items:center; gap:9px; border-radius:12px; color:var(--app-secondary); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); font-size:11px; }.how-analyzed-source svg { width:15px; height:15px; color:var(--app-muted); }.how-analyzed-source span { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.how-analyzed-source b { font-weight:600; color:#52a9ff; }.how-options-section { max-width:940px; margin:0 auto; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.055); }.how-options-title { padding:13px 16px 10px; font-size:12px; color:var(--app-secondary); font-weight:650; border-bottom:1px solid rgba(255,255,255,.08); }.how-option-row { min-height:48px; padding:8px 14px 8px 16px; display:flex; align-items:center; gap:18px; border-bottom:1px solid rgba(255,255,255,.072); }.how-option-row:last-child { border-bottom:0; }.how-option-row > div { display:flex; flex-direction:column; gap:2px; min-width:0; }.how-option-row strong { font-size:12px; font-weight:600; }.how-option-row small { color:var(--app-muted); font-size:10px; }.how-option-row > span { margin-left:auto; }.how-menu { min-width:84px; height:27px; padding:0 9px; display:grid; place-items:center; border-radius:8px; color:var(--app-secondary); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); font-size:10px; }.how-segmented { display:flex; padding:2px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.085); }.how-segmented b { min-width:54px; padding:5px 9px; border-radius:7px; color:var(--app-muted); font-size:10px; font-weight:600; text-align:center; }.how-segmented b.selected { color:var(--app-text); background:rgba(255,255,255,.11); box-shadow:0 1px 4px rgba(0,0,0,.15); }.how-sticky-download { position:absolute; left:34px; right:34px; bottom:18px; max-width:820px; min-height:58px; margin:auto; display:flex; align-items:center; gap:10px; padding:8px 9px 8px 18px; border-radius:999px; background:rgba(38,43,53,.78); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.09),0 18px 36px rgba(0,0,0,.25); backdrop-filter:blur(24px) saturate(145%); }.how-output-summary { display:flex; flex-direction:column; gap:2px; min-width:0; }.how-output-summary strong { font-size:11px; }.how-output-summary span { color:var(--app-muted); font-size:10px; }.how-folder-button { margin-left:auto; width:34px; height:34px; border:0; border-radius:12px; display:grid; place-items:center; color:var(--app-secondary); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }.how-folder-button svg { width:18px; height:18px; }.how-primary-download { height:40px; padding:0 17px; border:0; border-radius:999px; display:flex; align-items:center; gap:7px; color:white; background:#0a84ff; font:inherit; font-size:12px; font-weight:700; box-shadow:0 8px 20px rgba(10,132,255,.28),inset 0 1px rgba(255,255,255,.22); }.how-primary-download svg { width:15px; height:15px; }.how-app-window[data-state="result"] .how-media-summary { animation:howResultRise .48s .05s both cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="result"] .how-analyzed-source { animation:howResultRise .42s .18s both cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="result"] .how-options-section { animation:howResultRise .46s .28s both cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="result"] .how-sticky-download { animation:howStickyIn .5s .48s both cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="result"] .how-primary-download { animation:howDownloadGlow 2.2s 1.1s ease-in-out infinite; }.how-queue-state { padding:48px 22px 28px; }.how-queue-header { display:flex; align-items:center; gap:20px; padding:0 8px 14px; }.how-queue-header h3 { margin:0 0 2px; font-size:28px; letter-spacing:-.035em; }.how-queue-header p { margin:0; color:var(--app-secondary); font-size:14px; }.how-concurrency { margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--app-secondary); font-size:10px; font-weight:600; }.how-concurrency b { height:28px; min-width:48px; padding:0 9px; display:grid; place-items:center; border-radius:8px; color:var(--app-secondary); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }.how-queue-list { padding-top:4px; }.how-queue-row { display:grid; grid-template-columns:116px 1fr; gap:13px; padding:12px; border-radius:16px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.085); box-shadow:inset 0 1px rgba(255,255,255,.035); }.how-queue-row > img { width:116px; aspect-ratio:16/9; object-fit:cover; border-radius:11px; }.how-queue-details { min-width:0; display:flex; flex-direction:column; gap:9px; padding-top:1px; }.how-queue-topline { display:flex; align-items:flex-start; gap:14px; }.how-queue-topline > div { display:flex; flex-direction:column; gap:4px; min-width:0; }.how-queue-topline strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.how-queue-topline span { color:var(--app-secondary); font-size:10px; }.how-queue-topline span i { padding:0 4px; font-style:normal; color:var(--app-muted); }.how-queue-endcap { margin-left:auto; display:flex; align-items:center; gap:7px; min-height:28px; }.how-queue-endcap > b { color:var(--app-secondary); font-size:10px; font-variant-numeric:tabular-nums; }.how-queue-actions { display:flex; gap:3px; opacity:0; transform:translateX(4px); pointer-events:none; transition:opacity .2s ease,transform .24s ease; }.how-queue-actions button,.how-history-actions button { width:26px; height:26px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.09); color:var(--app-secondary); box-shadow:inset 0 0 0 .6px rgba(255,255,255,.08); font:inherit; font-size:10px; }.how-queue-actions svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }.how-queue-row.queue-complete .how-queue-actions { opacity:1; transform:none; }.how-queue-row.queue-complete .how-queue-topline em { color:var(--app-secondary); }.how-queue-topline em { font-style:normal; }.how-progress-track { height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }.how-progress-track i { display:block; height:100%; width:12%; border-radius:inherit; background:#34c759; box-shadow:0 0 10px rgba(52,199,89,.22); transition:width .1s linear; }.how-queue-details small { color:var(--app-muted); font-size:9px; transition:opacity .2s ease; }.how-app-window[data-state="queue"] .how-queue-row { animation:howResultRise .48s .08s both cubic-bezier(.2,.8,.2,1); }/* Native-style History state */.how-history-state { padding:48px 22px 24px; }.how-history-header { display:flex; align-items:center; gap:20px; padding:0 8px 12px; }.how-history-header h3 { margin:0 0 2px; font-size:28px; letter-spacing:-.035em; }.how-history-header p { margin:0; color:var(--app-secondary); font-size:14px; }.how-history-tools { margin-left:auto; display:flex; align-items:center; gap:10px; }.how-history-search { width:180px; height:29px; padding:0 9px; border-radius:7px; display:flex; align-items:center; gap:6px; color:var(--app-muted); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); font-size:10px; }.how-history-search svg,.how-history-tools button svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.how-history-tools button { height:29px; padding:0 8px; border:0; background:transparent; color:var(--app-secondary); display:flex; align-items:center; gap:5px; font:inherit; font-size:10px; }.how-history-scroll { height:565px; overflow:hidden; padding:0 2px 20px; }.how-history-group { padding:3px 0 0; }.how-history-group + .how-history-group { margin-top:5px; }.how-history-group h4 { margin:0; padding:7px 12px 5px; color:var(--app-muted); font-size:10px; font-weight:650; text-transform:none; }.how-history-row { min-height:70px; display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:14px; background:transparent; opacity:0; transform:translateY(7px); }.how-app-window[data-state="history"] .how-history-row { animation:howHistoryRowIn .38s both cubic-bezier(.2,.8,.2,1); }.how-app-window[data-state="history"] .how-history-row:nth-of-type(1){animation-delay:.06s}.how-app-window[data-state="history"] .how-history-row:nth-of-type(2){animation-delay:.12s}.how-app-window[data-state="history"] .how-history-row:nth-of-type(3){animation-delay:.18s}.how-app-window[data-state="history"] .how-history-group:nth-child(2) .how-history-row:nth-of-type(1){animation-delay:.24s}.how-app-window[data-state="history"] .how-history-group:nth-child(2) .how-history-row:nth-of-type(2){animation-delay:.30s}.how-history-row:hover { background:rgba(255,255,255,.055); }.how-history-artwork { flex:0 0 72px; width:72px; height:48px; object-fit:cover; border-radius:8px; overflow:hidden; }.how-history-artwork.generated { position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:5px; box-sizing:border-box; color:rgba(255,255,255,.86); font-size:8px; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12); }.how-history-artwork.generated::before,.how-history-artwork.generated::after { content:""; position:absolute; border-radius:999px; opacity:.75; }.how-history-artwork.tiktok { background:linear-gradient(145deg,#17151d 0%,#3b304d 52%,#e76978 100%); }.how-history-artwork.tiktok::before{width:42px;height:42px;left:8px;top:5px;background:radial-gradient(circle,#61e7dc,transparent 66%)}.how-history-artwork.instagram { background:linear-gradient(145deg,#55345f,#cf667d 52%,#f2b169); }.how-history-artwork.instagram::before{width:55px;height:18px;left:5px;bottom:5px;background:rgba(255,217,176,.42);transform:rotate(-8deg)}.how-history-artwork.dailymotion { background:linear-gradient(145deg,#071a31,#1461a5 60%,#52abda); }.how-history-artwork.dailymotion::before{width:38px;height:38px;left:10px;top:4px;background:rgba(146,220,255,.22)}.how-history-artwork.bilibili { background:linear-gradient(145deg,#223148,#557a9a 60%,#cf8b8d); }.how-history-artwork.bilibili::before{width:55px;height:15px;left:6px;bottom:7px;background:rgba(235,198,176,.20);transform:rotate(7deg)}.how-history-artwork.generated span { position:relative; z-index:2; padding:2px 4px; border-radius:4px; background:rgba(0,0,0,.38); }.how-history-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }.how-history-copy > strong { font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.how-history-meta,.how-history-file { display:flex; align-items:center; gap:6px; color:var(--app-secondary); font-size:10px; white-space:nowrap; overflow:hidden; }.how-history-file { color:var(--app-muted); font-size:9px; }.how-history-meta i,.how-history-file i { font-style:normal; color:var(--app-muted); }.how-source-icon { width:13px; height:13px; border-radius:4px; display:grid; place-items:center; color:#fff; flex:0 0 13px; font-size:7px; font-weight:800; }.how-source-icon.youtube{background:#ff0033}.how-source-icon.tiktok{background:#111;border:1px solid rgba(255,255,255,.18)}.how-source-icon.instagram{background:linear-gradient(135deg,#7b3dbb,#dd4369,#f2a44c)}.how-source-icon.dailymotion{background:#1689e5}.how-source-icon.bilibili{background:#00a1d6}.how-history-actions { display:flex; gap:3px; opacity:0; transform:translateX(4px); transition:opacity .16s ease,transform .18s ease; }.how-history-row:hover .how-history-actions,.how-app-window[data-state="history"] .how-history-row:first-of-type .how-history-actions { opacity:1; transform:none; }@keyframes howHistoryRowIn { to { opacity:1; transform:none; } }.how-demo-footer { margin:28px auto 0; max-width:940px; text-align:center; }.how-demo-footer > p { min-height:30px; margin:0 0 17px; color:var(--secondary); font-size:16px; transition:opacity .15s ease; }.how-demo-footer > p strong { color:var(--text); }.how-demo-controls { display:flex; justify-content:center; align-items:center; gap:16px; }.how-stepper { display:flex; align-items:flex-start; gap:4px; }.how-stepper button { width:104px; padding:0 6px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:11px; cursor:pointer; }.how-stepper button i { display:block; width:100%; height:3px; margin-bottom:7px; border-radius:999px; background:rgba(127,127,127,.18); overflow:hidden; position:relative; }.how-stepper button i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }.how-stepper button.active { color:var(--text); }.how-stepper button.active i::after { transform:scaleX(1); }.how-replay { height:34px; padding:0 12px; border-radius:999px; display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--glass-subtle); color:var(--secondary); font:inherit; font-size:11px; cursor:pointer; }.how-replay svg { width:14px; height:14px; }@keyframes howPasteValue { to { opacity:1; transform:none; } }@keyframes howPastePlaceholder { to { opacity:0; transform:translateY(-2px); } }@keyframes howFadeIn { to { opacity:1; } }@keyframes howActionPop {
  0%   { transform:scale(1); box-shadow:0 0 12px rgba(10,132,255,.34); }
  38%  { transform:scale(1.085); box-shadow:0 0 22px rgba(10,132,255,.62),0 0 4px rgba(232,247,255,.20); }
  100% { transform:scale(1); box-shadow:0 0 12px rgba(10,132,255,.34); }
}@keyframes howPreviewIn { to { opacity:1; transform:none; } }@keyframes howHintFade { to { opacity:.1; } }@keyframes howResultRise { from { opacity:0; transform:translateY(9px) scale(.995) } to { opacity:1; transform:none } }@keyframes howStickyIn { from { opacity:0; transform:translateY(12px) scale(.985) } to { opacity:1; transform:none } }@keyframes howDownloadGlow { 0%,100%{box-shadow:0 8px 20px rgba(10,132,255,.28),inset 0 1px rgba(255,255,255,.22)} 50%{box-shadow:0 8px 24px rgba(10,132,255,.42),0 0 14px rgba(10,132,255,.22),inset 0 1px rgba(255,255,255,.28)} }@media (prefers-color-scheme: light) {
  .how-real-section { --app-text:#17191d; --app-secondary:rgba(35,39,46,.62); --app-muted:rgba(55,61,70,.42); --app-line:rgba(20,24,30,.10); --app-surface:rgba(255,255,255,.58); --app-sidebar:rgba(235,238,243,.60); --app-selection:rgba(10,132,255,.11); }
  .how-app-window { background:linear-gradient(135deg,rgba(250,251,253,.72),rgba(224,230,239,.69)); border-color:rgba(255,255,255,.75); box-shadow:inset 0 1px rgba(255,255,255,.95),0 42px 100px rgba(38,47,60,.18),0 0 0 1px rgba(60,70,85,.09); }
  .how-url-card,.how-paste-preview,.how-options-section,.how-analyzed-source,.how-queue-row { background:rgba(255,255,255,.45); border-color:rgba(40,50,65,.10); }
  .how-history-search,.how-queue-actions button,.how-history-actions button { background:rgba(255,255,255,.58); border-color:rgba(40,50,65,.10); }
  .how-history-row:hover { background:rgba(255,255,255,.34); }
  .how-sticky-download { background:rgba(247,249,252,.75); border-color:rgba(50,60,75,.10); box-shadow:inset 0 1px rgba(255,255,255,.95),0 18px 36px rgba(50,60,75,.16); }
  .how-option-row,.how-options-title { border-color:rgba(40,50,65,.08); }
  .how-menu,.how-segmented,.how-folder-button,.how-concurrency b { background:rgba(255,255,255,.58); border-color:rgba(40,50,65,.10); }
  .how-segmented b.selected { background:rgba(255,255,255,.9); }
}
@media (max-width: 900px) {
.how-real-section{ padding-top:115px; }
}
@container slurp-preview (max-width: 900px) {
.how-app-window{ height:600px; border-radius:23px; }
.how-app-layout{ grid-template-columns:182px 1fr; }
.how-sidebar-header{ padding-left:18px; }
.how-new-center{ width:min(680px,calc(100% - 44px)); }
.how-result-state{ padding-left:25px; padding-right:25px; }
.how-media-summary{ grid-template-columns:42% 1fr; gap:18px; }
.how-media-summary > img{ width:100%; }
.how-media-copy h3{ font-size:22px; }
}

@media (max-width: 680px) {
.how-real-stage{ width:100%; }
.how-real-heading{ width:min(100% - 28px,1160px); }
.how-demo-controls{ flex-direction:column; gap:12px; }
.how-stepper{ width:100%; justify-content:center; }
.how-stepper button{ width:19%; }
}
@container slurp-preview (max-width: 680px) {
.how-app-window{ height:540px; border-radius:0; border-left:0; border-right:0; }
.how-app-layout{ grid-template-columns:1fr; }
.how-sidebar{ display:none; }
.how-new-center{ width:calc(100% - 30px); }
.how-url-card{ height:54px; padding-left:15px; }
.how-url-value{ font-size:14px; }
.how-result-state{ padding:22px 16px 105px; }
.how-media-summary{ grid-template-columns:1fr; gap:12px; }
.how-media-summary > img{ width:100%; max-height:190px; }
.how-media-copy h3{ font-size:20px; }
.how-media-copy > strong{ font-size:14px; }
.how-options-section{ display:none; }
.how-analyzed-source{ margin-top:12px; }
.how-sticky-download{ left:12px; right:12px; bottom:12px; }
.how-output-summary{ display:none; }
.how-folder-button{ margin-left:auto; }
.how-queue-state, .how-history-state{ padding:34px 14px 20px; }
.how-queue-row{ grid-template-columns:82px 1fr; }
.how-queue-row > img{ width:82px; }
.how-concurrency, .how-history-tools{ display:none; }
.how-history-scroll{ height:450px; }
.how-history-artwork{ flex-basis:62px; width:62px; height:42px; }
.how-history-file{ display:none; }
.how-history-actions{ display:none; }
}
:root[data-theme="light"] .how-app-window { background:linear-gradient(135deg,rgba(250,251,253,.72),rgba(224,230,239,.69)); border-color:rgba(255,255,255,.75); box-shadow:inset 0 1px rgba(255,255,255,.95),0 42px 100px rgba(38,47,60,.18),0 0 0 1px rgba(60,70,85,.09); }:root[data-theme="light"] .how-url-card,
:root[data-theme="light"] .how-paste-preview,
:root[data-theme="light"] .how-options-section,
:root[data-theme="light"] .how-analyzed-source,
:root[data-theme="light"] .how-queue-row { background:rgba(255,255,255,.45); border-color:rgba(40,50,65,.10); }:root[data-theme="light"] .how-history-search,
:root[data-theme="light"] .how-queue-actions button,
:root[data-theme="light"] .how-history-actions button { background:rgba(255,255,255,.58); border-color:rgba(40,50,65,.10); }:root[data-theme="light"] .how-history-row:hover { background:rgba(255,255,255,.34); }:root[data-theme="light"] .how-sticky-download { background:rgba(247,249,252,.75); border-color:rgba(50,60,75,.10); box-shadow:inset 0 1px rgba(255,255,255,.95),0 18px 36px rgba(50,60,75,.16); }:root[data-theme="light"] .how-option-row,
:root[data-theme="light"] .how-options-title { border-color:rgba(40,50,65,.08); }:root[data-theme="light"] .how-menu,
:root[data-theme="light"] .how-segmented,
:root[data-theme="light"] .how-folder-button,
:root[data-theme="light"] .how-concurrency b { background:rgba(255,255,255,.58); border-color:rgba(40,50,65,.10); }:root[data-theme="light"] .how-segmented b.selected { background:rgba(255,255,255,.9); }:root[data-theme="dark"] .ambient { opacity:.42; }:root[data-theme="dark"][data-dark-background="midnight-tide"] .ambient-a { background:rgba(10,132,255,.17); }:root[data-theme="dark"][data-dark-background="midnight-tide"] .ambient-b { background:rgba(90,80,255,.10); }:root[data-theme="dark"][data-dark-background="blue-hour"] .ambient-a { background:rgba(15,116,230,.22); }:root[data-theme="dark"][data-dark-background="blue-hour"] .ambient-b { background:rgba(54,91,184,.14); }:root[data-theme="dark"][data-dark-background="violet-dusk"] .ambient-a { background:rgba(85,72,190,.18); }:root[data-theme="dark"][data-dark-background="violet-dusk"] .ambient-b { background:rgba(162,67,143,.12); }:root[data-theme="dark"][data-dark-background="graphite-glow"] .ambient-a { background:rgba(107,131,160,.11); }:root[data-theme="dark"][data-dark-background="graphite-glow"] .ambient-b { background:rgba(64,86,116,.08); }:root[data-theme="light"] .ambient { opacity:.24; }:root[data-theme="light"] .ambient-a { background:rgba(235,158,157,.25); }:root[data-theme="light"] .ambient-b { background:rgba(112,113,186,.18); }:root[data-theme="light"][data-light-background="peach-bloom"] .ambient-a { background:rgba(250,171,144,.28); }:root[data-theme="light"][data-light-background="lavender-air"] .ambient-a { background:rgba(222,166,175,.18); }:root[data-theme="light"][data-light-background="lavender-air"] .ambient-b { background:rgba(104,111,192,.24); }/* v0.14 — Made for Mac now reuses the real Slurp app recreation --------- */.beauty-app-host { position:relative; z-index:2; }.beauty-app-host .how-app-window {
  --app-text: rgba(247,249,252,.98);
  --app-secondary: rgba(238,242,248,.63);
  --app-muted: rgba(235,240,248,.40);
  --app-line: rgba(255,255,255,.14);
  --app-surface: rgba(255,255,255,.10);
  --app-surface-strong: rgba(255,255,255,.135);
  --app-sidebar: rgba(12,16,24,.33);
  --app-selection: rgba(10,132,255,.14);
  position:relative;
  height: 650px;
  background: rgba(18,22,31,.34);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 50px 120px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.10);
  backdrop-filter: blur(42px) saturate(165%);
  -webkit-backdrop-filter: blur(42px) saturate(165%);
}:root[data-theme="light"] .beauty-app-host .how-app-window {
  --app-text: rgba(25,28,34,.96);
  --app-secondary: rgba(39,45,54,.60);
  --app-muted: rgba(58,65,76,.42);
  --app-line: rgba(28,35,44,.10);
  --app-surface: rgba(255,255,255,.30);
  --app-surface-strong: rgba(255,255,255,.42);
  --app-sidebar: rgba(246,248,251,.31);
  --app-selection: rgba(10,132,255,.11);
  background: rgba(255,255,255,.30);
  border-color: rgba(255,255,255,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.90), 0 50px 115px rgba(64,57,75,.18), 0 0 0 1px rgba(65,70,84,.07);
}.beauty-app-host .how-window-glow { opacity:0; }.beauty-app-host .how-titlebar {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}.beauty-app-host .how-app-main { background: rgba(7,9,14,.10); }:root[data-theme="light"] .beauty-app-host .how-app-main { background: rgba(255,255,255,.07); }.beauty-app-host .how-sidebar {
  background: var(--app-sidebar);
  backdrop-filter: blur(38px) saturate(170%);
  -webkit-backdrop-filter: blur(38px) saturate(170%);
}.beauty-app-host .how-sidebar-header img { width: 26px; height: 26px; }.beauty-app-host .how-sidebar-header strong { font-size: 18px; }.beauty-app-host .how-sidebar-toggle { opacity:.9; }.beauty-app-host .how-paste-preview,
.beauty-app-host .how-new-hint,
.beauty-app-host .how-url-effects,
.beauty-app-host .how-queue-badge,
.beauty-app-host .how-history-actions,
.beauty-app-host .how-queue-actions,
.beauty-app-host .how-steps,
.beauty-app-host .how-stepper { display:none !important; }.beauty-app-host .how-media-summary > img { box-shadow:0 20px 42px rgba(0,0,0,.12); }.beauty-app-host .how-analyzed-source,
.beauty-app-host .how-options-section,
.beauty-app-host .how-sticky-download {
  background: var(--app-surface);
  border-color: rgba(255,255,255,.10);
}:root[data-theme="light"] .beauty-app-host .how-analyzed-source,
:root[data-theme="light"] .beauty-app-host .how-options-section,
:root[data-theme="light"] .beauty-app-host .how-sticky-download {
  border-color: rgba(28,35,44,.10);
}.beauty-app-host .how-url-card {
  background: var(--app-surface);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 18px 38px rgba(0,0,0,.10);
}:root[data-theme="light"] .beauty-app-host .how-url-card { border-color: rgba(28,35,44,.10); }.beauty-app-host .how-sticky-download {
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 18px 36px rgba(0,0,0,.12);
}.beauty-app-host .how-app-window::before {
  content:""; position:absolute; width:520px; height:520px; left:4%; top:5%; border-radius:50%; background:rgba(10,132,255,.17); filter:blur(80px); z-index:-1;
}.beauty-app-host .how-app-window::after {
  content:""; position:absolute; width:460px; height:420px; right:-2%; bottom:-5%; border-radius:50%; background:rgba(121,77,186,.12); filter:blur(78px); z-index:-1;
}:root[data-theme="light"] .beauty-app-host .how-app-window::before { background:rgba(243,176,161,.30); }:root[data-theme="light"] .beauty-app-host .how-app-window::after { background:rgba(119,122,194,.23); }
@container slurp-preview (max-width: 900px) {
.beauty-app-host .how-app-window{ height: 600px; }
.beauty-app-host .how-media-summary{ grid-template-columns: 1fr; }
.beauty-app-host .how-media-summary > img{ width: 100%; max-width: 404px; }
}

@container slurp-preview (max-width: 640px) {
.beauty-app-host .how-app-window{ height: auto; min-height: 560px; }
}
/* v0.15 — clean static real-app state in Made for Mac ------------------- */.beauty-app-host .how-app-window[data-state="beauty"] .how-new-state {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}.beauty-app-host .how-app-window[data-state="beauty"] .how-result-state,
.beauty-app-host .how-app-window[data-state="beauty"] .how-queue-state,
.beauty-app-host .how-app-window[data-state="beauty"] .how-history-state {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
}.beauty-app-host .how-app-window[data-state="beauty"] .how-nav-new {
  background: var(--app-selection);
  color: var(--app-text);
  box-shadow: inset 0 0 0 .75px rgba(255,255,255,.07);
}.beauty-app-host .how-app-window[data-state="beauty"] .how-nav-new .how-nav-icon { color:#2196ff; }.beauty-app-host .how-app-window[data-state="beauty"] .how-nav-queue,
.beauty-app-host .how-app-window[data-state="beauty"] .how-nav-history {
  background: transparent;
  color: var(--app-secondary);
  box-shadow: none;
}.beauty-app-host .how-app-window[data-state="beauty"] .how-url-placeholder {
  opacity: 1 !important;
  transform: none !important;
}.beauty-app-host .how-app-window[data-state="beauty"] .how-url-pasted,
.beauty-app-host .how-app-window[data-state="beauty"] .how-url-clear {
  opacity: 0 !important;
  animation: none !important;
}.beauty-app-host .how-app-window[data-state="beauty"] .how-url-action {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  box-shadow: none;
  transform: none;
}:root[data-theme="light"] .beauty-app-host .how-app-window[data-state="beauty"] .how-url-action {
  background: rgba(30,40,55,.07);
  color: rgba(35,45,60,.32);
}.beauty-app-host .how-app-window[data-state="beauty"] .how-paste-preview,
.beauty-app-host .how-app-window[data-state="beauty"] .how-new-hint,
.beauty-app-host .how-app-window[data-state="beauty"] .how-url-effects {
  display: none !important;
}/* v0.16 — local theme switch in Made for Mac ----------------------------- */.beauty-appearance-control {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--glass-subtle);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}.beauty-appearance-label {
  font-size: 12px;
  font-weight: 620;
  color: var(--muted);
  white-space: nowrap;
}.beauty-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(127,127,127,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}.beauty-theme-option {
  height: 34px;
  min-width: 76px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}.beauty-theme-option:hover { color: var(--text); }.beauty-theme-option[aria-pressed="true"] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: inset 0 1px var(--highlight), 0 6px 18px rgba(0,0,0,.10);
}@media (max-width: 640px) {
  .beauty-appearance-control {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: 22px;
    width: min(100%, 320px);
    margin-inline: auto;
  }
  .beauty-appearance-label { text-align: center; }
  .beauty-theme-switch { justify-content: center; }
}/* v0.17 — unified appearance/background controls in Made for Mac -------- */.beauty-customize {
  margin: 24px auto 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}.beauty-customize .beauty-appearance-control {
  margin-top: 0;
}.beauty-background-control {
  display: flex;
  align-items: center;
}.beauty-customize .background-picker {
  height: 44px;
  padding: 0 10px 0 12px;
  background: var(--glass-subtle);
  border-color: var(--line);
  box-shadow: inset 0 1px var(--highlight);
}.beauty-customize .background-picker label {
  font-size: 12px;
}.beauty-customize .background-picker select {
  min-width: 118px;
}.site-header .background-picker {
  display: none !important;
}@media (max-width: 650px) {
  .beauty-customize {
    width: min(100%, 340px);
    flex-direction: column;
    align-items: stretch;
  }

  .beauty-customize .beauty-appearance-control,
  .beauty-background-control,
  .beauty-customize .background-picker {
    width: 100%;
  }

  .beauty-customize .background-picker {
    justify-content: center;
  }

  .beauty-customize .background-picker select {
    min-width: 132px;
  }
}/* v0.18 — top-of-page redesign ----------------------------------------- */.site-header {
  height: 96px;
  gap: 26px;
}.brand {
  gap: 14px;
  font-size: 24px;
  font-weight: 730;
  letter-spacing: -.035em;
}.brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-left: 18px;
  font-size: 15px;
}.nav-links,
.nav-controls {
  display: flex;
  align-items: center;
  gap: 22px;
}.nav-links {
  justify-content: center;
  flex: 1;
}.nav-controls {
  flex: 0 0 auto;
  gap: 14px;
}.nav-cta {
  height: 44px;
  padding: 0 18px;
  font-weight: 660;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.theme-option-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  flex: 0 0 16px;
}.theme-option-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}.beauty-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-subtle);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px var(--highlight);
}.beauty-theme-option {
  height: 36px;
  min-width: 84px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}.site-header .beauty-theme-switch {
  padding: 4px;
}.site-header .beauty-theme-option {
  min-width: 92px;
  height: 38px;
}.site-header .beauty-theme-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1.5px rgba(10,132,255,.88), 0 6px 16px rgba(10,132,255,.12);
}.beauty-appearance-control {
  margin-top: 0;
}.hero {
  padding: 46px 0 76px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 56px;
  position: relative;
}.hero::before {
  left: 9%;
  top: 18px;
  transform: none;
  width: min(680px, 60vw);
  height: 460px;
  background: radial-gradient(ellipse, rgba(10,132,255,.10) 0%, rgba(10,132,255,.028) 45%, transparent 72%);
}.hero-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}.hero-app-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.18);
}.hero-lockup-copy strong {
  display: block;
  font-size: clamp(38px, 4.4vw, 48px);
  line-height: .96;
  letter-spacing: -.06em;
}.hero-lockup-copy span {
  display: block;
  margin-top: 6px;
  color: var(--secondary);
  font-size: 16px;
  letter-spacing: -.02em;
}.hero h1 {
  margin: 0 0 18px;
  max-width: 780px;
  font-size: clamp(64px, 7.2vw, 94px);
  line-height: .92;
  letter-spacing: -.072em;
}.hero-copy {
  margin: 0;
  max-width: 690px;
  color: var(--secondary);
  font-size: clamp(19px, 1.95vw, 24px);
  line-height: 1.42;
  letter-spacing: -.022em;
}.hero-meta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}.hero-chip {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font-size: 13px;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}.hero-chip strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}.hero-cta-panel {
  padding: 24px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}.hero-cta-copy h2 {
  margin: 12px 0 10px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.05em;
}.hero-cta-copy p {
  margin: 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.6;
}.hero-cta-buttons {
  display: grid;
  gap: 12px;
}.hero-cta-buttons .button {
  width: 100%;
  height: 56px;
  font-size: 16px;
}.hero-cta-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}.platform-note,
.hero-product,
.hero-icon {
  display: none !important;
}.trust-strip {
  margin-top: 34px;
}@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-cta-panel {
    max-width: 460px;
  }
}@media (max-width: 900px) {
  .site-header {
    height: auto;
    padding: 18px 0 10px;
    align-items: flex-start;
  }
  nav {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .nav-links {
    justify-content: center;
    order: 2;
  }
  .nav-controls {
    justify-content: space-between;
  }
  .hero {
    padding-top: 32px;
  }
}@media (max-width: 640px) {
  .brand {
    font-size: 22px;
  }
  .brand img {
    width: 42px;
    height: 42px;
  }
  .nav-controls {
    flex-wrap: wrap;
    gap: 10px;
  }
  .site-header .beauty-theme-switch,
  .nav-cta {
    width: 100%;
    justify-content: center;
  }
  .site-header .beauty-theme-option {
    flex: 1 1 0;
    min-width: 0;
  }
  .hero-lockup {
    gap: 14px;
    margin-bottom: 22px;
  }
  .hero-app-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }
  .hero-meta {
    gap: 8px;
  }
  .hero-chip {
    width: 100%;
    justify-content: space-between;
  }
  .hero-cta-panel {
    padding: 20px;
  }
}/* v0.19 — unify appearance controls as a true segmented slider ----------- */.beauty-theme-switch {
  position: relative;
  isolation: isolate;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-subtle);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px var(--highlight), 0 10px 24px rgba(0,0,0,.06);
}.beauty-theme-option {
  position: relative;
  z-index: 1;
  min-width: 92px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 670;
  letter-spacing: -.01em;
  color: var(--secondary);
}.beauty-theme-option .theme-option-icon {
  opacity: .88;
  transform: translateY(-.2px);
}.beauty-theme-option[aria-pressed="true"] {
  background: color-mix(in srgb, var(--glass-strong) 90%, white 10%);
  color: var(--text);
  box-shadow: inset 0 1px var(--highlight), 0 6px 18px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.05);
}:root[data-theme="light"] .beauty-theme-option[aria-pressed="true"] {
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 6px 18px rgba(86,74,95,.08), 0 0 0 1px rgba(72,76,88,.06);
}.header-theme-switch {
  padding: 4px;
}.header-theme-switch .beauty-theme-option {
  min-width: 88px;
  height: 36px;
  padding-inline: 14px;
}.beauty-appearance-control .beauty-theme-switch .beauty-theme-option {
  min-width: 98px;
  height: 38px;
}@media (max-width: 640px) {
  .header-theme-switch,
  .beauty-appearance-control .beauty-theme-switch {
    width: 100%;
  }
  .header-theme-switch .beauty-theme-option,
  .beauty-appearance-control .beauty-theme-switch .beauty-theme-option {
    flex: 1 1 0;
    min-width: 0;
  }
}/* v0.20 — Compact Mode showcase ----------------------------------------- */.compact-section {
  position: relative;
  padding: 145px 0 135px;
  overflow: hidden;
}.compact-section::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 560px;
  right: -180px;
  top: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,132,255,.15), rgba(10,132,255,.035) 45%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}.compact-shell {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}.compact-copy h2 {
  margin: 12px 0 18px;
  max-width: 560px;
  font-size: clamp(46px, 5.7vw, 70px);
  line-height: .98;
  letter-spacing: -.06em;
}.compact-copy h2 span {
  color: var(--secondary);
}.compact-copy > p {
  max-width: 520px;
  margin: 0;
  color: var(--secondary);
  font-size: 18px;
  line-height: 1.55;
}.compact-points {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}.compact-points span {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-subtle);
  color: var(--secondary);
  font-size: 12px;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}.compact-mode-switch {
  width: fit-content;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
}.compact-mode-option {
  height: 38px;
  min-width: 96px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 660;
  cursor: pointer;
  transition: background .22s ease, color .18s ease, box-shadow .22s ease, transform .18s ease;
}.compact-mode-option[aria-pressed="true"] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: inset 0 1px var(--highlight), 0 7px 18px rgba(0,0,0,.09);
}.compact-stage {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.compact-demo {
  width: min(100%, 780px);
  height: 480px;
  transition: width .62s cubic-bezier(.22,.8,.2,1), height .62s cubic-bezier(.22,.8,.2,1), transform .62s cubic-bezier(.22,.8,.2,1);
}.compact-demo[data-mode="compact"] {
  width: min(100%, 570px);
  height: 250px;
  transform: translateY(8px);
}.compact-window {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 27px;
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: inset 0 1px var(--highlight), 0 34px 86px var(--shadow), 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(36px) saturate(150%);
  -webkit-backdrop-filter: blur(36px) saturate(150%);
  transition: border-radius .55s ease, background .35s ease, box-shadow .35s ease;
}.compact-demo[data-mode="compact"] .compact-window {
  border-radius: 24px;
}.compact-titlebar {
  height: 54px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--glass-subtle);
  transition: height .5s cubic-bezier(.22,.8,.2,1), border-color .3s ease;
}.compact-demo[data-mode="compact"] .compact-titlebar {
  height: 47px;
}.compact-traffic-lights {
  display: flex;
  gap: 8px;
  padding-left: 17px;
}.compact-traffic-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18);
}.compact-traffic-lights i:nth-child(1){background:#ff5f57}.compact-traffic-lights i:nth-child(2){background:#febc2e}.compact-traffic-lights i:nth-child(3){background:#28c840}.compact-titlebar-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .3s ease;
}.compact-titlebar-brand img {
  width: 21px;
  height: 21px;
  border-radius: 50%;
}.compact-titlebar-brand strong {
  font-size: 12px;
  font-weight: 670;
}.compact-demo[data-mode="compact"] .compact-titlebar-brand {
  opacity: 1;
  transform: none;
}.compact-settings {
  justify-self: end;
  margin-right: 11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--secondary);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .25s ease, transform .3s ease, background .18s ease;
}.compact-settings svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}.compact-demo[data-mode="compact"] .compact-settings {
  opacity: 1;
  transform: none;
}.compact-full-state,
.compact-mini-state {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 54px;
  transition: opacity .32s ease, transform .5s cubic-bezier(.22,.8,.2,1);
}.compact-full-state {
  display: grid;
  grid-template-columns: 190px 1fr;
  opacity: 1;
  transform: none;
}.compact-demo[data-mode="compact"] .compact-full-state {
  opacity: 0;
  transform: scale(.94) translateY(-10px);
  pointer-events: none;
}.compact-full-sidebar {
  display: flex;
  flex-direction: column;
  padding: 18px 12px 12px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}.compact-full-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px 11px;
}.compact-full-brand img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}.compact-full-brand strong { font-size: 17px; letter-spacing: -.025em; }.compact-full-divider { height: 1px; margin: 0 7px 10px; background: var(--line); }.compact-full-spacer { flex: 1; }.compact-full-nav {
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--secondary);
  font-size: 12px;
}.compact-full-nav + .compact-full-nav { margin-top: 3px; }.compact-full-nav span { width: 16px; text-align: center; }.compact-full-nav b { font-weight: 520; }.compact-full-nav.active {
  background: var(--blue-soft);
  color: var(--text);
}.compact-full-main {
  padding: 96px 42px 38px;
  text-align: center;
}.compact-full-main h3,
.compact-mini-copy h3 {
  margin: 0 0 6px;
  font-size: 25px;
  letter-spacing: -.04em;
}.compact-full-main p,
.compact-mini-copy p {
  margin: 0;
  color: var(--secondary);
  font-size: 13px;
}.compact-full-url {
  width: min(100%, 520px);
  height: 56px;
  margin: 24px auto 0;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  box-shadow: inset 0 1px var(--highlight), 0 14px 28px rgba(0,0,0,.08);
}.compact-full-url > span { color: var(--muted); }.compact-full-url b { flex: 1; color: var(--muted); font-size: 13px; font-weight: 500; }.compact-full-url i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(127,127,127,.10);
  color: var(--muted);
  font-style: normal;
}.compact-mini-state {
  top: 47px;
  padding: 20px 22px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  opacity: 0;
  transform: scale(1.04) translateY(10px);
  pointer-events: none;
}.compact-demo[data-mode="compact"] .compact-mini-state {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: .16s;
}.compact-mini-copy {
  grid-column: 1 / -1;
  text-align: left;
}.compact-mini-copy h3 { font-size: 20px; margin-bottom: 3px; }.compact-mini-copy p { font-size: 11px; }.compact-mini-url {
  height: 48px;
  min-width: 0;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,132,255,.28);
  background: var(--glass-strong);
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: inset 0 1px var(--highlight), 0 8px 22px rgba(10,132,255,.08);
}.compact-link-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}.compact-mini-url > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 12px;
}.compact-mini-url > button {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
}.compact-download {
  height: 48px;
  min-width: 116px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  box-shadow: 0 10px 28px rgba(10,132,255,.28), inset 0 1px rgba(255,255,255,.24);
}.compact-mini-status {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 10px;
  justify-self: start;
}.compact-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 8px rgba(52,199,89,.30);
}.compact-stage-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 12px;
}@media (max-width: 980px) {
  .compact-shell {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .compact-copy { text-align: center; }
  .compact-copy h2,
  .compact-copy > p { margin-left: auto; margin-right: auto; }
  .compact-points,
  .compact-mode-switch { justify-content: center; }
  .compact-mode-switch { margin-left: auto; margin-right: auto; }
  .compact-stage { min-height: 500px; }
}@media (max-width: 640px) {
  .compact-section { padding: 110px 0 100px; }
  .compact-demo,
  .compact-demo[data-mode="compact"] {
    width: 100%;
  }
  .compact-demo { height: 430px; }
  .compact-demo[data-mode="compact"] { height: 265px; }
  .compact-full-state { grid-template-columns: 1fr; }
  .compact-full-sidebar { display: none; }
  .compact-full-main { padding: 90px 20px 30px; }
  .compact-mini-state {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .compact-download { width: 100%; }
}/* v0.21 — real wallpaper bleed-through in Slurp previews -----------------
   These two showcases now use the selected page wallpaper as the actual
   material backdrop instead of covering it with an opaque app gradient. *//* Keep the product sections themselves transparent so the fixed page
   wallpaper is physically behind the app windows. */.how-real-section,
.beauty-section,
.how-real-stage,
.beauty-stage,
:is(#how-demo, #compact .compact-full-app-host),
.beauty-app-host {
  background: transparent;
}/* The old decorative glows overwhelmed the chosen wallpaper. Keep only a
   faint atmospheric lift around the window. */.how-real-section::before {
  opacity: .20;
  filter: blur(72px);
}.beauty-atmosphere {
  opacity: .22;
}:root[data-theme="light"] .beauty-atmosphere-a,
:root[data-theme="light"] .beauty-atmosphere-b {
  opacity: .24;
}/* THIS IS SLURP — actual translucent macOS-style material. */:is(#how-demo, #compact .compact-full-app-host) .how-app-window {
  --app-surface: rgba(255,255,255,.070);
  --app-surface-strong: rgba(255,255,255,.105);
  --app-sidebar: rgba(11,15,22,.235);

  background: linear-gradient(
    135deg,
    rgba(28,34,45,.28),
    rgba(11,14,20,.22)
  );
  border-color: rgba(255,255,255,.17);
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    0 42px 100px rgba(0,0,0,.27),
    0 0 0 1px rgba(0,0,0,.10);
  backdrop-filter: blur(44px) saturate(172%);
  -webkit-backdrop-filter: blur(44px) saturate(172%);
}/* Let the titlebar and sidebar visibly borrow color from whatever wallpaper
   is underneath them, like real macOS materials. */:is(#how-demo, #compact .compact-full-app-host) .how-titlebar {
  background: rgba(255,255,255,.018);
  backdrop-filter: blur(34px) saturate(175%);
  -webkit-backdrop-filter: blur(34px) saturate(175%);
}:is(#how-demo, #compact .compact-full-app-host) .how-sidebar {
  background: rgba(12,16,23,.24);
  backdrop-filter: blur(42px) saturate(185%);
  -webkit-backdrop-filter: blur(42px) saturate(185%);
}:is(#how-demo, #compact .compact-full-app-host) .how-app-main {
  background: rgba(5,8,13,.055);
}/* Keep inner controls readable, but still transparent enough for the
   wallpaper hue to pass through them. */:is(#how-demo, #compact .compact-full-app-host) .how-url-card,
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview,
:is(#how-demo, #compact .compact-full-app-host) .how-options-section,
:is(#how-demo, #compact .compact-full-app-host) .how-analyzed-source,
:is(#how-demo, #compact .compact-full-app-host) .how-queue-row,
:is(#how-demo, #compact .compact-full-app-host) .how-history-search,
:is(#how-demo, #compact .compact-full-app-host) .how-queue-actions button,
:is(#how-demo, #compact .compact-full-app-host) .how-history-actions button,
:is(#how-demo, #compact .compact-full-app-host) .how-menu,
:is(#how-demo, #compact .compact-full-app-host) .how-segmented,
:is(#how-demo, #compact .compact-full-app-host) .how-folder-button,
:is(#how-demo, #compact .compact-full-app-host) .how-concurrency b {
  background: rgba(255,255,255,.070);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}:is(#how-demo, #compact .compact-full-app-host) .how-sticky-download {
  background: rgba(28,34,43,.43);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
}/* Light appearance uses a milkier material rather than an opaque white
   window, so peach/lavender wallpaper remains clearly visible through it. */:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-app-window {
  --app-surface: rgba(255,255,255,.22);
  --app-surface-strong: rgba(255,255,255,.30);
  --app-sidebar: rgba(247,249,252,.245);

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.31),
    rgba(242,245,250,.21)
  );
  border-color: rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px rgba(255,255,255,.86),
    0 42px 100px rgba(62,54,72,.15),
    0 0 0 1px rgba(66,72,84,.06);
  backdrop-filter: blur(46px) saturate(160%);
  -webkit-backdrop-filter: blur(46px) saturate(160%);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-titlebar {
  background: rgba(255,255,255,.10);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-sidebar {
  background: rgba(247,249,252,.25);
  border-right-color: rgba(35,42,52,.09);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-app-main {
  background: rgba(255,255,255,.055);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-url-card,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-paste-preview,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-options-section,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-analyzed-source,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-queue-row,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-history-search,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-queue-actions button,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-history-actions button,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-menu,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-segmented,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-folder-button,
:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-concurrency b {
  background: rgba(255,255,255,.30);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-sticky-download {
  background: rgba(250,251,253,.46);
}/* AT HOME ON YOUR MAC — make the showcase even more transparent because
   this section is specifically about materials and wallpaper interaction. */.beauty-app-host .how-app-window {
  --app-surface: rgba(255,255,255,.065);
  --app-surface-strong: rgba(255,255,255,.095);
  --app-sidebar: rgba(10,14,21,.205);

  background: rgba(14,18,26,.205);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px rgba(255,255,255,.15),
    0 50px 120px rgba(0,0,0,.24),
    0 0 0 1px rgba(0,0,0,.08);
  backdrop-filter: blur(48px) saturate(185%);
  -webkit-backdrop-filter: blur(48px) saturate(185%);
}.beauty-app-host .how-titlebar {
  background: rgba(255,255,255,.020);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
}.beauty-app-host .how-sidebar {
  background: rgba(10,14,21,.21);
  backdrop-filter: blur(46px) saturate(195%);
  -webkit-backdrop-filter: blur(46px) saturate(195%);
}.beauty-app-host .how-app-main {
  background: rgba(5,8,13,.035);
}/* Remove the fake color blobs from *inside* the app. The selected wallpaper
   itself should now supply the ambient color. */.beauty-app-host .how-app-window::before,
.beauty-app-host .how-app-window::after {
  opacity: 0 !important;
}/* The New Download URL field remains a glass layer, not a solid card. */.beauty-app-host .how-url-card,
.beauty-app-host .how-analyzed-source,
.beauty-app-host .how-options-section,
.beauty-app-host .how-sticky-download {
  background: rgba(255,255,255,.072);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}.beauty-app-host .how-sticky-download {
  background: rgba(28,34,43,.37);
}/* Light Made-for-Mac material. */:root[data-theme="light"] .beauty-app-host .how-app-window {
  --app-surface: rgba(255,255,255,.23);
  --app-surface-strong: rgba(255,255,255,.31);
  --app-sidebar: rgba(248,250,253,.225);

  background: rgba(255,255,255,.225);
  border-color: rgba(255,255,255,.64);
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    0 50px 115px rgba(64,57,75,.14),
    0 0 0 1px rgba(65,70,84,.055);
  backdrop-filter: blur(50px) saturate(172%);
  -webkit-backdrop-filter: blur(50px) saturate(172%);
}:root[data-theme="light"] .beauty-app-host .how-titlebar {
  background: rgba(255,255,255,.09);
}:root[data-theme="light"] .beauty-app-host .how-sidebar {
  background: rgba(248,250,253,.23);
}:root[data-theme="light"] .beauty-app-host .how-app-main {
  background: rgba(255,255,255,.035);
}:root[data-theme="light"] .beauty-app-host .how-url-card,
:root[data-theme="light"] .beauty-app-host .how-analyzed-source,
:root[data-theme="light"] .beauty-app-host .how-options-section,
:root[data-theme="light"] .beauty-app-host .how-sticky-download {
  background: rgba(255,255,255,.29);
}/* v0.22 — richer mini-Slurp feature UI ---------------------------------- */.feature-link-card,
.feature-quality-card,
.feature-queue-card,
.feature-browser-card {
  min-height: 390px;
}.feature-real-url {
  gap: 10px;
}.feature-url-source {
  width: 27px;
  height: 27px;
  flex: 0 0 27px !important;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,0,0,.10);
  color: #ff453a;
  font-size: 10px;
}.feature-real-url > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Quality/content chooser */.feature-choice-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 27px;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid var(--line);
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}.feature-choice-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1px 10px;
  font-size: 11px;
  font-weight: 650;
  color: var(--secondary);
}.feature-choice-heading small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 560;
}.feature-choice-panel .quality-pills {
  position: static;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}.feature-choice-panel .quality-pills span,
.content-pills span {
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(127,127,127,.06);
  color: var(--secondary);
  font-size: 10px;
  line-height: 1;
}.feature-choice-panel .quality-pills span:first-child {
  background: rgba(127,127,127,.06);
  color: var(--secondary);
  border-color: var(--line);
}.feature-choice-panel .quality-pills span.selected,
.content-pills span.selected {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: rgba(10,132,255,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}.content-pills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}/* Realistic queue rows */.mini-queue {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  gap: 7px;
}.mini-queue-row {
  min-height: 56px;
  padding: 7px 10px 7px 7px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}.mini-queue-thumb {
  width: 52px;
  height: 40px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}.mini-queue-thumb.thumb-one {
  background-image:
    linear-gradient(135deg, rgba(9,26,48,.12), rgba(76,145,210,.10)),
    url("/assets/demo-video.webp");
}.mini-queue-thumb.thumb-two {
  background:
    radial-gradient(circle at 68% 35%, rgba(255,220,176,.95), transparent 22%),
    linear-gradient(145deg, #587aa3, #d19f7c 55%, #7a5d65);
}.mini-queue-thumb.thumb-three {
  background:
    linear-gradient(135deg, rgba(10,132,255,.42), rgba(130,94,210,.42)),
    linear-gradient(155deg, #222a37, #11151c);
}.mini-queue-info {
  min-width: 0;
  display: grid;
  gap: 7px;
}.mini-queue-info > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}.mini-queue-info strong {
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.mini-queue-info span {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}.mini-queue-row > small {
  min-width: 36px;
  text-align: right;
  color: var(--secondary);
  font-size: 9px;
}.mini-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(127,127,127,.13);
  overflow: hidden;
}.mini-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: #34c759;
}.mini-queue-row.queued {
  opacity: .72;
}.mini-queue-row.queued .mini-progress i {
  background: transparent;
}/* Browser companion icons */.browser-row {
  right: 28px;
  align-items: stretch;
}.browser-row .browser-chip {
  min-width: 0;
  flex: 1 1 0;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}.browser-row .browser-chip em {
  font-style: normal;
  color: var(--secondary);
  font-size: 10px;
  white-space: nowrap;
}.browser-logo {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.10);
}/* Safari-style compass */.safari-logo {
  background: radial-gradient(circle at 50% 50%, #6bc7ff 0 58%, #198cff 60% 100%);
}.safari-logo::before,
.safari-logo::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 3px;
  width: 3px;
  height: 19px;
  border-radius: 999px;
  transform-origin: 50% 50%;
}.safari-logo::before {
  background: linear-gradient(#ff5148 0 48%, #f5f7fa 48% 52%, #f5f7fa 52% 100%);
  transform: rotate(38deg);
}.safari-logo::after {
  width: 15px;
  height: 15px;
  left: 5px;
  top: 5px;
  border: 1px solid rgba(255,255,255,.72);
  background: transparent;
}/* Chrome-style tri-color wheel */.chrome-logo {
  background: conic-gradient(#ea4335 0 33.333%, #fbbc05 0 66.666%, #34a853 0 100%);
}.chrome-logo::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #4285f4;
  box-shadow: 0 0 0 2px rgba(255,255,255,.78);
}/* Firefox-style warm fox around a cool center */.firefox-logo {
  background:
    radial-gradient(circle at 55% 54%, #465adf 0 35%, #29308c 36% 51%, transparent 52%),
    conic-gradient(from 220deg, #ff7139 0 22%, #ff9d23 22% 48%, #ff4f42 48% 68%, #a73bd7 68% 88%, #ff7139 88% 100%);
}.firefox-logo::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 9px;
  right: 0px;
  top: 2px;
  border-radius: 70% 10% 70% 20%;
  background: #ff8a2a;
  transform: rotate(24deg);
}@media (max-width: 850px) {
  .feature-link-card,
  .feature-quality-card,
  .feature-queue-card,
  .feature-browser-card {
    min-height: 380px;
  }
}@media (max-width: 560px) {
  .feature-choice-panel,
  .mini-queue {
    left: 22px;
    right: 22px;
  }
  .browser-row {
    left: 22px;
    right: 22px;
  }
  .browser-row .browser-chip {
    padding-inline: 8px;
    gap: 6px;
  }
  .browser-row .browser-chip em {
    font-size: 9px;
  }
}/* v0.23 — hierarchy and launch refinement -------------------------------- *//* Header: no secondary Slurp lockup; navigation becomes the entire bar. */.site-header {
  height: 86px;
  justify-content: stretch;
}.site-header nav {
  width: 100%;
  margin-left: 0;
}.site-header .nav-links {
  flex: 1;
  justify-content: flex-start;
}.site-header .nav-controls {
  margin-left: auto;
}/* Hero: one large, unmistakable product identity. */.hero {
  padding-top: 56px;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 68px;
}.hero-lockup {
  align-items: center;
  gap: 26px;
  margin-bottom: 34px;
}.hero-app-icon {
  width: 156px;
  height: 156px;
  border-radius: 38px;
  flex: 0 0 156px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.2);
}.hero-lockup-copy strong {
  font-size: clamp(54px, 5.8vw, 72px);
}.hero-lockup-copy span {
  margin-top: 9px;
  font-size: 18px;
}.hero h1 {
  font-size: clamp(60px, 6.4vw, 86px);
}.hero-copy {
  max-width: 720px;
}.hero-cta-panel {
  padding: 25px;
}.hero-cta-copy h2 {
  font-size: 36px;
}.hero-cta-copy p {
  font-size: 13px;
}.hero-cta-note {
  padding-top: 2px;
}/* Concrete platform proof replaces generic marketing traits. */.platform-strip {
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 34px;
}.platform-strip-copy {
  display: grid;
  gap: 5px;
}.platform-strip-copy strong {
  font-size: 14px;
}.platform-strip-copy span {
  color: var(--muted);
  font-size: 11px;
}.platform-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}.platform-list span {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-subtle);
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 620;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}.platform-list .platform-more {
  color: var(--muted);
  border-style: dashed;
}/* Put the real app immediately after the opening product pitch. */.how-real-section {
  padding-top: 130px;
}#features.section {
  padding-top: 145px;
}/* Feature visuals now share one native-style line icon system. */.feature-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}.feature-wide {
  grid-column: 1 / -1;
  min-height: 270px;
}.feature-wide p {
  max-width: 760px;
}.feature-wide .engine-line {
  max-width: 760px;
}/* Wallpaper selection is visual rather than an internal-looking dropdown. */.wallpaper-picker {
  height: 54px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}.wallpaper-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}.wallpaper-swatches {
  display: flex;
  align-items: center;
  gap: 7px;
}:root[data-theme="dark"] .light-wallpaper-swatches { display: none; }:root[data-theme="light"] .dark-wallpaper-swatches { display: none; }.wallpaper-swatch {
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.34);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 3px 8px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}.wallpaper-swatch:hover { transform: scale(1.06); }.wallpaper-swatch[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--blue),
    0 4px 10px rgba(0,0,0,.14);
}.wallpaper-dubai { background: linear-gradient(135deg,#f0b5a5,#a0a0d0); }.wallpaper-peach { background: linear-gradient(135deg,#fac0a9,#cbb6d3); }.wallpaper-lavender { background: linear-gradient(135deg,#e5bab5,#858bcd); }.wallpaper-contours { background: linear-gradient(135deg,#eeb4aa 0 48%,#8f86bc 52% 100%); }.wallpaper-midnight { background: linear-gradient(135deg,#122b4c,#261d3e); }.wallpaper-bluehour { background: linear-gradient(135deg,#0b376d,#244c96); }.wallpaper-violet { background: linear-gradient(135deg,#342b77,#783c73); }.wallpaper-graphite { background: linear-gradient(135deg,#303943,#14191f); }/* Privacy: concrete facts rather than a broad promise. */.privacy-facts {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}.privacy-facts li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}.privacy-facts strong {
  font-size: 12px;
  color: var(--text);
}.privacy-facts span {
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.5;
}/* FAQ */.faq-section {
  padding-top: 150px;
}.faq-grid {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}.faq-grid details {
  border-bottom: 1px solid var(--line);
}.faq-grid summary {
  min-height: 68px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.02em;
}.faq-grid summary::-webkit-details-marker { display: none; }.faq-grid summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--secondary);
  background: var(--glass-subtle);
  transition: transform .2s ease;
}.faq-grid details[open] summary::after {
  transform: rotate(45deg);
}.faq-grid details p {
  max-width: 780px;
  margin: -2px 0 22px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.65;
}/* Download is now consistently launched. */.download-card .download-now-placeholder {
  min-width: 138px;
}.download-card .button.disabled {
  opacity: 1;
}.download-section {
  padding-top: 140px;
}/* Footer can carry secondary trust/support navigation. */.footer-links {
  flex-wrap: wrap;
  justify-content: flex-end;
}/* Tablet/mobile adjustments */@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-cta-panel {
    max-width: 520px;
  }
  .platform-strip {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .platform-list {
    justify-content: flex-start;
  }
}@media (max-width: 700px) {
  .site-header .nav-links {
    display: none;
  }
  .site-header nav {
    justify-content: flex-end;
  }
  .hero-app-icon {
    width: 118px;
    height: 118px;
    flex-basis: 118px;
    border-radius: 29px;
  }
  .hero-lockup-copy strong {
    font-size: 48px;
  }
  .hero-lockup-copy span {
    font-size: 14px;
  }
  .wallpaper-picker {
    width: 100%;
    justify-content: center;
  }
  .privacy-facts li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}@media (max-width: 520px) {
  .hero-lockup {
    align-items: flex-start;
  }
  .hero-app-icon {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
    border-radius: 24px;
  }
  .hero-lockup-copy strong {
    font-size: 42px;
  }
  .platform-list span {
    height: 32px;
    padding-inline: 10px;
  }
}/* v0.24 — match Slurp's real hidden-titlebar window architecture -------- *//* Main / At Home app recreations: native traffic lights float directly on
   the continuous material. There is no full-width titlebar band. */.how-traffic-lights {
  position: absolute;
  left: 17px;
  top: 18px;
  z-index: 12;
  display: flex;
  gap: 8px;
  pointer-events: none;
}/* The sidebar itself extends underneath the native traffic-light region. */.how-sidebar {
  padding-top: 42px;
}/* Explicitly neutralize any historical titlebar styling still present in
   earlier stylesheet layers. The element is removed in v0.24, but keeping
   this guard prevents a cloned/legacy fragment from recreating the strip. */.how-titlebar,
:is(#how-demo, #compact .compact-full-app-host) .how-titlebar,
.beauty-app-host .how-titlebar {
  display: none !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}/* Compact Mode uses the same edge-to-edge hidden-titlebar concept. */.compact-titlebar {
  display: none !important;
}.compact-traffic-lights {
  position: absolute;
  left: 17px;
  top: 17px;
  z-index: 12;
  padding-left: 0;
  display: flex;
  gap: 8px;
  pointer-events: none;
}/* Full-size side of the Compact Mode comparison now occupies the entire
   window. Only its sidebar reserves the native traffic-light safe area. */.compact-full-state,
.compact-mini-state {
  top: 0;
}.compact-full-sidebar {
  padding-top: 58px;
}.compact-full-main {
  padding-top: 96px;
}/* Compact mini-player has no header or centered Slurp lockup. Its actual
   content sits under the clear titlebar region while the material continues
   uninterrupted beneath the traffic lights. */.compact-mini-state {
  top: 0;
  padding-top: 50px;
}.compact-titlebar-brand,
.compact-settings {
  display: none !important;
}/* No fake divider line across any of these windows. */.compact-window,
.how-app-window {
  background-clip: padding-box;
}
@container slurp-preview (max-width: 680px) {
.how-traffic-lights{
    left: 15px;
    top: 16px;
  }
}
/* v0.25 — restrained scroll reveal -------------------------------------- */:root {
  --reveal-duration: 620ms;
  --reveal-distance: 20px;
  --reveal-blur: 4px;
  --reveal-ease: cubic-bezier(.2,.72,.24,1);
}.reveal-on-scroll {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}.reveal-on-scroll.reveal-product {
  transform: translateY(18px) scale(.982);
  transform-origin: 50% 50%;
}.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* Cards use a slightly shorter movement than large product showcases. */.feature-card.reveal-on-scroll,
.faq-grid details.reveal-on-scroll,
.platform-list span.reveal-on-scroll,
.privacy-facts li.reveal-on-scroll {
  --reveal-distance: 14px;
  --reveal-blur: 3px;
}/* Keep the reveal polished rather than floaty on smaller screens. */@media (max-width: 700px) {
  :root {
    --reveal-duration: 540ms;
    --reveal-distance: 14px;
    --reveal-blur: 3px;
  }
  .reveal-on-scroll.reveal-product {
    transform: translateY(12px) scale(.988);
  }
}/* Accessibility: reveal everything immediately for reduced-motion users. */@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.reveal-product {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}/* v0.28 — Tokyo After Dark walkthrough artwork --------------------------- */.tokyo-thumbnail {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background:
    /* neon signs */
    linear-gradient(90deg, transparent 0 12%, rgba(255,44,160,.96) 12% 15%, transparent 15% 100%),
    linear-gradient(90deg, transparent 0 79%, rgba(48,218,255,.94) 79% 82%, transparent 82% 100%),
    /* distant windows */
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,222,144,.20) 9px 11px, transparent 11px 19px),
    /* building silhouettes */
    linear-gradient(90deg,
      rgba(5,8,17,.96) 0 10%,
      rgba(13,14,29,.94) 10% 22%,
      rgba(5,9,20,.97) 22% 35%,
      rgba(18,12,31,.95) 35% 47%,
      rgba(6,10,21,.98) 47% 61%,
      rgba(16,14,34,.96) 61% 73%,
      rgba(4,9,20,.98) 73% 87%,
      rgba(12,12,27,.96) 87% 100%),
    linear-gradient(180deg, #071226 0%, #151530 42%, #1c1734 62%, #080c16 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 12px 28px rgba(0,0,0,.18);
  isolation: isolate;
}.tokyo-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 46%, rgba(255,47,166,.85) 0 2%, rgba(255,47,166,.18) 3% 12%, transparent 24%),
    radial-gradient(circle at 81% 39%, rgba(46,215,255,.85) 0 2%, rgba(46,215,255,.20) 4% 13%, transparent 25%),
    radial-gradient(ellipse at 51% 28%, rgba(108,91,255,.30), transparent 34%),
    linear-gradient(162deg, transparent 0 52%, rgba(255,54,181,.20) 53% 54%, transparent 55% 100%),
    linear-gradient(198deg, transparent 0 57%, rgba(44,212,255,.18) 58% 59%, transparent 60% 100%);
  mix-blend-mode: screen;
  z-index: 1;
}.tokyo-thumbnail::after {
  content: "TOKYO";
  position: absolute;
  left: 7%;
  bottom: 10%;
  z-index: 2;
  padding: .28em .46em;
  border-radius: .34em;
  color: rgba(242,249,255,.96);
  background: rgba(255,42,160,.82);
  box-shadow:
    0 0 9px rgba(255,42,160,.62),
    0 0 22px rgba(255,42,160,.30);
  font-size: clamp(6px, .9vw, 11px);
  font-weight: 790;
  letter-spacing: .14em;
  line-height: 1;
}/* reflective road / wet neon foreground */.tokyo-thumbnail {
  background-color: #080b16;
}.tokyo-thumbnail > * { position: relative; z-index: 3; }.tokyo-thumbnail-paste {
  width: 92px;
  height: 56px;
  border-radius: 9px;
}.how-media-summary > .tokyo-thumbnail-hero {
  width: 404px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
}.how-queue-row > .tokyo-thumbnail-queue {
  width: 116px;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
}.how-history-artwork.tokyo-thumbnail-history {
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  border-radius: 8px;
}/* add wet-street perspective glow without another asset */.tokyo-thumbnail-paste,
.tokyo-thumbnail-hero,
.tokyo-thumbnail-queue,
.tokyo-thumbnail-history {
  background-image:
    linear-gradient(168deg, transparent 0 60%, rgba(255,42,160,.14) 61% 63%, transparent 64%),
    linear-gradient(192deg, transparent 0 60%, rgba(40,210,255,.13) 61% 63%, transparent 64%),
    linear-gradient(90deg, transparent 0 12%, rgba(255,44,160,.96) 12% 15%, transparent 15% 100%),
    linear-gradient(90deg, transparent 0 79%, rgba(48,218,255,.94) 79% 82%, transparent 82% 100%),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,222,144,.20) 9px 11px, transparent 11px 19px),
    linear-gradient(90deg,
      rgba(5,8,17,.96) 0 10%,
      rgba(13,14,29,.94) 10% 22%,
      rgba(5,9,20,.97) 22% 35%,
      rgba(18,12,31,.95) 35% 47%,
      rgba(6,10,21,.98) 47% 61%,
      rgba(16,14,34,.96) 61% 73%,
      rgba(4,9,20,.98) 73% 87%,
      rgba(12,12,27,.96) 87% 100%),
    linear-gradient(180deg, #071226 0%, #151530 42%, #1c1734 62%, #080c16 100%);
}
@container slurp-preview (max-width: 900px) {
.how-media-summary > .tokyo-thumbnail-hero{
    width: 100%;
  }
}

@container slurp-preview (max-width: 650px) {
.how-media-summary > .tokyo-thumbnail-hero{
    width: 100%;
    max-height: 190px;
  }
.how-queue-row > .tokyo-thumbnail-queue{
    width: 82px;
  }
.how-history-artwork.tokyo-thumbnail-history{
    flex-basis: 62px;
    width: 62px;
    height: 42px;
  }
}
/* v0.29 — explicit privacy-first positioning ----------------------------- */.privacy-promise {
  margin: 22px 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}.privacy-promise span {
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(52,199,89,.22);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(52,199,89,.075);
  color: #34c759;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}.privacy-promise i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .45;
}.privacy-network-note {
  margin: 20px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  max-width: 720px;
}.privacy-visual .shield {
  font-size: 0;
}.privacy-visual .shield::after {
  content: "0";
  font-size: 29px;
  font-weight: 760;
  letter-spacing: -.04em;
}@media (max-width: 640px) {
  .privacy-promise {
    gap: 7px;
  }
  .privacy-promise i {
    display: none;
  }
  .privacy-promise span {
    width: 100%;
    justify-content: center;
  }
}/* v0.30 — zero-telemetry odometer --------------------------------------- *//* Replace the old ::after-generated zero with a real, precisely centered
   rolling numeral. */.privacy-visual .shield.telemetry-counter {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  padding: 0;
}.privacy-visual .shield.telemetry-counter::after {
  content: none;
}.telemetry-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--blue);
  font-size: 27px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
  transform: translate3d(0,0,0);
  transform-origin: center;
  backface-visibility: hidden;
}/* Once the odometer lands, the single zero gets just a touch more presence. */.telemetry-counter.is-zero .telemetry-number {
  font-size: 30px;
  letter-spacing: 0;
}/* Avoid any accidental baseline shift caused by inherited inline metrics. */.privacy-visual .mac-outline {
  line-height: 1;
}@media (max-width: 560px) {
  .privacy-visual .shield.telemetry-counter {
    width: 66px;
    height: 66px;
    border-radius: 18px;
  }
  .telemetry-number {
    font-size: 25px;
  }
  .telemetry-counter.is-zero .telemetry-number {
    font-size: 28px;
  }
}@media (prefers-reduced-motion: reduce) {
  .telemetry-number {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}/* v0.31 — flip-clock depth + motion blur for telemetry counter ---------- */.privacy-visual .shield.telemetry-counter {
  perspective: 420px;
  transform-style: preserve-3d;
}.telemetry-number {
  transform-style: preserve-3d;
  transform-origin: 50% 52%;
  text-shadow: 0 1px 0 rgba(255,255,255,.10);
}/* A faint center hinge gives the rolling number a flip-clock character
   without drawing a literal clock face. */.privacy-visual .shield.telemetry-counter::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(10,132,255,.10) 18%,
    rgba(10,132,255,.16) 50%,
    rgba(10,132,255,.10) 82%,
    transparent
  );
  opacity: .42;
}/* Final zero remains completely crisp. */.telemetry-counter.is-zero .telemetry-number {
  filter: blur(0) !important;
  transform: translate3d(0,0,0) rotateX(0deg) scaleY(1) !important;
}/* v0.32 — four-reel telemetry odometer ---------------------------------- */.privacy-visual .shield.telemetry-counter {
  width: 104px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  perspective: none;
  transform-style: flat;
}/* Remove the previous hinge line entirely. */.privacy-visual .shield.telemetry-counter::before,
.privacy-visual .shield.telemetry-counter::after {
  content: none !important;
}.telemetry-reels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 42px;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.75,.25,1);
}.telemetry-reel {
  position: relative;
  width: 19px;
  height: 36px;
  overflow: hidden;
  display: grid;
  place-items: center;

  /* soft slot masking at the top and bottom */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.38) 13%,
    #000 30%,
    #000 70%,
    rgba(0,0,0,.38) 87%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.38) 13%,
    #000 30%,
    #000 70%,
    rgba(0,0,0,.38) 87%,
    transparent 100%
  );
}.telemetry-reel-digit {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 25px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
  transform: translate3d(0,0,0);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}.telemetry-final-zero {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  opacity: 0;
  transform: scale(.72);
  filter: blur(3px);
  transition:
    opacity 190ms ease,
    transform 300ms cubic-bezier(.16,.86,.22,1.10),
    filter 220ms ease;
}.telemetry-counter.is-collapsing .telemetry-reels {
  opacity: 0;
  transform: scale(.70);
}.telemetry-counter.is-zero .telemetry-reels {
  opacity: 0;
  transform: scale(.62);
  pointer-events: none;
}.telemetry-counter.is-zero .telemetry-final-zero {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}/* a tiny final emphasis without looking bouncy */.telemetry-counter.zero-pop .telemetry-final-zero {
  animation: telemetryZeroPop 260ms cubic-bezier(.18,.82,.22,1.06);
}@keyframes telemetryZeroPop {
  0%   { transform: scale(.90); }
  68%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}@media (max-width: 560px) {
  .privacy-visual .shield.telemetry-counter {
    width: 96px;
    height: 66px;
    border-radius: 18px;
  }
  .telemetry-reels {
    width: 70px;
    height: 40px;
  }
  .telemetry-reel {
    width: 17px;
    height: 34px;
  }
  .telemetry-reel-digit {
    font-size: 23px;
  }
  .telemetry-final-zero {
    font-size: 28px;
  }
}@media (prefers-reduced-motion: reduce) {
  .telemetry-reels {
    display: none !important;
  }
  .telemetry-final-zero {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}/* v0.33 — navigation follows the page narrative ------------------------- */.site-header .nav-links {
  gap: 24px;
}.site-header .nav-links a {
  white-space: nowrap;
}/* Fit five links plus the appearance control before switching to the
   compact/mobile header treatment. */@media (max-width: 1120px) {
  .site-header .nav-links {
    gap: 17px;
  }

  .site-header nav {
    font-size: 13px;
  }

  .site-header .header-theme-switch .beauty-theme-option {
    min-width: 78px;
    padding-inline: 11px;
  }
}/* On narrower tablet widths keep the three strongest product links visible,
   while Privacy/FAQ remain available in-page and in the footer. */@media (max-width: 920px) and (min-width: 701px) {
  .site-header .nav-links a[href="#privacy"],
  .site-header .nav-links a[href="#faq"] {
    display: none;
  }

  .site-header .nav-links {
    gap: 18px;
  }
}/* v0.34 — How it works becomes a side-by-side product presentation ------- */#how {
  scroll-margin-top: 18px;
}.how-real-section {
  padding-top: 92px;
  padding-bottom: 112px;
  overflow: hidden;
}.how-real-section::before {
  top: 190px;
  width: 1080px;
  height: 700px;
}.how-layout {
  width: min(1360px, calc(100% - 72px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}.how-copy-panel.how-real-heading {
  width: auto;
  max-width: none;
  text-align: left;
  align-self: center;
  padding: 12px 0;
}.how-copy-panel .kicker {
  margin-bottom: 10px;
}.how-copy-panel h2 {
  margin: 0;
  max-width: 310px;
  font-size: clamp(48px, 5vw, 68px);
  line-height: .96;
  letter-spacing: -.062em;
}.how-copy-panel > p {
  margin: 20px 0 0;
  max-width: 300px;
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.58;
}.how-live-copy {
  margin-top: 46px;
  padding: 18px 0 4px 18px;
  max-width: 300px;
  border-left: 2px solid rgba(10,132,255,.46);
  position: relative;
}.how-live-copy::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: -5px;
  top: 25px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 16px rgba(10,132,255,.46);
}.how-live-step {
  display: block;
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}#how-caption {
  min-height: 112px;
  margin: 0;
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.55;
  transition: opacity .15s ease, transform .18s ease;
}#how-caption strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.035em;
}.how-visual-column {
  min-width: 0;
  display: grid;
  gap: 20px;
}.how-real-stage {
  width: 100%;
  margin-top: 0;
}.how-layout .how-app-window {
  height: 610px;
  border-radius: 25px;
}.how-layout .how-app-layout {
  grid-template-columns: 210px 1fr;
}.how-layout .how-sidebar-header {
  padding-left: 20px;
}.how-demo-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}.how-demo-controls {
  justify-content: center;
  gap: 14px;
}.how-stepper {
  flex: 1;
  justify-content: center;
  max-width: 610px;
}.how-stepper button {
  width: 20%;
  max-width: 110px;
}.how-replay {
  flex: 0 0 auto;
}/* The caption has moved next to the app, so the old footer-caption rules
   should not reserve any space beneath the product. */.how-demo-footer > p {
  display: none;
}/* At medium widths, keep the side-by-side idea but give the app more room. */
@media (max-width: 1180px) {
.how-layout{
    width: min(1180px, calc(100% - 48px));
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 34px;
  }
.how-copy-panel h2{
    font-size: clamp(44px, 5vw, 60px);
  }
}
@container slurp-preview (max-width: 1180px) {
.how-layout .how-app-window{
    height: 580px;
  }
.how-layout .how-app-layout{
    grid-template-columns: 190px 1fr;
  }
}
/* Tablet/mobile: stack copy above the app. */
@media (max-width: 900px) {
#how{
    scroll-margin-top: 8px;
  }
.how-real-section{
    padding-top: 88px;
  }
.how-layout{
    width: min(100% - 36px, 920px);
    grid-template-columns: 1fr;
    gap: 36px;
  }
.how-copy-panel.how-real-heading{
    text-align: center;
    padding: 0;
  }
.how-copy-panel h2, .how-copy-panel > p, .how-live-copy{
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
.how-copy-panel > p{
    margin-top: 15px;
  }
.how-live-copy{
    margin-top: 28px;
    padding: 15px 18px 16px;
    border-left: 0;
    border-top: 1px solid var(--line);
    text-align: left;
  }
.how-live-copy::before{
    display: none;
  }
#how-caption{
    min-height: 76px;
  }
}
@container slurp-preview (max-width: 900px) {
.how-layout .how-app-window{
    height: 600px;
  }
.how-layout .how-app-layout{
    grid-template-columns: 182px 1fr;
  }
}

@media (max-width: 680px) {
.how-layout{
    width: 100%;
    gap: 28px;
  }
.how-copy-panel{
    padding-inline: 18px !important;
  }
.how-copy-panel h2{
    font-size: clamp(46px, 14vw, 62px);
  }
.how-copy-panel > p{
    font-size: 15px;
  }
.how-live-copy{
    margin-inline: 0;
  }
.how-visual-column{
    gap: 16px;
  }
.how-demo-footer{
    padding-inline: 14px;
  }
.how-demo-controls{
    flex-direction: column;
    gap: 12px;
  }
.how-stepper{
    width: 100%;
    max-width: none;
  }
.how-stepper button{
    width: 20%;
    padding-inline: 3px;
  }
.how-replay{
    align-self: center;
  }
}
@container slurp-preview (max-width: 680px) {
.how-layout .how-app-window{
    height: 540px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
.how-live-step {
  transition: opacity .15s ease, transform .18s ease;
}/* v0.35 — real supplied video thumbnails -------------------------------- */.walkthrough-thumb,
.history-real-thumb {
  display: block;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  background: rgba(0,0,0,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.14);
}.walkthrough-thumb-paste {
  width: 92px;
  height: 56px;
  flex: 0 0 92px;
  border-radius: 9px;
}.how-media-summary > .walkthrough-thumb-hero {
  width: 404px;
  aspect-ratio: 16 / 9;
  flex: 0 0 404px;
  border-radius: 22px;
}.how-queue-row > .walkthrough-thumb-queue {
  width: 116px;
  aspect-ratio: 16 / 9;
  flex: 0 0 116px;
  border-radius: 11px;
}.how-history-artwork.history-real-thumb {
  width: 72px;
  height: 48px;
  flex: 0 0 72px;
  border-radius: 8px;
}/* Slightly favor the center of the podcast artwork at tiny sizes so the
   two subjects remain legible alongside the large PODCAST typography. */.walkthrough-thumb-paste[src*="podcast"],
.walkthrough-thumb-queue[src*="podcast"],
.history-real-thumb[src*="podcast"] {
  object-position: 52% 50%;
}
@container slurp-preview (max-width: 900px) {
.how-media-summary > .walkthrough-thumb-hero{
    width: 100%;
    flex-basis: auto;
  }
}

@container slurp-preview (max-width: 650px) {
.how-media-summary > .walkthrough-thumb-hero{
    width: 100%;
    max-height: 190px;
  }
.how-queue-row > .walkthrough-thumb-queue{
    width: 82px;
    flex-basis: 82px;
  }
.how-history-artwork.history-real-thumb{
    width: 62px;
    height: 42px;
    flex-basis: 62px;
  }
}
/* v0.36 — accurate service identity + Analyze thumbnail persistence ------- */.source-service-logo {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}.source-service-line,
.queue-source-line {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px !important;
  min-width: 0;
  color: var(--app-muted);
}.source-service-line > span,
.queue-source-line > span {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
}.how-media-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
}.how-media-copy small .source-service-logo {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}.history-source-logo {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}/* The real app keeps the discovered thumbnail present during Analyze.
   Explicitly override the old website-only behavior that hid the preview. */.how-app-window[data-state="analyze"] .how-paste-preview {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}/* The helper hint can disappear while Slurp is working, but the preview
   remains visible and stable underneath the animated URL field. */.how-app-window[data-state="analyze"] .how-new-hint {
  opacity: 0;
}/* Source chips in the supported-sites strip now carry real service marks. */.platform-list .platform-source-chip {
  gap: 7px;
}.platform-list .platform-source-chip .source-service-logo {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}/* Retire the old fake colored-letter source icons wherever they remain. */.how-source-icon {
  display: none !important;
}
@container slurp-preview (max-width: 620px) {
.platform-list .platform-source-chip .source-service-logo{
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}
/* v0.37 — moving How-it-works progress indicator ------------------------ *//* Retire the old decorative fixed dot. */.how-live-copy::before {
  display: none !important;
}/* Keep the existing vertical border visually, but make the real progress
   rail responsible for the active dot position. */.how-live-progress {
  position: absolute;
  left: -2px;
  top: 18px;
  bottom: 12px;
  width: 2px;
  pointer-events: none;
}.how-live-progress-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow:
    0 0 0 1px rgba(10,132,255,.14),
    0 0 15px rgba(10,132,255,.42);
  transform: translate(-50%, -50%);
  will-change: top;
  transition:
    top 520ms cubic-bezier(.22,.82,.2,1),
    box-shadow 260ms ease;
}/* A tiny pulse makes the arrival feel deliberate without turning the rail
   into another large animation competing with the app demo. */.how-live-progress-dot.is-arriving {
  box-shadow:
    0 0 0 4px rgba(10,132,255,.09),
    0 0 18px rgba(10,132,255,.5);
}/* On tablet/mobile the copy treatment becomes horizontal, so the vertical
   workflow rail is intentionally hidden rather than leaving an orphaned dot. */@media (max-width: 900px) {
  .how-live-progress {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {
  .how-live-progress-dot {
    transition: none;
  }
}/* v0.38 — hero icon sits directly in the composition -------------------- */.hero-app-icon {
  box-shadow: none;
}/* v0.39 — native fidelity pass for the "This is Slurp" walkthrough ------- *//* Keep the physical mockup large enough to read, but make the UI inside it
   use native-macOS density rather than enlarged landing-page proportions. */
@container slurp-preview (min-width: 901px) {
.how-layout .how-app-window{
    height: 632px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-app-layout{
    grid-template-columns: 196px minmax(0, 1fr);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-sidebar-header{
    height: 42px;
    gap: 8px;
    padding: 0 12px 0 17px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-sidebar-header img{
    width: 20px;
    height: 20px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-sidebar-header strong{
    font-size: 16.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-sidebar-toggle{
    width: 28px;
    height: 28px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-nav-row{
    height: 34px;
    gap: 8px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-nav-row + .how-nav-row{
    margin-top: 3px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-nav-icon{
    width: 18px;
    height: 20px;
    flex-basis: 18px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-nav-icon svg{
    width: 17px;
    height: 17px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-badge{
    min-width: 18px;
    padding: 1px 5px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-new-center{
    width: min(680px, calc(100% - 78px));
    transform: translateY(-6px);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-new-heading{
    height: 54px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-new-heading h3{
    font-size: 21px;
    font-weight: 650;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-new-heading p{
    top: 31px;
    font-size: 12.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-card{
    height: 48px;
    margin-top: 13px;
    gap: 10px;
    padding: 0 9px 0 15px;
    box-shadow:
      inset 0 1px rgba(255,255,255,.09),
      0 8px 20px rgba(0,0,0,.10);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-link-icon{
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-value{
    height: 22px;
    font-size: 14.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-clear{
    width: 17px;
    font-size: 16px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-action{
    width: 30px;
    height: 30px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-action svg{
    width: 16px;
    height: 16px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-effects{
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="analyze"] .how-url-card{
    border-color: rgba(10,132,255,.20);
    box-shadow:
      inset 0 1px rgba(255,255,255,.09),
      0 8px 20px rgba(0,0,0,.09);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-card.paste-ripple-active{
    border-color: rgba(10,132,255,.22);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-url-action.action-ready{
    box-shadow: 0 0 8px rgba(10,132,255,.24);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview{
    width: min(585px, calc(100% - 56px));
    min-height: 62px;
    margin-top: 13px;
    gap: 10px;
    padding: 8px;
    border-radius: 13px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview img, :is(#how-demo, #compact .compact-full-app-host) .walkthrough-thumb-paste{
    width: 80px;
    height: 45px;
    flex-basis: 80px;
    border-radius: 8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview div{
    gap: 3px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview strong{
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-paste-preview span{
    font-size: 9.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-new-hint{
    margin-top: 11px;
    font-size: 9.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="analyze"] .how-paste-preview{
    opacity: 1 !important;
    transform: none !important;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-result-state{
    padding: 18px 24px 14px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-result-scroll{
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 3px;
    overflow: hidden;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-summary{
    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
    gap: 20px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-summary > img, :is(#how-demo, #compact .compact-full-app-host) .how-media-summary > .walkthrough-thumb-hero{
    width: 350px;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-copy h3{
    margin-bottom: 6px;
    font-size: 21px;
    line-height: 1.08;
    letter-spacing: -.032em;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-copy > strong{
    margin-bottom: 6px;
    font-size: 14px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-copy p{
    margin-bottom: 6px;
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-copy small{
    gap: 5px;
    font-size: 9.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-media-copy small .source-service-logo{
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-analyzed-source{
    max-width: none;
    height: 31px;
    margin: 9px 0 10px;
    padding: 0 4px 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 9.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-analyzed-source svg{
    width: 13px;
    height: 13px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-analyzed-source b{
    display: flex;
    align-items: center;
    gap: 13px;
    color: #2797ff;
    font-size: 10px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-source-more{
    color: #2797ff;
    letter-spacing: .12em;
    font-size: 8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-section-label{
    margin: 0 2px 7px;
    color: var(--app-text);
    font-size: 11.5px;
    font-weight: 650;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-options-section, :is(#how-demo, #compact .compact-full-app-host) .how-advanced-section{
    max-width: none;
    margin: 0;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.052);
    overflow: hidden;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-option-row{
    min-height: 35px;
    padding: 5px 11px 5px 13px;
    gap: 14px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-option-row > div{
    gap: 1px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-option-row strong{
    font-size: 10.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-option-row small{
    font-size: 8.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-menu{
    min-width: 96px;
    height: 24px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-segmented{
    padding: 1.5px;
    border-radius: 8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-segmented b{
    min-width: 46px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-label{
    margin-top: 10px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-section{
    display: grid;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-row{
    min-height: 31px;
    padding: 0 11px 0 13px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    color: var(--app-secondary);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-row:last-child{
    border-bottom: 0;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-row > svg{
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--app-muted);
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-row > strong{
    color: var(--app-secondary);
    font-size: 9.5px;
    font-weight: 600;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-status{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--app-muted);
    font-size: 8.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-advanced-status i{
    color: var(--app-muted);
    font-size: 15px;
    font-style: normal;
    line-height: 1;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-sticky-download{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    min-height: 48px;
    margin: 0;
    gap: 9px;
    padding: 6px 7px 6px 14px;
    border-radius: 999px;
    box-shadow:
      inset 0 1px rgba(255,255,255,.08),
      0 10px 24px rgba(0,0,0,.12);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-summary{
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    color: var(--app-muted);
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-summary strong{
    color: var(--app-text);
    font-size: 9.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-summary > span{
    color: var(--app-muted);
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-summary > span::before{
    content: "·";
    margin-right: 9px;
    color: var(--app-muted);
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-folder{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-folder svg{
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-output-folder span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-folder-button{
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-folder-button svg{
    width: 16px;
    height: 16px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-primary-download{
    height: 34px;
    padding: 0 15px;
    gap: 6px;
    font-size: 10.5px;
    box-shadow:
      0 5px 12px rgba(10,132,255,.18),
      inset 0 1px rgba(255,255,255,.20);
    cursor: pointer;
    transform-origin: center;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-primary-download svg{
    width: 13px;
    height: 13px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-primary-download{
    animation: none;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-primary-download.is-auto-clicking{
    animation: howNativeDownloadPress 300ms cubic-bezier(.2,.82,.25,1) both !important;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-state{
    padding: 32px 18px 22px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-header{
    padding: 0 5px 11px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-header h3{
    font-size: 22px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-header p{
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-concurrency{
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-concurrency b{
    height: 25px;
    min-width: 43px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-row{
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    border-radius: 13px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-row > img, :is(#how-demo, #compact .compact-full-app-host) .walkthrough-thumb-queue{
    width: 96px;
    flex-basis: 96px;
    border-radius: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-details{
    gap: 7px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-topline{
    gap: 10px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-topline strong{
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-topline span, :is(#how-demo, #compact .compact-full-app-host) .how-queue-endcap > b{
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-progress-track{
    height: 4px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-details small{
    font-size: 8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-state{
    padding: 32px 18px 20px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-header{
    padding: 0 5px 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-header h3{
    font-size: 22px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-header p{
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-search{
    width: 150px;
    height: 26px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-tools button{
    height: 26px;
    font-size: 9px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-scroll{
    height: 540px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-group h4{
    padding: 5px 9px 3px;
    font-size: 8.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-row{
    min-height: 57px;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 11px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-artwork, :is(#how-demo, #compact .compact-full-app-host) .how-history-artwork.history-real-thumb{
    width: 64px;
    height: 42px;
    flex-basis: 64px;
    border-radius: 7px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-copy{
    gap: 3px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-copy > strong{
    font-size: 11.5px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-meta{
    gap: 5px;
    font-size: 8.8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-history-file{
    gap: 5px;
    font-size: 7.8px;
  }
:is(#how-demo, #compact .compact-full-app-host) .history-source-logo{
    width: 11px;
    height: 11px;
    flex-basis: 11px;
  }
:is(#how-demo, #compact .compact-full-app-host) .how-queue-actions button, :is(#how-demo, #compact .compact-full-app-host) .how-history-actions button{
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
}
/* More restrained native-state entrances: less "landing page reveal". */:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-media-summary {
  animation: howNativeResultIn .32s .03s both cubic-bezier(.2,.8,.2,1);
}:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-analyzed-source {
  animation: howNativeResultIn .28s .08s both cubic-bezier(.2,.8,.2,1);
}:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-section-label,
:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-options-section,
:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-advanced-section {
  animation: howNativeResultIn .30s .11s both cubic-bezier(.2,.8,.2,1);
}:is(#how-demo, #compact .compact-full-app-host) .how-app-window[data-state="result"] .how-sticky-download {
  animation: howNativeResultIn .30s .16s both cubic-bezier(.2,.8,.2,1);
}@keyframes howNativeResultIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}@keyframes howNativeDownloadPress {
  0%   { transform: scale(1); filter: brightness(1); }
  38%  { transform: scale(.965); filter: brightness(.93); }
  68%  { transform: scale(.982); filter: brightness(.98); }
  100% { transform: scale(1); filter: brightness(1); }
}/* Light mode versions of the newly added native cards. */:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-advanced-section {
  background: rgba(255,255,255,.40);
  border-color: rgba(40,50,65,.09);
}:root[data-theme="light"] :is(#how-demo, #compact .compact-full-app-host) .how-advanced-row {
  border-color: rgba(40,50,65,.07);
}/* v0.40 — Compact Mode is about footprint, not just a different layout ----- */#compact .compact-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: initial;
}#compact .compact-copy {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}#compact .compact-copy h2 {
  max-width: 900px;
  margin: 12px auto 16px;
  font-size: clamp(48px, 5.7vw, 70px);
}#compact .compact-copy > p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 17px;
}#compact .compact-mode-switch {
  margin: 24px auto 0;
}#compact .compact-support {
  display: flex;
  justify-content: center;
}#compact .compact-points {
  margin: 0;
  justify-content: center;
}/* One fixed visual canvas. The app changes footprint inside it instead of
   allowing Compact to expand to fill whatever space is available. */#compact .compact-stage {
  width: 100%;
  min-height: 610px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}#compact .compact-stage::before {
  content: "";
  position: absolute;
  inset: 8% 3% 11%;
  border-radius: 42px;
  background:
    radial-gradient(circle at 74% 36%, rgba(10,132,255,.10), transparent 30%),
    radial-gradient(circle at 30% 68%, rgba(126,87,194,.055), transparent 38%);
  opacity: .86;
  pointer-events: none;
}/* Full retains the current product-showcase scale. Compact uses essentially
   the real native 420 × 114 pt outer-window footprint. */#compact .compact-demo {
  width: 800px;
  height: 490px;
  max-width: calc(100% - 28px);
  position: relative;
  z-index: 1;
  transform: translate(0, 0);
  transform-origin: 50% 50%;
  transition:
    width 640ms cubic-bezier(.20,.78,.18,1),
    height 640ms cubic-bezier(.20,.78,.18,1),
    transform 640ms cubic-bezier(.20,.78,.18,1);
}#compact .compact-demo[data-mode="compact"] {
  width: 420px;
  height: 114px;
  max-width: calc(100% - 36px);
  transform: translate(168px, -28px);
}#compact .compact-window {
  border-radius: 25px;
  transition:
    border-radius 560ms cubic-bezier(.20,.78,.18,1),
    background .35s ease,
    box-shadow .35s ease;
}#compact .compact-demo[data-mode="compact"] .compact-window {
  border-radius: 17px;
}/* Traffic lights shrink a touch with the real mini-player proportions. */#compact .compact-traffic-lights {
  left: 16px;
  top: 15px;
  gap: 7px;
  transition:
    left 500ms cubic-bezier(.20,.78,.18,1),
    top 500ms cubic-bezier(.20,.78,.18,1),
    gap 500ms cubic-bezier(.20,.78,.18,1);
}#compact .compact-demo[data-mode="compact"] .compact-traffic-lights {
  left: 13px;
  top: 11px;
  gap: 6px;
}#compact .compact-traffic-lights i {
  transition:
    width 500ms cubic-bezier(.20,.78,.18,1),
    height 500ms cubic-bezier(.20,.78,.18,1);
}#compact .compact-demo[data-mode="compact"] .compact-traffic-lights i {
  width: 10px;
  height: 10px;
}/* Full UI disappears before the shell reaches mini-player proportions. */#compact .compact-full-state {
  transition:
    opacity 180ms ease,
    transform 420ms cubic-bezier(.20,.78,.18,1);
}#compact .compact-demo[data-mode="compact"] .compact-full-state {
  opacity: 0;
  transform: scale(.975);
}/* Compact is a real 420 pt mini layout, not a hero-sized web form. */#compact .compact-mini-state {
  top: 32px;
  bottom: 0;
  padding: 8px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity 180ms ease,
    transform 340ms cubic-bezier(.20,.78,.18,1);
}#compact .compact-demo[data-mode="compact"] .compact-mini-state {
  opacity: 1;
  transform: none;
  transition-delay: 255ms;
}#compact .compact-native-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
}#compact .compact-native-url {
  height: 40px;
  min-width: 0;
  padding: 0 10px 0 12px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.09);
  background: var(--glass-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    inset 0 1px var(--highlight),
    0 4px 12px rgba(0,0,0,.07);
}#compact .compact-native-url > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}#compact .compact-native-url > span:not(.compact-native-paste) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}#compact .compact-native-paste {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--secondary);
}#compact .compact-native-paste svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}#compact .compact-native-advanced {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(127,127,127,.08);
  color: var(--secondary);
}#compact .compact-native-advanced svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}#compact .compact-native-hint {
  padding-left: 4px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}#compact .compact-native-hint strong {
  color: var(--secondary);
  font-weight: 620;
}/* Old oversized Compact-only content is retired. */#compact .compact-mini-copy,
#compact .compact-mini-url,
#compact .compact-mini-status,
#compact .compact-download {
  display: none !important;
}#compact .compact-stage-note {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}/* A very small visual footprint cue appears only in Compact state. */#compact .compact-demo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -27px;
  width: 72%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,.14);
  filter: blur(14px);
  opacity: .36;
  pointer-events: none;
  transition:
    width 560ms cubic-bezier(.20,.78,.18,1),
    opacity 300ms ease;
}#compact .compact-demo[data-mode="compact"]::after {
  width: 46%;
  opacity: .24;
}@media (max-width: 980px) {
  #compact .compact-shell {
    gap: 30px;
  }

  #compact .compact-stage {
    min-height: 565px;
  }

  #compact .compact-demo {
    width: min(760px, calc(100% - 36px));
    height: 465px;
  }

  #compact .compact-demo[data-mode="compact"] {
    width: 420px;
    height: 114px;
    transform: translate(100px, -22px);
  }
}@media (max-width: 700px) {
  #compact .compact-copy {
    padding-inline: 18px;
  }

  #compact .compact-copy h2 {
    font-size: clamp(44px, 12vw, 60px);
  }

  #compact .compact-copy > p {
    font-size: 15px;
  }

  #compact .compact-stage {
    min-height: 430px;
  }

  #compact .compact-demo {
    width: calc(100% - 28px);
    height: min(380px, 68vw);
  }

  #compact .compact-demo[data-mode="compact"] {
    width: min(420px, calc(100% - 40px));
    height: 114px;
    transform: translate(0, -12px);
  }

  #compact .compact-full-sidebar {
    width: 150px;
  }

  #compact .compact-stage-note {
    bottom: 2px;
  }

  #compact .compact-points {
    padding-inline: 18px;
  }
}@media (prefers-reduced-motion: reduce) {
  #compact .compact-demo,
  #compact .compact-window,
  #compact .compact-full-state,
  #compact .compact-mini-state,
  #compact .compact-traffic-lights,
  #compact .compact-traffic-lights i {
    transition: none !important;
  }
}/* v0.47 — Compact Mode: one persistent Slurp window ----------------------
   The real app uses a single macOS window whose frame resizes around a
   reconfigured interior. The website now follows the same model. There is
   no second shell, no full-window scale-down, and no cross-cut between two
   mockups. */#compact.compact-section {
  padding-top: 132px;
  padding-bottom: 128px;
}#compact .compact-shell {
  width: min(1360px, calc(100% - 72px));
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 54px;
  row-gap: 0;
  align-items: center;
}#compact .compact-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 360px;
  margin: 0;
  text-align: left;
  align-self: center;
}#compact .compact-copy h2 {
  max-width: 360px;
  margin: 12px 0 18px;
  font-size: clamp(48px, 4.55vw, 64px);
  line-height: .97;
}#compact .compact-copy > p {
  max-width: 348px;
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
}#compact .compact-mode-switch { margin: 28px 0 0; }#compact .compact-support {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-content: flex-start;
  margin-top: 22px;
}#compact .compact-points {
  margin: 0;
  justify-content: flex-start;
}#compact .compact-stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  min-height: 620px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: auto;
  overflow: visible;
}#compact .compact-stage::before {
  inset: 7% -2% 8%;
  border-radius: 48px;
  background:
    radial-gradient(circle at 68% 35%, rgba(10,132,255,.105), transparent 31%),
    radial-gradient(circle at 29% 70%, rgba(126,87,194,.055), transparent 38%);
  opacity: .78;
}/* The stage keeps the Full footprint. Only the child NSWindow analogue
   changes frame. This keeps the animation centre perfectly fixed. */#compact .compact-demo,
#compact .compact-demo[data-mode="full"],
#compact .compact-demo[data-mode="compact"] {
  width: 100%;
  height: 559px;
  max-width: 920px;
  position: relative;
  z-index: 1;
  transform: none;
  transition: none;
  overflow: visible;
}#compact .compact-demo::after { display: none; }#compact .compact-footprint-frame { display: none !important; }#compact .compact-full-app-host {
  --app-text: #f5f6f8;
  --app-secondary: rgba(238,242,248,.62);
  --app-muted: rgba(235,240,248,.40);
  --app-line: rgba(255,255,255,.105);
  --app-surface: rgba(34,39,49,.66);
  --app-surface-strong: rgba(38,44,55,.78);
  --app-sidebar: rgba(18,22,29,.67);
  --app-selection: rgba(10,132,255,.16);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: none;
}:root[data-theme="light"] #compact .compact-full-app-host {
  --app-text: #17191d;
  --app-secondary: rgba(35,39,46,.62);
  --app-muted: rgba(55,61,70,.42);
  --app-line: rgba(20,24,30,.10);
  --app-surface: rgba(255,255,255,.58);
  --app-surface-strong: rgba(250,251,253,.72);
  --app-sidebar: rgba(235,238,243,.60);
  --app-selection: rgba(10,132,255,.11);
}/* This exact .how-app-window is both Full Slurp and Compact Slurp. Its
   transform is constant; JS animates only its frame width/height/radius. */#compact .compact-native-window {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1040px;
  height: 632px;
  min-width: 0;
  min-height: 0;
  transform: translate(-50%, -50%) scale(var(--compact-preview-scale, .884615));
  transform-origin: 50% 50%;
  overflow: hidden !important;
  border-radius: 27px;
  pointer-events: none;
  user-select: none;
  will-change: width, height, border-radius;
  transition: box-shadow 180ms ease, background 180ms ease;
}/* Static New screen, matching the real-app screen recording. */#compact .compact-native-window .how-paste-preview,
#compact .compact-native-window .how-new-hint,
#compact .compact-native-window .how-url-effects,
#compact .compact-native-window .how-steps,
#compact .compact-native-window .how-stepper,
#compact .compact-native-window .how-queue-badge {
  display: none !important;
}#compact .compact-native-window .how-app-layout {
  opacity: 1;
  will-change: opacity;
}#compact .compact-native-window .how-media-summary,
#compact .compact-native-window .how-analyzed-source,
#compact .compact-native-window .how-options-section,
#compact .compact-native-window .how-sticky-download {
  animation: none !important;
}/* Freeze the cloned Full preview in the same clean idle state shown in the
   real Slurp recording. The source walkthrough may be mid-paste when it is
   cloned, so do not inherit its completed URL animation. */#compact .compact-native-window[data-state="paste"] .how-url-placeholder {
  opacity: 1 !important;
  transform: none !important;
}#compact .compact-native-window[data-state="paste"] .how-url-pasted,
#compact .compact-native-window[data-state="paste"] .how-url-clear {
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
}#compact .compact-native-window[data-state="paste"] .how-url-action {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  box-shadow: none;
  transform: none;
  animation: none !important;
}:root[data-theme="light"] #compact .compact-native-window[data-state="paste"] .how-url-action {
  background: rgba(30,40,55,.07);
  color: rgba(35,45,60,.32);
}/* Compact controls exist inside the same window from the first frame. Their
   dimensions are the final compact dimensions even while the outer frame is
   still Full-sized, which is exactly what the real app recording shows. */#compact .compact-native-window .compact-mini-state {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--compact-logical-w, 475px) !important;
  height: var(--compact-logical-h, 129px) !important;
  padding: 32px 14px 8px !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  opacity: 0;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
  will-change: opacity;
  transition: none !important;
  z-index: 20;
}#compact .compact-native-url {
  height: 40px;
  min-width: 0;
  padding: 0 10px 0 12px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.09);
  background: var(--glass-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 1px var(--highlight), 0 4px 12px rgba(0,0,0,.07);
}#compact .compact-native-paste svg,
#compact .compact-native-advanced svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}#compact .compact-native-paste svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.55;
}#compact .compact-native-advanced svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.6;
}#compact .compact-stage-note {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  margin: 0;
  color: var(--secondary);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}/* A compact window casts a tighter shadow in the native app. */#compact .compact-native-window[data-compact-state="compact"] {
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 25px 58px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.13);
}:root[data-theme="light"] #compact .compact-native-window[data-compact-state="compact"] {
  box-shadow:
    inset 0 1px rgba(255,255,255,.95),
    0 25px 58px rgba(38,47,60,.17),
    0 0 0 1px rgba(60,70,85,.09);
}@media (max-width: 1180px) {
  #compact .compact-shell {
    width: min(1180px, calc(100% - 48px));
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    column-gap: 36px;
  }
  #compact .compact-copy h2 { font-size: clamp(45px, 4.9vw, 58px); }
  #compact .compact-stage { min-height: 570px; }
  #compact .compact-demo,
  #compact .compact-demo[data-mode="full"],
  #compact .compact-demo[data-mode="compact"] {
    width: 100%;
    max-width: 820px;
    height: 498px;
  }
}@media (max-width: 900px) {
  #compact.compact-section { padding-top: 104px; padding-bottom: 104px; }
  #compact .compact-shell {
    width: min(100% - 36px, 920px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
  }
  #compact .compact-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
  }
  #compact .compact-copy h2,
  #compact .compact-copy > p {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
  #compact .compact-mode-switch { margin-left: auto; margin-right: auto; }
  #compact .compact-stage {
    grid-column: 1;
    grid-row: 2;
    min-height: 565px;
    margin-top: 28px;
  }
  #compact .compact-demo,
  #compact .compact-demo[data-mode="full"],
  #compact .compact-demo[data-mode="compact"] {
    width: 100%;
    max-width: 860px;
    height: min(522px, calc((100vw - 40px) * .6077));
  }
  #compact .compact-support {
    grid-column: 1;
    grid-row: 3;
    justify-content: center;
    margin-top: 6px;
  }
  #compact .compact-points { justify-content: center; }
}@media (max-width: 680px) {
  #compact .compact-shell { width: 100%; }
  #compact .compact-copy { padding-inline: 18px; }
  #compact .compact-copy h2 { font-size: clamp(44px, 12vw, 58px); }
  #compact .compact-stage { min-height: 430px; margin-top: 24px; }
  #compact .compact-demo,
  #compact .compact-demo[data-mode="full"],
  #compact .compact-demo[data-mode="compact"] {
    width: 100%;
    height: min(410px, 63vw);
  }
  #compact .compact-support { padding-inline: 18px; }
  #compact .compact-stage-note { bottom: 3px; }
}@media (prefers-reduced-motion: reduce) {
  #compact .compact-native-window,
  #compact .compact-native-window .how-app-layout,
  #compact .compact-native-window .compact-mini-state,
  #compact .compact-native-window .how-traffic-lights,
  #compact .compact-native-window .how-traffic-lights i {
    transition: none !important;
    animation: none !important;
  }
}/* v0.48 — Stripe purchase-success route ------------------------------- */.purchase-success-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}.purchase-header {
  width: min(1180px, calc(100% - 48px));
  padding-top: 26px;
}.purchase-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.025em;
}.purchase-brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}.purchase-main {
  width: min(900px, calc(100% - 48px));
  flex: 1;
  display: grid;
  place-items: center;
  padding-top: 74px;
  padding-bottom: 74px;
}.purchase-card {
  width: min(680px, 100%);
  padding: clamp(34px, 5vw, 58px);
  border-radius: 32px;
  text-align: center;
}.purchase-success-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #30d158, #22b84d);
  box-shadow: 0 15px 34px rgba(48,209,88,.22), inset 0 1px rgba(255,255,255,.34);
}.purchase-success-mark svg {
  width: 37px;
  height: 37px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}.purchase-card h1 {
  margin: 11px 0 15px;
  font-size: clamp(42px, 7vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}.purchase-lead {
  max-width: 535px;
  margin: 0 auto;
  color: var(--secondary);
  font-size: 17px;
  line-height: 1.58;
}.purchase-status {
  max-width: 510px;
  margin: 34px auto 0;
  padding: 17px 19px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
}.purchase-status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 5px rgba(48,209,88,.12);
}.purchase-status div {
  min-width: 0;
  display: grid;
  gap: 3px;
}.purchase-status strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}.purchase-status span:last-child {
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.45;
}.purchase-actions {
  margin-top: 27px;
  display: flex;
  justify-content: center;
}.purchase-actions .button {
  min-width: 160px;
}.purchase-note {
  max-width: 500px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}.purchase-footer {
  width: min(1180px, calc(100% - 48px));
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 12px;
}.purchase-footer a {
  color: var(--secondary);
  text-decoration: none;
}.purchase-footer a:hover { color: var(--text); }@media (max-width: 620px) {
  .purchase-header,
  .purchase-main,
  .purchase-footer { width: min(100% - 30px, 900px); }
  .purchase-main { padding-top: 44px; padding-bottom: 44px; }
  .purchase-card { padding: 34px 22px; border-radius: 26px; }
  .purchase-footer { flex-direction: column; align-items: center; text-align: center; }
}/* v0.49 — Slurp 1 pricing + Stripe checkout */.pricing-section {
  scroll-margin-top: 48px;
}.pricing-card {
  border-radius: 30px;
  padding: 42px 44px;
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.25fr) minmax(210px, .75fr);
  gap: 38px;
  align-items: center;
  overflow: hidden;
  position: relative;
}.pricing-card::before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -120px;
  top: -170px;
  border-radius: 50%;
  background: var(--blue-glow);
  filter: blur(65px);
  opacity: .45;
  pointer-events: none;
}.pricing-summary,
.pricing-benefits,
.pricing-actions {
  position: relative;
  z-index: 1;
}.pricing-product {
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 12px;
}.pricing-price strong {
  font-size: clamp(44px, 5vw, 62px);
  line-height: .98;
  letter-spacing: -.055em;
}.pricing-price span {
  color: var(--secondary);
  font-size: 13px;
}.pricing-summary p {
  margin: 0;
  max-width: 330px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.6;
}.pricing-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
}.pricing-benefits li {
  display: grid;
  grid-template-columns: 21px 1fr;
  column-gap: 9px;
  align-items: start;
  padding: 9px 0;
}.pricing-benefits li > span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}.pricing-benefits strong {
  font-size: 14px;
  line-height: 1.35;
}.pricing-benefits small {
  grid-column: 2;
  margin-top: 2px;
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.45;
}.pricing-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}.pricing-actions .button {
  width: 100%;
}.pricing-buy-button[disabled] {
  cursor: wait;
  opacity: .72;
  transform: none;
  filter: none;
}.checkout-status {
  min-height: 34px;
  margin: 2px 3px 0;
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}.checkout-status.is-error {
  color: #d94a4a;
}:root[data-theme="dark"] .checkout-status.is-error {
  color: #ff8b8b;
}.pricing-fineprint {
  max-width: 800px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}@media (max-width: 980px) {
  .pricing-card {
    grid-template-columns: 1fr 1.25fr;
  }
  .pricing-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .checkout-status {
    grid-column: 1 / -1;
  }
}@media (max-width: 700px) {
  .pricing-card {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 28px;
  }
  .pricing-benefits {
    grid-template-columns: 1fr;
  }
  .pricing-actions {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .checkout-status {
    grid-column: auto;
  }
}@media (max-width: 560px) {
  .pricing-card {
    padding: 28px 22px;
  }
  .pricing-price {
    justify-content: center;
  }
  .pricing-summary {
    text-align: center;
  }
  .pricing-summary p {
    margin-inline: auto;
  }
}/* v0.50 — automatic purchase claim + license delivery ------------------ */.purchase-status[data-state="loading"] .purchase-status-dot {
  background: #0a84ff;
  box-shadow: 0 0 0 5px rgba(10,132,255,.12);
  animation: purchase-status-pulse 1.2s ease-in-out infinite;
}.purchase-status[data-state="error"] .purchase-status-dot {
  background: #ff9f0a;
  box-shadow: 0 0 0 5px rgba(255,159,10,.12);
}@keyframes purchase-status-pulse {
  0%, 100% { opacity: .45; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}.purchase-license {
  max-width: 530px;
  margin: 22px auto 0;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
}.purchase-license[hidden] { display: none; }.purchase-license-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 620;
}.purchase-license-badge {
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  white-space: nowrap;
}.purchase-license code {
  display: block;
  overflow-wrap: anywhere;
  padding: 17px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(127,127,127,.07);
  color: var(--text);
  font: 650 15px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .025em;
  text-align: center;
  user-select: all;
}.purchase-license-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}.purchase-copy-button {
  width: 100%;
  margin-top: 14px;
}.purchase-note strong {
  color: var(--secondary);
  font-weight: 620;
}@media (prefers-reduced-motion: reduce) {
  .purchase-status[data-state="loading"] .purchase-status-dot { animation: none; }
}@media (max-width: 520px) {
  .purchase-license-heading { align-items: flex-start; flex-direction: column; }
  .purchase-license code { font-size: 13px; }
}/* v0.51 — Telegram downloads + Twitch live recording ------------------ */.feature-telegram-card,
.feature-live-card {
  min-height: 390px;
}.feature-icon.telegram-accent {
  background: rgba(42,171,238,.11);
  color: #2aabee;
  border-color: rgba(42,171,238,.20);
}.feature-icon.live-accent {
  background: rgba(145,70,255,.11);
  color: #9146ff;
  border-color: rgba(145,70,255,.20);
}.provider-mini {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 27px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--glass-subtle);
  box-shadow: inset 0 1px var(--highlight);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}.provider-mini-head,
.provider-brand,
.provider-state,
.provider-mini-source,
.live-mini-meta,
.live-mini-controls {
  display: flex;
  align-items: center;
}.provider-mini-head {
  justify-content: space-between;
  gap: 12px;
}.provider-brand {
  min-width: 0;
  gap: 8px;
  color: var(--text);
}.provider-brand img {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}.provider-brand strong {
  font-size: 11px;
  letter-spacing: -.01em;
}.provider-state {
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
}.provider-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}.provider-state.ready { color: #34c759; }.provider-state.ready i { background: #34c759; box-shadow: 0 0 8px rgba(52,199,89,.36); }.provider-state.recording { color: #ff453a; }.provider-state.recording i {
  background: #ff453a;
  box-shadow: 0 0 8px rgba(255,69,58,.42);
  animation: slurp-live-record-pulse 1.4s ease-in-out infinite;
}.provider-mini-source {
  margin-top: 12px;
  min-height: 34px;
  padding: 0 10px;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(127,127,127,.045);
  color: var(--muted);
  font-size: 10px;
}.provider-mini-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.provider-mini-source b {
  color: var(--blue);
  font-size: 9px;
  font-weight: 650;
}.live-mini-meta {
  justify-content: space-between;
  margin-top: 11px;
  color: var(--muted);
  font-size: 9px;
}.live-mini-controls {
  gap: 6px;
  margin-top: 10px;
}.live-mini-controls span,
.live-mini-controls strong {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
  background: rgba(127,127,127,.045);
  color: var(--secondary);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}.live-mini-controls strong {
  color: #ff453a;
  border-color: rgba(255,69,58,.17);
  background: rgba(255,69,58,.06);
}@keyframes slurp-live-record-pulse {
  0%,100% { opacity: .62; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}@media (prefers-reduced-motion: reduce) {
  .provider-state.recording i { animation: none; }
}@media (max-width: 620px) {
  .provider-mini { left: 22px; right: 22px; }
  .live-mini-controls span,
  .live-mini-controls strong { padding-left: 5px; padding-right: 5px; font-size: 8px; }
}/* v0.52 — open-source disclosure and notices */.download-oss-note {
  margin-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}.download-oss-note a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }.download-oss-note a:hover { color: var(--text); }.oss-page { padding: 112px 0 120px; }.oss-hero { max-width: 840px; margin: 0 auto 42px; text-align: center; }.oss-hero .oss-icon { width: 78px; height: 78px; border-radius: 20px; margin-bottom: 22px; }.oss-hero h1 { margin: 10px 0 16px; font-size: clamp(48px, 7vw, 76px); line-height: .98; letter-spacing: -.055em; }.oss-hero p { margin: 0 auto; max-width: 720px; color: var(--secondary); font-size: 17px; line-height: 1.6; }.oss-layout { display: grid; gap: 22px; max-width: 1040px; margin: 0 auto; }.oss-card { border-radius: 28px; padding: 30px 32px; }.oss-card h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.025em; }.oss-card > p { margin: 0; color: var(--secondary); line-height: 1.62; }.oss-release { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }.oss-release-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.oss-pill { padding: 7px 10px; border: 1px solid var(--line); background: var(--glass-subtle); border-radius: 999px; font-size: 11px; color: var(--secondary); }.oss-archive-state { min-width: 230px; text-align: right; }.oss-archive-state .button { min-width: 220px; justify-content: center; }.oss-archive-state .button[aria-disabled="true"] { opacity: .52; pointer-events: none; }.oss-archive-note { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }.oss-component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }.oss-component { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass-subtle); }.oss-component-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 7px; }.oss-component strong { color: var(--text); font-size: 14px; }.oss-license { color: var(--muted); font-size: 10px; white-space: nowrap; }.oss-component p { margin: 0 0 10px; color: var(--secondary); font-size: 12px; line-height: 1.55; }.oss-component a, .oss-text-link { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; font-size: 11px; }.oss-component a:hover, .oss-text-link:hover { color: var(--text); }.oss-notice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin-top: 20px; }.oss-notice-list a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--glass-subtle); color: var(--secondary); font-size: 11px; }.oss-notice-list a:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }.oss-notice-list span:last-child { color: var(--muted); font-size: 10px; }.oss-legal-note { font-size: 11px; color: var(--muted) !important; margin-top: 15px !important; }.oss-topbar { padding-top: 24px; }.oss-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.oss-home-link { display: inline-flex; align-items: center; gap: 9px; color: var(--secondary); font-size: 12px; }.oss-home-link img { width: 30px; height: 30px; border-radius: 8px; }.oss-home-link strong { color: var(--text); }.oss-top-actions { display: flex; gap: 10px; align-items: center; }@media (max-width: 760px) {
  .oss-page { padding-top: 80px; }
  .oss-release { grid-template-columns: 1fr; }
  .oss-archive-state { text-align: left; }
  .oss-component-grid, .oss-notice-list { grid-template-columns: 1fr; }
  .oss-card { padding: 24px 20px; }
  .oss-topbar-inner { align-items: flex-start; }
}/* v0.53 production artifact links */.download-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; }.download-checksum-link { color:var(--secondary); font-size:12px; text-decoration:underline; text-underline-offset:3px; }.download-checksum-link:hover { color:var(--text); }.oss-archive-note a { color:var(--secondary); text-decoration:underline; text-underline-offset:3px; }.oss-archive-note a:hover { color:var(--text); }@media (max-width: 760px) { .download-actions { width:100%; align-items:stretch; } .download-actions .button { text-align:center; } }/* v0.55 — launch hardening */.platform-legal-note { margin: -6px auto 54px; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: center; max-width: 980px; }.hero-checkout-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }.hero-checkout-status.is-error { color: #d95f68; }.download-trust-note { margin: 10px 0 0; color: var(--secondary); font-size: 12px; font-weight: 650; letter-spacing: .01em; }.privacy-policy-link { margin-top: 14px; }.privacy-policy-link a { font-weight: 700; }.purchase-download-button { text-decoration: none; }.legal-page { width: min(900px, calc(100% - 40px)); padding: 74px 0 110px; position: relative; z-index: 1; }.legal-hero { padding: 56px 0 42px; max-width: 760px; }.legal-hero h1 { margin: 8px 0 14px; font-size: clamp(42px, 7vw, 72px); letter-spacing: -.055em; line-height: .98; }.legal-hero > p { color: var(--secondary); font-size: 19px; line-height: 1.55; max-width: 720px; }.legal-hero small { display: block; margin-top: 18px; color: var(--muted); }.legal-card { padding: 30px 32px; margin: 0 0 18px; }.legal-card h2 { margin: 0 0 12px; font-size: 23px; letter-spacing: -.025em; }.legal-card p { margin: 0 0 12px; color: var(--secondary); line-height: 1.65; }.legal-card p:last-child { margin-bottom: 0; }.legal-card a { font-weight: 700; }.legal-inline-button { display: inline-flex; margin-right: 10px; }@media (max-width: 720px) {
  .legal-page { width: min(100% - 28px, 900px); padding-top: 34px; }
  .legal-card { padding: 24px 22px; }
  .platform-legal-note { width: min(100% - 36px, 980px); margin-bottom: 42px; }
}
.mini-progress .progress-68 { --progress: 68%; }
.mini-progress .progress-39 { --progress: 39%; }
.mini-progress .progress-0 { --progress: 0%; }

/* v0.57 — supported-source strip refinement */
.platform-strip {
  margin-top: 34px;
  padding: 34px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(560px, 1.55fr);
  column-gap: 56px;
  row-gap: 26px;
  align-items: start;
}
.platform-strip-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 3px;
}
.platform-kicker {
  color: var(--blue);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.platform-strip-copy strong {
  max-width: 310px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.platform-strip-copy > span:last-child {
  max-width: 330px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.5;
}
.platform-strip-content {
  min-width: 0;
}
.platform-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.platform-list .platform-source-chip {
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--glass-subtle) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px var(--highlight);
}
.platform-list .platform-source-chip .source-service-logo {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
.platform-strip-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}
.platform-foot-separator {
  opacity: .62;
}
.platform-strip .platform-legal-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.platform-strip .platform-legal-note a {
  flex: 0 0 auto;
  color: var(--secondary);
  font-weight: 650;
  text-decoration: none;
}
.platform-strip .platform-legal-note a:hover {
  color: var(--text);
}
@media (max-width: 980px) {
  .platform-strip {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .platform-strip-copy strong,
  .platform-strip-copy > span:last-child {
    max-width: 620px;
  }
}
@media (max-width: 720px) {
  .platform-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform-strip .platform-legal-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media (max-width: 460px) {
  .platform-list {
    grid-template-columns: 1fr;
  }
  .platform-strip-foot {
    flex-wrap: wrap;
  }
}


/* v0.58 — flatten supported sources; these are labels, not controls. */
.platform-list {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  column-gap: 30px;
  row-gap: 17px;
  align-items: center;
}
.platform-list .platform-source-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 2px;
  color: var(--secondary);
}
.platform-list .platform-source-item .source-service-logo {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}
.platform-list .platform-source-item strong {
  min-width: 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 660;
  letter-spacing: -.01em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .platform-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 14px;
  }
}

@media (max-width: 460px) {
.platform-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
.platform-list .platform-source-item strong{
    font-size: 12px;
  }
}
@container slurp-preview (max-width: 460px) {
.platform-list .platform-source-item .source-service-logo{
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}


/* v0.59 — mobile layout hardening --------------------------------------
   Keep the product recreation and feature cards native-looking on phones
   without retaining desktop-only reserved columns or absolute footer art. */

@media (max-width: 680px) {
#features .feature-card, #features .feature-large, #features .feature-wide, #features .feature-telegram-card, #features .feature-live-card{
    min-height: 0 !important;
  }
#features .mini-url, #features .quality-pills, #features .queue-lines, #features .browser-row, #features .engine-line, #features .provider-mini{
    position: static !important;
    inset: auto !important;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-top: 24px;
  }
#features .quality-pills, #features .browser-row{
    flex-wrap: wrap;
  }
#features .engine-line{
    min-height: 46px;
    height: auto;
    padding-block: 10px;
  }
#features .engine-line > span:nth-child(2){
    min-width: 0;
  }
#features .engine-line b{
    margin-left: auto;
    flex: 0 0 auto;
  }
#features .provider-mini{
    padding: 12px;
  }
}
@container slurp-preview (max-width: 680px) {
#how .how-app-layout{
    grid-template-columns: minmax(0, 1fr) !important;
  }
#how .how-sidebar{
    display: none !important;
  }
#how .how-app-main{
    grid-column: 1 !important;
    width: 100%;
    min-width: 0;
  }
#how .how-new-center{
    width: calc(100% - 28px) !important;
    max-width: none;
    transform: translateY(-4px);
  }
#how .how-new-heading{
    height: 58px;
  }
#how .how-new-heading h3{
    font-size: 22px;
  }
#how .how-new-heading p{
    top: 33px;
    font-size: 12.5px;
  }
#how .how-url-card, #how .how-paste-preview{
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
  }
#how .how-paste-preview{
    margin-top: 14px;
    padding: 9px;
    gap: 10px;
  }
#how .how-paste-preview > img, #how .walkthrough-thumb-paste{
    width: 78px;
    height: 48px;
    flex: 0 0 78px;
  }
#how .how-paste-preview strong{
    font-size: 11.5px;
  }
#how .how-paste-preview span{
    font-size: 10px;
  }
#how .how-result-state, #how .how-queue-state, #how .how-history-state{
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}



@media (max-width: 430px) {
#features .feature-card{
    padding: 20px;
  }
#features .feature-card h3{
    font-size: 22px;
    margin-top: 22px;
  }
#features .feature-card p{
    font-size: 13.5px;
  }
}
@container slurp-preview (max-width: 430px) {
#how .how-app-window{
    height: 510px;
  }
#how .how-new-center{
    width: calc(100% - 22px) !important;
  }
#how .how-url-card{
    height: 50px;
    padding: 0 9px 0 13px;
    gap: 9px;
  }
#how .how-url-value{
    font-size: 13px;
  }
#how .how-url-action{
    width: 32px;
    height: 32px;
  }
}



/* v0.78 — native URL-effect surface + rounded HDR compositor ------------
   Slurp's native renderer uses an 18 pt oversized surface so bloom dies away
   before a rectangular drawing boundary can become visible. Keep the SDR
   website renderer on the same geometry. The HDR shader has its own exact
   19 px inset and now fades against the capsule SDF rather than the GPU crop. */
#how .how-url-effects {
  inset: -18px !important;
  width: calc(100% + 36px) !important;
  height: calc(100% + 36px) !important;
}
#how .how-url-hdr-effects {
  position: absolute;
  inset: -19px;
  width: calc(100% + 38px);
  height: calc(100% + 38px);
  pointer-events: none;
  z-index: 3;
  dynamic-range-limit: no-limit;
}
#how .how-url-hdr-effects[hidden] { display: none; }
#how .how-url-card > :not(canvas) { position: relative; z-index: 4; }
#how .how-paste-preview .source-service-logo {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  flex: 0 0 10px !important;
  object-fit: contain !important;
  border-radius: 2px;
}