@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
  @font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}
  @font-face{font-family:"Fraunces";font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-var.woff2") format("woff2-variations")}
  :root{
    --bone:#F2ECE1;
    --bone-2:#E9E1D2;
    --ink:#1B1813;
    --ink-soft:#4A443A;
    --brass:#A6763C;
    --brass-deep:#8A5E2B;
    --steel:#5E6B70;
    --line:#CBC0AC;
    --line-soft:#DAD1BF;
    --paper:#FBF8F1;
    --ok:#3E6B4F;
    --shadow:0 1px 0 rgba(27,24,19,.04), 0 12px 32px -16px rgba(27,24,19,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--ink);
    font-family:"Inter",Arial,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(circle at 18% 8%, rgba(166,118,60,.06), transparent 42%),
      radial-gradient(circle at 92% 96%, rgba(94,107,112,.06), transparent 46%);
    min-height:100vh;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}

  /* header */
  header{padding:34px 0 18px;border-bottom:1px solid var(--line)}
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
  .brand{display:flex;align-items:baseline;gap:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .brand .mark{font-weight:700;letter-spacing:.32em;font-size:13px;color:var(--ink)}
  .brand .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);display:inline-block;transform:translateY(-1px)}
  .brand .sub{font-size:11px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase}
  .langtoggle{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .langtoggle a{text-decoration:none;display:inline-block}
  .langtoggle a,.langtoggle button{
    background:transparent;border:none;cursor:pointer;padding:7px 13px;
    font-size:12px;letter-spacing:.12em;color:var(--ink-soft);font-family:inherit;
    transition:background .2s,color .2s;
  }
  .langtoggle a.active,.langtoggle button.active{background:var(--ink);color:var(--paper)}

  .hero{padding:46px 0 30px}
  .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:18px}
  h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(34px,5.4vw,62px);line-height:1.02;letter-spacing:-.01em;max-width:15ch}
  h1 em{font-style:italic;color:var(--brass-deep)}
  .lede{margin-top:20px;max-width:60ch;font-size:17px;color:var(--ink-soft)}

  /* caliper rule */
  .caliper{height:26px;margin:30px 0 0;position:relative;border-top:1px solid var(--line)}
  .caliper span{position:absolute;top:0;width:1px;background:var(--line);height:7px}
  .caliper span.tall{height:13px;background:var(--ink-soft)}

  /* tool card */
  .tool{
    margin-top:40px;background:var(--paper);border:1px solid var(--line);
    border-radius:4px;box-shadow:var(--shadow);overflow:hidden;
  }
  .tool-head{padding:22px 28px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px}
  .tool-head .idx{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--brass-deep);letter-spacing:.1em}
  .tool-head h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:22px}
  .tool-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
  @media(max-width:760px){.tool-body{grid-template-columns:1fr}}
  .pane{padding:30px 28px}
  .pane.input{border-right:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(233,225,210,.35),transparent)}
  @media(max-width:760px){.pane.input{border-right:none;border-bottom:1px solid var(--line-soft)}}

  label.fld{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}

  .lugwidths{display:flex;flex-wrap:wrap;gap:8px}
  .lugwidths button{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:500;
    background:var(--paper);border:1px solid var(--line);color:var(--ink);
    padding:11px 0;width:60px;border-radius:3px;cursor:pointer;
    transition:all .16s ease;position:relative;
  }
  .lugwidths button:hover{border-color:var(--brass);color:var(--brass-deep);transform:translateY(-1px)}
  .lugwidths button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .lugwidths button.odd::after{content:"·";position:absolute;top:2px;right:6px;color:var(--brass);font-weight:700}

  .customrow{margin-top:18px;display:flex;align-items:center;gap:10px}
  .customrow input{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;width:96px;
    padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);
  }
  .customrow input:focus{outline:none;border-color:var(--brass)}
  .customrow span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-soft)}

  .hint{margin-top:22px;font-size:13px;color:var(--ink-soft);padding-top:18px;border-top:1px dashed var(--line)}
  .hint b{color:var(--ink);font-weight:600}

  /* readout */
  .readout .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .readout .row:last-child{border-bottom:none}
  .readout .k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);max-width:54%}
  .readout .v{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:500;text-align:right}
  .readout .v small{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:400;color:var(--ink-soft);letter-spacing:.06em}
  .readout .v .note{display:block;font-family:"Inter",Arial,sans-serif;font-size:12.5px;font-weight:400;color:var(--brass-deep);margin-top:3px;font-style:normal}
  .taperchips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:4px}
  .taperchips b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:500;background:var(--bone-2);border:1px solid var(--line);padding:3px 8px;border-radius:2px;color:var(--ink)}
  .empty{color:var(--ink-soft);font-style:italic;font-family:"Fraunces",Georgia,serif;font-size:18px;padding:18px 0}

  /* secondary: wrist */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
  @media(max-width:760px){.grid2{grid-template-columns:1fr}}
  .panel{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:26px 24px;box-shadow:var(--shadow)}
  .panel h3{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:19px;margin-bottom:4px}
  .panel .psub{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
  .wrist-out{font-family:"Fraunces",Georgia,serif;font-size:30px;font-weight:500;margin-top:14px;min-height:38px}
  .wrist-out span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink-soft);letter-spacing:.04em}
  .slider{width:100%;margin-top:8px;accent-color:var(--brass)}
  .sliderval{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--brass-deep);font-weight:500}

  /* tables */
  .ref{margin-top:48px}
  .ref h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:26px;margin-bottom:6px}
  .ref .rsub{color:var(--ink-soft);font-size:15px;margin-bottom:22px;max-width:62ch}
  table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;font-size:14px}
  th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
  th{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);background:var(--bone-2)}
  td{font-family:"Inter",Arial,sans-serif}
  td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:rgba(166,118,60,.04)}

  .measure{margin-top:48px;background:var(--ink);color:var(--bone);border-radius:4px;padding:38px 34px;box-shadow:var(--shadow)}
  .measure h2{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:24px;color:var(--paper);margin-bottom:20px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media(max-width:760px){.steps{grid-template-columns:1fr}}
  .step .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--brass);letter-spacing:.1em;border:1px solid rgba(166,118,60,.5);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:13px}
  .step h4{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:17px;color:var(--paper);margin-bottom:6px}
  .step p{font-size:13.5px;color:#C9C0B0;line-height:1.5}

  footer{margin:54px 0 40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  footer .fnote{font-size:12.5px;color:var(--ink-soft);max-width:62ch}
  footer .fbrand{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.2em;color:var(--ink)}
  footer a{color:var(--brass-deep);text-decoration:none;border-bottom:1px solid var(--line)}

  /* load anim */
  .fade{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.22s}.d4{animation-delay:.32s}
  @media (max-width:600px){.ref table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}