/* pdfmoo — styles (landing base shared with the sister sites, own palette) */
:root {
  --bg: #0a0a12;
  --bg2: #0f0f1a;
  --s1: #14131f;
  --s2: #1b1a29;
  --s3: #252338;
  --line: rgba(255, 255, 255, .075);
  --line2: rgba(255, 255, 255, .14);
  --text: #f6f3fa;
  --mute: #a39db2;
  --dim: #6f6980;
  --pink: #ff4d6a;
  --orange: #b45cff;
  --yellow: #4f8bff;
  --cyan: #4de1ff;
  --green: #4dff9a;
  --grad: linear-gradient(100deg, var(--pink), var(--orange) 55%, var(--yellow));
  --r: 18px;
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, canvas, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; }
::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 40px); }

/* ─── buttons ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .2s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s, background .2s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad); color: #1a0a10; box-shadow: 0 10px 30px -10px rgba(255, 77, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255, 110, 70, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-ghost { background: var(--s2); border: 1px solid var(--line2); color: var(--text); }
.btn-ghost:hover { background: var(--s3); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-xl { padding: 18px 34px; font-size: 18px; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--s1); transition: background .15s, border-color .15s, transform .15s; }
.icon-btn:hover { background: var(--s2); border-color: var(--line2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn[aria-pressed="true"] { color: var(--orange); border-color: rgba(180, 92, 255, .5); background: rgba(180, 92, 255, .1); }
.link { background: none; border: 0; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }

/* ─── nav ─── */
.nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px) saturate(1.4); background: rgba(10, 10, 18, .72); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: -.03em; }
.logo b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; color: var(--mute); }
.nav-links > a { text-decoration: none; transition: color .15s; }
.nav-links > a:hover { color: var(--text); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--text); }
.lang summary::-webkit-details-marker { display: none; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--s2); border: 1px solid var(--line2); border-radius: 14px; padding: 6px; display: grid; min-width: 150px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.lang-menu a { padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--text); }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--s3); }
@media (max-width: 720px) { .nav-links > a { display: none; } }

/* ─── hero (CleanMyMac-style: glossy icon, aurora, product window) ─── */
.hero { position: relative; overflow: hidden; padding: 118px 0 0; border-radius: 0 0 56px 56px; isolation: isolate;
  background: linear-gradient(180deg, #0c0b1a 0%, #120f26 55%, #1c1236 100%); }
.aurora { position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * -30px), calc(var(--my, 0) * -20px), 0); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; animation: drift 18s ease-in-out infinite alternate; }
.aurora .b1 { width: 620px; height: 520px; left: 2%; top: 4%; background: #ff4d6a; }
.aurora .b2 { width: 560px; height: 480px; right: 4%; top: 0; background: #b45cff; animation-duration: 22s; animation-delay: -6s; }
.aurora .b3 { width: 520px; height: 420px; left: 34%; top: 32%; background: #3d6bff; opacity: .4; animation-duration: 26s; animation-delay: -12s; }
.aurora .b4 { width: 420px; height: 360px; right: 22%; top: 52%; background: #4f8bff; opacity: .22; animation-duration: 20s; animation-delay: -3s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } 100% { transform: translate(-40px, 70px) scale(.94); } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(500px circle at var(--cx, 50%) var(--cy, 30%), rgba(255, 255, 255, .07), transparent 60%); }
.hero-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

.app-icon { width: 136px; height: 136px; margin-bottom: 22px; perspective: 900px; animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
.ai-tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.ai-shadow { position: absolute; inset: 18% 10% -12%; border-radius: 40%; background: radial-gradient(closest-side, rgba(255, 77, 106, .75), transparent); filter: blur(22px); transform: translateZ(-40px); }
.ai-body { position: absolute; inset: 0; border-radius: 36px; overflow: hidden; display: grid; place-items: center; transform: translateZ(0);
  background: radial-gradient(120% 90% at 30% 10%, #ff8296 0%, transparent 55%), linear-gradient(140deg, #ff4d6a 0%, #9b5cff 52%, #4f8bff 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 -10px 24px rgba(50, 10, 90, .35), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 30px 60px -20px rgba(255, 77, 106, .8); }
.ai-body::before { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04)); border-radius: 36px 36px 50% 50% / 36px 36px 22px 22px; }
.ai-bars { position: relative; display: flex; align-items: center; gap: 6px; height: 66px; transform: translateZ(30px); }
.ai-bars i { width: 8px; border-radius: 6px; background: #14102a; box-shadow: 0 1px 0 rgba(255, 255, 255, .35); height: calc(var(--h, .5) * 100%); transition: height .18s cubic-bezier(.3, 1.6, .5, 1); }
.ai-glare { position: absolute; inset: -40%; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .55), transparent 32%); mix-blend-mode: soft-light; pointer-events: none; }

.badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(77, 255, 154, .08); border: 1px solid rgba(77, 255, 154, .25); color: #b8ffd6; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(8px); }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* the pulse is a scaled ring (transform + opacity only): animating box-shadow repainted every frame */
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(77, 255, 154, .55); animation: ping 2s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.5); opacity: 0; } }
.hero h1 { font: 800 clamp(42px, 6.6vw, 86px)/1 var(--display); letter-spacing: -.05em; margin-bottom: 22px; max-width: 980px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 19px; color: #c9c1d6; max-width: 640px; margin: 0 0 32px; }

.drop { position: relative; display: flex; align-items: center; gap: 22px; width: min(760px, 100%); padding: 22px 22px 22px 28px; border-radius: 28px; cursor: pointer; text-align: left; isolation: isolate;
  background: rgba(16, 14, 32, .62); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s, border-color .3s; }
.drop::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(180, 92, 255, .95), rgba(255, 77, 106, .5) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.drop::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(255, 77, 106, .16), transparent 60%); opacity: 0; transition: opacity .3s; }
.drop:hover, .drop.over { transform: translateY(-3px) scale(1.01); border-color: transparent; box-shadow: 0 40px 90px -30px rgba(255, 77, 106, .55); }
.drop:hover::before, .drop:hover::after, .drop.over::before, .drop.over::after { opacity: 1; }
.drop.over { transform: scale(1.03); }
.drop-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 2px dashed rgba(180, 92, 255, .0); transition: border-color .3s; }
.drop.over .drop-ring { border-color: rgba(180, 92, 255, .9); animation: dash 1s linear infinite; }
@keyframes dash { 50% { opacity: .5; } }
.drop-txt { display: grid; flex: 1; min-width: 0; }
.drop-cta { font: 700 21px/1.2 var(--display); letter-spacing: -.03em; }
.drop-sub { color: var(--mute); font-size: 14px; margin-top: 4px; }
.drop-btn { pointer-events: none; flex: none; }
.drop-formats { margin: 14px 0 0; font-size: 11.5px; letter-spacing: .14em; color: var(--dim); font-weight: 600; }
.drop-eq { display: flex; align-items: flex-end; gap: 4px; height: 34px; flex: none; }
.drop-eq i { width: 5px; border-radius: 3px; background: var(--grad); animation: eq 1.1s ease-in-out infinite; animation-play-state: paused; height: 40%; transform-origin: 50% 100%; }
.drop:hover .drop-eq i, .drop.over .drop-eq i { animation-play-state: running; }
.drop-eq i:nth-child(1) { animation-delay: -.2s; } .drop-eq i:nth-child(2) { animation-delay: -.6s; height: 80%; } .drop-eq i:nth-child(3) { animation-delay: -.1s; height: 55%; } .drop-eq i:nth-child(4) { animation-delay: -.8s; height: 95%; } .drop-eq i:nth-child(5) { animation-delay: -.4s; height: 35%; }
@keyframes eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; list-style: none; padding: 0; margin: 26px 0 0; color: var(--mute); font-size: 14px; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--orange); }

/* product window */
.showcase { margin-top: 70px; perspective: 1800px; }
.window { position: relative; border-radius: 26px 26px 0 0; padding: 0; background: linear-gradient(180deg, rgba(36, 26, 48, .92), rgba(16, 15, 32, .96)); border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0;
  box-shadow: 0 -30px 120px -40px rgba(255, 77, 106, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  transform-origin: 50% 100%; transform: rotateX(calc(var(--k, 1) * 22deg)) scale(calc(1 - var(--k, 1) * .08)); will-change: transform; }
.win-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin: 0 auto; font-size: 13px; color: var(--mute); font-weight: 600; transform: translateX(-30px); }
.win-body { position: relative; padding: 22px 26px 120px; }
.win-film { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 5px; border-radius: 12px; background: #07060a; }
.win-film i { aspect-ratio: 16/9; border-radius: 6px; background: linear-gradient(135deg, #3a1d5c, #c2416b 60%, #ffb35c); transition: transform .4s cubic-bezier(.2, .9, .3, 1.4), filter .3s; }
.win-film i:nth-child(2n) { background: linear-gradient(135deg, #1f3a6b, #6b3fc2 60%, #ff6b9d); }
.win-film i:nth-child(3n) { background: linear-gradient(135deg, #5c1d3a, #ff5c5c 60%, #4f8bff); }
.win-film i:nth-child(5n) { background: linear-gradient(135deg, #1d5c55, #3fa6c2 60%, #b8ff6b); }
.win-film i:hover { transform: translateY(-6px) scale(1.12); filter: brightness(1.25); z-index: 1; }
.win-wave { position: relative; margin-top: 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); cursor: none; }
#demoWave { width: 100%; height: 190px; display: block; }
.win-hint { position: absolute; right: 14px; top: 10px; font-size: 12px; color: var(--dim); pointer-events: none; transition: opacity .3s; }
.win-wave:hover .win-hint { opacity: 0; }
.win-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.win-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.win-chips > * { padding: 7px 12px; border-radius: 10px; font: 700 12.5px var(--display); border: 1px solid var(--line); color: var(--mute); background: var(--s1); transition: transform .25s cubic-bezier(.2, .9, .3, 1.5), color .2s, border-color .2s; }
.win-chips > *:hover { transform: translateY(-3px); color: var(--text); border-color: var(--line2); }
.win-chips b { color: #1a0a10; background: var(--grad); border-color: transparent; }
.win-time { text-align: right; }
.win-time span { display: block; font: 700 28px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.win-time small { color: var(--mute); font-size: 12px; }
.glow-btn { position: absolute; left: 50%; bottom: 30px; width: 104px; height: 104px; margin-left: -52px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font: 800 18px var(--display);
  background: radial-gradient(circle at 35% 30%, #ff7aa6, #ff4d6a 45%, #c21d5c 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 40px rgba(255, 77, 106, .7), 0 0 80px 10px rgba(255, 110, 60, .35);
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, 1)); transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .3s; }
.glow-btn::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(180, 92, 255, .45), transparent 65%); animation: breathe 2.4s ease-in-out infinite; z-index: -1; }
@keyframes breathe { 50% { transform: scale(1.25); opacity: .5; } }
.glow-btn:hover { --s: 1.08; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 16px 50px rgba(255, 77, 106, .9), 0 0 120px 20px rgba(180, 92, 255, .5); }
.glow-btn:active { --s: .95; }
.gb-ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); pointer-events: none; }
.gb-ring circle { fill: none; stroke: #4f8bff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: calc(340 - var(--gp, 0) * 340); filter: drop-shadow(0 0 6px #4f8bff); }
#demoGoTxt { position: relative; font-variant-numeric: tabular-nums; }
.demo-chip { position: absolute; left: 50%; bottom: 28px; width: min(420px, calc(100% - 40px)); translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(36, 30, 48, .95); border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .9, .3, 1.5); text-align: left; }
.window.done .demo-chip { opacity: 1; transform: none; }
.window.done .glow-btn { --s: 0; }
.chip-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--grad); color: #1a0a10; font: 800 12px var(--display); flex: none; }
.chip-txt { display: grid; flex: 1; min-width: 0; }
.chip-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-txt small { color: var(--mute); }
.chip-txt em { font-style: normal; color: var(--green); font-weight: 600; }
.chip-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(77, 255, 154, .14); color: var(--green); font-weight: 800; flex: none; }

/* stats */
.stats { padding: 90px 0 40px; }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 26px; border-radius: 24px; background: var(--s1); border: 1px solid var(--line); }
.stat b { display: block; font: 800 clamp(38px, 4.4vw, 58px)/1 var(--display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff, #c9b8d8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat small { display: block; margin-top: 10px; color: var(--mute); font-size: 14.5px; }

@media (max-width: 900px) {
  .hero { padding-top: 96px; border-radius: 0 0 34px 34px; }
  .app-icon { width: 112px; height: 112px; margin-bottom: 18px; }
  .ai-body { border-radius: 27px; } .ai-bars { height: 54px; gap: 5px; } .ai-bars i { width: 7px; }
  .drop { flex-wrap: wrap; justify-content: center; text-align: center; padding: 22px; gap: 14px; }
  .drop-txt { flex-basis: 100%; }
  .showcase { margin-top: 44px; }
  .win-body { padding: 14px 14px 110px; }
  .win-film { grid-template-columns: repeat(5, 1fr); } .win-film i:nth-child(n+6) { display: none; }
  #demoWave { height: 130px; }
  .win-time { display: none; }
  .stats-in { grid-template-columns: 1fr 1fr; }
  .stats { padding: 56px 0 20px; }
}

/* ─── reveal on scroll ─── */
.js [data-reveal], .js [data-stagger] > * { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), filter .9s var(--d, 0s); }
[data-reveal].in, [data-stagger].in > * { opacity: 1; transform: none; filter: none; }
.w { display: inline-block; }
.js .w { opacity: 0; transform: translateY(.5em) rotate(4deg); filter: blur(8px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .9, .3, 1.2), filter .8s; transition-delay: calc(var(--i) * 70ms); }
.in .w, [data-words].in .w { opacity: 1; transform: none; filter: none; }
.grad .w { background: var(--grad); background-size: var(--gw, 100%) 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }

/* ─── hover magic: spotlight cards, magnetic buttons ─── */
.spot { --x: 50%; --y: 50%; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--x) var(--y), rgba(180, 92, 255, .13), transparent 55%); }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(300px circle at var(--x) var(--y), rgba(160, 120, 255, .9), rgba(255, 77, 106, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover::before, .spot:hover::after { opacity: 1; }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.tilt:hover { --ty: -4px; transition: transform .12s linear, border-color .3s; }
.magnetic { transform: translate(var(--mx2, 0), var(--my2, 0)); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .55), transparent 60%); opacity: 0; transition: opacity .25s; }
.btn-primary:hover::after { opacity: 1; }

/* per-tile hover micro-animations */
.tile > svg { transition: transform .5s cubic-bezier(.2, .9, .3, 1.6); }
.tile:hover > svg { transform: scale(1.18) rotate(-8deg); }
.tile-lock:hover > svg { animation: shake .5s; }
@keyframes shake { 20% { transform: scale(1.18) rotate(-10deg); } 40% { transform: scale(1.18) rotate(8deg); } 60% { transform: scale(1.18) rotate(-6deg); } 80% { transform: scale(1.18) rotate(3deg); } }
.tile-inf:hover > svg { animation: spin 1.4s cubic-bezier(.4, 0, .2, 1); }
@keyframes spin { to { transform: scale(1.18) rotate(360deg); } }
.tile-ring .ring-ico { animation-play-state: paused; }
.tile-ring:hover .ring-ico { animation: ringHard .9s ease-in-out infinite; }
@keyframes ringHard { 0%, 100% { transform: rotate(0) scale(1.15); } 20% { transform: rotate(22deg) scale(1.15); } 40% { transform: rotate(-20deg) scale(1.15); } 60% { transform: rotate(14deg) scale(1.15); } 80% { transform: rotate(-8deg) scale(1.15); } }
.cover-stack i { transition: transform .55s cubic-bezier(.2, .9, .3, 1.5), left .55s cubic-bezier(.2, .9, .3, 1.5); }
.tile-cover:hover .cover-stack i:nth-child(1) { left: -6px; transform: rotate(-18deg) translateY(4px); }
.tile-cover:hover .cover-stack i:nth-child(2) { transform: translateY(-10px) scale(1.12); }
.tile-cover:hover .cover-stack i:nth-child(3) { left: 70px; transform: rotate(18deg) translateY(4px); }
.race-bar .slow, .race-bar .fast { animation-play-state: paused; }
.tile-speed:hover .race-bar .slow, .tile-speed:hover .race-bar .fast { animation-play-state: running; }
.tile-wave:hover .mini-wave i { animation-duration: 1.2s; }
.steps li { position: relative; transition: transform .4s cubic-bezier(.2, .9, .3, 1.4), border-color .3s; }
.step-n { transition: transform .5s cubic-bezier(.2, .9, .3, 1.6), box-shadow .3s; }
.steps li:hover .step-n { transform: rotate(-12deg) scale(1.15); box-shadow: 0 10px 30px -6px rgba(255, 77, 106, .8); }
.fmt-list span { transition: transform .3s cubic-bezier(.2, .9, .3, 1.6), color .2s, border-color .2s, background .2s; }
.fmt-list span:hover { transform: translateY(-4px) scale(1.08); color: var(--text); border-color: rgba(180, 92, 255, .6); }
.fmt-list.out span:hover { box-shadow: 0 10px 24px -8px rgba(255, 77, 106, .8); color: #1a0a10; }
.faq details { position: relative; }
.vs tbody tr { transition: background .2s; }
.vs tbody tr:hover { background: rgba(255, 255, 255, .03); }
.vs tbody tr:hover td.us { color: var(--yellow); }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track span { transition: color .2s, transform .3s; }
.strip-track span:hover { color: var(--text); transform: scale(1.08); }

/* nav: floating glass pill with sliding hover indicator */
.nav { position: fixed; left: 0; right: 0; top: 0; background: transparent; border: 0; backdrop-filter: none; padding-top: 14px; }
.nav-in { height: 60px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(16, 15, 32, .62); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.nav-links { position: relative; gap: 4px; }
.nav-links > a { position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; }
.nav-pill { position: absolute; z-index: 0; top: 50%; height: 36px; translate: 0 -50%; border-radius: 999px; background: rgba(255, 255, 255, .08); opacity: 0; transition: left .35s cubic-bezier(.2, .9, .3, 1.2), width .35s cubic-bezier(.2, .9, .3, 1.2), opacity .25s; pointer-events: none; }
.logo-mark { transition: transform .6s cubic-bezier(.2, .9, .3, 1.6); }
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.12); }

@media (hover: none) { .spot::before, .spot::after { display: none; } }
@media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > *, .w { opacity: 1 !important; transform: none !important; filter: none !important; } .window { transform: none; } }

/* ─── marquee strip ─── */
.strip { border-block: 1px solid var(--line); overflow: hidden; padding: 16px 0; background: var(--bg2); }
.strip-track { display: flex; gap: 46px; width: max-content; animation: marquee 40s linear infinite; font: 600 15px var(--display); color: var(--dim); letter-spacing: -.01em; }
.strip-track span { white-space: nowrap; }
.strip-track span:nth-child(3n+1) { color: var(--mute); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─── sections ─── */
.sec { padding: 110px 0; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.sec h2 { font: 800 clamp(30px, 4.4vw, 52px)/1.06 var(--display); letter-spacing: -.045em; max-width: 820px; margin-bottom: 48px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { padding: 28px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 22px; background: var(--grad); color: #1a0a10; font: 800 18px var(--display); }
.steps h3 { font: 700 20px/1.25 var(--display); margin-bottom: 8px; }
.steps p { margin: 0; color: var(--mute); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .sec { padding: 72px 0; } }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); transition: border-color .2s, transform .3s; }
.tile:hover { border-color: var(--line2); transform: translateY(-2px); }
.tile > svg { width: 30px; height: 30px; color: var(--orange); margin-bottom: 18px; }
.tile h3 { font: 700 19px/1.25 var(--display); margin-bottom: 8px; letter-spacing: -.03em; }
.tile p { margin: 0; color: var(--mute); font-size: 15px; }
.tile-xl { grid-column: span 2; grid-row: span 2; background: radial-gradient(500px 300px at 0% 0%, rgba(255, 77, 106, .14), transparent 70%), var(--s1); }
.tile-xl h3 { font-size: 28px; }
.tile-wide { grid-column: span 2; }
.race { margin-top: 34px; display: grid; gap: 16px; }
.race-row { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 14px; font-size: 14px; color: var(--mute); }
.race-row b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.race-row.me span { color: var(--text); font-weight: 700; }
.race-row.me b { color: var(--green); }
.race-bar { height: 12px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.race-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; }
.race-bar .slow { background: #5a5468; animation: race 8s linear infinite; }
.race-bar .fast { background: var(--grad); animation: raceFast 8s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes race { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes raceFast { 0% { transform: scaleX(0); } 4%, 100% { transform: scaleX(1); } }
.race small { color: var(--dim); font-size: 12.5px; }
.mini-wave { margin-top: 22px; height: 64px; border-radius: 12px; position: relative; overflow: hidden; container-type: inline-size;
  background: repeating-linear-gradient(90deg, transparent 0 3px, var(--s1) 3px 6px), linear-gradient(90deg, #3a3446 0 22%, transparent 22% 70%, #3a3446 70%), var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64' preserveAspectRatio='none'%3E%3Cpath d='M0 32 Q10 10 20 32 T40 32 T60 32 Q70 0 80 32 T100 32 Q110 14 120 32 T140 32 Q150 4 160 32 T180 32 Q190 18 200 32 T220 32 Q230 2 240 32 T260 32 Q270 12 280 32 T300 32 Q290 54 280 32 Q270 62 260 32 T240 32 Q230 50 220 32 T200 32 Q190 64 180 32 T160 32 Q150 46 140 32 T120 32 Q110 60 100 32 T80 32 Q70 52 60 32 T40 32 Q30 58 20 32 T0 32Z'/%3E%3C/svg%3E") center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64' preserveAspectRatio='none'%3E%3Cpath d='M0 32 Q10 10 20 32 T40 32 T60 32 Q70 0 80 32 T100 32 Q110 14 120 32 T140 32 Q150 4 160 32 T180 32 Q190 18 200 32 T220 32 Q230 2 240 32 T260 32 Q270 12 280 32 T300 32 Q290 54 280 32 Q270 62 260 32 T240 32 Q230 50 220 32 T200 32 Q190 64 180 32 T160 32 Q150 46 140 32 T120 32 Q110 60 100 32 T80 32 Q70 52 60 32 T40 32 Q30 58 20 32 T0 32Z'/%3E%3C/svg%3E") center/100% 100%; }
.mini-wave i { position: absolute; top: 0; bottom: 0; left: 22%; width: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: scrub 4s ease-in-out infinite alternate; will-change: transform; }
@keyframes scrub { to { transform: translateX(48cqw); } }
.ring-ico { font-size: 30px; display: block; margin-bottom: 14px; animation: ring 2.6s ease-in-out infinite; transform-origin: 50% 10%; width: max-content; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(16deg); } 68% { transform: rotate(-14deg); } 72% { transform: rotate(10deg); } 76% { transform: rotate(-6deg); } 80% { transform: rotate(0); } }
.cover-stack { position: relative; height: 54px; margin-bottom: 16px; }
.cover-stack i { position: absolute; width: 54px; height: 54px; border-radius: 10px; border: 2px solid var(--s1); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.cover-stack i:nth-child(1) { left: 0; background: linear-gradient(135deg, #3a1d5c, #c2416b 60%, #ffb35c); transform: rotate(-8deg); }
.cover-stack i:nth-child(2) { left: 30px; background: linear-gradient(135deg, #1f3a6b, #6b3fc2 60%, #ff6b9d); }
.cover-stack i:nth-child(3) { left: 60px; background: linear-gradient(135deg, #1d5c55, #3fa6c2 60%, #b8ff6b); transform: rotate(8deg); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile-xl, .tile-wide { grid-column: auto; grid-row: auto; } .race-row { grid-template-columns: 80px 1fr 48px; } }

.table-wrap { overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--s1); }
.vs { width: 100%; border-collapse: collapse; min-width: 560px; }
.vs th, .vs td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.vs tr:last-child td { border-bottom: 0; }
.vs th { font: 700 15px var(--display); color: var(--mute); }
.vs th.us { color: var(--text); }
.vs td:first-child { color: var(--mute); }
.vs td.us { font-weight: 700; color: var(--text); background: rgba(180, 92, 255, .06); }
.vs th.us { background: rgba(180, 92, 255, .1); }
.vs td:last-child { color: var(--dim); }

.formats { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.fmt-col { padding: 28px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.fmt-col h3 { font: 700 18px var(--display); margin-bottom: 18px; }
.fmt-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fmt-list span { padding: 8px 14px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); font: 600 13px var(--display); color: var(--mute); }
.fmt-list.out span { color: #1a0a10; background: var(--grad); border: 0; }
@media (max-width: 720px) { .formats { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--s1); border: 1px solid var(--line); transition: border-color .2s; }
.faq details[open] { border-color: var(--line2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font: 400 26px var(--ui); color: var(--orange); transition: rotate .25s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { margin: 0; padding: 0 22px 22px; color: var(--mute); }

.cta { text-align: center; background: radial-gradient(700px 300px at 50% 100%, rgba(255, 77, 106, .2), transparent 70%); }
.cta h2 { margin: 0 auto 34px; }
.foot { padding: 34px 0 50px; color: var(--dim); font-size: 14px; }
.foot-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-in .logo { font-size: 17px; color: var(--text); }
.foot-in .logo-mark { width: 24px; height: 24px; }
.foot-in a { margin-left: auto; }
.legal p { color: var(--mute); font-size: 17px; }

.drop-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(10, 10, 18, .82); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drop-overlay > div { display: grid; justify-items: center; gap: 14px; padding: 60px 80px; border-radius: 30px; border: 2px dashed var(--orange); font: 700 26px var(--display); }
.drop-overlay .drop-eq { height: 50px; } .drop-overlay .drop-eq i { width: 8px; }
body.dragging .drop-overlay { opacity: 1; }

/* ─── tools: grid, about text, footer links, tool-specific focus ─── */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tool-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 18px; border-radius: 20px; text-decoration: none; background: var(--s1); border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), border-color .25s, background .25s; }
.tool-card:hover { border-color: var(--line2); background: var(--s2); }
.tool-card.on { border-color: rgba(180, 92, 255, .55); background: rgba(180, 92, 255, .07); }
.tc-ico { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 24px; background: linear-gradient(145deg, rgba(255, 77, 106, .18), rgba(79, 139, 255, .12)); border: 1px solid rgba(255, 255, 255, .08); transition: transform .5s cubic-bezier(.2, .9, .3, 1.7); }
.tool-card:hover .tc-ico { transform: rotate(-10deg) scale(1.15); }
.tool-card b { font: 700 15.5px/1.2 var(--display); letter-spacing: -.02em; }
.tool-card small { color: var(--mute); font-size: 13px; line-height: 1.35; }
@media (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tools-grid { grid-template-columns: 1fr; } }
.about h2 { margin-bottom: 26px; }
.about-text p { font-size: 18px; color: #cfc8da; margin: 0 0 18px; }
.foot-tools { margin-top: 18px; font-size: 13px; line-height: 2; color: var(--dim); }
.foot-tools a { color: var(--mute); text-decoration: none; }
.foot-tools a:hover { color: var(--text); }
.rec-link.rec-big { margin-top: 20px; padding: 16px 28px; font-size: 18px; color: var(--text); border-color: rgba(255, 61, 90, .6); background: rgba(255, 61, 90, .12); box-shadow: 0 16px 50px -16px rgba(255, 61, 90, .7); }
.rec-link.rec-big .rec-dot { width: 14px; height: 14px; }
.flash { animation: flash 1.6s ease-out 2; border-radius: 14px; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(180, 92, 255, .0); background: transparent; } 25% { box-shadow: 0 0 0 6px rgba(180, 92, 255, .35); background: rgba(180, 92, 255, .08); } 100% { box-shadow: 0 0 0 14px rgba(180, 92, 255, 0); background: transparent; } }

/* file inputs: visually hidden but still "rendered" — iOS Safari won't open a picker for display:none inputs */
.vh-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }


/* ═════════════ pdfmoo ═════════════ */
.logo span b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* hero icon: a glossy sheet with cow spots */
.ai-doc { position: relative; width: 62px; height: 78px; border-radius: 10px 4px 10px 10px; background: linear-gradient(180deg, #fff, #ece8ff); transform: translateZ(30px) rotate(-4deg);
  box-shadow: 0 10px 22px -6px rgba(30, 10, 60, .55), inset 0 -3px 0 rgba(120, 100, 200, .25); overflow: hidden; }
.ai-fold { position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: linear-gradient(225deg, transparent 50%, #cfc6ff 50%); }
.ai-doc > i:not(.ai-fold) { position: absolute; border-radius: 50% 45% 55% 40%; background: #1a1530; }
.ai-doc .s1 { width: 20px; height: 15px; left: 7px; top: 12px; } .ai-doc .s2 { width: 14px; height: 11px; right: 9px; top: 34px; transform: rotate(20deg); } .ai-doc .s3 { width: 10px; height: 8px; left: 13px; top: 46px; }
.ai-doc b { position: absolute; left: 9px; right: 9px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #ff4d6a, #b45cff); opacity: .7; }
.ai-doc b:nth-of-type(1) { bottom: 18px; } .ai-doc b:nth-of-type(2) { bottom: 11px; right: 20px; } .ai-doc b:nth-of-type(3) { bottom: 4px; right: 30px; opacity: .4; }
.app-icon:hover .ai-doc { animation: wiggle .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wiggle { 30% { rotate: -6deg; } 60% { rotate: 5deg; } }

/* drop: a little stack of sheets that fans out on hover */
.drop-stack { position: relative; width: 50px; height: 58px; flex: none; }
.drop-stack i { position: absolute; inset: 0; border-radius: 7px 3px 7px 7px; background: #fff; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); transition: transform .45s cubic-bezier(.2, .9, .3, 1.4); }
.drop-stack i:nth-child(1) { background: #ffd0d8; transform: rotate(-10deg) translate(-4px, 2px); } .drop-stack i:nth-child(2) { background: #e2d4ff; transform: rotate(6deg) translate(3px, 1px); }
.drop-stack i:nth-child(3)::before { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 4px; border-radius: 3px; background: var(--grad); box-shadow: 0 9px 0 rgba(180, 92, 255, .35), 0 18px 0 rgba(180, 92, 255, .2); }
.drop:hover .drop-stack i:nth-child(1), .drop.over .drop-stack i:nth-child(1) { transform: rotate(-22deg) translate(-14px, 4px); }
.drop:hover .drop-stack i:nth-child(2), .drop.over .drop-stack i:nth-child(2) { transform: rotate(18deg) translate(14px, 2px); }
.drop:hover .drop-stack i:nth-child(3), .drop.over .drop-stack i:nth-child(3) { transform: translateY(-6px); }

/* product demo: pages from three files get merged, rotated, trimmed and compressed */
.win-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; padding: 24px 26px 34px; }
.demo-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, .25); min-height: 300px; align-content: start; }
.dp { --c: #ff4d6a; position: relative; aspect-ratio: 3 / 4; border-radius: 8px; background: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7); transition: transform .6s cubic-bezier(.2, .9, .3, 1.2), opacity .4s, box-shadow .3s; cursor: grab; }
.dp::before { content: ""; position: absolute; left: 12%; right: 12%; top: 14%; height: 9%; border-radius: 3px; background: var(--c); opacity: .85; box-shadow: 0 260% 0 -2px rgba(30, 20, 60, .12), 0 380% 0 -2px rgba(30, 20, 60, .12), 0 500% 0 -2px rgba(30, 20, 60, .12); }
.dp::after { content: ""; position: absolute; left: 12%; right: 30%; bottom: 14%; height: 22%; border-radius: 4px; background: color-mix(in srgb, var(--c) 25%, #fff); }
.dp[data-c="b"] { --c: #b45cff; } .dp[data-c="c"] { --c: #4f8bff; }
.dp em { position: absolute; left: 50%; bottom: -22px; translate: -50% 0; font: 700 11px var(--display); font-style: normal; color: var(--mute); }
.dp:hover { transform: translateY(-6px) rotate(-2deg) scale(1.05); box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--c) 80%, transparent); z-index: 1; }
.dp.rot { transform: rotate(90deg) scale(.86); }
.dp.gone { transform: scale(.4) rotate(-12deg); opacity: 0; }
.dp.sel { box-shadow: 0 0 0 3px var(--c), 0 18px 30px -12px color-mix(in srgb, var(--c) 80%, transparent); }
.demo-side { display: flex; flex-direction: column; gap: 16px; position: relative; padding-bottom: 120px; }
.demo-files { display: flex; flex-wrap: wrap; gap: 6px; }
.df { padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); }
.df::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #ff4d6a; }
.df.b::before { background: #b45cff; } .df.c::before { background: #4f8bff; }
.demo-meter { padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.demo-meter small { display: block; color: var(--dim); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.demo-meter b { display: block; margin: 6px 0 10px; font: 700 22px var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dm-bar { height: 8px; border-radius: 9px; background: var(--s3); overflow: hidden; }
.dm-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--grad); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.demo-steps { display: grid; gap: 6px; }
.demo-steps span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--dim); transition: color .3s; }
.demo-steps span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); transition: background .3s, border-color .3s; flex: none; }
.demo-steps span.on { color: var(--text); }
.demo-steps span.on::before { border-color: transparent; background: var(--grad) ; box-shadow: 0 0 12px rgba(180, 92, 255, .6); }
.demo-side .glow-btn { bottom: 0; }

/* bento extras */
.target-meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 700 18px var(--display); flex-wrap: wrap; }
.target-meter i { flex: 1; min-width: 80px; height: 10px; border-radius: 9px; background: var(--s3); overflow: hidden; }
.target-meter i b { display: block; height: 100%; width: 100%; background: var(--grad); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.tile-target:hover .target-meter i b, .tile-target.in .target-meter i b { width: 16%; }
.target-meter em { font: 600 12px var(--ui); font-style: normal; color: #b8ffd6; padding: 4px 9px; border-radius: 99px; background: rgba(77, 255, 154, .1); }
.ws-mini { display: grid; grid-template-columns: repeat(3, 34px); gap: 8px; margin-bottom: 16px; }
.ws-mini i { aspect-ratio: 3/4; border-radius: 5px; background: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); transition: transform .5s cubic-bezier(.2, .9, .3, 1.4); }
.tile-ws:hover .ws-mini i:nth-child(2) { transform: translateX(42px); } .tile-ws:hover .ws-mini i:nth-child(3) { transform: translateX(-42px); }
.tile-ws:hover .ws-mini i:nth-child(5) { transform: rotate(90deg) scale(.8); } .tile-ws:hover .ws-mini i:nth-child(6) { transform: scale(.2); opacity: 0; }
.sign-scribble { display: block; margin-bottom: 14px; font: italic 600 34px/1 'Brush Script MT', 'Segoe Script', cursive; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.6, 0, .3, 1); }
.tile-sign:hover .sign-scribble, .tile-sign.in .sign-scribble { clip-path: inset(0 0 0 0); }

/* ═════════════ workspace ═════════════ */
body.editing { overflow: hidden; }
body.editing #landing, body.editing > .nav { display: none; }
.ws { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); }
.ws-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.ws-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ws-title .logo-mark { width: 34px; height: 34px; flex: none; }
.ws-title div { display: grid; min-width: 0; }
.ws-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-title small { color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ws-hist { display: flex; gap: 6px; }
.icon-btn:disabled { opacity: .35; pointer-events: none; }
.ws-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.ws-stage { position: relative; min-height: 0; display: flex; flex-direction: column; }
.files-bar { display: flex; gap: 8px; padding: 12px 18px 0; overflow-x: auto; scrollbar-width: none; flex: none; }
.fchip { --fc: #ff4d6a; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--s1); font-size: 12.5px; max-width: 260px; }
.fchip i { width: 10px; height: 10px; border-radius: 3px; background: var(--fc); box-shadow: 0 0 10px var(--fc); flex: none; }
.fchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fchip small { color: var(--dim); white-space: nowrap; }
.fchip button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--dim); }
.fchip button:hover { background: var(--s3); color: var(--text); }
.fchip button svg { width: 13px; height: 13px; }
.fchip.locked i { background: var(--yellow); }

.grid { --tw: 150px; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tw), 1fr)); gap: 30px 22px; padding: 22px 22px 60px; align-content: start; }
.pg { --fc: #ff4d6a; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pg img, .pg canvas { -webkit-user-drag: none; }
.pg-sheet { position: relative; width: 100%; aspect-ratio: var(--ar, .7071); display: grid; place-items: center; cursor: pointer; }
.pg-paper { position: relative; max-width: 100%; max-height: 100%; width: 100%; height: 100%; border-radius: 6px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 14px 30px -14px rgba(0, 0, 0, .9); transform: rotate(var(--rot, 0deg)) scale(var(--rs, 1)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.25), box-shadow .25s; }
.pg-paper canvas { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.pg-paper canvas.ok { opacity: 1; }
.pg-paper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%) -100% 0 / 200% 100%; animation: shimmer 1.4s infinite; }
.pg.ready .pg-paper::after { display: none; }
@keyframes shimmer { to { background-position: 100% 0; } }
.pg-sheet:hover .pg-paper { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 20px 36px -14px color-mix(in srgb, var(--fc) 70%, transparent); }
.pg[aria-selected="true"] .pg-paper { box-shadow: 0 0 0 3px var(--fc), 0 0 0 7px color-mix(in srgb, var(--fc) 22%, transparent), 0 20px 36px -14px color-mix(in srgb, var(--fc) 70%, transparent); }
.pg-check { position: absolute; left: -8px; top: -8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fc); color: #fff; font-size: 14px; font-weight: 800; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.6); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.pg[aria-selected="true"] .pg-check { transform: none; }
.pg-tools { position: absolute; right: 6px; top: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s; }
.pg-sheet:hover .pg-tools, .pg:focus-within .pg-tools { opacity: 1; transform: none; }
.pg-tools button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 0; color: #fff; background: rgba(12, 10, 24, .82); backdrop-filter: blur(6px); }
.pg-tools button:hover { background: var(--fc); }
.pg-tools button.del:hover { background: var(--pink); }
.pg-tools svg { width: 16px; height: 16px; }
.pg-cap { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pg-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
.pg-cap b { color: var(--text); font-weight: 700; }
.pg-blank .pg-paper { background: #fff repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 0, 0, .04) 22px 23px); }
.pg-img-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; font: 700 9px var(--display); color: #fff; background: rgba(0, 0, 0, .55); }
/* drag & drop reorder */
.pg.dragging { opacity: .25; }
.pg.drop-before .pg-sheet::before, .pg.drop-after .pg-sheet::after { content: ""; position: absolute; top: 4%; bottom: 4%; width: 4px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 14px rgba(180, 92, 255, .8); }
.pg.drop-before .pg-sheet::before { left: -14px; } .pg.drop-after .pg-sheet::after { right: -14px; }
/* split marks between pages */
.pg-cut { position: absolute; right: -22px; top: 50%; z-index: 3; width: 22px; height: 44px; translate: 0 -50%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--dim); opacity: 0; transition: opacity .2s; }
.pg-cut svg { width: 16px; height: 16px; transform: rotate(90deg); }
.grid.splitting .pg-cut { opacity: .7; }
.pg-cut:hover { opacity: 1 !important; color: var(--text); }
.pg.cut-after .pg-cut { opacity: 1; color: var(--pink); }
.pg.cut-after::after { content: ""; position: absolute; right: -12px; top: -6px; bottom: 18px; border-right: 2px dashed var(--pink); }
.pg-part { position: absolute; left: 0; top: -20px; font: 700 10px var(--display); color: var(--pink); letter-spacing: .06em; }
.grid.zip-mode .pg-part { display: block; }

.sel-bar { position: absolute; left: 50%; bottom: 64px; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 16px; background: rgba(28, 26, 44, .96); border: 1px solid var(--line2); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .9); animation: up .3s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
.sel-bar b { font-size: 13.5px; margin-right: 8px; white-space: nowrap; }
.sel-bar button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; font-size: 13px; font-weight: 600; }
.sel-bar button:hover { background: var(--s3); }
.sel-bar button.danger:hover { background: rgba(255, 77, 106, .25); color: #ffb3c0; }
.sel-bar svg { width: 18px; height: 18px; }
.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px; background: linear-gradient(0deg, var(--bg) 40%, transparent); pointer-events: none; }
.stage-foot > * { pointer-events: auto; }
.hint { color: var(--dim); font-size: 12.5px; }
.zoom-range { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; }
.zoom-range input { width: 120px; accent-color: #b45cff; }

/* panel */
.panel { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg2); }
.tools { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 8px; align-content: start; }
.tool { border-radius: 16px; border: 1px solid var(--line); background: var(--s1); transition: border-color .25s, background .25s; }
.tool.open { border-color: color-mix(in srgb, var(--tc, #b45cff) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tc, #b45cff) 10%, var(--s1)), var(--s1) 60%); }
.tool-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; text-align: left; }
.tool-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex: none; background: color-mix(in srgb, var(--tc, #b45cff) 18%, var(--s2)); transition: transform .4s cubic-bezier(.2, .9, .3, 1.6); }
.tool-h:hover .tool-ico { transform: rotate(-8deg) scale(1.08); }
.tool-h b { display: block; font-size: 14.5px; }
.tool-h small { display: block; color: var(--dim); font-size: 12px; }
.tool-h > span:nth-child(2) { flex: 1; min-width: 0; }
.tool-on { margin-left: auto; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #1a1030; background: var(--grad); }
.tool-b { display: none; padding: 2px 14px 14px; }
.tool.open .tool-b { display: grid; gap: 12px; animation: fadein .3s; }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } }
.opt-label { font-size: 12px; font-weight: 700; color: var(--mute); letter-spacing: .04em; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.seg2 button { padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--mute); line-height: 1.2; }
.seg2 button small { display: block; font-size: 10.5px; font-weight: 500; color: var(--dim); }
.seg2 button.on { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.field { display: grid; gap: 6px; }
.field input[type="text"], .field input[type="password"], .field input[type="number"], .field select, .tool-b textarea { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--bg); font-size: 14px; color: var(--text); }
.field input:focus, .field select:focus { outline: none; border-color: #b45cff; box-shadow: 0 0 0 3px rgba(180, 92, 255, .2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.range-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); }
.range-row input { accent-color: #b45cff; }
.range-row b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.chk { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: #b45cff; }
.tool-note { font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.tool-act { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-act .btn { flex: 1; }
.pos-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.pos-grid button { height: 26px; border-radius: 7px; border: 1px solid var(--line2); background: var(--bg); padding: 0; }
.pos-grid button.on { background: var(--grad); border-color: transparent; }
.est { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(77, 255, 154, .06); border: 1px solid rgba(77, 255, 154, .2); font-size: 13px; }
.est b { font: 700 17px var(--display); color: #b8ffd6; }
.panel-foot { padding: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--bg2); }
.out-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.out-sum span { font-weight: 700; }
.out-sum small { color: var(--dim); font-size: 12px; text-align: right; }
.btn-go { position: relative; width: 100%; height: 56px; font-size: 16px; overflow: hidden; isolation: isolate; }
.btn-go svg { width: 20px; height: 20px; }
.go-prog { position: absolute; inset: 0; z-index: -1; }
.go-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .28); transition: width .2s; }
.btn-go.busy { pointer-events: none; }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; background: rgba(6, 5, 12, .92); backdrop-filter: blur(10px); animation: fadein .25s; }
.v-page { display: grid; place-items: center; height: 100vh; padding: 40px 0 60px; }
.v-page canvas { max-height: 100%; max-width: 100%; width: auto !important; height: auto !important; border-radius: 6px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.v-close { position: absolute; right: 18px; top: 18px; }
.v-nav { justify-self: center; }
.v-cap { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; color: var(--mute); font-size: 13px; }

/* modal (password) */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(6, 5, 12, .8); backdrop-filter: blur(8px); }
.modal-card { width: min(420px, 100%); padding: 28px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line2); box-shadow: 0 40px 120px -30px rgba(180, 92, 255, .5); animation: up .35s cubic-bezier(.2, .9, .3, 1.3); }
.m-ico { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; background: var(--grad); color: #fff; }
.m-ico svg { width: 26px; height: 26px; }
.modal-card h3 { font: 700 22px var(--display); margin-bottom: 8px; }
.modal-card p { color: var(--mute); font-size: 14px; margin: 0 0 16px; }
.modal-card input { width: 100%; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line2); background: var(--bg); font-size: 16px; text-align: center; }
.m-err { color: #ffb3c0 !important; margin: 10px 0 0 !important; }
.m-actions { display: flex; gap: 8px; margin-top: 18px; }
.m-actions .btn { flex: 1; }
.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

/* done */
.done { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 20px; background: rgba(6, 5, 12, .8); backdrop-filter: blur(10px); }
.done-card { position: relative; width: min(440px, 100%); padding: 34px 28px 22px; border-radius: 30px; text-align: center; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line2); box-shadow: 0 40px 140px -30px rgba(255, 77, 106, .5); animation: up .45s cubic-bezier(.2, .9, .3, 1.3); overflow: hidden; }
#burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.done-ico { width: 84px; height: 100px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 14px 6px 14px 14px; background: #fff; color: #1a1030; font: 800 18px var(--display); box-shadow: 0 20px 40px -14px rgba(180, 92, 255, .7); position: relative; }
.done-ico::after { content: ""; position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--bg) 50%, #d9d2ff 50%); }
.done-card h3 { font: 700 24px var(--display); margin-bottom: 8px; }
.done-stats { color: var(--mute); font-size: 14px; margin: 0 0 20px; }
.done-stats b { color: #b8ffd6; }
.done-actions { display: grid; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; translate: -50% 20px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #24223a; border: 1px solid var(--line2); font-size: 14px; font-weight: 600; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .8); opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s cubic-bezier(.2, .9, .3, 1.3); }
.toast.show { opacity: 1; translate: -50% 0; }
.toast.err { border-color: rgba(255, 77, 106, .6); }

@media (max-width: 900px) {
  /* (workspace layout per width lives in "workspace v2" below) */
  .ws-title small { white-space: nowrap; }
  .pg-tools button { width: 26px; height: 26px; border-radius: 8px; }
  .pg-tools svg { width: 14px; height: 14px; }
  .ws-top { padding: 10px 12px; gap: 8px; } #addMore span { display: none; }
  .win-body { grid-template-columns: 1fr; } .demo-grid { min-height: 0; }
  .sel-bar { bottom: 12px; } .sel-bar button span { display: none; }
  .stage-foot .zoom-range { display: none; }
  .viewer { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}
@media (hover: none) { .pg-tools { opacity: 1; transform: none; } .pg-tools button[data-a="view"] { display: none; } }
.stat b.sm { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; }

/* ═════════════ workspace v2 — toolbar, file view, tool tabs, live option cards, summary, sheet ═════════════ */
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--bg2); flex: none; min-height: 56px; }
.sb-all { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; white-space: nowrap; }
.sb-all:hover { background: var(--s2); color: var(--text); }
.sb-all input { width: 17px; height: 17px; accent-color: #b45cff; margin: 0; }
.view-tog { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); flex: none; }
.view-tog button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--mute); font-size: 13px; font-weight: 600; }
.view-tog button.on { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.sb-sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.sb-acts { display: flex; gap: 2px; }
.sb-grow { flex: 1; }
.tb { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, opacity .15s; }
.tb svg { width: 18px; height: 18px; flex: none; }
.tb:hover:not(:disabled) { background: var(--s2); }
.tb:disabled { opacity: .32; cursor: default; }
.tb.danger:hover:not(:disabled) { background: rgba(255, 77, 106, .18); color: #ffb3c0; }
.tb-text { color: var(--mute); }
.stage-bar .zoom-range { gap: 6px; }
.stage-bar .zoom-range svg { width: 16px; height: 16px; color: var(--dim); }
.stage-bar .zoom-range input { width: 96px; }
.stage-foot, .hint { display: none !important; }

.fchip i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font: 800 10px var(--display); font-style: normal; color: #fff; background: var(--fc); box-shadow: none; }
.pg-cap i { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font: 800 9.5px var(--display); font-style: normal; color: #fff; background: var(--fc); }
.pg-cap i.blank { background: var(--s3); }
/* a ring hints that every page can be ticked (always visible on touch screens) */
.pg-check { transform: scale(.85); background: rgba(10, 10, 18, .55); color: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .3, 1.6), opacity .2s, background .2s; }
.pg-sheet:hover .pg-check, .pg:focus-visible .pg-check { opacity: 1; }
.pg[aria-selected="true"] .pg-check { opacity: 1; transform: none; background: var(--fc); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
@media (hover: none) { .pg-check { opacity: .9; } }
.pg:focus-visible { outline: none; }
.pg:focus-visible .pg-paper { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fc); }

/* files view */
.grid.files-view { gap: 34px 26px; }
.pg-file .pg-stack { position: absolute; inset: 0; pointer-events: none; }
.pg-file .pg-stack::before, .pg-file .pg-stack::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #e9e6f5; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .8); transform: translate(10px, -8px) rotate(3deg); }
.pg-file .pg-stack::after { background: #d6d1ec; transform: translate(18px, -14px) rotate(6deg); z-index: -1; }
.pg-file .pg-paper { box-shadow: 0 0 0 2px var(--fc), 0 14px 30px -14px rgba(0, 0, 0, .9); }
.pg-count { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(12, 10, 24, .82); }
.pg-cap-file { max-width: 100%; }
.pg-cap-file .fname { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-cap-file small { color: var(--dim); white-space: nowrap; }
.pg-add { align-self: start; aspect-ratio: .7071; display: grid; place-content: center; gap: 6px; border: 2px dashed var(--line2); border-radius: 10px; background: transparent; color: var(--mute); font-size: 13px; font-weight: 600; }
.pg-add span { font-size: 28px; line-height: 1; }
.pg-add:hover { border-color: #b45cff; color: var(--text); background: rgba(180, 92, 255, .06); }

/* panel: tabs + pane + summary */
.ws-main { grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 400px); }
.panel { position: relative; }
.sheet-handle { display: none; }
.tool-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); flex: none; }
.ttab { --tc: #b45cff; position: relative; display: grid; justify-items: center; gap: 4px; padding: 9px 4px 8px; border-radius: 13px; border: 1px solid transparent; background: transparent; color: var(--mute); font-size: 11.5px; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.ttab:hover { background: var(--s1); color: var(--text); }
.ttab.on { background: color-mix(in srgb, var(--tc) 14%, var(--s1)); border-color: color-mix(in srgb, var(--tc) 55%, transparent); color: var(--text); }
.tt-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, var(--tc) 16%, var(--s2)); transition: transform .4s cubic-bezier(.2, .9, .3, 1.6); }
.ttab:hover .tt-ico, .ttab.on .tt-ico { transform: translateY(-2px) rotate(-6deg); }
.tt-l { line-height: 1.15; text-align: center; }
.tt-dot { position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #4dff9a; box-shadow: 0 0 8px #4dff9a; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.6); }
.ttab.act .tt-dot { transform: none; }
.tool-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }
.pane-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pane-h .tool-ico { background: color-mix(in srgb, var(--tc) 18%, var(--s2)); }
.pane-h h3 { font: 700 17px var(--display); letter-spacing: -.02em; }
.pane-h p { margin: 2px 0 0; color: var(--dim); font-size: 12.5px; }
.pane-b { display: grid; gap: 12px; }
.tool-note.ok { color: #b8ffd6; }
/* option cards with a live figure */
.optc { display: grid; gap: 6px; }
.optc button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--s1); text-align: left; transition: border-color .2s, background .2s; }
.optc button:hover { border-color: var(--line2); background: var(--s2); }
.optc button.on { border-color: #b45cff; background: linear-gradient(135deg, rgba(180, 92, 255, .14), var(--s1) 70%); }
.oc-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--line2); transition: box-shadow .2s; }
.optc button.on .oc-dot { box-shadow: inset 0 0 0 5px #b45cff; background: #fff; }
.oc-t { flex: 1; min-width: 0; }
.oc-t b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.oc-t b em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; color: #062; background: #4dff9a; }
.oc-t small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; line-height: 1.35; }
.oc-v { flex: none; display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.oc-v b { font-size: 13.5px; }
.oc-v small { color: #b8ffd6; font-size: 11.5px; font-weight: 700; }
.optc .oc-v:empty { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: #b45cff; animation: spin .8s linear infinite; display: block; }
/* watermark preview, position picker, password field */
.wm-prev { display: grid; place-items: center; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.wm-page { position: relative; width: 120px; aspect-ratio: .7071; border-radius: 5px; background: #fff repeating-linear-gradient(0deg, transparent 0 10px, rgba(0, 0, 0, .05) 10px 11px); display: grid; place-items: center; overflow: hidden; }
.wm-page span { font: 800 16px Inter, sans-serif; white-space: nowrap; transition: transform .2s; }
.wm-page.tile span { text-shadow: 0 -34px 0 currentColor, 0 34px 0 currentColor, 80px 0 0 currentColor, -80px 0 0 currentColor; }
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.pos-pick { display: flex; align-items: center; gap: 12px; }
.pos-pick .pos-grid { grid-template-columns: repeat(3, 30px); grid-auto-rows: 40px; padding: 6px; border-radius: 8px; background: #fff; gap: 2px 4px; align-content: space-between; height: 100px; }
.pos-pick .pos-grid button { height: 20px; border: 1px dashed #cfcadf; background: transparent; border-radius: 5px; display: grid; place-items: center; }
.pos-pick .pos-grid button.on { border: 0; background: var(--grad); }
.pos-pick .pos-grid button b { font-size: 10px; color: #fff; }
.pos-pick small { color: var(--mute); font-size: 12.5px; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 46px !important; }
.pw-wrap button { position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 36px; padding: 0 10px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--s2); color: var(--mute); font-size: 12.5px; font-weight: 700; }
.pw-wrap button svg { width: 16px; height: 16px; }
.pw-wrap .ow-go { color: var(--text); background: var(--s3); }
/* summary of everything that will be applied */
.summary { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.chip { display: inline-flex; align-items: center; border-radius: 99px; background: var(--s2); border: 1px solid var(--line2); font-size: 12.5px; font-weight: 600; overflow: hidden; animation: fadein .25s; }
.chip button { border: 0; background: transparent; padding: 5px 4px 5px 10px; color: var(--text); }
.chip .chip-x { padding: 5px 9px 5px 6px; color: var(--dim); font-size: 11px; }
.chip .chip-x:hover { color: #ffb3c0; }
.chip .chip-go:hover { color: #d8b8ff; }
.sum-plain { color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.out-sum { display: none; }

/* half screen: icon-only page actions, slimmer panel */
@media (max-width: 1280px) {
  .tb span { display: none; }
  .tb { padding: 0 9px; }
  .stage-bar .zoom-range input { width: 70px; }
}
@media (max-width: 1050px) {
  .ws-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .tool-tabs { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px; }
  .tt-l { font-size: 10.5px; }
  #resetBtn { display: none; }
  .grid { --tw: 120px; }
}

/* phones (and very narrow windows): pages fill the screen; tools live in a bottom sheet with the button always in reach */
@media (max-width: 760px) {
  .ws-main { display: block; position: relative; }
  .ws-stage { position: absolute; inset: 0; bottom: var(--sheet-h, 170px); }
  .stage-bar { padding: 8px 10px; gap: 4px; min-height: 50px; overflow-x: auto; scrollbar-width: none; }
  .sb-all span { display: none; }
  .sb-all { padding: 0 8px; }
  .sb-sep, .sb-grow, #resetBtn, .stage-bar .zoom-range { display: none; }
  .view-tog button { padding: 0 9px; font-size: 12.5px; }
  .tb { height: 38px; padding: 0 9px; }
  .grid { --tw: 96px !important; gap: 22px 12px; padding: 14px 14px 30px; }
  .sel-bar { display: none !important; }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 82vh; border: 0; border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .7); transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
  .sheet-handle { display: grid; place-items: center; width: 100%; height: 22px; border: 0; background: transparent; padding: 0; flex: none; }
  .sheet-handle i { width: 40px; height: 5px; border-radius: 9px; background: var(--line2); }
  .tool-tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 2px 12px 10px; border: 0; scroll-snap-type: x proximity; }
  .ttab { flex: none; width: 74px; scroll-snap-align: start; }
  .tool-pane { display: none; max-height: 48vh; border-top: 1px solid var(--line); }
  .panel.sheet-open .tool-pane { display: block; }
  .panel-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .summary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip { flex: none; }
  .btn-go { height: 52px; }
}
/* "+" between pages: insert files exactly there */
.pg-ins { position: absolute; left: -22px; top: 50%; z-index: 3; width: 22px; height: 22px; translate: -1px -50%; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--s3); color: var(--mute); opacity: 0; transition: opacity .2s, background .2s, transform .25s cubic-bezier(.2, .9, .3, 1.6); }
.pg-ins svg { width: 13px; height: 13px; }
.pg:hover .pg-ins, .pg:hover + .pg .pg-ins { opacity: 1; }
.pg-ins:hover { background: #b45cff; color: #fff; transform: scale(1.2); }
.grid.splitting .pg-ins { display: none; }
.grid.files-view .pg-ins, .grid.files-view .pg-cut { display: none; }
@media (hover: none) { .pg-ins { display: none; } }
.sel-bar { display: none !important; }
/* touch screens: per-page buttons only on the selected page (the toolbar acts on the selection anyway) */
@media (hover: none) { .pg .pg-tools { opacity: 0; pointer-events: none; } .pg[aria-selected="true"] .pg-tools { opacity: 1; pointer-events: auto; } }

/* ═════════════ page editor (sign · text · forms · white-out · redact) ═════════════ */
body.pe-open { overflow: hidden; }
.pe { position: fixed; inset: 0; z-index: 75; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(900px 600px at 50% -10%, rgba(180, 92, 255, .14), transparent 60%), #0b0a14; animation: fadein .2s; }
.pe-top { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(10, 9, 18, .85); backdrop-filter: blur(10px); }
.pe-nav { display: flex; align-items: center; gap: 6px; font: 600 13px var(--ui); color: var(--mute); font-variant-numeric: tabular-nums; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.pe-tools { min-width: 0; display: flex; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pe-tools::-webkit-scrollbar { display: none; }
.pe-tools button { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: var(--mute); transition: background .15s, color .15s, transform .15s; }
.pe-tools button:hover { background: var(--s2); color: var(--text); }
.pe-tools button:active { transform: scale(.94); }
.pe-tools button span { font-size: 18px; line-height: 22px; height: 22px; }
.pe-tools .pe-ti { font: 800 18px var(--display); color: var(--text); }
.pe-tools b { font-size: 11px; font-weight: 600; white-space: nowrap; }
.pe-tools button[data-t="sig"] { background: linear-gradient(135deg, rgba(255, 77, 106, .18), rgba(180, 92, 255, .18)); color: var(--text); }
.pe-stage { position: relative; display: grid; place-items: center; overflow: auto; padding: 24px; touch-action: pan-x pan-y; }
.pe-page { position: relative; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 3px; }
.pe-page canvas { display: block; }
.pe-forms, .pe-layer { position: absolute; inset: 0; }
.pe-layer { pointer-events: none; }
.pe-field { position: absolute; margin: 0; padding: 0 4px; border: 1.5px solid rgba(79, 139, 255, .55); border-radius: 3px; background: rgba(79, 139, 255, .14); color: #10121a; font-family: Helvetica, Arial, sans-serif; outline: none; resize: none; transition: background .15s, border-color .15s; }
.pe-field:hover { background: rgba(79, 139, 255, .22); }
.pe-field:focus { background: #fff; border-color: #4f8bff; box-shadow: 0 0 0 3px rgba(79, 139, 255, .3); }
input.pe-field[type="checkbox"], input.pe-field[type="radio"] { padding: 0; accent-color: #1f3fbf; cursor: pointer; }
.pe-item { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pe-item:active { cursor: grabbing; }
.pe-item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pe-item.on { outline: 2px dashed #b45cff; outline-offset: 2px; }
.pe-item:not(.on):hover { outline: 1.5px dashed rgba(180, 92, 255, .6); outline-offset: 2px; }
.pe-txt { white-space: pre; line-height: 1.2; padding: 0; font-family: Helvetica, Arial, sans-serif; outline: none; min-width: 1ch; cursor: inherit; }
.pe-item.on .pe-txt { cursor: text; user-select: text; -webkit-user-select: text; }
.pe-white, .pe-redact { position: absolute; inset: 0; display: block; }
.pe-white { box-shadow: none; }
.pe-item.pe-white:not(.on):hover { outline-color: rgba(0, 0, 0, .25); }
.pe-redact { background: repeating-linear-gradient(135deg, #000 0 10px, #16161d 10px 20px); }
.pe-h { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #b45cff; cursor: nwse-resize; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.pe-x { position: absolute; top: -14px; right: -14px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--pink); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.pe-prop { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 8px 14px; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(10, 9, 18, .9); overflow-x: auto; scrollbar-width: none; }
.pe-prop::-webkit-scrollbar { display: none; }
.pe-prop button { flex: none; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--s1); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pe-prop button:hover { background: var(--s2); }
.pe-prop button.on { border-color: #b45cff; color: #d9b8ff; }
.pe-prop button.danger { color: #ff9aac; }
.pe-prop .pe-col { width: 32px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--line2); }
.pe-prop .pe-col.on { box-shadow: 0 0 0 3px #b45cff; }
.pe-hint { color: var(--dim); font-size: 13px; margin: 0 auto; text-align: center; }
.pe-sp { flex: 1; }
.pg-ann { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 8px; font: 700 10px var(--ui); color: #fff; background: rgba(255, 138, 61, .92); }

/* sign pane in the side panel */
.big-act { width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 12px; text-align: left; border-radius: 16px; border: 1px solid transparent; background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--grad) border-box; }
.big-act span { grid-row: span 2; font-size: 26px; }
.big-act b { font: 700 15px var(--display); }
.big-act small { color: var(--mute); font-size: 12.5px; }
.big-act:hover { transform: translateY(-1px); }
.pe-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.pe-quick button { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--s1); font: 700 17px var(--display); }
.pe-quick button small { font: 600 11px var(--ui); color: var(--mute); }
.pe-quick button:hover { border-color: var(--line2); background: var(--s2); }
.pe-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pe-list button { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line2); background: var(--s1); font-size: 12.5px; font-weight: 600; }
.pe-list small { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 138, 61, .25); color: #ffc9a3; }

/* signature maker */
.sig-card { width: min(620px, 100%); text-align: left; padding: 22px; }
.sig-tabs { display: flex; gap: 4px; padding: 4px; margin: 6px 0 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sig-tabs button { flex: 1; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--mute); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sig-tabs button.on { background: var(--s3); color: var(--text); }
.sig-pad-wrap { position: relative; height: 200px; border-radius: 16px; background: #fbfaff; overflow: hidden; }
#sigPad { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 24px; right: 24px; bottom: 44px; padding-top: 6px; border-top: 1.5px dashed #c9c4dc; font-size: 12px; color: #9b95b0; pointer-events: none; }
.sig-row { display: flex; gap: 8px; margin-top: 8px; }
.sig-card input[type="text"] { text-align: left; margin-bottom: 10px; }
.sig-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 240px; overflow-y: auto; }
.sig-fonts button { height: 64px; padding: 0 10px; border-radius: 14px; border: 2px solid transparent; background: #fbfaff; font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-fonts button.on { border-color: #b45cff; box-shadow: 0 0 0 3px rgba(180, 92, 255, .25); }
.sig-up { display: inline-flex; cursor: pointer; }
.sig-up-prev { margin-top: 10px; border-radius: 14px; background: #fbfaff; min-height: 0; }
.sig-up-prev img { max-height: 150px; margin: 0 auto; padding: 10px; }
.sig-saved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sig-saved { position: relative; }
.sig-saved > button:first-child { width: 100%; height: 86px; padding: 10px; border-radius: 14px; border: 2px solid transparent; background: #fbfaff; }
.sig-saved > button:first-child:hover { border-color: #b45cff; }
.sig-saved img { width: 100%; height: 100%; object-fit: contain; }
.sig-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; }
.sig-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sig-inks { display: flex; gap: 6px; }
.sig-inks button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--line2); background: var(--c); }
.sig-inks button.on { box-shadow: 0 0 0 3px #b45cff; }
.sig-rem { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.sig-foot .btn { white-space: nowrap; }

@media (max-width: 760px) {
  .pe { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .pe-top { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .pe-tools { order: 5; flex: 1 1 100%; width: 100%; margin: 0; }
  .pe-top #peDone { padding-inline: 14px; }
  .pe-tools button { min-width: 58px; }
  .pe-stage { padding: 10px; }
  .pe-nav { margin-left: auto; }
  .sig-card { padding: 16px; align-self: end; border-radius: 24px 24px 0 0; }
  .modal.sig-modal { padding: 0; place-items: end stretch; }
  .sig-fonts button { font-size: 22px; height: 56px; }
  .pe-x { width: 30px; height: 30px; top: -16px; right: -16px; }
  .pe-h { width: 24px; height: 24px; right: -12px; bottom: -12px; }
}
@media (pointer: coarse) { .pg-tools button[data-a="edit"] { display: grid; } }

.cert-box { margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(79, 139, 255, .35); background: linear-gradient(180deg, rgba(79, 139, 255, .08), transparent); }
.cert-box summary { cursor: pointer; list-style: none; display: grid; gap: 2px; font: 700 14px var(--display); }
.cert-box summary::-webkit-details-marker { display: none; }
.cert-box summary small { font: 500 12px var(--ui); color: var(--mute); }
.cert-box[open] summary { margin-bottom: 12px; }
.cert-box > * + * { margin-top: 10px; }
.cert-file { display: inline-flex; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-note.bad { color: #ff9aac; }

.pe-txt.wrap { white-space: pre-wrap; line-height: 1.18; overflow: hidden; height: 100%; word-break: break-word; }
.pe-hl { position: absolute; inset: 0; display: block; mix-blend-mode: multiply; }

.ai-prog { height: 6px; margin: -4px 0 12px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.ai-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .3s; }
.big-act:disabled { opacity: .75; cursor: progress; }
.pg-ann.tr { background: rgba(47, 214, 160, .92); }
.pg-ann.cmp { background: rgba(255, 107, 214, .92); }
.pg-crop { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pg-crop::before { content: ''; position: absolute; left: var(--l); top: var(--t); right: var(--r); bottom: var(--b); outline: 2px dashed #ffcf4d; box-shadow: 0 0 0 9999px rgba(8, 6, 16, .55); }
.pg-paper { overflow: hidden; }
.field select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; }

.txt-in { width: 100%; margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }

.pe-tline { position: absolute; pointer-events: auto; padding: 0; border: 1.5px dashed rgba(79, 139, 255, .75); border-radius: 3px; background: rgba(79, 139, 255, .08); cursor: text; transition: background .12s; }
.pe-tline:hover { background: rgba(79, 139, 255, .22); border-style: solid; }
.pe.editing-text .pe-tools .pe-edit { background: rgba(79, 139, 255, .25); color: var(--text); }

/* listen */
.ls-now { min-height: 84px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--mute, #a9a6bd); transition: border-color .2s, color .2s; }
.ls-now.on { color: var(--text); border-color: color-mix(in srgb, #2fd6a0 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, #2fd6a0 12%, transparent); }
.ls-ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 16px 0 6px; }
.ls-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); }
.ls-btn:hover { background: rgba(255, 255, 255, .12); }
.ls-play { width: 64px; height: 64px; font-size: 24px; background: linear-gradient(135deg, #2fd6a0, #4de1ff); color: #06261c; border: 0; box-shadow: 0 10px 30px -8px rgba(47, 214, 160, .6); }
.ls-pos { text-align: center; font-size: 13px; color: var(--mute, #a9a6bd); margin: 0 0 10px; }
.pg.reading .pg-paper { box-shadow: 0 0 0 3px #2fd6a0, 0 0 0 8px rgba(47, 214, 160, .25), 0 20px 36px -14px rgba(47, 214, 160, .7); }
.pg.reading::after { content: "🔊"; position: absolute; top: 6px; left: 8px; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

/* ask */
.ask-form { display: grid; gap: 10px; }
.ask-form textarea { width: 100%; resize: vertical; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; line-height: 1.45; }
.ask-form textarea:focus { outline: none; border-color: #b45cff; box-shadow: 0 0 0 4px rgba(180, 92, 255, .18); }
.ask-form .btn { justify-self: end; }
.ask-stage { font-size: 13px; color: var(--mute, #a9a6bd); margin: 6px 0 0; }
.ask-ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ask-ex button { padding: 8px 12px; border-radius: 999px; font-size: 13px; background: rgba(180, 92, 255, .1); border: 1px solid rgba(180, 92, 255, .3); color: var(--text); text-align: left; }
.ask-res { display: grid; gap: 10px; margin: 14px 0 6px; }
.ask-hit { display: grid; gap: 6px; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--mute, #c9c6da); font-size: 14px; line-height: 1.5; transition: border-color .15s, background .15s; }
.ask-hit:hover { border-color: rgba(180, 92, 255, .5); background: rgba(180, 92, 255, .06); }
.ask-hit.best { border-color: rgba(180, 92, 255, .55); box-shadow: 0 0 0 4px rgba(180, 92, 255, .12); }
.ask-pg { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #c99bff; }
.ask-txt mark { background: rgba(180, 92, 255, .28); color: var(--text); border-radius: 4px; padding: 1px 2px; }
.ask-txt b { color: var(--text); }

/* ---------- graphics tiers (html.fx-high / fx-mid / fx-low, set in <head>) ----------
 * iOS Safari and low-memory Android close a page ("ha generado problemas repetidamente") when its graphics
 * layers use too much memory. Live blur (filter / backdrop-filter) on big or many elements and hidden layers
 * that stay painted are what cost; moving and fading (transform, opacity) is nearly free. Measured on an
 * iPhone-sized 3× screen (tools/layer-memory notes in memory): bgnix 203 → 64 MB, mp3vio 254 → ~130 MB.
 * mid: the same look with cheap effects (gradient glow instead of live blur, no frosted glass except the top
 *      bar, reveals without blur, off-screen sections not painted, no full-screen grain).
 * low: also no background motion and no reveal animations. */
html:is(.fx-mid, .fx-low) *:not(.nav):not(.nav-in), html:is(.fx-mid, .fx-low) *::before, html:is(.fx-mid, .fx-low) *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:is(.fx-mid, .fx-low) [data-reveal], html:is(.fx-mid, .fx-low) .rv, html:is(.fx-mid, .fx-low) .w, html:is(.fx-mid, .fx-low) .status-text.in { filter: none !important; }
html:is(.fx-mid, .fx-low) .sec { content-visibility: auto; contain-intrinsic-size: auto 900px; }
html:is(.fx-mid, .fx-low) .grain { display: none !important; }
html:is(.fx-mid, .fx-low) .aurora i { filter: none !important; mix-blend-mode: normal; }
html:is(.fx-mid, .fx-low) .aurora .b1 { background: radial-gradient(closest-side, rgba(255, 77, 106, .95), rgba(255, 77, 106, .4) 42%, rgba(255, 77, 106, .1) 72%, transparent); }
html:is(.fx-mid, .fx-low) .aurora .b2 { background: radial-gradient(closest-side, rgba(180, 92, 255, .95), rgba(180, 92, 255, .4) 42%, rgba(180, 92, 255, .1) 72%, transparent); }
html:is(.fx-mid, .fx-low) .aurora .b3 { background: radial-gradient(closest-side, rgba(61, 107, 255, .95), rgba(61, 107, 255, .4) 42%, rgba(61, 107, 255, .1) 72%, transparent); }
html:is(.fx-mid, .fx-low) .aurora .b4 { background: radial-gradient(closest-side, rgba(79, 139, 255, .95), rgba(79, 139, 255, .4) 42%, rgba(79, 139, 255, .1) 72%, transparent); }
html.fx-low .aurora, html.fx-low .aurora i { animation: none !important; }
html.fx-low [data-reveal], html.fx-low .rv, html.fx-low .w { opacity: 1 !important; transform: none !important; transition: none !important; }
html.fx-low .strip-track, html.fx-low .drop-eq i, html.fx-low .app-icon { animation: none !important; }
.drop-overlay { visibility: hidden; transition: opacity .2s, visibility .2s; }
body.dragging .drop-overlay { visibility: visible; }

/* phones: the upload button must be on the first screen — no big app icon, shorter headline, drop zone right under it */
.only-touch { display: none; }
@media (pointer: coarse) { .only-touch { display: inline; } .no-touch { display: none; } }
@media (max-width: 760px) {
  .hero { padding-top: 84px; }
  .hero .app-icon { display: none; }
  .hero .badge { margin-bottom: 14px; font-size: 12.5px; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 42px); margin-bottom: 18px; }
  .hero .drop { order: 1; padding: 18px; gap: 12px; }
  .hero .drop-stack { display: none; }
  .hero .drop-cta { font-size: 20px; }
  .hero .drop-btn { width: 100%; min-height: 54px; font-size: 17px; justify-content: center; }
  .hero .drop-formats { order: 2; }
  .hero .lead { order: 3; font-size: 15.5px; margin: 22px 0 0; }
  .hero .trust { order: 4; }
}

/* decorative loops stop while their section is off-screen (set by app.js), so scrolling only pays for what is visible */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* touch devices: the demo window stays flat (no scroll-linked 3D tilt, which restyled a big subtree on every scroll) */
html:is(.fx-mid, .fx-low) .window { transform: none; will-change: auto; }
/* …but it still rises into place as you scroll to it: a scroll-driven animation runs on the compositor (no JS,
   no style work per scroll). Browsers without it get a one-shot transition when it comes into view (app.js). */
@supports (animation-timeline: view()) {
  html:is(.fx-mid, .fx-low) .window { animation: winIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes winIn { from { transform: translateY(90px) rotateX(24deg) scale(.9); opacity: 0; } 30% { opacity: .15; } to { transform: none; opacity: 1; } }
html:is(.fx-mid, .fx-low) .window.win-pre { transform: translateY(90px) rotateX(24deg) scale(.9); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity 1s; }
html:is(.fx-mid, .fx-low) .window.win-pre.win-in { transform: none; opacity: 1; }
@media (max-width: 760px) {
  /* phones: the product window starts invisible and rises in as you scroll, so it never peeks at the bottom of
     the first screen */
  .showcase { margin-top: 40px; }
  /* fill the first screen evenly (no band of empty space anywhere), the window starts right after the fold */
  .hero-in { min-height: calc(100svh - 84px); justify-content: flex-start; padding-top: 3.5svh; }
  .hero .badge { margin: 0 0 3.2svh !important; }
  .hero h1 { margin: 0 0 5svh !important; }
  .hero .drop-formats { margin: 1.6svh 0 0 !important; }
  .hero .trust { margin: 5.5svh 0 0 !important; }
}
@supports (animation-timeline: view()) {
  html:is(.fx-mid, .fx-low) .window { animation-range: entry 35% cover 50%; }
}
html:is(.fx-mid, .fx-low) .aurora { transform: none; transition: none; }

/* badge: a green lock instead of the pulsing dot (privacy is the point, and nothing animates) */
.badge-lock { width: 16px; height: 16px; flex: none; color: var(--green); }
@media (max-width: 760px) {
  /* phones: keep the first screen calm — headline, upload, three short promises. The longer lead stays on desktop. */
  .hero .lead { display: none; }
  .hero .badge { gap: 8px; }
}
@media (max-width: 760px) {
  .hero .badge { white-space: nowrap; font-size: 11.5px; padding: 6px 12px 6px 10px; max-width: 100%; }
  .hero .badge-lock { width: 14px; height: 14px; }
  /* the badge already says it with a lock: don't repeat "never leaves your device" right below */
  .hero .trust li:first-child { display: none; }
}
/* overflow:hidden made the hero a scroll container, so the window's view() timeline never moved; clip doesn't */
.hero { overflow: clip; }