:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172520;background:#f7f8f7;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}code,pre,textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.shell{max-width:1250px;margin:auto;padding:0 38px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8e0dc}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:700;letter-spacing:-.01em}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:#143e2f;color:#fff;font-family:ui-monospace,monospace;font-size:12px;font-weight:600}.local-badge{font-size:12px;font-weight:600;color:#135038;background:#e0f1e7;border-radius:99px;padding:8px 11px}.intro{padding:66px 0 44px;max-width:900px}.context{font-size:13px;color:#426651;font-weight:700;margin:0 0 18px}h1{font-size:clamp(38px,4.5vw,62px);line-height:1.08;letter-spacing:-.035em;margin:0;font-weight:730;text-wrap:balance}.lead{font-size:16px;line-height:1.6;color:#425c4d;margin:24px 0 0;max-width:65ch}.lead code{font-size:.93em;color:#1b4937;background:#e9efeb;padding:2px 5px;border-radius:3px}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ccd7d0;border-radius:12px;overflow:hidden;background:#fff}.pane{min-width:0;display:flex;flex-direction:column}.pane+.pane{border-left:1px solid #ccd7d0}.pane-heading,.pane-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 19px}.pane-heading{border-bottom:1px solid #e1e8e3;min-height:58px}.pane-heading label{font-size:14px;font-weight:700}.pane-heading span,.pane-footer span{font-size:12px;color:#4a5f52}.output-pane .pane-heading span{color:#286a46;font-weight:600}textarea{display:block;resize:vertical;border:0;outline:0;width:100%;min-height:330px;padding:21px 19px;background:#fff;color:#20352a;font-size:12.5px;line-height:1.7;overflow-wrap:anywhere}.output-pane textarea{background:#fafcfb}textarea::placeholder{color:#607568}textarea:focus-visible{box-shadow:inset 0 0 0 2px #267e52}.pane-footer{border-top:1px solid #e1e8e3;min-height:70px}.text-button{border:0;background:transparent;color:#246b47;font-size:13px;font-weight:700;padding:8px 0}.text-button:hover{text-decoration:underline}.primary-button{border:0;border-radius:7px;padding:11px 17px;background:#165a3d;color:#fff;font-size:13px;font-weight:700;white-space:nowrap}.primary-button:hover:not(:disabled){background:#0e4730}.primary-button:disabled{background:#bdcdc2;color:#30483a}.primary-button:focus-visible,.text-button:focus-visible{outline:3px solid #72b98d;outline-offset:2px}.how{padding:40px 0 48px;max-width:760px}.how h2{font-size:21px;letter-spacing:-.02em;margin:0 0 10px}.how p{color:#43594a;line-height:1.65;font-size:14px;margin:0 0 17px}.how code{font-size:.9em}.how pre{padding:18px 20px;border-radius:8px;background:#e9efeb;color:#1c3c2a;overflow-x:auto;line-height:1.6;font-size:12px;margin:0 0 14px}.how .note{font-size:12px;color:#53695a}footer{border-top:1px solid #d8e0dc;padding:22px 0 32px;color:#64776a;font-size:12px}@media(max-width:760px){.shell{padding:0 18px}.topbar{height:65px}.intro{padding:45px 0 30px}.lead{font-size:14px}.workspace{grid-template-columns:1fr}.pane+.pane{border-left:0;border-top:1px solid #ccd7d0}textarea{min-height:220px}.pane-heading,.pane-footer{padding:14px}.pane-footer{align-items:flex-start}.pane-footer span{line-height:1.45}.how{padding:34px 0}.local-badge{font-size:10px}}