:root {
  --mac-white: #ffffff;
  --mac-border: #dcdcdc;
}

body {
  background-image: url(/media/backgrounds/pinkcheck.png);
  background-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  perspective: 2500px; 
  overflow: hidden;
  /* improves font rendering across browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.macbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  position: relative;
  /* changed translateY from 40px to 80px to move it down */
  transform: scale(1.1) translateY(80px) translateZ(0); 
}

/* lid */
.lid {
  width: 580px;
  height: 390px;
  background: var(--mac-white);
  border: 1px solid rgba(0,0,0,0.1); 
  border-radius: 14px 14px 0 0;
  padding: 10px;
  z-index: 2;
  box-shadow: 0 -2px 15px rgba(0,0,0,0.05);
  position: relative;
  box-sizing: border-box;
}

.screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 7px solid #1a1a1a; 
  box-sizing: border-box;
  /* keeps the black bezel sharp */
  transform: translateZ(0);
}

.desktop {
  width: 100%;
  height: 100%;
  background: #fff0f3;
  position: relative;
  font-family: 'Nunito', sans-serif;
  backface-visibility: hidden;
  /* critical fix for text blurriness in 3d space */
  transform: translateZ(0);
}

/* keyboard base - exact same logic as your favorite version */
.body-container {
  perspective: 1500px;
  margin-top: -1px;
  z-index: 1;
}

.body-base {
  width: 590px;
  height: 290px;
  background: var(--mac-white);
  border: 1px solid var(--mac-border);
  /* updated: added 15px radius to top corners to make them rounder */
  border-radius: 15px 15px 40px 40px; 
  transform: rotateX(60deg); 
  transform-origin: top;
  box-shadow: 
    0 1px 0 #e0e0e0,
    0 8px 0 #d5d5d5,
    0 25px 50px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 28px;
}

.keyboard-area {
  width: 86%;
  height: 135px;
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.trackpad-area {
  width: 145px;
  height: 85px;
  background: rgba(0,0,0,0.02);
  margin-top: 22px;
  border-radius: 13px;
  border: 1px solid rgba(0,0,0,0.05);
}

/* internal ui elements */
.window { 
  position: absolute; 
  background: white; 
  border-radius: 8px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
  display: none; 
  top: 50px; 
  left: 50px; 
  width: 250px; 
  z-index: 10; 
  border: 1px solid #eee;
  /* forces hardware acceleration for sharp window text */
  transform: translateZ(0);
}

#window-nyan { left: 280px; }

.window-header { 
  background: #fdf5f7; 
  padding: 9px; 
  display: flex; 
  gap: 8px; 
  border-bottom: 1px solid #eee; 
  font-size: 11.5px; 
  border-radius: 8px 8px 0 0; 
}

.dots span { width: 7.5px; height: 7.5px; border-radius: 50%; display: inline-block; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.window-content { 
  padding: 16px; 
  color: #a88; 
  font-size: 12.5px;
  /* ensures the text inside windows stays crisp */
  transform: translateZ(0);
}

.taskbar { 
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  height: 42px; 
  background: rgba(255,255,255,0.4); 
  display: flex; 
  align-items: center; 
  padding: 0 18px; 
  gap: 9px; 
  transform: translateZ(0);
}

.task-btn { 
  border: 1px solid #ddd; 
  background: white; 
  padding: 4px 14px; 
  font-size: 10.5px; 
  cursor: pointer; 
  border-radius: 5px; 
}

.menu-bar { 
  background: rgba(255,255,255,0.3); 
  padding: 7px 18px; 
  display: flex; 
  justify-content: space-between; 
  font-size: 11.5px; 
  color: #555; 
  transform: translateZ(0);
}