body{background:var(--bg);color:var(--text);}
#desktop{position:fixed;inset:0;bottom:var(--taskbar-h);z-index:1;transition:opacity .5s ease;}
#desktop.hidden{opacity:0;pointer-events:none;}
#bgCanvas{position:absolute;inset:0;z-index:0;opacity:.3;}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);}
.scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;}

/* desktop icons */
#desktopIcons{position:absolute;inset:0;z-index:3;padding:16px 12px;
  display:flex;flex-direction:column;flex-wrap:wrap;gap:4px;
  align-content:flex-start;pointer-events:none;}
.desk-icon{width:84px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 6px;border-radius:10px;cursor:pointer;user-select:none;
  border:1px solid transparent;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;pointer-events:all;}
.desk-icon:hover{background:rgba(255,255,255,.06);border-color:var(--border);}
.desk-icon.selected{background:rgba(94,230,208,.12);border-color:var(--cyan);box-shadow:0 0 12px rgba(94,230,208,.15);}
.desk-icon:active{transform:scale(.95);}
.desk-icon .ico{font-size:28px;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;border-radius:10px;background:var(--bg2);border:1px solid var(--border);
  transition:border-color .15s;}
.desk-icon.selected .ico{border-color:var(--cyan);}
.desk-icon .lbl{font-size:10.5px;text-align:center;color:var(--text);line-height:1.2;
  word-break:break-word;text-shadow:0 1px 3px rgba(0,0,0,.7);}

/* window layer */
#windowLayer{position:absolute;inset:0;z-index:10;overflow:visible;pointer-events:none;}

/* notifications */
#notificationArea{position:fixed;top:12px;right:12px;z-index:999;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;}