:root {
  --panel:        #7f8c69;
  --panel-hi:     #a9b48f;
  --panel-lo:     #59654a;
  --text:         #e8e6d2;
  --gold:         #cbbd62;
  --edge-hi:      #bcc6a2;
  --edge-lo:      #6b7657;
}

.win {
  position: fixed;
  top: 50%;
  left: 50%;

  --tx: 0px;
  --ty: 0px;
  --scale: 1.4;
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--scale));
  z-index: 1;
  width: 520px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  color: var(--text);
  font-family: 'JetBrainsMono', monospace;
  font-size: 13px;
  line-height: 1.3;
  padding: 4px;

  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.2);
  user-select: none;
}
.win[hidden] { display: none; }

.win button {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
}

.win__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  margin-bottom: 4px;
  cursor: grab;
  touch-action: none;
}
.win__title:active { cursor: grabbing; }
.win__title-icon { color: var(--text); font-size: 13px; }
.win__title-text { flex: 1; font-weight: 700; }
.win__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  font-weight: 900;
  -webkit-text-stroke: 0.6px currentColor;
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  background: var(--panel);
}
.win__x:active {
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
}

.win__tabs {
  display: flex;
  gap: 2px;
  padding: 0;
  position: relative;
  z-index: 1;
}
.tab {
  padding: 4px 8px 5px;
  border: 2px solid;
  border-bottom: none;
  border-color: var(--panel-hi) var(--panel-lo) transparent var(--panel-hi);
  background: var(--panel);
  border-radius: 2px 2px 0 0;
}
.tab.tab--active {
  color: var(--gold);

  margin-bottom: -2px;
  padding-bottom: 7px;
}

.win--main { --scale: 1.26; }

.win--auto { width: auto; max-width: 440px; }

.win--music { width: 250px; }
.win--music .links__title { font-size: 15px; }
.win--music .links__desc { font-size: 11px; margin-top: 3px; }
.win--music .links__item + .links__item { margin-top: 12px; }
.win--music .win__body { padding: 14px 16px; min-height: 0; }

.links--scroll {
  max-height: 232px;
  overflow-y: auto;
}

.win__body {
  border: 2px solid;

  border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);
  padding: 20px 22px;
  min-height: 200px;
}

.win__body--media {
  min-height: 0;
  padding: 4px;
  display: flex;
  justify-content: center;
}
.framed {
  display: block;
  background: #3a4230;
}

.framed--img { max-width: 360px; max-height: 70vh; }

.framed--video { width: auto; height: auto; max-width: 400px; max-height: 60vh; }

.win__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 2px 2px;
}
.win__btn {
  min-width: 82px;
  padding: 4px 14px;
  text-align: center;
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  background: var(--panel);
}
.win__btn:hover { color: var(--gold); }
.win__btn:active { border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo); }
.win__btn:disabled { opacity: 0.45; cursor: default; color: var(--text); }

.panel { display: none; }
.panel--active { display: block; }

.panel[data-panel="welcome"] { text-align: center; }
.panel[data-panel="welcome"] .lede { margin-left: auto; margin-right: auto; }
.brand {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
}
.lede, .bio {
  margin: 0 0 12px;
  max-width: 58ch;
  color: var(--text);
}
.bio:last-child { margin-bottom: 0; }

.links { list-style: none; margin: 0; padding: 0; }
.links__item + .links__item { margin-top: 18px; }
.links__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.links__title:hover { text-decoration: underline; }
.links__desc { margin: 4px 0 0; color: var(--text); }

.taskbar {
  position: fixed;
  left: 60px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.taskbtn {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.taskbtn:active {
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
}

.cog {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 20px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.cog:active {
  border-color: var(--panel-lo) var(--panel-hi) var(--panel-hi) var(--panel-lo);
}

.settings {
  position: fixed;
  left: 16px;
  bottom: 60px;
  z-index: 3;
  width: 224px;
  padding: 4px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25);
}
.settings[hidden] { display: none; }
.settings__title {
  padding: 5px 8px 9px;
  font-weight: 700;
  color: var(--gold);
}
.settings__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  cursor: pointer;
}
.settings__opt {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  cursor: pointer;
}

.settings__opt:checked + span { color: var(--gold); }

.mobile-notice { display: none; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #dotgrid,
  .cog,
  .settings,
  .taskbar,
  .win:not(.win--main),
  .win--main .win__x { display: none !important; }

  .win--main {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    transform: none;
    --scale: 1;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    display: flex;
    flex-direction: column;
  }
  .win--main .win__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .mobile-notice {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--gold);
    background: var(--panel);
    border-top: 2px solid var(--panel-lo);
  }
}