
<style>
  :root{
    --paper:#F6F4EF;
    --paper-dim:#EDEAE2;
    --ink:#1C2430;
    --ink-soft:#4A5568;
    --rule:#D6D0C2;
    --green:#2F6F52;
    --green-dim:#EAF1EC;
    --seal:#B5482A;
    --seal-dim:#F7E9E3;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
  }
  h1,h2,h3{
    font-family:'Lora', serif;
    font-weight:600;
    margin:0 0 .4em;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}

  /* --- layout shell --- */
  .shell{max-width:960px;margin:0 auto;padding:0 24px;}
  header.site{
    position:sticky;top:0;z-index:20;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
  }
  .brand{
    display:flex;align-items:center;gap:8px;
    font-family:'Lora',serif;font-weight:600;font-size:1.15rem;
    cursor:pointer;
  }
  .brand .mark{
    width:22px;height:22px;border:1.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono';font-size:11px;
    transform:rotate(-3deg);
  }
  .nav-links{display:flex;gap:22px;font-size:.92rem;}
  .nav-links button{
    background:none;border:none;color:var(--ink-soft);
    font-size:.92rem;padding:4px 0;border-bottom:1px solid transparent;
  }
  .nav-links button:hover{color:var(--ink);border-color:var(--rule);}
  .nav-links button.active{color:var(--ink);border-color:var(--green);}

  /* --- hero --- */
  .hero{padding:64px 0 40px;border-bottom:1px solid var(--rule);}
  .eyebrow{
    font-family:'IBM Plex Mono';font-size:.75rem;letter-spacing:.08em;
    color:var(--green);text-transform:uppercase;margin-bottom:14px;
    display:flex;align-items:center;gap:8px;
  }
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--green);}
  .hero h1{font-size:2.6rem;max-width:640px;}
  .hero p.lede{color:var(--ink-soft);max-width:520px;font-size:1.05rem;margin-top:10px;}

  .search-box{
    margin-top:28px;display:flex;gap:0;max-width:480px;
    border:1.5px solid var(--ink);background:var(--paper);
  }
  .search-box input{
    flex:1;border:none;background:transparent;padding:12px 14px;
    font-family:inherit;font-size:.95rem;outline:none;color:var(--ink);
  }
  .search-box span{
    padding:12px 14px;font-family:'IBM Plex Mono';font-size:.8rem;
    color:var(--ink-soft);border-left:1px solid var(--rule);
  }
  #search-results{margin-top:10px;max-width:480px;}
  #search-results a{
    display:block;padding:8px 0;border-bottom:1px dashed var(--rule);
    font-size:.9rem;
  }

  /* --- tool grid: index-card look --- */
  .section{padding:48px 0;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:22px;border-bottom:1px solid var(--rule);padding-bottom:10px;
  }
  .section-head .mono{font-size:.75rem;color:var(--ink-soft);}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
  .card{
    position:relative;
    background:var(--paper);
    border:1px solid var(--rule);
    padding:20px 18px 18px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .card::before{
    content:"";position:absolute;top:0;right:0;width:0;height:0;
    border-style:solid;border-width:0 16px 16px 0;
    border-color:transparent var(--paper-dim) transparent transparent;
    border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  }
  .card:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--rule);}
  .card .tag{
    font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.05em;
    color:var(--green);text-transform:uppercase;margin-bottom:10px;display:inline-block;
    padding:2px 6px;background:var(--green-dim);
  }
  .card h3{font-size:1.15rem;margin-bottom:6px;}
  .card p{font-size:.87rem;color:var(--ink-soft);margin:0;}

  /* --- tool detail --- */
  .tool-view{display:none;padding:44px 0 60px;}
  .tool-view.active{display:block;}
  .back-link{
    font-family:'IBM Plex Mono';font-size:.78rem;color:var(--ink-soft);
    background:none;border:none;margin-bottom:22px;padding:0;
  }
  .back-link:hover{color:var(--ink);}
  .tool-head{border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:28px;}
  .tool-head .tag{
    font-family:'IBM Plex Mono';font-size:.7rem;color:var(--green);
    text-transform:uppercase;letter-spacing:.05em;
  }
  .tool-head h2{font-size:1.9rem;margin-top:6px;}
  .tool-head p{color:var(--ink-soft);max-width:560px;}

  .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
  @media (max-width:760px){.tool-grid{grid-template-columns:1fr;}}

  .field{margin-bottom:18px;}
  .field label{
    display:block;font-family:'IBM Plex Mono';font-size:.75rem;
    color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;
  }
  .field input, .field select, .field textarea{
    width:100%;padding:10px 12px;border:1px solid var(--rule);
    background:#fff;font-family:inherit;font-size:.92rem;color:var(--ink);
  }
  .field textarea{min-height:80px;resize:vertical;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);
  }

  .generate-btn{
    background:var(--ink);color:var(--paper);border:none;
    padding:12px 22px;font-size:.9rem;font-family:'IBM Plex Mono';
    letter-spacing:.02em;margin-top:4px;
  }
  .generate-btn:hover{background:var(--green);}

  .output-panel{
    background:#fff;border:1px solid var(--rule);padding:20px;
    min-height:180px;position:relative;
  }
  .output-panel::before{
    content:"DRAFT";position:absolute;top:14px;right:16px;
    font-family:'IBM Plex Mono';font-size:.65rem;color:var(--seal);
    border:1px solid var(--seal);padding:2px 6px;transform:rotate(3deg);
    opacity:.75;
  }
  .output-panel pre{
    white-space:pre-wrap;font-family:'IBM Plex Sans';font-size:.92rem;
    margin:0;color:var(--ink);line-height:1.6;
  }
  .output-panel .placeholder{color:var(--ink-soft);font-size:.88rem;}

  .faq-item{border-bottom:1px dashed var(--rule);padding:14px 0;}
  .faq-item h4{font-size:.95rem;margin:0 0 4px;}
  .faq-item p{margin:0;color:var(--ink-soft);font-size:.88rem;}

  .related-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
  .related-chip{
    font-family:'IBM Plex Mono';font-size:.78rem;
    border:1px solid var(--rule);padding:6px 12px;background:#fff;
  }
  .related-chip:hover{border-color:var(--green);color:var(--green);}

  /* --- blog --- */
  .blog-list{display:flex;flex-direction:column;}
  .blog-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:16px 0;border-bottom:1px solid var(--rule);cursor:pointer;
  }
  .blog-row:hover h4{color:var(--green);}
  .blog-row h4{margin:0;font-size:1rem;font-weight:500;font-family:'Lora',serif;}
  .blog-row span{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);white-space:nowrap;margin-left:16px;}
  .blog-post p{margin:0 0 1em;color:var(--ink);font-size:.96rem;max-width:620px;}

  /* --- pricing --- */
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:760px){.pricing-grid{grid-template-columns:1fr;}}
  .plan{border:1px solid var(--rule);padding:22px;background:#fff;}
  .plan.highlight{border-color:var(--green);position:relative;}
  .plan .price{font-family:'Lora',serif;font-size:1.8rem;margin:8px 0 14px;}
  .plan ul{list-style:none;padding:0;margin:0 0 18px;font-size:.88rem;color:var(--ink-soft);}
  .plan li{padding:5px 0;border-bottom:1px dashed var(--rule);}
  .plan button{
    width:100%;padding:10px;border:1px solid var(--ink);background:transparent;
    font-family:'IBM Plex Mono';font-size:.82rem;
  }
  .plan button:not(:disabled):hover{background:var(--ink);color:var(--paper);}
  .plan button:disabled{opacity:.45;cursor:not-allowed;}

  footer{border-top:1px solid var(--rule);padding:28px 0;margin-top:20px;
    font-family:'IBM Plex Mono';font-size:.75rem;color:var(--ink-soft);}

  #home-view, #blog-view, #blogpost-view, #pricing-view{display:none;}
  #home-view.active, #blog-view.active, #blogpost-view.active, #pricing-view.active{display:block;}

  /* --- category chips (home) --- */
  .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px;}
  .chip{
    font-family:'IBM Plex Mono';font-size:.75rem;
    border:1px solid var(--rule);padding:6px 12px;background:#fff;
    text-transform:capitalize;
  }
  .chip:hover{border-color:var(--green);color:var(--green);}
  .chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  /* --- browse banner --- */
  .browse-banner{
    display:flex;align-items:center;justify-content:space-between;
    border:1px solid var(--ink);background:var(--green-dim);
    padding:16px 20px;margin:8px 0 36px;
  }
  .browse-banner .txt .mono{font-size:.7rem;color:var(--green);text-transform:uppercase;letter-spacing:.05em;}
  .browse-banner .txt div{font-family:'Lora',serif;font-size:1.05rem;margin-top:3px;}
  .browse-banner button{
    background:var(--ink);color:var(--paper);border:none;
    padding:10px 18px;font-family:'IBM Plex Mono';font-size:.8rem;white-space:nowrap;
  }
  .browse-banner button:hover{background:var(--green);}

  /* --- breadcrumb --- */
  .crumb{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);margin-bottom:14px;}
  .crumb a{cursor:pointer;}
  .crumb a:hover{color:var(--green);}
  .crumb .sep{margin:0 6px;color:var(--rule);}

  /* --- browse view --- */
  #browse-view{display:none;padding:44px 0 60px;}
  #browse-view.active{display:block;}
  .filter-bar{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    border:1px solid var(--rule);background:#fff;padding:14px;margin-bottom:20px;
    position:sticky;top:65px;z-index:10;
  }
  .filter-bar input[type=search]{
    flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--rule);
    font-family:inherit;font-size:.88rem;
  }
  .filter-bar select{
    padding:9px 10px;border:1px solid var(--rule);font-family:'IBM Plex Mono';font-size:.78rem;background:#fff;
  }
  .filter-bar .count{font-family:'IBM Plex Mono';font-size:.75rem;color:var(--ink-soft);white-space:nowrap;}

  .directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
  .dir-item{
    border:1px solid var(--rule);background:#fff;padding:12px 14px;cursor:pointer;
    font-size:.85rem;
  }
  .dir-item:hover{border-color:var(--green);}
  .dir-item .k{
    font-family:'IBM Plex Mono';font-size:.65rem;color:var(--green);
    text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px;
  }
  .dir-item.is-base .k{color:var(--seal);}

  .pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;}
  .pager button{
    border:1px solid var(--ink);background:transparent;padding:8px 16px;
    font-family:'IBM Plex Mono';font-size:.8rem;
  }
  .pager button:disabled{opacity:.35;cursor:not-allowed;}
  .pager button:not(:disabled):hover{background:var(--ink);color:var(--paper);}
  .pager span{font-family:'IBM Plex Mono';font-size:.78rem;color:var(--ink-soft);}

  .variant-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .variant-chip{
    font-family:'IBM Plex Mono';font-size:.72rem;border:1px solid var(--rule);
    padding:5px 10px;background:#fff;
  }
  .variant-chip:hover{border-color:var(--green);color:var(--green);}
  .variant-chip.current{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  .about-hero{padding:20px 0 8px;}
  .about-hero .eyebrow{margin-bottom:14px;}
  .about-hero h1{font-size:2.2rem;max-width:600px;}
  .about-lede{font-size:1.15rem;color:var(--ink);max-width:580px;margin-top:14px;font-family:'Lora',serif;font-style:italic;}
  .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px;}
  @media (max-width:760px){.value-grid{grid-template-columns:1fr;}}
  .value-card{border:1px solid var(--rule);background:#fff;padding:20px;}
  .value-card .num{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--green);margin-bottom:10px;display:block;}
  .value-card h3{font-size:1.05rem;margin-bottom:6px;}
  .value-card p{font-size:.88rem;color:var(--ink-soft);margin:0;}
  .stance-block{border-left:2px solid var(--seal);padding:4px 0 4px 20px;margin:32px 0;}
  .stance-block p{font-size:.95rem;color:var(--ink);max-width:600px;}