:root{--sb-bg: #0b0d12;--sb-panel: #111523;--sb-panel-alt: #161b2e;--sb-text: #e7ecff;--sb-muted: #a9b4dd;--sb-line: #27304a;--sb-accent: #7aa2ff;--sb-green: #34d399;--sb-red: #f87171;--sb-yellow: #fbbf24;--sb-entity-accent: #7aa2ff;--sb-consumer-accent: #34d399;--sb-protocol-accent: #a78bfa;--sb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--sb-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;--sb-radius: 10px;--sb-gap: 12px;--sb-header-h: 52px;--sb-control-h: 56px}.sandbox-shell{display:flex;flex-direction:column;min-height:100vh;background:var(--sb-bg);color:var(--sb-text);font-family:var(--sb-sans)}.sandbox-header{display:flex;align-items:center;gap:12px;height:var(--sb-header-h);padding:0 16px;background:var(--sb-panel);border-bottom:1px solid var(--sb-line);flex-shrink:0}.sandbox-header__back{display:inline-flex;align-items:center;gap:4px;color:var(--sb-muted);text-decoration:none;font-size:13px;padding:4px 8px;border-radius:6px;transition:color .15s,background .15s}.sandbox-header__back:hover{color:var(--sb-text);background:var(--sb-panel-alt)}.sandbox-header__title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sandbox-header__spacer{flex:1}.sandbox-grid{display:grid;grid-template-columns:30fr 35fr 35fr;grid-template-areas:"entity consumer protocol";gap:var(--sb-gap);flex:1;padding:var(--sb-gap);min-height:0;overflow:hidden}.sandbox-grid__entity{grid-area:entity}.sandbox-grid__consumer{grid-area:consumer}.sandbox-grid__protocol{grid-area:protocol}.sandbox-controls{flex-shrink:0;height:var(--sb-control-h);border-top:1px solid var(--sb-line);background:var(--sb-panel)}@media(max-width:1200px){.sandbox-grid{grid-template-columns:1fr 1fr;grid-template-areas:"entity entity" "consumer protocol"}}@media(max-width:768px){.sandbox-grid{grid-template-columns:1fr;grid-template-areas:"entity" "consumer" "protocol"}.sandbox-header__title{font-size:13px}}html,body{margin:0;padding:0;background:var(--sb-bg, #0b0d12)}.sm-page{min-height:100vh;background:var(--sb-bg, #0b0d12);color:var(--sb-text, #e7ecff);font-family:var(--sb-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);padding-top:64px}.sm-topbar{position:fixed;top:0;left:0;right:0;z-index:40;height:64px;border-bottom:1px solid hsl(224,10%,9%);background:#23262f}.sm-topbar__inner{width:100%;height:100%;box-sizing:border-box;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.sm-topbar__brand{color:#b3c7ff;text-decoration:none;font-size:22px;font-weight:600;line-height:1.2;white-space:nowrap}.sm-topbar__brand:hover{color:#edeef3}.sm-topbar__nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sm-topbar__link{display:inline-flex;align-items:center;justify-content:center;height:32px;color:#b3c7ff;text-decoration:none;font-size:13px;font-weight:500;line-height:1;padding:0 12px;border:1px solid hsl(224,10%,23%);border-radius:999px;background:#272b34;transition:color .15s,border-color .15s,background-color .15s}.sm-topbar__link:hover{color:#edeef3;border-color:#4f5669;background:#2c303a}.sm-topbar__link--active{color:#edeef3;border-color:#658af1;background:#283353}.sm-container{max-width:1200px;margin:0 auto;padding:32px 24px 64px}.sm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}.sm-header__title{font-size:24px;font-weight:700;margin:0;letter-spacing:-.01em}.sm-header__subtitle{font-size:14px;color:var(--sb-muted, #a9b4dd);margin:4px 0 0;line-height:1.4}.sm-toolbar{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}.sm-search{flex:1;min-width:200px;padding:10px 14px;font-size:14px;background:var(--sb-panel, #111523);border:1px solid var(--sb-line, #27304a);border-radius:8px;color:var(--sb-text, #e7ecff);outline:none;transition:border-color .15s}.sm-search::placeholder{color:var(--sb-muted, #a9b4dd);opacity:.6}.sm-search:focus{border-color:var(--sb-accent, #7aa2ff)}.sm-filter{padding:10px 14px;font-size:13px;background:var(--sb-panel, #111523);border:1px solid var(--sb-line, #27304a);border-radius:8px;color:var(--sb-text, #e7ecff);cursor:pointer;outline:none;transition:border-color .15s;min-width:140px}.sm-filter:focus{border-color:var(--sb-accent, #7aa2ff)}.sm-category{margin-bottom:32px}.sm-category[hidden]{display:none}.sm-category__header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.sm-category__label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.sm-category__line{flex:1;height:1px;background:var(--sb-line, #27304a)}.sm-category__count{font-size:12px;color:var(--sb-muted, #a9b4dd);white-space:nowrap}.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:1024px){.sm-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.sm-grid{grid-template-columns:1fr}}@media(max-width:900px){.sm-topbar__inner{padding:10px 14px;gap:10px}.sm-topbar__nav{gap:6px}.sm-topbar__brand{font-size:16px}.sm-topbar__link{height:28px;font-size:11px;padding:0 10px}.sm-page{padding-top:56px}.sm-topbar{height:56px}}@media(max-width:560px){.sm-topbar__brand{max-width:52vw;overflow:hidden;text-overflow:ellipsis}}.sm-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--sb-accent, #7aa2ff);background:transparent;border:1px solid var(--sb-line, #27304a);border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s}.sm-toggle:hover{background:var(--sb-panel, #111523);border-color:var(--sb-accent, #7aa2ff)}.sm-empty{text-align:center;padding:48px 24px;color:var(--sb-muted, #a9b4dd);font-size:15px}.sm-empty__title{font-size:16px;font-weight:600;color:var(--sb-text, #e7ecff);margin-bottom:8px}.sc-card{display:flex;flex-direction:column;background:var(--sb-panel, #111523);border:1px solid var(--sb-line, #27304a);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;outline:none}.sc-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d;border-color:var(--sb-accent, #7aa2ff)}.sc-card:focus-visible{outline:2px solid var(--sb-accent, #7aa2ff);outline-offset:2px}.sc-card[hidden]{display:none}.sc-card__illustration{height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sc-card__illustration-icon{opacity:.7}.sc-card__illustration-img{width:100%;height:100%;object-fit:cover;display:block}.sc-card__body{flex:1;padding:14px 16px 8px}.sc-card__title{font-size:15px;font-weight:600;margin:0 0 6px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-card__desc{font-size:13px;line-height:1.45;color:var(--sb-muted, #a9b4dd);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sc-card__footer{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--sb-line, #27304a)}.sc-card__steps{font-size:12px;color:var(--sb-muted, #a9b4dd)}.sc-card__version{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px}:root{--sandbox-category-getting-started: #3b82f6;--sandbox-category-trust: #10b981;--sandbox-category-trust-fail: #ef4444;--sandbox-category-integration: #8b5cf6;--sandbox-category-edge-cases: #f59e0b;--sandbox-category-advanced: #1e40af}@keyframes sb-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sb-fade-in{0%{opacity:0}to{opacity:1}}.sb-panel__body--transitioning-out{animation:sb-fade-out .1s ease-in forwards}.sb-panel__body--transitioning-in{animation:sb-fade-in .2s ease-out forwards}@keyframes sb-bubble-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes sb-bubble-exit{0%{opacity:1}to{opacity:0}}.sb-bubble--entering{animation:sb-bubble-enter .2s ease-out forwards}.sb-bubble--exiting{animation:sb-bubble-exit .15s ease-in forwards}.sb-consumer-progress__bar{transition:width .4s cubic-bezier(.25,.46,.45,.94)}@keyframes sb-check-appear{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.sb-check-item--animated{opacity:0;animation:sb-check-appear .2s ease-out forwards}.sb-check-item--animated:nth-child(1){animation-delay:0ms}.sb-check-item--animated:nth-child(2){animation-delay:.1s}.sb-check-item--animated:nth-child(3){animation-delay:.2s}.sb-check-item--animated:nth-child(4){animation-delay:.3s}.sb-check-item--animated:nth-child(5){animation-delay:.4s}.sb-check-item--animated:nth-child(6){animation-delay:.5s}.sb-check-item--animated:nth-child(7){animation-delay:.6s}.sb-check-item--animated:nth-child(8){animation-delay:.7s}.sb-check-item--animated:nth-child(9){animation-delay:.8s}.sb-check-item--animated:nth-child(10){animation-delay:.9s}@keyframes sb-highlight-border{0%{outline-color:transparent;background:transparent}to{outline-color:#7aa2ff40;background:#7aa2ff1a}}.sb-json-line--highlighted{animation:sb-highlight-border .3s ease-out forwards}@keyframes sb-counter-pulse{0%,to{opacity:1}50%{opacity:.6}}.sb-step-counter--playing{animation:sb-counter-pulse 1.2s ease-in-out infinite}@keyframes sb-lock-close{0%{transform:rotate(-15deg) translateY(-2px)}to{transform:rotate(0) translateY(0)}}.sb-lock-icon--animating{animation:sb-lock-close .4s ease-out forwards}@keyframes sb-card-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.sc-card__illustration img,.sc-card__illustration svg{transition:transform .3s ease,opacity .3s ease}.sc-card:hover .sc-card__illustration img,.sc-card:hover .sc-card__illustration svg{transform:scale(1.05)}@keyframes sb-dot-scale{0%{transform:scale(0)}to{transform:scale(1)}}.sb-step-dot--animated{animation:sb-dot-scale .15s ease-out forwards}@media(prefers-reduced-motion:reduce){.sb-panel__body--transitioning-out,.sb-panel__body--transitioning-in,.sb-bubble--entering,.sb-bubble--exiting,.sb-check-item--animated,.sb-json-line--highlighted,.sb-step-counter--playing,.sb-lock-icon--animating,.sb-step-dot--animated,.sc-card__illustration img,.sc-card__illustration svg{animation:none!important;transition:none!important}.sb-check-item--animated{opacity:1}}