interface WinState { id, title, icon, minimized, maximized, z, x, y, w, h, content type }

Windows Vista 演示桌面

按 A 键：进入 3D 窗口切换（Flip 3D）
在 3D 模式中：
  A / ← → 方向键 / 鼠标滚轮：切换窗口
  Enter 或单击窗口：选中并返回桌面
  Esc：取消并返回

提示：双击桌面图标可打开对应窗口；
窗口可拖动、最小化、最大化。

type WinId = 'computer'|'photos'|'ie'|'control'|'notepad';
interface Win { id: WinId; title: string; icon: string(svg id); open: boolean; minimized: boolean; maximized: boolean; x:number; y:number; w:number; h:number; z:number; prevRect?: {...} }

const vw = window.innerWidth, vh = window.innerHeight;
scale = Math.min(0.6, (vw*0.42)/win.w, ...) // keep simple 0.55
x = -vw*0.16 + i*vw*0.085
y = vh*0.06 - i*vh*0.062
z = -i*230
rot = -42
filter blur: [0, 1.5, 3, 4.5, 5.5][min(i,4)], brightness: 1 - i*0.09 (min .55)
opacity: i> some? keep 1, maybe far ones 0.85

<div class="explorer">
  <div class="ex-toolbar"> [组织▾][视图▾] | [系统属性][卸载或更改程序] </div>
  <div class="ex-address"> [←][→] | breadcrumb: ▸ 计算机 | [搜索________] </div>
  <div class="ex-body">
    <div class="ex-nav"> 收藏夹链接: [文档][图片][音乐][最近更改][搜索] ... folders tree? </div>
    <div class="ex-main">
       硬盘 (2): [C: icon] Windows (C:)  可用 86.5 GB / 共 128 GB [bar]
                 [D: icon] 数据 (D:) ...
       有可移动存储的设备 (1): DVD RW 驱动器 (E:)
    </div>
  </div>
  <div class="ex-details"> 详细信息 pane: icon + 计算机 info? optional </div>
</div>

title: 示例图片 - Windows 照片库
dark chrome (#2b2b2b), center image (CSS aurora), bottom toolbar: ◀ ▶ | rotate | delete | 幻灯片

menus: 文件(F) 编辑(E) 查看(V) 收藏夹(A) 工具(T) 帮助(H)
address row: [地址] [http://www.windows-vista-demo.com____] [→ 转到]
tabs: [欢迎页 ×] [+]
content: fake page: big gradient + "Windows Vista" + text

header: 控制面板主页 (left pane links: 经典视图 etc.)
main grid: 系统和维护 / 安全 / 网络和 Internet / 硬件和声音 / 程序 / 用户帐户 / 外观和个性化 / 时钟、语言和区域 — each category with icon + description + links.

<svg viewBox="0 0 24 24"><path fill="#f65314" d="M3 5.5 11 4.4V11.2H3z"/><path fill="#7cbb00" d="M12.5 4.1 21 3v8.2h-8.5z"/><path fill="#00a1f1" d="M3 12.3h8V19.6L3 18.5z"/><path fill="#ffbb00" d="M12.5 12.3H21V21l-8.5-1.1z"/></svg>

background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.3));
background-color: rgba(170,200,225,.35);
backdrop-filter: blur(12px) saturate(160%);

.window::after { /* glass reflection */
  background: linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 28%, transparent 30%);
  /* clipped to title area via mask or placed on titlebar element */
}

background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.05) 45%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.45)), rgba(10,12,15,.92);
border-top: 1px solid rgba(255,255,255,.25);

src/
  App.tsx — state, keyboard, render
  components/... maybe all in App.tsx + windows.tsx to keep file count low
  styles in src/index.css (plain CSS, heavy)

export type WinId = 'computer' | 'photos' | 'ie' | 'cpl' | 'notepad';

interface WinState {
  id: WinId;
  open: boolean;
  minimized: boolean;
  maximized: boolean;
  rect: { x: number; y: number; w: number; h: number };
  prevRect?: { x: number; y: number; w: number; h: number };
  z: number;
}

const WIN_META: Record<WinId, { title: string; icon: IconName; defaultRect: (vw,vh)=>rect }> = {...}

const [flip, setFlip] = useState<{ active: boolean; order: WinId[] }>({ active: false, order: [] });
const preFlipActiveRef = useRef<WinId | null>(null);

enterFlip(): visible = open && !minimized windows sorted by z desc; if none → return; preFlipActive = topmost; setFlip({active:true, order: visible ids sorted z desc})
cycleFlip(dir=1): order rotated
exitFlip(confirmId?: WinId): setFlip inactive; if confirmId → focusWin(confirmId) else focusWin(preFlipActive)

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    const t = e.target as HTMLElement;
    const typing = t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable);
    if (flip.active) {
      if (e.key === 'a' || e.key === 'A') { if(!typing){ cycle(1); e.preventDefault(); } }
      else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { cycle(1); e.preventDefault(); }
      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { cycle(-1); e.preventDefault(); }
      else if (e.key === 'Enter') { exitFlip(order[0]); e.preventDefault(); }
      else if (e.key === 'Escape') { exitFlip(); e.preventDefault(); }
    } else {
      if ((e.key === 'a' || e.key === 'A') && !typing) { enterFlip(); e.preventDefault(); }
    }
  };
  window.addEventListener('keydown', onKey);
  ...
}, [flip, windows]);

function flipStyle(i: number, total: number, vw: number, vh: number): CSSProperties {
  const scale = Math.max(0.42, Math.min(0.62, vw / 1600 * 0.6)); // responsive
  const x = -vw * 0.17 + i * vw * 0.082;
  const y = vh * 0.07 - i * vh * 0.058;
  const z = -i * 240;
  const blur = [0, 1.2, 2.6, 4, 5][Math.min(i, 4)];
  const bright = Math.max(0.55, 1 - i * 0.1);
  return {
    left: (vw - w) / 2 ... 
  };
}

background:
  radial-gradient(1200px 800px at 70% 30%, rgba(20,80,60,.55), transparent 60%),
  linear-gradient(155deg, #0d4433 0%, #07301f 45%, #03170f 100%);

background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 8%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.55) 100%), rgba(8,10,14,.86);
backdrop-filter: blur(10px); /* Vista taskbar isn't blurred actually — it's opaque glass black. Keep slight. Actually keep no backdrop blur; opaque */
box-shadow: inset 0 1px 0 rgba(255,255,255,.28);

border-radius: 50%;
background: radial-gradient(circle at 50% 32%, #d8ecff 0%, #7db8ea 22%, #2f7cc9 48%, #12539e 72%, #082f66 100%);
box-shadow: inset 0 2px 4px rgba(255,255,255,.7), inset 0 -4px 8px rgba(0,0,40,.5), 0 0 10px rgba(80,150,230,.6), 0 2px 6px rgba(0,0,0,.6);

min-width 160px, height 30px, margin 6px 3px 0? 
background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.05) 48%, rgba(0,0,0,.14) 52%, rgba(0,0,0,.05));
border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
color: #fff; text-shadow: 0 1px 2px #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);

border-radius: 8px 8px 0 0? Vista start menu top corners rounded 6px.
frame: glass dark: background: linear-gradient(...), rgba(30,40,55,.82), backdrop blur.
left pane: white gradient (#fdfdff → #e8f0f8), width 62%, padding; items with icon 32px + name; hover: light blue border box (#cfe5f7 bg, #99c5e8 border).
right pane: transparent dark, links white text 12px, bold first item (user name); hover: underline + bold? Vista hover: glow white text.
bottom-left: search box (rounded, magnifier); bottom-right: power buttons (⏻ red glossy, lock, ▸).

<div class="window active">
  <div class="w-glass"> <!-- frame bg/blur -->
    <div class="w-titlebar">
      <svg icon/><span class="w-title">计算机</span>
    </div>
    <div class="w-caps">
      <button class="cap min"/><button class="cap max"/><button class="cap close"/>
    </div>
    <div class="w-content"> app </div>
  </div>
</div>

.window { border-radius: 8px 8px 0 0; box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4); }
.w-glass {
  position:absolute; inset:0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.12) 30%, rgba(200,225,245,.18) 60%, rgba(255,255,255,.35)), rgba(160,195,225,.42);
  backdrop-filter: blur(14px) saturate(1.6) brightness(1.1);
  border: 1px solid rgba(10,25,45,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.18);
  padding: 31px 7px 7px; /* title 30 + content inset */
  display flex column;
}

content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background: linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 24%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 100%);

.w-titlebar::before { background: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.05) 55%, rgba(255,255,255,.22)); }

.w-caps { position:absolute; top:-1px; right:7px; display:flex; gap:0; }
.cap { width:28px; height:19px; border:1px solid rgba(15,20,30,.8); border-top-color: rgba(255,255,255,.35);
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15) 45%, rgba(120,150,180,.25) 55%, rgba(220,235,245,.35)), rgba(140,170,200,.5);
  border-radius: 0 0 3px 3px; margin-left:-1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.3);
}
.cap.close { width:45px; border-radius:0 0 4px 3px;
  background: linear-gradient(to bottom, #f0b3a5, #d96a52 45%, #b93a26 55%, #e0785f), #c14b35; }
.cap:hover { filter: brightness(1.25); box-shadow: 0 0 10px rgba(160,220,255,.9), inset 0 0 6px rgba(255,255,255,.8); }
.cap.close:hover { box-shadow: 0 0 14px rgba(255,120,70,.95), inset 0 0 8px rgba(255,200,150,.9); background brighter orange }

.desktop.flip .wallpaper-dim { opacity:.45 } (black overlay)
.desktop.flip .sidebar, .desktop.flip .dicons { opacity:0; pointer-events:none }
.desktop.flip .window { transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .55s, opacity .5s, left .55s, top .55s, width .45s, height .45s; }
.window.flip-item { cursor:pointer; }
.window.flip-item .w-glass { backdrop-filter:none; background more opaque }

<svg viewBox="0 0 24 24"><path d="M3 5.8c2.7-.8 5.3-1.2 8-1.2v6.9H3z" fill="#f8682c"/><path d="M12 4.5c2.9 0 5.7.4 9 1.2v5.8h-9z" fill="#91c300"/><path d="M3 12.5h8v6.9c-2.7 0-5.3-.4-8-1.2z" fill="#00b4f1"/><path d="M12 12.5h9v5.8c-3.3.8-6.1 1.2-9 1.2z" fill="#ffc300"/></svg>

<svg viewBox="0 0 48 48">
  <rect x="4" y="7" width="40" height="28" rx="2" fill="url(#scrn)" stroke="#3a4a5a"/>
  <rect x="7" y="10" width="34" height="22" fill="url(#desk)"/>
  <path d="M18 39h12l1 4H17z" fill="#9aa7b4"/><rect x="14" y="43" width="20" height="3" rx="1.5" fill="#7c8894"/>
  gradients: desk = blue-ish desktop teal (#4f9ad8→#1c5a9c) with tiny taskbar line.
</svg>

body: path trapezoid with gradient rgba glass blue, crumpled paper? Vista full bin has paper; empty is clean glass bin. Do glass bin with highlight + two curved arrows? Vista bin has recycling arrows embossed subtly. Keep glass bin with white sheen.

<circle cx="24" cy="24" r="16" fill="url(#ieblue)"/> <path e shape in white/blue cutout> simpler: text? Draw "e" with path: use a bold lowercase e path... easier: use ellipse orbit gold (stroke) + letter 'e' as <text> italic bold white? SVG text italic 'e' 26px fill #1b6fc4? Hmm the e is blue on white? IE logo: blue 'e' with gold ring around. On desktop, no circle bg: blue e glyph + gold swoosh. Use <text font-style="italic" font-weight="bold" font-family="Times New Roman" fill="#2a7bd7">e</text> + rotated ellipse stroke #f2b52a. Acceptable.

interface FrameProps {
  id: WinId;
  title: string;
  icon: ReactNode;
  active: boolean;
  minimized: boolean;
  maximized: boolean;
  rect: {x,y,w,h};
  z: number;
  anim: boolean;
  flipMode: boolean;
  flipStyle?: CSSProperties; // when in flip
  onFocus: () => void;
  onClose: () => void;
  onMin: () => void;
  onToggleMax: () => void;
  onDrag: (dx, dy) => void; // or handle internally with callback move(x,y)
  onMove: (x,y) => void;
  onResize: (w,h,x,y) => void;
  onRestoreFromMax: (clientX) => void; // for drag-restore
  onFlipSelect?: () => void;
  children;
}

const dragRef = useRef<{startX,startY,origX,origY,mode:'move'|'resize'}|null>(null)
onPointerDown titlebar:
  if flipMode return;
  onFocus();
  if maximized: record for restore-drag; still start drag but Desktop converts.
  dragRef.current = {...}; setPointerCapture; 
onPointerMove: if dragging → onMove(origX+dx, origY+dy) (Desktop clamps)
onPointerUp: release.
Double-click titlebar → onToggleMax.

export type WinId = 'computer'|'bin'|'photos'|'ie'|'cpl'|'notepad'
export interface Rect {x:number;y:number;w:number;h:number}
export interface WinState { id: WinId; open: boolean; minimized: boolean; maximized: boolean; rect: Rect; prev: Rect | null; z: number }

<div class="sm">
  <div class="sm-left">
    <div class="sm-progs">
      <div class="sm-prog"><IcoIE/> Internet Explorer</div>
      <div class="sm-prog"><IcoMail/> Windows Mail</div>
      <divider/>
      <div class="sm-prog"><IcoComputer/> 计算机</div>
      <div class="sm-prog"><IcoPhotos/> Windows 照片库</div>
      <div class="sm-prog"><IcoNotepad/> 记事本</div>
      <div class="sm-prog"><IcoCpl/> 控制面板</div>
    </div>
    <div class="sm-allprog">所有程序 <span>▸</span></div>
    <div class="sm-search"><input placeholder="开始搜索"/><IcoSearch/></div>
  </div>
  <div class="sm-right">
    <div class="sm-user"><IcoUserTile size={56}/></div>
    <a class="sm-rlink b">演示用户</a>
    <a>文档</a><a>图片</a><a>音乐</a>
    <sep/>
    <a>最近使用的项目</a><a>计算机</a><a>网络</a>
    <sep/>
    <a>控制面板</a><a>默认程序</a><a>帮助和支持</a>
    <div class="sm-power"> [⏻][🔒][▸] </div>
  </div>
</div>

export default function Desktop() {
  const [wins, setWins] = useState<Record<WinId, WinState>>(initial)
  const zRef = useRef(10)
  const [startOpen, setStartOpen] = useState(false)
  const [ctx, setCtx] = useState<{x,y}|null>(null)
  const [selectedIcon, setSelectedIcon] = useState<string|null>(null)
  const [flip, setFlip] = useState<{active:boolean; order:WinId[]}>({active:false, order:[]})
  const preFlipRef = useRef<WinId|null>(null)
  const [now, setNow] = useState(new Date())
  const [toast, setToast] = useState(true)
  const [vw, setVw] = useState(window.innerWidth); const [vh,...]
  const [animIds, setAnimIds] = useState<Set<WinId>>(new Set())
  drag/resize refs
  const wheelAcc = useRef(0); const wheelLock = useRef(0)

const visibleWins = () => ORDER.filter(id => wins[id].open && !wins[id].minimized)
const activeId = () => visibleWins().sort by z desc [0]

function flipStyleFor(id: WinId, i: number): CSSProperties {
  const w = wins[id].rect.w, h = wins[id].rect.h
  const scale = Math.min(0.6, Math.max(0.4, vw/1900*0.62+0.18)) // ~0.55 at 1600
  simpler: const scale = Math.min(0.62, (vw*0.34)/Math.max(w,1) + 0.18)

{
  left: (vw - w)/2,
  top: (vh - 40 - h)/2 - 10, // optical center above taskbar
  transform: `translate3d(${x}px, ${y}px, ${z}px) rotateY(-42deg) scale(${scale})`,
  filter: `blur(${blur}px) brightness(${bright}) saturate(${sat})`,
  zIndex: 900 + (50 - i),
}

const vis = visible sorted z desc
if (!vis.length) { flashToast('没有打开的窗口'); return }
preFlipRef.current = vis[0].id
setStartOpen(false)
setFlip({active:true, order: vis.map(w=>w.id)})

const target = confirm ?? preFlipRef.current
setFlip({active:false, order:[]})
if (target) focusWin(target)

toggleMax(id): anim start; if maximized → rect=prev, maximized=false, prev=null; else prev=rect, rect={x:0,y:0,w:vw,h:vh-40}, maximized=true; setTimeout remove anim 450

const dragRef = useRef<{id:WinId; mode:'move'|'resize'; grabX:number; grabY:number; startRect:Rect; moved:boolean; grabRatio?:number}|null>(null)

const onTitleDown = (id, e: React.PointerEvent) => {
  if (flip.active) return
  focusWin(id)
  const w = winsRef.current[id] // keep wins in ref mirror for handlers
  dragRef.current = { id, mode:'move', grabX: e.clientX, grabY: e.clientY, startRect: {...w.rect}, moved:false, wasMax: w.maximized }
}
useEffect: window pointermove:
  const d = dragRef.current; if(!d) return
  if d.mode==='move':
    let base = d.startRect
    if (d.wasMax && !d.restored) { // restore on first significant move
      const prev = wins[id].prev ?? {x:100,y:60,w:760,h:480}
      const ratio = (d.grabX)/vw  // grab ratio on maximized window
      const nx = clamp(d.grabX - prev.w*ratio, ...)
      set rect prev at {x:nx, y: e.clientY-14}
      d.startRect = {...prev, x:nx, y: e.clientY-14}; d.restored=true; d.grabX=e.clientX; d.grabY=e.clientY; return
    }
    nx = clamp(base.x + (e.clientX-d.grabX), -(base.w-100), vw-90)
    ny = clamp(base.y + (e.clientY-d.grabY), 0, vh-40-24)
    setRect(id, nx, ny)
  else resize:
    nw = clamp(startW + dx, 340, vw); nh = clamp(startH + dy, 240, vh-40)
pointerup: dragRef=null

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { CSSProperties, PointerEvent as RPointerEvent } from 'react'
import type { Rect, WinId, WinState } from './types'
import { IconDefs, IcoComputer, IcoBin, IcoPhotos, IcoIE, IcoCpl, IcoNotepad } from './icons'
import { WindowFrame, Taskbar, StartMenu, Sidebar, DesktopIcons, ContextMenu, Toast } from './chrome'
import { AppComputer, AppBin, AppPhotos, AppIE, AppCpl, AppNotepad } from './apps'
import './vista.css'

const TB_H = 40

const WIN_META: Record<WinId, { title: string; icon: (s?: number) => JSX.Element; size: (vw: number, vh: number) => { w: number; h: number } }> = {...}

const vis = ORDER.filter(id => wins[id].open && !wins[id].minimized)
if (vis.length) { stashRef.current = vis; setWins(minimize all) }
else { const ids = stashRef.current.filter(id => wins[id].open); focus/unmin each: minimized=false; z bump preserving order }

return (
  <div className={`desktop ${flip.active ? 'flip' : ''}`} onPointerDown={onDeskPointerDown} onContextMenu={onCtx}>
    <IconDefs />
    <div className="wallpaper">
      <div className="aur a1"/><div className="aur a2"/><div className="aur a3"/>
      <div className="wp-vignette"/>
    </div>
    <DesktopIcons .../>
    {ORDER.map(id => wins[id].open && (
      <WindowFrame key={id} ... flipStyle={flip.active ? flipStyleFor(indexInOrder(id)) : undefined}>
        {renderApp(id)}
      </WindowFrame>
    ))}
    <div className="flip-dim" onClick={() => exitFlip()} />  // exits with preFlip (cancel)? clicking desktop in Win7 flip selects front window. Use exitFlip(flip.order[0]).
    {flip.active && <FlipTitle .../>}
    <Sidebar now={now} pulse={pulse}/>
    {startOpen && <StartMenu .../>}
    {ctx && <ContextMenu .../>}
    {toastVisible && <Toast .../>}
    <Taskbar .../>
  </div>
)

const cycleFlip = useCallback((dir: number) => {
  setFlip(f => {
    if (!f.active || f.order.length < 2) return f
    const o = [...f.order]
    if (dir > 0) o.push(o.shift()!)
    else o.unshift(o.pop()!)
    return { ...f, order: o }
  })
}, [])

setFlip({active:false, order:[]})
const target = confirmId ?? preFlipRef.current
if (target) focusWin(target)

const icons: DeskIcon[] = [
  { key:'computer', label:'计算机', icon:<IcoComputer size={42}/>, action:()=>openApp('computer') },
  { key:'ie', label:'Internet Explorer', icon:<IcoIE size={40}/>, action:()=>openApp('ie') },
  { key:'photos', label:'图片', icon:<IcoPhotos size={42}/>, action:()=>openApp('photos') },
  { key:'cpl', label:'控制面板', icon:<IcoCpl size={42}/>, action:()=>openApp('cpl') },
  { key:'bin', label:'回收站', icon:<IcoBin size={42}/>, action:()=>openApp('bin') },
]

useEffect(() => {
  const onR = () => { setVw(window.innerWidth); setVh(window.innerHeight) }
  window.addEventListener('resize', onR); return cleanup
}, [])
useEffect(() => { // adjust maximized
  setWins(ws => { let changed=false; const nxt={...ws}; for (id) if maximized && (rect.w!==vw||...) {nxt[id]={...rect x0 y0 w vw h vh-TB}; changed=true} return changed? nxt: ws })
}, [vw, vh])

p.active ? 'active' : 'inactive',
w.minimized && !p.flipMode ? 'win-min' : '',
w.maximized && !p.flipMode ? 'win-max' : '',
p.flipMode ? 'flip-item' : '',
p.flipFront ? 'flip-front' : '',
p.noTrans ? 'no-trans' : '',

.w-glass {
  background:
    linear-gradient(118deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 22%, rgba(255,255,255,0) 30%),
    linear-gradient(to bottom, rgba(255,255,255,.42), rgba(190,215,238,.22) 30%, rgba(150,185,215,.3)),
    rgba(190,215,238,.38);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(8,24,44,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.35);
  border-radius: 8px 8px 0 0;
  padding: 30px 6px 6px;
}
.window { box-shadow: 0 10px 45px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.35); border-radius: 8px 8px 0 0; }

.w-title-txt { color:#16222e; text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }

.window.inactive .w-glass { background: ..., rgba(200,208,216,.32); backdrop-filter: blur(8px) saturate(1.15); }
.window.inactive .w-title-txt { color:#3c454e; text-shadow weaker }

.desktop.flip .window .w-glass { backdrop-filter: none; background: linear-gradient(...), rgba(225,236,246,.9); }

.taskbar {
  position:absolute; left:0; right:0; bottom:0; height:40px; z-index:5000;
  display:flex; align-items:stretch;
  background: linear-gradient(to bottom, rgba(120,140,160,.35) 0%, rgba(40,50,60,.25) 12%, rgba(8,10,14,.55) 48%, rgba(0,0,0,.85) 100%), #0a0d11;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 2px 6px rgba(255,255,255,.08);
}

.orb {
  width:44px; height:44px; border-radius:50%; margin: -4px 4px 0 6px; align-self:flex-start? 
  position: relative; top:-6px? Vista orb overlaps above taskbar.
  background: radial-gradient(circle at 50% 30%, #cfe6ff 0%, #6fb1e8 25%, #2b77c6 50%, #0f4f96 75%, #062c5e 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.8), inset 0 -5px 9px rgba(0,10,40,.55), 0 0 12px rgba(90,160,235,.55), 0 2px 5px rgba(0,0,0,.5);
  border:1px solid rgba(4,20,44,.9);
}
.orb::after { top sheen: ellipse white gradient }
.orb:hover { filter:brightness(1.15); box-shadow: ... 0 0 20px rgba(140,200,255,.9) }
.orb:active or .orb-on { brightness(.9) }
.orb-flag { centered flex, filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) }

.qlaunch { display:flex; align-items:center; gap:2px; padding:0 6px; border-right:1px solid rgba(255,255,255,.08); margin:4px 6px 4px 0; padding-right:8px }
.qlaunch button { width:30px; height:30px; display:grid; place-items:center; border-radius:4px; }
.qlaunch button:hover { background: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 8px rgba(140,190,240,.5); }