/* FileFitly — "measure & fit": ink-navy bands, signal-yellow limit line, one colour per tool family.
   Tool pages: colour band header → 1·2·3 stepper → tool card → guide with contents. Home: dark hero with live "fit" demo → task shortcuts → tool grid. */
/* Self-hosted fonts (SIL Open Font License, see assets/fonts) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/bricolage.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;src:url(fonts/jetbrains-mono.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/caveat-600.woff2) format('woff2')}
:root{
  --bg:#F2F4F9; --surface:#FFFFFF; --ink:#11172E; --muted:#596379; --line:#DDE2EC; --soft:#EAF0FF;
  --accent:#2D5BFF; --accent-ink:#FFFFFF; --limit:#FFC21A; --ok:#127A4D; --ok-soft:#E3F6EC; --bad:#D23A2C;
  --band:#0F1530; --band-ink:#F2F4FA; --band-muted:#A9B2CC; --band-line:#2A3358;
  --pdf:#E8553F; --pdf-soft:#FDECE8; --img:#0F9E87; --img-soft:#E2F5F1; --more:#7356F2; --more-soft:#EEEAFE; --vid:#D6336C; --vid-soft:#FCE8EF; --txt:#0369A1; --txt-soft:#E0F2FE;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0F1F; --surface:#141A2F; --ink:#E9ECF5; --muted:#9CA5BD; --line:#283050; --soft:#1B2547;
  --accent:#7392FF; --accent-ink:#0B0F1F; --limit:#FFC93D; --ok:#43C78D; --ok-soft:#12301F; --bad:#FF7A6B;
  --band:#141B3A; --band-ink:#F2F4FA; --band-muted:#A9B2CC; --band-line:#2E3866;
  --pdf:#FF7A63; --pdf-soft:#3A1E1A; --img:#3CC9AF; --img-soft:#11302A; --more:#9D86FF; --more-soft:#25204A; --vid:#FF6B9A; --vid-soft:#3A1726; --txt:#38BDF8; --txt-soft:#0C2A3D; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0F1F; --surface:#141A2F; --ink:#E9ECF5; --muted:#9CA5BD; --line:#283050; --soft:#1B2547;
  --accent:#7392FF; --accent-ink:#0B0F1F; --limit:#FFC93D; --ok:#43C78D; --ok-soft:#12301F; --bad:#FF7A6B;
  --band:#141B3A; --band-ink:#F2F4FA; --band-muted:#A9B2CC; --band-line:#2E3866;
  --pdf:#FF7A63; --pdf-soft:#3A1E1A; --img:#3CC9AF; --img-soft:#11302A; --more:#9D86FF; --more-soft:#25204A; --vid:#FF6B9A; --vid-soft:#3A1726; --txt:#38BDF8; --txt-soft:#0C2A3D; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;padding:0 16px}
img,canvas{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
[hidden]{display:none!important}
code{font-family:var(--mono);font-size:.88em;background:var(--soft);padding:1px 6px;border-radius:5px}
.wrap{max-width:860px;margin:0 auto;padding-block:20px 64px;display:flex;flex-direction:column;gap:30px}
.wrap.wide{max-width:1120px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:5}
.skip:focus{left:16px}

/* full-bleed band */
.bleed{margin-inline:-16px;padding-inline:16px}
.band{background:var(--band);color:var(--band-ink)}
.band .lede,.band .muted{color:var(--band-muted)}

/* header / footer */
.site-head{background:var(--band);color:var(--band-ink)}
.site-head .in{max-width:1120px;margin:0 auto;padding-block:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.logo{width:24px;height:24px;flex:none}
.site-nav{display:flex;gap:6px;flex-wrap:wrap;font-weight:500;font-size:.95rem}
.site-nav a{color:var(--band-muted);text-decoration:none;padding:6px 10px;border-radius:8px}
.site-nav a{transition:background .15s,color .15s}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--band-ink);background:rgba(255,255,255,.08)}
.site-foot{background:var(--band);color:var(--band-muted)}
.site-foot .in{max-width:1120px;margin:0 auto;padding-block:36px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;font-size:.92rem}
.site-foot .fh{font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--band-ink);margin:0 0 10px}
.site-foot .fh a{color:var(--band-ink)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-foot li a{display:inline-block;padding:4px 0}
.site-foot a{color:var(--band-muted);text-decoration:none}.site-foot a:hover{color:var(--band-ink)}
.site-foot .fine{grid-column:1/-1;border-top:1px solid var(--band-line);padding-top:16px;margin:0}
.site-foot .tag{color:var(--limit)}

/* type */
h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.4vw,3rem);line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
.lede{color:var(--muted);margin:12px 0 0;max-width:60ch;font-size:1.08rem}
.crumbs{font-size:.84rem;display:flex;gap:6px;flex-wrap:wrap;color:var(--band-muted)}
.crumbs a{color:var(--band-muted)}.crumbs a:hover{color:var(--band-ink)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.badge{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.band .badge{border-color:var(--band-line);color:var(--band-ink)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--limit)}

/* tool page header */
.tool-hero .in{max-width:860px;margin:0 auto;padding-block:26px 30px;display:flex;gap:18px;align-items:flex-start}
.tool-hero .ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;margin-top:30px}
.tool-hero .ico svg{width:30px;height:30px}
.fam-pdf{--fam-fill:#C9412C;--fam:var(--pdf);--fam-soft:var(--pdf-soft)}
.fam-image{--fam-fill:#0C8370;--fam:var(--img);--fam-soft:var(--img-soft)}
.fam-text{--fam-fill:#0369A1;--fam:var(--txt);--fam-soft:var(--txt-soft)}
.fam-other{--fam-fill:#7356F2;--fam:var(--more);--fam-soft:var(--more-soft)}
.fam-video{--fam-fill:#D6336C;--fam:var(--vid);--fam-soft:var(--vid-soft)}
.tool-hero .ico{background:var(--fam-fill,var(--fam));color:#fff}
.tool-hero h1{margin-top:8px}

/* stepper */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:.92rem;min-width:0;transition:all .25s}
.steps li::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font:600 .8rem var(--mono);border:1.5px solid var(--line);background:var(--bg)}
.steps li.on{color:var(--ink);border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.steps li.on::before{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps li.done{color:var(--ink)}
.steps li.done::before{content:"✓";background:var(--ok);border-color:var(--ok);color:#fff}
@media (max-width:560px){.steps li{font-size:.8rem;padding:8px;gap:6px}.steps li::before{width:22px;height:22px}}

/* tool card */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:20px;box-shadow:0 12px 40px -24px rgba(17,23,46,.35);margin-top:-6px}
.drop{position:relative;border:2px dashed var(--line);border:2px dashed color-mix(in srgb,var(--fam,var(--accent)) 45%,var(--line));border-radius:16px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;background:var(--fam-soft,var(--soft))}
.drop.over{border-color:var(--fam,var(--accent));transform:scale(1.01)}
.drop:hover{border-color:var(--fam,var(--accent))}
.drop:hover .linkbtn{filter:brightness(1.08)}
.drop:active{transform:scale(.995)}
.drop:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.drop input[type=file]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.drop .fileicon{width:56px;height:56px;border-radius:14px;background:var(--fam-fill,#2D5BFF);color:#fff;display:grid;place-items:center;font:600 .75rem var(--mono);letter-spacing:.04em}
.drop.has .fileicon{background:#127A4D}
.drop .fileinfo{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.fname{font-weight:700;font-size:1.08rem;overflow-wrap:anywhere}
.fmeta{color:var(--muted);font-size:.9rem}
.drop .linkbtn{background:var(--fam-fill,#2D5BFF);color:#fff;text-decoration:none;padding:10px 20px;border-radius:999px;font-weight:600}
.linkbtn{font:inherit;font-weight:600;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sample{font-size:.88rem;color:var(--muted);text-align:center;margin-top:-10px}
.label{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px;display:block}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:.86rem;color:var(--muted);font-weight:500}
input[type=text],input[type=number],input[type=url],input[type=tel],select,textarea{font:500 .97rem var(--body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;min-width:0;max-width:100%}
input[type=number]{font-family:var(--mono);width:112px}
textarea{width:100%;min-height:190px;line-height:1.55;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
input[type=color]{width:48px;height:42px;border:1.5px solid var(--line);border-radius:11px;background:var(--bg);padding:3px}
input[type=range]{accent-color:var(--accent);width:190px;max-width:100%}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 .95rem var(--mono);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 14px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]:hover{border-color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip.word{font-family:var(--body)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);box-shadow:inset 0 -3px 0 var(--limit)}
.custom{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;background:var(--surface)}
.custom input{width:76px;border:0;background:transparent;color:var(--ink);font:600 .95rem var(--mono);padding:10px 0;box-shadow:none!important}
.custom:focus-within{border-color:var(--accent)}
.custom span{font:500 .82rem var(--mono);color:var(--muted)}
.opts{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.93rem}
.opts label{display:flex;gap:9px;align-items:center;cursor:pointer}
.opts input{accent-color:var(--accent);width:18px;height:18px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{font:700 1.02rem var(--body);border-radius:12px;padding:13px 24px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px -10px var(--accent);filter:brightness(1.06)}}
.btn:active:not(:disabled){transform:scale(.98)}
.btn.ghost:hover:not(:disabled){background:var(--soft)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.small{padding:7px 13px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
#go:not(:disabled){animation:nudge .5s ease 1}
@keyframes nudge{50%{transform:scale(1.04)}}
.chip:focus-visible,.btn:focus-visible,.linkbtn:focus-visible,a:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.status{font-size:.92rem;color:var(--muted);min-height:1.4em}
.status.err{color:var(--bad);font-weight:500}
.progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--limit));transition:width .2s}
.privacy{font-size:.86rem;color:var(--muted);display:flex;gap:8px;align-items:center;margin:0;justify-content:center}
.privacy::before{content:"";width:16px;height:16px;flex:none;background:var(--ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* gauge */
.gauge{display:flex;flex-direction:column;gap:12px;background:var(--bg);border-radius:14px;padding:14px}
.track{position:relative;height:38px;border-radius:9px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.bar{position:absolute;left:0;top:0;bottom:0;border-radius:8px 0 0 8px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.orig{background:repeating-linear-gradient(135deg,var(--line) 0 6px,transparent 6px 12px)}
.bar.new{background:var(--ok);top:10px;bottom:10px;border-radius:0 5px 5px 0}
.bar.new.over{background:var(--bad)}
.limitline{position:absolute;top:-4px;bottom:-4px;width:4px;background:var(--limit);transition:left .6s cubic-bezier(.2,.8,.2,1)}
.limitline span{position:absolute;top:3px;left:8px;font:600 .75rem var(--mono);color:#11172E;white-space:nowrap;background:var(--limit);padding:2px 6px;border-radius:5px}
.limitline.flip span{left:auto;right:8px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{border-top:3px solid var(--line);padding-top:6px;min-width:0}
.stat b{display:block;font:600 1.15rem var(--mono);font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:.8rem}
.stat.res{border-color:var(--ok)}.stat.lim{border-color:var(--limit)}

/* results */
.result{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;border-radius:16px;padding:18px;background:var(--ok-soft);border:1.5px solid var(--ok);border:1.5px solid color-mix(in srgb,var(--ok) 40%,transparent);animation:pop .35s ease}
@keyframes pop{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
.result .thumb{width:140px;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff;flex:none;box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.result .txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:10px}
.result .btn{background:var(--ok);border-color:var(--ok);color:#fff;font-size:1.08rem;padding:14px 26px}
.result .btn.ghost{background:transparent;color:var(--ok)}
.verdict{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:0;letter-spacing:-.01em}
.verdict.good{color:var(--ok)}.verdict.bad{color:var(--bad)}
.note{color:var(--muted);font-size:.88rem;margin:0}

/* lists */
.filelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.filelist:empty{display:none}
.filelist li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--bg)}
.filelist .n{font:600 .8rem var(--mono);color:var(--muted);width:1.6em;text-align:right;flex:none}
.filelist .nm{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.93rem}
.filelist .sz{font:500 .8rem var(--mono);color:var(--muted);flex:none}
.filelist img{width:42px;height:42px;object-fit:cover;border-radius:8px;flex:none;background:#fff}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:600 .95rem var(--body);display:grid;place-items:center;flex:none}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--soft)}
.iconbtn:active{transform:scale(.94)}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}
.pages:empty{display:none}
.pg{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.pg.off{opacity:.35}
.pg .pv{width:100%;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:7px}
.pg canvas,.pg img{max-width:100%;max-height:100%;transition:transform .2s}
.pg .ctrl{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.pg .num{font:500 .78rem var(--mono);color:var(--muted)}
.stage{position:relative;max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg);display:flex;justify-content:center;padding:8px}
.stage canvas{display:block;touch-action:none}
.out-img{max-width:100%;max-height:420px;border:1px solid var(--line);border-radius:10px;background:#fff}
.qrbox{display:flex;justify-content:center;padding:18px;background:var(--bg);border-radius:14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}

/* home */
.hero .in{max-width:1120px;margin:0 auto;padding-block:46px 54px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:860px){.hero .in{grid-template-columns:1fr;gap:28px;padding-block:32px 40px}}
.hero h1{font-size:clamp(2.3rem,6.4vw,4rem)}
.hero h1 .hl{color:var(--limit)}
.finder{margin-top:24px;max-width:460px;position:relative}
.finder input{width:100%;font-size:1.02rem;padding:14px 16px;background:rgba(255,255,255,.07);border-color:var(--band-line);color:var(--band-ink)}
.finder input::placeholder{color:var(--band-muted)}
.finder .label{color:var(--band-muted)}
.demo{background:rgba(255,255,255,.04);border:1px solid var(--band-line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:16px}
.demo .doc{display:flex;align-items:center;gap:14px}
.demo .sheet{width:46px;height:58px;border-radius:7px;background:#fff;position:relative;flex:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.demo .sheet::before{content:"";position:absolute;inset:12px 9px auto;height:3px;border-radius:2px;background:#cfd5e4;box-shadow:0 8px 0 #cfd5e4,0 16px 0 #cfd5e4,0 24px 0 #e3e7f0}
.demo .nm{font-weight:600}
.demo .sz{font:600 1.5rem var(--mono);font-variant-numeric:tabular-nums}
.demo .track{background:rgba(255,255,255,.06);border-color:var(--band-line)}
.demo .bar.new{background:var(--ok);transition:none}
.demo .bar.new.over{background:var(--bad)}
.demo .cap{font-size:.86rem;color:var(--band-muted);margin:0}
.demo .ok{color:#43C78D;font-weight:700}
.tasks{display:flex;flex-wrap:wrap;gap:8px}
.tasks a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;transition:all .15s}
.tasks a:hover{border-color:var(--accent);color:var(--accent)}
@media (hover:hover){.tasks a:hover{transform:translateY(-1px)}}
.tasks a:active{transform:scale(.98)}
.tasks a i{font-style:normal;font:600 .78rem var(--mono);color:var(--accent)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h2,.cat h2{font-family:var(--display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;margin:0}
.cat{display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.cat .dot{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--fam);margin-right:10px;vertical-align:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:flex;gap:14px;align-items:flex-start;transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--fam)}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px var(--fam)}.card:hover b{color:var(--fam)}}
.card:active{transform:scale(.99)}
.card .ci{width:44px;height:44px;border-radius:12px;background:var(--fam-soft);color:var(--fam);display:grid;place-items:center;flex:none}
.card .ci svg{width:22px;height:22px}
.card .ct{display:flex;flex-direction:column;gap:3px;min-width:0}
.card b{font-size:1.02rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card span{color:var(--muted);font-size:.9rem;line-height:1.45}
.card .tag{font:600 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#11172E;background:var(--limit);border-radius:5px;padding:2px 6px}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.how div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.how b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--surface);font:600 .9rem var(--mono);margin-bottom:10px}
.how h3{margin:0 0 4px;font-size:1.05rem}
.how p{margin:0;color:var(--muted);font-size:.94rem}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.why div{border-top:3px solid var(--limit);padding-top:12px}
.why h3{margin:0 0 4px;font-size:1.05rem}
.why p{margin:0;color:var(--muted);font-size:.95rem}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.post:hover{border-color:var(--accent)}.post:hover b{color:var(--accent)}
@media (hover:hover){.post:hover{transform:translateY(-2px)}}
.post b{font-family:var(--display);font-size:1.12rem;line-height:1.25;letter-spacing:-.01em}
.post span{color:var(--muted);font-size:.9rem}
.post small{font:500 .75rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* article */
.article{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.article h2{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:22px 0 0;text-wrap:balance;scroll-margin-top:16px}
.article h3{font-size:1.08rem;margin:10px 0 -4px}
.article p,.article li{margin:0}
.article a:hover{text-decoration-thickness:2px}
.article ol,.article ul{padding-left:1.3em;margin:0;display:flex;flex-direction:column;gap:7px}
.article blockquote{margin:0;border-left:4px solid var(--limit);padding:4px 0 4px 14px;color:var(--muted)}
.quick{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--limit);border-radius:12px;padding:14px 16px}
.quick strong{display:block;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.toc strong{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin-top:6px;gap:4px}
.toc a{text-decoration:none;color:var(--ink)}.toc a:hover{color:var(--accent);text-decoration:underline}
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--band);color:var(--band-ink);border-radius:16px;padding:18px 20px}
.cta p{margin:0;font-weight:600;font-size:1.05rem}
.cta .btn{background:var(--limit);border-color:var(--limit);color:#11172E}
.tip{background:var(--soft);border-radius:12px;padding:12px 14px}
.tablewrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.93rem}
table.data th{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
table.data th,table.data td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.data td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 16px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.faq summary::after{content:"+";font:600 1.1rem var(--mono);color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:8px 0 2px}
.related{display:flex;flex-wrap:wrap;gap:8px}
.related a{border:1px solid var(--line);border-radius:999px;padding:7px 13px;text-decoration:none;color:var(--ink);font-size:.92rem;background:var(--surface);font-weight:500}
.related a:hover{border-color:var(--accent);color:var(--accent)}
.meta{font:500 .8rem var(--mono);color:var(--band-muted);margin-top:12px}

@media (max-width:480px){.stats{grid-template-columns:1fr 1fr}.tool{padding:16px;border-radius:16px}.tool-hero .ico{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

#pad{width:100%;height:auto;max-width:560px;background:#fff;border-radius:8px;cursor:crosshair}
.cat-intro{max-width:70ch;color:var(--muted)}
/* Comfortable tap targets on touch screens */
.sample .linkbtn{display:inline-block;padding:10px 4px}
input[type=date]{min-height:44px}
@media (pointer:coarse){
  input[type=text],input[type=number],input[type=tel],input[type=url],input[type=date],input[type=email],input[type=search],select{min-height:44px;font-size:16px}
  textarea{font-size:16px}
  .chip{min-height:44px}
  .btn.small{min-height:44px}
  details.more>summary{min-height:44px}
  .iconbtn{width:40px;height:40px}
  .opts input{width:22px;height:22px}
}
/* Optional extras live behind "More options" so the main flow stays simple */
details.more{border:1px dashed var(--line);border-radius:12px;padding:10px 14px;background:var(--bg)}
details.more>summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"+";font:600 1rem var(--mono);width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--soft)}
details.more[open]>summary::before{content:"–"}
details.more>summary small{color:var(--muted);font-weight:500;flex-basis:100%;padding-left:30px}
@media (min-width:640px){details.more>summary small{flex-basis:auto;padding-left:0}}
p.verdict:empty,p.status:empty,p.note:empty{display:none}
details.more .inner{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.hint{font-size:.82rem;color:var(--muted);margin:-4px 0 0}
.extras{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:12px;padding:14px 16px}
.extras strong{display:block;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.extras ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
.field input[type=file]{min-height:44px;padding:8px 0;font:inherit;max-width:100%}
.inapp{margin:0;background:#fff7d6;color:#5c4400;border:1px solid #f2d27a;border-radius:10px;padding:10px 12px;font-size:.9rem}
@media (max-width:340px){.steps li{flex-direction:column;text-align:center;gap:4px;padding:8px 4px;font-size:.75rem;overflow-wrap:anywhere;hyphens:auto}}
.howmade{margin:28px 0 8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.92rem;color:var(--muted)}
.howmade strong{display:block;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px;color:var(--muted)}
.howmade p{margin:0}
.meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.stats.wc{grid-template-columns:repeat(3,minmax(0,1fr))}
.pwout{display:flex;gap:10px;align-items:center;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 12px 12px 16px}
.pwout code{flex:1;min-width:0;font:600 1.15rem var(--mono);overflow-wrap:anywhere;color:var(--ink)}
.meter{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.meter div{height:100%;width:0;background:var(--ok);transition:width .25s}
.meter div.bad{background:var(--bad)}.meter div.warn{background:var(--limit)}
.sugg{display:flex;flex-wrap:wrap;gap:8px;min-height:0}
.sugg .chip{font-size:1.05rem}.sugg .chip.on{border-color:var(--accent);background:var(--soft)}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.keys button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:1.15rem;cursor:pointer}
.keys button:active{background:var(--soft)}
.reading{max-height:220px;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);line-height:1.7}
.reading .now{background:var(--soft);outline:2px solid var(--soft);border-radius:4px}
.fontpv{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow-wrap:anywhere}
.pincard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--surface)}
.pinhead{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.pin{font:700 1.3rem var(--mono);color:var(--fam,var(--accent))}
.filelist a.pin{font-size:1rem;text-decoration:none}
.fitstage{display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;overflow:hidden}
.fitstage canvas{max-width:100%;border-radius:4px;box-shadow:0 0 0 1px var(--line)}
fieldset.fs{border:1px solid var(--line);border-radius:12px;padding:10px 14px 14px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
fieldset.fs legend{font-weight:700;padding:0 6px;color:var(--ink)}
.field.grow{flex:1;min-width:180px}.field.grow input{width:100%}
.itemrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:10px 0;border-bottom:1px dashed var(--line)}
.itemrow .iconbtn{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);cursor:pointer}
.totals{display:flex;flex-direction:column;gap:4px;margin-left:auto;width:100%;max-width:360px;font-family:var(--mono);font-size:.92rem}
.totals>div{display:flex;justify-content:space-between;gap:12px}.totals .grand{font-size:1.1rem;border-top:2px solid var(--ink);padding-top:6px}
.totals .note{font-family:var(--body)}
.docpv{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;place-items:center}
.docpv canvas{width:100%;max-width:560px;height:auto;box-shadow:0 6px 24px -12px rgba(0,0,0,.35);background:#fff}
.kv{display:grid;grid-template-columns:minmax(110px,34%) 1fr 44px;gap:8px;align-items:start}
.kv .k{font-weight:600;width:100%}.kv .v{width:100%}
.kv .iconbtn{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);cursor:pointer}
.legendIn{font:700 1rem var(--body);border:0;background:none;color:var(--ink);padding:2px 4px;min-height:32px;max-width:100%}
@media (max-width:420px){.kv{grid-template-columns:1fr 44px}.kv .v{grid-column:1/2}.kv .iconbtn{grid-row:1;grid-column:2}}
.sr-file{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
label.btn{position:relative}
fieldset.fs legend{max-width:100%}.legendIn{width:100%;min-width:0}