:root{--bg:#fff;--fg:#1a1a1a;--muted:#6b7280;--border:#e2e2e2;--accent:#2563eb;--ok:#16a34a;--fault:#d97706;--error:#dc2626;font-family:system-ui,-apple-system,sans-serif;line-height:1.6}@media (prefers-color-scheme:dark){:root{--bg:#17181c;--fg:#e6e6e6;--muted:#9ca3af;--border:#33343a}}:root[data-theme=light]{--bg:#fff;--fg:#1a1a1a;--muted:#6b7280;--border:#e2e2e2}:root[data-theme=dark]{--bg:#17181c;--fg:#e6e6e6;--muted:#9ca3af;--border:#33343a}body{background:var(--bg);min-height:100vh;color:var(--fg);margin:0}.dashboard{max-width:1100px;margin:0 auto;padding:2rem}.dashboard__header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.dashboard__panels{grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr);align-items:start;gap:1.5rem;display:grid}.state-panel,.event-log,.token-gate{border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem}.state-panel dl{grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:.5rem 0 1.5rem;display:grid}.state-panel dt{color:var(--muted)}.state-panel pre,.event-row__detail{background:color-mix(in srgb, var(--fg) 5%, transparent);border-radius:4px;margin:0;padding:.5rem;overflow-x:auto}.event-log__list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.event-row__summary{text-align:left;border:1px solid var(--border);width:100%;color:var(--fg);cursor:pointer;background:0 0;border-radius:6px;gap:.75rem;padding:.4rem .6rem;display:flex}.event-row--ok .event-row__outcome{color:var(--ok)}.event-row--fault .event-row__outcome{color:var(--fault)}.event-row--error .event-row__outcome{color:var(--error)}.event-row__time{color:var(--muted)}.theme-toggle{border:1px solid var(--border);color:var(--fg);cursor:pointer;background:0 0;border-radius:6px;padding:.4rem .8rem}.subapp-bar{flex-flow:row;gap:.75rem;width:100%;margin-bottom:1.5rem;display:flex}.subapp-box{border:1px solid var(--border);background:var(--bg);border-radius:8px;flex:1 1 0;align-items:stretch;min-width:0;transition:all .15s;display:flex;overflow:hidden}.subapp-box__main-btn{text-align:left;cursor:pointer;min-width:0;color:var(--fg);background:0 0;border:none;flex-direction:column;flex:1 1 0;justify-content:center;gap:.2rem;padding:.65rem .85rem;display:flex}.subapp-box__title-row{align-items:center;gap:.45rem;display:flex}.subapp-box__icon{flex-shrink:0;font-size:.95rem}.subapp-box__name{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.subapp-box__status-row{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.subapp-box__role{color:var(--muted)}.subapp-box__badge-active{letter-spacing:.02em;font-weight:700}.subapp-box__tab-link{border-left:1px solid var(--border);color:var(--muted);white-space:nowrap;background:color-mix(in srgb, var(--fg) 2%, transparent);flex-shrink:0;justify-content:center;align-items:center;padding:0 .65rem;font-size:.72rem;font-weight:600;text-decoration:none;transition:background .15s,color .15s;display:flex}.subapp-box__tab-link:hover{background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg)}.subapp-box--active{cursor:default;opacity:1}.subapp-box--active .subapp-box__main-btn{cursor:default}.subapp-box--mgmt.subapp-box--active{background:color-mix(in srgb, #6366f1 12%, var(--bg));border:2px solid #6366f1}.subapp-box--mgmt.subapp-box--active .subapp-box__name,.subapp-box--mgmt.subapp-box--active .subapp-box__badge-active{color:#6366f1}.subapp-box--consumer.subapp-box--active{background:color-mix(in srgb, #10b981 12%, var(--bg));border:2px solid #10b981}.subapp-box--consumer.subapp-box--active .subapp-box__name,.subapp-box--consumer.subapp-box--active .subapp-box__badge-active{color:#059669}.subapp-box--provider.subapp-box--active{background:color-mix(in srgb, #0284c7 12%, var(--bg));border:2px solid #0284c7}.subapp-box--provider.subapp-box--active .subapp-box__name,.subapp-box--provider.subapp-box--active .subapp-box__badge-active{color:#0284c7}.subapp-box--inactive{opacity:.65;border-style:dashed}.subapp-box--inactive:hover{opacity:.95;border-style:solid;border-color:var(--accent);background:color-mix(in srgb, var(--fg) 3%, var(--bg))}.badge--mgmt{color:#6366f1;background:#6366f126}.badge--consumer{color:#059669;background:#10b98126}.badge--provider{color:#0284c7;background:#0284c726}.card--subapp-mgmt{border-top:4px solid #6366f1}.card--subapp-consumer{border-top:4px solid #10b981}.card--subapp-provider{border-top:4px solid #0284c7}.nav-bar{border-bottom:1px solid var(--border);margin-bottom:1.5rem}.nav-bar__list{gap:.5rem;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.nav-bar__button{color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:.5rem;padding:.6rem .9rem;font-size:.95rem;font-weight:500;transition:color .15s,border-color .15s;display:inline-flex}.nav-bar__button:hover{color:var(--fg)}.nav-bar__button--active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.nav-bar__badge{background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent);border-radius:9999px;padding:.15rem .4rem;font-size:.75rem}.workspace{flex-direction:column;gap:1.5rem;display:flex}.card{border:1px solid var(--border);background:color-mix(in srgb, var(--fg) 2%, var(--bg));border-radius:8px;padding:1.25rem 1.5rem}.card h2,.card h3,.card p{margin-top:0;margin-bottom:.75rem}.badge{text-transform:uppercase;letter-spacing:.03em;border-radius:4px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.badge--oauth{color:#2563eb;background:#3b82f626}.badge--oidc,.badge--method-get{color:#059669;background:#10b98126}.badge--method-post{color:#2563eb;background:#3b82f626}.btn{cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:6px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:color-mix(in srgb, var(--fg) 6%, var(--bg))}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:hover{background:color-mix(in srgb, var(--accent) 85%, #000)}.btn--secondary{background:color-mix(in srgb, var(--fg) 5%, transparent)}.btn--danger{color:var(--error);border-color:color-mix(in srgb, var(--error) 40%, transparent)}.btn--danger:hover{background:color-mix(in srgb, var(--error) 10%, transparent)}.table-container{width:100%;overflow-x:auto}.table{border-collapse:collapse;text-align:left;width:100%;font-size:.9rem}.table th,.table td{border-bottom:1px solid var(--border);padding:.65rem .85rem}.table th{color:var(--muted);background:color-mix(in srgb, var(--fg) 3%, transparent);font-weight:600}.table tr:last-child td{border-bottom:none}.grid-two-col{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem;display:grid}pre.code-block{background:color-mix(in srgb, var(--fg) 6%, transparent);border:1px solid var(--border);border-radius:6px;margin:.5rem 0;padding:.75rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto}.callout{border-left:4px solid var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:0 6px 6px 0;margin:.75rem 0;padding:.85rem 1rem;font-size:.9rem}.callout--info{border-left-color:var(--accent)}.callout--highlight{background:#10b98114;border-left-color:#10b981}.callout--warn{border-left-color:var(--fault);background:color-mix(in srgb, var(--fault) 8%, transparent)}.endpoint-link{color:var(--accent);align-items:center;gap:.35rem;font-family:ui-monospace,monospace;font-size:.85rem;text-decoration:none;display:inline-flex}.endpoint-link:hover{text-decoration:underline}@media (width<=768px){.dashboard{padding:1rem}.dashboard__panels,.grid-two-col{grid-template-columns:1fr}}.delay-selector{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.delay-chip{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:9999px;padding:.25rem .65rem;font-size:.8rem;font-weight:500;transition:all .15s}.delay-chip:hover{color:var(--fg);border-color:var(--accent)}.delay-chip--active{background:var(--accent);border-color:var(--accent);color:#fff}.countdown-banner{border:2px solid var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--bg));border-radius:8px;flex-direction:column;gap:.75rem;margin:1rem 0;padding:1.25rem;display:flex}.countdown-banner__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.countdown-banner__timer{color:var(--accent);align-items:center;gap:.5rem;font-size:1.15rem;font-weight:700;display:inline-flex}.scenario-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin:.75rem 0;display:grid}.scenario-card{border:1px solid var(--border);background:var(--bg);cursor:pointer;text-align:left;border-radius:6px;padding:.75rem 1rem;transition:border-color .15s,background .15s}.scenario-card:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--bg))}.scenario-card--active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--bg));box-shadow:0 0 0 1px var(--accent)}.scenario-card h5{margin:0 0 .35rem;font-size:.9rem}.scenario-card p{color:var(--muted);margin:0;font-size:.78rem}.flow-timeline{flex-direction:column;gap:.75rem;margin:1rem 0;display:flex}.flow-timeline__step{grid-template-columns:36px 1fr;align-items:start;gap:1rem;display:grid;position:relative}.flow-timeline__badge{background:color-mix(in srgb, var(--accent) 15%, transparent);width:32px;height:32px;color:var(--accent);border:1px solid var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.flow-timeline__body{border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);padding-bottom:.75rem}.flow-timeline__step:last-child .flow-timeline__body{border-bottom:none}.flow-timeline__title{margin-bottom:.25rem;font-size:.95rem;font-weight:600}.flow-timeline__desc{color:var(--muted);margin:0;font-size:.85rem}.foldable-card{padding:0;transition:border-color .15s;overflow:hidden}.foldable-card__header-btn{cursor:pointer;width:100%;color:var(--fg);text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.15rem;display:flex}.foldable-card__header-btn:hover{background:color-mix(in srgb, var(--fg) 3%, transparent)}.foldable-card__title-group{align-items:center;gap:.65rem;display:flex}.foldable-card__chevron{color:var(--muted);width:14px;font-size:.72rem;display:inline-block}.foldable-card__relevance{color:var(--muted);white-space:nowrap;font-size:.75rem;font-style:italic}.foldable-card__body{border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent);padding:.85rem 1.15rem 1.15rem}.card--consumer-surface{background:color-mix(in srgb, #10b981 7%, var(--card-bg));border:2px solid #10b981}.card--telemetry{background:color-mix(in srgb, #6366f1 5%, var(--card-bg));border-left:4px solid #6366f1}.card--scenarios{background:color-mix(in srgb, #d97706 5%, var(--card-bg));border-left:4px solid #d97706}.card--pacing{background:color-mix(in srgb, #0284c7 5%, var(--card-bg));border-left:4px solid #0284c7}.card--explainer-doc{background:color-mix(in srgb, #8b5cf6 5%, var(--card-bg));border-left:4px solid #8b5cf6}.card--tech-config{background:color-mix(in srgb, #64748b 5%, var(--card-bg));border-left:4px solid #64748b}.tooling-divider{align-items:center;gap:1rem;margin:1.5rem 0 .5rem;display:flex}.tooling-divider__line{background:var(--border);flex:1;height:1px}.tooling-divider__title{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;display:flex}.foldable-card .card{background:0 0;border:none;padding:0}.foldable-card .card--sub{border:1px solid var(--border);background:color-mix(in srgb, var(--fg) 3%, transparent);padding:1rem 1.25rem}
