:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#262235;background:#fff;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,select{outline-offset:4px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #9476ed}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:76px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #ebe8f0;background:#fffffff5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:750;letter-spacing:-1.3px;color:#6241ce}.brand span{font-size:15px;letter-spacing:0;color:#8e889c;font-weight:400;border-left:1px solid #ded8ec;padding-left:15px;margin-left:8px}.toplinks{display:flex;align-items:center;gap:25px;font-size:12px;color:#716a80}.preview-badge{background:#f3efff;border:1px solid #e4dafb;border-radius:20px;padding:6px 10px;font-size:10px;color:#7151bd}.layout{display:grid;grid-template-columns:230px minmax(0,1fr)}.sidebar{position:sticky;top:76px;height:calc(100vh - 76px);padding:35px 19px;border-right:1px solid #ebe8f0}.nav-label{font-size:9px;letter-spacing:1.1px;font-weight:650;color:#9b93a9;padding-left:14px;margin-bottom:16px}.second{margin-top:36px}.nav-item{display:flex;align-items:center;gap:7px;font-size:12px;padding:11px 13px;border-radius:6px;color:#726b80;margin-bottom:4px}.nav-item.active{background:#f2edfe;color:#6c43cd;font-weight:600}.sidebar-bottom{position:absolute;bottom:25px;left:30px;display:flex;gap:11px;align-items:center;font-size:11px}.sidebar-bottom small{display:block;font-size:9px;margin-top:4px;color:#90889c}.but-logo{background:#e00025;color:white;font-size:15px;font-weight:850;letter-spacing:-1px;display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:1px}main{max-width:1450px;width:100%;padding:29px 50px 0;margin:auto}.breadcrumbs{font-size:10px;color:#948aab;margin:1px 0 36px}.breadcrumbs span{padding:0 12px;color:#c8c0d6}.eyebrow{font-size:9px;font-weight:750;letter-spacing:1.7px;color:#8968cf}.intro h1{font-size:clamp(36px,3.8vw,55px);line-height:1.1;letter-spacing:-2.3px;font-weight:650;margin:17px 0 20px}.lead{font-size:15px;line-height:1.75;color:#80778f;max-width:550px;margin:0}.intro-tags{display:flex;gap:9px;margin:21px 0 27px;flex-wrap:wrap}.intro-tags span{font-size:10px;border:1px solid #e7e2ee;border-radius:5px;color:#81748f;padding:5px 8px}.scope-note{display:flex;gap:10px;padding:13px 16px;background:#faf8ff;border:1px solid #eee7fa;border-radius:8px;font-size:11px;line-height:1.7;color:#8a7ca1;max-width:1080px}.scope-note strong{color:#6f5898;font-weight:600}.note-dot{width:6px;height:6px;background:#ad91e4;border-radius:50%;flex:none;margin-top:6px}.workspace{display:grid;grid-template-columns:minmax(255px,.82fr) minmax(390px,1.18fr);gap:40px;margin-top:34px;align-items:start}.guide{padding-top:11px}.step{display:flex;gap:16px;position:relative;padding-bottom:36px;scroll-margin-top:110px}.step:not(:last-child):before{content:"";position:absolute;left:12px;top:34px;bottom:7px;width:1px;background:#ece6f6}.step-number{width:26px;height:26px;border:1px solid #e8e0f5;color:#a392bc;font-size:11px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;background:#fff}.step.selected .step-number{background:#7450d8;border-color:#7450d8;color:white;box-shadow:0 3px 9px #7450d825}.step-kicker{font-size:8px;letter-spacing:1px;color:#b0a3c4;font-weight:650}h2{font-size:19px;letter-spacing:-.5px;line-height:1.4;font-weight:600}.step h2{font-size:17px;margin:8px 0 12px}.step p{font-size:12px;line-height:1.85;color:#7e748e;margin:0 0 11px}.step p.small{font-size:11px;color:#978ba6}code{font-family:"SFMono-Regular",Consolas,monospace;font-size:.92em;color:#7752bd;background:#f6f2fc;padding:2px 4px;border-radius:3px;overflow-wrap:anywhere}.show-code{border:0;background:transparent;font-size:10px;font-weight:600;color:#8860cc;padding:5px 0}.show-code span{margin-left:9px}.test-list{font-size:11px;color:#81738f;display:grid;gap:9px;margin-bottom:12px}.playground{position:sticky;top:98px;border:1px solid #e6deef;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #43305c08;background:white;min-width:0}.playground-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ebe6f2;min-height:49px;gap:10px}.tabs{display:flex;gap:16px;min-width:0}.tab{border:0;border-bottom:2px solid transparent;background:transparent;font-size:11px;color:#9587a7;padding:17px 0 14px;white-space:nowrap}.tab.active{color:#7850c9;border-bottom-color:#8960d8}.tab span{font-size:8px;background:#f1ebfa;border-radius:3px;padding:2px 4px;margin-left:2px}.live{font-size:8px;color:#a495b6;white-space:nowrap}.live i{display:inline-block;width:5px;height:5px;background:#9c83c8;border-radius:50%;margin-right:5px}.preview-controls{padding:13px 16px;display:flex;gap:10px;align-items:end;border-bottom:1px solid #eee8f4}.preview-controls label{display:flex;flex-direction:column;gap:5px;font-size:8px;color:#9b8daa;flex:1}.preview-controls select{width:100%;font-size:10px;color:#736282;background:white;border:1px solid #e7dfee;border-radius:5px;padding:7px 4px}.preview-controls button{font-size:9px;color:#9379b1;border:1px solid #e7dfee;border-radius:5px;background:white;padding:8px}.preview-controls button[aria-pressed=true]{background:#eee6fa}.preview-canvas{background:linear-gradient(135deg,#f9f7fc,#f2eef8);padding:22px;display:flex;justify-content:center}.merchant-frame{width:100%;max-width:460px;border:1px solid #e6dfee;border-radius:9px;background:#fff;box-shadow:0 8px 18px #43305c0b;transition:max-width .2s}.merchant-frame.mobile{max-width:335px}.merchant-bar{padding:13px 19px;border-bottom:1px solid #eeeaf2;display:flex;align-items:center;gap:13px;font-size:12px;font-weight:600}.merchant-bar .but-logo{width:28px;height:28px;font-size:12px}.merchant-bar>span:last-child{margin-left:auto;color:#899580;font-size:13px}.merchant-body{padding:17px}.product-card{display:flex;align-items:center;gap:14px;margin:0 0 17px}.product-art{width:88px;height:75px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:#f8f6f7;flex:none}.product-art svg{width:82px;height:63px}.product-brand{font-size:7px;color:#a3959e;letter-spacing:.6px}.product-card h3{font-size:11px;font-weight:600;margin:5px 0}.product-detail{display:block;font-size:9px;color:#9a8c99}.product-card strong{display:block;font-size:12px;margin-top:8px}#protection-slot{--estaly-accent:#dd0529;--estaly-radius:8px}.cart-recap{font-size:10px;color:#8d7f93;padding:17px 0 0}.cart-recap>div{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px}.cart-recap .cart-total{border-top:1px solid #eee6f1;padding-top:13px;margin-top:13px;color:#493a55;font-size:12px}.merchant-note{font-size:8px;color:#aa9bb2;text-align:center;line-height:1.6;margin-bottom:0}.merchant-buy{width:100%;background:#df0029;color:white;border:0;border-radius:5px;margin-top:16px;padding:12px;font-size:11px;font-weight:600}.merchant-buy:disabled{opacity:.6}.demo-tools{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;font-size:9px;color:#a18cac;gap:10px}.demo-tools label{display:flex;gap:6px;align-items:center}.demo-tools input{width:12px;height:12px;accent-color:#8960d8}.demo-tools button{border:0;background:none;font-size:9px;color:#a18cac}.playground-footer{display:flex;align-items:center;gap:6px;font-size:8px;color:#ac9bbd;background:#fcfaff;padding:10px 15px;border-top:1px solid #eee8f4}.playground-footer>span:last-child{margin-left:auto;font-size:7px}#state-dot{width:4px;height:4px;background:#aa8ad4;border-radius:50%}.code-panel,.data-panel{min-height:550px;background:#fcfbfe}.code-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid #eee8f4;font:10px monospace;color:#9983ad}.code-toolbar button{font-size:10px;border:1px solid #e8def1;background:white;border-radius:4px;padding:5px 9px;color:#8d6aaa}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.9;margin:0;padding:22px;color:#715891;max-height:550px;overflow:auto}pre code{background:none;padding:0;color:inherit}.code-note,.data-help{font-size:10px;line-height:1.8;color:#a18caf;margin:0 20px 20px}.data-help{margin-top:17px}.download{display:block;border-top:1px solid #eee8f4;padding:17px 20px;font-size:11px;color:#8b61c5}.contract-section{margin-top:65px;padding:40px 0;border-top:1px solid #ece6f4;scroll-margin-top:95px}.contract-section>h2,.next-section>h2{font-size:25px;letter-spacing:-.8px;margin:13px 0 30px}.contract-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}.contract-grid h3,.next-grid h3{font-size:13px;margin:0 0 9px}.contract-grid p,.next-grid p,.adapter-details p{font-size:12px;line-height:1.9;color:#8e7f9d;margin:0 0 12px}.contract-section details{border:1px solid #ece4f5;border-radius:7px;margin-top:20px;padding:16px;font-size:12px;color:#9279ad}.contract-section summary{cursor:pointer}.adapter-details{padding-top:18px}.next-section{padding:35px 0 45px;border-top:1px solid #ece6f4;scroll-margin-top:100px}.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.next-grid b{font-size:10px;font-weight:500;color:#b39acc;display:block;margin-bottom:15px}.page-footer{border-top:1px solid #ece6f4;display:flex;justify-content:space-between;padding:22px 0;font-size:9px;color:#b3a1c2}
@media(min-width:1600px){.workspace{gap:65px}.intro h1{font-size:58px}}
@media(max-width:1150px){.layout{grid-template-columns:185px 1fr}main{padding:25px 27px 0}.workspace{gap:23px;grid-template-columns:minmax(230px,1fr) minmax(360px,1.3fr)}.sidebar{padding:30px 9px}.nav-item{font-size:10px}.live{display:none}.preview-canvas{padding:14px}}
@media(max-width:950px){.layout{display:block}.sidebar{display:none}.workspace{grid-template-columns:1fr 1.15fr}.intro h1{font-size:45px}}
@media(max-width:720px){.topbar{height:62px;padding:0 20px}.toplinks>a{display:none}.layout main{padding:24px 20px 0}.breadcrumbs{margin-bottom:27px}.intro h1{font-size:39px}.lead{font-size:14px}.workspace{display:flex;flex-direction:column;gap:30px}.playground{position:relative;top:0;width:100%;order:-1}.guide{width:100%}.preview-canvas{padding:12px}.merchant-body{padding:12px}.contract-grid,.next-grid{grid-template-columns:1fr}.contract-section{margin-top:20px}.contract-section>h2,.next-section>h2{font-size:23px}.page-footer{gap:20px;line-height:1.7}.scope-note{font-size:10px}.preview-controls{padding:12px}.step{padding-bottom:30px}.playground-footer>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.merchant-frame{transition:none}}

.prerequisites{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:10px;color:#8e7e9e;padding:20px 0 0}.prerequisites strong{color:#57476c;font-size:11px}.prerequisites span:before{content:"✓";color:#8660c8;margin-right:6px}.install{display:grid;gap:9px;border:1px solid #ebe1f5;border-radius:6px;padding:12px;margin:15px 0;font-size:10px;color:#9074ad}.install code{font-size:11px;padding:8px;background:#f8f4fd}

.step p{font-size:14px;line-height:1.85}.step p.small{font-size:12px}.step h2{font-size:19px}.step .expected{font-size:11px;color:#706080;border-left:2px solid #d9c9f0;padding-left:10px;margin-top:13px}.step{padding-bottom:43px}.payload-reference{margin-top:28px}.payload-reference h3{font-size:15px}.payload-reference p{font-size:12px;line-height:1.8;color:#8e7f9d}.payload-reference table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.payload-reference th{background:#f9f6fd;color:#80669b;font-weight:500}.payload-reference th,.payload-reference td{padding:13px;border-bottom:1px solid #eee7f6;vertical-align:top}.payload-reference td{color:#8a789b;line-height:1.7}.payload-reference td:first-child{width:38%}.playground{max-height:calc(100vh - 120px);overflow:auto}.playground-head{position:sticky;top:0;z-index:2;background:#fff}.code-panel pre{min-height:330px}.contract-grid p,.next-grid p{font-size:13px}@media(max-width:720px){.playground{max-height:none;overflow:hidden}.payload-reference{overflow:auto}.payload-reference table{min-width:540px}}
/* Estaly brand tokens, sourced from estaly.co's public stylesheet. */
:root{--estaly-black:#111;--estaly-violet:#b46cfe;--estaly-violet-light:#ecd9ff;--estaly-yellow:#f9fa6c;--estaly-yellow-light:#ffffd5;--estaly-grey:#f2f0ec;--estaly-off-white:#fcfcfc;--doc-text:#49464e;--doc-muted:#655e6d;--doc-border:#e5e1e9;color:var(--estaly-black);background:var(--estaly-off-white)}
.brand{color:var(--estaly-black);gap:0}.brand>img{width:108px;height:auto;display:block}.brand span{color:var(--doc-muted);border-color:var(--doc-border);margin-left:18px}.topbar{background:#fcfcfcfa;border-color:var(--doc-border)}.toplinks{color:var(--doc-muted)}.preview-badge{background:var(--estaly-yellow-light);border-color:var(--estaly-yellow);color:var(--estaly-black)}
.sidebar{background:white;border-color:var(--doc-border)}.nav-label{color:var(--doc-muted)}.nav-item{color:var(--doc-text)}.nav-item:hover{background:var(--estaly-grey)}.nav-item.active{background:var(--estaly-violet-light);color:var(--estaly-black);box-shadow:inset 3px 0 var(--estaly-violet)}.sidebar-bottom small{color:var(--doc-muted)}.breadcrumbs{color:var(--doc-muted)}.eyebrow{color:#653196}.intro h1{color:var(--estaly-black)}.lead{color:var(--doc-text)}.intro-tags span{color:var(--doc-muted);border-color:var(--doc-border);background:white}
.scope-note{background:var(--estaly-yellow-light);border-color:#eeefb4;color:var(--doc-text)}.scope-note strong{color:var(--estaly-black)}.note-dot{background:var(--estaly-black)}.prerequisites,.prerequisites strong{color:var(--doc-text)}.prerequisites span:before{color:#653196}
.step-number{border-color:var(--estaly-violet-light);color:var(--doc-text)}.step.selected .step-number{background:var(--estaly-violet);border-color:var(--estaly-violet);color:var(--estaly-black);box-shadow:none}.step-kicker{color:var(--doc-muted)}.step p,.step p.small{color:var(--doc-text)}.step .expected{color:var(--doc-muted);border-color:var(--estaly-violet)}.step:not(:last-child):before{background:var(--doc-border)}.show-code{color:#653196}.show-code:hover{text-decoration:underline}code{background:var(--estaly-violet-light);color:#452367}.install{border-color:var(--doc-border);color:var(--doc-muted);background:white}.install code{background:var(--estaly-grey);color:var(--estaly-black)}.test-list{color:var(--doc-text)}
.playground{border-color:var(--doc-border);box-shadow:0 10px 35px #11111108}.playground-head,.preview-controls{border-color:var(--doc-border)}.tab{color:var(--doc-muted)}.tab.active{color:var(--estaly-black);border-color:var(--estaly-violet)}.tab span{background:var(--estaly-violet-light);color:var(--estaly-black)}.live{color:var(--doc-muted)}.live i{background:var(--estaly-violet)}.preview-controls label{color:var(--doc-muted)}.preview-controls select,.preview-controls button{color:var(--doc-text);border-color:var(--doc-border)}.preview-controls button[aria-pressed=true]{background:var(--estaly-violet-light)}.preview-canvas{background:var(--estaly-grey)}.merchant-frame{border-color:#ddd9d3;box-shadow:0 8px 18px #11111108}.merchant-note{color:var(--doc-muted)}.demo-tools,.demo-tools button{color:var(--doc-muted)}.demo-tools input{accent-color:var(--estaly-violet)}.playground-footer{background:var(--estaly-off-white);color:var(--doc-muted);border-color:var(--doc-border)}#state-dot{background:var(--estaly-violet)}
.code-panel,.data-panel{background:white}.code-toolbar{color:var(--doc-muted);border-color:var(--doc-border)}.code-toolbar button{color:var(--estaly-black);border-color:var(--doc-border)}pre{color:var(--doc-text)}pre code{color:var(--doc-text);background:none}.code-note,.data-help{color:var(--doc-muted)}.download{color:#653196;border-color:var(--doc-border)}.download:hover{background:var(--estaly-violet-light)}
.contract-section,.next-section,.page-footer{border-color:var(--doc-border)}.contract-grid p,.next-grid p,.adapter-details p,.payload-reference p{color:var(--doc-text)}.contract-section details{color:var(--doc-text);border-color:var(--doc-border);background:white}.payload-reference th{background:var(--estaly-grey);color:var(--estaly-black)}.payload-reference td{color:var(--doc-text)}.payload-reference th,.payload-reference td{border-color:var(--doc-border)}.next-grid b{color:#653196}.page-footer{color:var(--doc-muted)}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{height:auto}
#overview,#integration,#contract,#next{scroll-margin-top:100px;outline:none}.mobile-nav{display:none}
@media(max-width:950px){.mobile-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:var(--doc-muted);padding:0 0 22px}.mobile-nav select{font-size:12px;max-width:70%;padding:10px;border:1px solid var(--doc-border);border-radius:6px;background:white;color:var(--estaly-black)}}
@media(max-width:720px){.brand>img{width:88px}.brand span{margin-left:12px;padding-left:12px}.footer-brand{flex-wrap:wrap}.preview-badge{font-size:9px}.toplinks{gap:0}}

.step-number{font-family:inherit;cursor:pointer;padding:0;transition:background .15s}.step-number:hover{background:var(--estaly-violet-light);border-color:var(--estaly-violet)}.step-navigation{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid var(--doc-border);font-size:11px;color:var(--doc-muted);background:white}.step-navigation>div{display:flex;gap:7px}.step-navigation button{border:1px solid var(--doc-border);background:white;border-radius:5px;width:30px;height:28px;font-size:15px;color:var(--estaly-black)}.step-navigation button:hover:not(:disabled){background:var(--estaly-violet-light)}.step-navigation button:disabled{opacity:.3;cursor:default}.playground{scroll-margin-top:90px}

/* The code sits beside its explanation; the shopper preview remains visible. */
.workspace{grid-template-columns:minmax(390px,1.1fr) minmax(360px,1fr);gap:35px}.step-body{min-width:0;flex:1}.step-code-slot:empty{display:none}.code-panel{min-height:0;border:1px solid var(--doc-border);border-radius:9px;margin:18px 0;overflow:hidden;background:white}.code-context{display:grid;gap:5px;padding:13px 15px;background:var(--estaly-violet-light);font-size:11px}.code-context strong{color:var(--estaly-black)}.code-context span{color:#49404f;font-size:10px}.code-panel pre{min-height:0;max-height:none;padding:16px;font-size:11px;line-height:1.8}.code-note{margin:0 15px 15px;font-size:10px}.download{font-size:10px;padding:13px 15px}.preview-explanation{padding:16px;background:var(--estaly-yellow-light);border-bottom:1px solid #e9e8bb}.preview-explanation strong{font-size:12px}.preview-explanation p{font-size:11px;line-height:1.7;color:var(--doc-text);margin:7px 0 0}#preview-empty{padding:55px 26px;text-align:center;background:var(--estaly-grey)}#preview-empty .empty-symbol{display:block;font:28px monospace;color:#9276a9;margin-bottom:18px}#preview-empty strong{font-size:15px}#preview-empty p{font-size:12px;line-height:1.8;color:var(--doc-muted)}#jump-to-component{border:1px solid var(--estaly-violet);border-radius:6px;padding:10px;background:var(--estaly-violet-light);font-size:11px;margin-top:10px}.step:not(.selected) .show-code{display:inline-block}.step.selected .show-code{display:none}.playground{max-height:calc(100vh - 115px)}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(320px,1fr) minmax(330px,1fr);gap:20px}.layout{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:950px){.layout{display:block}.workspace{grid-template-columns:minmax(300px,1fr) minmax(300px,1fr)}}
@media(max-width:720px){.workspace{display:flex}.playground{max-height:none}.code-panel pre{font-size:11px}.code-context{gap:8px}}

.preview-shortcuts{display:flex;justify-content:flex-end;gap:8px;margin:0 0 9px}.preview-shortcuts button{border:0;background:none;padding:0;color:#655e6d;text-decoration:underline;font-size:10px}.preview-shortcuts button:disabled{opacity:.4;cursor:default}#read-step-code{display:none}@media(max-width:720px){.preview-shortcuts{justify-content:space-between;flex-wrap:wrap}#read-step-code{display:inline-block}}

/* Stable quickstart: the guide never changes height as the active step changes. */
.workspace{grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);gap:44px;align-items:start}
.step{min-height:350px;padding-bottom:60px}.step:last-child{min-height:330px}.step .show-code,.step.selected .show-code,.step:not(.selected) .show-code{display:inline-block}.step-body{padding:0 0 0 0}.step h2{font-size:20px}.step p{font-size:14px;line-height:1.85}.step.selected .step-kicker{color:#653196}
.playground{display:flex;flex-direction:column;height:calc(100dvh - 120px);max-height:840px;min-height:420px;overflow:hidden;position:sticky;top:98px;background:white}
.playground-head{position:relative;flex:none}.step-navigation{flex:none}.playground-footer{flex:none;margin-top:auto}.playground>[role=tabpanel]{flex:1;min-height:0;overflow:auto;overscroll-behavior:auto;scrollbar-gutter:stable}
.playground .code-panel{margin:0;border:0;border-radius:0;min-height:0}.playground .code-panel pre{min-height:0;max-height:none;overflow:visible;padding:20px;font-size:12px;line-height:1.85}.code-context{padding:16px 20px}.code-toolbar{padding:12px 20px}.code-note{font-size:11px;line-height:1.8;margin:0;padding:12px 20px 18px}.data-panel{min-height:0}.preview-canvas{padding:18px}.code-panel .download{padding:16px 20px}.guide{padding-top:12px}.tabs{gap:18px}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(260px,.85fr) minmax(370px,1.15fr);gap:24px}.step{min-height:390px}}
@media(max-width:950px){.workspace{grid-template-columns:minmax(260px,1fr) minmax(330px,1.15fr)}}
@media(max-width:720px){.workspace{display:flex;gap:30px}.playground{position:relative;top:0;order:-1;height:650px;min-height:0;max-height:85dvh;max-width:100%}.step{min-height:0;padding-bottom:45px}.step:last-child{min-height:0}.playground .code-panel pre{font-size:11px}.tabs{gap:15px}}
/* Keep the panel controls below the global header through the final guide step. */
@media(min-width:721px){.step:last-child{min-height:clamp(420px,calc(100dvh - 120px),840px)}}
/* The whole reading block identifies the active step, without layout changes. */
.guide{padding-top:0}
.step{padding:26px 22px 38px 24px;border-top:1px solid var(--doc-border);background:transparent;isolation:isolate}
.step:last-child{border-bottom:1px solid var(--doc-border)}
.step:not(:last-child):before{display:none}
.step:after{content:"";position:absolute;inset:0;z-index:-1;background:transparent;border-left:4px solid transparent;pointer-events:none;transition:background-color 160ms ease,border-color 160ms ease}
.step.selected:after{background:#f4edfc;border-left-color:var(--estaly-violet)}
.step h2{font-weight:650;color:#37323d}
.step.selected h2{color:#111}
.step .step-kicker{display:block;line-height:1.5;font-weight:600}
.step.selected .step-kicker{color:#653196}
.step .step-number{margin-top:1px;background:white}
.step.selected .step-number{background:var(--estaly-violet);color:#111;border-color:var(--estaly-violet)}
.step .expected{border-left-color:#d6d0dd}
.step.selected .expected{border-left-color:var(--estaly-violet);color:#49404f}
@media(max-width:1150px){.step{padding:24px 17px 36px 20px;gap:12px}}
@media(max-width:720px){.step{padding:22px 16px 30px 18px}.step h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.step:after{transition:none}}
/* Readable documentation at normal zoom, including wide desktop displays. */
main{max-width:none;padding:30px 38px 0}.layout{grid-template-columns:248px minmax(0,1fr)}
.topbar{padding-inline:32px}.brand span{font-size:17px}.toplinks{font-size:14px}.preview-badge{font-size:12px}
.sidebar{padding:34px 15px}.nav-label{font-size:11px;letter-spacing:1px}.nav-item{font-size:14px;padding:13px 14px;line-height:1.5}.sidebar-bottom{font-size:13px;left:25px}.sidebar-bottom small{font-size:11px;line-height:1.5}
.breadcrumbs{font-size:13px}.eyebrow{font-size:12px}.intro h1{font-size:clamp(40px,3.8vw,60px)}.lead{font-size:18px;max-width:730px}.intro-tags span{font-size:12px;padding:7px 10px}.scope-note{font-size:14px;max-width:none;padding:17px 19px}.prerequisites{font-size:13px;gap:20px}.prerequisites strong{font-size:14px}
.workspace{grid-template-columns:minmax(370px,.9fr) minmax(460px,1.1fr);gap:32px}.step{padding:28px 25px 40px 27px;gap:17px;min-height:400px}.step h2{font-size:25px;line-height:1.4;letter-spacing:-.5px;margin:10px 0 17px}.step p{font-size:17px;line-height:1.8}.step p.small{font-size:15px;line-height:1.8}.step .expected{font-size:14px;line-height:1.75;padding-left:13px;margin-top:17px}.step-kicker{font-size:11px;letter-spacing:1px}.step-number{width:31px;height:31px;font-size:14px;border-radius:9px}.show-code{font-size:14px;padding:9px 0}
.playground{max-height:none;height:calc(100dvh - 120px)}.playground-head{padding:0 20px;min-height:57px}.tab{font-size:14px;padding:18px 0 16px}.tab span{font-size:11px}.live{font-size:11px}.step-navigation{font-size:14px;padding:12px 20px}.step-navigation button{width:35px;height:33px;font-size:18px}
.code-context{padding:18px 21px;gap:7px;font-size:15px}.code-context span{font-size:13px;line-height:1.6}.code-toolbar{font-size:13px;padding:14px 21px}.code-toolbar button{font-size:13px;padding:7px 11px}.playground .code-panel pre{font-size:15px;line-height:1.8;padding:22px;tab-size:2}.playground .code-panel pre code{font-size:1em}.code-note,.code-panel .code-note{font-size:13px;line-height:1.8;padding:16px 21px}.code-panel .download{font-size:14px;padding:18px 21px}.playground-footer{font-size:11px;padding:12px 18px}.playground-footer>span:last-child{font-size:10px}
.preview-explanation{padding:18px 20px}.preview-explanation strong{font-size:15px}.preview-explanation p{font-size:14px;line-height:1.75}.preview-shortcuts button{font-size:12px}.preview-controls label{font-size:11px}.preview-controls select,.preview-controls button{font-size:13px;padding:9px 6px}.preview-canvas{padding:22px}.merchant-frame{max-width:550px}.merchant-bar{font-size:15px;padding:16px 20px}.product-art{width:102px;height:90px}.product-art svg{width:96px;height:75px}.product-brand{font-size:10px}.product-card h3{font-size:15px}.product-detail{font-size:12px}.product-card strong{font-size:16px}.cart-recap{font-size:13px}.cart-recap .cart-total{font-size:16px}.merchant-note{font-size:11px}.merchant-buy{font-size:14px}.demo-tools,.demo-tools button{font-size:12px}.demo-tools input{width:15px;height:15px}.data-help{font-size:14px}.data-panel pre{font-size:14px}#preview-empty strong{font-size:18px}#preview-empty p{font-size:15px}#jump-to-component{font-size:14px}
.contract-section>h2,.next-section>h2{font-size:30px}.contract-grid h3,.next-grid h3,.payload-reference h3{font-size:18px}.contract-grid p,.next-grid p,.adapter-details p,.payload-reference p{font-size:16px;line-height:1.85}.payload-reference table{font-size:15px}.payload-reference th,.payload-reference td{padding:16px}.contract-section details{font-size:15px;padding:19px}.next-grid b{font-size:14px}.page-footer{font-size:12px}
@media(min-width:1600px){.layout{grid-template-columns:265px minmax(0,1fr)}main{padding-inline:48px}.workspace{gap:38px}.step p{font-size:18px}.step p.small{font-size:16px}.playground .code-panel pre{font-size:16px}}
@media(min-width:721px){.step:last-child{min-height:calc(100dvh - 120px)}}
@media(max-width:1200px){.layout{grid-template-columns:215px minmax(0,1fr)}main{padding-inline:24px}.workspace{grid-template-columns:minmax(295px,.9fr) minmax(350px,1.1fr);gap:20px}.step{padding:24px 18px 36px;gap:12px}.step h2{font-size:22px}.step p{font-size:16px}.live{display:none}.nav-item{font-size:13px}.playground .code-panel pre{font-size:14px}.tab{font-size:13px}}
@media(max-width:950px){.layout{display:block}.workspace{grid-template-columns:minmax(285px,1fr) minmax(330px,1.1fr)}.mobile-nav{font-size:14px}.mobile-nav select{font-size:14px}}
@media(max-width:720px){.topbar{padding-inline:18px}.brand span{font-size:15px}.preview-badge{font-size:10px}main,.layout main{padding:24px 16px 0}.intro h1{font-size:38px}.lead{font-size:17px}.workspace{display:flex;gap:28px}.scope-note{font-size:13px}.prerequisites{font-size:12px;gap:12px}.step{padding:24px 18px 34px;min-height:0}.step:last-child{min-height:0}.step h2{font-size:23px}.step p{font-size:16px}.step p.small{font-size:15px}.step .expected{font-size:14px}.playground{height:690px;max-height:85dvh;min-height:0}.playground-head{padding-inline:13px}.tabs{gap:12px}.tab{font-size:13px}.playground .code-panel pre{font-size:13px;padding:16px}.code-context{font-size:14px;padding:15px}.code-context span{font-size:12px}.step-navigation{padding:10px 14px}.preview-canvas{padding:10px}.merchant-body{padding:12px}.preview-controls{gap:6px;padding:12px 10px}.preview-controls select{font-size:11px}.preview-controls button{font-size:11px}.product-card{gap:10px}.product-art{width:75px;height:72px}.product-art svg{width:72px}.product-card h3{font-size:14px}.contract-section>h2,.next-section>h2{font-size:26px}.page-footer{font-size:11px;flex-wrap:wrap}.preview-shortcuts button{font-size:11px}}

/* The preview isolates the Estaly component from the merchant page. */
.preview-controls [hidden],.merchant-frame [hidden]{display:none!important}
.component-caption{margin:0;padding:14px 22px;color:var(--doc-muted);font-size:14px;line-height:1.65;border-bottom:1px solid var(--doc-border)}
.merchant-frame{max-width:100%;border:0;box-shadow:none;background:transparent}
.merchant-body{padding:0}
.preview-canvas{padding:22px}
.handoff-flow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:28px 0;font-size:16px}
.handoff-flow a{padding:12px 16px;border:1px solid var(--doc-border);border-radius:8px;text-decoration:none;color:#64319a;background:#f4edfc}
.server-auth,.server-operations,.delivery-followup{padding:26px;border:1px solid var(--doc-border);border-radius:10px;margin:24px 0;font-size:17px;line-height:1.8}
.server-auth pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.server-step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding:40px 0;border-bottom:1px solid var(--doc-border);scroll-margin-top:105px}
.server-guide{font-size:17px;line-height:1.8;min-width:0}
.server-guide h3,.server-operations h3,.delivery-followup h3{font-size:25px;line-height:1.35;margin:12px 0 22px}
.endpoint{font-size:15px;overflow-wrap:anywhere;font-family:monospace;padding:12px;background:#f4edfc;border-radius:6px}
.endpoint b{color:#64319a}
.server-example{min-width:0;align-self:start;border:1px solid var(--doc-border);border-radius:10px;overflow:hidden;background:white}
.server-example pre{font-size:15px;line-height:1.75;padding:22px;margin:0;overflow:auto;tab-size:2}
.server-example code{background:transparent;padding:0;color:inherit}
#send-delivery{scroll-margin-top:105px}
@media(min-width:1600px){.server-guide,.server-auth,.server-operations,.delivery-followup{font-size:18px}.server-example pre{font-size:16px}}
@media(max-width:1050px){.server-step{grid-template-columns:minmax(0,1fr)}.server-example pre{max-height:650px}}
@media(max-width:720px){.server-auth,.server-operations,.delivery-followup{padding:18px;font-size:16px}.server-guide{font-size:16px}.server-example pre{font-size:13px;padding:16px}.handoff-flow{font-size:14px}.preview-canvas{padding:12px}}

.delivery-example-note{padding:0 22px 22px;margin:0;font-size:14px;line-height:1.7;color:var(--doc-muted)}

/* Keep the interactive preview discoverable alongside the code. */
#preview-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:center;padding:9px 11px;border:1px solid var(--estaly-violet);border-radius:7px;background:#f4edfc;color:#64319a;font-weight:650;white-space:nowrap}
#preview-tab:hover{background:var(--estaly-violet-light)}
#preview-tab.active{background:var(--estaly-violet-light);color:#111;box-shadow:inset 0 -3px 0 var(--estaly-violet)}
.preview-eye{width:18px;height:18px;flex:none}
.step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.step-actions .show-code{margin:0}
.try-component{border:1px solid var(--estaly-violet);border-radius:7px;background:var(--estaly-violet-light);color:#30144b;padding:12px 16px;font-size:15px;font-weight:650;line-height:1.4;text-align:left}
.try-component:hover{background:#dfc0ff}
@media(max-width:720px){.tabs{gap:9px}#preview-tab{gap:5px;padding:8px}.preview-eye{width:16px;height:16px}.try-component{font-size:14px}}

/* Keep the programme identity comfortably inside the sidebar. */
.sidebar-bottom{left:24px;right:24px;bottom:24px;gap:12px;padding-top:18px;border-top:1px solid var(--doc-border);align-items:flex-start;line-height:1.5}
.sidebar-bottom .but-logo{flex:0 0 37px;margin-top:2px}
.sidebar-bottom>div{min-width:0;overflow-wrap:break-word}
.sidebar-bottom small{margin-top:5px;line-height:1.65}