@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-vietnamese-wght-normal-CtlIRbEm.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-latin-ext-wght-normal-MQgHevqp.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/public-sans-latin-wght-normal-DdeTHZLK.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg-deep: #141A21;--bg-base: #141A21;--bg-card: #1C252E;--bg-card-hover: #212B36;--bg-elevated: #212B36;--border-subtle: rgba(145, 158, 171, .12);--border-coral: #FF5630;--border-cyan: #00B8D9;--fg-primary: #ffffff;--fg-secondary: #919EAB;--fg-muted: #637381;--accent-coral: #FF5630;--accent-orange: #FFAB00;--accent-cyan: #00B8D9;--accent-mint: #00A76F;--accent-amber: #FFAB00;--gradient-sunset: linear-gradient(135deg, #FF5630 0%, #FFAB00 100%);--gradient-cyan-blue: linear-gradient(135deg, #00B8D9 0%, #078DEE 100%);--gradient-aurora-relay: none;--font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;--text-xs: clamp(.8rem, .75rem + .2vw, .9rem);--text-sm: clamp(.9rem, .85rem + .3vw, 1rem);--text-base: clamp(1rem, .95rem + .3vw, 1.125rem);--text-lg: clamp(1.15rem, 1.05rem + .4vw, 1.3rem);--text-xl: clamp(1.35rem, 1.2rem + .6vw, 1.6rem);--min-touch-target: 48px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--bg-deep);color:var(--fg-secondary);-webkit-font-smoothing:antialiased;min-height:100vh}.studio-nav-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:.75rem 1.5rem;background:#141a21d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:50}.nav-left{display:flex;align-items:center;gap:1rem}.btn-back-studio{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;min-height:40px;background:#00a76f1f;border:1px solid rgba(0,167,111,.32);border-radius:8px;color:#00a76f;text-decoration:none;font-weight:600;font-size:var(--text-sm);transition:all .2s ease}.btn-back-studio:hover{background:#00a76f38;border-color:#00a76f;transform:translate(-2px)}.brand-divider{width:1px;height:28px;background:var(--border-subtle)}.brand-titles{display:flex;flex-direction:column}.brand-main{font-size:1.1rem;font-weight:800;color:#fff}.brand-accent-coral{color:var(--accent-coral)}.brand-sub{font-size:var(--text-xs);color:var(--fg-muted)}.nav-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;min-height:var(--min-touch-target);border-radius:999px;font-size:var(--text-sm);font-weight:600}.status-pill.live{background:#10b98126;border:1px solid var(--accent-mint);color:#10b981}.status-pill.sandbox{background:#f59e0b26;border:1px solid var(--accent-amber);color:#fbbf24}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse-dot 2s infinite ease-in-out}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.telemetry-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;min-height:var(--min-touch-target);background:#ffffff0d;border:1px solid var(--border-subtle);border-radius:8px;font-family:var(--font-mono);font-size:var(--text-xs);color:#06b6d4}.btn-reset-demo{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;min-height:var(--min-touch-target);background:#f43f5e26;border:1px solid rgba(244,63,94,.4);border-radius:8px;color:#fda4af;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.btn-reset-demo:hover:not(:disabled){background:#f43f5e47;border-color:var(--accent-coral);color:#fff}.spin-icon{display:inline-block;animation:spin 1s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}.switcher-dropdown-wrap{position:relative}.btn-switcher-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;min-height:var(--min-touch-target);background:#06b6d426;border:1px solid rgba(6,182,212,.35);border-radius:8px;color:#fff;font-size:var(--text-sm);font-weight:600;cursor:pointer}.switcher-menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;background:#0f182c;border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 16px 36px #00000080;padding:.5rem;z-index:100;display:flex;flex-direction:column;gap:.3rem}.switcher-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;text-decoration:none;color:var(--fg-secondary);transition:background .15s ease}.switcher-item:hover,.switcher-item.active{background:#ffffff14}.switcher-item strong{display:block;font-size:var(--text-sm);color:#fff}.switcher-item small{display:block;font-size:var(--text-xs);color:var(--fg-muted)}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.dot-emerald{background:#10b981}.dot-indigo{background:#8b5cf6}.dot-coral{background:#f43f5e}.dot-gold{background:#fbbf24}.relay-main-container{max-width:1300px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.telemetry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.kpi-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;box-shadow:0 0 2px #0003,0 12px 24px -4px #00000029;display:flex;flex-direction:column;gap:.4rem;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .2s ease}.kpi-card:hover{transform:translateY(-2px);border-color:#00a76f52;box-shadow:0 0 2px #0003,0 16px 32px -4px #0000003d}.kpi-card.card-cyan{border-top:3px solid var(--accent-cyan)}.kpi-card.card-mint{border-top:3px solid var(--accent-mint)}.kpi-card.card-amber{border-top:3px solid var(--accent-amber)}.kpi-card.card-coral{border-top:3px solid var(--accent-coral)}.kpi-header{display:flex;justify-content:space-between;align-items:center}.kpi-label{font-size:var(--text-xs);font-weight:700;color:var(--fg-muted);letter-spacing:.05em}.kpi-value{font-size:2rem;font-weight:800;color:#fff}.text-mint{color:#00a76f!important}.text-amber{color:#ffab00!important}.text-coral{color:#ff5630!important}.text-cyan{color:#00b8d9!important}.kpi-subtext{font-size:var(--text-xs);color:var(--fg-muted)}.simulator-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;box-shadow:0 0 2px #0003,0 12px 24px -4px #00000029;display:flex;flex-direction:column;gap:1.25rem}.simulator-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.75rem}.simulator-header h3{margin:0;font-size:1.25rem;color:#fff}.simulator-subtitle{margin:.25rem 0 0;font-size:var(--text-sm);color:var(--fg-muted)}.badge-free{background:#06b6d426;border:1px solid var(--accent-cyan);color:#06b6d4;padding:.3rem .8rem;border-radius:999px;font-size:var(--text-xs);font-weight:700}.simulator-buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}.btn-scenario{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;min-height:var(--min-touch-target);border-radius:12px;cursor:pointer;border:1px solid var(--border-subtle);background:#ffffff08;color:#fff;text-align:left;transition:all .2s ease}.btn-scenario:hover:not(:disabled){transform:translateY(-2px);background:#ffffff14}.btn-scenario:disabled{opacity:.5;cursor:not-allowed}.btn-valid:hover:not(:disabled){border-color:var(--accent-mint);box-shadow:0 4px 16px #10b98133}.btn-duplicate:hover:not(:disabled){border-color:var(--accent-amber);box-shadow:0 4px 16px #f59e0b33}.btn-bad-sig:hover:not(:disabled){border-color:var(--accent-coral);box-shadow:0 4px 16px #f43f5e33}.btn-fail:hover:not(:disabled){border-color:var(--accent-orange);box-shadow:0 4px 16px #f9731633}.btn-scenario-icon{font-size:1.5rem;flex-shrink:0}.btn-scenario strong{display:block;font-size:var(--text-sm)}.btn-scenario small{display:block;font-size:var(--text-xs);color:var(--fg-muted)}.execution-feedback-bar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:8px;font-family:var(--font-mono);font-size:var(--text-sm)}.execution-feedback-bar.success{background:#10b98126;border:1px solid var(--accent-mint);color:#34d399}.execution-feedback-bar.warning{background:#f59e0b26;border:1px solid var(--accent-amber);color:#fbbf24}.execution-feedback-bar.danger{background:#f43f5e26;border:1px solid var(--accent-coral);color:#fda4af}.status-code-badge{padding:.2rem .5rem;border-radius:4px;background:#0000004d;font-weight:700}.backoff-timeline-box{background:#00000040;border:1px solid var(--border-subtle);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.timeline-title{font-size:var(--text-xs);font-weight:700;color:var(--fg-muted)}.timeline-steps{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.step-node{display:flex;align-items:center;gap:.5rem;font-size:var(--text-xs);color:var(--fg-muted)}.step-node.active{color:#34d399}.step-node.danger{color:#fda4af}.node-circle{width:28px;height:28px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-xs)}.step-node.active .node-circle{background:#10b981;color:#fff}.step-node.danger .node-circle{background:#f43f5e;color:#fff}.timeline-line{flex:1;height:2px;background:var(--border-subtle);min-width:20px}.dlq-section-card,.table-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.dlq-header,.table-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.dlq-header h3,.table-header h3{margin:0;font-size:1.2rem;color:#fff}.dlq-subtitle,.table-subtitle{margin:.25rem 0 0;font-size:var(--text-sm);color:var(--fg-muted)}.dlq-counter-pill{background:#f43f5e26;border:1px solid var(--accent-coral);color:#f43f5e;padding:.3rem .8rem;border-radius:999px;font-size:var(--text-xs);font-weight:700}.empty-dlq-state{text-align:center;padding:2rem;color:var(--fg-muted)}.empty-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.swipe-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:10px}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);text-align:left;min-width:650px}.data-table th{background:#ffffff0d;color:var(--fg-muted);font-weight:600;padding:.85rem 1rem;border-bottom:1px solid var(--border-subtle)}.data-table td{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--fg-secondary)}.mono-text{font-family:var(--font-mono);font-size:var(--text-xs)}.btn-inspect-link{background:none;border:none;color:#06b6d4;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;text-decoration:underline}.btn-replay-action{background:var(--gradient-sunset);border:none;border-radius:6px;color:#fff;padding:.4rem .8rem;min-height:38px;font-weight:700;font-size:var(--text-xs);cursor:pointer;transition:transform .15s ease}.btn-replay-action:hover:not(:disabled){transform:translateY(-1px)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:200}.inspector-modal{width:100%;max-width:650px;background:#0f182c;border:1px solid rgba(6,182,212,.5);border-radius:16px;box-shadow:0 24px 60px #0009,0 0 30px #06b6d426;padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title-row{display:flex;align-items:center;gap:.75rem}.modal-title-row h3{margin:0;font-size:1.2rem;color:#fff}.modal-sub{font-size:var(--text-xs);color:var(--fg-muted)}.btn-close-modal{background:none;border:none;color:var(--fg-muted);font-size:1.2rem;cursor:pointer}.info-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:var(--text-sm)}.info-label{color:var(--fg-muted)}.badge-status-valid{color:#34d399;font-weight:700}.payload-box{margin-top:.75rem;background:#0006;border:1px solid var(--border-subtle);border-radius:8px;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.payload-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--fg-muted)}.btn-copy-payload{background:#ffffff1a;border:none;border-radius:4px;color:#fff;font-size:var(--text-xs);padding:.2rem .5rem;cursor:pointer}.payload-code{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);color:#38bdf8;max-height:220px;overflow-y:auto}.btn-done-modal{width:100%;min-height:var(--min-touch-target);background:var(--gradient-cyan-blue);border:none;border-radius:10px;color:#fff;font-size:var(--text-base);font-weight:700;cursor:pointer}