:root{
    --paper:#F2EEE2;
    --paper-2:#FBFAF3;
    --ink:#13302A;
    --ink-soft:#516159;
    --ink-faint:#8A968E;
    --accent:#0FA896;        /* liquid teal */
    --accent-deep:#0A7D70;
    --accent-2:#E0703A;      /* warm coral */
    --line:rgba(19,48,42,.13);
    --line-soft:rgba(19,48,42,.07);
    --warn-bg:#FBEFE6;
    --warn-ink:#9C4A1E;
    --shadow:0 1px 2px rgba(19,48,42,.05),0 18px 40px -22px rgba(19,48,42,.28);
    --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Hanken Grotesk",sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }
  /* atmosphere */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(620px 520px at 12% -8%, rgba(15,168,150,.13), transparent 60%),
      radial-gradient(680px 560px at 104% 8%, rgba(224,112,58,.10), transparent 55%),
      radial-gradient(900px 700px at 50% 120%, rgba(15,168,150,.06), transparent 60%);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  .wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:38px 22px 64px}

  /* ---------- header ---------- */
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;
    opacity:0;animation:rise .7s .05s cubic-bezier(.2,.7,.2,1) forwards}
  .brand{display:flex;align-items:center;gap:11px}
  .mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 6px 12px rgba(15,168,150,.28))}
  .word{font-family:"Fraunces",serif;font-weight:600;font-size:1.62rem;letter-spacing:-.02em;line-height:1}
  .word .mix{color:var(--accent-deep)}
  .word .pep{color:var(--ink)}
  .word .dot{color:var(--accent-2)}
  .tag{font-size:.72rem;color:var(--ink-soft);text-align:right;max-width:185px;line-height:1.35;letter-spacing:.01em}

  .hero{margin-bottom:26px;opacity:0;animation:rise .7s .14s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.7rem,5.4vw,2.55rem);line-height:1.05;letter-spacing:-.02em}
  .hero h1 em{font-style:italic;color:var(--accent-deep)}
  .hero p{margin-top:11px;color:var(--ink-soft);font-size:1.02rem;max-width:54ch}

  /* ---------- tabs ---------- */
  .tabs{display:flex;gap:6px;background:rgba(251,250,243,.72);border:1px solid var(--line);
    padding:6px;border-radius:14px;margin-bottom:22px;backdrop-filter:blur(6px);
    opacity:0;animation:rise .7s .22s cubic-bezier(.2,.7,.2,1) forwards}
  .tab{flex:1;border:none;background:transparent;font-family:inherit;font-weight:600;font-size:.93rem;
    color:var(--ink-soft);padding:11px 8px;border-radius:9px;cursor:pointer;transition:.22s;letter-spacing:.01em}
  .tab:hover{color:var(--ink)}
  .tab.on{background:var(--ink);color:var(--paper-2);box-shadow:0 6px 16px -8px rgba(19,48,42,.6)}

  /* ---------- card ---------- */
  .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden;
    opacity:0;animation:rise .7s .3s cubic-bezier(.2,.7,.2,1) forwards}
  .panel{display:none}
  .panel.on{display:block}
  .pad{padding:26px 26px 8px}

  .grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px}
  .grid .full{grid-column:1/-1}
  @media(max-width:540px){.grid{grid-template-columns:1fr}}

  .field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-soft);
    text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
  .inputrow{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;
    background:#fff;transition:.18s}
  .inputrow:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,168,150,.14)}
  .inputrow input{flex:1;min-width:0;border:none;outline:none;background:transparent;
    font-family:"JetBrains Mono",monospace;font-size:1.05rem;font-weight:500;color:var(--ink);
    padding:12px 13px;-moz-appearance:textfield}
  .inputrow input::-webkit-outer-spin-button,.inputrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .inputrow select{border:none;outline:none;background:var(--paper);font-family:inherit;font-weight:600;
    font-size:.86rem;color:var(--ink-soft);padding:0 30px 0 12px;cursor:pointer;border-left:1.5px solid var(--line);
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23516159' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center}
  .single input{padding-right:13px}

  .seg{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
  .seg button{flex:1;border:none;background:transparent;font-family:inherit;font-weight:600;font-size:.88rem;
    color:var(--ink-soft);padding:11px 8px;cursor:pointer;transition:.18s}
  .seg button+button{border-left:1.5px solid var(--line)}
  .seg button.on{background:var(--accent);color:#fff}

  /* ---------- results ---------- */
  .results{background:linear-gradient(180deg,rgba(15,168,150,.07),rgba(15,168,150,.02));
    border-top:1px solid var(--line);padding:24px 26px 26px;margin-top:20px}
  .hero-stat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
  .hero-stat .big{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:clamp(2.3rem,9vw,3.3rem);
    line-height:1;color:var(--accent-deep);letter-spacing:-.02em}
  .hero-stat .unit{font-family:"Fraunces",serif;font-style:italic;font-size:1.25rem;color:var(--ink-soft)}
  .hero-sub{font-size:.9rem;color:var(--ink-soft);margin-bottom:18px}
  .hero-sub b{color:var(--ink);font-weight:600}

  .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media(max-width:540px){.statgrid{grid-template-columns:1fr 1fr}}
  .stat{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:14px 15px}
  .stat .k{font-size:.71rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:6px}
  .stat .v{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.32rem;color:var(--ink);line-height:1.05}
  .stat .v small{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.72rem;color:var(--ink-soft);margin-left:3px}

  .note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:.84rem;line-height:1.45;
    background:var(--warn-bg);color:var(--warn-ink);border:1px solid rgba(156,74,30,.22);
    border-radius:11px;padding:11px 13px}
  .note svg{flex:none;margin-top:1px}
  .note.hide{display:none}

  /* ---------- chart ---------- */
  .chartwrap{padding:8px 18px 22px}
  .chartwrap canvas{width:100%;height:auto;display:block}
  .legend{display:flex;gap:18px;flex-wrap:wrap;padding:0 26px 4px;font-size:.8rem;color:var(--ink-soft)}
  .legend span{display:inline-flex;align-items:center;gap:7px}
  .legend i{width:16px;height:3px;border-radius:2px;display:inline-block}

  details.help{margin-top:22px;border:1px solid var(--line);border-radius:13px;background:var(--paper-2);
    opacity:0;animation:rise .7s .4s cubic-bezier(.2,.7,.2,1) forwards}
  details.help summary{cursor:pointer;list-style:none;font-weight:600;font-size:.92rem;padding:15px 18px;
    display:flex;justify-content:space-between;align-items:center}
  details.help summary::-webkit-details-marker{display:none}
  details.help summary::after{content:"+";font-family:"JetBrains Mono",monospace;font-size:1.2rem;color:var(--accent-deep);transition:.2s}
  details.help[open] summary::after{transform:rotate(45deg)}
  details.help .body{padding:0 18px 18px;font-size:.9rem;color:var(--ink-soft);line-height:1.6}
  details.help .body code{font-family:"JetBrains Mono",monospace;font-size:.84em;background:var(--paper);padding:1px 6px;border-radius:5px;color:var(--accent-deep)}
  details.help .body p{margin-bottom:9px}
  details.help .body strong{color:var(--ink)}

  footer{margin-top:30px;font-size:.78rem;color:var(--ink-faint);line-height:1.55;text-align:center;
    opacity:0;animation:rise .7s .48s cubic-bezier(.2,.7,.2,1) forwards}
  footer .disc{background:rgba(251,250,243,.6);border:1px solid var(--line-soft);border-radius:12px;
    padding:14px 16px;margin-bottom:16px;color:var(--ink-soft);text-align:left}
  footer .disc b{color:var(--ink)}
  footer a{color:var(--accent-deep);text-decoration:none;font-weight:600}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important}}

  /* ---------- landing / guide pages ---------- */
  .breadcrumb{font-size:.82rem;color:var(--ink-soft);margin-bottom:18px;
    opacity:0;animation:rise .7s .12s cubic-bezier(.2,.7,.2,1) forwards}
  .breadcrumb a{color:var(--accent-deep);text-decoration:none;font-weight:600}
  .breadcrumb a:hover{text-decoration:underline}
  .breadcrumb span{color:var(--ink-faint);margin:0 7px}

  .article{opacity:0;animation:rise .7s .2s cubic-bezier(.2,.7,.2,1) forwards}
  .article h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.8rem,5.6vw,2.7rem);
    line-height:1.04;letter-spacing:-.02em;margin-bottom:14px}
  .article h1 em{font-style:italic;color:var(--accent-deep)}
  .article .lede{font-size:1.08rem;color:var(--ink-soft);max-width:60ch;margin-bottom:22px}
  .article h2{font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem;letter-spacing:-.01em;
    margin:34px 0 12px}
  .article p{margin-bottom:13px;color:var(--ink);max-width:64ch}
  .article p.muted{color:var(--ink-soft)}
  .article ul,.article ol{margin:0 0 14px 22px;color:var(--ink)}
  .article li{margin-bottom:7px;max-width:62ch}
  .article code{font-family:"JetBrains Mono",monospace;font-size:.86em;background:var(--paper-2);
    border:1px solid var(--line-soft);padding:1px 7px;border-radius:6px;color:var(--accent-deep)}
  .article strong{font-weight:700}

  .cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper-2);
    font-family:inherit;font-weight:600;font-size:1rem;text-decoration:none;padding:14px 22px;
    border-radius:12px;box-shadow:0 10px 24px -12px rgba(19,48,42,.7);transition:.2s;margin:6px 0 4px}
  .cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(19,48,42,.7)}
  .cta svg{transition:.2s}
  .cta:hover svg{transform:translateX(3px)}

  .formula{background:linear-gradient(180deg,rgba(15,168,150,.08),rgba(15,168,150,.02));
    border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:8px 0 16px}
  .formula .eq{font-family:"JetBrains Mono",monospace;font-size:1.05rem;font-weight:500;color:var(--ink);
    line-height:1.7}
  .formula .eq b{color:var(--accent-deep)}

  .example{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
    padding:18px 20px;margin:8px 0 16px}
  .example .tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--accent-2);margin-bottom:8px}
  .example .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
    border-bottom:1px dashed var(--line);font-size:.95rem}
  .example .row:last-child{border-bottom:none;font-weight:700}
  .example .row span:last-child{font-family:"JetBrains Mono",monospace;color:var(--accent-deep)}

  .faq{margin-top:8px}
  .faq details{border-bottom:1px solid var(--line);padding:4px 0}
  .faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem;padding:14px 30px 14px 0;
    position:relative;color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:2px;top:13px;font-family:"JetBrains Mono",monospace;
    font-size:1.3rem;color:var(--accent-deep);transition:.2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .ans{padding:0 0 16px;color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:64ch}

  .related{margin-top:38px;border-top:1px solid var(--line);padding-top:22px}
  .related h2{font-family:"Fraunces",serif;font-weight:600;font-size:1.2rem;margin-bottom:14px}
  .guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:540px){.guide-grid{grid-template-columns:1fr}}
  .guide-card{display:block;text-decoration:none;background:var(--paper-2);border:1px solid var(--line);
    border-radius:13px;padding:15px 16px;transition:.2s}
  .guide-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
  .guide-card .gt{font-weight:700;color:var(--ink);font-size:.98rem;margin-bottom:3px}
  .guide-card .gd{font-size:.83rem;color:var(--ink-soft);line-height:1.4}