/* EXTRACTED from the design canvas — do not edit by hand. InstallTabs.jsx injects these rules into at runtime (as #itb-style) rather than linking them, because the component is meant to be self-contained. This port renders the component as markup and never runs that file, so its stylesheet has to travel as one: the MCP page links it like any other route sheet. Regenerate by re-running scripts/extract-design-dom.mjs --route mcp and lifting the #itb-style block from the injected-styles.css it writes. */ .itb{border:1px solid var(--border-a,#E3EDE8);border-radius:20px;background:var(--surface,#fff);overflow:hidden}.itb-tabs{position:relative;display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--border-a,#E3EDE8);overflow-x:auto;scrollbar-width:thin}.itb-tab{position:relative;flex:none;border:0;background:none;cursor:pointer;min-height:44px;padding:12px 14px;border-radius:10px 10px 0 0;font:500 14.5px/1 'Poppins',var(--font-body,system-ui);color:var(--ink-mutedb,#4A5652);white-space:nowrap;transition:color .14s ease-out,background-color .14s ease-out}.itb-tab:hover{color:var(--ink-a,#1B1E20);background:var(--mint-50,#F2FBF8)}.itb-tab[aria-selected='true']{color:var(--green-700b,#2A5E44);font-weight:600}.itb-ind{position:absolute;bottom:0;height:2px;border-radius:2px;background:var(--green-500b,#3D825E);transition:left .2s cubic-bezier(.2,.7,.2,1),width .2s cubic-bezier(.2,.7,.2,1)}.itb-body{padding:24px 26px 28px}.itb-panels{display:grid;align-items:start;overflow:hidden;transition:height .2s cubic-bezier(.2,.7,.2,1)}.itb-panel{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:14px;opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility .15s ease-out}.itb-panel.is-on{opacity:1;visibility:visible}.itb-step{margin:0;font:400 15.5px/1.62 'Poppins',var(--font-body,system-ui);color:var(--ink-mutedb,#4A5652);text-wrap:pretty}.itb-step b{color:var(--ink-a,#1B1E20);font-weight:600}.itb-code{position:relative;border-radius:12px;background:var(--green-900b,#0F2B1E)}.itb-code pre{margin:0;padding:16px 56px 16px 18px;overflow-x:auto}.itb-code code{font:400 13.5px/1.6 'JetBrains Mono',ui-monospace,monospace;color:rgba(255,255,255,.92);white-space:pre}.itb-code .tk-c{color:var(--lime,#D5F382)}.itb-code .tk-f{color:rgba(255,255,255,.6)}.itb-code .tk-v,.itb-code .tk-s{color:#8fe4d8}.itb-code .tk-p{color:rgba(255,255,255,.7)}.itb-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;min-width:32px;height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;font:500 12px/1 'Poppins',var(--font-body,system-ui);transition:background-color .14s ease-out,color .14s ease-out}.itb-copy:hover{background:rgba(255,255,255,.12);color:#fff}.itb-copy.is-done{color:var(--lime,#D5F382);background:rgba(213,243,130,.16)}.itb-copy:focus-visible{outline:3px solid rgba(213,243,130,.7);outline-offset:2px}.itb-ic{position:relative;padding:2px 7px;border-radius:6px;background:var(--mint-50,#F2FBF8);border:1px solid var(--border-a,#E3EDE8);font:400 .88em 'JetBrains Mono',ui-monospace,monospace;color:var(--green-800b,#24513B);cursor:pointer;white-space:nowrap;transition:background-color .14s ease-out,border-color .14s ease-out}.itb-ic:hover{background:var(--mint-100,#DBF2E9);border-color:var(--mint-200,#CCEEE3)}.itb-ic.is-done{color:var(--green-700b,#2A5E44)}[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:6px;background:var(--ink-a,#1B1E20);color:#fff;font:500 11px/1 'Poppins',var(--font-body,system-ui);white-space:nowrap;pointer-events:none;z-index:6}.itb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:720px){.itb-body{padding:18px 16px 22px}.itb-code pre{padding:14px 50px 14px 14px}}@media(prefers-reduced-motion:reduce){.itb-ind,.itb-panel,.itb-tab,.itb-copy,.itb-ic,.itb-panels{transition:none}}