:root{
    --ink:#14201c;
    --paper:#f6f4ee;
    --line:#d8d2c2;
    --moss:#3c5c4c;
    --moss-dark:#2a4438;
    --rust:#a8532e;
    --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
    --serif:'Fraunces','Iowan Old Style',Georgia,serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  @font-face{
    font-family:'Fraunces';
    src:local('Georgia');
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}

  .wrap{max-width:920px;margin:0 auto;padding:0 24px;}

  header.top{
    border-bottom:1px solid var(--line);
    padding:22px 0;
  }
  header.top .wrap{display:flex;justify-content:space-between;align-items:center;}
  .brand{
    font-family:var(--serif);
    font-size:22px;
    font-weight:600;
    letter-spacing:-0.02em;
  }
  .brand span{color:var(--moss);}
  nav.top-nav a{
    text-decoration:none;
    font-size:14px;
    margin-left:22px;
    color:var(--ink);
    opacity:0.75;
  }
  nav.top-nav a:hover{opacity:1;}

  .hero{
    padding:64px 0 40px;
    border-bottom:1px solid var(--line);
  }
  .hero h1{
    font-family:var(--serif);
    font-size:clamp(34px,5vw,54px);
    line-height:1.05;
    margin:0 0 18px;
    max-width:14ch;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .hero p{
    max-width:46ch;
    font-size:17px;
    color:#3d473f;
    margin:0 0 0;
  }
  .hero .num{
    font-family:var(--mono);
    color:var(--moss);
  }

  main{padding:48px 0 80px;}

  .tool-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:32px;
  }
  .tool-nav button{
    font-family:var(--sans);
    font-size:14px;
    padding:9px 16px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    border-radius:3px;
    cursor:pointer;
  }
  .tool-nav button.active{
    background:var(--moss);
    border-color:var(--moss);
    color:var(--paper);
  }

  .tool{
    display:none;
    border:1px solid var(--line);
    border-radius:4px;
    padding:32px;
    background:#fbfaf6;
  }
  .tool.active{display:block;}

  .tool h2{
    font-family:var(--serif);
    font-size:24px;
    margin:0 0 6px;
    font-weight:600;
  }
  .tool .desc{
    font-size:14px;
    color:#5a6359;
    margin:0 0 28px;
  }

  .row{
    display:flex;
    gap:20px;
    align-items:flex-end;
    flex-wrap:wrap;
    margin-bottom:8px;
  }
  .field{flex:1;min-width:180px;}
  .field label{
    display:block;
    font-size:12px;
    text-transform:none;
    color:#5a6359;
    margin-bottom:6px;
  }
  .field input, .field select{
    width:100%;
    font-family:var(--mono);
    font-size:16px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:3px;
    background:#fff;
    color:var(--ink);
  }
  .field input:focus, .field select:focus{
    outline:2px solid var(--moss);
    outline-offset:1px;
  }
  .swap{
    font-family:var(--mono);
    font-size:20px;
    padding:11px 14px;
    border:1px solid var(--line);
    background:transparent;
    border-radius:3px;
    cursor:pointer;
    color:var(--moss);
    line-height:1;
  }
  .result{
    margin-top:22px;
    padding-top:22px;
    border-top:1px dashed var(--line);
    font-family:var(--mono);
    font-size:30px;
    color:var(--moss-dark);
    word-break:break-word;
  }
  .result .unit{
    font-size:15px;
    font-family:var(--sans);
    color:#5a6359;
    margin-left:8px;
  }

  textarea{
    width:100%;
    min-height:140px;
    font-family:var(--sans);
    font-size:15px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:3px;
    background:#fff;
    color:var(--ink);
    resize:vertical;
  }
  textarea:focus{outline:2px solid var(--moss);outline-offset:1px;}

  .case-btns{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;}
  .case-btns button{
    font-family:var(--sans);
    font-size:13px;
    padding:8px 14px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:3px;
    cursor:pointer;
  }
  .case-btns button:hover{border-color:var(--moss);}

  .stats{
    display:flex;
    gap:28px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .stat{font-family:var(--mono);}
  .stat b{font-size:22px;display:block;color:var(--moss-dark);}
  .stat span{font-size:12px;color:#5a6359;}

  .swatch{
    width:100%;
    height:64px;
    border-radius:3px;
    border:1px solid var(--line);
    margin-top:18px;
  }

  footer{
    border-top:1px solid var(--line);
    padding:28px 0;
    font-size:13px;
    color:#5a6359;
  }
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
  footer .foot-links a{
    text-decoration:none;
    color:#5a6359;
    margin-right:16px;
  }
  footer .foot-links a:hover{color:var(--moss-dark);}

  /* --- Guide sections (explanatory content per tool) --- */
  .guides{
    margin-top:56px;
    border-top:1px solid var(--line);
    padding-top:40px;
  }
  .guides h2.section-title{
    font-family:var(--serif);
    font-size:26px;
    margin:0 0 24px;
    font-weight:600;
  }
  .guide-item{
    margin-bottom:28px;
    padding-bottom:28px;
    border-bottom:1px dashed var(--line);
  }
  .guide-item:last-child{border-bottom:none;}
  .guide-item h3{
    font-family:var(--sans);
    font-size:17px;
    font-weight:600;
    margin:0 0 8px;
  }
  .guide-item p{
    font-size:14.5px;
    color:#3d473f;
    max-width:64ch;
    margin:0;
  }

  /* --- Simple content pages (about/contact/privacy) --- */
  .page-content{
    padding:56px 0 80px;
  }
  .page-content h1{
    font-family:var(--serif);
    font-size:clamp(30px,4.5vw,44px);
    margin:0 0 24px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .page-content h2{
    font-family:var(--sans);
    font-size:19px;
    font-weight:600;
    margin:36px 0 12px;
  }
  .page-content p{
    font-size:15.5px;
    color:#3d473f;
    max-width:64ch;
    margin:0 0 16px;
  }
  .page-content a.link{
    color:var(--moss-dark);
    text-decoration:underline;
  }
  .page-content ul{
    max-width:64ch;
    padding-left:20px;
    color:#3d473f;
    font-size:15.5px;
  }
  .page-content li{margin-bottom:8px;}
  .contact-box{
    margin-top:28px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:4px;
    background:#fbfaf6;
    max-width:64ch;
  }
  .contact-box a{
    color:var(--moss-dark);
    font-family:var(--mono);
    text-decoration:none;
    font-size:16px;
  }

  @media (max-width:600px){
    .tool{padding:22px;}
    .row{flex-direction:column;align-items:stretch;}
    .swap{align-self:center;}
  }