:root{
      --paper:#f7f1da;
      --paper-2:#fffaf0;
      --ink:#202015;
      --muted:#6d6a52;
      --line:#d9cfaa;
      --corn:#f6c945;
      --corn-dark:#d9a91d;
      --leaf:#4d7b45;
      --leaf-dark:#31562c;
      --red:#b64d38;
      --shadow:0 18px 50px rgba(60,47,15,.12);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(circle at 12% 0%, rgba(246,201,69,.22), transparent 32rem),
        radial-gradient(circle at 95% 18%, rgba(77,123,69,.13), transparent 28rem),
        var(--paper);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height:100vh;
    }
    button,input,select{font:inherit}
    button{cursor:pointer}
    .wrap{width:min(1120px, calc(100% - 28px)); margin:0 auto}
    header{
      padding:24px 0 8px;
      display:flex; align-items:center; justify-content:space-between; gap:18px;
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.04em}
    .brandmark{
      width:46px; height:46px; border:2px solid var(--ink); border-radius:14px;
      display:grid; place-items:center; background:var(--corn); box-shadow:4px 4px 0 var(--ink);
      font-size:26px; transform:rotate(-2deg);
    }
    .brand span{font-size:24px}
    .tag{
      color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
    }
    .hero{padding:54px 0 28px; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center}
    h1{
      font-family: Georgia, "Times New Roman", serif;
      font-size:clamp(52px,8vw,98px); line-height:.88; margin:0; letter-spacing:-.055em;
      max-width:760px;
    }
    .hero p{font-size:18px; line-height:1.65; color:var(--muted); max-width:660px; margin:24px 0 0}
    .stamp{
      justify-self:end; width:min(360px,100%); aspect-ratio:1;
      border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center;
      background:linear-gradient(145deg,var(--corn),#ffd968);
      box-shadow:10px 10px 0 var(--ink);
      transform:rotate(4deg); padding:38px; text-align:center;
    }
    .stamp strong{font-family:Georgia,serif; font-size:42px; line-height:.9; display:block}
    .stamp small{display:block; margin-top:14px; font-weight:900; letter-spacing:.15em; text-transform:uppercase}
    .panel{
      background:rgba(255,250,240,.86);
      border:2px solid var(--ink); border-radius:var(--radius);
      box-shadow:var(--shadow), 7px 7px 0 var(--ink);
      overflow:hidden;
    }
    .tabs{display:flex; gap:8px; padding:14px; background:rgba(255,255,255,.42); border-bottom:2px solid var(--ink)}
    .tab{
      border:1.5px solid var(--ink); border-radius:999px; padding:10px 14px;
      background:transparent; font-weight:900;
    }
    .tab.active{background:var(--ink); color:white}
    .calculator{padding:24px}
    .grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
    label{display:block; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px}
    .field{min-width:0}
    input,select{
      width:100%; border:1.5px solid var(--ink); background:#fffefa; color:var(--ink);
      border-radius:14px; padding:15px 14px; outline:none;
      box-shadow:inset 0 -2px 0 rgba(32,32,21,.06);
    }
    input:focus,select:focus{box-shadow:0 0 0 4px rgba(246,201,69,.35)}
    .accuracy{margin-top:22px; padding:16px; border:1.5px dashed var(--line); border-radius:16px}
    .accuracy-head{display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px}
    .accuracy-head b{font-size:14px}
    .accuracy-head span{font-size:13px; color:var(--leaf-dark); font-weight:900}
    input[type="range"]{padding:0; border:0; box-shadow:none; accent-color:var(--leaf); background:transparent}
    .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
    .btn{
      border:2px solid var(--ink); border-radius:14px; padding:13px 16px; font-weight:900;
      background:var(--corn); box-shadow:3px 3px 0 var(--ink);
    }
    .btn.secondary{background:#fffefa}
    .btn.ghost{background:transparent; box-shadow:none; border-color:var(--line); color:var(--muted)}
    .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
    .results{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:18px}
    .result-main,.result-chain{
      border:1.5px solid var(--ink); border-radius:18px; background:#fffefa; padding:20px;
    }
    .eyebrow{font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
    .big-result{
      font-family:Georgia,serif; font-size:clamp(34px,5vw,64px); line-height:1;
      margin:9px 0 6px; overflow-wrap:anywhere;
    }
    .subresult{font-weight:800; color:var(--leaf-dark); line-height:1.45}
    .verdict{margin-top:16px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-style:italic}
    .chain{display:grid; gap:10px; margin-top:14px}
    .chain-row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dotted var(--line); padding-bottom:9px}
    .chain-row:last-child{border:0}
    .chain-row span:first-child{color:var(--muted)}
    .chain-row strong{text-align:right}
    .section{padding:68px 0 20px}
    .section h2{font-family:Georgia,serif; font-size:clamp(34px,5vw,58px); margin:0 0 8px; letter-spacing:-.04em}
    .section p.lede{margin:0 0 24px; color:var(--muted); max-width:720px; line-height:1.6}
    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .card{
      padding:18px; border:1.5px solid var(--line); background:rgba(255,250,240,.65); border-radius:18px;
    }
    .card .icon{font-size:28px}
    .card h3{margin:10px 0 5px; font-size:17px}
    .card p{margin:0; color:var(--muted); line-height:1.5; font-size:14px}
    .constants{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    .constant-table{border:1.5px solid var(--ink); border-radius:18px; overflow:hidden; background:#fffefa}
    .constant-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
    .constant-row:last-child{border:0}
    .constant-row span{color:var(--muted)}
    .why{
      border:2px solid var(--ink); border-radius:18px; padding:24px; background:var(--leaf); color:white;
      display:flex; flex-direction:column; justify-content:space-between; min-height:280px;
    }
    .why h3{font-family:Georgia,serif; font-size:42px; margin:0}
    .why button{align-self:flex-start}
    .why-answer{font-size:26px; font-weight:900; margin-top:24px; min-height:62px}
    footer{padding:64px 0 34px; color:var(--muted); text-align:center; font-size:13px}
    .toast{
      position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
      background:var(--ink); color:white; padding:11px 15px; border-radius:999px; font-weight:800;
      transition:.2s ease; z-index:5;
    }
    .toast.show{opacity:1; transform:translate(-50%,0)}
    @media(max-width:820px){
      .hero{grid-template-columns:1fr; padding-top:34px}
      .stamp{justify-self:start; width:220px}
      .stamp strong{font-size:28px}
      .grid{grid-template-columns:1fr}
      .results{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
      .constants{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      header{align-items:flex-start}
      .tag{display:none}
      .wrap{width:min(100% - 20px,1120px)}
      .calculator{padding:15px}
      .cards{grid-template-columns:1fr}
      .tabs{overflow:auto}
      .tab{white-space:nowrap}
      .hero{padding-top:24px}
      h1{font-size:58px}
    }