.api-playground{min-height:100vh}.api-playground *,.api-playground :before,.api-playground :after{box-sizing:border-box}.api-playground .wrap{max-width:1000px;margin:0 auto;padding:0 28px}.api-playground .intro{padding:48px 0 8px}.api-playground .intro .plate{font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ffly-coral-text);margin-bottom:14px;font-size:12px;font-weight:600}.api-playground .intro h1{font-family:var(--ffly-font-display);letter-spacing:-.02em;color:var(--ffly-ink);margin:0 0 10px;font-size:clamp(34px,4.6vw,48px);font-weight:700}.api-playground .intro p{color:var(--ffly-ink);max-width:580px;margin:0;font-size:18px}.api-playground .console{background:var(--ffly-surface);border:1.5px solid var(--ffly-ink);border-radius:var(--ffly-r-md);box-shadow:var(--ffly-sh-lg);margin-top:28px;overflow:hidden}.api-playground .endpoint-row{border-bottom:1.5px solid var(--ffly-ink);background:var(--ffly-paper);flex-wrap:wrap;align-items:center;gap:14px;padding:14px 16px;display:flex}.api-playground .endpoint-row .lbl{font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ffly-muted);font-size:11px}.api-playground .endpoint-select{font-family:var(--ffly-font-mono);color:var(--ffly-ink);background-color:var(--ffly-surface);border:1.5px solid var(--ffly-ink);border-radius:var(--ffly-r-full);cursor:pointer;appearance:none;box-shadow:var(--ffly-sh-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2315324e' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 15px center;background-repeat:no-repeat;padding:9px 40px 9px 16px;font-size:14px;font-weight:600}.api-playground .endpoint-row .count{font-family:var(--ffly-font-mono);color:var(--ffly-muted);letter-spacing:.04em;margin-left:auto;font-size:11px}.api-playground .reqbar{border-bottom:1.5px solid var(--ffly-ink);align-items:stretch;display:flex}.api-playground .method{background:var(--ffly-ink);color:var(--ffly-paper);font-family:var(--ffly-font-mono);letter-spacing:.06em;align-items:center;padding:0 18px;font-size:13px;font-weight:700;display:flex}.api-playground .pathwrap{font-family:var(--ffly-font-mono);color:var(--ffly-ink);white-space:nowrap;flex:1;align-items:center;padding:0 16px;font-size:15px;display:flex;overflow-x:auto}.api-playground .pathwrap .base{color:var(--ffly-muted)}.api-playground .pathwrap .param input{width:13ch;font-family:var(--ffly-font-mono);color:var(--ffly-coral-text);border:none;border-bottom:1.5px dashed var(--ffly-coral);letter-spacing:.04em;background:0 0;outline:none;padding:2px 0;font-size:15px;font-weight:700}.api-playground .run{background:var(--ffly-coral);color:#fff;border:none;border-left:1.5px solid var(--ffly-ink);font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;align-items:center;gap:8px;padding:0 28px;font-size:13px;font-weight:700;transition:filter .15s;display:flex}.api-playground .run:hover{filter:brightness(1.05)}.api-playground .run:disabled{opacity:.7;cursor:not-allowed}.api-playground .run .spin{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:12px;height:12px;animation:.7s linear infinite apiSpin}@keyframes apiSpin{to{transform:rotate(360deg)}}.api-playground .panes{grid-template-columns:1fr 1fr;display:grid}@media (width<=800px){.api-playground .panes{grid-template-columns:1fr}}.api-playground .pane{min-width:0}.api-playground .pane.left{border-right:1.5px solid var(--ffly-ink)}@media (width<=800px){.api-playground .pane.left{border-right:none;border-bottom:1.5px solid var(--ffly-ink)}}.api-playground .tabs{border-bottom:1px solid var(--ffly-line);background:var(--ffly-paper);align-items:center;display:flex}.api-playground .tab{font-family:var(--ffly-font-mono);letter-spacing:.04em;color:var(--ffly-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:11px 16px;font-size:12px;font-weight:600}.api-playground .tab:hover{color:var(--ffly-ink)}.api-playground .tab.active{color:var(--ffly-ink);border-bottom-color:var(--ffly-coral);background:var(--ffly-surface)}.api-playground .panehead{border-bottom:1px solid var(--ffly-line);justify-content:space-between;align-items:center;padding:9px 16px;display:flex}.api-playground .panehead .lbl{font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ffly-muted);font-size:11px}.api-playground .copy{font-family:var(--ffly-font-mono);color:var(--ffly-blue);cursor:pointer;letter-spacing:.04em;background:0 0;border:none;font-size:11px}.api-playground pre{font-family:var(--ffly-font-mono);color:var(--ffly-ink);background:var(--ffly-surface);min-height:220px;margin:0;padding:18px 16px;font-size:13px;line-height:1.6;overflow-x:auto}.api-playground pre.resp{max-height:320px;overflow-y:auto}.api-playground .status{font-family:var(--ffly-font-mono);align-items:center;gap:8px;font-size:11px;font-weight:700;display:inline-flex}.api-playground .status .ok{color:var(--ffly-leaf);align-items:center;gap:5px;display:inline-flex}.api-playground .status .ok:before{content:"";background:var(--ffly-leaf);border-radius:50%;width:7px;height:7px}.api-playground .status .ms{color:var(--ffly-muted)}.api-playground .empty{text-align:center;color:var(--ffly-muted);font-family:var(--ffly-font-mono);background:var(--ffly-surface);justify-content:center;align-items:center;min-height:220px;padding:40px 16px;font-size:13px;display:flex}.api-playground .k{color:var(--ffly-blue)}.api-playground .s{color:var(--ffly-leaf)}.api-playground .verb{color:var(--ffly-sun);font-weight:700}.api-playground .path{color:var(--ffly-cyan)}.api-playground .bridge{background:var(--ffly-ink);color:var(--ffly-paper);border-radius:var(--ffly-r-md);box-shadow:var(--ffly-sh-md);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:22px;padding:20px 24px;display:flex}.api-playground .bridge .pitch{max-width:540px;font-size:14px;line-height:1.5}.api-playground .bridge .dev-cta{background:var(--ffly-coral);color:#fff;border:1.5px solid var(--ffly-paper);cursor:pointer;border-radius:var(--ffly-r-full);font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;padding:12px 22px;font-size:12px;font-weight:700;text-decoration:none}.api-playground .note{font-family:var(--ffly-font-mono);color:var(--ffly-muted);letter-spacing:.03em;margin:16px 0 48px;font-size:11px}.api-playground .status .err{color:var(--ffly-coral-text);align-items:center;gap:5px;display:inline-flex}.api-playground .status .err:before{content:"";background:var(--ffly-coral);border-radius:50%;width:7px;height:7px}.api-playground .srcbadge{font-family:var(--ffly-font-mono);text-transform:uppercase;letter-spacing:.06em;border-radius:var(--ffly-r-full);padding:1px 7px;font-size:10px;font-weight:700}.api-playground .srcbadge.live{color:var(--ffly-leaf);background:#3f8a5824}.api-playground .srcbadge.sample{color:#8a6a12;background:#d6a22429}
