:root{
  --brand:      oklch(66% 0.172 254);
  --brand-hi:   oklch(58.5% 0.178 254);
  --brand-deep: oklch(38% 0.13 258);
  --brand-wash: oklch(96.8% 0.024 254);
  --brand-line: oklch(88% 0.055 254);

  --ink:     oklch(25% 0.028 258);
  --text:    oklch(31% 0.024 258);
  --mute:    oklch(53% 0.018 258);
  --paper:   oklch(99.2% 0.004 258);
  --surface: oklch(97.4% 0.008 258);
  --line:    oklch(91.5% 0.011 258);
  --good:    oklch(55% 0.13 152);
  --bad:     oklch(53% 0.18 26);

  --r: 14px;
  --out: cubic-bezier(0.22,1,0.36,1);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,h4{ margin:0; color:var(--ink); text-wrap:balance; letter-spacing:-0.022em; line-height:1.14; font-weight:700 }
p{ margin:0; text-wrap:pretty }
button{ font:inherit; cursor:pointer; color:inherit }
a{ color:var(--brand-hi); text-underline-offset:3px }
img{ max-width:100%; height:auto }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px }
.wrap{ width:100%; max-width:860px; margin:0 auto; padding:0 20px }
main{ flex:1 0 auto }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:20px; top:12px; background:#fff; padding:10px 14px; border-radius:8px; z-index:99 }
.inline-code{ font-family:var(--mono); font-size:0.85rem; color:var(--ink); background:var(--surface); padding:1px 5px; border-radius:4px }

/* ── header ──────────────────────────────────────────────── */
header{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20 }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:none }
.brand img{ height:32px; width:auto; display:block }
.fallback{ display:flex; align-items:center; gap:8px; font-size:1.2rem; font-weight:700; letter-spacing:-0.03em }
.fallback span{ color:var(--brand) }
header nav{ display:flex; gap:22px; font-size:0.94rem; flex-wrap:wrap; justify-content:flex-end }
header nav a{ color:var(--mute); text-decoration:none; transition:color .16s var(--out) }
header nav a:hover{ color:var(--ink) }
header nav a[aria-current="page"]{ color:var(--brand-hi); font-weight:600 }

/* ── hero + downloader tool ──────────────────────────────── */
.hero{ padding:52px 0 8px; text-align:center }
h1{ font-size:clamp(1.95rem,5.2vw,2.8rem) }
.sub{ margin:16px auto 0; max-width:60ch; color:var(--mute); font-size:1.05rem }

.tool{ margin-top:30px; background:var(--brand-wash); border:1px solid var(--brand-line); border-radius:20px; padding:24px }
.row{ display:flex; gap:10px }
.inbox{
  flex:1; display:flex; align-items:center; gap:10px; background:#fff;
  border:2px solid var(--brand-line); border-radius:var(--r); padding:0 14px;
  transition:border-color .18s var(--out), box-shadow .18s var(--out);
}
.inbox:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px oklch(66% 0.172 254 / .16) }
.inbox svg{ flex:none; color:var(--brand) }
#url{ flex:1; border:0; outline:none; background:transparent; color:var(--ink); font-size:1rem; padding:17px 0; min-width:0; font-family:var(--mono) }
#url::placeholder{ color:oklch(66% 0.012 258); font-family:"Instrument Sans",sans-serif }
.go{
  background:var(--brand); color:#fff; border:0; border-radius:var(--r); font-weight:600; font-size:1rem;
  padding:0 26px; min-height:58px; white-space:nowrap; display:inline-flex; align-items:center; gap:9px;
  transition:background-color .15s var(--out), transform .1s var(--out);
}
.go:hover{ background:var(--brand-hi) }
.go:active{ transform:translateY(1px) }
.go[disabled]{ background:oklch(78% 0.05 254); cursor:progress }
.spin{ width:15px; height:15px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation:sp .7s linear infinite; display:none }
.go[data-busy="1"] .spin{ display:block }
@keyframes sp{ to{ transform:rotate(360deg) } }
.hint{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:center; margin-top:14px; font-size:0.88rem; color:var(--mute) }
.hint button{ background:none; border:0; color:var(--brand-hi); text-decoration:underline; text-underline-offset:3px; padding:0; font-size:inherit }
.trust{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; margin-top:22px; font-size:0.9rem; color:var(--mute) }
.trust span{ display:inline-flex; align-items:center; gap:7px }
.trust svg{ color:var(--good) }

#out{ margin-top:20px }
.card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; text-align:left;
  box-shadow:0 1px 2px oklch(25% 0.028 258/.05), 0 8px 24px oklch(25% 0.028 258/.05);
  animation:up .4s var(--out) both;
}
@keyframes up{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.top{ display:flex; gap:18px; align-items:flex-start }
.thumb{ flex:none; width:172px; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:var(--surface); position:relative }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb .dur{ position:absolute; right:6px; bottom:6px; background:oklch(20% 0.02 258/.82); color:#fff; font-family:var(--mono); font-size:0.68rem; padding:2px 6px; border-radius:5px }
.info{ min-width:0; flex:1 }
.info h3{ font-size:1.14rem }
.facts{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:0.84rem; color:var(--mute); font-variant-numeric:tabular-nums }
.files{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:10px }
.file{ display:flex; align-items:center; gap:14px; justify-content:space-between; position:relative }
.file .q{ font-weight:600; color:var(--ink); font-size:0.98rem }
.file .q i{ display:block; font-style:normal; font-weight:400; font-size:0.82rem; color:var(--mute); margin-top:1px; font-variant-numeric:tabular-nums }
.dl{ background:var(--brand); color:#fff; border:0; border-radius:10px; font-weight:600; font-size:0.92rem; padding:11px 20px; min-height:44px; transition:background-color .15s var(--out) }
.dl:hover{ background:var(--brand-hi) }
.dl[disabled]{ background:oklch(80% 0.045 254); cursor:progress }
.track{ position:absolute; left:0; right:0; bottom:-8px; height:3px; border-radius:3px; background:var(--line); overflow:hidden; opacity:0; transition:opacity .2s var(--out) }
.track.on{ opacity:1 }
.track i{ display:block; height:100%; width:100%; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .18s linear }
.msg{ margin-top:12px; font-size:0.86rem; color:var(--mute) }
.msg.ok{ color:var(--good) }
.msg.err{ color:var(--bad) }
.skel{ background:linear-gradient(90deg,var(--surface),oklch(94% 0.01 258),var(--surface)); background-size:200% 100%; animation:sw 1.1s linear infinite; border-radius:8px }
@keyframes sw{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
.skel.l1{ height:16px; width:66% }
.skel.l2{ height:13px; width:38%; margin-top:10px }
.alert{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  background:oklch(97.5% 0.02 26); border:1px solid oklch(88% 0.06 26);
  border-radius:14px; padding:16px 18px; animation:up .35s var(--out) both;
}
.alert svg{ flex:none; color:var(--bad); margin-top:2px }
.alert b{ display:block; color:oklch(38% 0.14 26) }
.alert p{ margin-top:3px; font-size:0.92rem; color:var(--mute) }
.alert code{ font-family:var(--mono); font-size:0.85rem; color:var(--ink); background:#fff; padding:1px 5px; border-radius:4px }

/* ── content sections ────────────────────────────────────── */
section.pad{ padding:62px 0 }
section.pad > h2{ font-size:clamp(1.45rem,3.5vw,1.9rem) }
section.pad > p.lead{ margin-top:14px; max-width:72ch; color:var(--mute) }
section.pad > p.lead + p.lead{ margin-top:12px }

ol.steps{ margin:26px 0 0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:4px }
ol.steps li{ counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line) }
ol.steps li::before{ content:counter(s); font-weight:700; color:var(--brand); font-size:1.05rem; background:var(--brand-wash); width:34px; height:34px; border-radius:50%; display:grid; place-items:center }
ol.steps h3{ font-size:1.05rem }
ol.steps p{ margin-top:4px; color:var(--mute); font-size:0.96rem }

h3.q{ margin-top:30px; font-size:1.12rem }
h3.q + p{ margin-top:9px; color:var(--mute); max-width:72ch }
h3.q + p + p{ margin-top:10px; color:var(--mute); max-width:72ch }

dl.why{ margin:26px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:26px 34px }
dl.why dt{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px }
dl.why dt svg{ color:var(--brand); flex:none }
dl.why dd{ margin:5px 0 0; color:var(--mute); font-size:0.95rem }

table.cmp{ width:100%; border-collapse:collapse; margin-top:24px; font-size:0.94rem }
table.cmp caption{ text-align:left; color:var(--mute); font-size:0.88rem; padding-bottom:10px }
table.cmp th, table.cmp td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line) }
table.cmp thead th{ font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--mute); font-weight:600 }
table.cmp tbody th{ font-weight:600; color:var(--ink) }
table.cmp td:last-child{ color:var(--mute) }
table.cmp .yes{ color:var(--good); font-weight:600 }

ul.plain{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
ul.plain li{ display:flex; gap:11px; align-items:flex-start; color:var(--mute); font-size:0.96rem }
ul.plain li::before{ content:""; flex:none; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--brand) }
ul.plain strong{ color:var(--ink); font-weight:600 }

.faq{ margin-top:24px; border-top:1px solid var(--line) }
details{ border-bottom:1px solid var(--line) }
summary{ list-style:none; cursor:pointer; padding:18px 0; display:flex; gap:14px; align-items:center; font-weight:600; color:var(--ink); font-size:1.02rem }
summary::-webkit-details-marker{ display:none }
summary::after{ content:""; margin-left:auto; flex:none; width:9px; height:9px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); transition:transform .25s var(--out) }
details[open] summary::after{ transform:rotate(225deg) }
details .a{ padding:0 0 20px; max-width:72ch; color:var(--mute); font-size:0.97rem; display:flex; flex-direction:column; gap:10px }

/* ── inner page header band ──────────────────────────────── */
.pagehead{ background:var(--brand-wash); border-bottom:1px solid var(--brand-line); padding:44px 0 40px }
.pagehead .crumbs{ font-size:0.84rem; color:var(--mute); display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.pagehead .crumbs a{ color:var(--mute); text-decoration:none }
.pagehead .crumbs a:hover{ color:var(--brand-hi); text-decoration:underline }
.pagehead .crumbs span{ color:var(--brand-line) }
.pagehead h1{ margin-top:14px; font-size:clamp(1.8rem,4.6vw,2.5rem) }
.pagehead p{ margin-top:14px; max-width:66ch; color:var(--mute) }
.stamp{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--brand-line); border-radius:999px; padding:6px 14px; font-size:0.8rem; color:var(--mute) }
.stamp b{ color:var(--ink); font-weight:600 }

/* ── legal / prose ───────────────────────────────────────── */
.prose{ padding:48px 0 64px; max-width:74ch }
.prose h2{ font-size:1.3rem; margin-top:44px; scroll-margin-top:88px }
.prose h2:first-child{ margin-top:0 }
.prose h3{ font-size:1.05rem; margin-top:28px }
.prose p{ margin-top:13px; color:var(--mute) }
.prose ul, .prose ol{ margin:14px 0 0; padding-left:22px; color:var(--mute) }
.prose li{ margin-top:8px }
.prose li::marker{ color:var(--brand) }
.prose strong{ color:var(--ink); font-weight:600 }
.prose a{ color:var(--brand-hi) }
.prose hr{ border:0; border-top:1px solid var(--line); margin:44px 0 0 }
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin-bottom:8px }
.toc p{ margin:0 0 10px; font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--mute); font-weight:600 }
.toc ol{ margin:0; padding-left:20px; color:var(--mute); font-size:0.94rem; columns:2; column-gap:32px }
.toc li{ margin-top:6px; break-inside:avoid }
.toc a{ color:var(--text); text-decoration:none }
.toc a:hover{ color:var(--brand-hi); text-decoration:underline }
.callout{ margin-top:24px; background:var(--brand-wash); border:1px solid var(--brand-line); border-radius:14px; padding:18px 20px }
.callout p{ margin:0; color:var(--text); font-size:0.95rem }
.callout p + p{ margin-top:10px }
.callout strong{ color:var(--ink) }

/* ── contact ─────────────────────────────────────────────── */
.contact{ padding:48px 0 64px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px; align-items:start }
.cform{ display:flex; flex-direction:column; gap:18px }
.f{ display:flex; flex-direction:column; gap:7px }
.f label{ font-size:0.9rem; font-weight:600; color:var(--ink) }
.f label .opt{ font-weight:400; color:var(--mute) }
.f input, .f select, .f textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:2px solid var(--line); border-radius:12px; padding:13px 14px; width:100%;
  transition:border-color .18s var(--out), box-shadow .18s var(--out);
}
.f textarea{ min-height:150px; resize:vertical; line-height:1.55 }
.f input:focus, .f select:focus, .f textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px oklch(66% 0.172 254 / .15) }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"]{ border-color:var(--bad) }
.f .err{ font-size:0.84rem; color:var(--bad); min-height:0 }
.f .err:empty{ display:none }
.f .help{ font-size:0.84rem; color:var(--mute) }
.send{ background:var(--brand); color:#fff; border:0; border-radius:12px; font-weight:600; font-size:1rem; padding:15px 28px; min-height:52px; align-self:flex-start; transition:background-color .15s var(--out), transform .1s var(--out) }
.send:hover{ background:var(--brand-hi) }
.send:active{ transform:translateY(1px) }
.sent{ background:oklch(97% 0.03 152); border:1px solid oklch(86% 0.07 152); border-radius:14px; padding:18px 20px; animation:up .35s var(--out) both }
.sent b{ color:oklch(38% 0.12 152); display:block }
.sent p{ margin-top:5px; font-size:0.93rem; color:var(--mute) }
.sent button{ margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 14px; font-size:0.88rem; color:var(--text) }
.sent button:hover{ border-color:var(--brand); color:var(--brand-hi) }
.aside{ display:flex; flex-direction:column; gap:26px }
.aside h2{ font-size:1.1rem }
.aside p{ margin-top:8px; color:var(--mute); font-size:0.94rem }
.mailrow{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.mailrow a{ font-weight:600; word-break:break-all }
.mailrow button{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:0.84rem; color:var(--mute) }
.mailrow button:hover{ border-color:var(--brand); color:var(--brand-hi) }

/* ── footer ──────────────────────────────────────────────── */
footer{ flex:none; border-top:1px solid var(--line); background:var(--surface); margin-top:20px }
.fgrid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:36px 32px; padding-top:46px; padding-bottom:38px }
.fcol .fh{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); font-weight:600; margin-bottom:14px }
.fcol ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.fcol a{ color:var(--mute); text-decoration:none; font-size:0.92rem; transition:color .15s var(--out) }
.fcol a:hover{ color:var(--brand-hi); text-decoration:underline }
.brandcol .brand{ margin-bottom:14px }
.brandcol p{ color:var(--mute); font-size:0.92rem; max-width:44ch }
.brandcol p + p{ margin-top:10px }
.brandcol .tiny{ font-size:0.84rem }
.fmail{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:0.9rem; color:var(--brand-hi); text-decoration:none; font-weight:600; word-break:break-all }
.fmail:hover{ text-decoration:underline }
.fbot{ border-top:1px solid var(--line); padding-top:22px; padding-bottom:26px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:0.85rem; color:var(--mute) }
.fbot nav{ display:flex; gap:18px; flex-wrap:wrap }
.fbot a{ color:var(--mute); text-decoration:none }
.fbot a:hover{ color:var(--brand-hi); text-decoration:underline }

.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; font-size:0.88rem; z-index:60; transition:transform .3s var(--out) }
.toast.on{ transform:translate(-50%,0) }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:820px){
  .contact{ grid-template-columns:1fr; gap:36px }
  .fgrid{ grid-template-columns:1fr 1fr; gap:32px 24px }
  .brandcol{ grid-column:1 / -1 }
}
@media (max-width:640px){
  body{ font-size:16px }
  .bar{ height:auto; padding:14px 0; flex-direction:column; align-items:flex-start; gap:10px }
  header nav{ gap:14px; font-size:0.88rem; justify-content:flex-start }
  .hero{ padding:38px 0 4px }
  .tool{ padding:16px; border-radius:16px }
  .row{ flex-direction:column }
  .go{ width:100%; justify-content:center }
  .top{ flex-direction:column }
  .thumb{ width:100% }
  .file{ flex-wrap:wrap }
  .dl{ flex:1 }
  section.pad{ padding:44px 0 }
  .pagehead{ padding:32px 0 30px }
  .prose{ padding:36px 0 48px }
  .toc ol{ columns:1 }
  table.cmp{ font-size:0.88rem }
  table.cmp th, table.cmp td{ padding:10px }
  .fgrid{ grid-template-columns:1fr; gap:28px; padding-top:36px }
  .send{ width:100% }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}