.theory-flow-interactive{overflow:visible}.theory-interactive-body{display:grid;gap:16px;padding:18px;background:var(--surface)}.theory-interactive-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.theory-interactive-field{display:grid;gap:7px;color:var(--text-muted);font:600 12px var(--font-code)}.theory-interactive-field input,.theory-interactive-field select{width:100%}.inline-control,.interactive-actions button,.segmented-control button,.theory-interactive-field select{min-height:38px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-raised);color:var(--text);padding:8px 11px;font:600 12px var(--font-code)}.box-model-stage{display:grid;place-items:center;min-height:260px;overflow:auto;background:var(--surface-subtle);border-radius:10px}.box-border,.box-margin,.box-padding{position:relative;display:grid;place-items:center;transition:padding .2s,border-width .2s}.box-margin{background:color-mix(in srgb,var(--accent) 14%,transparent)}.box-border{border-style:solid;border-color:var(--accent);background:var(--surface-raised)}.box-padding{background:color-mix(in srgb,#38bdf8 16%,var(--surface))}.box-border>span,.box-margin>span,.box-padding>span{position:absolute;left:5px;top:3px;color:var(--text-muted);font:10px var(--font-code)}.box-content{width:160px;padding:30px 8px;text-align:center;background:var(--editor-bg);color:var(--editor-text);font:12px var(--font-code)}.layout-stage{min-height:220px;padding:16px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface-subtle)}.flex-stage{display:flex;overflow:auto}.grid-stage{display:grid}.layout-item{display:grid;place-items:center;min-width:50px;min-height:46px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border));border-radius:8px;background:var(--accent-subtle);color:var(--text);font:700 13px var(--font-code)}.interactive-code{margin:0;padding:14px;border-radius:9px;background:var(--editor-bg);color:var(--editor-text);overflow:auto;font:12px/1.65 var(--font-code)}.segmented-control{display:flex;flex-wrap:wrap;gap:8px}.segmented-control button[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:white}.responsive-viewport{max-width:100%;margin:auto;border:8px solid var(--editor-border);border-radius:14px;background:var(--surface-raised);transition:width .25s}.responsive-viewport header{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border)}.responsive-viewport main{display:grid;gap:8px;padding:12px}.responsive-viewport main.is-wide{grid-template-columns:repeat(3,1fr)}.responsive-viewport main div{padding:18px 8px;text-align:center;border-radius:7px;background:var(--accent-subtle)}.trace-status{display:grid;gap:10px;padding:18px;border-left:3px solid var(--accent);border-radius:8px;background:var(--editor-bg);color:var(--editor-text)}.trace-status span{color:var(--editor-muted);font:11px var(--font-code)}.trace-status code{color:var(--syntax-keyword);font:14px var(--font-code)}.trace-status p{margin:0;color:var(--editor-muted)}.interactive-actions{display:flex;flex-wrap:wrap;gap:8px}.interactive-actions button:first-child:not(:disabled),.interactive-actions button:nth-child(2):not(:disabled){border-color:var(--accent)}.interactive-actions button:disabled{opacity:.45}.collection-stage{display:flex;flex-wrap:wrap;gap:8px}.collection-stage div{min-width:90px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-raised)}.collection-stage span,.collection-stage strong{display:block;padding:7px 10px}.collection-stage span{color:var(--text-muted);background:var(--surface-subtle);font:11px var(--font-code)}.collection-stage strong{font:600 13px var(--font-code)}.theory-interactive-explanation{margin:0;color:var(--text-muted);font-size:14px;line-height:1.6}.theory-interactive-explanation code{color:var(--accent);font-family:var(--font-code)}.sql-transform{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}.join-sources h3,.sql-transform h3,.theory-interactive-body>h3{margin:0 0 8px;font-size:12px}.sql-arrow{color:var(--accent);font-size:24px}.mini-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--border);border-radius:8px}.mini-table-wrap table{width:100%;border-collapse:collapse;font-size:12px}.mini-table-wrap td,.mini-table-wrap th{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.mini-table-wrap th{color:var(--text-muted);font-family:var(--font-code)}.mini-table-wrap tr:last-child td{border-bottom:0}.join-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sql-column-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:9px;color:var(--text-muted);font:12px var(--font-code)}@media(max-width:680px){.theory-interactive-body{padding:14px}.sql-transform{grid-template-columns:1fr}.sql-arrow{transform:rotate(90deg);justify-self:center}.join-sources{grid-template-columns:1fr}.box-model-stage{min-height:230px}.responsive-viewport main.is-wide{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.box-border,.box-margin,.box-padding,.responsive-viewport{transition:none}}