:root{
    --paper: #E9E4D6;
    --paper-dark: #DFD9C8;
    --folder: #D7CEB4;
    --ink: #23271F;
    --ink-soft: #55584C;
    --stamp-red: #A9291E;
    --seal-navy: #1E3350;
    --gold: #93701F;
    --line: #B9AE8E;
    --card: #F4F0E4;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    background-image:
      linear-gradient(var(--paper-dark) 1px, transparent 1px);
    background-size: 100% 42px;
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  .wrap{max-width:760px; margin:0 auto; padding:0 24px 120px;}

  /* ---------- Header ---------- */
  header.top{
    max-width:760px; margin:0 auto; padding:36px 24px 0;
    display:flex; justify-content:space-between; align-items:flex-start;
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em;
    color:var(--ink-soft); text-transform:uppercase;
  }
  .file-tab{
    background:var(--folder); padding:6px 14px; border-radius:2px 2px 0 0;
    border:1px solid var(--line); border-bottom:none;
  }
  .stamp-mini{
    border:1.5px solid var(--stamp-red); color:var(--stamp-red);
    padding:5px 10px; transform:rotate(-3deg); border-radius:3px;
    font-weight:600;
  }

  .dossier{
    max-width:760px; margin:0 auto; background:var(--card);
    border:1px solid var(--line); border-top:none;
    box-shadow: 0 24px 50px -30px rgba(35,39,31,.45);
  }

  .hero{ padding:48px 40px 32px; border-bottom:1px dashed var(--line); }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
    color:var(--gold); text-transform:uppercase; margin:0 0 18px;
  }
  h1{
    font-family:'Special Elite', monospace;
    font-size:clamp(34px, 6vw, 52px);
    line-height:1.05; margin:0 0 18px; letter-spacing:-.01em;
  }
  .hero p{
    max-width:56ch; color:var(--ink-soft); font-size:16.5px; margin:0;
  }
  .hero p em{ color:var(--ink); font-style:normal; border-bottom:1px solid var(--gold); }

  /* ---------- toggle ---------- */
  .toggle-row{ padding:26px 40px 0; }
  .toggle{
    display:inline-flex; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden;
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.03em;
  }
  .toggle button{
    background:transparent; border:none; padding:10px 20px; cursor:pointer;
    color:var(--ink); font-family:inherit; font-size:inherit;
  }
  .toggle button.active{ background:var(--ink); color:var(--card); }

  /* ---------- form ---------- */
  form{ padding:30px 40px 10px; }
  .field{
    padding:22px 0; border-bottom:1px dotted var(--line);
    display:grid; grid-template-columns: 34px 1fr; gap:4px 16px;
  }
  .field:last-of-type{ border-bottom:none; }
  .num{
    font-family:'IBM Plex Mono', monospace; color:var(--gold); font-size:13px; padding-top:2px;
  }
  .field-head{
    grid-column:2; display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    margin-bottom:10px;
  }
  .field-label{ font-weight:600; font-size:15px; }
  .field-value{
    font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--stamp-red);
    white-space:nowrap; font-weight:500;
  }
  .field-control{ grid-column:2; }

  input[type=range]{
    -webkit-appearance:none; width:100%; height:2px; background:var(--line); outline:none; margin:14px 0 2px;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    background:var(--card); border:2.5px solid var(--stamp-red); cursor:pointer; margin-top:-7px;
  }
  input[type=range]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; background:var(--card);
    border:2.5px solid var(--stamp-red); cursor:pointer;
  }
  input[type=range]::-moz-range-track{ height:2px; background:var(--line); }

  .dual{ position:relative; height:24px; margin:14px 0 2px; }
  .dual-track{
    position:absolute; left:0; right:0; top:50%; height:2px; background:var(--line);
    transform:translateY(-50%); border-radius:2px;
  }
  .dual input[type=range]{
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:100%; margin:0; height:2px; background:transparent; pointer-events:none;
  }
  .dual input[type=range]::-webkit-slider-runnable-track{ background:transparent; }
  .dual input[type=range]::-moz-range-track{ background:transparent; }
  .dual input[type=range]::-webkit-slider-thumb{ pointer-events:auto; }
  .dual input[type=range]::-moz-range-thumb{ pointer-events:auto; }

  select{
    width:100%; padding:10px 12px; font-family:'IBM Plex Sans', sans-serif; font-size:14.5px;
    background:var(--paper); border:1px solid var(--line); border-radius:3px; color:var(--ink);
  }

  .switch-row{ display:flex; align-items:center; justify-content:space-between; }
  .switch{ position:relative; width:44px; height:24px; flex:none; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider-switch{
    position:absolute; inset:0; background:var(--line); border-radius:999px; cursor:pointer; transition:.15s;
  }
  .slider-switch:before{
    content:""; position:absolute; height:18px; width:18px; left:3px; top:3px;
    background:var(--card); border-radius:50%; transition:.15s;
  }
  input:checked + .slider-switch{ background:var(--stamp-red); }
  input:checked + .slider-switch:before{ transform:translateX(20px); }

  .submit-row{ padding:30px 40px 44px; }
  button.cta{
    width:100%; padding:16px 20px; background:var(--ink); color:var(--card); border:none;
    font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
    border-radius:3px; cursor:pointer; transition:transform .08s ease;
  }
  button.cta:active{ transform:scale(.985); }

  /* ---------- result ---------- */
  .result{
    padding:6px 40px 46px; border-top:1px dashed var(--line);
    display:none;
  }
  .result.show{ display:block; }
  .result-top{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; padding-top:34px; }
  .stamp{
    flex:none; width:150px; height:150px; border-radius:50%;
    border:3px double var(--stamp-red); color:var(--stamp-red);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transform:rotate(-7deg); text-align:center;
    animation: stampin .28s cubic-bezier(.2,1.4,.5,1);
  }
  @keyframes stampin{ from{ transform:rotate(-7deg) scale(1.6); opacity:0;} to{ transform:rotate(-7deg) scale(1); opacity:1;} }
  .stamp .tag{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.12em; }
  .stamp .pct{ font-family:'Special Elite', monospace; font-size:30px; line-height:1; margin:4px 0; }
  .result-copy{ flex:1; min-width:220px; }
  .result-copy .verdict{ font-family:'Special Elite', monospace; font-size:22px; margin:0 0 8px; }
  .result-copy p{ margin:0; color:var(--ink-soft); font-size:15px; }
  .result-copy strong{ color:var(--ink); }

  .pictogram-wrap{
    margin-top:30px; background:#1C1E17; border-radius:5px; padding:26px 24px 22px;
    position:relative;
  }
  .tape{
    position:absolute; top:-10px; width:52px; height:20px;
    background:rgba(233,228,214,.55); border:1px solid rgba(233,228,214,.35);
  }
  .tape-l{ left:26px; transform:rotate(-6deg); }
  .tape-r{ right:26px; transform:rotate(5deg); }
  .pictogram{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(11px, 1fr)); gap:4px;
  }
  .person{
    width:100%; aspect-ratio:10/14; background-color:#565C4C;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><circle cx='12' cy='7' r='7'/><path d='M12 16c-7.2 0-12 4.4-12 10.2V32h24v-5.8C24 20.4 19.2 16 12 16z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><circle cx='12' cy='7' r='7'/><path d='M12 16c-7.2 0-12 4.4-12 10.2V32h24v-5.8C24 20.4 19.2 16 12 16z'/></svg>");
    mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
    mask-position:center; -webkit-mask-position:center;
  }
  .person.on{ background-color:#E9D9A8; }
  .pictogram-caption{
    margin:18px 2px 0; color:#B9B6A4; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.02em;
  }

  /* ---------- faq ---------- */
  .faq{ padding:14px 40px 46px; border-top:1px dashed var(--line); }
  .faq h2{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold); margin:34px 0 20px;
  }
  details{ border-bottom:1px dotted var(--line); padding:14px 0; }
  details summary{ cursor:pointer; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
  details summary::-webkit-details-marker{ display:none; }
  details summary:after{ content:"+"; font-family:'IBM Plex Mono', monospace; color:var(--gold); flex:none; }
  details[open] summary:after{ content:"–"; }
  details p{ margin:12px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:60ch; }

  footer{
    max-width:760px; margin:26px auto 0; padding:0 40px;
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  @media (max-width:600px){
    header.top{ padding:24px 18px 0; }
    .hero, .toggle-row, form, .submit-row, .result, .faq{ padding-left:22px; padding-right:22px; }
    .field{ grid-template-columns:24px 1fr; }
    footer{ padding:0 22px; }
  }

  @media (prefers-reduced-motion: reduce){
    .stamp{ animation:none; }
  }