:root { --bg:#fff; --fg:#111; --win:#e6e6e6; --bar:#d9d9d9; --accent:#000; --shadow:#b5b5b5; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.crt {
  position:fixed; inset:0; overflow:hidden; background:var(--bg);
}
.crt::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0.03) 50%, rgba(255,255,255,0.02) 50%);
  background-size:100% 2px; mix-blend-mode:multiply; opacity:.7;
}
.desktop {
  position:absolute; inset:0 0 28px 0; padding:16px; display:grid; grid-auto-rows:min-content;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap:14px;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02)),
    repeating-linear-gradient(0deg, #fafafa, #fafafa 2px, #fff 2px, #fff 4px);
}
.icon { width:86px; text-align:center; padding:8px 4px; border:1px solid transparent; border-radius:4px; user-select:none; cursor:default; outline:none; }
.icon:focus, .icon.selected { border-color:#888; background:#efefef; }
.icon img { width:48px; height:48px; image-rendering:pixelated; object-fit:contain; display:block; margin:0 auto 6px; }
.icon span { font-size:12px; line-height:1.2; word-break:break-word; }

.taskbar {
  position:absolute; left:0; right:0; bottom:0; height:28px; background:var(--bar); border-top:2px solid #c3c3c3;
  display:flex; align-items:center; gap:8px; padding:2px 6px;
}
.start-btn {
  font-family:"Space Mono", monospace; font-size:12px; padding:3px 10px; border:2px solid #999; background:#efefef; box-shadow:inset -2px -2px #cfcfcf, inset 2px 2px #fff;
  cursor:pointer;
}
.tasks { display:flex; gap:6px; flex:1; overflow-x:auto; }
.task {
  min-width:110px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; padding:3px 8px; background:#efefef; border:2px solid #a7a7a7; cursor:pointer;
}
.task.active { background:#ddd; }

.window {
  position:absolute; min-width:260px; min-height:160px; background:var(--win); border:2px solid #888;
  box-shadow:4px 4px 0 var(--shadow); animation:pop .12s ease-out;
}
@keyframes pop { from { transform:scale(.98); opacity:.6 } to { transform:scale(1); opacity:1 } }

.titlebar {
  height:26px; background:#cfcfcf; display:flex; align-items:center; gap:8px; padding:0 6px; cursor:move; user-select:none;
  border-bottom:1px solid #b5b5b5;
}
.titlebar .dot { width:10px; height:10px; background:#000; border-radius:50%; opacity:.8; }
.titlebar .title { font-family:"Space Mono", monospace; font-size:12px; flex:1; }
.titlebar .actions { display:flex; gap:4px; }
.win-btn { width:18px; height:18px; border:1px solid #666; background:#eaeaea; line-height:16px; text-align:center; font-size:12px; cursor:pointer; }

.content { padding:10px; height:calc(100% - 26px); overflow:auto; }

.notepad pre, .notepad textarea {
  width:100%; height:100%; resize:none; border:1px solid #bdbdbd; background:#fff; padding:10px; font-family:"Space Mono", monospace; font-size:13px; line-height:1.5;
}

.image-viewer img { max-width:100%; height:auto; display:block; margin:0 auto; image-rendering:pixelated; }

.player { display:grid; gap:10px; grid-template-columns: 1fr; }
.player .screen {
  border:2px inset #bdbdbd; background:#111; color:#f0f0f0; padding:10px; font-family:"Space Mono", monospace; min-height:66px;
}
.controls { display:flex; gap:6px; }
.controls button {
  font-size:12px; padding:6px 10px; border:2px solid #999; background:#efefef; box-shadow:inset -2px -2px #cfcfcf, inset 2px 2px #fff; cursor:pointer;
}
.playlist { border:1px solid #bdbdbd; background:#fff; }
.track { padding:8px 10px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #eee; font-size:13px; }
.track.active { background:#efefef; }

.hidden { display:none; }

@media (max-width:700px) {
  .window { min-width:72vw; min-height:40vh; }
}