@font-face { font-family: 'Space Grotesk'; src: local('Arial'); }
  :root{
    --ink:#1B2A38;
    --steel:#445468;
    --paper:#EFEBE2;
    --panel:#FFFFFF;
    --line:#D8D2C4;
    --amber:#E2A33B;
    --amber-dark:#B87F22;
    --green:#4C7A5E;
    --red:#B03A2E;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',Arial,sans-serif;}
  h1,h2,h3{font-family:'Space Grotesk','Arial Narrow',Arial,sans-serif;font-weight:600;margin:0;}
  header.top{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;border-bottom:2px solid var(--ink);background:var(--ink);color:#fff;
  }
  header.top .brand{display:flex;align-items:baseline;gap:10px;}
  header.top .brand .mark{
    width:34px;height:34px;background:var(--amber);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;
    font-weight:700;font-size:16px;border-radius:2px;
  }
  header.top h1{font-size:19px;letter-spacing:.2px;white-space:nowrap;}
  header.top .sub{font-size:12px;color:#B9C2CC;margin-top:2px;}
  .header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;}
  header.top .tag{font-size:11px;color:#9FAAB6;border:1px solid #3C4E5F;padding:4px 9px;border-radius:2px;max-width:280px;white-space:normal;text-align:right;}
  @media (max-width:700px){
    header.top{flex-wrap:wrap;row-gap:10px;}
    .header-actions{width:100%;align-items:stretch;}
    header.top .tag{width:100%;max-width:none;text-align:center;box-sizing:border-box;}
  }
  .ad-slot{max-width:1080px;margin:14px auto 0;padding:0 24px;min-height:0;overflow:hidden;}

  main{max-width:1080px;margin:0 auto;padding:26px 24px 80px;}
  .search{
    position:relative;display:flex;gap:10px;margin-bottom:28px;
  }
  .search::before{
    content:'🔍';position:absolute;left:14px;top:50%;transform:translateY(-50%);
    font-size:14px;opacity:.55;pointer-events:none;
  }
  .search input{
    flex:1;padding:11px 14px 11px 38px;border:1px solid var(--line);background:var(--panel);
    font-size:14px;color:var(--ink);border-radius:2px;
  }
  .search input:focus{outline:2px solid var(--amber);outline-offset:1px;}

  .stats-strip{
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--panel);border:1px solid var(--line);border-radius:2px;
    margin-bottom:28px;overflow:hidden;
  }
  .stat-box{
    padding:16px 8px;text-align:center;border-right:1px solid var(--line);
    display:flex;flex-direction:column;gap:3px;
  }
  .stat-box:last-child{border-right:none;}
  .stat-num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--amber-dark);}
  .stat-label{font-size:10.5px;color:var(--steel);letter-spacing:.4px;text-transform:uppercase;}
  @media (max-width:600px){
    .stats-strip{grid-template-columns:repeat(2,1fr);}
    .stat-box:nth-child(1),.stat-box:nth-child(2){border-bottom:1px solid var(--line);}
    .stat-box:nth-child(2){border-right:none;}
  }

  .how-it-works{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:14px 10px;margin-bottom:28px;flex-wrap:wrap;
  }
  .how-step{display:flex;align-items:center;gap:8px;}
  .how-num{
    width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
    font-family:'Space Grotesk',sans-serif;
  }
  .how-text{font-size:12.5px;color:var(--steel);}
  .how-arrow{color:var(--line);font-size:16px;}
  @media (max-width:640px){
    .how-it-works{flex-direction:column;align-items:flex-start;gap:8px;}
    .how-arrow{display:none;}
  }
  @media (max-width:520px){
    .stat-num{font-size:17px;}
    .stat-label{font-size:9px;}
    .stat-box{padding:10px 4px;}
  }

  section.category{margin-bottom:34px;}
  section.category .cat-head{
    display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink);
    padding-bottom:8px;margin-bottom:14px;
  }
  section.category .cat-head h2{font-size:15px;}
  section.category .cat-head .count{font-size:12px;color:var(--steel);}
  .cat-badge{
    width:26px;height:26px;flex:none;border-radius:2px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  }
  section.category .cat-head .cat-badge{color:#fff;}

  .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;}
  .tool-card{
    display:flex;align-items:flex-start;gap:14px;padding:16px;
    background:var(--panel);border:1px solid var(--line);border-radius:3px;cursor:pointer;
    text-align:left;transition:border-color .15s ease, box-shadow .15s ease;
  }
  .tool-card:hover{border-color:var(--amber-dark);box-shadow:0 2px 8px rgba(0,0,0,.06);}
  .tool-card:focus-visible{outline:2px solid var(--amber-dark);outline-offset:2px;}
  .ic-stack{position:relative;width:44px;height:44px;flex:none;margin-top:2px;}
  .ic-stack .ic-back{
    position:absolute;top:0;left:9px;width:30px;height:30px;border-radius:4px;
    background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--steel);
  }
  .ic-stack .ic-front{
    position:absolute;bottom:0;left:0;width:34px;height:34px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;
  }
  .tool-card .tool-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .tool-card .lbl{font-size:14px;font-weight:600;}
  .tool-card .note{display:block;font-size:12px;color:var(--steel);font-weight:400;line-height:1.45;}

  /* icon colors by category — explicit per-combo backgrounds, no currentColor tricks */
  .ic-organize{background:#C1552F;}
  .ic-optimize{background:#5F8C5A;}
  .ic-protect{background:#3B4C87;}
  .ic-to{background:#3E6E8E;}
  .ic-from{background:#8A6BAF;}
  .ic-edit{background:#7A4F63;}
  .ic-stack.ic-organize .ic-front{background:#C1552F;}
  .ic-stack.ic-optimize .ic-front{background:#5F8C5A;}
  .ic-stack.ic-protect .ic-front{background:#3B4C87;}
  .ic-stack.ic-to .ic-front{background:#3E6E8E;}
  .ic-stack.ic-from .ic-front{background:#8A6BAF;}
  .ic-stack.ic-edit .ic-front{background:#7A4F63;}

  dialog{
    border:none;border-radius:3px;padding:0;width:min(720px,92vw);max-height:88vh;
    box-shadow:0 12px 40px rgba(0,0,0,.35);
  }
  dialog::backdrop{background:rgba(20,26,32,.55);}
  .panel-head{
    display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;
    padding:14px 18px;
  }
  .panel-head h3{font-size:15px;}
  .panel-head button{background:none;border:none;color:#B9C2CC;font-size:18px;cursor:pointer;}
  .panel-body{padding:18px;overflow-y:auto;max-height:70vh;}
  .panel-body p.desc{font-size:12.5px;color:var(--steel);margin:0 0 14px;}

  /* Multi-task bar — appears once at least one tool task is open. Sticky so it stays
     reachable while a task dialog is closed/switched away from. */
  .task-bar{
    position:sticky;top:0;z-index:20;display:flex;gap:6px;flex-wrap:wrap;
    background:var(--ink);padding:8px 24px;overflow-x:auto;
  }
  .task-tab{
    display:flex;align-items:center;gap:8px;background:#26364A;color:#C7D0DA;
    border:1px solid #384A5F;border-radius:4px;padding:6px 8px 6px 12px;
    font-size:12.5px;cursor:pointer;white-space:nowrap;flex:none;
  }
  .task-tab.active{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600;}
  .task-tab-close{
    display:flex;align-items:center;justify-content:center;width:18px;height:18px;
    border-radius:3px;opacity:.7;
  }
  .task-tab-close:hover{opacity:1;background:rgba(0,0,0,.15);}
  @media (max-width:600px){
    .task-bar{padding:8px 14px;}
  }
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12px;color:var(--steel);margin-bottom:5px;}
  .field input[type=text],.field input[type=number],.field select{
    width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:2px;font-size:13px;
  }
  .drop{
    border:1.5px dashed var(--line);border-radius:2px;padding:22px;text-align:center;font-size:12.5px;
    color:var(--steel);cursor:pointer;margin-bottom:12px;background:#FAF8F3;
  }
  .drop.drag{border-color:var(--amber-dark);color:var(--ink);}
  .filelist{font-size:12px;color:var(--ink);margin-bottom:10px;}
  .filelist div{padding:3px 0;border-bottom:1px solid var(--line);}
  .row{display:flex;gap:10px;}
  .row .field{flex:1;}
  button.run{
    background:var(--amber-dark);color:#fff;border:none;padding:10px 18px;border-radius:2px;
    font-size:13px;font-weight:600;cursor:pointer;
  }
  button.run:hover{background:#9C6A1B;}
  button.ghost{background:none;border:1px solid var(--line);padding:9px 14px;border-radius:2px;font-size:12.5px;cursor:pointer;color:var(--steel);}
  .status{font-size:12.5px;margin-top:12px;color:var(--steel);min-height:16px;}
  .status.ok{color:var(--green);}
  .status.err{color:var(--red);}

  .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:14px;max-height:340px;overflow:auto;padding:4px;}
  .thumb{border:1px solid var(--line);border-radius:2px;padding:6px;background:#FAF8F3;position:relative;}
  .thumb[draggable="true"]{cursor:grab;}
  .thumb.dragging{opacity:.4;}
  .thumb.selectable{cursor:pointer;}
  .thumb.selectable:hover{border-color:var(--amber-dark);}
  .thumb.selected{border-color:var(--amber-dark);border-width:2px;background:#FCEFD9;box-shadow:0 0 0 1px var(--amber-dark) inset;}
  .thumb-img{display:flex;align-items:center;justify-content:center;height:110px;overflow:hidden;position:relative;}
  .pv-pagenum{position:absolute;bottom:2px;left:2px;right:2px;display:flex;font-size:8px;color:#B03A2E;font-weight:600;pointer-events:none;}
  .pv-watermark{position:absolute;top:50%;left:50%;color:#666;font-weight:700;white-space:nowrap;pointer-events:none;}
  .pv-crop{position:absolute;border:1.5px dashed var(--red);pointer-events:none;}

  /* Interactive crop box */
  .crop-wrap{position:relative;display:inline-block;max-width:100%;touch-action:none;}
  .crop-canvas{display:block;max-width:100%;height:auto;border:1px solid var(--line);}
  .crop-page-note{font-size:11.5px;color:var(--steel);margin-top:8px;}
  .crop-box{
    position:absolute;border:2px solid var(--amber);background:rgba(226,163,59,.12);
    cursor:move;box-sizing:border-box;
  }
  .crop-handle{
    position:absolute;width:14px;height:14px;background:var(--amber);border:2px solid #fff;
    border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  .crop-handle-nw{left:-7px;top:-7px;cursor:nwse-resize;}
  .crop-handle-ne{right:-7px;top:-7px;cursor:nesw-resize;}
  .crop-handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize;}
  .crop-handle-se{right:-7px;bottom:-7px;cursor:nwse-resize;}
  .crop-scope-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
  .crop-radio{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);cursor:pointer;}
  .crop-reset-btn{
    margin-left:auto;background:none;border:none;color:var(--amber-dark);font-size:12px;
    text-decoration:underline;cursor:pointer;font-family:inherit;
  }
  .thumb-img canvas{max-width:100%;max-height:100%;transition:transform .15s ease;}
  .thumb-label{font-size:10.5px;text-align:center;color:var(--steel);margin-top:4px;}
  .thumb-actions{display:flex;justify-content:center;gap:3px;margin-top:4px;}
  .thumb-actions button{border:1px solid var(--line);background:#fff;border-radius:2px;font-size:10px;padding:2px 5px;cursor:pointer;}

  .edit-page{position:relative;margin-bottom:10px;border:1px solid var(--line);}
  .edit-page canvas{display:block;width:100%;cursor:crosshair;touch-action:none;}
  .edit-mark{position:absolute;transform:translate(-2px,-14px);background:#fff;border:1px solid var(--red);color:var(--red);font-size:11px;padding:1px 4px;border-radius:2px;pointer-events:none;}

  .edit-popup{
    position:absolute;z-index:20;background:#fff;border:1px solid var(--ink);border-radius:3px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);padding:10px;width:270px;max-width:88vw;
  }
  .edit-popup .ep-row{margin-bottom:8px;}
  .edit-popup .ep-row:last-child{margin-bottom:0;}
  .edit-popup .ep-text{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:2px;font-size:13px;}
  .edit-popup .ep-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--steel);}
  .edit-popup .ep-swatch-lbl{display:flex;align-items:center;gap:5px;}
  .edit-popup .ep-hl-lbl{display:flex;align-items:center;gap:4px;}
  .edit-popup .ep-color-swatch{
    width:22px;height:22px;border-radius:3px;border:1px solid var(--line);
    cursor:pointer;padding:0;
  }
  .edit-popup .ep-color-picker{
    position:absolute;top:36px;left:0;z-index:30;background:var(--panel);
    border:1px solid var(--line);border-radius:4px;padding:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }
  .edit-popup .ep-hue-canvas{
    display:block;width:200px;height:22px;border-radius:3px;cursor:pointer;margin-bottom:8px;
  }
  .edit-popup .ep-color-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
  .edit-popup .ep-preset{
    width:26px;height:26px;border-radius:3px;border:none;cursor:pointer;padding:0;
  }
  .edit-popup .ep-preset:hover{outline:2px solid var(--amber);outline-offset:1px;}
  .edit-popup .ep-bg-swatch{
    width:22px;height:22px;border-radius:3px;border:1px solid var(--line);
    cursor:pointer;padding:0;
  }
  .edit-popup .ep-bg-picker{
    position:absolute;top:36px;left:0;z-index:30;background:var(--panel);
    border:1px solid var(--line);border-radius:4px;padding:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);width:200px;
  }
  .edit-popup .ep-bg-hue-canvas{
    display:block;width:200px;height:22px;border-radius:3px;cursor:pointer;margin-bottom:8px;
  }
  .edit-popup .ep-bg-preset{
    width:26px;height:26px;border-radius:3px;border:none;cursor:pointer;padding:0;
  }
  .edit-popup .ep-bg-preset:hover{outline:2px solid var(--amber);outline-offset:1px;}
  .edit-popup .ep-family{padding:5px 6px;border:1px solid var(--line);border-radius:2px;font-size:11.5px;}
  .edit-popup .ep-size,.edit-popup .ep-rotate{padding:5px 6px;border:1px solid var(--line);border-radius:2px;font-size:11.5px;}
  .edit-popup .ep-style-btn,.edit-popup .ep-align-btn{
    width:26px;height:26px;border:1px solid var(--line);border-radius:2px;background:#fff;
    cursor:pointer;font-size:12px;color:var(--ink);display:flex;align-items:center;justify-content:center;
  }
  .edit-popup .ep-style-btn.active,.edit-popup .ep-align-btn.active{background:var(--amber-dark);border-color:var(--amber-dark);color:#fff;}
  .edit-popup input[type=color]{width:24px;height:22px;border:1px solid var(--line);padding:0;border-radius:2px;cursor:pointer;}
  .edit-popup .ep-actions{display:flex;justify-content:flex-end;gap:8px;}
  .edit-popup .ep-actions button{padding:6px 12px;font-size:12px;}

  .edit-toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;margin-bottom:12px;
    background:#FAF8F3;border:1px solid var(--line);border-radius:3px;
  }
  .et-btn{
    background:#fff;border:1px solid var(--line);border-radius:2px;padding:6px 9px;
    font-size:12px;cursor:pointer;color:var(--ink);white-space:nowrap;
  }
  .et-btn:hover{border-color:var(--amber-dark);}
  .et-btn.active{background:var(--amber-dark);border-color:var(--amber-dark);color:#fff;}
  .et-sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px;}
  .et-color-lbl,.et-width-lbl{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--steel);}
  .et-color-lbl input,.et-width-lbl input{border:1px solid var(--line);border-radius:2px;}
  .et-color-lbl input[type=color]{width:26px;height:24px;padding:0;cursor:pointer;}
  .et-width-lbl input[type=number]{padding:3px;}
  .et-hint{flex-basis:100%;font-size:11.5px;color:var(--steel);margin-top:4px;}

  .sig-overlay{
    position:fixed;inset:0;background:rgba(20,26,32,.55);display:flex;align-items:center;justify-content:center;z-index:50;
  }
  .sig-card{background:#fff;border-radius:3px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);}
  .sig-canvas{border:1px solid var(--line);border-radius:2px;touch-action:none;cursor:crosshair;display:block;margin:10px 0;}
  .sig-actions{display:flex;justify-content:flex-end;gap:8px;}
  .sig-actions button{padding:8px 14px;font-size:12.5px;}

  footer{max-width:1080px;margin:0 auto;padding:0 24px 40px;font-size:11.5px;color:var(--steel);}
  .footer-links{margin-top:8px;}
  .footer-donate-row{margin-top:16px;text-align:center;}
  .donate-footer-link{
    display:inline-block;background:var(--amber);color:var(--ink);
    padding:10px 20px;border-radius:8px;font-weight:600;font-size:13px;
    text-decoration:none;transition:background-color .15s ease;
  }
  .donate-footer-link:hover{background:#F2B84E;}
  .footer-link-btn{background:none;border:none;padding:0;font-size:11.5px;color:var(--steel);text-decoration:underline;cursor:pointer;font-family:inherit;}
  .footer-link-btn:hover{color:var(--ink);}
  .footer-sep{margin:0 8px;color:var(--line);}
  #privacyDialog{width:min(560px,92vw);}
  #privacyDialog .panel-body p{margin:0 0 12px;font-size:13px;line-height:1.6;}
  #privacyDialog .panel-body a{color:var(--amber-dark);}
  #termsDialog{width:min(560px,92vw);}
  #termsDialog .panel-body p{margin:0 0 12px;font-size:13px;line-height:1.6;}
  #termsDialog .panel-body a{color:var(--amber-dark);}
  #aboutDialog{width:min(560px,92vw);}
  #aboutDialog .panel-body p{margin:0 0 12px;font-size:13px;line-height:1.6;}
  #aboutDialog .panel-body a{color:var(--amber-dark);}
  footer .privacy{border-top:1px solid var(--line);padding-top:14px;margin-top:10px;}

  @media (max-width:520px){
    header.top{padding:14px 16px;}
    header.top h1{font-size:17px;}
    main{padding:18px 14px 60px;}
  }
  @media (max-width:600px){
    header.top .sub{display:none;}
    .tool-card{padding:12px;}
  }

/* =====================================================================
   SITE LAYER (added for the multi-page site). Everything above this line
   is the original app stylesheet, kept as-is so the tools look and behave
   exactly as before.
   ===================================================================== */
:root{ --link:#7E5410; --focus:#94641A; }
html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;padding-bottom:64px;} /* room for the fixed host badge on mobile */
img,svg,canvas{max-width:100%;}
a{color:var(--link);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--ink);padding:10px 14px;z-index:100;font-weight:600;}
.skip:focus{left:8px;top:8px;}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* accessibility fix: original amber-dark button had ~3:1 contrast with white text */
button.run{background:#94641A;min-height:42px;}
button.run:hover{background:#7A5214;}
button.run:disabled{opacity:.6;cursor:progress;}

/* ---- header ---- */
.site-head{background:var(--ink);color:#fff;border-bottom:2px solid var(--ink);}
.site-head .wrap{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;}
.brand .mark{width:34px;height:34px;background:var(--amber);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:16px;border-radius:2px;}
.brand-name{font-family:'Space Grotesk','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:19px;white-space:nowrap;}
.site-nav{display:flex;flex-wrap:wrap;gap:2px 4px;}
.site-nav a{color:#D5DCE3;text-decoration:none;font-size:14px;padding:8px 10px;border-radius:2px;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff;background:#26364A;}
@media (max-width:700px){
  .site-head .wrap{padding:12px 14px;row-gap:8px;}
  .site-nav{width:100%;gap:0;margin:0 -6px;}
  .site-nav a{font-size:13.5px;padding:8px 8px;}
}

/* ---- hero (home) ---- */
.hero{padding:6px 0 4px;}
.hero h1{font-size:clamp(26px,4.4vw,40px);line-height:1.12;letter-spacing:-.3px;max-width:20ch;margin-bottom:12px;}
.hero .lede{font-size:16.5px;line-height:1.6;color:var(--steel);max-width:62ch;margin:0 0 18px;}
.hero .tag{display:inline-block;font-size:12.5px;color:var(--ink);border:1px solid var(--ink);padding:5px 10px;border-radius:2px;margin-bottom:18px;}
.popular{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 28px;align-items:center;}
.popular span{font-size:13px;color:var(--steel);margin-right:2px;}
.popular a{font-size:13.5px;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:2px;min-height:38px;display:inline-flex;align-items:center;}
.popular a:hover{border-color:var(--amber-dark);}
.search input{font-size:16px;min-height:46px;} /* 16px stops iOS zoom-on-focus */
.search-empty{font-size:14px;color:var(--steel);margin:-12px 0 24px;}

/* tool cards are now real links (crawlable), styled exactly like the old buttons */
a.tool-card{color:inherit;text-decoration:none;}
.tool-card .lbl{color:var(--ink);}

/* ---- generic content ---- */
.crumbs{font-size:13px;color:var(--steel);margin:0 0 14px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;}
.crumbs li+li::before{content:"›";margin:0 6px 0 2px;color:#9A9384;}
.crumbs a{color:var(--steel);}
.prose{max-width:720px;font-size:16px;line-height:1.68;}
.prose h1{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:0 0 14px;letter-spacing:-.2px;}
.prose h2{font-size:22px;line-height:1.25;margin:38px 0 12px;padding-top:14px;border-top:1px solid var(--line);}
.prose h3{font-size:17px;margin:24px 0 8px;}
.prose p,.prose ul,.prose ol,.prose dl{margin:0 0 14px;}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin-bottom:6px;}
.prose .lede{font-size:18px;color:var(--steel);line-height:1.6;}
.prose dt{font-weight:600;margin-top:12px;}
.prose dd{margin:4px 0 0;}
.prose code{background:#E4DED1;padding:1px 5px;border-radius:2px;font-size:.92em;}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;margin:0 0 16px;display:block;overflow-x:auto;}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;background:var(--panel);}
.prose th{background:#E7E1D4;}
.meta{font-size:13.5px;color:var(--steel);margin:-4px 0 20px;}
.note-box{background:var(--panel);border-left:4px solid var(--amber);padding:14px 16px;margin:0 0 18px;font-size:15px;}
.layout{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:40px;}
.side{font-size:14px;}
.side h2{font-size:15px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ink);}
.side ul{list-style:none;padding:0;margin:0 0 26px;}
.side li{border-bottom:1px solid var(--line);}
.side li a{display:block;padding:9px 0;color:var(--ink);text-decoration:none;}
.side li a:hover{color:var(--link);text-decoration:underline;}
@media (max-width:900px){ .layout{grid-template-columns:1fr;gap:10px;} }

/* ---- tool page: launcher panel ---- */
.launch{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--cat,#C1552F);padding:20px;margin:6px 0 26px;}
.launch-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.launch .open-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;border:none;border-radius:2px;padding:14px 22px;font-size:16px;font-weight:600;cursor:pointer;min-height:50px;font-family:inherit;text-decoration:none;}
.launch .open-btn:hover{background:#2A3E52;}
.launch .accepts{font-size:14px;color:var(--steel);}
.launch .trust{font-size:13.5px;color:var(--steel);margin:14px 0 0;line-height:1.55;border-top:1px dashed var(--line);padding-top:12px;}
.cat-organize{--cat:#C1552F}.cat-optimize{--cat:#5F8C5A}.cat-protect{--cat:#3B4C87}.cat-to{--cat:#3E6E8E}.cat-from{--cat:#8A6BAF}.cat-edit{--cat:#7A4F63}

/* related tools */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:0 0 10px;padding:0;list-style:none;}
.related li{margin:0;}
.related a{display:block;background:var(--panel);border:1px solid var(--line);padding:12px 14px;text-decoration:none;color:var(--ink);height:100%;}
.related a:hover{border-color:var(--amber-dark);}
.related strong{display:block;font-size:15px;}
.related span{display:block;font-size:13px;color:var(--steel);line-height:1.45;margin-top:3px;}

/* ---- home sections ---- */
.home-sec{margin:46px 0 0;}
.home-sec > h2{font-size:22px;margin:0 0 6px;}
.home-sec > .sub{color:var(--steel);font-size:15px;margin:0 0 18px;max-width:64ch;line-height:1.55;}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--ink);}
.points div{padding:14px 18px 16px 0;}
.points h3{font-size:15.5px;margin:0 0 6px;}
.points p{margin:0;font-size:14px;color:var(--steel);line-height:1.55;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-size:15px;line-height:1.65;}
.two-col p{margin:0 0 12px;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;gap:6px;} }
.faq-list details{background:var(--panel);border:1px solid var(--line);margin-bottom:8px;}
.faq-list summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:15px;list-style-position:outside;}
.faq-list details > div{padding:0 16px 14px;font-size:15px;line-height:1.65;color:#2C3A48;}
.faq-list details > div p{margin:0 0 10px;}
.post-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.post-list li{margin:0;}
.post-list a{display:block;height:100%;background:var(--panel);border:1px solid var(--line);padding:16px;text-decoration:none;color:var(--ink);}
.post-list a:hover{border-color:var(--amber-dark);}
.post-list strong{display:block;font-size:16px;line-height:1.35;margin-bottom:6px;}
.post-list span{display:block;font-size:14px;color:var(--steel);line-height:1.5;}
.more-link{display:inline-block;margin-top:14px;font-size:15px;}

/* ---- forms ---- */
.form-field{margin:0 0 16px;}
.form-field label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;}
.form-field input,.form-field textarea,.form-field select{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #B9B2A3;border-radius:2px;background:#fff;color:var(--ink);}
.form-field textarea{min-height:150px;resize:vertical;}
.form-hint{font-size:13.5px;color:var(--steel);margin-top:5px;}
.btn-primary{background:var(--ink);color:#fff;border:none;border-radius:2px;padding:13px 22px;font-size:16px;font-weight:600;cursor:pointer;min-height:48px;font-family:inherit;}
.btn-primary:hover{background:#2A3E52;}
.hp{display:none;}

/* ---- dialog additions ---- */
.dlg-guide{font-size:13px;margin:-6px 0 10px;}
.dlg-privacy{font-size:12.5px;color:var(--steel);background:#FAF8F3;border:1px solid var(--line);padding:8px 10px;margin:0 0 14px;}
.drop{min-height:88px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.drop-notice{font-size:13px;color:var(--red);background:#FBEDEA;border:1px solid #E8C4BE;padding:8px 10px;margin:-4px 0 12px;}
.panel-head button{min-width:40px;min-height:40px;}
.engine-status{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:3px;font-size:14px;max-width:min(92vw,520px);box-shadow:0 6px 20px rgba(0,0,0,.3);display:none;text-align:center;line-height:1.45;}
.engine-status.show{display:block;}
.engine-status.err{background:var(--red);}
@media (max-width:600px){
  dialog{width:96vw;max-height:92vh;}
  .panel-body{max-height:78vh;}
  .field input[type=text],.field input[type=number],.field input[type=password],.field select{font-size:16px;min-height:42px;}
}
.field input[type=password]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:2px;font-size:13px;}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:#B9C2CC;margin-top:64px;max-width:none;padding:0;font-size:14px;}
.site-foot .wrap{max-width:1080px;margin:0 auto;padding:36px 24px 28px;}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;}
.site-foot h2{color:#fff;font-size:14.5px;margin:0 0 10px;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li a{display:inline-block;color:#C7D0DA;text-decoration:none;padding:5px 0;}
.site-foot li a:hover{color:#fff;text-decoration:underline;}
.foot-note{border-top:1px solid #33465A;margin-top:26px;padding-top:16px;font-size:13px;line-height:1.6;color:#9FAAB6;}
.foot-note a{color:#E2C48A;}
.site-foot .donate-footer-link{margin-top:14px;}
@media (max-width:600px){
  .prose{font-size:16px;}
  .prose .lede,.hero .lede{font-size:16px;}
  .launch{padding:16px;margin-top:2px;}
  .launch .open-btn{width:100%;}
}
@media (max-width:420px){
  .site-nav a{font-size:13px;padding:8px 5px;}
  .brand-name{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} }