.code-with-output .cwo-panes{display:grid;gap:0;grid-template-columns:var(--cwo-code-pct, 50%) auto 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch;max-height:min(70vh,720px);overflow:hidden}.code-with-output[data-vertical=true] .cwo-panes{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)}.code-with-output .cwo-pane{display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;border-radius:.5rem;border:1px solid var(--color-border);background-color:var(--color-code-bg)}.code-with-output .cwo-pane-code{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.code-with-output .cwo-pane-output{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.code-with-output[data-vertical=true] .cwo-pane-code{border-radius:.5rem .5rem 0 0;border-right:1px solid var(--color-border);border-bottom:0}.code-with-output[data-vertical=true] .cwo-pane-output{border-radius:0 0 .5rem .5rem;border-left:1px solid var(--color-border);border-top:0}.code-with-output .cwo-splitter{position:relative;width:8px;cursor:col-resize;background-color:var(--color-border);transition:background-color .12s;touch-action:none;border:0;padding:0}.code-with-output .cwo-splitter:hover,.code-with-output .cwo-splitter:focus-visible,.code-with-output .cwo-splitter[data-dragging=true]{background-color:var(--color-accent);outline:none}.code-with-output .cwo-splitter-grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:28px;background-color:var(--color-surface);border-radius:1px;opacity:.5}.code-with-output[data-vertical=true] .cwo-splitter{width:auto;height:8px;cursor:row-resize}.code-with-output[data-vertical=true] .cwo-splitter-grip{width:28px;height:2px}.code-with-output .cwo-header{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-bottom:1px solid var(--color-border);background-color:var(--color-code-header-bg);font-family:var(--font-mono);font-size:.78rem;color:var(--color-code-header-fg);font-weight:500}.code-with-output .cwo-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;flex-shrink:0}.code-with-output .cwo-dot-input{background-color:#818cf8}.code-with-output .cwo-dot-stdin{background-color:#f59e0b}.code-with-output .cwo-dot-output{background-color:#10b981}.code-with-output .cwo-label{letter-spacing:.04em;text-transform:uppercase}.code-with-output .cwo-tabs{display:flex;align-items:stretch;gap:.125rem;margin:-.45rem -.5rem -.45rem 0;overflow-x:auto}.code-with-output .cwo-tab{background:transparent;border:0;padding:.4rem .7rem;font-family:var(--font-mono);font-size:.75rem;color:var(--color-code-header-fg);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.code-with-output .cwo-tab:hover{color:var(--color-fg)}.code-with-output .cwo-tab.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.code-with-output .cwo-body{flex:1;min-width:0;min-height:0;overflow:auto}.code-with-output .cwo-code-body{position:relative}.code-with-output .cwo-case-panels{display:flex;flex-direction:column;flex:1;min-height:0}.code-with-output .cwo-case{display:none;flex-direction:column;flex:1;min-height:0}.code-with-output .cwo-case.is-active{display:flex}.code-with-output .cwo-subpane{display:flex;flex-direction:column;min-height:0}.code-with-output .cwo-case[data-has-input=true] .cwo-subpane-stdin{flex:0 1 auto;max-height:45%;border-bottom:1px solid var(--color-border)}.code-with-output .cwo-case[data-has-input=true] .cwo-subpane-stdout{flex:1 1 auto}.code-with-output .cwo-case[data-has-input=true] .cwo-subpane>.cwo-body{overflow:auto}.code-with-output .cwo-variant{display:none}.code-with-output .cwo-variant.is-active{display:block}.code-with-output .cwo-body pre{margin:0!important;border:0!important;border-radius:0!important;padding:.75rem 1rem!important;background:transparent!important;font-size:.85rem;overflow-x:auto}.code-with-output .cwo-body pre code{background:transparent;padding:0}@media(max-width:640px){.code-with-output .cwo-panes{display:flex;flex-direction:column;gap:0;max-height:none}.code-with-output .cwo-splitter{display:none}.code-with-output .cwo-pane-code{border-radius:.5rem .5rem 0 0;border-right:1px solid var(--color-border);border-bottom:0}.code-with-output .cwo-pane-output{border-radius:0 0 .5rem .5rem;border-left:1px solid var(--color-border);border-top:0}.code-with-output .cwo-case[data-has-input=true] .cwo-subpane-stdin{max-height:none}}