@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal; font-display:swap; font-weight:200 800;
  src:url("/assets/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2-variations"), url("/assets/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
}

:root{
  --paper:#F7F8FB; --surface:#FFFFFF; --ink:#14205A; --muted:#4D5878; --line:#E2E6EF; --soft:#EFF2F7;
  --tape:#4338CA; --tape-ink:#FFFFFF; --tape-soft:#EEF0FF; --tape-edge:#4338CA; --over:#B93A26; --ok:#2C7A4B;
  --focus:#4338CA; --dot:#D99A00; --drop-line:#8C959C; --teal:#0F766E; --teal-soft:#E2F4F1;
  --chip-on-bg:var(--tape); --chip-on-ink:var(--tape-ink);
  --shadow:0 1px 2px rgba(20,32,90,.04), 0 14px 36px -24px rgba(20,32,90,.28);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#11161C; --surface:#19212A; --ink:#ECEFEA; --muted:#9AA4AE; --line:#2D3742; --soft:#222B36;
    --tape:#4F46E5; --tape-ink:#FFFFFF; --tape-soft:#262A52; --tape-edge:#818CF8; --over:#E5674F; --ok:#5DB57F;
    --focus:#A5B4FC; --dot:#F2C230; --drop-line:#66717D; --teal:#5EEAD4; --teal-soft:rgba(94,234,212,.1);
    --chip-on-bg:var(--tape); --chip-on-ink:var(--tape-ink);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 36px -24px rgba(0,0,0,.7); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11161C; --surface:#19212A; --ink:#ECEFEA; --muted:#9AA4AE; --line:#2D3742; --soft:#222B36;
  --tape:#4F46E5; --tape-ink:#FFFFFF; --tape-soft:#262A52; --tape-edge:#818CF8; --over:#E5674F; --ok:#5DB57F;
  --focus:#A5B4FC; --dot:#F2C230; --drop-line:#66717D; --teal:#5EEAD4; --teal-soft:rgba(94,234,212,.1);
  --chip-on-bg:var(--tape); --chip-on-ink:var(--tape-ink);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 36px -24px rgba(0,0,0,.7); color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px; line-height:1.55; font-variant-numeric:tabular-nums;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
/* site header: full-width sticky bar */
.site-head{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02), 0 6px 18px -12px rgba(16,24,32,.25)}
.head-inner{max-width:1040px; margin:0 auto; padding:12px 20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 20px; min-height:68px; box-sizing:border-box}
.head-inner .topnav{justify-content:center}
@media (max-width:820px){
  .head-inner{grid-template-columns:1fr auto; padding:10px 16px 12px}
  .head-inner .topnav{grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:nowrap; justify-content:space-between; gap:2px}
  .head-inner .hactions{grid-column:2; grid-row:1}
}
.brand{font-weight:800; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.brand-mark{width:22px; height:22px; border-radius:4px; background:var(--tape); position:relative; flex:none}
.brand-mark::after{content:""; position:absolute; left:4px; right:4px; top:10px; height:2px; background:var(--tape-ink)}
.private{font-size:14px; color:var(--muted); display:flex; align-items:center; gap:6px}
.private svg{flex:none}

h1{font-size:clamp(28px,4.6vw,42px); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:32px 0 10px}
.promise{font-size:18px; color:var(--muted); margin:0 0 28px; max-width:56ch}

/* tool card: the drop zone comes first */
.hometool{display:flex; flex-direction:column}
.hometool > #unsupported{order:-3}
.hometool > #drop{order:-2; margin-bottom:12px}
.example{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:8px 0 24px}
.example h2{margin-top:0}
.ba{display:grid; gap:10px; margin:14px 0}
.ba-row{display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:12px; font-size:15px}
.ba-name small{display:block; color:var(--muted); font-size:13px}
.ba-bar{height:14px; border-radius:7px; background:color-mix(in srgb, var(--line) 60%, transparent); overflow:hidden}
.ba-bar i{display:block; height:100%; border-radius:7px; background:var(--tape)}
.ba-row:first-child .ba-bar i{background:var(--muted)}
.ba-val{color:var(--muted)} .ba-val b{color:var(--ink)}
@media (max-width:520px){ .ba-row{grid-template-columns:1fr auto; gap:4px 12px} .ba-bar{grid-column:1 / -1; grid-row:2} }
.home-grp{font-size:17px; margin:20px 0 8px}
.home-greet{font-size:15px; margin:10px 0 0}
.tabs{display:inline-flex; border:1px solid var(--line); border-radius:8px; padding:3px; background:var(--surface); margin-bottom:18px}
.tab{white-space:nowrap; appearance:none; border:0; background:none; color:var(--muted); font:inherit; font-size:15px; font-weight:600; padding:8px 14px; border-radius:6px; cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink); color:var(--paper)}

.opts{margin:0 0 18px}
.opts legend{font-weight:600; font-size:15px; margin-bottom:8px; padding:0}
fieldset{border:0; margin:0; padding:0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:15px; font-weight:600}
.chip span small{font-weight:400; color:var(--muted); font-size:14px}
.chip input:checked + span{background:var(--chip-on-bg); border-color:var(--tape-edge); box-shadow:inset 0 0 0 1px var(--tape-edge); color:var(--chip-on-ink)}
.chip input:checked + span small{color:var(--chip-on-ink)}
.chip input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.custom{display:none; align-items:center; gap:8px; margin-top:10px; font-size:15px}
.custom.show{display:flex}
.custom input{width:90px; font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink)}
.check{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:15px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--ink)}

.drop{
  display:block; border:2px dashed var(--drop-line); border-radius:10px; background:var(--surface);
  padding:38px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover,.drop:focus-within{border-color:var(--tape-edge); background:color-mix(in srgb, var(--tape-soft) 45%, var(--surface))}
.drop.over{border-style:solid; border-color:var(--tape-edge); background:var(--tape-soft)}
.drop strong{display:block; font-size:21px; font-weight:700; letter-spacing:-.01em}
.drop span{display:block; color:var(--muted); font-size:15px; margin-top:4px}
.drop .btnlike{display:inline-block; margin-top:16px; padding:10px 18px; border-radius:6px; background:var(--tape); color:var(--tape-ink); border:1px solid var(--tape-edge); font-weight:700; font-size:15px}
.drop:hover .btnlike{filter:brightness(.96)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px; margin-top:16px}
.fname{font-weight:700; font-size:18px; word-break:break-all; margin:0}
.fmeta{color:var(--muted); font-size:15px; margin:2px 0 0}

/* The tape gauge */
.gauge{margin:22px 0 6px}
.g-row{display:grid; grid-template-columns:88px 1fr; align-items:center; gap:12px; margin:10px 0}
.g-label{font-size:14px; color:var(--muted); text-align:right}
.g-track{position:relative; height:26px}
.g-bar{position:absolute; left:0; top:0; bottom:0; border-radius:4px; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; font-size:13px; font-weight:700; white-space:nowrap; min-width:2px; transition:width .4s ease}
.g-bar.src{background:var(--ink); color:var(--paper)}
.g-bar.src.over{background:repeating-linear-gradient(135deg,var(--ink) 0 8px,color-mix(in srgb,var(--ink) 82%,var(--over)) 8px 16px)}
.g-bar.out{background:var(--tape); color:var(--tape-ink)}
.g-bar.ghost{background:transparent; border:2px dashed var(--line); color:var(--muted)}
.g-bar.tiny{justify-content:flex-start}
.g-bar.tiny span{position:absolute; left:calc(100% + 6px); color:var(--ink)}
.g-ruler{position:relative; height:26px; margin-left:100px; border-top:2px solid var(--ink)}
.g-tick{position:absolute; top:-2px; width:2px; height:8px; background:var(--ink)}
.g-tick.minor{height:5px; width:1px; background:var(--muted)}
.g-tick b{position:absolute; top:10px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap}
.g-area{position:relative}
.g-limit{position:absolute; top:-6px; bottom:-4px; width:0; border-left:2px solid var(--over); z-index:2; pointer-events:none}
.g-limit b{position:absolute; top:-22px; left:6px; font-size:12px; font-weight:700; color:var(--over); white-space:nowrap}
.g-limit.flip b{left:auto; right:6px}

.estimate{font-size:16px; margin:18px 0 0}
.estimate .q{display:inline-block; font-size:13px; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid currentColor; margin-left:4px}
.q.good{color:var(--ok)} .q.ok{color:var(--muted)} .q.low{color:var(--over)}
.note{color:var(--muted); font-size:15px; margin:6px 0 0}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.btn{appearance:none; font:inherit; font-size:16px; font-weight:700; border-radius:6px; padding:12px 20px; cursor:pointer; border:2px solid transparent}
.btn.primary{background:var(--tape); color:var(--tape-ink); border-color:var(--tape)}
.btn.primary:hover{filter:brightness(.96)}
.btn.secondary{background:none; color:var(--ink); border-color:var(--line)}
.btn:disabled{opacity:.5; cursor:not-allowed}

.progress{margin-top:6px}
.p-track{height:14px; border-radius:4px; background:var(--paper); border:1px solid var(--line); overflow:hidden}
.p-fill{height:100%; width:0; background:var(--tape); transition:width .25s linear}
.p-text{display:flex; justify-content:space-between; font-size:15px; margin-top:8px}
.p-text span:last-child{color:var(--muted)}

.result-head{font-size:clamp(26px,4.5vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0}
.result-sub{color:var(--muted); margin:6px 0 0; font-size:15px}
video{display:block; width:100%; max-height:360px; background:#000; border-radius:8px; margin-top:16px}
audio{display:block; width:100%; margin-top:16px}
.status{font-size:15px; margin-top:10px; min-height:1.4em}

.error{border-color:var(--over)}
.error .errtitle{margin:0; font-size:19px; font-weight:700; color:var(--over)}
.error p{margin:6px 0 0}

.banner{border:1px solid var(--over); border-radius:8px; padding:12px 16px; margin:0 0 18px; font-size:15px; background:var(--surface)}
.banner b{color:var(--over)}

.adslot{position:relative; border-radius:8px; color:var(--muted); font-size:12px; min-height:120px; margin-top:20px; background:color-mix(in srgb,var(--surface) 55%,transparent); border:1px solid var(--line); overflow:hidden}
.adslot > span{position:absolute; top:6px; left:10px; letter-spacing:.02em}
.adslot ins{margin-top:22px}

article{margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line)}
article h2{font-size:26px; letter-spacing:-.02em; margin:0 0 10px; line-height:1.2}
article h3{font-size:19px; margin:26px 0 6px}
article p, article li{max-width:66ch}
article ol{padding-left:22px}
.limits{width:100%; border-collapse:collapse; font-size:15px; margin-top:8px}
.limits th,.limits td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.limits th{font-weight:600}
.tablewrap{overflow-x:auto}
.tablewrap:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
footer{margin:56px 0 0; padding:20px 0 32px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
.thumbs{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
.thumb{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper)}
.thumb .frame{position:relative; aspect-ratio:var(--ar,16/9); background:#000}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:var(--fit,contain)}
.thumb img.bg{object-fit:cover; filter:blur(6px) brightness(.6); transform:scale(1.12)}
.thumbs.fill img.bg{display:none}
.thumb .num{position:absolute; top:6px; left:6px; background:var(--tape); color:var(--tape-ink); font-size:12px; font-weight:800; border-radius:4px; padding:0 6px; line-height:20px}
.thumb .ctrl{display:flex; justify-content:space-between; padding:4px}
.thumb .ctrl button{appearance:none; border:0; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:700; width:30px; height:28px; border-radius:4px; cursor:pointer}
.thumb .ctrl button:hover{background:var(--line)}
.thumb .ctrl button:disabled{opacity:.3; cursor:default; background:none}
.count{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.count .slots{font-size:14px; color:var(--muted)}
.cap{height:6px; border-radius:3px; background:var(--paper); border:1px solid var(--line); overflow:hidden; margin-top:8px}
.cap i{display:block; height:100%; background:var(--ink); width:0; transition:width .2s}
/* site chrome */
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 12px; border-radius:6px; z-index:10}
.skip:focus{left:12px}
.brand{text-decoration:none; color:var(--ink)}
.topnav{display:flex; gap:4px; flex-wrap:wrap; font-size:15.5px}
.topnav a{display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; color:var(--ink); font-weight:700; padding:9px 13px; border-radius:999px; border:1px solid transparent; transition:background .15s, border-color .15s}
.topnav a:hover{background:var(--paper); border-color:var(--line)}
.topnav a[aria-current]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.topnav a[aria-current] svg{color:var(--tape)}
.private-strip{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); margin:18px 0 0}
.content{margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line)}
.content h2{font-size:26px; letter-spacing:-.02em; margin:34px 0 10px; line-height:1.2}
.content h2:first-child{margin-top:0}
.content h3{font-size:19px; margin:24px 0 6px}
.content p,.content li{max-width:66ch}
.content ol,.content ul{padding-left:22px}
.content li{margin:4px 0}
.faq details{border-bottom:1px solid var(--line); padding:12px 0}
.faq summary{font-weight:600; cursor:pointer; list-style-position:outside}
.faq details p{margin:8px 0 0; color:var(--ink)}
.related{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; list-style:none; padding:0 !important}
.related a{display:block; border:1px solid var(--line); border-radius:8px; padding:12px 14px; text-decoration:none; background:var(--surface)}
.related a b{display:block}
.related a span{color:var(--muted); font-size:14px}
.related a:hover{border-color:var(--ink)}
.legal h1{font-size:clamp(28px,4.6vw,40px)}
.legal .updated{color:var(--muted); font-size:15px; margin-top:-4px}
.legal h2{font-size:22px; margin:30px 0 8px}
.legal p,.legal li{max-width:68ch}
footer.site{margin:64px 0 0; padding:28px 0 36px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
.fcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px}
.fcols h2{font-size:14px; color:var(--ink); margin:0 0 8px}
.fcols ul{list-style:none; padding:0; margin:0}
.fcols li{margin:4px 0}
.fcols a{text-decoration:none}
.fcols a:hover{text-decoration:underline; color:var(--ink)}
.fine{margin-top:22px}
.notfound{padding:40px 0}
/* header actions: day/night + feedback */
.hactions{display:flex; align-items:center; gap:8px}
.iconbtn{appearance:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn .i-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .iconbtn .i-sun{display:block}
  :root:not([data-theme="light"]) .iconbtn .i-moon{display:none}
}
:root[data-theme="dark"] .iconbtn .i-sun{display:block}
:root[data-theme="dark"] .iconbtn .i-moon{display:none}
.fbbtn{appearance:none; font:inherit; font-size:15px; font-weight:600; height:42px; padding:0 16px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.fbbtn:hover{border-color:var(--ink)}
.linkbtn{appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fbline{font-size:15px; color:var(--muted); margin:6px 0 0}
/* feedback dialog */
.fbdialog{width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); border-radius:12px; padding:22px; background:var(--surface); color:var(--ink)}
.fbdialog::backdrop{background:rgba(10,14,18,.55)}
.fbdialog h2{margin:0; font-size:22px; letter-spacing:-.01em}
.fbintro{color:var(--muted); margin:4px 0 14px; font-size:15px}
.fbkinds .chips,.fbkinds{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.fblabel{display:block; font-weight:600; font-size:15px; margin-bottom:6px}
.fbdialog textarea{width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); resize:vertical}
.fbtech{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0 0; white-space:pre-wrap; overflow-x:auto}
.fbnote{font-size:13px; color:var(--muted); margin:12px 0 0}
.fbnote a{color:inherit}
.fbemail{margin-top:14px}
.fbemail span{font-weight:400; color:var(--muted)}
.fbdialog input[type="email"]{width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink)}
.fbhp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fbsent{font-size:17px; font-weight:600}
.promo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:0 0 20px; max-width:560px}
.promo:hover{border-color:var(--ink)}
.promo-tag{flex:none; background:var(--tape-soft); color:var(--ink); font-size:12px; font-weight:700; border-radius:4px; padding:1px 7px}
.promo-text{display:flex; flex-wrap:wrap; column-gap:6px; font-size:15px; line-height:1.35}
.promo-text span{color:var(--muted)}
.promo-arrow{margin-left:auto; font-weight:700; flex:none}
.promo-text a{font-weight:700; color:var(--ink)}
.greet{margin:0 0 20px}
.greet h2{display:flex; align-items:baseline; gap:8px; font-size:20px; margin:0}
.greet .note{margin:4px 0 12px}
.greet-cards{list-style:none; margin:0; padding:0 0 4px; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px}
.greet-cards a{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:112px; padding:12px; border-radius:10px; text-decoration:none; color:var(--gi); background:linear-gradient(160deg, var(--g1), var(--g2)); box-shadow:0 1px 2px rgba(0,0,0,.15)}
.greet-cards a:hover,.greet-cards a:focus-visible{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2)}
.greet-cards b{font-size:17px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.35)}
.greet-cards span{font-size:13px; line-height:1.3; opacity:.9; text-shadow:0 1px 2px rgba(0,0,0,.35)}
.greet-cards i{position:absolute; top:8px; left:8px; font-style:normal; font-size:11px; font-weight:700; background:var(--tape); color:var(--tape-ink); border-radius:4px; padding:1px 6px}
@media (max-width:720px){.greet-cards{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 6px}.greet-cards li{flex:0 0 42%; scroll-snap-align:start}}
.greet-tab{margin:0 0 14px; padding:10px 12px; border-radius:8px; background:var(--tape-soft); font-size:15px; line-height:1.5}
.greet-tab a{font-weight:700; color:var(--ink)}
.newbadge{display:inline-block; vertical-align:1px; margin-left:4px; background:var(--tape-soft); color:var(--ink); font-size:10.5px; font-weight:700; border-radius:3px; padding:0 5px; line-height:16px}
.brand{display:flex; align-items:center}
.logo-word{display:block; height:34px; width:auto; color:var(--ink)}
.logo-dot{fill:var(--dot); stroke:var(--dot)}
@media (max-width:520px){ .logo-word{height:28px} .topnav a{padding:8px 9px; font-size:14px; gap:5px} .topnav a svg{display:none} }
@media (max-width:380px){ .topnav a{padding:8px 7px; font-size:13.5px} }
.chip .ci{flex:none; margin-left:-3px; color:var(--muted)}
.chip input:checked + span .ci{color:var(--chip-on-ink)}
.shots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:22px 0}
.shot{margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.shots .shot{margin:0}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{font-size:14px; color:var(--muted); padding:10px 12px; border-top:1px solid var(--line)}
@media (max-width:640px){ .shots{grid-template-columns:1fr} }
/* side by side, the steps share one box (the tallest shot's shape) so the captions line up */
@media (min-width:641px){ .shots .shot img{aspect-ratio:1424 / 1150; object-fit:contain; object-position:top; background:var(--paper)} }
.crumbs{margin:28px 0 -18px; font-size:14px}
.crumbs a{color:var(--muted); text-decoration:none; font-weight:600}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.guide-meta{font-size:14px; color:var(--muted); margin:0 0 6px}
.guide .promo.cta{margin:18px 0 6px}
.guide-body .promo.cta{margin:28px 0}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:18px 0 0; max-width:560px}
.toc b{font-size:14px}
.toc ol{margin:6px 0 0; padding-left:20px; font-size:15px}
.toc li{margin:3px 0}
.toc a{color:var(--ink)}
.guide-body{margin-top:32px}
.guide-body h2{scroll-margin-top:96px}
.guide-link{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:28px 0 0; font-size:16px}
.guide-link span{font-size:12px; font-weight:800; background:var(--tape); color:var(--tape-ink); border-radius:4px; padding:1px 7px}
.guide-list{margin-top:24px}
.trimtoggle{margin:14px 0 0}
.editbox{margin-top:14px}
.srcwrap{display:flex; justify-content:center; align-items:center; background:#000; border-radius:8px; overflow:hidden; max-height:340px}
.srcprev{margin:0; max-height:320px; width:auto; max-width:100%; border-radius:0; transition:transform .25s ease}
.range2{position:relative; height:34px; margin:16px 4px 6px}
.range2-track{position:absolute; left:0; right:0; top:14px; height:6px; border-radius:3px; background:var(--line)}
.range2-fill{position:absolute; top:14px; height:6px; border-radius:3px; background:var(--tape)}
.range2 input[type=range]{position:absolute; left:0; top:0; width:100%; height:34px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none}
.range2 input[type=range]::-webkit-slider-runnable-track{background:none; height:34px}
.range2 input[type=range]::-moz-range-track{background:none}
.range2 input[type=range]::-webkit-slider-thumb{pointer-events:auto; -webkit-appearance:none; width:22px; height:30px; border-radius:6px; background:var(--ink); border:3px solid var(--tape); cursor:ew-resize; margin-top:2px}
.range2 input[type=range]::-moz-range-thumb{pointer-events:auto; width:18px; height:26px; border-radius:6px; background:var(--ink); border:3px solid var(--tape); cursor:ew-resize}
.range2 input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--focus); outline-offset:2px}
.trimrow{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:6px}
.trimfield{display:flex; align-items:center; gap:8px; font-size:15px}
.trimfield label{font-weight:600}
.trimfield input{width:90px; font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-variant-numeric:tabular-nums}
.btn.sm{padding:6px 10px; font-size:13px; border-width:1px}
.trimlen{font-size:15px; color:var(--muted)}
@media (max-width:520px){ .tab{padding:8px 6px; font-size:14px} .tab .newbadge{display:none} }
.calc{margin-top:8px}
.calc-card{margin:0 0 16px}
.calc-h{font-size:20px; letter-spacing:-.01em; margin:0 0 12px}
.calc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 16px}
.calc-grid label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.calc-grid input,.calc-grid select{font:inherit; font-size:16px; font-weight:500; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-variant-numeric:tabular-nums; min-width:0}
.calc-file{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0}
.calc-file .btn{cursor:pointer}
.calc-out{margin-top:14px}
/* reserve space for results so the page doesn't jump when they appear (layout shift) */
#szOut{min-height:372px} #brOut{min-height:170px} #lnOut{min-height:96px} #spOut{min-height:330px} #spNeedOut{min-height:27px}
@media (max-width:520px){ #szOut{min-height:420px} #brOut{min-height:220px} #lnOut{min-height:120px} }
.calc-big{font-size:clamp(30px,5vw,40px); font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.1}
.calc-big-sm{font-size:18px; margin:12px 0 0}
.calc .ok{color:var(--ok); font-weight:700}
.calc tr.hl td{background:var(--tape-soft); font-weight:700}
.calc .btn.primary{display:inline-block; text-decoration:none; margin-top:8px}
.calc-hint{font-size:14px; color:var(--muted); margin:10px 0 0}
.calc-hint a{color:var(--ink); font-weight:600}
.guide-link + .guide-link{margin-top:10px}
.guide-sec{font-size:24px; letter-spacing:-.02em; margin:40px 0 6px}
.changes{padding-left:22px; max-width:68ch}
.changes li{margin:6px 0}
.drop-sm{padding:22px 16px}
.drop-sm strong{font-size:18px}
.subt .opts,.aut .opts{margin:16px 0 0}
.subgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.subgrid label{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14px}
.subgrid textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.45; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); resize:vertical; min-height:260px}
@media (max-width:640px){ .subgrid{grid-template-columns:1fr} }
.status.bad{color:var(--over); font-weight:600}
.calc-legend{font-size:14px; font-weight:600; margin-bottom:6px}
.hubcards{margin:6px 0 0}
#auPreview{margin-top:14px}
.aut .range2{margin-top:18px}
.wmbox{margin-top:16px}
.wmtoggle .muted{font-weight:400; color:var(--muted)}
.wmbox.onvideo > .wmtoggle{display:none}
.wmbox.onvideo > .wmnote{display:none}
.wmnote{margin:4px 0 0 28px !important; font-size:13px}
#wmPanel{margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.wmtextrow{gap:10px}
.wmcount{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.wmcount.full{color:var(--over); font-weight:700}
.filedetails{margin-top:14px; font-size:14px}
.filedetails summary{cursor:pointer; font-weight:600}
.filedetails .calc-grid{margin-top:10px}
.filedetails .calc-grid input{font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
.wmbox legend small, #opts-edit legend small{font-weight:400; color:var(--muted)}
.wmrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:12px; font-size:14px}
.wmrow label{display:flex; align-items:center; gap:8px; font-weight:600}
.wmrow select,.wmrow input[type=text],.wmrow input[type=number],#wmText{font:inherit; font-size:15px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
#wmText{width:100%; max-width:520px}
#wmColorPick{width:42px; height:36px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer}
#musicStart,#gMusicStart{width:5.5em}
.wmrow input[type=range]{accent-color:var(--ink)}
#wmOpacityVal{min-width:3.2em; font-variant-numeric:tabular-nums; color:var(--muted)}
.shots2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0}
.shots2 .shot{margin:0}
.shot.narrow{max-width:520px}
@media (max-width:640px){ .shots2{grid-template-columns:1fr} }
.wmlogo{height:40px; width:auto; max-width:160px; object-fit:contain; background:repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 50%/12px 12px; border-radius:6px; padding:3px}
.wmremember{font-weight:500 !important}
.wmpreview{display:block; margin-top:14px; border-radius:8px; border:1px solid var(--line); max-width:100%; height:auto}
.gifprev{display:block; max-width:100%; max-height:320px; margin:14px auto 0; border-radius:8px}
/* greetings: a wide three-column editor (style, preview, personalise) that stacks on phones */
body[data-fx] .wrap{max-width:1260px}
body[data-fx] .head-inner{max-width:1260px}
body[data-fx] .content,body[data-fx] .adslot{max-width:760px}
.fxhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 40px; margin:0 0 24px}
.fxhead > div{flex:1 1 420px; min-width:0}
.fxhead .promise{margin:0}
.fxsteps{display:flex; align-items:center; gap:10px; list-style:none; margin:0 0 4px; padding:0; font-weight:600; font-size:16px; color:var(--muted)}
.fxsteps li{display:flex; align-items:center; gap:10px}
.fxsteps li + li::before{content:""; width:22px; height:1px; background:var(--line)}
.fxsteps b{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--line); color:var(--ink); font-size:15px}
.fxsteps li.on{color:var(--ink)} .fxsteps li.on b{background:var(--tape); color:var(--tape-ink)}
.fxsteps li.done b{background:var(--tape-soft); color:var(--ink)}
.fxgrid{display:grid; grid-template-columns:270px minmax(0,1fr) 340px; grid-template-areas:"style stage side"; gap:24px; align-items:start}
.fxgrid.nostyles{grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:"stage side"}
.fxcard{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px}
.fxstylecol{grid-area:style} .fxstagecol{grid-area:stage} .fxside{grid-area:side}
.fxh{font-size:21px; letter-spacing:-.01em; margin:0 0 16px}
.fxstyles{display:grid; gap:16px}
.fxstyle{position:relative; display:block; cursor:pointer}
.fxstyle input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1}
.fxstyle canvas{display:block; width:100%; aspect-ratio:16/9; border-radius:8px; border:3px solid transparent; box-shadow:0 0 0 1px var(--line)}
.fxstyle i{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:var(--tape); display:none; box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fxstyle i::after{content:""; position:absolute; left:9px; top:5px; width:6px; height:11px; border:solid var(--tape-ink); border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.fxstyle span{display:block; padding:8px 2px 0; line-height:1.25}
.fxstyle b{display:block; font-size:16px}
.fxstyle small{display:block; font-size:13px; color:var(--muted)}
.fxstyle input:checked ~ canvas{border-color:var(--tape); box-shadow:none}
.fxstyle input:checked ~ i{display:block}
.fxstyle input:focus-visible ~ canvas{outline:3px solid var(--focus); outline-offset:2px}
.fxmorestyles{margin-top:14px; width:100%; min-height:40px}
.fxstagebox{position:relative; display:flex; align-items:center; justify-content:center; min-height:300px}
.fxstage{position:relative; display:table; margin:0 auto; max-width:100%; border-radius:10px; overflow:hidden; background:#000}
.fxstage video,.fxstage img{display:block; max-width:100%; max-height:600px; margin:0}
.fxlayer{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none}
.fxapp.over .fxstagecol{outline:3px dashed var(--tape); outline-offset:4px}
.fxbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:16px 0 0}
.fxplay{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.fxplay svg{fill:currentColor} .fxplay .i-play{display:none} .fxplay.paused .i-play{display:block} .fxplay.paused .i-pause{display:none}
.fxplaylabel{font-weight:600; font-size:15px}
.fxshapes{margin-left:auto}
.fxshapes .chip input:checked + span{background:var(--tape); color:var(--tape-ink); border-color:var(--tape)}
.fxsrc{margin:10px 0 0; font-size:14px; color:var(--muted); text-align:center; word-break:break-word}
.fxf{display:block; margin:0 0 16px; font-weight:600; font-size:15px}
.fxl{display:block; font-weight:600; font-size:15px; margin:0 0 8px; padding:0}
.fxf input[type=text]{display:block; width:100%; margin-top:6px; padding:11px 14px; font:inherit; font-weight:400; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
.fxphoto{display:flex; gap:8px; flex-wrap:wrap}
.fxphoto .btn.sm{min-height:40px; font-size:14px; padding:6px 14px}
.fxpal{display:flex; flex-wrap:wrap; gap:10px}
.fxsw{position:relative; display:block}
.fxsw input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.fxsw span{display:block; width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.fxsw input:checked + span{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink)}
.fxsw input:focus-visible + span{outline:3px solid var(--focus); outline-offset:5px}
.fxpick input{opacity:0; width:100%; height:100%; padding:0; border:0}
.fxpick.on span{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink)}
.fxpick input:focus-visible + span{outline:3px solid var(--focus); outline-offset:5px}
.fxsnd .chip span{padding:7px 12px; font-size:14px}
.fxsndopt{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-weight:400}
.fxsndopt:empty,.fxsndopt:not(:has(> :not([hidden]))){display:none}
.fxsndopt select{font:inherit; font-size:15px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); width:100%}
.fxsndopt .btn.sm{min-height:40px; font-size:14px; padding:6px 14px}
.fxsndinfo{font-size:14px; color:var(--muted); font-weight:400}
p.fxsndinfo{margin:10px 0 0}
.fxinline{font-size:14px; font-weight:400; color:var(--muted); width:100%}
.fxinline input{width:70px; font:inherit; padding:5px 8px; margin:0 4px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink)}
.fxmix{display:block; margin-top:10px; font-weight:400; font-size:14px}
#fxRec.rec{border-color:var(--over); color:var(--over)}
.linkbtn{appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer}
.fxseg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.fxseg .chip span{display:flex; justify-content:center; padding:10px 8px}
.fxseg .chip input:checked + span{background:var(--tape); color:var(--tape-ink); border-color:var(--tape)}
.fxmoreopts{background:var(--paper); border-radius:10px; margin:0 0 16px; font-size:15px}
.fxmoreopts summary{cursor:pointer; font-weight:600; padding:13px 16px; list-style:none; display:flex; justify-content:space-between; align-items:center}
.fxmoreopts summary::-webkit-details-marker{display:none}
.fxmoreopts summary::after{content:""; width:8px; height:8px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-3px)}
.fxmoreopts[open] summary::after{transform:rotate(-135deg)}
.fxmoreinner{padding:0 16px 14px}
.fxmoreinner .opts{margin:12px 0 0}
.fxmoreinner select{font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); width:100%}
.fxmoreinner .calc-grid{grid-template-columns:1fr 1fr}
.fxmoreinner .check{display:block; margin-top:12px}
.fxexport{width:100%; min-height:54px; font-size:17px; border-radius:8px}
.fxcap{text-align:center; font-size:13px; color:var(--muted); margin:8px 0 0}
.fxside .status:empty{display:none}
@media (max-width:1120px){
  .fxgrid,.fxgrid.nostyles{grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"style style" "stage side"}
  .fxstyles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .fxgrid,.fxgrid.nostyles{grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "style" "side"; gap:16px}
  .fxcard{padding:14px}
  .fxstyles{grid-template-columns:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -14px; padding:0 14px 4px}
  .fxstyle{flex:0 0 58%; scroll-snap-align:start}
  .fxstage video,.fxstage img{max-height:62vh}
  .fxsteps{font-size:14px; gap:6px} .fxsteps li{gap:6px} .fxsteps li + li::before{width:10px} .fxsteps b{width:30px; height:30px}
}
.volbox .calc-grid label{font-size:14px}
.volbox select,.advbox select,#auKbps,#auWavDepth{font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
.volbox input[type=range]{accent-color:var(--ink); width:100%}
.volbox .muted{font-weight:500; color:var(--muted)}
.sbnote{margin:10px 0 0}
[hidden]{display:none !important}
@media (max-width:520px){
  .g-row{grid-template-columns:64px 1fr; gap:8px}
  .g-ruler{margin-left:72px}
  .drop{padding:28px 16px}
  .tabs{display:flex}
  .tab{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Reel size pages: the spec card, then the 9:16 editor (preview beside its options; stacked on phones) */
.specs{margin:0 0 20px}
.specs h2{font-size:19px; margin:0 0 12px}
.spec-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.spec-grid div{padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.spec-grid b{display:block; font-size:18px; letter-spacing:-.01em; font-family:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace}
.spec-grid span{display:block; font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.35}
.specs .note{margin:10px 0 0; font-size:14px}
@media (max-width:640px){ .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} .spec-grid div{padding:10px 12px} .spec-grid b{font-size:14.5px} .spec-grid span{font-size:12.5px} }
.reelgrid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:24px; margin-top:14px; align-items:start}
.reelstage canvas{display:block; width:100%; aspect-ratio:9/16; height:auto; border-radius:14px; background:#000}
.reelbar{display:flex; align-items:center; gap:10px; margin-top:10px}
.reelbar input[type=range]{flex:1; min-width:0}
.reeltime{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.reelopts .opts{margin:0 0 14px}
.reelrow{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:15px; font-weight:600}
.reelrow input[type=range]{flex:1; min-width:0}
.reeltool input[type=range]{accent-color:var(--tape-edge)}
.reeltool .check{display:block; margin:0 0 6px}
.reelnote{margin:0 0 18px; font-size:13.5px}
.plats{margin:0 0 16px}
.edit-social{margin:16px 0 0}
.pplats{margin:0 0 4px}
.pplatnote{margin:8px 0 0; font-size:14px}
.pplatnote.warn{color:var(--over); font-weight:600}
.gdestnote{margin:8px 0 0; font-size:14px} .gdestnote:empty{display:none}
.fxdest .chip span{padding:7px 12px; font-size:14px}
.fxdestnote{margin:8px 0 0; font-size:13.5px} .fxdestnote:empty{display:none}
.result-sub.warn{color:var(--over); font-weight:600}
.edit-social-head{margin:0 0 8px; font-weight:600; font-size:15px}
.linkchips a.chip{text-decoration:none; color:var(--ink)}
.linkchips a.chip:hover span{border-color:var(--tape-edge)}
.reelrow input[type=color]{width:44px; height:32px; padding:0; border:1px solid var(--line); border-radius:8px; background:none}
.reeltrim{grid-template-columns:1fr 1fr}
.reelout{display:block; max-height:420px; max-width:100%; margin:10px auto 0; border-radius:12px; background:#000}
.reelouts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:14px}
.reelitem{border:1px solid var(--glass-line, var(--line)); border-radius:14px; padding:14px; background:color-mix(in srgb, var(--surface) 60%, transparent)}
.reelitem-head{font-weight:700; margin:0}
.reelitem .result-sub{margin:2px 0 0}
.reelitem .actions{margin-top:10px}
.reelitem a.btn{text-decoration:none}
#rEst p{margin:0 0 4px} #rEst ul{margin:0 0 10px; padding-left:20px} #rEst li{margin:2px 0}
@media (max-width:640px){ .reelgrid{grid-template-columns:1fr} .reelstage{max-width:280px; margin:0 auto; width:100%} }

/* ---------- flat look, on every page: plain paper, white cards with a hairline border and a soft shadow ----------
   Last in the file before the home page so it layers over the plain surfaces above. */
.drop, .panel, .example, .fxcard, .spec-grid div, .promo, .toc, .tablewrap, .shot, #wmPanel, .fbdialog{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.panel, .fxcard, .example, .tablewrap, .toc, .promo{border-radius:16px}
.tablewrap{padding:6px 12px}
.related a{border-radius:12px; border-color:var(--line); transition:border-color .15s, box-shadow .15s}
.related a:hover{border-color:var(--tape-edge); box-shadow:var(--shadow)}
.faq details{border:1px solid var(--line); background:var(--surface); padding:12px 16px; border-radius:12px; margin:8px 0}
/* the tool's mode tabs repeat the top menu word for word, so they stay hidden on every page */
.tabs{display:none}
.drop{border:2px dashed color-mix(in srgb, var(--drop-line) 60%, transparent); border-radius:16px; padding:44px 20px; box-shadow:none}
.drop:hover, .drop:focus-within, .drop.over{border-color:var(--tape-edge); background:color-mix(in srgb, var(--tape-soft) 50%, var(--surface))}
.drop .btnlike{border-radius:9px; padding:12px 22px; border:0; box-shadow:0 8px 18px -10px rgba(67,56,202,.7)}
.btn{border-radius:9px}
.btn.primary{box-shadow:0 8px 18px -10px rgba(67,56,202,.7)}
.btn.primary:hover, .drop:hover .btnlike{filter:none; background:color-mix(in srgb, var(--tape) 88%, #000)}
.chip input:checked + span{border-color:var(--chip-on-bg); box-shadow:none}
.ba-bar i{background:linear-gradient(90deg, var(--teal), var(--tape-edge))}
.ba-row:first-child .ba-bar i{background:color-mix(in srgb, var(--muted) 70%, transparent)}
.ba-val b, .tablewrap td{font-family:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size:.95em; letter-spacing:-.01em}
/* header: plain bar, text links on the right, the current section in indigo */
.site-head{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.head-inner .topnav{justify-content:flex-end}
.topnav a{font-weight:600; padding:8px 12px; border:0; border-radius:8px}
.topnav a svg{display:none}
.topnav a:hover{background:none; color:var(--tape-edge)}
.topnav a[aria-current]{background:none; color:var(--tape-edge); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px}
@media (max-width:820px){ .head-inner .topnav{justify-content:space-between} .topnav a{padding:6px 4px} }

/* ---------- home page and simple tool pages (body[data-hero]): a two-column hero with the tool card beside the pitch ---------- */
body[data-hero] .wrap{max-width:1040px}
.hhero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,450px); gap:36px; align-items:center; margin-top:44px}
.heyebrow{margin:0 0 14px; font-size:14px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.heyebrow span{margin:0 4px; color:var(--tape-edge)}
body[data-hero] .hcopy h1{margin:0 0 20px; font-size:clamp(32px,4.2vw,45px); line-height:1.08; letter-spacing:-.04em}
body[data-hero] .hcopy .promise{font-size:19px; line-height:1.6; margin:0 0 28px}
.htrust{display:flex; flex-wrap:wrap; gap:16px 30px; list-style:none; margin:0; padding:0; font-size:15px; line-height:1.35}
.htrust li{display:flex; align-items:center; gap:10px; max-width:150px}
.htrust svg{flex:none; color:var(--teal)}
/* the card: drop zone on top, sizes below, everything else from the tool flows in underneath */
.hometool{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 26px 18px; box-shadow:var(--shadow)}
body[data-hero] .hometool .drop{background:none; border:0; box-shadow:none; outline:0; -webkit-backdrop-filter:none; backdrop-filter:none; padding:4px 8px 20px; margin:0; border-radius:12px}
body[data-hero] .hometool .drop:hover, body[data-hero] .hometool .drop:focus-within{background:none}
body[data-hero] .hometool .drop.over{background:var(--tape-soft); outline:2px dashed var(--tape-edge); outline-offset:4px}
body[data-hero] .hometool .hup{display:flex; justify-content:center; margin:0 0 6px; color:var(--tape-edge)}
body[data-hero] .hometool .drop strong{font-size:22px; color:var(--ink)}
body[data-hero] .hometool .drop .btnlike{display:block; width:min(100%,270px); margin:16px auto 10px; padding:12px 18px; border-radius:9px; border:0; font-size:16px; box-shadow:0 8px 18px -10px rgba(67,56,202,.7)}
body[data-hero] .hometool .drop:hover .btnlike{filter:none; background:color-mix(in srgb, var(--tape) 88%, #000)}
body[data-hero] .hometool .drop > span{font-size:14px}
body[data-hero] .hometool .hfmts{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px}
.hfmts i{font-style:normal; font-size:13px; font-weight:600; padding:4px 13px; border-radius:999px; background:var(--soft); color:var(--muted)}
body[data-hero] .hometool .opts{border-top:1px solid var(--line); padding-top:16px; margin:0}
body[data-hero] .hometool .opts legend{font-size:15px; margin-bottom:10px}
/* once a file is chosen the drop zone hides, so the divider above the sizes goes too */
body[data-hero] .hometool:has(#drop[hidden]) .opts{border-top:0; padding-top:0}
.hsizes{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.hsizes .chip span{display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 2px; border-radius:10px; font-size:15px; line-height:1.25; white-space:nowrap}
body[data-hero] .hsizes .chip span{background:var(--soft); border-color:transparent}
.hsizes .chip span small{font-size:12px}
body[data-hero] .hsizes .chip input:checked + span{background:var(--tape); border-color:var(--tape); box-shadow:none; color:#fff}
body[data-hero] .hsizes .chip input:checked + span small{color:rgba(255,255,255,.85)}
body[data-hero] .hometool .opts .check{font-size:14px; color:var(--muted)}
body[data-hero] .hometool .opts .check input{accent-color:var(--tape)}
body[data-hero] .calc-hint{display:none}
body[data-hero] .hometool .edit-social{display:none}
/* compact chips so the presets fit the card in two or three rows */
body[data-hero] .hometool .chips{gap:6px}
body[data-hero] .hometool .chip span{padding:7px 11px; font-size:14px; gap:6px}
body[data-hero] .hometool .chip span small{font-size:12.5px}
/* tool pages: the headline lines up with the top of the card (the home page stays centred) */
body[data-hero]:not([data-home]) .hhero{align-items:start}
body[data-hero]:not([data-home]) .hcopy{padding-top:28px}
@media (max-width:900px){ body[data-hero]:not([data-home]) .hcopy{padding-top:0} }
body[data-hero] main > .promo, body[data-hero] main > .adslot{max-width:760px; margin-left:auto; margin-right:auto}
body[data-hero] main > .promo{margin-top:36px}
/* trimming and rotating need room: once the video preview is up, the card takes the whole width */
.hhero:has(#editBox:not([hidden])){grid-template-columns:1fr}
.hhero:has(#editBox:not([hidden])) .hometool{max-width:760px; width:100%; justify-self:center}
.hnote{order:5; display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0 0; font-size:13px; color:var(--muted)}
.hnote svg{color:var(--teal); flex:none}
body[data-hero] .hometool .panel{background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; margin-top:18px}
body[data-hero] .hometool .panel.error{border:1px solid var(--over); padding:16px}
/* the privacy strip, shortcuts and steps */
.hsafe{display:flex; align-items:center; gap:14px; margin:36px 0 0; padding:12px 20px; border-radius:12px; background:var(--teal-soft); color:var(--teal); font-size:15px; font-weight:600}
.hsafe svg{flex:none}
.hsafe span{padding-left:14px; border-left:1px solid color-mix(in srgb, var(--teal) 30%, transparent)}
.hsafe a{margin-left:auto; font-weight:500; white-space:nowrap}
.hsec h2{text-align:center; font-size:clamp(22px,2.6vw,27px); letter-spacing:-.02em; line-height:1.2; margin:48px 0 20px}
.pcards, .qtools{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.pcards a, .pcards label, .qtools a{background:var(--surface); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s}
.pcards a:hover, .pcards label:hover, .qtools a:hover{border-color:var(--tape-edge); transform:translateY(-2px); box-shadow:0 12px 28px -20px rgba(20,32,90,.4)}
.pcards a, .pcards label{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; padding:18px 18px 16px}
.pico{grid-column:1 / -1; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:12px; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent)}
.pcards b{font-size:18px}
.pcards svg:not(.pico svg), .qtools a > svg:last-child{color:var(--muted)}
.psub{grid-column:1 / -1; font-size:14px; color:var(--muted)}
.qtools a{display:flex; align-items:center; gap:12px; padding:16px 18px; font-weight:600}
.qtools a > svg:first-child{flex:none; color:var(--tape-edge)}
.qtools a > svg:last-child{margin-left:auto; flex:none}
.hsteps{list-style:none; counter-reset:step; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 0; margin:0; padding:0}
.hsteps li{counter-increment:step; display:flex; align-items:center; gap:12px; font-weight:600; margin:0}
.hsteps li::before{content:counter(step); flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--teal-soft); color:var(--teal); font-weight:700}
.hsteps li:not(:last-child)::after{content:""; width:90px; height:1px; margin:0 26px; background:var(--line)}
.hbig{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px 40px; align-items:center; margin-top:48px; padding:30px 34px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}
.hbig h2{font-size:clamp(22px,2.6vw,27px); letter-spacing:-.02em; line-height:1.2; margin:6px 0 12px}
.hbig-copy p:not(.heyebrow){color:var(--muted); margin:0 0 20px}
.hbig-notes{background:var(--teal-soft); border-radius:12px; padding:18px 20px}
.hbig-h{font-weight:700; color:var(--teal); margin:0 0 8px}
.hbig-notes ul{margin:0; padding-left:18px; font-size:14.5px}
.hbig-notes li{margin:6px 0}
@media (max-width:820px){ .hbig{grid-template-columns:1fr; padding:22px 20px} }
body[data-hero] .content{max-width:760px; margin:64px auto 0}
@media (max-width:900px){
  .hhero{grid-template-columns:1fr; gap:28px; margin-top:28px}
  .hometool{max-width:560px; width:100%; justify-self:center}
  .pcards, .qtools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body[data-hero] .hcopy .promise{font-size:17px}
  .htrust{gap:12px 20px; font-size:14px}
  .hometool{padding:20px 16px 16px}
  .hsizes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsafe{flex-wrap:wrap; gap:8px 12px; padding:12px 16px}
  .hsafe a{margin-left:0}
  .pcards, .qtools{gap:10px}
  .pcards a, .pcards label{padding:14px}
  .qtools a{padding:14px; gap:10px; font-size:15px}
  .hsteps{flex-direction:column; align-items:flex-start; width:max-content; margin:0 auto; gap:12px}
  .hsteps li::after{display:none}
}