:root{color-scheme:light;--ink:#243d2d;--muted:#5b6e58;--green:#285a3e;--line:#d7dfcf;--paper:#fffef8;--bg:#f5f6ed;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;line-height:1.6}
*{box-sizing:border-box}body{margin:0}a{color:var(--green);text-underline-offset:4px}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #60804b;outline-offset:4px}.skip-link{position:absolute;top:-100px;left:20px}.skip-link:focus{top:10px;background:var(--paper);padding:12px;z-index:2}
.shell{width:min(1180px,calc(100% - 64px));margin:auto}.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:22px;font-weight:650;letter-spacing:-.5px}.mark{display:grid;place-items:center;width:34px;height:36px;border-radius:8px;background:var(--green);color:#f0f4e0;font:31px Georgia;padding-bottom:3px}.masthead>a:last-child{font-size:14px}.section-nav{display:flex;gap:8px;flex-wrap:wrap;padding:24px 0}.section-nav a{padding:8px 15px;border-radius:6px;text-decoration:none;font-size:15px}.section-nav a[aria-current=page]{background:var(--green);color:white}.section-nav a:hover{box-shadow:inset 0 0 0 1px var(--green)}
main{padding:28px 0 64px}.eyebrow{font:13px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin:0 0 14px}h1{font:normal clamp(34px,4.5vw,56px)/1.12 Georgia,serif;letter-spacing:-1.8px;margin:0 0 17px}.lede{font-size:18px;color:var(--muted);max-width:720px;margin:0 0 32px}.stage{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 22px;font-size:14px;font-weight:550}.badge{font:12px/1.4 ui-monospace,SFMono-Regular,monospace;color:var(--muted)}.live-body{padding:30px;min-height:330px}.live-note{font-size:14px;color:var(--muted);padding:16px 22px;margin:0;border-top:1px solid var(--line)}
.source{background:#253d30;border-color:#253d30;color:#edf3df}.source .panel-bar{border-color:#ffffff20;color:#c1d2b5}.source .badge{color:#b2c5a5}pre{padding:24px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace}.kw{color:#b8d891}.str{color:#e8c995}.after{margin-top:28px;max-width:770px;font-size:16px;color:var(--muted)}.next{display:flex;justify-content:space-between;margin-top:36px;border-top:1px solid var(--line);padding-top:24px;gap:24px}.next a{font-size:15px}.page-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:22px 0 30px;font-size:14px;color:var(--muted)}
button{border:1px solid #c5d3ba;border-radius:7px;background:#f4f7eb;color:#315633;padding:10px 15px}button:hover{background:#e8efdc}button[aria-pressed=true],button.primary{background:var(--green);border-color:var(--green);color:white}.counter-page .live-body{display:grid;place-items:center;background-image:radial-gradient(#b8c6aa66 .8px,transparent .8px);background-size:16px 16px}.counter-page #demo>button{font-size:32px;padding:23px 34px;min-width:230px;color:white;background:var(--green);border-color:var(--green)}.state-controls{display:flex;gap:8px;flex-wrap:wrap}.state-controls button{font-size:14px}.resource-result{margin-top:24px;background:#f3f6e9;border:1px solid #d8e2cb;border-radius:8px;padding:22px;min-height:145px;display:flex;align-items:center}.resource-result p,.resource-result ul{margin:0}.resource-result ul{padding-left:23px}.resource-result li+li{margin-top:8px}[role=alert]{color:#9a4a33}.editor-demo,.form-demo{display:grid;gap:14px}.field-label,label{font-size:16px;margin:0;font-weight:550}input,textarea{width:100%;border:1px solid #b5c6a7;background:#fffefb;color:var(--ink);border-radius:7px;padding:12px 14px;min-height:50px;font-size:18px}textarea{resize:vertical;min-height:132px}.editor-demo>button,.form-demo>button{justify-self:start}.field-hint{font-size:14px;margin:0;color:var(--muted)}.form-demo [role=status]{margin:0;min-height:26px;color:#446b37;overflow-wrap:anywhere}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:22px}.tile{display:block;text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:27px;transition:border-color .15s}.tile:hover{border-color:var(--green)}.tile img{display:block;width:100%;border-radius:7px;margin-bottom:20px}.tile h2{font:28px/1.2 Georgia,serif;margin:0 0 8px}.tile p{color:var(--muted);font-size:16px;margin:0 0 18px}.tile>span{font-size:15px;font-weight:600}
@media(max-width:850px){.stage{grid-template-columns:1fr}.live-body{min-height:260px}.source pre{max-height:520px;overflow:auto}.tiles{grid-template-columns:1fr}.tile img{max-height:280px;object-fit:contain;background:var(--bg)}}
@media(max-width:520px){.shell{width:calc(100% - 32px)}.masthead{padding:22px 0}.wordmark{font-size:20px}.masthead>a:last-child{font-size:13px}.section-nav{gap:4px;padding:18px 0}.section-nav a{padding:7px 9px;font-size:14px}main{padding-top:18px}h1{letter-spacing:-1px}.live-body{padding:22px}.page-footer,.next{flex-wrap:wrap}.tiles{gap:16px}.tile{padding:20px}pre{font-size:14px;padding:20px}}