.auto{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}.toolbar .seg{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:3px}.toolbar .seg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px}.toolbar .seg button.on{background:var(--navy);color:#fff}#codeTabs{background:#fff;padding:8px 8px 0}#codeTabs [role=tab]{font-family:var(--f-mono);direction:ltr}#codeTabs [role=tab][data-t=html][aria-selected=true]{background:#e44d26}#codeTabs [role=tab][data-t=css][aria-selected=true]{background:#264de4}#codeTabs [role=tab][data-t=js][aria-selected=true]{background:#c9a400}#codeTabs [role=tab][hidden]{display:none}.tabs.light{background:#fff;padding:8px 12px;align-items:center}.ptitle{font-weight:700}.outPane{display:flex;flex-direction:column}.prevWrap{flex:1.4;min-height:200px;background:#fff;border-bottom:1.5px solid var(--line)}.prevWrap iframe{width:100%;height:100%;border:0;display:block;background:#fff}.consoleBox{flex:1;min-height:150px;display:flex;flex-direction:column;background:var(--code-bg);min-height:0}.chead{display:flex;align-items:center;gap:8px;padding:6px 12px;color:#c9d0ea;border-bottom:1px solid #2E3A63;font-size:13px}.chead .clr{all:unset;cursor:pointer;margin-inline-start:auto;color:#c9d0ea;font-size:13px;padding:2px 8px;border-radius:8px}.chead .clr:hover{background:#2e3a63}.out .w{color:#ffe08a}.out .i{color:#8be9fd}body.jsOnly .prevWrap{display:none}body.jsOnly .consoleBox{flex:1}body.jsOnly .tabs.light{display:none}