:root{font-family:"Instrument Sans",Arial,sans-serif;color:#202c25;background:#f6f6f0;--green:#1d4936;--line:#dce3d9;--muted:#506357}
*{box-sizing:border-box}body{margin:0}header{border-bottom:1px solid var(--line);background:#fff}.wrap{width:min(1200px,calc(100% - 48px));margin:auto}.brand{display:flex;align-items:center;gap:19px;padding:20px 0}.brand b{color:var(--green);letter-spacing:.11em;font-size:13px}.brand span{border-left:1px solid var(--line);padding-left:18px;color:var(--muted);font-size:14px}.hero{margin-top:30px;border-radius:23px;background:#173e2e;color:white;padding:34px 42px;display:flex;gap:16px;align-items:center;justify-content:space-between}.hero h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(36px,6vw,62px);letter-spacing:-.055em;margin:0 0 9px}.hero p{margin:0;color:#dce9df;line-height:1.55}.count{white-space:nowrap;border:1px solid #6e9b82;border-radius:30px;padding:9px 14px;color:#edf6ee;font-size:13px}.context{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:19px 0;background:#e9efe6;padding:17px 20px;border-radius:16px}
label,.search-label{display:grid;gap:7px;font-size:13px;font-weight:bold}input,textarea{width:100%;font:inherit;font-weight:400;color:inherit;border:1px solid #ccd8cb;border-radius:9px;background:#fff;padding:11px 12px;min-width:0}textarea{resize:vertical}input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #4d8865;outline-offset:2px}
.workspace{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start;padding-bottom:32px}aside,.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}aside input{margin:7px 0 4px}nav h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:17px 0 5px}button{cursor:pointer;font:inherit;border:0;border-radius:8px;padding:9px 12px;background:#eef3eb;color:var(--green)}button:disabled{opacity:.55;cursor:wait}nav button{display:block;width:100%;text-align:left;background:transparent;font-size:14px;margin:2px 0}nav button:hover,nav button[aria-current=true]{background:#e8f1e7}nav button[aria-current=true]{font-weight:700}.panel{padding:30px}.panel-head{border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:20px}small{font-weight:bold;color:var(--green);text-transform:uppercase;letter-spacing:.09em}.panel h2{margin:8px 0;font:500 clamp(28px,4vw,42px)/1.1 Georgia,serif;letter-spacing:-.035em}.panel p{color:var(--muted);margin:0;line-height:1.55}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wide{grid-column:1/-1}.optional{color:var(--muted);font-weight:400}#code-field{margin-top:17px;max-width:310px}.actions,.result-head{display:flex;align-items:center;gap:14px;margin-top:20px}.primary{background:var(--green);color:#fff;font-weight:700;padding:12px 17px}.primary span{margin-left:10px}#status{font-size:13px;color:var(--muted)}#result{margin-top:24px;border-top:1px solid var(--line)}.result-head{justify-content:space-between}#output{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;background:#f6f8f3;padding:18px;border-radius:10px}#sources{overflow-wrap:anywhere;line-height:1.6}a{color:var(--green)}#practice{margin-top:18px}#practice button{margin-top:10px}[hidden]{display:none!important}
@media(max-width:760px){.wrap{width:calc(100% - 26px)}.hero{padding:25px 20px;margin-top:17px}.workspace{grid-template-columns:1fr}nav{max-height:210px;overflow:auto}.panel{padding:19px}.context{gap:9px;padding:12px}.context input{padding:9px 6px}}
@media(max-width:450px){.context,.fields{grid-template-columns:1fr}.count{display:none}}