:root {
  --desktop-blue: #07008f;
  --deep-blue: #020064;
  --desktop-top: #0b06ad;
  --window-bg: rgba(0,0,94,.94);
  --window-border: #5d5db1;
  --card-border: #3333a8;
  --card-bg: rgba(255,255,255,.035);
  --task-blue: #11118a;
  --terminal-bg: #050527;
  --win-gray: #c0c0c0;
  --win-dark: #24246f;
  --ink: #ffffff;
  --accent: #33ff33;
  --accent-strong: #0db80d;
  --note: #fff36a;
  --shadow: #000033;
}

body[data-theme="teal"] {
  --desktop-blue: #008080;
  --deep-blue: #004f5d;
  --desktop-top: #00a0a0;
  --window-bg: rgba(0,67,78,.95);
  --window-border: #38b7b7;
  --card-border: #41b9b9;
  --task-blue: #00666f;
  --terminal-bg: #00313b;
  --accent: #f7ff66;
  --accent-strong: #bac515;
  --note: #ffffff;
}

body[data-theme="midnight"] {
  --desktop-blue: #101319;
  --deep-blue: #05070b;
  --desktop-top: #232a37;
  --window-bg: rgba(7,11,18,.96);
  --window-border: #5b6a82;
  --card-border: #4a5568;
  --task-blue: #202838;
  --terminal-bg: #020409;
  --accent: #00e5ff;
  --accent-strong: #0099aa;
  --note: #ffd966;
}

body[data-theme="amber"] {
  --desktop-blue: #2b1600;
  --deep-blue: #100800;
  --desktop-top: #4c2600;
  --window-bg: rgba(30,15,0,.96);
  --window-border: #9a6d22;
  --card-border: #9a6d22;
  --task-blue: #3a2206;
  --terminal-bg: #120900;
  --accent: #ffbf3f;
  --accent-strong: #d88400;
  --note: #fff0b0;
}

body[data-theme="hacker"] {
  --desktop-blue: #001308;
  --deep-blue: #000403;
  --desktop-top: #001f10;
  --window-bg: rgba(0,16,8,.96);
  --window-border: #00a85f;
  --card-border: #008a4e;
  --card-bg: rgba(0,255,120,.06);
  --task-blue: #002514;
  --terminal-bg: #000805;
  --accent: #00ff72;
  --accent-strong: #00a94d;
  --note: #d9ff70;
}

body[data-theme="neon"] {
  --desktop-blue: #170033;
  --deep-blue: #080012;
  --desktop-top: #310066;
  --window-bg: rgba(15,0,35,.95);
  --window-border: #ff4df8;
  --card-border: #42f5ff;
  --card-bg: rgba(66,245,255,.06);
  --task-blue: #27005a;
  --terminal-bg: #080018;
  --accent: #42f5ff;
  --accent-strong: #ff4df8;
  --note: #fff56a;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--desktop-blue);
  color: var(--ink);
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 13px;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

.desktop {
  position: relative;
  min-height: 100vh;
  padding: 42px 160px 48px 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, var(--desktop-top), var(--desktop-blue) 48%, var(--deep-blue));
}

.desktop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.desktop.no-scanlines {
  background: linear-gradient(180deg, var(--desktop-top), var(--desktop-blue) 48%, var(--deep-blue));
}

body[data-theme="hacker"] .desktop::before {
  opacity: .34;
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(0,255,114,.18) 49px 50px),
    repeating-linear-gradient(180deg, rgba(0,255,114,.18) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 30% 20%, rgba(0,255,114,.22), transparent 28%);
  animation: matrixSweep 8s linear infinite;
}

body[data-theme="neon"] .desktop::before {
  opacity: .38;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,77,248,.22) 45% 46%, transparent 47%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(66,245,255,.22) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,77,248,.18) 59px 60px);
  animation: neonDrift 10s linear infinite;
}

@keyframes matrixSweep {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 120px 240px, 0 280px, 80px 20px; }
}

@keyframes neonDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-60px, 60px, 0); }
}

.top-strip {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 700;
  text-shadow: 1px 1px var(--shadow);
}

.status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.top-link {
  color: var(--note);
  text-decoration: none;
  border: 2px outset var(--win-gray);
  padding: 3px 8px;
  background: #151590;
}

.desktop-icons {
  position: fixed;
  top: 74px;
  right: 18px;
  bottom: 58px;
  display: grid;
  grid-template-columns: repeat(2, 72px);
  grid-auto-flow: row;
  align-content: center;
  justify-content: end;
  gap: 8px 8px;
  z-index: 100;
  pointer-events: none;
}

.desktop-icon {
  pointer-events: auto;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  width: 72px;
  min-height: 82px;
  border: 1px dotted transparent;
  background: transparent;
  color: white;
  padding: 4px 2px;
  text-shadow: 1px 1px #000;
  cursor: pointer;
  overflow: hidden;
}

.desktop-icon:hover,
.desktop-icon:focus {
  border-color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  outline: 0;
}

.desktop-icon:active,
.desktop-icon.selected {
  border-color: var(--note);
  background: rgba(255,255,255,.24);
  color: var(--note);
}

.desktop-icon span:last-child {
  width: 100%;
  min-height: 14px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.home-icon::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 20px;
  background: #f4f4d0;
  border: 2px outset #fff;
  bottom: 4px;
  z-index: 2;
}

.home-icon::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background: #e44848;
  transform: rotate(45deg);
  border: 2px outset #ffb0b0;
  top: 1px;
}

.folder-icon,
.grid-icon {
  width: 38px;
  height: 30px;
  margin-top: 6px;
  background: #c3c3a1;
  border: 2px outset #e8e8ca;
}

.folder-icon::before,
.grid-icon::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -7px;
  width: 22px;
  height: 8px;
  background: #d6d6b3;
  border: 1px solid #767656;
}

.terminal-icon::before {
  content: ">_";
  color: white;
  font-size: 28px;
  line-height: 1;
}

.note-icon,
.doc-icon {
  width: 32px;
  height: 38px;
  background: #ededed;
  border: 2px outset #fff;
}

.note-icon::after,
.doc-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 20px;
  height: 2px;
  background: #777;
  box-shadow: 0 8px #777, 0 16px #777;
}

.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 4px 4px;
  background: #b6c7ff;
}

.gear-icon {
  width: 38px;
  height: 38px;
  border: 7px dotted #cfd8ff;
  border-radius: 50%;
}

.chart-icon {
  width: 38px;
  height: 32px;
  border: 2px solid #ddd;
  background: linear-gradient(90deg, #2cff2c 0 25%, #e33 25% 52%, #5dc2ff 52% 78%, #ffe64a 78%);
}

.trophy-icon::before {
  content: "T";
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #332200;
  background: #ffd84d;
  border: 2px outset #fff0a4;
  font-weight: 900;
  font-size: 20px;
}

.display-icon {
  width: 40px;
  height: 30px;
  background: #111;
  border: 3px outset #777;
}

.display-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -8px;
  height: 6px;
  background: #aaa;
}

.snake-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #1d8b1d, #42ff42);
  border: 2px outset #66ff66;
  border-radius: 4px;
}

.snake-icon::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 7px;
  background: #004400;
  border-radius: 4px;
  box-shadow: 3px 9px #004400, -3px 18px #004400;
}

.tetra-icon {
  width: 38px;
  height: 38px;
  background:
    linear-gradient(90deg, #ff5757 0 50%, #5dc2ff 50%),
    linear-gradient(#ffdf4d 0 50%, #33ff66 50%);
  background-size: 16px 16px;
  border: 2px outset #eee;
}

.game2048-icon::before {
  content: "2048";
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  border: 2px solid var(--accent);
  padding: 2px;
}

.window {
  position: absolute;
  z-index: 300;
  top: var(--y);
  left: var(--x);
  width: min(var(--w), calc(100vw - 150px));
  max-height: calc(100vh - 94px);
  display: none;
  border: 2px outset var(--win-gray);
  background: var(--win-gray);
  box-shadow: 7px 7px 0 rgba(0,0,0,.55);
}

.window.open,
.hero-window.open {
  display: block;
}

.window.minimized {
  display: none;
}

.window.active {
  z-index: 900;
}

.titlebar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px 3px 8px;
  color: #0b1578;
  background: repeating-linear-gradient(0deg, #d8d8d8 0, #d8d8d8 1px, #bfbfbf 1px, #bfbfbf 3px);
  font-weight: 900;
  cursor: move;
  user-select: none;
}

.active .titlebar {
  color: #071067;
}

.window-controls {
  display: flex;
  gap: 3px;
}

.window-controls button,
.win-button,
.start-button,
.task-buttons button,
.file-row,
.start-items button,
.context-menu button {
  border: 2px outset var(--win-gray);
  background: var(--win-gray);
  color: #07005f;
  cursor: pointer;
}

.window-controls button {
  width: 18px;
  height: 18px;
  line-height: 10px;
  padding: 0;
  font-weight: 900;
}

.window-controls button:active,
.win-button:active,
.start-button.active,
.task-buttons button.active,
.file-row:active,
.start-items button:active,
.context-menu button:active {
  border-style: inset;
}

.window-body {
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding: 18px;
  color: #d7dcff;
  background: var(--window-bg);
  border: 2px inset var(--window-border);
  scrollbar-color: var(--win-gray) var(--terminal-bg);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  color: var(--accent);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
  text-shadow: 2px 2px #001900;
}

h2 {
  color: var(--accent);
  font-size: 20px;
}

h3 {
  color: #ffffff;
}

.hero-body {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 18px;
  align-items: center;
}

.profile-photo {
  width: 126px;
  height: 150px;
  object-fit: cover;
  border: 3px inset var(--win-gray);
  filter: contrast(1.1) saturate(.9);
}

.system-label,
small {
  color: var(--note);
}

.lead {
  line-height: 1.6;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.win-button {
  padding: 8px 14px;
  font-weight: 900;
}

.info-grid,
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-grid div,
.project-grid article {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 12px;
  transition: all 0.2s ease;
}

.project-grid article:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
  cursor: pointer;
}

.info-grid strong,
.info-grid span {
  display: block;
}

.info-grid strong {
  color: var(--note);
  margin-bottom: 5px;
}

.contact-link,
.file-row {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  color: white;
  text-align: left;
  text-decoration: none;
}

.contact-link {
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.05);
}

.meter {
  margin-bottom: 13px;
}

.meter span {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.meter b {
  display: block;
  height: 12px;
  border: 1px solid #667;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: inset -4px 0 rgba(255,255,255,.25);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.tag-cloud span {
  padding: 5px 7px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.07);
}

.log-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.8;
}

.terminal-body {
  background: var(--terminal-bg);
  color: var(--accent);
}

.terminal-body p,
.terminal-body pre {
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.terminal-input {
  display: flex;
  gap: 6px;
  color: var(--accent);
}

.terminal-input input {
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--accent);
  background: transparent;
}

.snake-body,
.tetra-body,
.radar-body,
.game2048-body {
  text-align: center;
}

#snakeCanvas,
#tetraCanvas,
#radarCanvas {
  display: block;
  max-width: 100%;
  margin: 12px auto;
  border: 3px inset var(--win-gray);
  background: var(--terminal-bg);
}

.file-manager {
  display: flex;
  padding: 0;
  height: 320px;
}

.fm-sidebar {
  width: 120px;
  background: rgba(255,255,255,.05);
  border-right: 2px inset var(--window-border);
  padding: 10px 0;
}

.fm-side-item {
  padding: 6px 14px;
  cursor: pointer;
  color: var(--note);
}

.fm-side-item.active {
  background: var(--accent);
  color: #000;
  font-weight: 900;
}

.fm-main {
  flex: 1;
  padding: 14px;
  background: var(--terminal-bg);
  overflow-y: auto;
}

.fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 14px;
}

.fm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  background: transparent !important;
  color: #fff !important;
  text-align: center;
}

.fm-item:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,.1) !important;
}

.fm-item .icon {
  width: 32px;
  height: 32px;
}

.fm-item span:last-child {
  font-size: 11px;
  word-break: break-all;
}

.game2048-grid {
  display: grid;
  grid-template-columns: repeat(4, 52px);
  grid-template-rows: repeat(4, 52px);
  gap: 8px;
  width: fit-content;
  margin: 12px auto;
  padding: 8px;
  background: #c0c0c0;
  border: 3px inset #fff;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4);
}

.game2048-grid div {
  width: 52px;
  height: 52px;
  background: #000040;
  border: 2px inset #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.game2048-grid div:empty {
  background: #101030;
  border-color: #404060;
}

.game2048-body .win-button {
  display: block;
  margin: 10px auto 0;
  min-width: 120px;
}

.game2048-grid div[data-value="2"] { color: #eee; }
.game2048-grid div[data-value="4"] { color: var(--note); }
.game2048-grid div[data-value="8"] { color: #ff9900; }
.game2048-grid div[data-value="16"] { color: #ff5500; }
.game2048-grid div[data-value="32"] { color: #ff3300; border-color: #ff3300; }
.game2048-grid div[data-value="64"] { color: #ff0000; border-color: #ff0000; }
.game2048-grid div[data-value="128"] { color: var(--accent); text-shadow: 0 0 5px var(--accent); }
.game2048-grid div[data-value="256"] { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.game2048-grid div[data-value="512"] { color: var(--accent); font-size: 14px; }
.game2048-grid div[data-value="1024"] { color: var(--accent); font-size: 12px; }
.game2048-grid div[data-value="2048"] { color: gold; text-shadow: 0 0 15px gold; }

.game-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--note);
  font-weight: 900;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  color: #fff;
}

.setting-row select,
.setting-row input[type="color"] {
  min-width: 154px;
  border: 2px inset var(--win-gray);
  background: white;
  color: #07005f;
  padding: 4px;
}

.taskbar {
  position: fixed;
  z-index: 2500;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px;
  background: var(--win-gray);
  border-top: 2px outset #fff;
}

.start-button {
  height: 30px;
  min-width: 76px;
  font-weight: 900;
}

.task-buttons {
  display: flex;
  gap: 5px;
  flex: 1;
  overflow-x: auto;
}

.task-buttons button {
  height: 29px;
  min-width: 92px;
  padding: 0 8px;
  overflow: hidden;
  color: white;
  background: var(--task-blue);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tray {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 29px;
  padding: 0 8px;
  border: 2px inset var(--win-gray);
  color: #06065c;
  font-weight: 900;
}

.start-menu {
  position: fixed;
  z-index: 2600;
  left: 5px;
  bottom: 38px;
  display: none;
  width: 224px;
  min-height: 250px;
  border: 2px outset var(--win-gray);
  background: var(--win-gray);
  box-shadow: 7px 7px 0 rgba(0,0,0,.5);
}

.start-menu.open {
  display: flex;
}

.start-side {
  width: 34px;
  padding: 10px 4px;
  color: white;
  background: var(--task-blue);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 18px;
  font-weight: 900;
}

.start-items {
  flex: 1;
  padding: 6px;
}

.start-items button {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 10px;
  text-align: left;
}

.context-menu {
  position: fixed;
  z-index: 3000;
  display: none;
  width: 180px;
  padding: 4px;
  border: 2px outset var(--win-gray);
  background: var(--win-gray);
}

.context-menu.open {
  display: block;
}

.context-menu button {
  display: block;
  width: 100%;
  padding: 8px;
  text-align: left;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  background: var(--terminal-bg);
  color: var(--accent);
}

.boot-screen.done {
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}

.boot-box {
  width: min(480px, 84vw);
  padding: 28px;
  border: 2px solid var(--accent);
  text-align: center;
}

.boot-logo {
  margin-bottom: 16px;
  color: white;
  font-size: 32px;
  font-weight: 900;
}

.progress {
  height: 18px;
  margin-top: 18px;
  border: 2px inset var(--win-gray);
  background: #000;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .desktop {
    min-height: 100dvh;
    padding: 74px 12px 54px;
  }

  .top-strip {
    right: 10px;
    flex-wrap: wrap;
  }

  .desktop-icons {
    position: static;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .desktop-icon {
    width: 100%;
  }

  .window {
    position: fixed;
    top: 86px !important;
    left: 10px !important;
    right: 10px;
    width: auto !important;
    max-height: calc(100dvh - 142px);
  }

  .hero-window {
    position: static;
    width: 100% !important;
    margin-bottom: 14px;
  }

  .hero-body,
  .info-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .profile-photo {
    width: 104px;
    height: 124px;
  }

  .tray span:first-child {
    display: none;
  }
}