:root{
    --white:#fff; --ink:#0a0a0a; --ink-2:#3d3d3d; --ink-3:#707070; --hair:#e6e6e6; --wash:#f6f6f6;
    --green:#008060; --green-deep:#00654c; --green-ink:#fff; --red:#b42318;
    --w:1040px; --pad:24px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
    --body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --display:"Inter Tight",var(--body);
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{color-scheme:light}
  body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,p,ul{margin:0} ul{padding:0;list-style:none}
  .wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad)}
  :focus-visible{outline:2px solid var(--green);outline-offset:2px}

  header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:10px;font:600 16px/1 var(--body);letter-spacing:-.01em}
  .brand svg{width:22px;height:22px;display:block}
  .brand small{font:500 13px/1 var(--body);color:var(--ink-3);margin-left:4px}
  nav{display:flex;gap:24px;font:500 14px/1 var(--body);color:var(--ink-2)} nav a:hover{color:var(--ink)}

  .hero{padding:var(--s5) 0 var(--s4)}
  h1{font:700 clamp(32px,4.6vw,48px)/1.05 var(--display);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
  .lede{margin-top:var(--s2);max-width:60ch;font-size:18px;color:var(--ink-2)}

  /* tool: two columns, one edge */
  .tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start;padding-bottom:var(--s5)}
  @media (max-width:860px){.tool{grid-template-columns:1fr}}
  label{display:block;font:500 13px/1 var(--body);color:var(--ink-2);margin:0 0 6px}
  .f{margin-bottom:var(--s2)}
  select,input,textarea{width:100%;font:400 15px/1.4 var(--body);color:var(--ink);background:var(--white);border:1px solid #cfcfcf;border-radius:6px;padding:10px 12px}
  select:focus,input:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(0,128,96,.15)}
  textarea{min-height:88px;resize:vertical}
  .hint{font:400 12px/1.4 var(--body);color:var(--ink-3);margin-top:4px}
  .err{color:var(--red);font:500 13px/1.4 var(--body);margin-top:6px;display:none}
  .f.bad input,.f.bad textarea{border-color:var(--red)}
  .f.bad .err{display:block}
  .btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:6px;background:var(--green);color:var(--green-ink);font:600 14px/1 var(--body);cursor:pointer}
  .btn:hover{background:var(--green-deep)} .btn:disabled{opacity:.5;cursor:default}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid #cfcfcf} .btn.ghost:hover{border-color:var(--ink);background:transparent}
  .actions{display:flex;gap:12px;align-items:center;margin-top:var(--s3)}

  .out{position:sticky;top:24px}
  .out .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .out .bar span{font:500 13px/1 var(--body);color:var(--ink-3)}
  .status{font:500 13px/1 var(--body);display:inline-flex;align-items:center;gap:6px}
  .status.ok{color:var(--green)} .status.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
  pre{margin:0;background:var(--ink);color:#e8e8e8;font:400 13px/1.55 var(--mono);padding:16px;border-radius:8px;overflow:auto;min-height:280px;white-space:pre}
  pre .k{color:#9ad9c2} pre .s{color:#ffd28a}
  .empty{color:#8a8a8a}
  .copy{margin-top:10px;display:flex;gap:10px}

  section.s{padding:var(--s6) 0 0}
  h2{font:700 clamp(24px,3vw,30px)/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance}
  .sub{margin-top:8px;color:var(--ink-3);max-width:60ch}
  .prose{margin-top:var(--s3);max-width:68ch;color:var(--ink-2)} .prose p+p{margin-top:var(--s2)}
  .prose code{font:500 .92em var(--mono);background:var(--wash);padding:.1em .35em;border-radius:4px;color:var(--ink)}

  /* Pro: a plain row, not a card */
  .pro{margin-top:var(--s4);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:var(--s3) 0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4);align-items:center}
  @media (max-width:860px){.pro{grid-template-columns:1fr}}
  .pro h3{font:600 20px/1.3 var(--display);letter-spacing:-.02em}
  .pro p{margin-top:6px;color:var(--ink-2);max-width:52ch}
  .pro .price{font:700 28px/1 var(--display);letter-spacing:-.03em;margin-top:10px} .pro .price small{font:500 13px/1 var(--body);color:var(--ink-3);letter-spacing:0;margin-left:6px}
  .pro form{display:flex;gap:10px} .pro input{height:42px}
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .plan{display:block;border:1px solid var(--hair);border-radius:10px;padding:12px 14px;cursor:pointer}
  .plan:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
  .plan input{position:absolute;opacity:0;pointer-events:none}
  .plan b{display:block;font:700 22px/1 var(--display);letter-spacing:-.03em}
  .plan span{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)}
  .plan em{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-top:2px}
  .pro .fine{font:400 12px/1.5 var(--body);color:var(--ink-3);margin-top:8px}

  /* schema type reference rows */
  .types{margin-top:var(--s3)}
  .type-row{padding:var(--s3) 0;border-top:1px solid var(--hair)}
  .type-row:last-child{border-bottom:1px solid var(--hair)}
  .type-row h3{font:600 18px/1.3 var(--display);letter-spacing:-.02em}
  .type-row p{margin-top:6px;color:var(--ink-2);max-width:68ch}
  .type-row .meta{margin-top:8px;font-size:14px;color:var(--ink-3);max-width:68ch}
  .type-row .meta strong{color:var(--ink-2);font-weight:600}

  /* FAQ accordion */
  .faq{margin-top:var(--s3)}
  .faq details{border-top:1px solid var(--hair);padding:var(--s2) 0}
  .faq details:last-child{border-bottom:1px solid var(--hair)}
  .faq summary{cursor:pointer;font:600 16px/1.4 var(--display);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--ink-3);font:400 20px/1 var(--body);flex:none}
  .faq details[open] summary::after{content:"\2212"}
  .faq .a{margin-top:8px;color:var(--ink-2);max-width:60ch}

  footer{margin-top:var(--s6);border-top:1px solid var(--hair);padding:var(--s3) 0 var(--s4);font:400 13px/1.6 var(--body);color:var(--ink-3)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} footer a:hover{color:var(--ink)}

  /* converter additions */
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:520px){.row2{grid-template-columns:1fr}}
  textarea.code{font:400 13px/1.55 var(--mono);min-height:280px;white-space:pre;overflow:auto;resize:vertical}
  textarea.code#output{background:var(--ink);color:#e8e8e8;border-color:var(--ink)}
  textarea.code#output:focus{box-shadow:0 0 0 3px rgba(0,128,96,.3)}
  .warnH{margin-top:var(--s3);font:600 14px/1 var(--body);color:var(--ink-2)}
  .warns{margin-top:8px}
  .warns li{font:400 13px/1.5 var(--body);color:var(--ink-2);padding:6px 0;border-top:1px solid var(--hair)}
  .warns li:last-child{border-bottom:1px solid var(--hair)}
  .warns li b{font-weight:600;color:var(--ink);font-family:var(--mono);font-size:12px;margin-right:6px}
  .fmt{margin-top:var(--s3);width:100%;border-collapse:collapse;font-size:14px}
  .fmt th,.fmt td{text-align:left;padding:10px 8px;border-top:1px solid var(--hair);vertical-align:top}
  .fmt th{font:600 13px/1.4 var(--body);color:var(--ink-3)}
  .fmt tr:last-child td{border-bottom:1px solid var(--hair)}
  .fmt code{font:500 .92em var(--mono);background:var(--wash);padding:.1em .35em;border-radius:4px}
  .pairs{margin-top:var(--s3);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
  .pairs a{display:block;border:1px solid var(--hair);border-radius:8px;padding:14px 16px;font:500 14px/1.4 var(--body)}
  .pairs a:hover{border-color:var(--ink)}
  .pairs a span{display:block;margin-top:4px;font:400 13px/1.4 var(--body);color:var(--ink-3)}
  .tablewrap{overflow-x:auto}