:root { 
  /* 🎨 Color Palette */
  --bl: #1982c4; 
  --mg: #6a4c93; 
  --yl: #ffca3a; 
  --gn: #bac926;
  --rd: #ff595e; 
  --cy: #00b8b8;
  --fg: #f0f7ff; 
  --bg: #000000; 
  --gr: #2a2a2a; 
  --ltgr: #111111; 

  /* 📐 Layout & Dimensions */
  --sidebar-w: 25%;
  --btn-height: 2.75rem;    /* Height for top buttons & menu buttons */
  
  /* 🪟 Borders & Spacing */
  --border-style: 0.0625rem solid var(--gr);
  --pad-sm: 0.625rem;
  --pad-md: 1.25rem;
  --pad-lg: 2.5rem;
}

* { box-sizing: border-box; }

body { 
  font-family: 'Dubai', sans-serif; 
  margin: 0; 
  background: var(--bg); 
  color: var(--fg); 
}

/* ==========================================================================
   Sidebar & Navigation
   ========================================================================== */
aside {
  position: fixed; 
  inset-block: 0; 
  inset-inline-start: 0; 
  width: 100%; 
  background: var(--bg); 
  z-index: 2000;
  display: flex; 
  flex-direction: column; 
  padding: var(--pad-md); 
  transition: opacity 0.3s, visibility 0.3s;
  overflow-y: auto; 
  max-height: 100vh; 
  scrollbar-width: none;
}

aside::-webkit-scrollbar { display: none; }

/* 📱 Mobile State: Taller than it is wide (Portrait) */
@media (orientation: portrait) {
  aside { opacity: 0; visibility: hidden; }
  aside.open { opacity: 1; visibility: visible; }
}

/* 💻 Desktop State: Wider than it is tall (Landscape) */
@media (orientation: landscape) { 
  aside { 
    width: var(--sidebar-w); 
    opacity: 1 !important; 
    visibility: visible !important; 
    border-inline-end: var(--border-style); 
  }
  .menu-btn, .close-btn { display: none !important; } 
  main { 
    margin-inline-start: var(--sidebar-w) !important; 
    margin-inline-end: 0 !important;
    padding: var(--pad-lg); 
    max-width: none; 
  }
}

/* Sidebar Elements */
.top-row { display: flex; gap: var(--pad-sm); margin-bottom: 0.9375rem; }

.top-row a, .close-btn, .menu-btn {
  background: var(--gr); 
  color: var(--fg); 
  border: var(--border-style);
  border-radius: 0.75rem; 
  text-decoration: none; 
  height: var(--btn-height);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer;
}

.top-row a { flex: 1; font-weight: bold; }
.close-btn { width: var(--btn-height); flex-shrink: 0; }

/* 🤝 New Side-by-Side Shortcut Container */
.nav-shortcuts {
  display: flex;
  gap: var(--pad-sm);
  margin-bottom: 1.5625rem;
}

/* Individual Shortcut Buttons (Home / Links) */
.btn-short {
  flex: 1;
  background: var(--ltgr);
  color: var(--fg);
  border: var(--border-style);
  border-radius: 0.75rem;
  text-decoration: none;
  height: var(--btn-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.95rem;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.btn-short:hover {
  background: var(--gr);
}

nav h1 { 
  margin: 0; 
  padding: var(--pad-sm) 0; 
  font-size: 1.2rem; 
  border-bottom: var(--border-style); 
  text-align: start; 
}

nav p { margin: 0; }
nav p a { 
  display: block; 
  padding: 0.75rem var(--pad-sm); 
  color: var(--fg); 
  text-decoration: none; 
  opacity: 0.7; 
  border-bottom: 0.0625rem solid var(--ltgr); 
  text-align: start; 
}
nav p a:hover { opacity: 1; background: var(--gr); }

/* Mobile Menu Trigger Button */
.menu-btn { 
  position: fixed; 
  top: 0.9375rem; 
  inset-inline-start: 0.9375rem; 
  width: var(--btn-height); 
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
main { padding: 5rem var(--pad-md) var(--pad-md) var(--pad-md); max-width: 62.5rem; margin: 0 auto; }
main h1 { font-size: 2rem; margin-bottom: 1rem; }
main h3 { font-size: 1.4rem; color: #ffffff; opacity: 1; }
main p { line-height: 1.6; margin-bottom: 1.2rem; }
main a { color: var(--cy); text-decoration: none; }
main a:hover { text-decoration: underline; }

h2 { 
  font-size: 1.7rem; 
  background: linear-gradient(to right, var(--bl), var(--mg), var(--rd), var(--yl), var(--gn), var(--cy)); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}

main h6 { 
  font-size: 1rem; 
  color: var(--rd); 
  font-style: italic; 
  margin: 1.5rem 0; 
  font-weight: normal; 
  text-align: start; 
}

/* Code Blocks & Typography details */
main code { 
  display: block; 
  background: var(--ltgr); 
  padding: 0.8rem; 
  border-radius: 0.375rem; 
  white-space: pre-wrap; 
  word-wrap: break-word; 
  font-size: 1.1rem; 
  margin: 1rem 0; 
  font-family: monospace; 
  border: 0.0625rem solid var(--ltgr); 
}

main p code { 
  display: inline !important; 
  padding: 0.125rem 0.375rem; 
  margin: 0; 
  font-size: 0.95rem; 
  background: var(--ltgr); 
}

main em { 
  font-style: normal; 
  background: var(--gr); 
  padding: 0.125rem 0.25rem; 
  border-radius: 0.25rem; 
  display: inline-block; 
  line-height: 1; 
}