/* 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;
  --w11-text: #fff;
  --w11-muted: rgba(255, 255, 255, 0.68);
  --w11-card: rgba(255, 255, 255, 0.05);
  --w11-card-line: rgba(255, 255, 255, 0.06);
  --w11-hover: rgba(255, 255, 255, 0.08);
  --w11-field: rgba(0, 0, 0, 0.28);
  --w11-field-line: rgba(255, 255, 255, 0.12);
  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-pinbtn:not(.is-open)::after { 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(4, 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: var(--w11-accent); box-shadow: 0 0 0 1px var(--w11-accent); }
#launcher.oss-alt.oss-layout-win11 .theme-option[aria-pressed="true"]::after { background: var(--w11-accent); 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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):not([hidden]) ~ :is(.w11-running, .w11-appbtn:not(.w11-pinbtn)):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(.w11-pinbtn)):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; }
}

/* Pretend User Account Control prompt for the Admin easter egg. It grants nothing. */
.w11-uac {
  width: min(460px, calc(100vw - 32px)); margin: auto; padding: 22px 22px 18px; border: 1px solid #d0d3d8;
  border-radius: 8px; background: #f3f3f3; color: #1a1a1a; font-family: "Segoe UI", sans-serif;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
}
.w11-uac::backdrop { background: rgba(0, 0, 0, 0.45); }
.w11-uac-shield {
  width: 42px; height: 48px; margin-bottom: 12px;
  background: linear-gradient(#4cc2ff, #0078d4);
  clip-path: polygon(50% 0, 100% 12%, 100% 58%, 50% 100%, 0 58%, 0 12%);
}
.w11-uac h2 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; }
.w11-uac p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; }
.w11-uac-actions { display: flex; justify-content: flex-end; gap: 8px; }
.w11-uac-yes, .w11-uac-no {
  min-width: 88px; padding: 6px 16px; border: 1px solid #b4b4b4; border-radius: 4px;
  background: #fff; color: #1a1a1a; font: inherit; cursor: pointer;
}
.w11-uac-yes { background: #0067c0; border-color: #0067c0; color: #fff; }
.w11-uac-yes:focus-visible, .w11-uac-no:focus-visible { outline: 2px solid #0067c0; outline-offset: 2px; }

/* ---- Pinned apps: Settings, File Explorer, Terminal, Browser ---- */

.w11[data-wall="night"] {
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(90, 150, 255, 0.45), transparent 60%),
    linear-gradient(165deg, #070b18 0%, #14284a 48%, #071018 100%);
}
.w11[data-wall="plain"] { background: #12304c; }
.w11[data-wall="dawn"] {
  background: linear-gradient(180deg, #f3b183 0%, #d86b90 30%, #5c4a8a 62%, #1a2744 100%);
}
.w11[data-wall="aurora"], .w11-wall-aurora {
  background:
    radial-gradient(70% 50% at 70% 20%, rgba(120, 255, 200, 0.35), transparent 70%),
    radial-gradient(60% 50% at 25% 35%, rgba(90, 160, 255, 0.35), transparent 70%),
    linear-gradient(170deg, #031018 0%, #0a2a3a 45%, #0d4a3f 75%, #062018 100%);
}
.w11[data-wall="ocean"], .w11-wall-ocean {
  background: radial-gradient(80% 60% at 50% 110%, rgba(64, 200, 255, 0.45), transparent 70%), linear-gradient(180deg, #04162b 0%, #0a3a66 55%, #1677a6 100%);
}
.w11[data-wall="forest"], .w11-wall-forest {
  background: radial-gradient(70% 55% at 30% 15%, rgba(190, 230, 140, 0.3), transparent 70%), linear-gradient(170deg, #07140c 0%, #15361f 50%, #2f5a2c 80%, #0b1a0f 100%);
}
.w11[data-wall="sunset"], .w11-wall-sunset {
  background: linear-gradient(180deg, #1d0b3a 0%, #5a1d6e 30%, #c2416b 58%, #ff8a4c 80%, #ffd27a 100%);
}
.w11[data-wall="midnight"], .w11-wall-midnight {
  background: radial-gradient(60% 50% at 30% 20%, #26346a, transparent 70%), radial-gradient(40% 40% at 80% 75%, #3b1d5a, transparent 70%), #05070f;
}
.w11[data-wall="glow"], .w11-wall-glow {
  background:
    radial-gradient(55% 55% at 50% 55%, color-mix(in srgb, var(--w11-accent) 85%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--w11-accent) 40%, transparent), transparent 70%),
    #070a16;
}
.w11[data-wall="color"] { background: var(--w11-wall-color, #12304c); }
.w11[data-wall="picture"] { background: #000 var(--w11-wall-picture) 50% 50% / cover no-repeat; }
.w11[data-wall="picture"][data-fit="fit"] { background-size: contain; }
.w11[data-wall="picture"][data-fit="center"] { background-size: auto; }
.w11[data-wall="picture"][data-fit="tile"] { background-position: 0 0; background-size: auto; background-repeat: repeat; }

/* ---- Settings' looks: transparency, corners, accent bars, taskbar and icon sizes ---- */

.w11.is-solid-task .w11-taskbar { background: #2c2c32; -webkit-backdrop-filter: none; backdrop-filter: none; }
#launcher.oss-w11-solid .w11-menu { background: #2b2b32; -webkit-backdrop-filter: none; backdrop-filter: none; }
#launcher.oss-w11-solid .w11-win { background: #202024; -webkit-backdrop-filter: none; backdrop-filter: none; }
#launcher.oss-w11-square :is(.w11-win, .w11-menu, .w11-menu-foot, .w11-dialog, .w11-snap) { border-radius: 0; }
#launcher.oss-w11-accent-bars .w11-win:not(.is-inactive):not(.is-maximized) { border-color: var(--w11-accent); }
#launcher.oss-w11-accent-bars .w11-win:not(.is-inactive) .w11-titlebar { background: color-mix(in srgb, var(--w11-accent) 28%, transparent); }
.w11.is-icons-off .w11-desktop { visibility: hidden; }
.w11.is-icons-small .w11-desktop { --w11-cell-w: 68px; --w11-cell-h: 74px; }
.w11.is-icons-small .w11-icon { gap: 3px; font-size: 11px; line-height: 14px; }
.w11.is-icons-small .w11-icon-art { width: 34px; height: 34px; border-radius: 9px; }
.w11.is-icons-small .w11-icon-art img { width: 27px; height: 27px; }
.w11.is-icons-large .w11-desktop { --w11-cell-w: 100px; --w11-cell-h: 114px; }
.w11.is-icons-large .w11-icon { font-size: 13px; line-height: 17px; }
.w11.is-icons-large .w11-icon-art { width: 60px; height: 60px; border-radius: 14px; }
.w11.is-icons-large .w11-icon-art img { width: 48px; height: 48px; }
.w11.is-labels-off .w11-icon-name { display: none; }
.w11.is-labels-off .w11-desktop { --w11-cell-h: 56px; }
.w11.is-labels-off.is-icons-small .w11-desktop { --w11-cell-h: 44px; }
.w11.is-labels-off.is-icons-large .w11-desktop { --w11-cell-h: 72px; }
.w11.is-task-small { --w11-taskbar: 40px; }
.w11.is-task-small .w11-taskbtn { width: 34px; height: 34px; }
.w11.is-task-small .w11-taskbtn svg { width: 20px; height: 20px; }
.w11.is-task-small .w11-start-logo { width: 22px; height: 22px; }
.w11.is-task-small :is(.w11-running-art, .w11-appbtn-art) { width: 22px; height: 22px; }
.w11.is-task-small :is(.w11-tray-more, .w11-tray-icons, .w11-clock) { height: 34px; }
.w11.is-task-large { --w11-taskbar: 56px; }
.w11.is-task-large .w11-taskbtn { width: 48px; height: 48px; }
.w11.is-task-large .w11-taskbtn svg { width: 28px; height: 28px; }
.w11.is-task-large .w11-start-logo { width: 30px; height: 30px; }
.w11.is-task-large :is(.w11-running-art, .w11-appbtn-art) { width: 30px; height: 30px; }
.w11.is-date-off .w11-date { display: none; }
.w11-peek {
  align-self: stretch; width: 10px; margin: 0 -6px 0 4px; padding: 0;
  border: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); background: transparent; cursor: default;
}
.w11-peek:hover { background: rgba(255, 255, 255, 0.1); }
.w11-peek[hidden] { display: none; }
.w11-peek:focus { outline: none; }
.w11-peek:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.w11-night, .w11-dim { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.w11-night { background: #ff9a3c; mix-blend-mode: multiply; }
.w11-dim { background: #000; }
.w11-night[hidden], .w11-dim[hidden] { display: none; }

/* ---- Accessibility ---- */

.w11.is-still, .w11.is-still *, .w11.is-still *::before, .w11.is-still *::after { transition: none !important; animation: none !important; }
.w11.is-focus-rings :is(button, input, select, textarea, a, [tabindex]):focus { outline: 2px solid var(--w11-accent) !important; outline-offset: 1px !important; }
.w11.is-scrollbars * {
  scrollbar-width: auto !important;
  scrollbar-color: color-mix(in srgb, var(--w11-text) 55%, transparent) color-mix(in srgb, var(--w11-text) 8%, transparent) !important;
}
.w11[data-text="110"] :is(.w11-search, .w11-menu-body, .w11-menu-foot, .w11-dialog, .w11-win > :not(.w11-titlebar, .w11-term, .w11-browser-page)) { zoom: 1.1; }
.w11[data-text="125"] :is(.w11-search, .w11-menu-body, .w11-menu-foot, .w11-dialog, .w11-win > :not(.w11-titlebar, .w11-term, .w11-browser-page)) { zoom: 1.25; }
.w11[data-text="150"] :is(.w11-search, .w11-menu-body, .w11-menu-foot, .w11-dialog, .w11-win > :not(.w11-titlebar, .w11-term, .w11-browser-page)) { zoom: 1.5; }
.w11.is-task-left .w11-taskbar { justify-content: flex-start; padding-left: 6px; }
.w11.is-task-left .w11-menu { left: 8px; transform: translate(0, 28px); }
.w11.is-task-left .w11-menu.is-open { transform: translate(0, 0); }
.w11 input, .w11 textarea {
  -webkit-user-select: text; user-select: text;
}

/* ---- Settings: its pages in a sidebar, and a card for each setting ---- */

.w11-set { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.w11-set-nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 8px 10px 16px; overflow-y: auto; }
.w11-set-tab {
  position: relative; display: flex; align-items: center; gap: 12px; flex: none; height: 36px; padding: 0 12px;
  border: 0; border-radius: 4px; background: transparent; color: var(--w11-text); font: inherit; font-size: 14px; text-align: left; cursor: default;
}
.w11-set-tab svg { flex: none; width: 16px; height: 16px; }
.w11-set-tab:hover { background: var(--w11-hover); }
.w11-set-tab.is-on { background: var(--w11-card); font-weight: 600; }
.w11-set-tab.is-on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--w11-accent); }
.w11-set-tab:focus { outline: none; }
.w11-set-tab:focus-visible { outline: 2px solid var(--w11-text); outline-offset: -2px; }
.w11-set-pane {
  min-width: 0; min-height: 0; padding: 4px 24px 24px 8px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--w11-text) 30%, transparent) transparent;
}
.w11-set-pane h2 { margin-bottom: 8px; font-size: 28px; font-weight: 600; line-height: 40px; }
.w11-set-group { margin-bottom: 20px; }
.w11-set-group h3 { margin: 0 0 6px 2px; font-size: 14px; font-weight: 600; }
.w11-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; margin-bottom: 3px; padding: 10px 16px;
  border: 1px solid var(--w11-card-line); border-radius: 4px; background: var(--w11-card);
}
.w11-set-block { flex-direction: column; align-items: stretch; gap: 10px; }
.w11-set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w11-set-name { font-size: 14px; }
.w11-set-desc { font-size: 12px; line-height: 16px; color: var(--w11-muted); }
.w11-set-value { flex: none; font-size: 13px; color: var(--w11-muted); }
.w11-set-actions { display: flex; flex: none; flex-wrap: wrap; gap: 6px; }
.w11-switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 20px; margin: 0;
  border: 1px solid var(--w11-muted); border-radius: 10px; background: transparent; cursor: default;
}
.w11-switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--w11-text); transition: transform 0.15s cubic-bezier(0.3, 0, 0.3, 1);
}
.w11-switch:checked { border-color: var(--w11-accent); background: var(--w11-accent); }
.w11-switch:checked::after { background: #000; transform: translateX(20px); }
.w11-switch:focus { outline: none; }
.w11-switch:focus-visible { outline: 2px solid var(--w11-text); outline-offset: 2px; }
.w11-select, .w11-set-input {
  flex: none; height: 32px; padding: 0 8px; border: 1px solid var(--w11-field-line); border-radius: 4px;
  background: var(--w11-field); color: var(--w11-text); font: inherit; font-size: 13px;
}
.w11-select { min-width: 170px; }
.w11-select option { background: #2b2b2b; color: #fff; }
.w11-set-input { width: min(320px, 100%); -webkit-user-select: text; user-select: text; }
:is(.w11-select, .w11-set-input):focus { outline: none; border-color: var(--w11-accent); }
.w11-color { flex: none; width: 48px; height: 32px; padding: 2px; border: 1px solid var(--w11-field-line); border-radius: 4px; background: var(--w11-field); }
.w11-range { display: flex; flex: none; align-items: center; gap: 10px; }
.w11-range input { width: 180px; accent-color: var(--w11-accent); }
.w11-range-value { min-width: 42px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.w11-meter { flex: none; width: 180px; height: 8px; accent-color: var(--w11-accent); }
.w11-about {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--w11-card-line); border-radius: 4px; background: var(--w11-card); font-size: 13px;
}
.w11-about dt { color: var(--w11-muted); }
.w11-about dd { margin: 0; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
@media (max-width: 700px) {
  .w11-set { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .w11-set-nav { flex-direction: row; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; }
  .w11-set-pane { padding: 4px 12px 16px; }
  .w11-set-row { flex-wrap: wrap; }
}
.w11-swatches, .w11-walls { display: flex; flex-wrap: wrap; gap: 8px; }
.w11-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#f87171, #facc15, #4ade80, #2dd4bf, #5b8def, #c084fc, #f87171); }
.w11-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: default; }
.w11-wall-color { background: var(--w11-wall-color, #12304c); }
.w11-wall-picture { background-position: 50% 50%; background-size: cover; }
.w11-swatch {
  width: 32px; height: 32px; padding: 0; border: 2px solid transparent; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); cursor: default;
}
.w11-swatch.is-on { border-color: #fff; }
.w11-wall {
  width: 112px; height: 64px; border: 2px solid transparent; border-radius: 8px;
  color: #fff; font: inherit; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); cursor: default;
}
.w11-wall.is-on { border-color: #fff; }
.w11-wall-default { background: #0b1030 url("layout-win11-wallpaper.svg") 50% 50% / cover no-repeat; }
.w11-wall-night {
  background:
    radial-gradient(80px 40px at 80% 10%, rgba(90, 150, 255, 0.5), transparent 70%),
    linear-gradient(165deg, #070b18, #14284a 55%, #071018);
}
.w11-wall-plain { background: #12304c; }
.w11-wall-dawn { background: linear-gradient(180deg, #f3b183, #d86b90 40%, #5c4a8a 70%, #1a2744); }
.w11-mini {
  flex: none; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 12px; cursor: default;
}
.w11-mini:hover { background: rgba(255, 255, 255, 0.14); }
.w11-mini:focus { outline: none; }
.w11-mini:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.w11-files-bar, .w11-browser-bar, .w11-files-ask, .w11-files-edit-bar, .w11-browser-search {
  display: flex; align-items: center; gap: 6px;
}
.w11-files-bar, .w11-browser-bar { flex: none; padding: 8px 10px; }
.w11-files-bar { flex-wrap: wrap; }
.w11-files-path, .w11-browser-address, .w11-files-ask input, .w11-browser-search input {
  flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px; background: rgba(0, 0, 0, 0.28); color: #fff; font: inherit; font-size: 13px;
}
.w11-files-path:focus, .w11-browser-address:focus, .w11-files-ask input:focus, .w11-browser-search input:focus {
  outline: none; border-color: var(--w11-accent);
}
.w11-files-ask { padding: 0 10px 8px; }
.w11-files-ask[hidden], .w11-files-edit[hidden], .w11-browser-start[hidden], .w11-browser-page[hidden] { display: none; }
.w11-files-main { flex: 1 1 auto; min-height: 0; display: flex; }
.w11-files-list { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 4px 6px 8px; }
.w11-files-empty { padding: 14px 8px; color: rgba(255, 255, 255, 0.62); }
.w11-files-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 4px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: default;
}
.w11-files-row:hover { background: rgba(255, 255, 255, 0.06); }
.w11-files-row.is-on { background: color-mix(in srgb, var(--w11-accent) 32%, transparent); }
.w11-files-row:focus { outline: none; }
.w11-files-row:focus-visible { outline: 1px solid #fff; outline-offset: -1px; }
.w11-kind { flex: none; width: 52px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.w11-kind.is-dir { color: var(--w11-accent); }
.w11-files-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w11-files-edit {
  flex: none; display: flex; flex-direction: column; width: min(46%, 360px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.w11-files-edit-name { flex: none; padding: 8px 10px 0; font-size: 13px; font-weight: 600; }
.w11-files-text {
  flex: 1 1 auto; min-height: 0; width: 100%; padding: 8px 10px; border: 0; resize: none;
  background: transparent; color: #fff; font: 13px/1.45 ui-monospace, Consolas, monospace;
}
.w11-files-text:focus { outline: none; }
.w11-files-edit-bar { flex: none; padding: 8px 10px; }
.w11-files-status { min-width: 0; font-size: 12px; color: rgba(255, 255, 255, 0.7); }

.w11-term { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #0c0c0c; color: #cccccc; }
.w11-term-status { flex: none; padding: 6px 12px; color: #9ad7ff; font: 12px/1.4 ui-monospace, Consolas, monospace; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.w11-term-box { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }

.w11-browser-start {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.w11-browser-start h2 { font-size: 32px; font-weight: 600; }
.w11-browser-start p { max-width: 440px; color: rgba(255, 255, 255, 0.75); line-height: 1.45; }
.w11-browser-search { width: min(480px, 100%); }
.w11-browser-page { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; color-scheme: light; }
@media (max-width: 700px) {
  .w11-files-main { flex-direction: column; }
  .w11-files-edit { width: auto; height: 46%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}
.w11-browser-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 560px; }
.w11-browser-link {
  height: 30px; padding: 0 12px; border: 1px solid var(--w11-field-line); border-radius: 15px;
  background: var(--w11-card); color: var(--w11-text); font: inherit; font-size: 12px; cursor: default;
}
.w11-browser-link:hover { background: var(--w11-hover); }
.w11-browser-link:focus { outline: none; }
.w11-browser-link:focus-visible { outline: 2px solid var(--w11-text); outline-offset: 1px; }

/* ---- Light mode: the taskbar, the Start menu, these windows and their dialogs ---- */

#launcher.oss-w11-light .w11 {
  --w11-text: #1a1a1a;
  --w11-muted: rgba(0, 0, 0, 0.62);
  --w11-card: rgba(255, 255, 255, 0.72);
  --w11-card-line: rgba(0, 0, 0, 0.06);
  --w11-hover: rgba(0, 0, 0, 0.05);
  --w11-field: #fff;
  --w11-field-line: rgba(0, 0, 0, 0.14);
}
#launcher.oss-w11-light .w11-taskbar { border-top-color: rgba(0, 0, 0, 0.08); background: rgba(238, 240, 246, 0.86); }
#launcher.oss-w11-light .w11.is-solid-task .w11-taskbar { background: #eef0f6; }
#launcher.oss-w11-light :is(.w11-taskbtn, .w11-tray, .w11-tray .oss-music) { color: #1a1a1a; }
#launcher.oss-w11-light :is(.w11-taskbtn, .w11-tray-more, .w11-tray-icons, .w11-clock, .w11-peek):hover { background: rgba(0, 0, 0, 0.05); }
#launcher.oss-w11-light :is(.w11-running, .w11-appbtn).is-active, #launcher.oss-w11-light .w11-start[aria-expanded="true"] { background: rgba(255, 255, 255, 0.75); }
#launcher.oss-w11-light :is(.w11-running, .w11-appbtn)::after { background: rgba(0, 0, 0, 0.45); }
#launcher.oss-w11-light :is(.w11-running, .w11-appbtn).is-active::after { background: var(--w11-accent); }
#launcher.oss-w11-light .w11-peek { border-left-color: rgba(0, 0, 0, 0.2); }
#launcher.oss-w11-light button.w11-taskbtn:focus-visible { outline-color: #1a1a1a; }
#launcher.oss-w11-light .w11-menu {
  border-color: rgba(0, 0, 0, 0.08); background: rgba(242, 243, 247, 0.92); color: #1a1a1a;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.12);
}
#launcher.oss-w11-light.oss-w11-solid .w11-menu { background: #f2f3f7; }
#launcher.oss-w11-light .w11-search { color: rgba(0, 0, 0, 0.6); }
#launcher.oss-w11-light .w11-query { border-color: rgba(0, 0, 0, 0.08); border-bottom-color: rgba(0, 0, 0, 0.35); background: #fff; color: #1a1a1a; }
#launcher.oss-w11-light .w11-query::placeholder { color: rgba(0, 0, 0, 0.55); }
#launcher.oss-w11-light .w11-query:focus { background: #fff; }
#launcher.oss-w11-light :is(.w11-tile, .w11-row, .w11-link) { color: #1a1a1a; }
#launcher.oss-w11-light :is(.w11-tile, .w11-row, .w11-link):hover, #launcher.oss-w11-light .w11-row.is-highlighted { background: rgba(0, 0, 0, 0.05); }
#launcher.oss-w11-light .w11 :is(.w11-tile, .w11-row, .w11-link):focus-visible { outline-color: #1a1a1a; }
#launcher.oss-w11-light .w11-group { color: rgba(0, 0, 0, 0.8); }
#launcher.oss-w11-light :is(.w11-row-meta, .w11-none) { color: rgba(0, 0, 0, 0.6); }
#launcher.oss-w11-light .w11-menu-foot { border-top-color: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.03); }
#launcher.oss-w11-light .w11-menu-body { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }
#launcher.oss-w11-light .w11-win {
  border-color: rgba(0, 0, 0, 0.1); background: rgba(243, 244, 248, 0.94); color: #1a1a1a; color-scheme: light;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.25), 0 3px 12px rgba(0, 0, 0, 0.12);
}
#launcher.oss-w11-light.oss-w11-solid .w11-win { background: #f3f4f8; }
#launcher.oss-w11-light.oss-w11-accent-bars .w11-win:not(.is-inactive):not(.is-maximized) { border-color: var(--w11-accent); }
#launcher.oss-w11-light .w11-titlebar { color: #1a1a1a; }
#launcher.oss-w11-light .w11-win.is-inactive .w11-titlebar { color: rgba(0, 0, 0, 0.45); }
#launcher.oss-w11-light .w11-titlebar-buttons button:hover { background: rgba(0, 0, 0, 0.06); color: #1a1a1a; }
#launcher.oss-w11-light .w11-titlebar-buttons button:active { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.7); }
#launcher.oss-w11-light .w11-titlebar .w11-win-close:hover { background: #c42b1c; color: #fff; }
#launcher.oss-w11-light .w11-titlebar-buttons button:focus-visible { outline-color: #1a1a1a; }
#launcher.oss-w11-light .w11-win-head p { color: rgba(0, 0, 0, 0.65); }
#launcher.oss-w11-light .w11-win-body { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }
#launcher.oss-w11-light .w11-mini { border-color: rgba(0, 0, 0, 0.12); background: #fff; color: #1a1a1a; }
#launcher.oss-w11-light .w11-mini:hover { background: #f4f4f4; }
#launcher.oss-w11-light .w11-mini:focus-visible { outline-color: #1a1a1a; }
#launcher.oss-w11-light :is(.w11-files-path, .w11-browser-address, .w11-files-ask input, .w11-browser-search input) { border-color: rgba(0, 0, 0, 0.14); background: #fff; color: #1a1a1a; }
#launcher.oss-w11-light .w11-files-row { color: #1a1a1a; }
#launcher.oss-w11-light .w11-files-row:hover { background: rgba(0, 0, 0, 0.04); }
#launcher.oss-w11-light .w11-files-row:focus-visible { outline-color: #1a1a1a; }
#launcher.oss-w11-light :is(.w11-kind, .w11-files-empty, .w11-files-status) { color: rgba(0, 0, 0, 0.58); }
#launcher.oss-w11-light .w11-kind.is-dir { color: color-mix(in srgb, var(--w11-accent) 65%, #000); }
#launcher.oss-w11-light .w11-files-edit { border-color: rgba(0, 0, 0, 0.08); }
#launcher.oss-w11-light .w11-files-text { color: #1a1a1a; }
#launcher.oss-w11-light .w11-browser-start p { color: rgba(0, 0, 0, 0.65); }
#launcher.oss-w11-light :is(.w11-swatch, .w11-wall).is-on { border-color: #1a1a1a; }
#launcher.oss-w11-light .w11-select option { background: #fff; color: #1a1a1a; }
#launcher.oss-w11-light .w11-switch:checked::after { background: #fff; }
#launcher.oss-w11-light .w11-dialog { border-color: rgba(0, 0, 0, 0.1); background: #f9f9f9; color: #1a1a1a; }
#launcher.oss-w11-light .w11-dialog p { color: rgba(0, 0, 0, 0.75); }
#launcher.oss-w11-light .w11-dialog-actions { border-top-color: rgba(0, 0, 0, 0.06); background: #f0f0f0; }
#launcher.oss-w11-light .w11-btn { border-color: rgba(0, 0, 0, 0.12); background: #fff; color: #1a1a1a; }
#launcher.oss-w11-light .w11-btn:hover { background: #f4f4f4; }
#launcher.oss-w11-light .w11-btn-primary { border-color: transparent; background: var(--w11-accent); color: #000; }
#launcher.oss-w11-light #themes-panel :is(h2, .theme-option) { color: #1a1a1a; }
#launcher.oss-w11-light #themes-panel p { color: rgba(0, 0, 0, 0.65); }
#launcher.oss-alt.oss-layout-win11.oss-w11-light .theme-option { border-color: rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.75); }
#launcher.oss-alt.oss-layout-win11.oss-w11-light .theme-option:hover,
#launcher.oss-alt.oss-layout-win11.oss-w11-light .theme-option:focus-visible { border-color: rgba(0, 0, 0, 0.18); background: #fff; }