/* ===== Base ===== */
:root{
  --bg: hsl(220 10% 8%);
  --fg: hsl(220 10% 90%);
  --muted: hsl(220 8% 55%);
  --border: hsl(220 8% 20%);
  --panel: hsl(220 10% 12% / .30);
  --hover: hsl(220 8% 18% / .45);
  --primary: hsl(180 60% 50%);
}

*{ box-sizing: border-box; }
body{
  margin:0;
  min-height:100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", monospace;
}

.page{
  padding: 0; /* page sections handle their own padding */
}

/* ===== Navbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;

  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  background: hsl(220 10% 8% / .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);
}

#logo{
  margin-left: 1rem;
  display:flex;
  align-items:center;
  gap: .6rem;
  text-decoration:none;
  color: var(--primary);
  font-weight: 800;
  font-size: 1.25rem;
  position: relative;
}

#logo svg{ color: var(--primary); }

.nav{
  margin-right: 1rem;
  display:flex;
  align-items:center;
  gap: .7rem;
}

.nav a{
  color: var(--muted);
  text-decoration:none;
  padding: .5rem .65rem;
  border-radius: .75rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.nav a:hover{
  color: var(--fg);
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border);
}

/* ===== Hamburger ===== */
.hamburger{ display:none; }

.mobile-menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  right: 1rem;

  width: min(90vw, 300px);
  background: hsl(220 10% 10% / .95);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  z-index: 1000;
}
.mobile-menu.open{ display:block; }

.mobile-menu a{
  display:block;
  padding: 14px 14px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--fg);
}
.mobile-menu a:hover{
  background: var(--hover);
}

/* bigger, tappable hamburger + X transform */
@media (max-width: 767px){
  .nav{ display:none; }

  .hamburger{
    display:inline-flex;
    width:56px;
    height:52px;
    margin-right:1rem;
    border-radius:16px;
    border:1px solid var(--border);
    background: hsl(220 10% 12% / .40);
    cursor:pointer;
    position:relative;
    padding:0;
    touch-action: manipulation;
  }

  .hamburger span{
    position:absolute;
    left:14px;
    right:14px;
    height:3px;
    background: var(--primary);
    border-radius:999px;
    transition: transform .18s ease, top .18s ease, opacity .18s ease;
  }

  .hamburger span:nth-child(1){ top:16px; }
  .hamburger span:nth-child(2){ top:25px; }
  .hamburger span:nth-child(3){ top:34px; }

  .hamburger.active span:nth-child(1){ top:25px; transform: rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ top:25px; transform: rotate(-45deg); }
}

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 24px 18px;
  margin-top: 56px;
}

.footer-container{
  max-width: 1200px;
  margin: 0 auto;

  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

@media (min-width: 640px){
  .footer-container{ flex-direction: row; }
}

.footer-left{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: .95rem;
}

.footer-icon{ color: var(--primary); }

.footer-right{
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}

/* section blocks like the screenshot */
.wu-section{ margin-top: 1.8rem; }

.wu-head{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-bottom: .75rem;
}

.wu-head h2{
  margin:0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--fg);
}

.wu-line{
  height: 1px;
  flex: 1;
  background: var(--border);
  opacity: .9;
}

.wu-section p,
.wu-section li{
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: .98rem;
}

.wu-section ul{
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}

/* code blocks */
.wu-section pre{
  margin: 0 0 1.2rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: hsl(220 10% 12% / .55);
  overflow: hidden;
}

.wu-section pre code{
  display:block;
  padding: 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
}

/* inline code */
.wu-section code{
  font-family: "JetBrains Mono", monospace;
  font-size: .95em;
  color: var(--fg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: .1rem .35rem;
  border-radius: .5rem;
}

.note{
  display: inline-block;
  padding: .28rem .55rem;
  border: 1px solid hsl(220 8% 35%);   /* light gray border */
  background: hsl(220 10% 12% / .35);  /* subtle dark bg */
  color: hsl(220 10% 90%);
  border-radius: .65rem;
  font-size: .85rem;
  line-height: 1.4;
}
.fancy-link{
  color: hsl(220 10% 90%);
  text-decoration: none;
  position: relative;
  font-weight: 700;
  transition: color .15s ease;
}

.fancy-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.12rem;
  height: 0.12rem;
  background: hsl(180 60% 50%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  border-radius: 999px;
  opacity: .9;
}

.fancy-link:hover{
  color: hsl(220 10% 98%);
}

.fancy-link:hover::after{
  transform: scaleX(1);
}

.sec-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--primary);
}
.sec-icon svg{
  width: 1.25rem;
  height: 1.25rem;
}