/* playground */
  .btn{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:600}
  .btn:disabled{opacity:.5;cursor:default}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line2);font-weight:500}
  .pg{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--soft)}
  .pg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 4px}
  .pg input,.pg textarea,.pg select{width:100%;border:1px solid var(--line2);border-radius:8px;padding:7px 10px;background:#fff;outline:none;font:inherit;font-size:13px;line-height:1.45;color:var(--ink)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .pg .mono,.pg #pgReq,.pg #pgKey{font-family:var(--mono);font-size:12.5px}
  .pg input:focus,.pg textarea:focus,.pg select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
  .pg textarea{resize:vertical;min-height:0;display:block}
  .pg #pgReq{min-height:320px}
  .pg .inerr{border-color:var(--bad);background:var(--bad-soft)}
  .pg .row{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
  .pg-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
  @media (max-width:640px){.pg-top{grid-template-columns:minmax(0,1fr)}}
  .keyrow{display:flex;gap:6px}
  .tpl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
  .tpl .lbl{font-size:12.5px;color:var(--muted);margin-right:2px}
  .pg-tabs{display:flex;gap:4px;margin-top:14px;border-bottom:1px solid var(--line2)}
  .pg-tabs button{border:1px solid transparent;border-bottom:none;background:none;padding:7px 14px;border-radius:8px 8px 0 0;cursor:pointer;font-size:13.5px;color:var(--muted);margin-bottom:-1px}
  .pg-tabs button.on{background:#fff;border-color:var(--line2);color:var(--ink);font-weight:600}
  .pg-pane{background:#fff;border:1px solid var(--line2);border-top:none;border-radius:0 0 10px 10px;padding:14px}
  .step + .step{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  .step h4{margin:0 0 2px;font-size:14px;display:flex;align-items:baseline;gap:8px}
  .pg .hint{font-size:12.5px;color:var(--muted);margin:0 0 8px}
  .count{font:500 11.5px var(--mono);color:var(--faint)}
  .chipbtn{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--ink)}
  .chipbtn:hover:not(:disabled){border-color:var(--ink)}
  .chipbtn:disabled{opacity:.45;cursor:default}
  .seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:#fff;flex:none;max-width:100%;flex-wrap:wrap}
  .seg button{border:none;border-right:1px solid var(--line2);background:#fff;padding:5px 10px;font-size:12.5px;cursor:pointer;color:var(--muted)}
  .seg button:last-child{border-right:none}
  .seg button.on{background:var(--ink);color:#fff}
  .frow{display:grid;grid-template-columns:minmax(80px,min(170px,32%)) minmax(0,1fr) auto;gap:6px;align-items:start;margin-top:6px}
  .qcard{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-top:10px;background:#fcfcfd}
  .qcard.bad{border-color:#f0b4b4}
  .qhead{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
  .qhead .qn{font:700 12px var(--mono);color:#fff;background:var(--ink);border-radius:6px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .qhead .qid{flex:1 1 150px;max-width:240px;width:auto}
  .qhead .grow{flex:1}
  .iconbtn{border:1px solid var(--line2);background:#fff;border-radius:6px;min-width:28px;height:28px;padding:0 7px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .iconbtn:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
  .iconbtn.del:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}
  .iconbtn:disabled{opacity:.35;cursor:default}
  .sub{font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 0;display:flex;gap:8px;align-items:baseline}
  .optrow{display:grid;grid-template-columns:minmax(80px,min(190px,34%)) minmax(0,1fr) auto;gap:6px;margin-top:6px;align-items:center}
  .lvlrow{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px;margin-top:6px;align-items:center}
  .lvlrow .n{font:600 12px var(--mono);color:var(--faint);text-align:center}
  .ynrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px;margin-top:6px;align-items:center;font-size:12.5px;color:var(--muted)}
  .btns{display:inline-flex;gap:4px}
  .addrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:12.5px;color:var(--muted)}
  .linkbtn{border:none;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px;padding:2px 0;text-align:left}
  .refs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:12px;color:var(--muted)}
  .refs:empty{display:none}
  .refs button{font:11.5px var(--mono);border:1px dashed var(--line2);background:#fff;border-radius:5px;padding:1px 6px;cursor:pointer;color:var(--ink)}
  .refs button:hover{border-style:solid;border-color:var(--ink)}
  .pg details{margin-top:14px}
  .pg details summary{cursor:pointer;font-size:13px;color:var(--muted)}
  .pg pre{margin:8px 0 0;max-height:420px}
  .problems{border-radius:8px;padding:9px 12px;font-size:13px;margin-top:12px;background:var(--warn-soft);color:var(--warn)}
  .problems.hard{background:var(--bad-soft);color:var(--bad)}
  .problems ul{margin:4px 0 0;padding-left:18px}
  .problems .linkbtn{color:inherit}
  .pg .status{font-size:13px;color:var(--muted)}
  .pg .status.ok{color:var(--ok)}.pg .status.err{color:var(--bad)}
  .pg kbd{font:11px var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fff;color:var(--muted)}
  .res{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:12px}
  .rcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
  .rcard .q{font:600 12px var(--mono);color:var(--muted);word-break:break-all}
  .rcard .ins{font-size:12px;color:var(--faint);margin:1px 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .rcard .a{font-size:18px;font-weight:700;margin:2px 0 1px;word-break:break-word}
  .rcard .m{font-size:12px;color:var(--muted);margin-bottom:6px}
  .rcard details{margin-top:4px}
  .rcard details summary{font-size:12px}
  .bar{display:grid;grid-template-columns:minmax(70px,42%) minmax(0,1fr) 42px;gap:6px;align-items:center;font-size:12px;margin:3px 0}
  .bar .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar .track{height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
  .bar .fill{display:block;height:100%;background:#c8c8ce;border-radius:4px}
  .bar.win .lab{font-weight:600}
  .bar.win .fill{background:var(--ink)}
  .bar .pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
  .warnline{font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px;margin-top:10px}

/* Standalone workspace, sharing the Vansa developer palette and navigation. */
.playground-main{padding-block:32px 22px}
.playground-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:25px}
.playground-intro .eyebrow{font-size:10px;margin-bottom:9px}
.playground-intro h1{font-size:39px;letter-spacing:-1.8px;margin-bottom:9px}
.playground-intro p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0}
.pg{padding:0;border:0;border-radius:0;background:transparent}
.pg-top{grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:26px;padding:17px 21px;background:#eef1e8;border:1px solid var(--line);border-radius:7px}
.pg label{font-size:12px;font-weight:550;margin-bottom:7px;color:#566049}
.pg input,.pg textarea,.pg select{padding:9px 11px;border-radius:5px;border-color:#8c9186;font-size:14px;line-height:1.65;min-width:0}
.pg input:focus,.pg textarea:focus,.pg select:focus{border-color:#789653;box-shadow:0 0 0 3px #bbd89640}
.pg .mono,.pg #pgKey,.pg #pgReq{font-family:var(--mono);font-size:13px}
.keyrow{gap:8px;align-items:stretch}
.keyrow .iconbtn{height:auto;min-width:53px;padding-inline:10px;font-size:12px}
.tpl{margin:16px 0 20px;gap:7px}
.tpl .lbl{font:10px/1.6 var(--mono);letter-spacing:1px;margin-right:10px}
.pg .chipbtn{font-size:12px;background:transparent;border-color:var(--line2);border-radius:5px;padding:5px 10px;line-height:1.65}
.pg .chipbtn:hover:not(:disabled){border-color:#9aad82;background:#ecf1e5}
.pg-workspace{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);gap:22px;align-items:stretch}
.request-column{min-width:0;background:#fff;border:1px solid var(--line2);border-radius:7px;overflow:hidden;display:flex;flex-direction:column}
.pg-tabs{margin:0;border:0;border-bottom:1px solid var(--line);padding:0 22px;gap:28px;background:#fafbf8}
.pg-tabs button{position:relative;border:0;border-radius:0;margin:0;padding:15px 0;font-size:13px;background:none}
.pg-tabs button.on{background:none;color:var(--ink);font-weight:550}
.pg-tabs button.on::after{content:"";height:3px;background:#8cb15c;position:absolute;bottom:-1px;left:0;right:0}
.editor-scroll{height:clamp(330px,calc(100dvh - 550px),760px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7d2bb #f7f8f4}
.pg-pane{border:0;border-radius:0;padding:24px;min-width:0}
.editor-step-title{display:flex;gap:10px;align-items:baseline;border:0;padding:0;margin:0 0 9px;font-size:18px;line-height:1.4;letter-spacing:-.5px;font-weight:550}
.editor-step-title>span:first-child{font:11px var(--mono);color:#6e7b5e;letter-spacing:0}
.editor-step-title .count{margin-left:auto;font:11px var(--mono);color:var(--muted);letter-spacing:0}
.pg .hint{font-size:12px;line-height:1.85;color:var(--muted);margin-bottom:13px}
.pg .hint code{font-size:11px}
.pg .seg{border-color:var(--line2);border-radius:5px;margin-bottom:10px}
.pg .seg button{padding:7px 11px;font-size:12px;border-color:var(--line2)}
.pg .seg button.on{background:#e8efdc;color:#31441e;font-weight:550}
.frow{grid-template-columns:minmax(85px,29%) minmax(0,1fr) auto;gap:8px;margin-top:8px}
.pg .iconbtn{border-color:var(--line2);border-radius:4px;min-width:28px;height:30px;font-size:12px;background:#fbfcf8}
.pg .keyrow .iconbtn{height:auto}
.pg .step+.step{margin-top:24px;padding-top:24px;border-color:var(--line)}
.qcard{background:#fafbf7;border:1px solid var(--line);border-radius:6px;padding:15px;margin-top:13px}
.qhead{gap:7px;margin-bottom:12px}
.qhead .qn{width:24px;height:24px;background:#e8eedf;color:#445c2b;border-radius:4px;font-size:11px}
.qhead .qid{max-width:none;font-family:var(--mono);font-size:12px;padding:6px 8px;flex-basis:130px}
.qhead select{font-size:12px;width:auto;max-width:100%;padding:6px 8px}
.pg .qcard textarea{font-size:13px;background:white}
.sub{font-size:12px;margin-top:15px;color:#59634f}
.optrow{grid-template-columns:minmax(80px,30%) minmax(0,1fr) auto;gap:6px;margin-top:8px}
.optrow input,.optrow textarea,.lvlrow input{font-size:12px}
.pg .addrow{gap:7px;line-height:1.8;margin-top:12px;font-size:12px}
.pg .refs{font-size:11px;margin-top:7px;gap:6px}
.pg .refs button{font-size:11px;border-color:#cbd6be;padding:2px 7px}
.pg .linkbtn{font-size:12px}
.pg details summary{font-size:12px;line-height:1.7}
.pg #pgJson{height:100%;display:flex;flex-direction:column}
.pg #pgReq{flex:1;min-height:260px;resize:vertical;line-height:1.8;background:#fcfdf9;padding:16px}
.pg .run-toolbar{margin:0;padding:13px 18px;border-top:1px solid var(--line);gap:9px;background:#fafbf8;min-height:64px}
.pg .btn{border-radius:5px;font-size:12px;font-weight:500;padding:9px 12px;min-height:39px;white-space:nowrap}
.pg .btn span{font-size:18px;line-height:1}
.pg .btn.ghost{background:transparent;border-color:#d4ddc8;color:#526044;font-size:11px;padding:8px 10px}
.pg .run-toolbar>.hint{display:none}
.pg #pgRun{margin-right:auto;background:var(--ink);color:var(--accent)}
.pg #pgRun:hover{background:#34432a}
.problems{margin:12px 24px 20px;font-size:13px;border-radius:5px}
.response-column{background:var(--code);border:1px solid #34432a;border-radius:7px;color:#e4ecd9;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.response-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid #36412d;font-size:13px;line-height:1.5}
.response-state{font:10px/1.7 var(--mono);color:#c0d1ad;border:1px solid #47543b;padding:2px 7px;border-radius:4px}
.response-scroll{position:relative;flex:1;min-height:0;max-height:clamp(330px,calc(100dvh - 550px),760px);overflow:auto;padding:22px;scrollbar-width:thin;scrollbar-color:#60704f #1c2119}
.response-empty{min-height:318px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px 5px}
.empty-symbol{font:28px var(--mono);color:var(--accent);background:#2a3720;border:1px solid #465935;padding:12px 18px;border-radius:8px;margin-bottom:27px}
.response-empty h2{color:#e4ecd9;border:0;padding:0;font-size:29px;font-weight:500;letter-spacing:-1px;margin:0 0 18px;line-height:1.15}
.response-empty p{font-size:13px;line-height:1.85;color:#afbea1;max-width:285px;margin:0}
.response-types{display:flex;justify-content:center;gap:8px;margin-top:24px}
.response-types span{font:10px var(--mono);color:#b6c7a4;border:1px solid #425235;border-radius:4px;padding:5px 9px}
.response-footer{display:flex;gap:7px;align-items:center;padding:18px 20px;min-height:64px;border-top:1px solid #37432e;color:#aabd99;font:11px var(--mono);margin-top:auto}
.response-footer .method{font-size:10px;background:none;padding:0;margin-right:2px}
.response-footer a{margin-left:auto;text-decoration:none;font:11px var(--sans);color:#bfd4a9}
.response-footer a:hover{text-decoration:underline}
.pg .status{font-size:13px;line-height:1.8;color:#c5d4b5;margin-bottom:14px;overflow-wrap:anywhere}
.pg .status:empty{display:none}
.pg .status.ok{color:#c8ed9a;background:#2a3a20;border:1px solid #415b2f;padding:11px 13px;border-radius:5px}
.pg .status.err{color:#ffd0c7;background:#422d25;border:1px solid #694337;padding:11px 13px;border-radius:5px}
.pg .res{grid-template-columns:minmax(0,1fr);gap:12px;margin:0}
.pg .rcard{background:#252f1f;border:1px solid #435138;border-radius:6px;padding:17px 18px}
.rcard .q{font-size:12px;color:#c2d6ad;font-weight:500}
.rcard .ins{font-size:12px;color:#aabb99;line-height:1.75;margin:7px 0}
.rcard .a{font-size:25px;font-weight:500;line-height:1.4;color:var(--accent);margin:12px 0 4px}
.rcard .m{font-size:12px;color:#adbf9a;margin-bottom:12px}
.rcard details summary{color:#b8cba3}
.bar{font-size:12px;margin:7px 0;grid-template-columns:minmax(70px,40%) minmax(0,1fr) 43px;gap:10px}
.bar .track{height:5px;background:#3b4930;border-radius:1px}
.bar .fill{background:#82966b;border-radius:1px}
.bar.win .fill{background:var(--accent)}
.bar .pct{color:#b9caa7}
.bar.win .lab{font-weight:500;color:var(--accent)}
.response-column details summary{color:#becfae}
.response-column pre{font-size:12px;margin:10px 0 0;padding:16px;border:1px solid #455537;background:#151c11;border-radius:5px;max-height:460px}
.response-column .warnline{font-size:12px;border-radius:5px;padding:10px 12px;margin-bottom:13px}
.response-column :focus-visible{outline-color:var(--accent)}
.playground-footnote{display:flex;justify-content:space-between;gap:18px;font-size:11px;line-height:1.8;color:var(--muted);margin:17px 0 0}
.playground-footnote a{flex-shrink:0;text-decoration:none}
@media(min-width:1450px){.playground-intro h1{font-size:43px}.editor-scroll,.response-scroll{height:clamp(340px,calc(100dvh - 570px),800px);max-height:clamp(340px,calc(100dvh - 570px),800px)}.pg .run-toolbar>.hint{display:block;font-size:10px}}
@media(max-width:1100px){.pg-workspace{gap:17px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.pg-pane{padding:19px}.pg .run-toolbar{padding:12px;gap:7px}.pg .btn{padding:9px 10px}.pg .btn.ghost{font-size:10px;padding:8px}.response-scroll{padding:17px}.response-heading{padding-inline:17px}.response-footer{padding-inline:15px;font-size:10px;gap:4px}.response-footer a{font-size:10px}.pg-top{gap:20px}.qcard{padding:12px}.tpl{gap:6px}.pg .tpl .chipbtn{font-size:11px}.tpl .lbl{font-size:9px;margin-right:5px}}
@media(max-width:900px){.pg-workspace{grid-template-columns:minmax(0,1fr)}.editor-scroll{height:560px;max-height:70dvh;min-height:380px}.response-scroll{height:auto;max-height:680px;min-height:360px}.response-empty{min-height:320px}.pg-top{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr)}.playground-intro h1{font-size:38px}.pg .run-toolbar{padding:14px 18px}.pg .btn{font-size:13px;padding:10px 14px}.pg .btn.ghost{font-size:12px}.pg .run-toolbar>.hint{display:block}.playground-footnote{display:block}.playground-footnote a{display:inline-block;margin-left:9px}.response-footer{font-size:11px;padding:16px 21px}.response-footer a{font-size:12px}}
@media(max-width:600px){.playground-main{padding-top:26px}.playground-intro{display:block;margin-bottom:23px}.playground-intro h1{font-size:36px;letter-spacing:-1.7px}.playground-intro p:not(.eyebrow){font-size:13px;line-height:1.8}.playground-intro>.quiet-link{display:none}.pg-top{grid-template-columns:minmax(0,1fr);gap:13px;padding:15px}.pg label{font-size:12px}.pg input,.pg textarea,.pg select{font-size:16px}.pg #pgKey,.pg .mono{font-size:13px}.tpl{margin-block:16px;gap:6px}.tpl .lbl{width:100%;font-size:10px;margin-bottom:3px}.pg .tpl .chipbtn{font-size:11px;padding:5px 9px}.pg-tabs{padding-inline:17px}.pg-pane{padding:19px 15px}.editor-scroll{min-height:330px;max-height:none;height:510px}.pg .hint{font-size:12px}.editor-step-title{font-size:18px}.pg .seg button{font-size:11px;padding:7px 9px}.pg .frow{grid-template-columns:82px minmax(0,1fr) auto;gap:6px}.qcard{padding:12px 10px}.qhead{gap:6px}.qhead .qid{max-width:calc(100% - 33px);flex-basis:160px;font-size:12px}.qhead .grow{display:none}.qhead select{font-size:12px}.pg .qcard textarea,.pg .frow textarea{font-size:13px}.optrow{grid-template-columns:78px minmax(0,1fr) auto;gap:5px}.optrow input{font-size:12px;padding:7px}.pg .optrow textarea{padding:7px;font-size:12px}.pg .run-toolbar{padding:12px;gap:7px}.pg .run-toolbar>.hint{display:none}.pg .btn{font-size:12px;padding:9px 10px;gap:10px}.pg .btn.ghost{font-size:10px;padding:8px}.pg #pgRun{margin-right:0}.response-scroll{min-height:360px;padding:18px}.response-empty h2{font-size:28px}.response-heading{padding:15px 19px}.response-footer{padding:16px 18px}.playground-footnote{font-size:11px}.playground-footnote a{margin-left:0;margin-top:5px;display:block}.problems{margin-inline:15px}.pg #pgReq{font-size:12px;line-height:1.9;padding:12px}.rcard .a{font-size:23px}}
@media(max-width:370px){.pg .btn{font-size:11px;padding:9px}.pg .btn.ghost{font-size:10px;padding:8px 6px}.pg .run-toolbar{gap:5px}.pg .frow{grid-template-columns:minmax(68px,26%) minmax(0,1fr) auto}.optrow{grid-template-columns:68px minmax(0,1fr) auto}.response-footer{font-size:10px;gap:4px}.response-footer a{font-size:10px}.response-footer .method{font-size:9px}}
/* keyboard focus must stay visible (outline:none above removes the default ring) */
.pg input:focus-visible,.pg textarea:focus-visible,.pg select:focus-visible{outline:2px solid #568418;outline-offset:1px}