:root {
  color-scheme: light;
  font-family: Tahoma, Verdana, sans-serif;
  color: #172b45;
  --task-height: 37px;
  --luna: #1554c8;
  --chrome: #eeeadd;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: #2289ce; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: #1b55aa; }
:focus-visible { outline: 2px solid #f29315; outline-offset: 2px; }
[hidden] { display: none !important; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.desktop {
  height: 100dvh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #4da9e4 url("wallpaper.png") center / cover no-repeat;
}

.shortcuts {
  position: absolute;
  top: 18px;
  left: 10px;
  display: grid;
  gap: 14px;
}
.shortcuts button {
  width: 84px;
  min-height: 72px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 7px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: white;
  font-size: 12px;
  text-shadow: 0 1px 4px #06233b, 0 1px 2px #06233b;
}
.shortcuts button:hover { background: #095eb066; border-color: #a6d7f0; }
.shortcuts svg { width: 38px; height: 38px; filter: drop-shadow(1px 2px 1px #093c6255); }

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--luna);
  border-radius: 8px 8px 3px 3px;
  overflow: hidden;
  background: var(--chrome);
  box-shadow: 0 15px 42px #1b35515c, 0 2px 6px #1b355155;
}
.projects-window {
  top: clamp(18px, 6vh, 58px);
  left: max(106px, calc(50% - 474px));
  width: min(976px, calc(100% - 130px));
  height: min(760px, calc(100% - clamp(18px, 6vh, 58px) - var(--task-height) - 20px));
}
.small-window { width: min(455px, calc(100% - 122px)); max-height: calc(100% - var(--task-height) - 24px); }
.about-window { top: min(22%, 155px); left: clamp(100px, 27%, calc(100% - min(455px, calc(100% - 122px)) - 12px)); }
.contact-window { top: min(32%, 210px); left: clamp(100px, 48%, calc(100% - 472px)); }
.window.maximized { top: 0 !important; left: 0 !important; width: 100%; height: calc(100% - var(--task-height)); max-height: none; border-radius: 0; }

.titlebar {
  min-height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px 3px 7px;
  background: linear-gradient(#63a7ff, #1f70ed 15%, #1455c7 74%, #164aab);
  box-shadow: inset 0 1px #9dcbff;
  color: #fff;
  user-select: none;
  touch-action: none;
}
.window:not(.active) .titlebar { background: linear-gradient(#9bc3f1, #6999da 25%, #517ab9); }
.titlebar svg { width: 18px; height: 18px; }
.titlebar h1, .titlebar h2 { margin: 0; font-size: 13px; text-shadow: 0 1px 2px #10336c; }
.controls { display: flex; gap: 3px; margin-left: auto; }
.controls button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 24px;
  padding: 0;
  border: 1px solid #d9eaff;
  border-radius: 4px;
  background: linear-gradient(130deg, #7bb6ff, #2465de 72%);
  color: white;
  font: bold 17px/1 Tahoma, sans-serif;
}
.controls button[data-action="close"] { background: linear-gradient(130deg, #ffae86, #d94323 75%); }
.controls button:hover { filter: brightness(1.19); }
.address { display: flex; align-items: center; gap: 9px; padding: 5px 8px; font-size: 11px; color: #515363; border-bottom: 1px solid #d0cab8; }
.address-value { flex: 1; padding: 4px 8px; background: #fff; color: #304769; border: 1px solid #bec3c6; }
.window-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.explorer { display: grid; grid-template-columns: 163px minmax(0, 1fr); overflow: hidden; }
.explorer-sidebar {
  overflow: auto;
  padding: 12px 10px;
  background: linear-gradient(#78a9ed, #527dd0 64%, #406bbf);
}
.sidebar-group {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 0 8px 10px;
  border: 1px solid #edf5ff;
  border-radius: 5px;
  background: #e5effe;
  font-size: 11px;
}
.sidebar-group h2 { margin: 0 -8px 4px; padding: 6px 8px; background: linear-gradient(90deg, #fff, #d7e8ff); color: #143f8c; font-size: 11px; }
.sidebar-group button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #173f78;
  text-align: left;
}
.sidebar-group button:hover { text-decoration: underline; }
.sidebar-group svg { width: 17px; height: 17px; }
.sidebar-details span { line-height: 1.5; }
.project-content { overflow: auto; background: #f6f8fc; }
.intro {
  padding: clamp(23px, 4vw, 45px) clamp(18px, 3vw, 38px);
  background: radial-gradient(ellipse at 94% 8%, #3067b8, transparent 52%), linear-gradient(120deg, #0b1c37, #193f73);
  color: #fff;
}
.eyebrow { margin: 0; font-size: 10px; line-height: 1.5; letter-spacing: .15em; font-weight: bold; }
.intro .eyebrow { color: #c5e6ff; }
.intro h2 { margin: 6px 0 4px; font: bold clamp(30px, 5vw, 60px)/1.05 Tahoma, sans-serif; letter-spacing: -.055em; }
.intro p:last-child { margin: 10px 0 0; color: #e5efff; font-size: clamp(12px, 1.7vw, 17px); }
.collection { padding: 19px clamp(14px, 3vw, 32px) 25px; }
.collection-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 12px; }
.collection-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.collection-heading a { font-size: 11px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.project { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #cbd7e9; border-radius: 6px; background: #fff; }
.project-art { position: relative; display: grid; place-items: center; min-height: 86px; overflow: hidden; }
.project-art > span { position: absolute; top: 7px; left: 8px; font: bold 9px/1.3 Tahoma, sans-serif; letter-spacing: .09em; }
.bank-art { background: linear-gradient(140deg, #173b5e, #245d83); color: #dbf6ff; }
.drawer { display: grid; grid-template-columns: repeat(3, 24px); gap: 4px; transform: translateY(7px); }
.drawer i { height: 15px; border: 1px solid #6aa9c8; border-radius: 2px; background: #163c5f; }
.drawer i:nth-child(5) { background: #9ef2c7; border-color: #beffe8; box-shadow: 0 0 12px #a2ffe3aa; }
.agent-art { background: linear-gradient(130deg, #242045, #3b3067); color: #e3d7ff; }
.terminal { margin-top: 13px; border: 1px solid #8272a9; border-radius: 4px; background: #1b1830; padding: 7px 11px; font: 12px Consolas, monospace; }
.terminal b, .cursor { color: #caa3ff; }
.route-art { color: #135343; background: repeating-linear-gradient(30deg, transparent 0 22px, #cee4d7 23px 24px), #e6f2ea; }
.route-art svg { width: 135px; margin-top: 9px; }
.chain-art { background: linear-gradient(120deg, #26364e, #425775); color: #e5edff; }
.chain { display: flex; gap: 9px; margin-top: 12px; }
.chain i { position: relative; width: 23px; height: 23px; border: 1px solid #acc6ff; border-radius: 4px; background: #6885ba; transform: rotate(-10deg); }
.chain i + i::before { position: absolute; top: 10px; right: 100%; width: 11px; height: 1px; background: #acc6ff; content: ""; }
.project-info { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; }
.project-info h3, .project-info p { margin: 0; }
.project-info h3 { font-size: 14px; }
.project-info h3 a { color: #143762; text-decoration: none; }
.project-info h3 a:hover { text-decoration: underline; }
.project-info p { color: #3d516d; font-size: 11px; line-height: 1.55; }
.project-info .stack { margin-top: auto; padding-top: 3px; color: #224d86; font-size: 10px; font-weight: bold; }
.status { flex: none; display: flex; justify-content: space-between; padding: 4px 8px; border-top: 1px solid #cecbbd; font-size: 10px; color: #4b4d50; }

.profile, .contact-content { padding: 23px; background: #fff; }
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.avatar {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border: 2px solid #fff;
  border-radius: 7px;
  background: linear-gradient(140deg, #4978c3, #123773);
  box-shadow: 0 1px 5px #1e3d6a44;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
}
.profile h3, .contact-content h3 { margin: 4px 0; font-size: 23px; }
.profile div > p:last-child { margin: 0; font-size: 12px; }
.profile-note { grid-column: 1 / -1; margin: 0; color: #364b66; font-size: 13px; line-height: 1.65; }
.classic-button { grid-column: 1 / -1; justify-self: start; padding: 7px 12px; border: 1px solid #477ab8; border-radius: 4px; background: linear-gradient(#fff, #e7edf6); color: #163d6a; font-size: 12px; }
.classic-button:hover { background: #deedff; }
.contact-content a { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding: 10px; border: 1px solid #cadcf4; border-radius: 4px; background: #f2f7ff; text-decoration: none; font-size: 12px; }
.contact-content a:hover { background: #e0edff; }
.taskbar {
  position: absolute;
  z-index: 100;
  inset: auto 0 0;
  display: flex;
  gap: 5px;
  align-items: center;
  height: var(--task-height);
  background: linear-gradient(#69aaff, #2466dd 16%, #2058cf 82%, #1840a2);
  color: #fff;
}
.start-button {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px 1px 9px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(#8cd57b, #398b2b 24%, #347e27 78%, #235d1a);
  color: white;
  font: italic bold 18px Tahoma, sans-serif;
  text-shadow: 0 1px 3px #143f11;
}
.start-button svg { width: 21px; height: 21px; }
.start-button:hover, .start-button[aria-expanded="true"] { filter: brightness(1.16); }
.tasks { display: flex; flex: 1; min-width: 0; gap: 3px; }
.task {
  display: flex;
  align-items: center;
  gap: 5px;
  width: min(145px, 100%);
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #2c6ad8;
  border-radius: 4px;
  background: #397ce0;
  box-shadow: inset 0 1px #7ab0fc;
  color: #fff;
  text-align: left;
  font-size: 11px;
}
.task:hover { background: #4388ea; }
.task[aria-pressed="true"] { background: #1648a9; box-shadow: inset 0 1px 3px #103b92; }
.task svg { width: 16px; height: 16px; flex: none; }
.task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clock { align-self: stretch; display: grid; place-items: center; padding: 0 12px; border-left: 1px solid #135baf; background: linear-gradient(#6fc3f6, #1a92da 25%, #1174bf); font-size: 11px; white-space: nowrap; }
.start-menu {
  position: absolute;
  z-index: 101;
  bottom: var(--task-height);
  left: 0;
  width: min(300px, 100%);
  overflow: hidden;
  border: 2px solid #1b56ba;
  border-radius: 8px 8px 0 0;
  background: #eef5ff;
  box-shadow: 3px 0 18px #112d5266;
}
.start-heading { display: flex; align-items: center; gap: 10px; padding: 10px; background: linear-gradient(#3284e9, #174db2); color: white; font-size: 15px; }
.start-heading .avatar { width: 40px; height: 40px; font-size: 13px; }
.start-menu small { display: block; margin-top: 3px; font-size: 10px; }
.start-links { padding: 6px; border-top: 2px solid #f0bd53; }
.start-links button { width: 100%; display: flex; gap: 9px; align-items: center; padding: 7px; border: 0; border-radius: 3px; background: transparent; color: #17385e; text-align: left; font-size: 12px; }
.start-links button:hover { background: #d7e8fe; }
.start-links svg { width: 27px; height: 27px; flex: none; }
@media (max-width: 760px) {
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-sidebar { display: none; }
}
@media (max-width: 600px) {
  .shortcuts { top: 3px; left: 6px; grid-auto-flow: column; gap: 3px; }
  .shortcuts button { width: 72px; min-height: 52px; gap: 2px; padding: 2px; font-size: 10px; }
  .shortcuts svg { width: 27px; height: 27px; }
  .window { top: 59px; left: 5px; width: calc(100% - 10px); max-height: calc(100% - var(--task-height) - 64px); }
  .projects-window { height: calc(100% - var(--task-height) - 64px); }
  .titlebar { min-height: 38px; }
  .controls button { width: 32px; height: 30px; }
  .task { height: 32px; }
  #clock { padding: 0 5px; font-size: 10px; }
}
@media (max-width: 410px) {
  .project-grid { grid-template-columns: 1fr; }
  .task svg { display: none; }
}