html,body { margin:0; padding:0; background:transparent; }
body { color:rgb(var(--fg-primary)); font-family:var(--font-primary,system-ui); font-size:1rem; line-height:1.5; }
* { box-sizing:border-box; }
#installer { padding:1.25rem; }
.install-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem; }
.install-heading h2 { margin:0; font-family:inherit; font-size:1.25rem; line-height:1.4; letter-spacing:-.02em; }
.install-heading span,.install-detection,.install-note,.install-links,.install-feedback { font-size:.8125rem; line-height:1.5; }
.install-detection { margin:.25rem 0 .5rem; color:rgb(var(--fg-secondary)); }
.install-tabs { max-width:100%; overflow-x:auto; overflow-y:hidden; }
/* Public retained panels share one grid cell: the tallest sets the space for every tab. */
.install-methods { display:grid; grid-template-columns:minmax(0,1fr); }
.install-method-bar { grid-area:1 / 1; display:flex; align-items:stretch; min-width:0; }
.install-methods > [role="tabpanel"] { grid-area:2 / 1; min-width:0; }
.install-methods > [role="tabpanel"][hidden] { display:block; visibility:hidden; pointer-events:none; }
.install-panel { padding-top:1rem; height:100%; display:flex; flex-direction:column; }
.install-command { display:flex; align-items:center; gap:.25rem; padding-right:.25rem; border:1px solid rgb(var(--border-secondary)); border-radius:.5rem; overflow:hidden; }
.install-command pre { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:.75rem; font-family:var(--font-secondary,monospace); font-size:.875rem; line-height:1.6; overflow:auto; }
.install-command code { font:inherit; color:rgb(var(--fg-primary)); }
.install-note { color:rgb(var(--fg-secondary)); margin:.5rem 0; }
.install-links { margin-top:auto; padding-top:.75rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
a { color:rgb(var(--fg-brand)); text-underline-offset:.2em; }
a:focus-visible,pre:focus-visible { outline:2px solid rgb(var(--border-focus)); outline-offset:3px; }
.install-feedback { display:grid; margin-top:.5rem; }
.install-feedback > * { grid-area:1 / 1; margin:0; font:inherit; }
.install-feedback-space { visibility:hidden; }
.install-copy { flex:none; min-height:2.75rem; }
.install-unavailable p { margin:0 0 .75rem; font-size:.875rem; }
@media(max-width:24rem) { #installer { padding:.75rem; } }
/* The fallback must stay usable while CDN modules are unavailable. */
#installer > h2 { font:600 1.25rem/1.4 var(--font-primary,system-ui); margin:0 0 .75rem; letter-spacing:normal; }
#installer > pre { overflow:auto; max-width:100%; font-size:.875rem; line-height:1.6; }
#installer > p,#installer > a { font-size:.8125rem; line-height:1.5; }

.install-version { min-width:calc(8ch + 1rem + 2px); text-align:center; padding:.125rem .5rem; border:1px solid rgb(var(--border-secondary)); border-radius:.375rem; color:rgb(var(--fg-secondary)); font-family:var(--font-secondary,monospace); white-space:nowrap; }
.install-code-command { color:rgb(var(--fg-primary)); font-weight:600; }
.install-command .install-code-value { color:rgb(var(--fg-brand)); }
.install-code-flag { color:rgb(var(--fg-secondary)); }

.install-heading h2,.install-note,.install-detection,.install-links { overflow-wrap:anywhere; }

/* Stronger semantic text keeps 80% glass readable over the dark planet limb. */
.light-theme #installer { --fg-secondary:var(--slate-12); --fg-brand:var(--iris-12); }

.install-code-command,.install-code-flag { white-space:nowrap; }

/* The menu button is beside the tablist, never nested inside a tab button. */
.install-tabs { flex:0 1 auto; min-width:0; }
.install-tab { padding:.625rem .5rem; font-size:.875rem; }
.install-tab[data-value="npm"] { min-width:4.75rem; }
.install-package-label { display:inline-flex; align-items:center; gap:.375rem; white-space:nowrap; }
.install-brand-icon { width:1.125rem; height:1.125rem; flex:none; }
.install-package-trigger { flex:none; width:2rem; min-height:2.75rem; padding:0; display:grid; place-items:center; color:rgb(var(--fg-secondary)); background:transparent; border:0; border-bottom:1px solid rgb(var(--border-secondary)); border-radius:0; }
.install-package-trigger:hover,.install-package-trigger[data-state="open"] { color:rgb(var(--fg-primary)); background:rgb(var(--bg-hover)); }
.install-package-trigger:focus-visible { outline:2px solid rgb(var(--border-focus)); outline-offset:-2px; }
.install-package-menu { max-height:calc(100dvh - 1rem); overflow-y:auto; }
.install-package-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.25rem; font-size:.875rem; }
/* All package variants participate in sizing, just like the four retained tabs. */
.install-package-panels { display:grid; height:100%; min-width:0; }
.install-package-panels > [data-package-panel] { grid-area:1 / 1; min-width:0; }
.install-package-panels > [hidden] { display:block; visibility:hidden; pointer-events:none; }

/* Stack tab icons above names when a phone cannot fit all four labels in one row. */
@media(max-width:24rem) {
  .install-method-label { flex-direction:column; gap:.25rem; }
  .install-tab { padding:.5rem .375rem; }
}

.install-tool-trigger { display:inline-flex; align-items:center; gap:.5rem; padding:0; border:0; border-radius:.25rem; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; }
.install-tool-trigger:hover { color:rgb(var(--fg-brand)); }
.install-tool-trigger:focus-visible { outline:2px solid rgb(var(--border-focus)); outline-offset:4px; }
.install-tool-panels { display:grid; min-width:0; }
.install-tool-panels > [data-tool-panel] { grid-area:1 / 1; min-width:0; }
.install-tool-panels > [hidden] { display:block; visibility:hidden; pointer-events:none; }
.install-tool-panels > .install-mg-panel { display:flex; flex-direction:column; gap:.5rem; }