/* =========================================================
   AutoTrim — clean UI
   ========================================================= */
@font-face{font-family:"Rubik";font-weight:400;src:url(../fonts/rubik-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:400;src:url(../fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:500;src:url(../fonts/rubik-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:500;src:url(../fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:700;src:url(../fonts/rubik-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";font-weight:700;src:url(../fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}

:root{
  --bg:#f7f7f5; --surface:#ffffff; --surface-2:#f3f3f0; --surface-3:#ebebe7;
  --line:#e6e5e1; --line-2:#d6d5d0;
  --text:#0d0d0d; --muted:#6c6b67; --faint:#9b9a95;
  --accent:#ed2024; --accent-soft:#fdeceb; --accent-text:#c2141a;
  --ink:#0d0d0d; --on-ink:#fff;
  --ok-bg:#e8f6ec; --ok-tx:#1d6b35; --warn-bg:#fff6e5; --warn-line:#f2dcae; --warn-tx:#7a4d00;
  --checker-a:#f1f1ee; --checker-b:#ffffff;
  --shadow-1:0 1px 2px rgba(16,16,16,.04);
  --shadow-2:0 1px 2px rgba(16,16,16,.04),0 12px 32px -16px rgba(16,16,16,.14);
  --shadow-3:0 2px 4px rgba(16,16,16,.04),0 24px 48px -20px rgba(16,16,16,.22);
  --r-xl:24px; --r-l:18px; --r-m:12px; --r-s:9px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0b0c; --surface:#141416; --surface-2:#1b1b1e; --surface-3:#232327;
    --line:#26262a; --line-2:#34343a;
    --text:#f3f3f2; --muted:#a2a1a6; --faint:#6d6c72;
    --accent:#ff3b3f; --accent-soft:#2a1213; --accent-text:#ff6b6e;
    --ink:#f3f3f2; --on-ink:#0b0b0c;
    --ok-bg:#12261a; --ok-tx:#7fd69a; --warn-bg:#2a2010; --warn-line:#4a3a1a; --warn-tx:#f2c46d;
    --checker-a:#1c1c1f; --checker-b:#151517;
    --shadow-1:none; --shadow-2:0 0 0 1px rgba(255,255,255,.02); --shadow-3:0 24px 48px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 16px;
  font-family:var(--font);font-size:15.5px;line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -180px,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 0) 0 0/24px 24px;
  mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 85%)}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- header ---------------- */
.top{width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 4px 8px;flex-wrap:wrap}
.brand{display:block;text-decoration:none;color:var(--text)}
.logo{display:block;width:196px;height:auto;overflow:visible;cursor:pointer}
/* --- logo: intro on first load */
.logo .logo-nib,.logo .logo-o,.logo .logo-i-dot{transform-box:fill-box;transform-origin:center}
.logo .lt{transform-box:fill-box;transform-origin:50% 100%}
.logo.intro .lt{animation:ltIn .75s var(--ease) calc(var(--i) * 55ms + 80ms) both}
.logo.intro .logo-o{animation:oIn .9s cubic-bezier(.34,1.56,.64,1) .3s both}
.logo.intro .logo-nib{animation:nibIn .8s cubic-bezier(.34,1.56,.64,1) .75s both}
.logo.intro .logo-i-dot{animation:dotIn .7s cubic-bezier(.34,1.56,.64,1) .65s both}
.logo .logo-cut{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:3 2.2;opacity:0;vector-effect:non-scaling-stroke}
.logo.intro .logo-cut{animation:cutDraw 1.5s ease .9s both}
@keyframes ltIn{0%{opacity:0;transform:translateY(45%) scaleY(.6)}55%{opacity:1;transform:translateY(-8%) scaleY(1.06)}100%{opacity:1;transform:none}}
@keyframes oIn{0%{opacity:0;transform:scale(.2) rotate(-120deg)}100%{opacity:1;transform:none}}
@keyframes nibIn{0%{opacity:0;transform:translateY(-60%) rotate(-35deg)}100%{opacity:1;transform:none}}
@keyframes dotIn{0%{opacity:0;transform:translateY(-140%)}70%{opacity:1;transform:translateY(12%)}100%{transform:none}}
@keyframes cutDraw{0%{opacity:1;stroke-dasharray:0 100;stroke-dashoffset:0}60%{opacity:1;stroke-dasharray:100 0}100%{opacity:0;stroke-dasharray:100 0}}
/* --- logo: a little life on every hover */
.logo.wave .lt{animation:ltWave .55s var(--ease) calc(var(--i) * 40ms) both}
.logo.wave .logo-o{animation:oSquish .6s var(--ease) .12s both}
.logo.wave .logo-nib{transform-box:fill-box;transform-origin:50% 0;animation:nibWrite .8s ease .15s both}
.logo.wave .logo-cut{animation:cutHover .9s ease both}
@keyframes ltWave{0%,100%{transform:none}40%{transform:translateY(-12%)}70%{transform:translateY(3%)}}
@keyframes oSquish{0%,100%{transform:none}35%{transform:scale(1.12,.88) rotate(-4deg)}70%{transform:scale(.95,1.05)}}
@keyframes nibWrite{0%,100%{transform:none}20%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}}
@keyframes cutHover{0%{opacity:.9;stroke-dasharray:0 100}70%{opacity:.9;stroke-dasharray:100 0}100%{opacity:0;stroke-dasharray:100 0}}
.tagline{margin:0;color:var(--muted);font-size:14.5px}

/* ---------------- stepper ---------------- */
.ruler{--p:0;position:relative;width:100%;max-width:1120px;margin:26px 0 8px;padding:0 4px}
.ruler ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.ruler li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--faint);
  transition:color .4s var(--ease);white-space:nowrap}
.ruler li b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;font-weight:700;
  background:var(--surface);border:1.5px solid var(--line-2);color:var(--faint);transition:all .45s var(--ease)}
.ruler li.now{color:var(--text)}
.ruler li.now b{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.ruler li.done{color:var(--muted);cursor:pointer}
.ruler li.done b{background:var(--ink);border-color:var(--ink);color:transparent;position:relative}
.ruler li.done b::after{content:"";position:absolute;width:10px;height:5px;border:solid var(--on-ink);border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg)}
.ruler li.done:hover{color:var(--text)}
.ruler-track{position:absolute;top:15px;right:12.5%;left:12.5%;height:1.5px;background:var(--line-2);margin:0 4px}
.ruler-track i{position:absolute;inset:0 0 0 auto;width:calc(var(--p) * 100%);background:var(--ink);transition:width .6s var(--ease)}

/* ---------------- windows ---------------- */
main{width:100%;max-width:1120px;flex:1;padding:18px 0 40px}
.win{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
  padding:clamp(22px,4vw,44px)}
.win.enter{animation:winIn .55s var(--ease) both}
.win.leave{animation:winOut .22s ease both}
@keyframes winIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes winOut{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
.win-title{margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.win-sub{margin:8px 0 30px;color:var(--muted);font-size:15.5px}

/* ---------------- step 1: tools ---------------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:right;gap:6px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:12px 12px 18px;
  box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
  animation:rise .6s var(--ease) both}
.tool:nth-child(2){animation-delay:.06s}.tool:nth-child(3){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tool:hover,.tool:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--line-2);outline:none}
.tool:active{transform:translateY(-1px) scale(.99)}
.tool.picked{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tool .tag{position:absolute;top:22px;left:22px;z-index:1;font-size:11.5px;font-weight:500;letter-spacing:.02em;
  color:var(--muted);background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.ill{display:block;width:100%;height:auto;background:var(--surface-2);border-radius:12px;margin-bottom:12px}
.tool-name{font-size:19px;font-weight:700;letter-spacing:-.01em;padding:0 8px}
.tool-desc{color:var(--muted);font-size:14.5px;padding:0 8px;min-height:3.2em}
.tool .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0 8px;font-weight:500;font-size:14.5px;color:var(--text)}
.tool .go svg{transition:transform .35s var(--ease)}
.tool:hover .go svg{transform:translateX(-4px)}
/* illustrations — thin, quiet */
.ill-cut .blob{fill:var(--surface-3);stroke:none}
.ill-cut .cut{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 4;animation:march 1.6s linear infinite paused}
.tool:hover .ill-cut .cut{animation-play-state:running}
.ill-cut .scissors{fill:none;stroke:var(--text);stroke-width:2;transition:transform .8s var(--ease)}
.tool:hover .ill-cut .scissors{transform:translate(150px,36px) rotate(-30deg)}
@keyframes march{to{stroke-dashoffset:-18}}
.ill-marks .art,.ill-bleed .art{fill:var(--surface);stroke:var(--line-2);stroke-width:1.2}
.art-in{fill:var(--surface-3);stroke:none}
.ill-marks .rm{color:var(--text);transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease) var(--d),color .3s}
.tool:hover .ill-marks .rm{transform:rotate(90deg);color:var(--accent)}
.ill-bleed .bleedzone{opacity:.35;transform-box:fill-box;transform-origin:center;transform:scale(.88);transition:transform .7s var(--ease),opacity .4s}
.tool:hover .ill-bleed .bleedzone{transform:none;opacity:.55}
.ill-bleed .trim{fill:none;stroke:var(--text);stroke-width:1.2;stroke-dasharray:4 3}
.ill-label{font-size:12px;font-weight:500;fill:var(--accent)}
.ill use{stroke-width:inherit}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--surface);font-weight:500;font-size:15px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink);padding:0 26px}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg));box-shadow:var(--shadow-2)}
.btn.big{height:52px;font-size:16px;padding:0 34px}
.btn.small{height:36px;font-size:14px;padding:0 14px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.dl{width:100%;height:auto;justify-content:flex-start;gap:14px;padding:14px 18px;margin-bottom:10px;text-decoration:none;
  background:var(--ink);color:var(--on-ink);border-color:var(--ink);text-align:right;animation:rise .5s var(--ease) both}
.btn.dl:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.btn.dl>span:last-child{display:flex;flex-direction:column;min-width:0;font-weight:700;font-size:15.5px}
.btn.dl small{font-weight:400;font-size:12.5px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.btn.dl .ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:var(--accent);color:#fff}
.btn.dl.alt{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn.dl.alt .ico{background:var(--surface-3);color:var(--text)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.actions .btn.primary{margin-inline-start:auto}

/* ---------------- step 2: upload ---------------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:260px;padding:28px;
  border:1.5px dashed var(--line-2);border-radius:var(--r-l);background:var(--surface-2);cursor:pointer;text-align:center;
  transition:background .25s,border-color .25s,transform .35s var(--ease)}
.drop:hover{border-color:var(--faint)}
.drop.hot{border-color:var(--accent);border-style:solid;background:var(--accent-soft);transform:scale(1.005)}
.drop-ill{width:84px;height:64px;margin-bottom:10px}
.drop-ill .sheet{fill:var(--surface);stroke:var(--line-2);stroke-width:2}
.drop-ill .fold{fill:none;stroke:var(--line-2);stroke-width:2}
.drop-ill .dash{display:none}
.drop-ill .arrow{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.2s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.drop-big{font-size:18px;font-weight:700}
.drop-small{color:var(--muted);font-size:14px}
.drop-small u{text-decoration-color:var(--line-2);text-underline-offset:3px}
.drop-hot{display:none;font-size:18px;font-weight:700;color:var(--accent-text)}
.drop.hot .drop-big,.drop.hot .drop-small,.drop.hot .drop-ill{display:none}
.drop.hot .drop-hot{display:block}
.upbar{position:relative;height:52px;border-radius:var(--r-m);background:var(--surface-2);overflow:hidden;margin-top:16px;border:1px solid var(--line)}
.upbar i{position:absolute;inset:0 0 0 auto;width:0;background:var(--accent-soft);transition:width .25s var(--ease)}
.upbar i::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent)}
.upbar span{position:relative;display:grid;place-items:center;height:100%;font-weight:500;font-size:14px}
.filecard{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:28px;align-items:start;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);animation:rise .45s var(--ease)}
.thumb{border-radius:12px;overflow:hidden;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line)}
.thumb img{max-width:100%;max-height:100%;display:block}
.checker{background-color:var(--checker-b);background-image:
  linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.fileinfo{padding-top:4px;min-width:0}
.fileinfo h3{margin:0 0 12px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:13px;font-weight:500;background:var(--surface-2);color:var(--muted)}
.chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok-tx)}
.chip.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn-tx)}
.chip.red{background:var(--accent-soft);border-color:transparent;color:var(--accent-text);font-weight:700}
.notes{margin:4px 0 14px;padding:0 18px 0 0;color:var(--muted);font-size:13.5px}

/* ---------------- step 3: settings ---------------- */
.params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.params{grid-template-columns:1fr}}
.group{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 4px;background:var(--surface)}
.group legend{float:right;width:100%;padding:0;margin-bottom:14px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.group legend+*{clear:both}
.group.adv{grid-column:1/-1;background:var(--surface-2);border-color:transparent;padding:4px 18px}
.group.adv>summary{cursor:pointer;list-style:none;padding:12px 0;font-weight:500;display:flex;align-items:center;gap:8px;color:var(--muted)}
.group.adv>summary::-webkit-details-marker{display:none}
.group.adv>summary::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(135deg);transition:transform .3s var(--ease)}
.group.adv[open]>summary::before{transform:rotate(45deg)}
.group.adv[open]>summary{color:var(--text)}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 24px;padding:8px 0 4px}
.field{margin-bottom:18px}
.field>label:not(.tog),.field>.lbl{display:block;font-weight:500;font-size:14px;margin-bottom:7px}
.field .hint{display:block;color:var(--faint);font-size:12.5px;margin-top:6px;line-height:1.45}
.num{display:flex;align-items:center;height:42px;max-width:240px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .2s,box-shadow .2s}
.num:focus-within{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
.num input{flex:1;min-width:0;height:100%;border:0;background:transparent;text-align:center;direction:ltr;font-weight:500;font-size:15.5px;outline:none;
  -moz-appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num button{width:36px;height:34px;margin:0 3px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;transition:background .15s,color .15s}
.num button:hover{background:var(--surface-2);color:var(--text)}
.num .unit{order:-1;padding:0 12px 0 4px;color:var(--faint);font-size:13px;direction:ltr;white-space:nowrap}
.num .unit{order:99;padding:0 4px 0 12px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);
  transition:background .25s var(--ease),color .2s,box-shadow .25s}
.seg label:hover span{color:var(--text)}
.seg input:checked+span{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.seg svg{width:16px;height:16px}
.txt{height:42px;width:100%;max-width:240px;border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 12px;background:var(--surface);
  direction:ltr;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s}
.txt:focus{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
select{height:42px;max-width:100%;border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 12px;background:var(--surface);font-weight:500}
.tog{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500;font-size:14px}
.tog input{position:absolute;opacity:0}
.tog i{position:relative;flex:none;width:40px;height:24px;border-radius:99px;background:var(--line-2);transition:background .3s var(--ease)}
.tog i::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.tog input:checked+i{background:var(--accent)}
.tog input:checked+i::after{transform:translateX(-16px)}
.tog input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- step 4: working ---------------- */
.working{padding:56px 0 30px;text-align:center;max-width:560px;margin:0 auto}
.blade-track{position:relative;height:6px;border-radius:99px;background:var(--surface-3)}
.blade-fill{position:absolute;top:0;bottom:0;right:0;width:0;border-radius:99px;background:var(--accent);transition:width .45s var(--ease);overflow:hidden}
.blade-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 1.3s linear infinite}
@keyframes shine{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.blade{position:absolute;top:50%;right:0;width:26px;height:26px;margin:-13px -13px 0 0;padding:3px;border-radius:50%;
  background:var(--surface);color:var(--accent);box-shadow:var(--shadow-2),0 0 0 1px var(--line);
  transition:right .45s var(--ease);animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage{margin:30px 0 0;font-size:19px;font-weight:500;min-height:1.4em}
.pct{margin:4px 0 0;color:var(--faint);font-size:14px}

/* ---------------- result ---------------- */
.result{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin-top:22px;animation:rise .5s var(--ease)}
.preview-wrap{min-width:0}
.preview-tools{display:flex;gap:6px;margin-bottom:10px}
.chip-btn{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}
.chip-btn:hover{color:var(--text);border-color:var(--line-2)}
.chip-btn.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.preview{border:1px solid var(--line);border-radius:var(--r-l);overflow:auto;max-height:72vh;display:grid;place-items:center;padding:18px}
.preview-inner{position:relative;width:100%;transition:width .4s var(--ease)}
.preview-inner img{display:block;width:100%;height:auto;outline:1px solid var(--line-2)}
.overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .3s}
.overlay.off{opacity:0}
.overlay .ov-cut{fill:none;stroke:var(--accent);stroke-width:1.8px;vector-effect:non-scaling-stroke}
.overlay .ov-glow{fill:none;stroke:#fff;stroke-width:4.5px;vector-effect:non-scaling-stroke;opacity:.9}
.overlay .ov-mark{transform-box:fill-box;transform-origin:center;animation:markIn .6s var(--ease) both}
.overlay .ov-mark *{fill:none;stroke:var(--accent);stroke-width:1.6px;vector-effect:non-scaling-stroke}
.overlay .ov-mark .solid{fill:var(--accent)}
.overlay .ov-ref,.overlay .ov-trim{fill:none;stroke:var(--text);stroke-width:1px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;opacity:.7}
.overlay .ov-bleed{fill:url(#ovHatch);opacity:.35}
@keyframes markIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.side{min-width:0}
.warnings{list-style:none;padding:0;margin:0 0 10px}
.warnings li{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-tx);border-radius:var(--r-m);padding:9px 12px;margin-bottom:8px;font-size:13.5px}
.report{border:1px solid var(--line);border-radius:var(--r-l);padding:4px 16px 8px;background:var(--surface)}
.report summary{cursor:pointer;list-style:none;padding:12px 0 6px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.report summary::-webkit-details-marker{display:none}
.report summary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-tx)}
.report table{width:100%;border-collapse:collapse;font-size:13px}
.report td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.report td:first-child{color:var(--muted);padding-left:12px;width:44%}
.report td:last-child{font-weight:500;text-align:right;unicode-bidi:plaintext}
.again{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.again .btn{background:transparent;border-color:transparent;color:var(--muted)}
.again .btn:hover{background:var(--surface-2);color:var(--text)}
.error{margin-top:24px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--text);
  border-radius:var(--r-l);padding:18px 20px;font-size:15px;animation:rise .4s var(--ease)}
.error b{color:var(--accent-text);display:block;margin-bottom:4px}
.error .actions{border:0;padding-top:0;margin-top:14px}

/* ---------------- footer ---------------- */
.foot{width:100%;max-width:1120px;text-align:center;padding:10px 0 36px;font-size:13.5px;color:var(--muted)}
.foot a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .2s}
.foot a:hover{text-decoration-color:var(--accent)}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .tools{grid-template-columns:1fr}
  .tool-desc{min-height:0}
  .result{grid-template-columns:1fr}
  .filecard{grid-template-columns:1fr}
  .ruler li span{display:none}
  .ruler li.now span{display:inline}
  .top{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------------- trim-mark illustration ---------------- */
.ill-marks .cm{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:square;transition:transform .6s var(--ease) var(--d),stroke .3s}
.ill-marks .cm path{fill:none}
.tool:hover .ill-marks .cm{stroke:var(--accent)}
.tool:hover .ill-marks .cm:nth-of-type(1){transform:translate(-4px,-4px)}
.tool:hover .ill-marks .cm:nth-of-type(2){transform:translate(4px,-4px)}
.tool:hover .ill-marks .cm:nth-of-type(3){transform:translate(-4px,4px)}
.tool:hover .ill-marks .cm:nth-of-type(4){transform:translate(4px,4px)}
.dl-title{margin:0 0 8px;font-weight:700;font-size:14px;color:var(--muted)}

/* ---------------- feedback ---------------- */
.feedback{width:100%;max-width:1120px;margin:0 0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3.4vw,36px);box-shadow:var(--shadow-1)}
.fb-head h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.fb-head p{margin:8px 0 0;color:var(--muted)}
.fb-form{display:grid;gap:14px;min-width:0}
.stars{border:0;margin:0;padding:0;min-width:0}
.star-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.stars legend{font-weight:500;font-size:14px;margin-bottom:6px;padding:0}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{font-size:32px;line-height:1;color:var(--line-2);cursor:pointer;transition:color .15s,transform .25s var(--ease);padding:0 2px}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:#f5b400}
.stars label:hover{transform:scale(1.18)}
.stars input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.stars input:checked+label{animation:starPop .4s var(--ease)}
@keyframes starPop{50%{transform:scale(1.35)}}
.fb-field{display:grid;gap:6px;font-weight:500;font-size:14px;min-width:0}
.fb-field small{color:var(--faint);font-weight:400}
.fb-field input,.fb-field textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px 12px;background:var(--surface);font:inherit;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 8%,transparent)}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fb-status{margin:0;font-size:14px;color:var(--muted)}
.fb-status.ok{color:var(--ok-tx);font-weight:500}
.fb-status.err{color:var(--accent-text)}
.feedback.sent .fb-form{opacity:.6;pointer-events:none}
@media (max-width:880px){.feedback{grid-template-columns:1fr}.fb-row{grid-template-columns:1fr}}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}