.ef-doc {
  --ink: #10372b;
  --line: #cbded4;
  --paper: #fcfdfb;
  width: min(1400px, calc(100% - 32px));
  margin: 26px auto 38px;
  color: var(--ink);
  line-height: 1.48;
}
.ef-doc *, .ef-doc *::before, .ef-doc *::after { box-sizing: border-box }
.ef-doc [hidden] { display: none !important }
.ef-doc :is(h1,h2) { color: #082d1c; font-family: Georgia,Cambria,serif; font-weight: 700; letter-spacing: -.05em; line-height: 1.05 }
.ef-doc h1 { margin: 14px 0 12px; font-size: clamp(3rem,5vw,4.6rem) }
.ef-doc h2 { margin: 6px 0 6px; font-size: clamp(2rem,3vw,2.7rem) }
.ef-doc :is(h3,h4) { color: var(--ink); margin: 0 0 6px; font-weight: 700; line-height: 1.2 }
.ef-doc h3 { font-size: 1.15rem }
.ef-doc h4 { font-size: 1rem }
.ef-doc p { margin: 0 0 14px; color: #263f35 }
.ef-doc a { color: #005d3f; text-underline-offset: 3px }
.ef-doc a:hover { color: #073b28 }
.ef-doc :is(button,a,input,select,summary):focus-visible { outline: 3px solid #299374; outline-offset: 3px }
.ef-doc button, .ef-doc summary { cursor: pointer }
.ef-doc-label, .ef-doc-terminal small { font: 700 .75rem/1.5 ui-monospace,Consolas,monospace; letter-spacing: .11em }
.ef-doc-hero {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid #c9e6d9; border-radius: 14px;
  display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(20px,4vw,64px); align-items: center;
  padding: clamp(28px,4vw,60px) clamp(28px,5vw,76px); color: var(--ink);
  background-color: #e5f7ec;
  background-image: linear-gradient(#13583a0a 1px,transparent 1px),linear-gradient(90deg,#13583a0a 1px,transparent 1px),linear-gradient(116deg,#effbf2,#d8f5e5);
  background-size: 30px 30px,30px 30px,100% 100%;
}
.ef-doc-hero::before,.ef-doc-hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; width:410px; height:120px; transform:skewX(-32deg); border:1px solid #a3d9bc; border-radius:44px; box-shadow:0 0 0 9px #def5e7,0 0 0 10px #a3d9bc,0 0 0 19px #def5e7,0 0 0 20px #a3d9bc,0 0 0 29px #def5e7,0 0 0 30px #a3d9bc }
.ef-doc-hero::after { bottom:-100px; right:-24px }
.ef-doc-hero::before { top:-120px; left:-330px; transform:rotate(-38deg) }
.ef-doc-hero p { max-width: 41ch; font-size: clamp(1.05rem,1.4vw,1.3rem); margin-bottom: 20px }
.ef-doc .ef-doc-hero a,.ef-doc #dev-search button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:8px 20px; border-radius:8px; font-weight:670; text-decoration:none; border:1px solid #155a3e }
.ef-doc .dev-primary,.ef-doc #dev-search button { background:#064d31; color:white }
.ef-doc .dev-primary:is(:hover,:focus-visible),.ef-doc #dev-search button:is(:hover,:focus-visible) { background:#063722; color:#fff }
.ef-doc .dev-secondary { margin:4px 0 4px 8px; color:#13432c; background:#f6fff9 }
.ef-doc .dev-secondary:is(:hover,:focus-visible) { color:#092e1e; background:#d4efdd }
.ef-doc pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:#e6f6ec; font: .91rem/1.55 ui-monospace,Consolas,monospace }
.ef-doc pre code { color:inherit; font:inherit }
.ef-doc-terminal,.dev-output { min-width:0; overflow:hidden; border:1px solid #315046; border-radius:11px; background:linear-gradient(135deg,#142823,#102e28); color:#e4f8e9 }
.ef-doc-terminal { position:relative; padding:0 22px 23px }
.ef-doc-terminal small { display:block; margin:14px 64px 10px 0; color:#e9f4ed }
.dev-window { display:flex; min-height:36px; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #ffffff26; color:#a8bab1; font:600 .67rem/1.4 ui-monospace,monospace; letter-spacing:.1em }
.ef-doc-terminal .dev-window { margin:0 -22px 10px }
.ef-doc .dev-copy { position:absolute; top:12px; right:14px; border:1px solid #688077; border-radius:7px; padding:5px 10px; background:#2c4039; color:white; font:600 .8rem/1.4 system-ui }
.ef-doc .dev-copy::before { content:'⧉'; margin-right:5px }
.ef-doc .dev-copy:hover { background:#40594d; color:white }
.ef-doc-layout { display:grid; grid-template-columns:minmax(220px,21%) minmax(0,1fr); align-items:start; gap:clamp(14px,2vw,28px); margin-top:22px }
.ef-doc-layout nav,.ef-doc-body section { background:var(--paper); border:1px solid var(--line); border-radius:12px }
.ef-doc-layout nav { position:sticky; top:12px; display:grid; padding:14px 16px; gap:1px }
.ef-doc-layout nav strong { padding:9px 8px; font-size:1.15rem }
.ef-doc-layout nav a { padding:8px; line-height:1.28; text-decoration:none; border-bottom:1px solid #e0eae3 }
.ef-doc-layout nav a:last-child { border:0; font-size:.88rem }
.ef-doc-layout nav a:is(:hover,:focus-visible,[aria-current]) { color:#0d3523; background:#cef4da; border-radius:7px }
.ef-doc-body { min-width:0 }
.ef-doc-body section { scroll-margin-top:88px; padding:clamp(18px,2.15vw,30px); margin:0 0 14px }
.dev-workbench,.dev-options>div,.dev-recipes { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.ef-doc #dev-search { display:grid; gap:10px 14px; grid-template-columns:.85fr 1.15fr; padding:16px; border:1px solid var(--line); background:white; border-radius:9px; align-content:center }
.ef-doc #dev-search label { display:grid; gap:4px; font-weight:650; color:var(--ink) }
.ef-doc #dev-search :is(input,select) { width:100%; height:42px; min-width:0; padding:6px 10px; color:#183e31; background-color:white; border:1px solid #bdcfc5; border-radius:7px }
.ef-doc #dev-search :is(button,details) { grid-column:1/-1 }
.dev-options summary { color:#32634e; font-size:.85rem; font-weight:600 }
.dev-options>div { margin-top:8px }
.dev-output { display:flex; flex-direction:column }
.dev-output pre { padding:15px 20px; overflow:auto; max-height:23rem; flex:1 }
.dev-output:has(#dev-status:empty) pre { display:grid; place-content:center; min-height:110px }
.ef-doc #dev-status { color:#b5dbcb; margin:0; padding:8px 14px; overflow-wrap:anywhere; font: .78rem/1.4 ui-monospace,monospace }
.ef-doc #dev-status:empty { display:none }
#dev-tabs:not([hidden]) { display:flex; gap:3px }
#dev-tabs button { flex:1; min-height:40px; border:1px solid var(--line); color:#113c28; background:#f3f8f4; border-radius:8px 8px 0 0; font-weight:700 }
#dev-tabs button[aria-selected=true] { background:#acf0c9 }
#dev-tabs button:hover { color:#072d1d; background:#cef4db }
.ef-doc-choices article { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; padding:20px; border:1px solid var(--line); border-radius:0 0 9px 9px }
.dev-client-info { min-width:0 }
.dev-client-info pre { padding:14px; border-radius:8px; background:#17342b; margin-bottom:12px }
.dev-instructions { border-left:1px solid var(--line); padding-left:22px }
.dev-instructions ol { counter-reset:step; margin:8px 0 0; padding:0; list-style:none }
.dev-instructions li { counter-increment:step; position:relative; padding-left:30px; margin:7px 0; font-size:.93rem }
.dev-instructions li::before { content:counter(step); position:absolute; left:0; top:0; width:22px; height:22px; text-align:center; border-radius:50%; background:#cef5da; color:#17452e; font-weight:700 }
.dev-endpoints { border:1px solid var(--line); border-radius:9px; overflow:hidden }
.dev-endpoints details + details { border-top:1px solid var(--line) }
.dev-endpoints summary { display:grid; grid-template-columns:16px minmax(170px,.77fr) 1.23fr; column-gap:8px; align-items:center; padding:7px 14px; line-height:1.4 }
.dev-endpoints summary::before { content:'▸'; color:#195b3d }
.dev-endpoints details[open] summary::before { content:'▾' }
.dev-endpoints summary::-webkit-details-marker { display:none }
.dev-endpoints summary:hover { background:#eef8f0 }
.dev-endpoints summary span,.dev-recipes-fold summary span { color:#446052; font-size:.92rem }
.dev-endpoint-info { padding:2px 18px 10px 38px }
.dev-endpoint-info small { color:#456456 }
.dev-endpoint-info p { margin:6px 0 }
.ef-doc :is(.ef-doc-body code:not(pre code),#permissions b) { border-radius:4px; padding:1px 4px; color:#164b32; background:#daf2e3; overflow-wrap:anywhere }
#permissions .ef-doc-terminal { margin:14px 0 }
.dev-recipes-fold { padding-top:12px; border-top:1px solid var(--line) }
.dev-recipes-fold summary { font-weight:650 }
.dev-recipes-fold summary span { margin-left:8px; font-weight:400 }
.dev-recipes { grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); margin:14px 0 }
.dev-recipes article { border-left:2px solid #8ac6a3; background:#f3f8f4; padding:12px }
@media(max-width:900px) {
  .ef-doc-layout { grid-template-columns:1fr }
  .ef-doc-layout nav { position:static; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ef-doc-layout nav strong { grid-column:1/-1 }
}
@media(max-width:700px) {
  .ef-doc-hero,.dev-workbench,.ef-doc-choices article { grid-template-columns:minmax(0,1fr) }
  .ef-doc { margin-top:16px }
  .ef-doc-hero { padding:24px 18px }
  .ef-doc .dev-secondary { margin-left:0 }
  .dev-instructions { border-left:0; border-top:1px solid var(--line); padding:14px 0 0 }
  .dev-endpoints summary { grid-template-columns:12px 1fr; gap:2px 8px }
  .dev-endpoints summary span { grid-column:2 }
}
@media(max-width:390px) {
  .ef-doc #dev-search { grid-template-columns:1fr }
  .ef-doc-layout nav { grid-template-columns:1fr }
}