/* Themes (themes.js). body[data-family] is win98 (Gregory 98 and its colour schemes), win7 (Aero) or aqua (Snow
   Leopard). Skinned windows (.window.skin: Celery Man, Euclid…) keep their own look in every theme. */

/* ---------- shared ---------- */
#desktop { background: radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--desk) 80%, #fff 20%) 0%, var(--desk) 55%, color-mix(in srgb, var(--desk) 70%, #000) 100%); }
#wallpaper[data-mode="none"] .wp-canvas { display: none; }
.ico.themed img { width: 100%; height: 100%; display: block; }
.glass { display: none; }

/* Windows 98 caption zoom (minimize/restore) */
.min-caption { position: fixed; z-index: 9950; pointer-events: none; display: flex; align-items: center; gap: 3px; padding: 0 3px; overflow: hidden; white-space: nowrap;
  background: var(--title); color: #fff; font-weight: bold; box-shadow: 0 0 0 1px var(--face); }
.min-caption .ico { width: 14px; height: 14px; }

/* Display Properties */
.pv-wrap { display: grid; place-items: center; margin: 2px 0 10px; }
.pv-monitor { width: 196px; height: 150px; padding: 10px 10px 22px; background: linear-gradient(#d8d8d8, #a8a8a8); border-radius: 6px 6px 3px 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #666, 0 3px 0 #777; position: relative; }
.pv-monitor::after { content: ""; position: absolute; left: 70px; right: 70px; bottom: -12px; height: 9px; background: linear-gradient(#b8b8b8, #888); border-radius: 0 0 4px 4px; }
.pv-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid #000; }
.pv-win98 { position: absolute; left: 22px; top: 18px; width: 110px; height: 62px; border: 1px solid; border-color: #fff #000 #000 #fff; padding: 1px; font-size: 8px; }
.pv-win98 .pv-title { color: #fff; font-weight: bold; padding: 1px 3px; }
.pv-win98 .pv-body { background: #fff; height: 40px; margin-top: 2px; padding: 2px; }
.pv-bar98 { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-top: 1px solid #fff; }
.pv-win7 { position: absolute; left: 22px; top: 16px; width: 112px; height: 70px; border-radius: 4px 4px 2px 2px; padding: 0 4px 4px;
  background: linear-gradient(135deg, rgba(var(--aero), .75), rgba(var(--aero), .45) 50%, rgba(255,255,255,.35) 52%, rgba(var(--aero), .5)); border: 1px solid rgba(0,0,0,.6); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.pv-win7 .pv-title { font: 8px "Segoe UI", sans-serif; padding: 2px 1px; text-shadow: 0 0 4px #fff; }
.pv-win7 .pv-body { background: #fff; height: 50px; border: 1px solid rgba(0,0,0,.4); }
.pv-bar7 { position: absolute; left: 0; right: 0; bottom: 0; height: 11px; background: linear-gradient(rgba(255,255,255,.3), rgba(20,30,50,.75) 40%); }
.pv-bar7 i { position: absolute; left: 3px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #bfe6ff, #1d74c8 60%, #0a3a7a); }
.pv-aqua { position: absolute; left: 24px; top: 22px; width: 112px; height: 64px; border-radius: 3px; background: #ececec; box-shadow: 0 3px 8px rgba(0,0,0,.6); overflow: hidden; }
.pv-aqua .pv-title { height: 11px; background: linear-gradient(#e8e8e8, #b5b5b5); display: flex; align-items: center; gap: 2px; padding-left: 3px; font: 7px "Lucida Grande", sans-serif; }
.pv-aqua .pv-title span { flex: 1; text-align: center; margin-right: 18px; }
.pv-aqua i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; } .pv-aqua i:nth-child(2) { background: #ffbd2e; } .pv-aqua i:nth-child(3) { background: #28c940; }
.pv-aqua.graphite i { background: #9aa0a8 !important; }
.pv-macbar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(240,240,240,.9); }
.pv-dock { position: absolute; left: 30px; right: 30px; bottom: 2px; height: 12px; display: flex; gap: 3px; justify-content: center; align-items: flex-end;
  background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.45)); border-radius: 2px; }
.pv-dock i { width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(#bfe3ff, #2f6fc0); margin-bottom: 3px; }
.pv-dock i:nth-child(2) { background: linear-gradient(#ffd9a8, #e0701a); } .pv-dock i:nth-child(3) { background: linear-gradient(#b9f5a8, #2a9a2a); }
.pv-list { background: #fff; max-height: 132px; overflow: auto; padding: 1px; margin-bottom: 6px; }
.pv-item { padding: 2px 6px; cursor: default; }
.pv-item.sel { background: var(--sel, #3875d7); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.swatch { width: 26px; height: 22px; padding: 0; border: 1px solid #000; box-shadow: inset 1px 1px rgba(255,255,255,.5); cursor: pointer; }
.swatch.auto { width: auto; padding: 0 6px; font-size: 11px; background: var(--face, #eee); }
.swatch.pick { width: 34px; padding: 0; }
.swatches.aero .swatch { width: 34px; height: 34px; border-radius: 4px; border-color: rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
label.check { display: block; margin: 4px 0; }

/* ======================================================================== Windows 7 Aero */
body.aero {
  --face: #f0f0f0; --light: #ffffff; --hi: #ffffff; --lo: #a0a0a0; --dk: #707070; --sel: #3399ff;
  --font: "Segoe UI", "Noto Sans", "DejaVu Sans", Tahoma, sans-serif;
  -webkit-font-smoothing: auto;
}
/* the glass taskbar is see-through: the desktop runs under it, so windows show (blurred) behind the bar;
   icons, new windows and maximized windows stop above it (--under, read by app.js) */
body.aero #desktop { bottom: 0; --under: 40px; }
body.aero .window.max:not(.skin) { height: calc(100% - var(--under)) !important; }
/* glass: the frame is the window's own background, blurred desktop behind it; the body sits on top, opaque */
body.aero .window:not(.skin) {
  padding: 0 7px 7px; border-radius: 7px 7px 5px 5px; border: 1px solid rgba(0,0,0,.62);
  background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.08) 40px, rgba(var(--aero), .18)) , rgba(var(--aero), .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 26px rgba(0,0,0,.5);
  backdrop-filter: blur(7px) saturate(1.6); overflow: hidden;
  transition: background-color .25s, box-shadow .25s;
}
body.aero .window:not(.skin):not(.active) {
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.25)), rgba(var(--aero), .22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.3);
}
body.aero.noglass .window:not(.skin) { backdrop-filter: none; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.1)), rgb(var(--aero)); }
body.aero.noglass .window:not(.skin):not(.active) { background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.5)), rgb(var(--aero)); }
/* The reflection: soft diagonal light streaks on a texture fixed to the screen (themes.js translates it by the
   window's negative position on every drag frame). */
body.aero .window:not(.skin) > .glass { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
.glass-streaks { position: absolute; left: 0; top: 0; width: 3200px; height: 2000px; will-change: transform;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.22) 19%, rgba(255,255,255,.05) 23%, transparent 24% 41%,
      rgba(255,255,255,.16) 42%, rgba(255,255,255,.03) 47%, transparent 48% 63%, rgba(255,255,255,.2) 64%, rgba(255,255,255,.04) 66.5%, transparent 67%),
    linear-gradient(105deg, transparent 0 30%, rgba(255,255,255,.08) 31% 35%, transparent 36% 72%, rgba(255,255,255,.1) 73% 79%, transparent 80%); }
body.aero .window:not(.active) .glass-streaks { opacity: .6; }
body.aero .window:not(.skin) > :not(.glass) { position: relative; z-index: 1; }
body.aero .window:not(.skin) > .grip { position: absolute; }
body.aero .window.max:not(.skin) { border-radius: 0; padding: 0 0 2px; }
body.aero .window:not(.skin) .titlebar { height: 29px; background: none !important; color: #000; font-weight: normal; font-size: 12.5px; padding: 0 0 0 3px; gap: 6px; align-items: flex-start; padding-top: 6px; }
body.aero .window:not(.skin) .titlebar .ttext { text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 4px #fff; padding-top: 1px; }
body.aero .window:not(.skin) .titlebar > .ico { margin-top: 1px; }
body.aero .window:not(.skin):not(.active) .titlebar .ttext { color: #4a4a4a; }
/* caption buttons: one glass group hanging from the top edge, close in red */
body.aero .tbtns { gap: 0; margin-top: -7px; align-self: flex-start; border: 1px solid rgba(0,0,0,.55); border-top: 0; border-radius: 0 0 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 0 rgba(255,255,255,.35); overflow: hidden; }
body.aero .tbtns button { width: 26px; height: 19px; border: 0; border-right: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 1px rgba(255,255,255,.5);
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.2) 50%, rgba(var(--aero), .25) 51%, rgba(255,255,255,.3)); transition: background .2s, box-shadow .2s; }
body.aero .tbtns button:hover { background: linear-gradient(#e3f1fd, #b0d3f7 50%, #6eaff0 51%, #9fe2ff); box-shadow: inset 0 0 6px rgba(255,255,255,.9); }
body.aero .tbtns button.close { width: 44px; margin: 0; border-right: 0; background: linear-gradient(#e9a99f, #d47a6c 50%, #c2412b 51%, #d36a52); }
body.aero .tbtns button.close:hover { background: linear-gradient(#fbbcae, #ef8a76 50%, #e2321a 51%, #f37b5e); box-shadow: inset 0 0 8px rgba(255,220,200,.9), 0 0 10px rgba(255,90,60,.8); }
body.aero .tbtns button:active { filter: brightness(.85); }
body.aero .window:not(.active) .tbtns button:not(:hover) { background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.25)); }
body.aero .tbtns svg { width: 10px; height: 10px; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
body.aero .tbtns svg [fill="#000"] { fill: #fff; } body.aero .tbtns svg [stroke="#000"] { stroke: #fff; }
body.aero .menubar { background: linear-gradient(#fdfeff, #e6eef8); border: 1px solid rgba(0,0,0,.35); border-bottom: 0; padding: 1px 2px; }
body.aero .menubar span { border-radius: 3px; border: 1px solid transparent; }
body.aero .menubar span:hover, body.aero .menubar span.open { box-shadow: none; border-color: #a8d8eb; background: linear-gradient(#fafdff, #e3f2fb); }
body.aero .wbody { background: var(--face); border: 1px solid rgba(0,0,0,.45); }
body.aero .statusbar { margin-top: 0; background: #f0f0f0; border: 1px solid rgba(0,0,0,.45); border-top: 1px solid #d5d5d5; }
body.aero .grip { right: 8px; bottom: 8px; }
/* Aero window open/close, as DWM drew them: a window swings up out of the screen, tipped back a little in 3D and
   growing from ~85%, while it fades in; closing tips the other way and shrinks as it fades out. */
body.aero .window.opening { animation: aero-open .3s cubic-bezier(.1,.75,.25,1) both; transform-origin: 50% 70%; }
@keyframes aero-open { from { opacity: 0; transform: perspective(1400px) rotateX(10deg) scale(.84) translateY(18px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
body.aero .window.closing { animation: aero-close .22s cubic-bezier(.45,0,.8,.45) forwards !important; transform-origin: 50% 70%; }
@keyframes aero-close { to { opacity: 0; transform: perspective(1400px) rotateX(-8deg) scale(.86) translateY(12px); } }
/* controls */
body.aero .raised { background: var(--face); border: 1px solid #d5dfe5; box-shadow: none; }
body.aero .sunken { border: 1px solid #c5ccd4; box-shadow: none; }
body.aero .btn { border: 1px solid #707070; border-radius: 3px; min-height: 23px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  background: linear-gradient(#f2f2f2 0 45%, #ebebeb 45%, #dddddd 50%, #cfcfcf 100%); transition: background .15s, border-color .15s; }
body.aero .btn:hover:not(:disabled) { border-color: #3c7fb1; background: linear-gradient(#eaf6fd 0 45%, #d9f0fc 45%, #bee6fd 50%, #a7d9f5 100%); }
body.aero .btn:active:not(:disabled), body.aero .btn.pressed { border-color: #2c628b; padding: 3px 10px; background: linear-gradient(#e5f4fc 0 45%, #c4e5f6 45%, #98d1ef 50%, #68b3db 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
body.aero .btn.primary { outline: none; border-color: #3c7fb1; box-shadow: inset 0 0 0 1px #8fd1f5; }
body.aero .btn:disabled { color: #8d8d8d; text-shadow: none; border-color: #adb2b5; background: #f4f4f4; }
body.aero select.field, body.aero input.field, body.aero textarea.field, body.aero .field {
  border: 1px solid #abadb3; border-top-color: #e3e9ef; border-left-color: #e2e3ea; border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea; box-shadow: none; border-radius: 2px; background: #fff; }
body.aero input.field:focus, body.aero select.field:focus, body.aero textarea:focus { border-color: #3d7bad #a4c9e3 #b7d9ed #b5cfe7; outline: none; }
body.aero fieldset { border: 1px solid #d5dfe5; border-radius: 4px; box-shadow: none; }
body.aero legend { background: transparent; color: #1e3287; }
body.aero .tab { border-color: #898c95; border-radius: 2px 2px 0 0; background: linear-gradient(#f2f2f2, #e3e3e3); box-shadow: none; }
body.aero .tab:hover { background: linear-gradient(#eaf6fd, #a7d9f5); }
body.aero .tab.on { background: #fff; }
body.aero .tabpage { border: 1px solid #898c95; box-shadow: none; background: #fff; }
body.aero table.list th { background: linear-gradient(#fff, #f1f2f4); border: 0; border-right: 1px solid #e3e5e8; border-bottom: 1px solid #d5d5d5; box-shadow: none; color: #4c607a; }
body.aero table.list th:hover { background: linear-gradient(#f3fafe, #d9eefb); }
body.aero table.list tr:hover td { background: #e5f3fb; }
body.aero table.list tr.sel td { background: linear-gradient(#dcebfc, #c1dbfc); color: #000; box-shadow: inset 0 1px #7da2ce, inset 0 -1px #7da2ce; }
body.aero .ctxmenu { background: #f0f0f0; border: 1px solid #979797; box-shadow: 2px 2px 3px rgba(0,0,0,.35); border-radius: 0;
  background-image: linear-gradient(90deg, transparent 27px, #e2e3e3 27px 28px, #fff 28px 29px, transparent 29px); }
/* the check column (24px) sits left of the gutter line at 27-29px; labels start well clear of it */
body.aero .ctxmenu .mi { grid-template-columns: 22px 1fr auto; column-gap: 10px; padding: 3px 12px 3px 0; border: 1px solid transparent; border-radius: 3px; margin: 1px; }
body.aero .ctxmenu .mi.hot { background: linear-gradient(#f1f7fe, #dcebfc); border-color: #aecff7; color: #000; }
body.aero .ctxmenu .msep { border-top-color: #e0e0e0; border-bottom-color: #fff; margin-left: 30px; }
body.aero .dicon .ico { width: 40px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
body.aero .dicon span.lbl { text-shadow: 0 1px 2px #000, 0 0 3px #000; }
body.aero .dicon { border-radius: 3px; }
body.aero .dicon:hover { background: rgba(160,200,255,.18); border-color: rgba(190,220,255,.45); }
body.aero .dicon.sel { background: rgba(140,185,240,.4); border-color: rgba(200,225,255,.8); }
body.aero .dicon.sel span.lbl { background: transparent; outline: none; }
body.aero .dicon.sel .ico { filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
/* taskbar: glass, Start orb, superbar buttons with hot-tracking light */
body.aero #taskbar { height: 40px; padding: 0 0 0 4px; gap: 2px; border: 0; border-top: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(0,0,0,.18) 46%, rgba(0,0,0,.3)), linear-gradient(rgba(var(--aero), .25), rgba(var(--aero), .25)), rgba(16,28,48,.55);
  backdrop-filter: blur(8px) saturate(1.5); box-shadow: inset 0 1px rgba(255,255,255,.25); }
body.aero.noglass #taskbar { backdrop-filter: none; background: linear-gradient(rgba(255,255,255,.22), rgba(0,0,0,.25)), linear-gradient(rgb(var(--aero)), rgb(var(--aero))); }
body.aero .tb-divider { display: none; }
body.aero #startbtn { width: 50px; height: 40px; padding: 0; border: 0; background: none; box-shadow: none; position: relative; }
body.aero #startbtn b { display: none; }
body.aero #startbtn::before { content: ""; position: absolute; left: 6px; top: 2px; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, rgba(120,230,255,.9), transparent 55%), radial-gradient(circle at 50% 35%, #3a8ee6, #0c3e82 70%, #061f45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 6px rgba(0,0,0,.6); transition: box-shadow .2s, filter .2s; }
body.aero #startbtn::after { content: ""; position: absolute; left: 10px; top: 4px; width: 28px; height: 15px; border-radius: 50% 50% 40% 40%;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.05)); pointer-events: none; }
/* the orb lights up icy cyan under the pointer, and blooms green (Aero's aurora) when pressed or open */
body.aero #startbtn::before { transition: box-shadow .25s ease-out, filter .25s ease-out, background .25s; }
body.aero #startbtn:hover::before { filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -8px 12px rgba(140,240,255,.6), 0 0 10px 2px rgba(110,215,255,.95), 0 0 24px 6px rgba(70,170,255,.55); }
body.aero #startbtn:active::before, body.aero #startbtn.pressed::before { filter: brightness(1.15) saturate(1.3); transition-duration: .08s;
  background: radial-gradient(circle at 50% 120%, rgba(150,255,150,.95), transparent 58%), radial-gradient(circle at 50% 35%, #2fa8b8, #0c5a6e 70%, #062a35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -8px 12px rgba(160,255,150,.55), 0 0 10px 2px rgba(120,255,140,.9), 0 0 26px 7px rgba(60,220,120,.5); }
body.aero #startbtn:active .ico, body.aero #startbtn.pressed .ico { filter: drop-shadow(0 0 4px rgba(200,255,200,.95)); }
body.aero #startbtn .ico { position: relative; z-index: 1; width: 22px; height: 22px; margin: 0 auto; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
body.aero #tasks { gap: 2px; padding-left: 4px; }
body.aero .task { flex: 0 0 60px; width: 60px; min-width: 60px; height: 38px; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 3px;
  background: none; box-shadow: none; color: #fff; --mx: 50%; transition: background .2s, border-color .2s; }
body.aero .task span:last-child { display: none; }
body.aero .task .ico { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
body.aero .task, body.aero .task:not(.pressed) { border-color: rgba(255,255,255,.18); background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
body.aero .task:hover { background: radial-gradient(circle at var(--mx) 100%, rgba(var(--aero), .9), transparent 70%), linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.08)); border-color: rgba(255,255,255,.45); }
body.aero .task.pressed { font-weight: normal; border-color: rgba(255,255,255,.5); background: radial-gradient(circle at var(--mx) 100%, rgba(var(--aero), .7), transparent 75%), linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.12)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 0 6px rgba(255,255,255,.4); }
body.aero #tray { height: 40px; border: 0; box-shadow: none; background: none; color: #fff; padding: 0 10px; text-shadow: 0 1px 2px #000; }
body.aero #clock { display: flex; flex-direction: column; align-items: center; line-height: 1.25; font-size: 11.5px; }
body.aero #clock::after { content: attr(data-date); }
body.aero #tray::after { display: none; }
/* Show desktop: the glass strip at the far right of the taskbar */
.show-desk { display: none; }
body.aero .show-desk { display: block; flex: none; align-self: stretch; width: 15px; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 1px 0 rgba(0,0,0,.35); background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.05)); cursor: default; transition: background .15s; }
body.aero .show-desk:hover { background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); box-shadow: inset 1px 0 rgba(0,0,0,.35), inset 0 0 6px rgba(255,255,255,.7); }
body.aero .show-desk:active { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.12)); }
body[data-family="vista"] .show-desk { width: 12px; }
body.peeking.peek-desk #icons { opacity: 1; }
/* Start menu: glass frame, white program list, dark glass side column, search box */
body.aero #startmenu { bottom: 40px; left: 0; display: grid; grid-template-columns: 250px 150px; grid-template-rows: 1fr auto; gap: 0 6px; padding: 8px;
  border: 1px solid rgba(0,0,0,.65); border-radius: 7px 7px 0 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 18px rgba(0,0,0,.5);
  background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.05)), linear-gradient(rgba(var(--aero), .35), rgba(var(--aero), .35)), rgba(20,32,55,.74); backdrop-filter: blur(8px) saturate(1.5); }
body.aero #startmenu .banner { display: none; }
body.aero #startitems { background: #fff; border: 1px solid rgba(0,0,0,.5); border-radius: 4px 4px 0 0; padding: 4px; max-height: 70vh; overflow: auto; grid-row: 1; }
body.aero #startitems li { height: 32px; padding: 3px 8px; border: 1px solid transparent; border-radius: 3px; gap: 8px; }
body.aero #startitems li:hover, body.aero #startitems li:focus-visible { background: linear-gradient(#f1f7fe, #dcebfc); border-color: #aecff7; color: #000; }
body.aero #startitems.sm-allmode { max-height: none; overflow-y: auto; overscroll-behavior: contain; }
body.aero #startitems.sm-allmode .sm-back { position: sticky; bottom: -4px; margin-bottom: -4px; background: #fff; z-index: 1;
  border-top-color: #e2e3e3; border-radius: 0; box-shadow: 0 -4px 0 #fff; }
body.aero #startitems li.sep { height: 0; padding: 0; margin: 4px 6px; border-top: 1px solid #e2e3e3; border-radius: 0; }
body.aero .sm-search { grid-row: 2; grid-column: 1; margin: 0; padding: 5px 8px; border: 1px solid rgba(0,0,0,.5); border-top: 1px solid #ccc; border-radius: 0 0 4px 4px; font-style: italic; background: #fff; }
body.aero .sm-side { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; color: #fff; text-shadow: 0 1px 3px #000; }
.sm-user { align-self: center; margin: -26px 0 8px; padding: 4px; background: linear-gradient(#fff, #d8e2ee); border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.5); }
.sm-user .ico { width: 44px; height: 44px; }
.sm-side ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.sm-side li { padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; cursor: default; }
.sm-side li:hover { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.1)); border-color: rgba(255,255,255,.5); box-shadow: inset 0 0 4px rgba(255,255,255,.3); }
.sm-side li.sep { height: 0; padding: 0; margin: 4px 6px; border: 0; border-top: 1px solid rgba(255,255,255,.25); }
.sm-shut { align-self: flex-start; margin: 6px 0 0 6px; padding: 3px 14px; color: #fff; text-shadow: 0 1px 2px #000; border: 1px solid rgba(0,0,0,.6); border-radius: 3px;
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.1) 50%, rgba(0,0,0,.2) 51%, rgba(255,255,255,.15)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.sm-shutrow { display: flex; align-items: flex-start; gap: 0; }
.sm-shutrow .sm-shut + .sm-shut { margin-left: -1px; padding: 3px 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sm-shutrow .sm-shut:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sm-shut:hover { background: linear-gradient(#f9b1a1, #e2604a 50%, #c32a12 51%, #e8664a); }
body.aero #assistant { bottom: calc(6px + var(--under)); }

/* ======================================================================== Snow Leopard Aqua */
body[data-family="aqua"] {
  --face: #e8e8e8; --light: #ffffff; --hi: #ffffff; --lo: #9a9a9a; --dk: #555555; --sel: #3875d7;
  --aqua-1: #8fc3f7; --aqua-2: #3a85e0; --aqua-3: #1d5fc7; --aqua-hot: linear-gradient(#6a90e8, #2a5bd9);
  --font: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-family="aqua"].graphite { --sel: #6f7c8c; --aqua-1: #d7dde4; --aqua-2: #96a1ae; --aqua-3: #6b7685; --aqua-hot: linear-gradient(#8f9aa8, #66717f); }
body[data-family="aqua"] #desktop { top: 22px; bottom: 0; }
body[data-family="aqua"] #taskbar { display: none; }
body[data-family="aqua"] #assistant { bottom: 84px; }
/* menu bar */
#macbar { position: fixed; left: 0; right: 0; top: 0; height: 22px; z-index: 9400; display: flex; align-items: center; gap: 2px; padding: 0 8px;
  font: 13px var(--font); color: #000; background: linear-gradient(rgba(255,255,255,.92), rgba(222,222,222,.88)); border-bottom: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 5px rgba(0,0,0,.25); backdrop-filter: blur(10px); user-select: none; }
#macbar > span, #macbar > b { padding: 1px 9px; border-radius: 0; line-height: 20px; cursor: default; }
#macbar .mb-app { font-weight: bold; }
#macbar .mb-apple { padding: 1px 10px 1px 6px; display: flex; align-items: center; }
#macbar .mb-apple .ico { width: 17px; height: 17px; }
#macbar > span.open, #macbar > span:active, #macbar > b.open { background: var(--aqua-hot); color: #fff; }
#macbar .mb-gap { flex: 1; padding: 0; }
#macbar .mb-spot { font-size: 16px; width: 26px; text-align: center; background: linear-gradient(#5f8fe6, #2a5bd9); color: #fff; padding: 0 !important; height: 22px; line-height: 22px; }
body.graphite #macbar .mb-spot { background: linear-gradient(#8f9aa8, #66717f); }
#macbar #tray { height: 22px; border: 0; background: none; box-shadow: none; padding: 0 6px; gap: 10px; font-size: 13px; }
#macbar #clock::before { content: attr(data-day) " "; }
body[data-family="aqua"] #startmenu { top: 22px; bottom: auto; left: 4px; padding: 4px 0; min-width: 230px; border: 1px solid rgba(0,0,0,.2); border-top: 0; border-radius: 0 0 6px 6px;
  background: rgba(250,250,250,.96); box-shadow: 0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
body[data-family="aqua"] #startmenu .banner { display: none; }
body[data-family="aqua"] #startitems li { height: 26px; padding: 2px 18px 2px 12px; gap: 8px; font-size: 13px; }
body[data-family="aqua"] #startitems li .ico { width: 18px; height: 18px; }
body[data-family="aqua"] #startitems li:hover, body[data-family="aqua"] #startitems li:focus-visible { background: var(--aqua-hot); color: #fff; }
body[data-family="aqua"] #startitems li.sep { height: 0; padding: 0; margin: 5px 0; border-top: 1px solid #e0e0e0; }
/* Dock: a glass shelf in perspective; icons magnify toward the pointer (themes.js sets their size per frame) */
#dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 9300; height: 92px; display: flex; align-items: flex-end; pointer-events: none; }
.dock-shelf { position: absolute; left: -14px; right: -14px; bottom: 0; height: 30px; transform: perspective(160px) rotateX(48deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(255,255,255,.3), rgba(210,220,235,.55) 70%, rgba(255,255,255,.8)); border: 1px solid rgba(255,255,255,.75); border-bottom-width: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 -2px 12px rgba(0,0,0,.2); border-radius: 3px; backdrop-filter: blur(6px); }
.dock-items { position: relative; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px 12px; pointer-events: auto; }
.dock-item { position: relative; width: 46px; height: 46px; display: flex; justify-content: center; align-items: flex-end; flex: none; }
.dock-item .dock-ico { width: 100%; height: 100%; -webkit-box-reflect: below 2px linear-gradient(transparent 70%, rgba(255,255,255,.3)); filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.dock-item .dock-ico img { width: 100%; height: 100%; }
.dock-item .dock-ico:not(.themed) svg { width: 100%; height: 100%; }
/* launch bounce: up fast and easing off at the top, down accelerating like it's falling; a little squash on landing.
   --bd is a negative delay so a bounce resumes mid-hop after the Dock re-renders */
.dock-item.bouncing .dock-ico { animation: dock-bounce .65s linear 2; animation-delay: var(--bd, 0ms); transform-origin: 50% 100%; }
@keyframes dock-bounce {
  0% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.15,.55,.35,1); }
  46% { transform: translateY(-34px) scale(1, 1); animation-timing-function: cubic-bezier(.65,0,.85,.45); }
  90% { transform: translateY(0) scale(1.06, .93); animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .dock-item.bouncing .dock-ico { animation: none; } }
.dock-run { position: absolute; bottom: -9px; left: 50%; width: 6px; height: 4px; margin-left: -3px; border-radius: 50%; background: #e8f4ff; box-shadow: 0 0 4px 2px rgba(150,210,255,.9); }
.dock-label { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 11px; font: 12px var(--font);
  color: #fff; background: rgba(20,20,20,.75); box-shadow: 0 0 0 1px rgba(255,255,255,.25); opacity: 0; transition: opacity .12s; pointer-events: none; }
.dock-item:hover .dock-label { opacity: 1; }
.dock-sep { width: 1px; height: 44px; margin: 0 8px 2px; align-self: flex-end; background: repeating-linear-gradient(rgba(255,255,255,.85) 0 2px, rgba(0,0,0,.25) 2px 4px); }
.dock-item.mini .dock-ico { opacity: .85; }
/* windows */
body[data-family="aqua"] .window:not(.skin) { padding: 0; border: 0; border-radius: 5px 5px 4px 4px; background: #e8e8e8;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.45); overflow: hidden; }
body[data-family="aqua"] .window:not(.skin):not(.active) { box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 5px 16px rgba(0,0,0,.25); }
body[data-family="aqua"] .window.max:not(.skin) { border-radius: 0; }
body[data-family="aqua"] .window:not(.skin) .titlebar { height: 22px; padding: 0 8px; gap: 0; background: linear-gradient(#e9e9e9, #d0d0d0 50%, #bcbcbc) !important;
  border-bottom: 1px solid #888; color: #4d4d4d; font-weight: normal; font-size: 13px; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
body[data-family="aqua"] .window:not(.skin):not(.active) .titlebar { background: linear-gradient(#f4f4f4, #e3e3e3) !important; color: #8e8e8e; border-bottom-color: #b5b5b5; }
body[data-family="aqua"] .window:not(.skin) .titlebar > .ico { order: 2; width: 16px; height: 16px; margin-right: 5px; }
body[data-family="aqua"] .window:not(.skin) .titlebar .ttext { order: 3; flex: 0 1 auto; text-shadow: inherit; }
body[data-family="aqua"] .window:not(.skin) .titlebar::after { content: ""; order: 4; flex: 1; }
body[data-family="aqua"] .window:not(.skin) .titlebar::before { content: ""; order: 1; flex: 1; }
/* traffic lights: close (red), minimize (yellow), zoom (green), left to right */
body[data-family="aqua"] .tbtns { order: 0; justify-content: flex-start; gap: 7px; width: 62px; margin-right: -62px; position: relative; z-index: 2; }
body[data-family="aqua"] .window:not(.skin) .tbtns { margin-right: 0; }
body[data-family="aqua"] .tbtns button { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); margin: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 3px rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.6); }
body[data-family="aqua"] .tbtns button.close { order: 1; background: radial-gradient(circle at 50% 25%, #fff 0 18%, transparent 40%), radial-gradient(circle at 50% 85%, #ffc2b8, #e6392a 60%, #8f150b); }
body[data-family="aqua"] .tbtns button.tb-min { order: 2; background: radial-gradient(circle at 50% 25%, #fff 0 18%, transparent 40%), radial-gradient(circle at 50% 85%, #fff2b0, #f2b40a 60%, #a26a00); }
body[data-family="aqua"] .tbtns button.tb-max { order: 3; background: radial-gradient(circle at 50% 25%, #fff 0 18%, transparent 40%), radial-gradient(circle at 50% 85%, #c9f0a8, #28a830 60%, #136b17); }
body[data-family="aqua"] .tbtns button.off { display: block; background: radial-gradient(circle at 50% 30%, #fafafa, #cfcfcf) !important; border-color: rgba(0,0,0,.25); }
body[data-family="aqua"] .tbtns button.off svg { display: none; }
body[data-family="aqua"].graphite .tbtns button { background: radial-gradient(circle at 50% 25%, #fff 0 18%, transparent 40%), radial-gradient(circle at 50% 85%, #e6eaf0, #8e98a6 60%, #4f5866) !important; }
body[data-family="aqua"] .window:not(.active) .tbtns button { background: radial-gradient(circle at 50% 30%, #fafafa, #cfcfcf) !important; border-color: rgba(0,0,0,.25); }
body[data-family="aqua"] .tbtns svg { opacity: 0; width: 7px; height: 7px; transition: opacity .1s; }
body[data-family="aqua"] .tbtns:hover svg { opacity: .6; }
body[data-family="aqua"] .window:not(.skin) .menubar { display: none; }
body[data-family="aqua"] .wbody { background: #ececec; }
body[data-family="aqua"] .statusbar { margin: 0; padding: 2px 6px; background: linear-gradient(#d8d8d8, #b8b8b8); border-top: 1px solid #8a8a8a; }
body[data-family="aqua"] .statusbar > div { border: 0; box-shadow: none; color: #333; font-size: 11px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
body[data-family="aqua"] .grip { background: linear-gradient(135deg, transparent 0 45%, #8a8a8a 45% 50%, transparent 50% 62%, #8a8a8a 62% 67%, transparent 67% 79%, #8a8a8a 79% 84%, transparent 84%); }
body[data-family="aqua"] .window.opening { animation: aqua-open .2s ease-out; }
@keyframes aqua-open { from { opacity: 0; transform: scale(.92); } }
/* controls: lickable */
body[data-family="aqua"] .raised { background: var(--face); border: 1px solid #b5b5b5; box-shadow: none; }
body[data-family="aqua"] .sunken { border: 1px solid #a8a8a8; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
body[data-family="aqua"] .btn { min-height: 21px; padding: 2px 16px; border-radius: 11px; border: 1px solid #8a8a8a; font-size: 12.5px;
  background: linear-gradient(#ffffff, #f1f1f1 50%, #e2e2e2 51%, #f6f6f6); box-shadow: 0 1px 1px rgba(0,0,0,.15), inset 0 1px #fff; }
body[data-family="aqua"] .btn:active:not(:disabled), body[data-family="aqua"] .btn.pressed { padding: 2px 16px; background: linear-gradient(var(--aqua-1), var(--aqua-2) 50%, var(--aqua-3) 51%, var(--aqua-1)); color: #000; border-color: #2a4f85; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
body[data-family="aqua"] .btn.primary { outline: none; border-color: #30558f; background: linear-gradient(#d4e7fb, var(--aqua-1) 50%, var(--aqua-2) 51%, #bfe2ff); box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.8); }
body[data-family="aqua"].graphite .btn.primary { border-color: #5b6470; }
body[data-family="aqua"] .btn:disabled { color: #a0a0a0; text-shadow: none; opacity: .75; }
body[data-family="aqua"] .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(80,150,230,.55); }
body[data-family="aqua"] select.field, body[data-family="aqua"] input.field, body[data-family="aqua"] textarea.field, body[data-family="aqua"] .field {
  border: 1px solid #9a9a9a; border-top-color: #6f6f6f; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); border-radius: 0; background: #fff; }
body[data-family="aqua"] select.field { border-radius: 10px; padding: 1px 22px 1px 9px; appearance: none; -moz-appearance: none; border-color: #8a8a8a; box-shadow: 0 1px 1px rgba(0,0,0,.15);
  background: linear-gradient(var(--aqua-1), var(--aqua-2) 50%, var(--aqua-3) 51%, var(--aqua-1)) right / 18px 100% no-repeat, linear-gradient(#fff, #f1f1f1 50%, #e2e2e2 51%, #f6f6f6); }
body[data-family="aqua"] input.field:focus, body[data-family="aqua"] textarea:focus, body[data-family="aqua"] select:focus { outline: none; box-shadow: 0 0 0 3px rgba(80,150,230,.55); }
body[data-family="aqua"] fieldset { border: 1px solid rgba(0,0,0,.14); border-radius: 5px; background: rgba(0,0,0,.035); box-shadow: none; }
body[data-family="aqua"] legend { background: transparent; font-size: 11.5px; color: #333; }
body[data-family="aqua"] .tabs { justify-content: center; padding: 6px 4px 0; }
body[data-family="aqua"] .tab { margin: 0; border: 1px solid #8a8a8a; border-right: 0; border-radius: 0; padding: 2px 14px; box-shadow: none; font-size: 12px;
  background: linear-gradient(#ffffff, #f1f1f1 50%, #e2e2e2 51%, #f6f6f6); position: relative; z-index: 3; margin-bottom: -11px; }
body[data-family="aqua"] .tab:first-child { border-radius: 11px 0 0 11px; }
body[data-family="aqua"] .tab:last-child { border-radius: 0 11px 11px 0; border-right: 1px solid #8a8a8a; }
body[data-family="aqua"] .tab.on { background: linear-gradient(#d4e7fb, var(--aqua-1) 50%, var(--aqua-2) 51%, #bfe2ff); padding-bottom: 2px; margin-bottom: -11px; }
body[data-family="aqua"] .tabpage { border: 1px solid rgba(0,0,0,.18); border-radius: 5px; background: rgba(0,0,0,.035); box-shadow: none; padding-top: 22px; }
body[data-family="aqua"] table.list th { background: linear-gradient(#fff, #e9e9e9); border: 0; border-right: 1px solid #c8c8c8; border-bottom: 1px solid #a8a8a8; box-shadow: none; font-size: 11px; }
body[data-family="aqua"] table.list tbody tr:nth-child(even) td { background: #edf3fe; }
body[data-family="aqua"] table.list tr.sel td { background: var(--sel) !important; color: #fff; }
body[data-family="aqua"] .ctxmenu { padding: 4px 0; border: 1px solid rgba(0,0,0,.18); border-radius: 5px; background: rgba(250,250,250,.96); box-shadow: 0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(10px); font-size: 13px; }
body[data-family="aqua"] .ctxmenu .mi { padding: 2px 18px 2px 4px; }
body[data-family="aqua"] .ctxmenu .mi.hot { background: var(--aqua-hot); color: #fff; }
body[data-family="aqua"] .ctxmenu .msep { border: 0; border-top: 1px solid #e0e0e0; margin: 5px 0; }
body[data-family="aqua"] .dicon { color: #fff; border-radius: 6px; width: 80px; }
body[data-family="aqua"] .dicon .ico { width: 44px; height: 44px; padding: 2px; border-radius: 6px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
body[data-family="aqua"] .dicon span.lbl { font-weight: bold; font-size: 11.5px; text-shadow: 0 1px 2px #000, 0 0 2px #000; border-radius: 8px; padding: 0 6px; }
body[data-family="aqua"] .dicon.sel .ico { background: rgba(0,0,0,.25); box-shadow: 0 0 0 1px rgba(255,255,255,.5); filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
body[data-family="aqua"] .dicon.sel span.lbl { background: var(--sel); outline: none; text-shadow: none; }
@media (max-width: 700px) {
  #dock .dock-item { width: 34px !important; height: 34px !important; }
  #dock .dock-items { gap: 0; padding-bottom: 8px; }
  #macbar .mb-menu:nth-of-type(n+5) { display: none; }
  body[data-family="aqua"] #desktop { --under: 54px; }   /* phone windows stop above the Dock */
}

/* ======================================================================== Windows XP (Luna, Royale, Zune) */
/* Per-style colours: title bar, frame, taskbar, notification area, caption buttons, selection */
body[data-family="xp"] {
  --face: #ece9d8; --light: #ffffff; --hi: #ffffff; --lo: #aca899; --dk: #716f64; --sel: #316ac5;
  --font: Tahoma, "DejaVu Sans", Verdana, sans-serif; --xp-font: "Trebuchet MS", Tahoma, sans-serif;
  --xp-title: linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
  --xp-title-off: linear-gradient(#a8c0f0, #8aa8e8 8%, #7d9ce6 40%, #8fb0f2 90%, #7d98d8);
  --xp-frame: #0831d9; --xp-frame-off: #6b8ce6; --xp-ttext: #fff; --xp-tshadow: 1px 1px #0f1089;
  --xp-btn: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%); --xp-glyph: #fff;
  --xp-bar: linear-gradient(#1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
  --xp-tray: linear-gradient(#0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9);
  --xp-task: linear-gradient(#5d9bf8, #3c81f3 15%, #2f6ee5 85%, #2a63d6); --xp-task-on: linear-gradient(#1e52b7, #1a48a8); --xp-task-text: #fff;
  --xp-start: radial-gradient(circle at 20% 15%, rgba(255,255,255,.45), transparent 35%), linear-gradient(#5fb85f, #3c9a3c 40%, #2c8a2c 60%, #3aa83a 92%, #2a7a2a);
  --xp-smhead: linear-gradient(#1868ce, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e6cd3 54%, #1f6dd4 60%, #1d6dd5 65%, #1a6ad3 77%, #1468d1 79%, #0e60cb 90%, #2a7ad8);
  --xp-smright: #d3e5fa; --xp-smline: #95bdee;
  -webkit-font-smoothing: auto;
}
body[data-xp="olive"] {
  --xp-title: linear-gradient(#cdd9a6, #a2b57a 10%, #94aa6a 45%, #8aa05e 85%, #7c9050); --xp-title-off: linear-gradient(#e2e7cd, #cfd8b0);
  --xp-frame: #8ba169; --xp-frame-off: #c3cfa0; --xp-tshadow: 1px 1px #4a5a2a; --sel: #93a070;
  --xp-btn: radial-gradient(circle at 90% 90%, #6f8a43 0%, #8ba169 55%, #a8bc84 70%, #d8e4c0 90%, #fff 100%);
  --xp-bar: linear-gradient(#b0c28e, #a3b67d 5%, #93a76c 15%, #8a9f62 50%, #7d9357 90%, #6a7f47); --xp-tray: linear-gradient(#cfdba8, #b9c993 10%, #a8ba7f 90%, #94a86a);
  --xp-task: linear-gradient(#c3d29f, #a9bc83 50%, #9bb075); --xp-task-on: linear-gradient(#83975c, #7a8e52); --xp-smhead: linear-gradient(#a2b57a, #8aa05e);
  --xp-smright: #e9edd9; --xp-smline: #b4c497;
}
body[data-xp="silver"] {
  --face: #e0dfe3; --xp-title: linear-gradient(#ffffff, #e8e8ef 10%, #d1d1dd 45%, #c3c3d2 85%, #a5a5bc); --xp-title-off: linear-gradient(#f8f8fa, #e8e8ee);
  --xp-frame: #b5b5c8; --xp-frame-off: #dadae4; --xp-ttext: #000; --xp-tshadow: 1px 1px #fff; --xp-glyph: #333; --sel: #b2b4bf;
  --xp-btn: radial-gradient(circle at 90% 90%, #c6c6d6 0%, #dcdce6 55%, #ececf2 70%, #f8f8fb 90%, #fff 100%);
  --xp-bar: linear-gradient(#f5f5f7, #e3e3ea 5%, #d4d4de 15%, #c9c9d6 50%, #bcbccb 90%, #9a9aae); --xp-tray: linear-gradient(#fdfdfd, #ececf2 10%, #dcdce4 90%, #c4c4d0);
  --xp-task: linear-gradient(#fbfbfc, #e6e6ec 50%, #d6d6e0); --xp-task-on: linear-gradient(#b8b8c8, #a8a8ba); --xp-task-text: #000;
  --xp-smhead: linear-gradient(#e8e8ee, #c3c3d2); --xp-smright: #e8e8ee; --xp-smline: #b5b5c8;
}
body[data-xp="silver"] .tbtns svg [fill="#fff"] { fill: #333; }
body[data-xp="royale"] {
  --face: #ebe9ed;
  --xp-title: linear-gradient(#a8c6f8, #6f9cee 10%, #4a7fe6 45%, #2f62d6 52%, #3a72e2 85%, #5a8ef0); --xp-title-off: linear-gradient(#c8d8f6, #a8c0ee);
  --xp-frame: #2f62d6; --xp-frame-off: #8aa8e8; --xp-tshadow: 1px 1px #102a70;
  --xp-btn: radial-gradient(circle at 90% 90%, #1d4fc0 0%, #3a6fd8 55%, #5f8fe6 70%, #c2d6f8 90%, #fff 100%);
  --xp-bar: linear-gradient(#7ea8f0, #4a7fe6 15%, #2c5fd2 48%, #173fae 52%, #2450c0 90%, #3a68d0); --xp-tray: linear-gradient(#5a9af6, #2a6ee0 48%, #1756c8 52%, #2a6ee0);
  --xp-task: linear-gradient(#8fb4f6, #4f84e8 48%, #3268d8 52%, #4a80e6); --xp-task-on: linear-gradient(#173fae, #2450c0);
  --xp-smhead: linear-gradient(#5f8fe6, #2c5fd2 48%, #173fae 52%, #2a5ac8); --xp-smright: #dce8fb;
}
body[data-xp="noir"] {
  --face: #ebe9ed; --sel: #36486a;
  --xp-title: linear-gradient(#6a6a6a, #3a3a3a 10%, #222 45%, #050505 52%, #181818 85%, #2e2e2e); --xp-title-off: linear-gradient(#9a9a9a, #6f6f6f);
  --xp-frame: #1a1a1a; --xp-frame-off: #6f6f6f; --xp-tshadow: 1px 1px #000;
  --xp-btn: radial-gradient(circle at 90% 90%, #000 0%, #2a2a2a 55%, #4a4a4a 70%, #9a9a9a 90%, #ddd 100%);
  --xp-bar: linear-gradient(#5a5a5a, #2c2c2c 15%, #161616 48%, #000 52%, #0c0c0c 90%, #262626); --xp-tray: linear-gradient(#3a3a3a, #1a1a1a 48%, #000 52%, #141414);
  --xp-task: linear-gradient(#5a5a5a, #2e2e2e 48%, #1a1a1a 52%, #2a2a2a); --xp-task-on: linear-gradient(#000, #141414);
  --xp-smhead: linear-gradient(#4a4a4a, #161616 48%, #000 52%, #1a1a1a); --xp-smright: #e4e4ea; --xp-smline: #9a9aa8;
}
body[data-xp="zune"] {
  --face: #ececec; --sel: #e8730c;
  --xp-title: linear-gradient(#555, #333 10%, #222 45%, #111 52%, #1c1c1c 85%, #2a2a2a); --xp-title-off: linear-gradient(#9a9a9a, #777);
  --xp-frame: #222; --xp-frame-off: #777; --xp-tshadow: 1px 1px #000;
  --xp-btn: radial-gradient(circle at 90% 90%, #111 0%, #333 55%, #555 70%, #999 90%, #ddd 100%);
  --xp-bar: linear-gradient(#4a4a4a, #262626 15%, #121212 48%, #000 52%, #0a0a0a 92%, #e8730c 96%, #9a4a08); --xp-tray: linear-gradient(#333, #151515 48%, #000 52%, #111);
  --xp-task: linear-gradient(#4a4a4a, #2a2a2a 48%, #1a1a1a 52%, #262626); --xp-task-on: linear-gradient(#e8730c, #b8580a);
  --xp-start: radial-gradient(circle at 20% 15%, rgba(255,255,255,.45), transparent 35%), linear-gradient(#f9a04a, #e8730c 45%, #c85a08 60%, #e07a1a 92%, #8a3a00);
  --xp-smhead: linear-gradient(#3a3a3a, #111 48%, #000 52%, #1a1a1a); --xp-smright: #f2f2f2; --xp-smline: #e8730c;
}
body[data-family="xp"] #desktop { bottom: 30px; }
body[data-family="xp"] .window:not(.skin) { padding: 0 3px 3px; border: 1px solid var(--xp-frame); border-top: 0; border-radius: 8px 8px 0 0; background: var(--xp-frame); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 2px 2px 8px rgba(0,0,0,.35); }
body[data-family="xp"] .window:not(.skin):not(.active) { background: var(--xp-frame-off); border-color: var(--xp-frame-off); }
body[data-family="xp"] .window.max:not(.skin) { border-radius: 0; }
body[data-family="xp"] .window:not(.skin) .titlebar { height: 29px; margin: 0 -3px; padding: 0 5px 0 7px; gap: 4px; border-radius: 7px 7px 0 0;
  background: var(--xp-title) !important; color: var(--xp-ttext); font: bold 13px var(--xp-font); }
body[data-family="xp"] .window:not(.skin):not(.active) .titlebar { background: var(--xp-title-off) !important; color: rgba(255,255,255,.85); }
body[data-xp="silver"] .window:not(.skin):not(.active) .titlebar { color: #7a7a8a; }
body[data-family="xp"] .window:not(.skin) .titlebar .ttext { text-shadow: var(--xp-tshadow); letter-spacing: .2px; }
body[data-family="xp"] .tbtns { gap: 2px; }
body[data-family="xp"] .tbtns button { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; background: var(--xp-btn); box-shadow: inset 0 0 1px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.3); }
body[data-family="xp"] .tbtns button:hover { filter: brightness(1.18) saturate(1.1); }
body[data-family="xp"] .tbtns button:active { filter: brightness(.85); }
body[data-family="xp"] .tbtns button.close { margin-left: 2px; background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%); }
body[data-family="xp"] .window:not(.active) .tbtns button { opacity: .75; }
body[data-family="xp"] .tbtns svg { width: 11px; height: 11px; }
body[data-family="xp"] .tbtns svg [fill="#000"] { fill: var(--xp-glyph); } body[data-family="xp"] .tbtns svg [stroke="#000"] { stroke: var(--xp-glyph); stroke-width: 2.2; }
body[data-family="xp"] .tbtns button.close svg [stroke="#000"] { stroke: #fff; }
body[data-family="xp"] .menubar { background: var(--face); border-bottom: 1px solid rgba(0,0,0,.1); }
body[data-family="xp"] .menubar span:hover, body[data-family="xp"] .menubar span.open { box-shadow: none; background: var(--sel); color: #fff; }
body[data-family="xp"] .wbody { background: var(--face); }
body[data-family="xp"] .statusbar { margin-top: 0; background: var(--face); }
body[data-family="xp"] .statusbar > div { border: 0; box-shadow: inset 1px 1px rgba(0,0,0,.08); }
body[data-family="xp"] .raised { background: var(--face); border: 1px solid #b5b2a2; box-shadow: none; }
body[data-family="xp"] .sunken { border: 1px solid #7f9db9; box-shadow: none; }
body[data-family="xp"] .btn { border: 1px solid #003c74; border-radius: 3px; min-height: 23px; background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); box-shadow: none; }
body[data-family="xp"] .btn:hover:not(:disabled) { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
body[data-family="xp"] .btn:active:not(:disabled), body[data-family="xp"] .btn.pressed { padding: 3px 10px; background: linear-gradient(#cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); box-shadow: none; }
body[data-family="xp"] .btn.primary, body[data-family="xp"] .btn:focus-visible { outline: none; box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4; }
body[data-family="xp"] .btn:disabled { color: #aca899; border-color: #c9c7ba; background: #f5f4ea; text-shadow: none; }
body[data-family="xp"] select.field, body[data-family="xp"] input.field, body[data-family="xp"] textarea.field, body[data-family="xp"] .field { border: 1px solid #7f9db9; box-shadow: none; border-radius: 0; background: #fff; }
body[data-family="xp"] fieldset { border: 1px solid #d0d0bf; border-radius: 4px; box-shadow: none; }
body[data-family="xp"] legend { background: transparent; color: #0046d5; }
body[data-family="xp"] .tab { border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #fafaf9 26%, #f0f0ea 95%, #ecebe5); box-shadow: none; }
body[data-family="xp"] .tab:hover { border-top-color: #ffc73c; box-shadow: inset 0 1px #ffc73c; }   /* accent inside the border: no size change, nothing below shifts */
body[data-family="xp"] .tab.on { background: #fcfcfe; border-top-color: #e68b2c; box-shadow: inset 0 1px #e68b2c; }
body[data-family="xp"] .tabpage { border: 1px solid #919b9c; box-shadow: none; background: #fcfcfe; }
body[data-family="xp"] table.list th { background: linear-gradient(#fff, #ebeadb); border: 0; border-right: 1px solid #d5d2c2; border-bottom: 3px solid #e2decd; box-shadow: none; }
body[data-family="xp"] table.list th:hover { border-bottom-color: #f9b119; }
body[data-family="xp"] table.list tr.sel td { background: var(--sel); color: #fff; }
body[data-family="xp"] .ctxmenu { background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 3px rgba(0,0,0,.35); padding: 2px; }
body[data-family="xp"] .ctxmenu .mi.hot { background: var(--sel); color: #fff; }
body[data-family="xp"] .ctxmenu .msep { border-top-color: #aca899; border-bottom: 0; }
body[data-family="xp"] .dicon .ico { width: 36px; height: 36px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)); }
body[data-family="xp"] .dicon span.lbl { text-shadow: 1px 1px 1px #000, 1px 1px 3px #000; }
body[data-family="xp"] .dicon.sel span.lbl { background: var(--sel); outline: 1px dotted #fff; text-shadow: none; }
body[data-family="xp"] .dicon.sel .ico { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)) sepia(1) hue-rotate(180deg) saturate(2.5) brightness(.85); }
/* taskbar */
body[data-family="xp"] #taskbar { height: 30px; padding: 0; gap: 0; border: 0; background: var(--xp-bar); box-shadow: none; }
body[data-family="xp"] #startbtn { height: 30px; padding: 0 22px 2px 8px; margin-right: 10px; border: 0; border-radius: 0 12px 12px 0; gap: 5px;
  background: var(--xp-start); box-shadow: inset -2px 0 3px rgba(0,0,0,.25), inset 2px 2px 3px rgba(255,255,255,.25), 2px 0 3px rgba(0,0,0,.35); }
body[data-family="xp"] #startbtn:hover { filter: brightness(1.12); }
body[data-family="xp"] #startbtn.pressed { filter: brightness(.88); padding: 0 22px 2px 8px; }
body[data-family="xp"] #startbtn b { font: italic bold 19px "Franklin Gothic Medium", "Trebuchet MS", sans-serif; color: #fff; text-transform: lowercase; text-shadow: 1px 1px 2px rgba(0,0,0,.7); letter-spacing: .5px; }
body[data-family="xp"] #startbtn .ico { width: 22px; height: 22px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.6)); }
body[data-family="xp"] .tb-divider { display: none; }
body[data-family="xp"] #tasks { gap: 2px; padding: 0 4px; }
body[data-family="xp"] .task { height: 24px; border: 1px solid rgba(0,0,0,.3); border-radius: 3px; background: var(--xp-task); color: var(--xp-task-text); box-shadow: inset 1px 1px rgba(255,255,255,.35); }
body[data-family="xp"] .task:hover { filter: brightness(1.1); }
body[data-family="xp"] .task.pressed { font-weight: normal; background: var(--xp-task-on); box-shadow: inset 1px 1px 2px rgba(0,0,0,.45); }
body[data-xp="zune"] .task.pressed { color: #fff; }
body[data-family="xp"] #tray { height: 30px; border: 0; border-left: 1px solid rgba(0,0,0,.35); box-shadow: inset 1px 0 rgba(255,255,255,.3); background: var(--xp-tray); color: #fff; padding: 0 12px; }
body[data-xp="silver"] #tray { color: #000; }
/* Start menu: blue header with your picture, white programs, blue places, Log Off / Turn Off along the bottom */
body[data-family="xp"] #startmenu { bottom: 30px; left: 0; padding: 0; border: 0; border-radius: 8px 8px 0 0; display: grid; grid-template-columns: 210px 190px; grid-template-rows: auto 1fr auto;
  background: var(--xp-smhead); box-shadow: 2px 0 8px rgba(0,0,0,.5); overflow: hidden; font-size: 11.5px; }
body[data-family="xp"] #startmenu .banner, body[data-family="xp"] .sm-search, body[data-family="xp"] .sm-user, body[data-family="xp"] .sm-shut, body[data-family="xp"] .sm-shutrow, body[data-family="xp"] .sm-side ul li:first-child { display: none; }
body[data-family="xp"] .sm-head { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: #fff; font: bold 14px var(--xp-font); text-shadow: 1px 1px 2px rgba(0,0,0,.5); }
body[data-xp="silver"] .sm-head { color: #000; text-shadow: 0 1px #fff; }
body[data-family="xp"] .sm-pic { padding: 2px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 1px 1px 3px rgba(0,0,0,.5); }
body[data-family="xp"] .sm-pic .ico { width: 42px; height: 42px; }
body[data-family="xp"] #startitems { grid-row: 2; background: #fff; margin: 0 0 0 2px; padding: 4px 0; border-top: 2px solid #f7a83a; box-shadow: inset 0 1px 0 #fbd9a8; }
body[data-family="xp"] #startitems li { height: 30px; padding: 2px 8px; gap: 6px; }
body[data-family="xp"] #startitems li .ico { width: 24px; height: 24px; }
body[data-family="xp"] #startitems li:hover, body[data-family="xp"] #startitems li:focus-visible { background: var(--sel); color: #fff; }
body[data-family="xp"] #startitems li.sep { height: 0; padding: 0; margin: 4px 8px; border-top: 1px solid #e0dfe3; }
body[data-family="xp"] .sm-side { grid-row: 2; grid-column: 2; margin-right: 2px; background: var(--xp-smright); border-top: 2px solid #f7a83a; border-left: 1px solid var(--xp-smline); padding: 4px 0; display: block; color: #00136b; text-shadow: none; }
body[data-family="xp"] .sm-side ul { list-style: none; margin: 0; padding: 0; }
body[data-family="xp"] .sm-side li { padding: 6px 10px; font-weight: bold; border: 0; border-radius: 0; }
body[data-family="xp"] .sm-side li:hover { background: var(--sel); color: #fff; box-shadow: none; }
body[data-family="xp"] .sm-side li.sep { margin: 4px 8px; padding: 0; border-top: 1px solid var(--xp-smline); }
body[data-family="xp"] .sm-foot { grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 4px; padding: 4px 6px; }
body[data-family="xp"] .sm-foot button { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; background: none; color: #fff; font-size: 11.5px; border-radius: 3px; }
body[data-xp="silver"] .sm-foot button { color: #000; }
body[data-family="xp"] .sm-foot button:hover { background: rgba(255,255,255,.2); }
body[data-family="xp"] .sm-foot .ico { width: 22px; height: 22px; }
.sm-head, .sm-foot { display: none; }
body[data-family="xp"] .sm-head, body[data-family="xp"] .sm-foot { display: flex; }
.min-caption { font-family: var(--font); }
body[data-family="xp"] .min-caption { background: var(--xp-title); border-radius: 6px 6px 0 0; font: bold 12px var(--xp-font); }
.pv-xp { position: absolute; left: 22px; top: 18px; width: 112px; height: 64px; border-radius: 4px 4px 0 0; padding: 0 2px 2px; background: #0831d9; }
.pv-xp .pv-title { color: #fff; font: bold 8px "Trebuchet MS", sans-serif; padding: 2px 3px; background: linear-gradient(#0997ff, #0053ee 20%, #0066ff); border-radius: 4px 4px 0 0; margin: 0 -2px; }
.pv-xp .pv-body { height: 46px; background: #ece9d8; }
.pv-xp.xp-olive { background: #8ba169; } .pv-xp.xp-olive .pv-title { background: linear-gradient(#cdd9a6, #8aa05e); }
.pv-xp.xp-silver { background: #b5b5c8; } .pv-xp.xp-silver .pv-title { background: linear-gradient(#fff, #c3c3d2); color: #000; }
.pv-xp.xp-royale { background: #2f62d6; } .pv-xp.xp-royale .pv-title { background: linear-gradient(#a8c6f8, #2f62d6 52%, #5a8ef0); }
.pv-xp.xp-noir, .pv-xp.xp-zune { background: #1a1a1a; } .pv-xp.xp-noir .pv-title, .pv-xp.xp-zune .pv-title { background: linear-gradient(#6a6a6a, #050505 52%, #2e2e2e); }
.pv-barxp { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(#3682e5, #2157d6 50%, #1941a5); }
.pv-barxp i { position: absolute; left: 0; top: 0; width: 22px; height: 10px; border-radius: 0 5px 5px 0; background: linear-gradient(#5fb85f, #2c8a2c); }
.pv-barxp.xp-olive { background: linear-gradient(#b0c28e, #6a7f47); } .pv-barxp.xp-silver { background: linear-gradient(#f5f5f7, #9a9aae); }
.pv-barxp.xp-royale { background: linear-gradient(#7ea8f0, #173fae 52%, #3a68d0); } .pv-barxp.xp-noir, .pv-barxp.xp-zune { background: linear-gradient(#5a5a5a, #000 52%, #262626); }
.pv-barxp.xp-zune i { background: linear-gradient(#f9a04a, #c85a08); }

/* ======================================================================== Ubuntu 8.04 Hardy Heron (Human) */
body[data-family="ubuntu"] {
  --face: #efebe7; --light: #ffffff; --hi: #ffffff; --lo: #bdb4a8; --dk: #8a7f72; --sel: #e8731e;
  --font: "DejaVu Sans", "Bitstream Vera Sans", Verdana, sans-serif; --hu-orange: #f57900;
  font-size: 12px; -webkit-font-smoothing: antialiased;
}
body[data-family="ubuntu"] #desktop { top: 25px; bottom: 25px; }
/* panels */
#gnomebar { position: fixed; left: 0; right: 0; top: 0; height: 25px; z-index: 9400; display: flex; align-items: center; gap: 1px; padding: 0 2px;
  font: 12px var(--font); color: #2e2e2e; background: linear-gradient(#f6f3f0, #e6e0d9 50%, #dcd5cc); border-bottom: 1px solid #a89f92; box-shadow: 0 1px 3px rgba(0,0,0,.25); user-select: none; }
#gnomebar .gn-menu { display: flex; align-items: center; gap: 5px; padding: 0 7px; height: 23px; border-radius: 3px; cursor: default; }
#gnomebar .gn-menu .ico { width: 18px; height: 18px; }
#gnomebar .gn-menu:hover, #gnomebar .gn-menu.open { background: linear-gradient(#f9a25a, #e8731e); color: #fff; box-shadow: inset 0 0 0 1px #b8551a; }
#gnomebar .gn-launch, #gnomebar .gn-quit, .gn-showdesk, .gn-trash { display: grid; place-items: center; width: 26px; height: 23px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; }
#gnomebar .gn-launch .ico, #gnomebar .gn-quit .ico, .gn-showdesk .ico, .gn-trash .ico { width: 20px; height: 20px; }
#gnomebar .gn-launch:hover, #gnomebar .gn-quit:hover, .gn-showdesk:hover, .gn-trash:hover { border-color: #b5a99a; background: linear-gradient(#fff, #ece6df); }
#gnomebar .gn-gap { flex: 1; }
#gnomebar .gn-user { padding: 0 8px; }
#gnomebar #tray { height: 23px; border: 0; background: none; box-shadow: none; padding: 0 8px; gap: 10px; }
body[data-family="ubuntu"] #taskbar { height: 25px; padding: 0 2px; gap: 3px; border: 0; border-top: 1px solid #a89f92; background: linear-gradient(#f6f3f0, #e6e0d9 50%, #dcd5cc); box-shadow: 0 -1px 3px rgba(0,0,0,.18); }
body[data-family="ubuntu"] #startbtn, body[data-family="ubuntu"] .tb-divider { display: none; }
body[data-family="ubuntu"] #tasks { gap: 3px; }
body[data-family="ubuntu"] .task { height: 21px; max-width: 200px; border: 1px solid transparent; border-radius: 3px; background: none; box-shadow: none; color: #2e2e2e; font-size: 11.5px; }
body[data-family="ubuntu"] .task:hover { border-color: #b5a99a; background: linear-gradient(#fff, #ece6df); }
body[data-family="ubuntu"] .task.pressed { font-weight: normal; border-color: #9c8f80; background: linear-gradient(#d9d1c7, #e8e2db); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.gn-ws { display: flex; gap: 1px; padding: 1px; margin-left: auto; border: 1px solid #9c8f80; background: #8a7f72; }
.gn-ws i { width: 26px; height: 17px; background: #c9c0b4; }
.gn-ws i.on { background: linear-gradient(#f9a25a, #e8731e); }
body[data-family="ubuntu"] #tasks { flex: 1; }
/* windows: Metacity's Human frame, orange */
body[data-family="ubuntu"] .window:not(.skin) { padding: 0 4px 4px; border: 1px solid #7a3a0c; border-radius: 5px 5px 0 0; background: linear-gradient(#e47a2a, #c95f18 30px, #b9561a); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
body[data-family="ubuntu"] .window:not(.skin):not(.active) { background: linear-gradient(#dcd2c6, #c8bcae 30px, #c2b5a6); border-color: #8a7f72; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
body[data-family="ubuntu"] .window.max:not(.skin) { border-radius: 0; }
body[data-family="ubuntu"] .window:not(.skin) .titlebar { height: 25px; padding: 0 0 0 2px; gap: 6px; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 60%) !important; margin: 0 -4px; padding: 0 4px 0 6px; border-radius: 4px 4px 0 0;
  color: #fff; font: bold 12.5px var(--font); text-shadow: 0 1px 1px rgba(80,30,0,.7); }
body[data-family="ubuntu"] .window:not(.skin):not(.active) .titlebar { color: #6d6458; text-shadow: 0 1px #ece6df; }
body[data-family="ubuntu"] .tbtns { gap: 3px; }
body[data-family="ubuntu"] .tbtns button { width: 19px; height: 18px; border: 1px solid rgba(90,35,0,.7); border-radius: 4px; background: linear-gradient(#f8a35e, #e1701e 55%, #d36214); box-shadow: inset 0 1px rgba(255,255,255,.45); }
body[data-family="ubuntu"] .window:not(.active) .tbtns button { background: linear-gradient(#ebe4dc, #d3c9bd); border-color: #9c8f80; }
body[data-family="ubuntu"] .tbtns button:hover { background: linear-gradient(#ffc18a, #f08a3a 55%, #e2721e); }
body[data-family="ubuntu"] .tbtns button.close:hover { background: linear-gradient(#ff9a8a, #e0402a 55%, #c22a14); }
body[data-family="ubuntu"] .tbtns svg [fill="#000"] { fill: #fff; } body[data-family="ubuntu"] .tbtns svg [stroke="#000"] { stroke: #fff; stroke-width: 2; }
body[data-family="ubuntu"] .window:not(.active) .tbtns svg [fill="#000"], body[data-family="ubuntu"] .window:not(.active) .tbtns svg [stroke="#000"] { fill: #6d6458; stroke: #6d6458; }
body[data-family="ubuntu"] .menubar { background: var(--face); border-bottom: 1px solid #d6cec4; margin: 0 -4px; padding: 1px 4px; }
body[data-family="ubuntu"] .menubar span { border-radius: 3px; }
body[data-family="ubuntu"] .menubar span:hover, body[data-family="ubuntu"] .menubar span.open { box-shadow: none; background: linear-gradient(#f9a25a, #e8731e); color: #fff; }
body[data-family="ubuntu"] .wbody { background: var(--face); margin: 0 -4px -4px; padding: 4px; }
body[data-family="ubuntu"] .statusbar { margin: 4px -4px -4px; padding: 0 4px 2px; background: var(--face); }
body[data-family="ubuntu"] .statusbar > div { border: 0; box-shadow: none; color: #5a5148; }
body[data-family="ubuntu"] .grip { right: 0; bottom: 0; }
body[data-family="ubuntu"] .raised { background: var(--face); border: 1px solid #c9c0b4; box-shadow: none; }
body[data-family="ubuntu"] .sunken { border: 1px solid #bdb4a8; box-shadow: none; }
body[data-family="ubuntu"] .btn { border: 1px solid #a69b8e; border-radius: 4px; min-height: 25px; padding: 3px 12px; background: linear-gradient(#fdfcfb, #f1ece6 50%, #e6dfd8); box-shadow: inset 0 1px #fff; }
body[data-family="ubuntu"] .btn:hover:not(:disabled) { background: linear-gradient(#fff, #f8f4f0 50%, #efe9e3); border-color: #9c8f80; }
body[data-family="ubuntu"] .btn:active:not(:disabled), body[data-family="ubuntu"] .btn.pressed { padding: 3px 12px; background: linear-gradient(#d9d1c7, #e6dfd8); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
body[data-family="ubuntu"] .btn.primary { outline: none; border-color: #c8601c; box-shadow: inset 0 1px #fff, 0 0 0 1px rgba(245,121,0,.35); }
body[data-family="ubuntu"] .btn:disabled { color: #a99e91; text-shadow: none; }
body[data-family="ubuntu"] select.field, body[data-family="ubuntu"] input.field, body[data-family="ubuntu"] textarea.field, body[data-family="ubuntu"] .field { border: 1px solid #a69b8e; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); background: #fff; }
body[data-family="ubuntu"] input.field:focus, body[data-family="ubuntu"] textarea:focus, body[data-family="ubuntu"] select:focus { outline: none; border-color: #e8731e; box-shadow: 0 0 0 1px rgba(245,121,0,.4); }
body[data-family="ubuntu"] fieldset { border: 0; border-top: 1px solid transparent; box-shadow: none; padding: 4px 0 8px 14px; }
body[data-family="ubuntu"] legend { background: transparent; font-weight: bold; margin-left: -14px; padding: 0; }
body[data-family="ubuntu"] .tab { border: 1px solid #a69b8e; border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(#e6dfd8, #d9d1c7); box-shadow: none; color: #4a4038; }
body[data-family="ubuntu"] .tab.on { background: var(--face); color: #000; box-shadow: inset 0 2px 0 var(--hu-orange); }
body[data-family="ubuntu"] .tabpage { border: 1px solid #a69b8e; box-shadow: none; background: var(--face); border-radius: 0 3px 3px 3px; }
body[data-family="ubuntu"] table.list th { background: linear-gradient(#fdfcfb, #e6dfd8); border: 0; border-right: 1px solid #d0c7bc; border-bottom: 1px solid #a69b8e; box-shadow: none; }
body[data-family="ubuntu"] table.list tbody tr:nth-child(even) td { background: #f6f3f0; }
body[data-family="ubuntu"] table.list tr.sel td { background: linear-gradient(#f39a52, #e2701e) !important; color: #fff; }
body[data-family="ubuntu"] .ctxmenu { background: #f6f4f2; border: 1px solid #9c8f80; border-radius: 0; box-shadow: 1px 2px 6px rgba(0,0,0,.35); padding: 2px; }
body[data-family="ubuntu"] .ctxmenu .mi.hot { background: linear-gradient(#f9a25a, #e8731e); color: #fff; border-radius: 2px; }
body[data-family="ubuntu"] .ctxmenu .msep { border-top-color: #d6cec4; border-bottom-color: #fff; }
body[data-family="ubuntu"] .dicon .ico { width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
body[data-family="ubuntu"] .dicon span.lbl { text-shadow: 1px 1px 2px #000; border-radius: 3px; padding: 0 3px; }
body[data-family="ubuntu"] .dicon.sel span.lbl { background: var(--sel); outline: none; text-shadow: none; }
body[data-family="ubuntu"] .dicon.sel .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) brightness(.8) sepia(.5) hue-rotate(-20deg) saturate(2); }
body[data-family="ubuntu"] #startmenu { top: 25px; bottom: auto; left: 2px; padding: 2px; border: 1px solid #9c8f80; background: #f6f4f2; box-shadow: 1px 2px 6px rgba(0,0,0,.35); }
body[data-family="ubuntu"] #startmenu .banner { display: none; }
body[data-family="ubuntu"] #startitems li:hover, body[data-family="ubuntu"] #startitems li:focus-visible { background: linear-gradient(#f9a25a, #e8731e); color: #fff; }
body[data-family="ubuntu"] #assistant { bottom: 4px; }
/* Metacity's minimize: a wireframe that shrinks to the window list */
.min-wire { position: fixed; z-index: 9950; pointer-events: none; border: 2px solid rgba(0,0,0,.7); outline: 1px solid rgba(255,255,255,.8); box-sizing: border-box; }
.pv-ub { position: absolute; left: 24px; top: 22px; width: 112px; height: 62px; border-radius: 3px 3px 0 0; padding: 0 2px 2px; background: #c95f18; }
.pv-ub .pv-title { color: #fff; font: bold 7px "DejaVu Sans", sans-serif; padding: 2px; }
.pv-ub .pv-body { background: #efebe7; height: 45px; }
.pv-gn { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(#f6f3f0, #dcd5cc); }
.pv-gn.top { top: 0; bottom: auto; }
/* --dk doubles as the bevel shadow colour, which the newer themes soften; keep ordinary text black */
body:not([data-family="win98"]) { color: #000; }

/* The era's browser (browser.js) */
.wbody.br { padding: 0; }
.br-bar { display: flex; align-items: center; gap: 4px; padding: 4px; flex: none; border-bottom: 1px solid var(--lo); }
.br-bar input.field { flex: 1; min-width: 0; }
.br-bar .btn { min-width: 0; padding: 2px 8px; }
.br-bar .br-search { flex: 0 0 140px; }
body[data-family="aqua"] .br-bar { background: linear-gradient(#e2e2e2, #c4c4c4); border-bottom-color: #8a8a8a; }
body[data-family="aqua"] .br-bar input.field { border-radius: 11px; }
.br-view { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.br-page { padding: 18px 24px; max-width: 560px; user-select: text; color: #000; }
.br-ie { font: 12px Tahoma, Verdana, sans-serif; }
.br-ie-head { display: flex; align-items: center; gap: 12px; }
.br-ie h1 { font: bold 17px Verdana, Tahoma, sans-serif; color: #4e4e4e; margin: 0; }
.br-ie.br-win98 h1 { color: #000; }
.br-ie hr { border: 0; border-top: 1px solid #c2cfe5; margin: 12px 0; }
.br-ie ul { padding-left: 22px; }
.br-ie li { margin-bottom: 6px; }
.br-fine { color: #808080; font-size: 11px; margin-top: 18px; }
.br-safari { font: 13px "Lucida Grande", "Helvetica Neue", sans-serif; text-align: center; margin: 30px auto; color: #555; }
.br-safari h1 { font: bold 17px "Lucida Grande", sans-serif; color: #333; }
.br-safari-icon .ico { width: 64px; height: 64px; opacity: .85; }
.br-firefox { font: 13px "DejaVu Sans", sans-serif; }
.br-ff-box { margin: 24px auto; padding: 16px 24px 16px 70px; border: 1px solid #ccc; border-radius: 10px; background: #f6f6f6 no-repeat 18px 18px / 40px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3 38 36H2z' fill='%23fcaf3e' stroke='%23ce5c00' stroke-width='2' stroke-linejoin='round'/%3E%3Ctext x='20' y='32' text-anchor='middle' font-family='sans-serif' font-weight='bold' font-size='20'%3E!%3C/text%3E%3C/svg%3E"); }
.br-ff-box h1 { font-size: 20px; margin: 0 0 4px; border-bottom: 1px solid #ccc; padding-bottom: 6px; }
.br-ff-box h2 { font-size: 14px; margin: 8px 0; }
.br-ff-box li { margin-bottom: 6px; }
.br .dialog-buttons { margin: 0; padding: 8px; border-top: 1px solid var(--lo); }

/* ======================================================================== Windows Vista (shares body.aero with 7) */
body[data-family="vista"] #desktop { bottom: 0; --under: 30px; }
/* Vista's frame is slimmer than 7's (it predates touch): thinner borders, smaller caption buttons */
body[data-family="vista"] .window:not(.skin) { padding: 0 4px 4px; border-radius: 6px 6px 3px 3px; }
body[data-family="vista"] .window:not(.skin) .titlebar { height: 25px; padding-top: 4px; }
body[data-family="vista"] .tbtns { margin-top: -5px; }
body[data-family="vista"] .tbtns button { width: 25px; height: 17px; }
body[data-family="vista"] .tbtns button.close { width: 42px; }
body[data-family="vista"] .tbtns svg { width: 9px; height: 9px; }
body[data-family="vista"] .grip { right: 4px; bottom: 4px; width: 11px; height: 11px; }
body[data-family="vista"] #taskbar { height: 30px; padding: 0 0 0 58px; border-top: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.05) 46%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.75)), rgba(10,14,20,.72); }
body[data-family="vista"].noglass #taskbar { background: linear-gradient(#4a4f58, #24282e 50%, #0c0e12); }
/* the orb sits on the left and rises above the bar */
body[data-family="vista"] #startbtn { position: absolute; left: 4px; bottom: 0; width: 50px; height: 46px; z-index: 2; }
body[data-family="vista"] #startbtn::before { left: 5px; top: 4px; width: 40px; height: 40px; background: radial-gradient(circle at 50% 115%, rgba(150,255,170,.85), transparent 50%), radial-gradient(circle at 50% 35%, #3a7fd8, #0e3a78 65%, #04142e); }
body[data-family="vista"] #startbtn::after { left: 10px; top: 6px; width: 30px; height: 17px; }
body[data-family="vista"] #startbtn .ico { margin-top: 3px; }
body[data-family="vista"] .task { flex: 0 1 160px; width: auto; min-width: 40px; height: 24px; justify-content: flex-start; padding: 0 8px; gap: 6px; border-radius: 2px; }
body[data-family="vista"] .task span:last-child { display: inline; color: #fff; text-shadow: 0 1px 2px #000; }
body[data-family="vista"] .task .ico { width: 16px; height: 16px; }
body[data-family="vista"] #tray { height: 30px; border-left: 1px solid rgba(255,255,255,.15); }
body[data-family="vista"] #clock::after { content: none; }
body[data-family="vista"] #tray::after { display: none; }
body[data-family="vista"] #startmenu { bottom: 30px; left: 0; }
body[data-family="vista"] .sm-user { margin-top: -34px; }
body[data-family="vista"] .sm-shut { background: radial-gradient(circle at 50% 30%, #ffb27a, #e2601c 60%, #a8360a); border-radius: 12px; }
body[data-family="vista"] .window:not(.skin) .titlebar .ttext { text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 6px #fff; }
/* the Sidebar */
#sidebar { position: absolute; top: 0; right: 0; bottom: 0; width: 170px; padding: 10px 12px; display: flex; flex-direction: column; gap: 14px; align-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.28) 22%, rgba(0,0,0,.34)); border-left: 1px solid rgba(255,255,255,.08); }
.gadget { width: 140px; color: #fff; font: 12px var(--font); cursor: default; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.gd-clock { display: grid; place-items: center; }
.gd-face { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff, #e8eef5 60%, #b9c6d4);
  box-shadow: inset 0 0 0 6px #2a2f38, inset 0 0 0 7px #8a95a5, inset 0 2px 8px rgba(0,0,0,.35); }
.gd-face::before { content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, #333 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 82%, #000 83%); mask: radial-gradient(circle, transparent 82%, #000 83%); }
.gd-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; background: #222; }
.gd-hand.h { width: 4px; height: 30px; margin-left: -2px; } .gd-hand.m { width: 3px; height: 42px; margin-left: -1.5px; }
.gd-hand.s { width: 1px; height: 46px; margin-left: -.5px; background: #d02a2a; }
.gd-face b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #222; }
.gd-fund { padding: 8px 10px; border-radius: 6px; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.06) 45%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.45)); border: 1px solid rgba(255,255,255,.35); }
.gd-title { font-size: 11px; opacity: .8; }
.gd-big { font-size: 20px; font-weight: bold; text-shadow: 0 1px 3px #000; }
.gd-sub { font-size: 11px; } .gd-sub.up { color: #8fffb0; } .gd-sub.down { color: #ffb0a0; }
.gd-note { min-height: 90px; padding: 10px; color: #3a2a00; background: linear-gradient(#fff6a8, #f3e27a); font: italic 12px/1.35 Georgia, serif; transform: rotate(-1.5deg); border-radius: 1px; }
body[data-family="vista"] #assistant { right: 180px; }
.pv-barvista { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: linear-gradient(#555, #000); }
.pv-barvista i { position: absolute; left: 2px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #6ab0ff, #0e3a78); }

/* ======================================================================== Mac OS 9 (Platinum) */
body[data-family="os9"] {
  --face: #dddddd; --light: #eeeeee; --hi: #ffffff; --lo: #999999; --dk: #000000;
  --font: Charcoal, "Chicago", ChicagoFLF, Geneva, Verdana, sans-serif; --os9-small: Geneva, Verdana, sans-serif;
  font-size: 12px; -webkit-font-smoothing: none;
}
body[data-family="os9"] #desktop { top: 20px; bottom: 0; }
body[data-family="os9"] #taskbar { display: none; }
body[data-family="os9"] #macbar { height: 20px; padding: 0 6px; background: linear-gradient(#f4f4f4, #dcdcdc); border-bottom: 1px solid #000; box-shadow: none; backdrop-filter: none; font: bold 12px var(--font); }
body[data-family="os9"] #macbar > span { line-height: 19px; padding: 0 8px; }
body[data-family="os9"] #macbar > span.open, body[data-family="os9"] #macbar > span:active { background: var(--sel); color: #fff; }
body[data-family="os9"] #macbar .mb-appmenu { display: flex; align-items: center; gap: 5px; border-left: 1px solid #999; }
body[data-family="os9"] #macbar .mb-appmenu .ico { width: 16px; height: 16px; }
body[data-family="os9"] #macbar #tray { height: 20px; font-weight: bold; }
body[data-family="os9"] #macbar #clock::before { content: none; }
/* the screen's rounded top corners */
body[data-family="os9"]::before, body[data-family="os9"]::after { content: ""; position: fixed; top: 0; width: 8px; height: 8px; z-index: 9600; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, transparent 7px, #000 7.5px); }
body[data-family="os9"]::before { left: 0; } body[data-family="os9"]::after { right: 0; transform: scaleX(-1); }
body[data-family="os9"] #startmenu { top: 20px; bottom: auto; left: 6px; padding: 2px 0; border: 1px solid #000; background: #dddddd; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
body[data-family="os9"] #startmenu .banner { display: none; }
body[data-family="os9"] #startitems li { height: 22px; padding: 1px 16px 1px 8px; gap: 6px; }
body[data-family="os9"] #startitems li .ico { width: 16px; height: 16px; }
body[data-family="os9"] #startitems li:hover, body[data-family="os9"] #startitems li:focus-visible { background: var(--sel); color: #fff; }
body[data-family="os9"] #startitems li.sep { height: 0; padding: 0; margin: 3px 0; border-top: 1px solid #999; }
/* windows: pinstriped title bars, close box on the left, zoom and collapse boxes on the right */
body[data-family="os9"] .window:not(.skin) { padding: 0 5px 5px; border: 1px solid #000; border-radius: 0; background: #dddddd;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999, 1px 1px 0 rgba(0,0,0,.4); }
body[data-family="os9"] .window:not(.skin) .titlebar { height: 20px; margin: 0 -5px 3px; padding: 0 6px; gap: 6px; color: #000; font: bold 12px var(--font);
  background: #dddddd !important; box-shadow: inset 0 1px #fff; }
body[data-family="os9"] .window.active:not(.skin) .titlebar { background: linear-gradient(#dddddd, #dddddd) 0 0 / 100% 4px no-repeat, linear-gradient(#dddddd, #dddddd) 0 100% / 100% 4px no-repeat,
  repeating-linear-gradient(#ffffff 0 1px, #a5a5a5 1px 2px) !important; }
body[data-family="os9"] .window:not(.skin) .titlebar > .ico { display: none; }
body[data-family="os9"] .window:not(.skin) .titlebar .ttext { order: 2; flex: 0 1 auto; margin: 0 auto; padding: 0 8px; background: #dddddd; text-shadow: none; }
body[data-family="os9"] .window:not(.active):not(.skin) .titlebar .ttext { color: #888; }
body[data-family="os9"] .tbtns { display: contents; }
body[data-family="os9"] .tbtns button { width: 13px; height: 13px; flex: none; border: 1px solid #333; border-radius: 0; padding: 0;
  background: linear-gradient(135deg, #a8a8a8, #ffffff 45%, #dcdcdc); box-shadow: inset 1px 1px #fff, inset -1px -1px #888; }
body[data-family="os9"] .tbtns button:active { background: #888; }
body[data-family="os9"] .tbtns button.close { order: 0; margin: 0; }
body[data-family="os9"] .tbtns button:not(.close):nth-child(2) { order: 3; }   /* zoom */
body[data-family="os9"] .tbtns button:first-child:not(.close) { order: 4; }     /* collapse (WindowShade) */
body[data-family="os9"] .tbtns svg { display: none; }
body[data-family="os9"] .tbtns button:not(.close):nth-child(2)::after { content: ""; display: block; width: 6px; height: 6px; margin: 1px 0 0 1px; border: 1px solid #555; }
body[data-family="os9"] .tbtns button:first-child:not(.close)::after { content: ""; display: block; height: 2px; margin: 2px 1px 0; border-top: 1px solid #555; border-bottom: 1px solid #555; }
body[data-family="os9"] .window:not(.active) .tbtns button { visibility: hidden; }
body[data-family="os9"] .window.shaded:not(.skin) > :not(.titlebar):not(.glass) { display: none; }
body[data-family="os9"] .window.shaded:not(.skin) { padding-bottom: 0; min-height: 0; }
body[data-family="os9"] .menubar { display: none; }
body[data-family="os9"] .wbody { background: #dddddd; border: 1px solid #999; border-right-color: #fff; border-bottom-color: #fff; }
body[data-family="os9"] .statusbar { font: 10px var(--os9-small); }
body[data-family="os9"] .statusbar > div { border: 0; box-shadow: none; }
body[data-family="os9"] .raised { background: #dddddd; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #999; }
body[data-family="os9"] .sunken { border: 1px solid #888; box-shadow: inset 1px 1px #999; }
body[data-family="os9"] .btn { min-height: 20px; padding: 2px 14px; border: 1px solid #000; border-radius: 5px; background: linear-gradient(#ffffff, #dddddd 70%, #c8c8c8);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #999; font: 12px var(--font); }
body[data-family="os9"] .btn:active:not(:disabled), body[data-family="os9"] .btn.pressed { padding: 2px 14px; background: linear-gradient(#888, #aaa); color: #fff; box-shadow: inset 1px 1px #555; }
body[data-family="os9"] .btn.primary { outline: none; box-shadow: inset 1px 1px #fff, inset -1px -1px #999, 0 0 0 2px #dddddd, 0 0 0 3px #000, 0 0 0 4px #888; margin: 3px; }
body[data-family="os9"] .btn:disabled { color: #999; text-shadow: none; border-color: #999; }
body[data-family="os9"] select.field, body[data-family="os9"] input.field, body[data-family="os9"] textarea.field, body[data-family="os9"] .field { border: 1px solid #000; border-radius: 0; box-shadow: inset 1px 1px #999; background: #fff; }
body[data-family="os9"] input.field:focus, body[data-family="os9"] textarea:focus { outline: 2px solid #9999ff; outline-offset: 0; }
body[data-family="os9"] fieldset { border: 1px solid #999; border-radius: 0; box-shadow: 1px 1px #fff, inset 1px 1px #fff; }
body[data-family="os9"] legend { background: #dddddd; }
body[data-family="os9"] .tab { border: 1px solid #000; border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(#eee, #ccc); box-shadow: inset 1px 1px #fff; }
body[data-family="os9"] .tab.on { background: #dddddd; }
body[data-family="os9"] .tabpage { border: 1px solid #000; box-shadow: inset 1px 1px #fff; background: #dddddd; }
body[data-family="os9"] table.list th { background: linear-gradient(#eee, #ccc); border: 0; border-right: 1px solid #999; border-bottom: 1px solid #000; box-shadow: inset 1px 1px #fff; font: 10px var(--os9-small); }
body[data-family="os9"] table.list td { font: 11px var(--os9-small); }
body[data-family="os9"] table.list tr.sel td { background: var(--sel); color: #fff; }
body[data-family="os9"] .ctxmenu { background: #dddddd; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.35); padding: 2px 0; }
body[data-family="os9"] .ctxmenu .mi.hot { background: var(--sel); color: #fff; }
body[data-family="os9"] .ctxmenu .msep { border-top: 1px solid #999; border-bottom: 1px solid #fff; }
body[data-family="os9"] .dicon { color: #000; }
body[data-family="os9"] .dicon .ico { width: 32px; height: 32px; filter: none; }
body[data-family="os9"] .dicon span.lbl { background: #fff; color: #000; text-shadow: none; padding: 0 3px; font: 10px var(--os9-small); }
body[data-family="os9"] .dicon.sel span.lbl { background: #000; color: #fff; outline: none; }
body[data-family="os9"] .dicon.sel .ico { filter: brightness(.55); }
.pv-os9 { position: absolute; left: 24px; top: 20px; width: 112px; height: 62px; background: #ddd; border: 1px solid #000; }
.pv-os9 .pv-title { height: 9px; background: repeating-linear-gradient(#fff 0 1px, #a5a5a5 1px 2px); display: grid; place-items: center; }
.pv-os9 .pv-title span { background: #ddd; font: bold 6px Verdana, sans-serif; padding: 0 3px; }
.pv-os9 .pv-body { margin: 2px; height: 46px; background: #fff; border: 1px solid #999; }
.pv-macbar.os9 { height: 7px; background: #eee; border-bottom: 1px solid #000; }
.gd-note small { display: block; margin-top: 6px; font-style: normal; font-size: 10px; opacity: .75; }

/* Taskbar thumbnails (Windows 7 / Vista) and Aero Peek (Windows 7) */
.aero-thumbs { position: fixed; z-index: 9800; padding: 8px; border-radius: 6px; border: 1px solid rgba(0,0,0,.6);
  background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.06)), linear-gradient(rgba(var(--aero), .35), rgba(var(--aero), .35)), rgba(20,32,55,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 4px 16px rgba(0,0,0,.45); backdrop-filter: blur(8px) saturate(1.5);
  opacity: 0; transform: translateY(6px); transition: opacity .14s ease-out, transform .14s ease-out; }
.aero-thumbs.in { opacity: 1; transform: none; }
.at-card { padding: 4px 6px 6px; border: 1px solid transparent; border-radius: 4px; cursor: default; }
.at-card:hover { border-color: rgba(255,255,255,.55); background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.08)); box-shadow: inset 0 0 6px rgba(255,255,255,.35); }
.at-head { display: flex; align-items: center; gap: 6px; height: 20px; margin-bottom: 5px; color: #fff; font: 12px var(--font); text-shadow: 0 1px 3px #000; }
.at-head span { flex: 1; min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-close { width: 18px; height: 16px; padding: 0; border: 1px solid rgba(0,0,0,.5); border-radius: 3px; color: #fff; font-size: 10px; opacity: 0;
  background: linear-gradient(#e9a99f, #c2412b); transition: opacity .12s; }
.at-card:hover .at-close { opacity: 1; }
.at-thumb { position: relative; overflow: hidden; margin: 0 auto; background: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
/* Peek: other windows fade quickly to their glass outlines; the peeked one rises to the front */
.window { transition: background-color .2s, box-shadow .2s; }
.window > * { transition: opacity .18s ease-out; }
body.peeking .window.peek-other > :not(.glass) { opacity: 0; }
body.peeking .window.peek-other { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.35) !important; }
body.peeking .window.peek-other > .glass { opacity: .9; }
body.peeking .window.peek-target { z-index: 9700 !important; }
body.peeking #icons, body.peeking #assistant { opacity: .35; transition: opacity .18s; }

/* Snow Leopard Dock: the Applications stack (Grid view) */
.dock-stack { position: fixed; z-index: 9600; width: min(560px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; padding: 14px 14px 10px; box-sizing: border-box;
  border-radius: 12px; background: rgba(28,28,30,.86); box-shadow: 0 10px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(14px); color: #fff;
  font: 12px "Lucida Grande", "Helvetica Neue", Arial, sans-serif; animation: ds-in .18s ease-out; }
@keyframes ds-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ds-title { text-align: center; font-size: 13px; font-weight: bold; margin-bottom: 10px; text-shadow: 0 1px 2px #000; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px 4px; }
.ds-app { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; cursor: default; }
.ds-app:hover, .ds-app:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.ds-app span { text-align: center; text-shadow: 0 1px 2px #000; line-height: 1.2; }
.ds-ico { width: 52px; height: 52px; }
.ds-ico img { width: 100%; height: 100%; }
.ds-finder { display: block; margin: 10px auto 0; padding: 3px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: inherit; }
.ds-finder:hover { background: rgba(255,255,255,.24); }

/* Snow Leopard: About <App> */
.mac-about { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 18px 10px; font: 12px "Lucida Grande", "Helvetica Neue", sans-serif; }
.mac-about .mac-about-ico { width: 64px; height: 64px; margin-bottom: 4px; }
.mac-about b { font-size: 14px; }
.mac-about p { margin: 6px 0 0; color: #333; line-height: 1.35; }
.mac-about-c { margin-top: auto; color: #888; }
#macbar .mb-app { cursor: default; }

/* Ubuntu (Compiz): wobbly windows and burn */
.window.wobbling { transition: none !important; }
.burn-fx { position: fixed; z-index: 9800; pointer-events: none; }

/* ======================================================================== Fedora 8 (Werewolf): GNOME 2 with Nodoka */
/* Same GNOME panels and windows as Ubuntu, in Fedora's colours: pale grey panels, blue title bars and highlights. */
body[data-gnome="fedora"] { --face: #edeceb; --lo: #b6b6b6; --dk: #7c7c7c; --sel: #4a90d9; --hu-orange: #3c7fd0; }
body[data-gnome="fedora"] #gnomebar, body[data-gnome="fedora"] #taskbar { background: linear-gradient(#fafafa, #ececec 50%, #e0e0e0); border-color: #a8a8a8; }
body[data-gnome="fedora"] #gnomebar .gn-menu:hover, body[data-gnome="fedora"] #gnomebar .gn-menu.open,
body[data-gnome="fedora"] .ctxmenu .mi.hot, body[data-gnome="fedora"] #startitems li:hover, body[data-gnome="fedora"] #startitems li:focus-visible,
body[data-gnome="fedora"] .gn-ws i.on { background: linear-gradient(#7fb2ec, #3f7fcf) !important; color: #fff; box-shadow: inset 0 0 0 1px #2d64a8; }
body[data-gnome="fedora"] .window:not(.skin) { border-color: #2b558f; border-radius: 6px 6px 0 0; background: linear-gradient(#86b2e8, #4b80c8 30px, #3f72b8); }
body[data-gnome="fedora"] .window:not(.skin):not(.active) { background: linear-gradient(#e4e6ea, #cfd3d9 30px, #c8ccd2); border-color: #8d939b; }
body[data-gnome="fedora"] .window:not(.skin) .titlebar { text-shadow: 0 1px 1px rgba(10,40,90,.6); }
body[data-gnome="fedora"] .window:not(.skin):not(.active) .titlebar { color: #5d636b; text-shadow: 0 1px #f2f2f2; }
body[data-gnome="fedora"] .tbtns button { border-color: rgba(20,50,100,.7); border-radius: 9px; background: linear-gradient(#a7c8f0, #5f93d6 55%, #4a7fc6); }
body[data-gnome="fedora"] .window:not(.active) .tbtns button { background: linear-gradient(#eef0f3, #d6dae0); border-color: #8d939b; }
body[data-gnome="fedora"] .tbtns button:hover { background: linear-gradient(#c6dcf7, #7aa9e2 55%, #5f93d6); }
body[data-gnome="fedora"] .tab.on { box-shadow: inset 0 2px 0 #4a90d9; }
body[data-gnome="fedora"] .btn.primary { border-color: #3c7fd0; }
body[data-gnome="fedora"] table.list tr.sel td { background: linear-gradient(#7fb2ec, #3f7fcf) !important; }
body[data-gnome="fedora"] .dicon.sel span.lbl { background: #3f7fcf; }