/* Windows 11-style launcher layout (assets/js/layout-win11.js): a desktop of
   shortcuts on an original wallpaper, a centred taskbar with a Start menu, and the
   Systems and Themes windows. The system windows themselves are in emulator.css. */

/* ---- The launcher becomes the desktop; the header bar's controls live in the Start menu ---- */

#launcher.oss-alt.oss-layout-win11.active {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
  background: #0b1030;
  color: #fff;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
#launcher.oss-layout-win11 .top,
#launcher.oss-layout-win11 #os-search,
#launcher.oss-layout-win11 .upload-btn,
#launcher.oss-layout-win11 .launcher-tabs,
#launcher.oss-layout-win11 footer { display: none; }
/* The desktop stays up behind the Themes window. */
#launcher.oss-alt.oss-layout-win11.oss-themes-open #oss-stage { display: block; }

.w11 {
  --w11-taskbar: 48px;
  --w11-accent: #4cc2ff;
  position: absolute; inset: 0; overflow: hidden;
  background: #0b1030 url("layout-win11-wallpaper.svg") 50% 50% / cover no-repeat;
  color: #fff; font-size: 14px;
  color-scheme: dark;
  -webkit-user-select: none; user-select: none;
}
@media (orientation: portrait) {
  .w11 { background-position: 70% 50%; }
}

/* ---- Desktop shortcuts, in columns from the top left ---- */

.w11-desktop {
  --w11-cell-w: 80px;
  --w11-cell-h: 90px;
  position: absolute; left: 0; top: 0; right: 0; bottom: var(--w11-taskbar);
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--w11-rows, 8), var(--w11-cell-h));
  grid-auto-columns: var(--w11-cell-w);
  gap: 2px; align-content: start; justify-content: start;
  padding: 6px 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
/* Padding, art, gap and two lines of name add up to the cell's height. */
.w11-icon {
  position: relative; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; height: var(--w11-cell-h);
  padding: 4px 3px 2px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: #fff; font: inherit; font-size: 12px; line-height: 16px; text-align: center;
  cursor: default; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.w11-icon:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.08); }
.w11-icon.is-selected { background: rgba(150, 200, 255, 0.26); border-color: rgba(170, 215, 255, 0.55); }
.w11-icon.is-selected:hover { background: rgba(150, 200, 255, 0.34); }
.w11-icon:focus { outline: none; }
.w11-icon:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.9); outline-offset: -1px; }
.w11-icon-art {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(#ffffff, #e5ebf2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  pointer-events: none;
}
.w11-icon-art img { width: 35px; height: 35px; object-fit: contain; }
.w11-icon-name {
  max-width: 100%; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* As on Windows, the selected shortcut with the focus shows its whole name, over the one below. */
.w11-icon.is-selected:focus { z-index: 1; height: auto; min-height: var(--w11-cell-h); }
.w11-icon.is-selected:focus .w11-icon-name { display: block; overflow: visible; }
.w11-marquee {
  position: absolute; z-index: 2;
  border: 1px solid rgba(120, 190, 255, 0.85); background: rgba(80, 160, 255, 0.22);
  pointer-events: none;
}
.w11-marquee[hidden] { display: none; }
.w11-empty {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  max-width: calc(100% - 32px); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ---- Taskbar ---- */

.w11-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  height: var(--w11-taskbar);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(30, 30, 38, 0.82);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
}
.w11-tasks { display: flex; align-items: center; gap: 4px; }
.w11-taskbtn {
  position: relative; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #fff; cursor: default;
  transition: background-color 0.1s;
}
.w11-taskbtn > * { transition: transform 0.12s cubic-bezier(0.3, 0, 0.3, 1); }
.w11-taskbtn:hover { background: rgba(255, 255, 255, 0.08); }
.w11-taskbtn:active > * { transform: scale(0.84); }
.w11-taskbtn svg { width: 24px; height: 24px; }
button.w11-taskbtn:focus { outline: none; }
button.w11-taskbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.w11-start-logo { width: 26px; height: 26px; }
.w11-start[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
.w11-running[hidden] { display: none; }
.w11-running-art {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(#ffffff, #e5ebf2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.w11-running-art img { width: 20px; height: 20px; object-fit: contain; }
/* The Systems and Themes windows' buttons, beside the running system's */
.w11-appbtn[hidden] { display: none; }
.w11-appbtn-art { display: grid; place-items: center; width: 26px; height: 26px; }
.w11-running::after, .w11-appbtn::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.6); transform: translateX(-50%);
  transition: width 0.2s cubic-bezier(0.1, 0.9, 0.2, 1), background-color 0.2s;
}
.w11-running.is-active, .w11-appbtn.is-active { background: rgba(255, 255, 255, 0.06); }
.w11-running.is-active::after, .w11-appbtn.is-active::after { width: 16px; background: var(--w11-accent); }
.w11-tray { position: absolute; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; }
.w11-tray-more, .w11-tray-icons, .w11-clock { display: flex; align-items: center; height: 40px; border-radius: 4px; }
.w11-tray-more { justify-content: center; width: 28px; }
.w11-tray-icons { gap: 10px; padding: 0 10px; }
.w11-tray svg { width: 16px; height: 16px; }
.w11-tray-more:hover, .w11-tray-icons:hover, .w11-clock:hover { background: rgba(255, 255, 255, 0.08); }
.w11-clock {
  flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 10px;
  font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Start menu ---- */

.w11-menu {
  position: absolute; left: 50%; bottom: calc(var(--w11-taskbar) + 12px); z-index: 90;
  display: flex; flex-direction: column;
  width: min(600px, calc(100% - 16px)); max-height: calc(100% - var(--w11-taskbar) - 24px);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px;
  background: rgba(36, 36, 46, 0.86);
  -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
  outline: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 28px);
  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1), opacity 0.15s linear, visibility 0s 0.15s;
}
.w11-menu.is-open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: transform 0.3s cubic-bezier(0, 0, 0, 1), opacity 0.1s linear, visibility 0s;
}
.w11-menu.is-list { height: min(640px, calc(100% - var(--w11-taskbar) - 24px)); }
.w11-search { position: relative; flex: none; margin: 24px 28px 4px; color: rgba(255, 255, 255, 0.75); }
.w11-search svg { position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); pointer-events: none; }
.w11-query {
  width: 100%; height: 36px; padding: 0 14px 0 40px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 14px;
  -webkit-user-select: text; user-select: text;
}
.w11-query::placeholder { color: rgba(255, 255, 255, 0.62); }
.w11-query:focus { outline: none; background: rgba(26, 26, 32, 0.92); box-shadow: inset 0 -2px 0 var(--w11-accent); }
.w11-menu-body {
  flex: 1 1 auto; min-height: 0; padding-bottom: 12px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.w11-view[hidden] { display: none; }
.w11-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 40px 10px; }
.w11-head h2 { font-size: 14px; font-weight: 600; }
.w11-pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 28px 12px; }
.w11-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 12px;
  border: 0; border-radius: 6px; background: transparent; color: #fff;
  font: inherit; font-size: 12px; line-height: 16px; text-align: center; cursor: default;
}
.w11-tile:hover { background: rgba(255, 255, 255, 0.07); }
.w11-tile:active { background: rgba(255, 255, 255, 0.04); }
.w11-tile-art { width: 40px; height: 40px; transition: transform 0.12s; }
.w11-tile:active .w11-tile-art { transform: scale(0.9); }
.w11-tile-art svg { display: block; width: 100%; height: 100%; }
.w11-list { padding: 0 28px; }
.w11-group { padding: 12px 12px 6px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.86); }
.w11-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 4px 12px;
  border: 0; border-radius: 4px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: default;
}
.w11-row:hover, .w11-row.is-highlighted { background: rgba(255, 255, 255, 0.07); }
.w11-row-art {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(#ffffff, #e5ebf2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.w11-row-art img { width: 24px; height: 24px; object-fit: contain; }
.w11-row-text { display: flex; flex-direction: column; min-width: 0; }
.w11-row-name, .w11-row-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w11-row-name { font-size: 14px; line-height: 19px; }
.w11-row-meta { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.68); }
.w11-best { min-height: 64px; }
.w11-best .w11-row-art { width: 44px; height: 44px; border-radius: 10px; }
.w11-best .w11-row-art img { width: 34px; height: 34px; }
.w11-best .w11-row-name { font-size: 16px; font-weight: 600; line-height: 22px; }
.w11-none { padding: 24px 12px; color: rgba(255, 255, 255, 0.75); }
.w11-menu-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 0 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0 0 8px 8px; background: rgba(0, 0, 0, 0.18);
}
.w11-who { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
.w11-who span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w11-who-icon { flex: none; width: 30px; height: 30px; }
.w11-links { display: flex; flex: none; gap: 4px; }
.w11-link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 0; border-radius: 4px;
  background: transparent; color: #fff; font: inherit; font-size: 12px; text-decoration: none; cursor: pointer;
}
.w11-link:hover { background: rgba(255, 255, 255, 0.07); }
.w11 :is(.w11-tile, .w11-row, .w11-link):focus { outline: none; }
.w11 :is(.w11-tile, .w11-row, .w11-link):focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.w11-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- "Close the running system?" ---- */

.w11-dialog {
  margin: auto; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  background: #2b2b2b; color: #fff; font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.w11-dialog[open] { animation: w11-pop 0.2s cubic-bezier(0.1, 0.9, 0.2, 1); }
.w11-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.w11-dialog-body { padding: 24px; }
.w11-dialog h2 { margin-bottom: 12px; font-size: 20px; font-weight: 600; line-height: 28px; }
.w11-dialog p { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.86); }
.w11-dialog-actions { display: flex; gap: 8px; padding: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: #202020; }
.w11-btn {
  flex: 1 1 0; min-height: 32px; padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px;
  background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; font-size: 14px; cursor: default;
}
.w11-btn:hover { background: rgba(255, 255, 255, 0.1); }
.w11-btn-primary { border-color: transparent; background: var(--w11-accent); color: #000; }
.w11-btn-primary:hover { background: #47b1e8; }
.w11-btn:focus { outline: none; }
.w11-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes w11-pop {
  from { opacity: 0; transform: scale(1.06); }
}

/* ---- Systems and Themes: windows with the same frame, title bar and resize borders as a system's
   (emulator.css). layout-win11.js sets their place, size and z-index. ---- */

.w11-win {
  position: fixed; z-index: 62;
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  background: rgba(32, 32, 40, 0.9);
  -webkit-backdrop-filter: blur(60px) saturate(1.3); backdrop-filter: blur(60px) saturate(1.3);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.3);
  color: #fff; color-scheme: dark; outline: none;
}
.w11-win[hidden] { display: none; }
.w11-win.is-maximized { border-width: 0; border-radius: 0; box-shadow: none; }
.w11-win.is-hiding { pointer-events: none; }
.w11-win.is-minimized { visibility: hidden; }
.w11-titlebar {
  flex: none; display: flex; align-items: center; gap: 10px; height: 32px; padding-left: 12px;
  color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap;
  -webkit-user-select: none; user-select: none; touch-action: none; cursor: default;
}
.w11-win.is-inactive .w11-titlebar { color: rgba(255, 255, 255, 0.5); }
.w11-titlebar-icon { flex: none; width: 16px; height: 16px; pointer-events: none; }
.w11-titlebar-icon svg { display: block; width: 100%; height: 100%; }
.w11-win.is-inactive .w11-titlebar-icon { opacity: 0.6; }
.w11-titlebar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w11-titlebar-buttons { display: flex; flex: none; align-self: stretch; }
.w11-titlebar-buttons button {
  display: grid; place-items: center; width: 46px; height: 100%; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit; cursor: default;
}
.w11-titlebar-buttons svg { display: block; width: 10px; height: 10px; overflow: visible; }
.w11-titlebar-buttons button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.w11-titlebar-buttons button:active { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.75); }
.w11-titlebar .w11-win-close:hover { background: #c42b1c; color: #fff; }
.w11-titlebar .w11-win-close:active { background: #b3271a; color: rgba(255, 255, 255, 0.8); }
.w11-titlebar-buttons button:focus { outline: none; }
.w11-titlebar-buttons button:focus-visible { outline: 1px solid #fff; outline-offset: -3px; }
.w11-win .w11-glyph-restore, .w11-win.is-maximized .w11-glyph-max { display: none; }
.w11-win.is-maximized .w11-glyph-restore { display: block; }
/* The resize borders: a box just larger than the window (6 px each side, 10 px on touch screens), over it. */
.w11-edges { position: fixed; z-index: 63; pointer-events: none; --edge: 6px; }
.w11-edges[hidden] { display: none; }
.w11-resize { position: absolute; pointer-events: auto; touch-action: none; }
.w11-resize[data-edge="n"] { top: 0; left: calc(var(--edge) + 10px); right: calc(var(--edge) + 10px); height: calc(var(--edge) + 2px); cursor: n-resize; }
.w11-resize[data-edge="s"] { bottom: 0; left: calc(var(--edge) + 10px); right: calc(var(--edge) + 10px); height: calc(var(--edge) + 3px); cursor: s-resize; }
.w11-resize[data-edge="e"] { right: 0; top: calc(var(--edge) + 10px); bottom: calc(var(--edge) + 10px); width: calc(var(--edge) + 3px); cursor: e-resize; }
.w11-resize[data-edge="w"] { left: 0; top: calc(var(--edge) + 10px); bottom: calc(var(--edge) + 10px); width: calc(var(--edge) + 3px); cursor: w-resize; }
.w11-resize:is([data-edge="ne"], [data-edge="nw"], [data-edge="se"], [data-edge="sw"]) { width: calc(var(--edge) + 10px); height: calc(var(--edge) + 10px); }
.w11-resize[data-edge="ne"] { top: 0; right: 0; cursor: ne-resize; }
.w11-resize[data-edge="nw"] { top: 0; left: 0; cursor: nw-resize; }
.w11-resize[data-edge="se"] { bottom: 0; right: 0; cursor: se-resize; }
.w11-resize[data-edge="sw"] { bottom: 0; left: 0; cursor: sw-resize; }
@media (pointer: coarse) {
  .w11-edges { --edge: 10px; }
}
/* Dragging a window to the top edge maximizes it; this shows where it will go. */
.w11-snap {
  position: fixed; z-index: 61; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.w11-snap[hidden] { display: none; }
/* Systems: a heading as in Themes, then every system by family, in columns. */
.w11-win-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.w11-win-head { padding: 8px 24px 0; }
.w11-win-head h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.w11-win-head p { margin-bottom: 8px; font-size: 14px; color: rgba(230, 237, 243, 0.78); }
.w11-sys-list { columns: 15rem; column-gap: 16px; padding: 0 16px 16px; }
.w11-sys-list .w11-group { break-after: avoid; }
.w11-sys-list .w11-row { break-inside: avoid; }
/* Themes: launcher-themes.js's panel, its heading fixed and its choices scrolling under it. */
#launcher.oss-alt.oss-layout-win11 #themes-panel { max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; }
#launcher.oss-layout-win11 #themes-panel .themes-head { flex: none; padding: 8px 24px 0; }
#launcher.oss-layout-win11 #themes-panel .themes-head h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
#launcher.oss-layout-win11 #themes-panel .themes-list {
  flex: 1 1 auto; min-height: 0; align-content: start; padding: 2px 24px 24px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#launcher.oss-alt.oss-layout-win11 .theme-option { border-color: rgba(255, 255, 255, 0.08); border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
#launcher.oss-alt.oss-layout-win11 .theme-option:hover,
#launcher.oss-alt.oss-layout-win11 .theme-option:focus-visible { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); transform: none; }
#launcher.oss-alt.oss-layout-win11 .theme-option:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#launcher.oss-alt.oss-layout-win11 .theme-option[aria-pressed="true"] { border-color: #4cc2ff; box-shadow: 0 0 0 1px #4cc2ff; }
#launcher.oss-alt.oss-layout-win11 .theme-option[aria-pressed="true"]::after { background: #4cc2ff; color: #000; }

/* Its thumbnail in the Themes tab: shortcuts, a window and the taskbar */
.thumb-win11 { background: #0b1030 url("layout-win11-wallpaper.svg") 62% 50% / cover no-repeat; }
.thumb-win11 i { position: absolute; }
.thumb-win11 i:nth-child(-n+4) {
  left: 4%; width: 8%; aspect-ratio: 1; border-radius: 22%;
  background: linear-gradient(#ffffff, #dfe6ee); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.thumb-win11 i:nth-child(1) { top: 6%; }
.thumb-win11 i:nth-child(2) { top: 22%; }
.thumb-win11 i:nth-child(3) { top: 38%; }
.thumb-win11 i:nth-child(4) { top: 54%; }
.thumb-win11 i:nth-child(5) {
  left: 24%; top: 9%; width: 56%; height: 64%; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(#2c2c38 0 13%, #10141f 13%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}
.thumb-win11 i:nth-child(6) { left: 0; right: 0; bottom: 0; height: 12%; background: rgba(28, 28, 36, 0.88); }
.thumb-win11 i:nth-child(n+7) { bottom: 3%; width: 6%; aspect-ratio: 1; border-radius: 2px; }
.thumb-win11 i:nth-child(7) { left: 40%; background: linear-gradient(135deg, #1c2758, #3d1c74); box-shadow: inset 0 0 0 1.5px #e9eef6; }
.thumb-win11 i:nth-child(8) { left: 47%; background: #3db4ef; }
.thumb-win11 i:nth-child(9) { left: 54%; background: #2f7cf6; }

/* ---- Phones and short screens ---- */

@media (max-width: 600px), (max-height: 500px) {
  .w11-desktop { --w11-cell-w: 74px; --w11-cell-h: 84px; }
  .w11-icon-art { width: 40px; height: 40px; border-radius: 10px; }
  .w11-icon-art img { width: 32px; height: 32px; }
  .w11-pin-photos, .w11-pin-settings, .w11-tray-more, .w11-tray-icons { display: none; }
  .w11-search { margin: 16px 16px 4px; }
  .w11-head { padding: 14px 24px 8px; }
  .w11-pins, .w11-list { padding-left: 12px; padding-right: 12px; }
  .w11-menu-foot { min-height: 52px; padding: 0 12px 0 16px; }
}
@media (max-width: 600px) {
  .w11-taskbar.has-apps .w11-pin { display: none; }
  .w11-win-head { padding: 6px 16px 0; }
  .w11-win-head h2 { font-size: 20px; }
  .w11-sys-list { padding: 0 8px 12px; }
  #launcher.oss-layout-win11 #themes-panel .themes-head { padding: 6px 16px 0; }
  #launcher.oss-layout-win11 #themes-panel .themes-head h2 { font-size: 20px; }
  #launcher.oss-layout-win11 #themes-panel .themes-list { padding: 2px 16px 16px; }
}
@media (max-height: 500px) {
  .w11-desktop { --w11-cell-h: 80px; }
  .w11-icon { gap: 3px; line-height: 15px; }
  .w11-icon-art { width: 38px; height: 38px; border-radius: 9px; }
  .w11-icon-art img { width: 30px; height: 30px; }
  .w11-search { margin-top: 12px; }
  .w11-head { padding-top: 8px; padding-bottom: 4px; }
  .w11-tile { gap: 6px; padding: 8px 4px; }
  .w11-tile-art { width: 32px; height: 32px; }
  .w11-menu-foot { min-height: 44px; }
}

/* ---- Room for menu-music.js's toggle in the tray ----
   The toggle is the one button in the tray, among the tray's own spans. Where the centred taskbar
   buttons would then reach the tray, decorative icons make way, least needed first: the chevron with
   the wifi and battery glyphs, then the pinned apps from the right, and the clock last, only when
   Start and the windows' buttons leave it no room. Start, the windows' buttons and the toggle always
   stay. Each width is where one more taskbar button stops fitting with 8 px to spare; a second :has()
   counts the windows' buttons shown: one, two or three, chained with "~". */

@media (max-width: 882px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    :is(.w11-tray-more, .w11-tray-icons) { display: none; }
}
@media (max-width: 838px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    :is(.w11-tray-more, .w11-tray-icons) { display: none; }
}
@media (max-width: 766px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]))
    :is(.w11-tray-more, .w11-tray-icons) { display: none; }
}
@media (max-width: 722px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])) :is(.w11-tray-more, .w11-tray-icons) { display: none; }
}
@media (max-width: 666px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-pin-settings { display: none; }
}
@media (max-width: 622px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-pin-settings { display: none; }
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-pin-photos { display: none; }
}
/* Phones: the tray is the toggle and the clock, and with any window's button shown the pins go. */
@media (max-width: 600px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-pin { display: none; }
}
@media (max-width: 446px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])) .w11-pin-terminal { display: none; }
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-clock { display: none; }
}
@media (max-width: 402px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])) .w11-pin-web { display: none; }
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]) ~ :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-clock { display: none; }
}
@media (max-width: 358px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])) .w11-pin-files { display: none; }
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])):has(> .w11-tasks > :is(.w11-running, .w11-appbtn):not([hidden]))
    .w11-clock { display: none; }
}
@media (max-width: 314px) {
  .w11-taskbar:has(> .w11-tray > :is(button, [role="button"]):not([hidden])) .w11-clock { display: none; }
}