:root{
    --paper: #EFF1EC;
    --paper-raised: #FFFFFF;
    --ink: #1E2A38;
    --ink-soft: #4B5A67;
    --muted: #6E7A78;
    --line: #D7DAD3;
    --stamp: #A13D3D;
    --stamp-soft: #F3E4E1;
    --verified: #2F6E58;
    --verified-soft: #E4EEE8;
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  .num-face{font-family:'IBM Plex Mono', monospace;}
  .page{
    max-width:640px;
    margin:0 auto;
    padding:48px 20px 80px;
  }
  .eyebrow{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--stamp);
    background:var(--stamp-soft);
    padding:5px 10px;
    border-radius:5px;
    margin-bottom:16px;
  }
  h1{
    font-size:clamp(26px,4.4vw,36px);
    line-height:1.15;
    margin:0 0 12px;
    letter-spacing:-0.01em;
  }
  .sub{
    color:var(--ink-soft);
    font-size:16px;
    max-width:46ch;
    margin:0 0 32px;
  }
  .sub strong{color:var(--ink); font-weight:600;}

  .presets{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
  }
  .chip{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:14px;
    font-weight:500;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper-raised);
    color:var(--ink-soft);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .chip:hover{border-color:var(--ink-soft);}
  .chip.active{
    background:var(--ink);
    color:var(--paper-raised);
    border-color:var(--ink);
  }

  .custom-fields{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    margin-bottom:20px;
  }
  .custom-fields label{
    font-size:12px;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    gap:5px;
    flex:1;
    min-width:90px;
  }
  .custom-fields input{
    font-family:'IBM Plex Mono', monospace;
    font-size:15px;
    padding:8px 9px;
    border-radius:8px;
    border:1px solid var(--line);
    color:var(--ink);
    background:var(--paper);
  }
  .custom-fields input:focus{outline:2px solid var(--ink); outline-offset:1px;}

  .preset-note{
    font-size:13px;
    color:var(--muted);
    margin:0 0 26px;
  }

  .dropzone{
    background:var(--paper-raised);
    border:2px dashed var(--line);
    border-radius:var(--radius);
    padding:40px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--ink);
    background:#FBFBFA;
  }
  .dropzone:focus-visible{outline:3px solid var(--ink); outline-offset:3px;}
  .dz-inner svg{margin-bottom:10px; opacity:.55;}
  .dz-title{font-size:16px; font-weight:500; margin:0 0 4px;}
  .dz-hint{font-size:13px; color:var(--muted); margin:0;}

  .result{
    margin-top:28px;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 20px 20px;
    text-align:center;
  }
  .gauge-wrap{position:relative; width:220px; margin:0 auto;}
  #gauge{display:block; width:100%; height:auto;}
  #needleGroup{
    transform-origin:110px 110px;
    transform:rotate(-90deg);
    transition:transform 1.1s cubic-bezier(.2,.9,.25,1);
  }
  .gauge-readout{
    position:absolute;
    left:0; right:0; bottom:6px;
    text-align:center;
  }
  .gauge-value{
    font-family:'IBM Plex Mono', monospace;
    font-size:26px;
    font-weight:600;
  }
  .gauge-unit{
    font-size:12px;
    color:var(--muted);
    letter-spacing:.06em;
  }
  .target-line{
    font-size:13px;
    color:var(--muted);
    margin-top:6px;
  }
  .target-line .num-face{color:var(--ink-soft);}
  .diff-line{
    font-size:12.5px;
    color:var(--muted);
    margin:2px 0 0;
    opacity:0;
    transition:opacity .3s ease;
  }
  .diff-line.show{opacity:1;}

  .stamp-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--verified);
    background:var(--verified-soft);
    border:1px solid var(--verified);
    padding:6px 12px;
    border-radius:7px;
    margin-top:14px;
    transform:rotate(-3deg) scale(.85);
    opacity:0;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  }
  .stamp-badge.show{
    opacity:1;
    transform:rotate(-3deg) scale(1);
  }
  .stamp-badge.warn{
    color:var(--stamp);
    background:var(--stamp-soft);
    border-color:var(--stamp);
  }

  .btn-primary{
    display:inline-block;
    margin-top:18px;
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:600;
    font-size:15px;
    color:var(--paper-raised);
    background:var(--ink);
    border:none;
    padding:13px 26px;
    border-radius:9px;
    text-decoration:none;
    cursor:pointer;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .3s ease, transform .3s ease, background .15s ease;
    pointer-events:none;
  }
  .btn-primary.show{opacity:1; transform:translateY(0); pointer-events:auto;}
  .btn-primary:hover{background:var(--stamp);}

  .preview-thumb{
    width:88px; height:auto;
    border-radius:8px;
    border:1px solid var(--line);
    margin-bottom:16px;
    display:none;
  }
  .preview-thumb.show{display:inline-block;}

  .how{margin-top:56px;}
  .how h2{font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:600;}
  .how ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .how li{display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--ink-soft);}
  .how .step-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--stamp);
    background:var(--stamp-soft);
    width:26px; height:26px;
    flex-shrink:0;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .disclaimer{
    margin-top:36px;
    font-size:12.5px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:16px;
  }

  .privacy-note{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--muted);
    margin-top:14px;
  }

  @media (max-width:480px){
    .page{padding:32px 16px 60px;}
    .custom-fields label{min-width:80px;}
  }

  @media (prefers-reduced-motion: reduce){
    #needleGroup, .stamp-badge, .btn-primary{transition:none !important;}
  }

  .tips{margin-top:40px;}
  .tips h2{font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600;}
  .tips ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:15px; display:flex; flex-direction:column; gap:8px;}

  .doc-links{
    margin-top:32px;
    font-size:13px;
    color:var(--muted);
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    align-items:center;
  }
  .doc-links a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line);}
  .doc-links a:hover{color:var(--stamp); border-color:var(--stamp);}