.runtime-security { border-color: rgba(86, 227, 215, .35); }
.integration-flow { display: grid; gap: 18px; }
.doc-link { display: inline-block; margin-top: 7px; color: var(--accent); text-decoration: none; }
.doc-link:hover { text-decoration: underline; }
.flow-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow-steps li { position: relative; display: grid; align-content: start; gap: 6px; min-height: 110px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); counter-increment: flow; }
.flow-steps li::before { content: counter(flow); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #071015; background: var(--accent); font-weight: 800; }
.flow-steps span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.runtime-grid > :first-child { grid-column: 1 / -1; }
.form-stack fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.form-stack legend { padding: 0 7px; color: var(--muted); font-size: .82rem; }
.mode-options { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.mode-options label { display: flex; grid-template-columns: none; align-items: center; gap: 7px; }
.mode-options input { width: auto; }
.code-card { min-width: 0; margin: 0; }
.code-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-heading h3 { margin: 0; }
.code-card pre { overflow: auto; min-height: 210px; padding: 16px; border-radius: 10px; color: #cde8e5; background: #070a0e; font: .78rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre; }
.protocol-card { display: grid; align-content: start; gap: 14px; }
.protocol-card h3,.protocol-card p { margin: 0; }
.protocol-list { display: grid; gap: 9px; margin: 0; }
.protocol-list div { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.protocol-list dt { color: var(--muted); }
.protocol-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.callout { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 7px; color: var(--muted); background: rgba(86,227,215,.07); font-size: .8rem; line-height: 1.55; }
.callout.warning { border-left-color: #ffbe5c; background: rgba(255,190,92,.08); }
.compatibility-card { display: grid; gap: 18px; }
.capability-pass { color: #73e6a0; }
.capability-warn { color: #ffbe5c; }
.capability-fail { color: #ff7f8b; }
.platform-notes { display: grid; gap: 8px; }
.platform-notes p { margin: 0; color: var(--muted); line-height: 1.55; }
.tts-demo { display: grid; gap: 12px; }
.tts-demo output { display: block; color: var(--muted); font-size: .78rem; }
.tts-demo input[type="range"] { padding: 0; }
.runtime-preview-dialog { width: min(1800px,calc(100vw - 20px)); height: calc(100vh - 20px); max-height: none; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: #0a0e14; box-shadow: 0 30px 100px rgba(0,0,0,.72); }
.runtime-preview-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(5px); }
.runtime-preview-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 14px; }
.runtime-preview-heading { z-index: 4; display: flex; align-items: start; justify-content: space-between; gap: 18px; margin: -18px -18px 0; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); background: rgba(10,14,20,.96); backdrop-filter: blur(14px); }
.runtime-preview-heading h2,.runtime-preview-heading p { margin: 0; }
.runtime-preview-heading .muted { margin-top: 5px; }
.runtime-experience-grid { display: grid; grid-template-columns: minmax(230px,.62fr) minmax(520px,1.75fr) minmax(300px,.78fr); gap: 14px; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.runtime-input-pane,.runtime-calibration-pane { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; }
.runtime-input-pane { align-content: start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.runtime-input-pane h3,.runtime-input-pane p { margin: 0; }
.runtime-input-panel { display: grid; gap: 12px; }
.runtime-input-panel > button { width: 100%; }
.runtime-preview-pane { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px; min-width: 0; min-height: 0; }
.runtime-profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.runtime-profile-toolbar > div:first-child { display: grid; gap: 2px; }
.runtime-profile-toolbar small { color: var(--muted); font-size: .72rem; }
.runtime-profile-options { display: flex; gap: 7px; }
.runtime-profile-button { display: grid; min-width: 76px; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #0b1017; cursor: pointer; }
.runtime-profile-button strong { color: var(--text); }
.runtime-profile-button span { font-size: .68rem; }
.runtime-profile-button.active { border-color: var(--accent); color: var(--accent); background: rgba(86,227,215,.1); box-shadow: 0 0 0 2px rgba(86,227,215,.08); }
.runtime-profile-button:disabled { opacity: .55; cursor: wait; }
.runtime-calibration-pane { align-self: stretch; height: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.runtime-mouth-calibration { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.runtime-calibration-heading { display: grid; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.runtime-calibration-heading > div:first-child { display: grid; gap: 3px; }
.runtime-calibration-heading small { color: var(--muted); font-size: .72rem; }
.runtime-calibration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.runtime-calibration-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.runtime-calibration-grid label { display: grid; gap: 8px; color: var(--muted); font-size: .78rem; }
.runtime-calibration-grid label > span { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.runtime-calibration-grid code { grid-column: 1; color: #718296; font-size: .68rem; }
.runtime-calibration-grid output { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); font-size: .9rem; font-weight: 800; }
.runtime-calibration-grid input[type="range"] { width: 100%; padding: 0; accent-color: var(--accent); cursor: ew-resize; }
.runtime-stage { display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); background: repeating-conic-gradient(#111821 0 25%,#0c1118 0 50%) 50%/24px 24px; }
.runtime-stage kasamila-avatar { width: 100%; height: 100%; min-height: 0; }
.form-stack textarea { width: 100%; resize: vertical; padding: 12px 14px; color: var(--text); background: #090c11; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.key-secret { border-color: rgba(255, 190, 92, .5); background: rgba(255, 190, 92, .08); }
.secret-row { display: flex; align-items: center; gap: 12px; }
.secret-row code { flex: 1; overflow: auto; padding: 12px; border-radius: 8px; color: #ffe0a8; background: #090c11; white-space: nowrap; }
.key-card { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.key-card h3,.key-card p { margin: 0; }
.key-origins { display: flex; flex-wrap: wrap; gap: 6px; }
.key-origins code { padding: 4px 7px; border-radius: 6px; color: var(--muted); background: #090c11; font-size: .72rem; }
@media (max-width: 1200px) { .flow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); } .runtime-experience-grid { grid-template-columns: minmax(220px,.6fr) minmax(430px,1.5fr) minmax(280px,.75fr); } .runtime-profile-toolbar { align-items: stretch; flex-direction: column; } }
@media (max-width: 980px) { .runtime-grid { grid-template-columns: 1fr; } .runtime-grid > :first-child { grid-column: auto; } .flow-steps { grid-template-columns: 1fr; } .runtime-preview-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); padding: 14px; overflow: auto; } .runtime-preview-dialog[open] { display: block; } .runtime-preview-heading { position: sticky; top: -14px; margin: -14px -14px 14px; padding: 14px; } .runtime-experience-grid { grid-template-columns: 1fr; height: auto; overflow: visible; } .runtime-preview-pane { min-height: 70vh; } .runtime-calibration-pane { height: auto; max-height: none; overflow: visible; } .runtime-calibration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .runtime-profile-toolbar { align-items: stretch; } .runtime-profile-options { display: grid; grid-template-columns: repeat(2,1fr); } .runtime-profile-button { min-width: 0; } .runtime-calibration-grid { grid-template-columns: 1fr; } .runtime-preview-heading { align-items: stretch; flex-direction: column; } }