* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: url("cursorpack/arrow.cur"), default;
}

a,
button {
  cursor: url("cursorpack/hand.cur"), pointer;
}

/* text selection */
p,
h1, h2, h3,
span {
  cursor: url("cursorpack/text.cur"), text;
}

html, body {
  height: 100%;
}

/* system palette */
:root{
  --sys: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;

  --win-gray: #c0c0c0;
  --win-light: #ffffff;
  --win-dark: #808080;
  --win-darker: #404040;
  --win-blue: #000080;
}

/* background */
body{
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  font-family: var(--sys);
  color: #000;
}

/* desk panel — core primitive */
.desk-panel{
  position: fixed;
  z-index: 2;

  background: var(--win-gray);

  /* raised bevel */
  border: 2px solid var(--win-darker);
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
}

/* title bar for bio panel */
.titlebar{
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--win-blue);
  color: #fff;

  padding: 4px 6px;
  font-size: 13px;
  font-weight: bold;
  user-select: none;
}

.title{
  white-space: nowrap;
  padding-left: 10px;
}

.titlebtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--win-gray);
  color: #000;
  text-decoration: none;
  font-weight: normal;

  padding: 1px 4px;

  border: 2px solid var(--win-darker);
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
}

.enter-btn{
  padding: 7px 8px;
  line-height: 1.2;
}

.titlebtn:active{
  border-top-color: var(--win-darker);
  border-left-color: var(--win-darker);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

/* photo panel */
.desk-photo{
  top: 18px;
  left: 18px;
  padding: 1px 1px;
}

.photo{
  max-width: 60px;
  max-height: 60px;
  display: block;

  border: 2px solid var(--win-darker);
  border-top-color: var(--win-dark);
  border-left-color: var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

/* nav */
.desk-nav{
  top: 18px;
  right: 18px;

  display: flex;
  gap: 14px;
  align-items: center;

  padding: 10px 12px;
  white-space: nowrap;
}

.desk-nav a{
  display: inline-block; /* NOT block */
  line-height: 1.2;
  color: #000;
  text-decoration: none;
}

.desk-nav a:hover{
  text-decoration: underline;
}

/* mobile: stack vertically when it gets tight */
@media (max-width: 640px){
  .desk-nav{
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* bio */
.desk-center{
  min-height: 100%;
  display: grid;
  place-items: center;
  transform: translateY(-70px);
}

.desk-bio{
  position: relative;
  width: 420px;
  max-width: 92vw;
  max-height: calc(100vh - 200px); /* leaves margin top/bottom */
  overflow-y: auto;
}

.bio-content{
  padding: 14px 16px 16px;
  text-align: center;
}

.desk-bio h1{
  font-size: 20px;
  margin-bottom: 6px;
}

.desk-bio p{
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

.panel{
  background: var(--win-gray);
  border: 2px solid var(--win-darker);
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
}

/* stack + spacing for nested project panels */
.project-stack{
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.project-content{
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

.panel .titlebar{
  background: #b0b0b0;  
  color: #000;
}

.panel{
  background: #cfcfcf;
}

.projects-window{
  margin-top: 235px;
}

.projects-window > .titlebar{ /*keepwindow titlebar sticky */
  position: sticky;
  top: 0;
  z-index: 10;
}