/* The macOS installer part of /demo/: the look of the macOS Installer (a .pkg built by conda constructor), System Settings, Finder and the
   Gatekeeper messages in dark mode, drawn from their wording. Colours are sampled from real captures; nothing here is a screenshot. */
.mi { font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: #e8e8ea; min-height: 24rem; background: #14161a; }
.mi__desk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 24rem; padding: 1.2rem; position: relative;
  background: radial-gradient(circle at 20% 15%, #3b3357 0, #1d2030 45%, #12141a 100%); }
.mi__win { width: 100%; max-width: 46rem; overflow: hidden; background: #26282c; border: 1px solid #4a4c52; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.mi__bar { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .55rem .8rem; color: #b9bbc0; font-weight: 600; background: #2c2e33; }
.mi__lights { display: inline-flex; gap: .4rem; margin-right: .4rem; }
.mi__lights i { width: .8rem; height: .8rem; border-radius: 50%; background: #ff5f57; } .mi__lights i + i { background: #febc2e; } .mi__lights i + i + i { background: #3c3e44; }
.mi__wbody { display: flex; min-height: 16rem; }
.mi__steps { flex: none; width: 11.5rem; margin: 0; padding: 1rem .8rem; list-style: none; background: #000 url("nucleisky-icon.png") no-repeat 50% 60% / 9rem; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .55); }
.mi__steps li { margin: .35rem 0; padding-left: 1.1rem; position: relative; color: #b9bbc0; }
.mi__steps li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: #55575d; }
.mi__steps li[aria-current="step"] { color: #fff; font-weight: 700; } .mi__steps li[aria-current="step"]::before { background: #3478f6; }
.mi__main { flex: 1; min-width: 0; padding: .9rem 1rem 0; }
.mi__head { margin: 0 0 .5rem; font-size: 15px; font-weight: 600; color: #fff; }
.mi__panel { min-height: 11.5rem; padding: .9rem 1rem; background: #222428; border: 1px solid #4a4c52; }
.mi__panel p { margin: 0 0 .7rem; } .mi__panel--work { display: flex; flex-direction: column; justify-content: center; }
.mi__scroll { max-height: 11rem; margin: 0; overflow: auto; } .mi__licence { padding: 0; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; background: transparent; color: #d0d0d3; }
.mi__dim, .mi__small { color: #a4a6ac; } .mi__small { margin: .5rem 0 0; font-size: 13px; }
.mi__buttons { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin: 0; padding: .8rem 1rem; }
.mi__gap { flex: 1; }
.mi__btn { min-width: 5.6rem; min-height: 1.9rem; padding: .2rem .9rem; font: inherit; color: #f2f2f4; background: #3b3d43; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.mi__btn:hover:not(:disabled) { background: #4a4c53; }
.mi__btn--default { background: #1b1c1f; border-color: #8e8f94; } .mi__btn--primary { background: #3478f6; border-color: #3478f6; color: #fff; } .mi__btn--primary:hover:not(:disabled) { background: #4a88f8; }
.mi__btn--soft { background: #3f4147; }
.mi__btn:disabled { color: #77797f; background: #2f3136; cursor: not-allowed; }
.mi__note { margin: .5rem 0 0; color: #a4a6ac; font-size: 13px; } .mi__note--desk { max-width: 24rem; color: #d0d0d6; }
/* the warning boxes of Gatekeeper and the Bin prompt */
.mi__alert { width: 100%; max-width: 23rem; padding: 1.2rem 1.3rem; background: #2d2f35; border: 1px solid #54565c; border-radius: 22px; box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.mi__alert p { margin: 0 0 .7rem; } .mi__atitle { font-weight: 700; color: #fff; }
.mi__warn { display: inline-flex; align-items: flex-end; justify-content: center; width: 4rem; height: 3.6rem; margin-bottom: .8rem; padding-bottom: .15rem; color: #fff; font-size: 1.9rem; font-weight: 800;
  background: linear-gradient(#f4cf63, #d8a920); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mi__abuttons { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; } .mi__abuttons .mi__btn { flex: 1; min-height: 2.2rem; border-radius: 999px; }
.mi__alert--stack .mi__abuttons { flex-direction: column; align-items: stretch; } .mi__alert--stack .mi__btn { flex: none; }
.mi__sheet .mi__abuttons { flex-wrap: wrap; } .mi__sheet .mi__abuttons .mi__btn { flex: none; min-width: 0; border-radius: 7px; }
.mi__behind { width: 100%; max-width: 46rem; opacity: .55; pointer-events: none; } .mi__behind .mi__desk { min-height: 0; padding: 0; background: none; }
.mi__sheet { position: absolute; top: 4.2rem; left: 50%; width: min(34rem, calc(100% - 2rem)); padding: 1.2rem 1.4rem; transform: translateX(-50%); background: #2d2f35; border: 1px solid #5c5e64; border-radius: 22px; box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.mi__sheet p { margin: 0 0 .6rem; }
/* System Settings and Finder */
.mi__win--settings .mi__main { padding-bottom: 1rem; }
.mi__side { flex: none; width: 11rem; margin: 0; padding: .8rem .6rem; list-style: none; background: #232529; color: #d4d4d8; }
.mi__side li { margin: .1rem 0; padding: .25rem .6rem; border-radius: 6px; } .mi__side li.is-on { color: #fff; background: #2f5fcd; }
.mi__ptitle { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 700; color: #fff; } .mi__sect { margin: .8rem 0 .3rem; font-weight: 700; color: #fff; }
.mi__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .5rem; } .mi__row > span:last-child { color: #c4c6cb; }
.mi__card { margin: .4rem 0; padding: .7rem .9rem; background: #2d2f34; border-radius: 10px; } .mi__card .mi__row { margin: 0; }
.mi__fbody { flex: 1; min-width: 0; padding: .9rem 1rem; } .mi__fbody p { margin: 0 0 .5rem; }
.mi__path { color: #c4c6cb; font-size: 13px; }
.mi__file, .mi__app { display: inline-flex; align-items: center; gap: .7rem; margin: .4rem 0; padding: .5rem .7rem; font: inherit; color: inherit; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.mi__file:hover, .mi__file.is-selected, .mi__app:hover, .mi__app.is-selected { background: #3a4a6e; border-color: #4f6aa8; }
.mi__app { flex-direction: column; width: 8rem; text-align: center; gap: .4rem; }
.mi__tile { display: inline-flex; width: 4.4rem; height: 4.4rem; align-items: center; justify-content: center; background: #000; border: 1px solid #55575d; border-radius: 22%; }
[dir] .md-typeset .mi img { background: transparent; border-radius: 4px; } [dir] .md-typeset .mi .mi__tile img { width: 3.6rem; height: 3.6rem; border-radius: 50%; }
.mi__pkg { flex: none; width: 2.4rem; height: 2.1rem; background: linear-gradient(90deg, transparent 44%, #e9d3a0 44% 56%, transparent 56%), linear-gradient(#c89b5a, #a87a3c); border-radius: 4px; }
/* the destination choices */
.mi__ask { margin-bottom: .5rem; } .mi__choices { margin: 0 0 .8rem; padding: 0; list-style: none; border-block: 1px solid #44464c; }
.mi__choice { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; cursor: pointer; } .mi__choice:has(input:checked) { background: #2f5fcd; color: #fff; }
.mi__choice input { accent-color: #fff; }
.mi__home, .mi__disk { flex: none; width: 1.7rem; height: 1.3rem; border-radius: 3px; background: #66b3ee; } .mi__disk { height: 1.5rem; background: #aaadb4; }
.mi__space { font-weight: 600; }
/* the progress page */
.mi__stage { font-size: 15px; font-weight: 700; color: #fff; } .mi__stage span[hidden] { display: none; }
.mi__bar2 { height: .55rem; margin: .4rem 0 1rem; overflow: hidden; background: #3b3d43; border-radius: 999px; } .mi__bar2 span { display: block; width: 0; height: 100%; background: #3478f6; }
@media (max-width: 40rem) { .mi__buttons { flex-wrap: wrap; } .mi__sheet { top: 2rem; } }
@media (forced-colors: active) { .mi__steps li[aria-current="step"] { outline: 2px solid Highlight; } .mi__btn:disabled { color: GrayText; } }
[dir] .md-typeset .mi :is(ul, ol) { margin-left: 0; list-style: none; }   /* the site's list style would add bullets and an indent inside the windows */
[dir] .md-typeset .mi li { margin-left: 0; }
[dir] .md-typeset .mi .mi__steps { padding: 1rem .8rem; } [dir] .md-typeset .mi .mi__side { padding: .8rem .6rem; } [dir] .md-typeset .mi .mi__choices { margin: 0 0 .8rem; padding: 0; }
@media (max-width: 40rem) { [dir] .md-typeset .mi .mi__steps, [dir] .md-typeset .mi .mi__side { display: none; } }   /* the phases list and the sidebar give way on a phone */
[dir] .md-typeset .mi pre.mi__licence { padding: 0; color: #d0d0d3; background: transparent; }   /* the site colours <pre> for light pages */