:root{
      --blue:#00b4fa; --sand:#e7d7b6; --bg-dark:#10151b; --card-bg:#192332e6;
      --glow:0 0 24px #00b4fa55,0 2px 32px #00b4fa33;
      --shine-grad:linear-gradient(90deg,#fff 8%,#00b4fa 60%,#23e6ff 98%);
    }

    /* Base */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; padding:0;
      font-family:'Share Tech Mono',monospace;
      background:var(--bg-dark); color:var(--sand);
      min-height:100vh; overflow-x:hidden;
      line-height:1.6;
    }
    a{color:var(--blue); text-decoration:none}
    img{max-width:100%; height:auto; display:block}

    /* Layout */
    .wrap{
      max-width:1100px; margin:0 auto;
      display:flex; gap:48px;
      align-items:flex-start; justify-content:space-between;
      padding:32px 6vw 48px;
    }
    .content{flex:3; min-width:300px}
    .aside{flex:1; position:sticky; top:18px}

    /* Top bar and header */
    .topbar{display:flex; gap:12px; align-items:center; margin:8px 0 18px}
    .back{
      display:inline-flex; gap:8px; align-items:center;
      color:var(--blue); font-weight:bold;
      background:#172432b3; padding:10px 14px; border-radius:12px;
      box-shadow:0 2px 15px #00b4fa33;
    }
    .back:hover{background:#e7d7b6; color:#003a5c; text-decoration:underline}

    .headline{
      font-weight:bold; letter-spacing:1.2px; margin:6px 0 8px;
      background:var(--shine-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      text-shadow:0 2px 18px #22213866, 0 0 8px #00b4fa88; filter:brightness(1.15);
      text-transform:uppercase;
      font-size:clamp(1.35rem, 3.2vw + .6rem, 2.25rem);
    }
    .sub{color:#9ddff7; font-weight:bold; margin:4px 0 18px; font-size:clamp(.9rem, 1vw + .6rem, 1rem)}

    /* Cards */
    .card{
      background:var(--card-bg); border-radius:17px; box-shadow:var(--glow);
      border:1.8px solid #00b4fa55; padding:22px 22px 12px; margin:0 0 18px;
      font-size:clamp(.96rem, .7vw + .8rem, 1.05rem);
      scroll-margin-top:90px;  /* nicer anchor jumping on mobile */
    }
    .card h2{
      margin:0 0 10px; color:#fff; font-size:clamp(1.05rem, .6vw + .9rem, 1.25rem)
    }
    .card ul{padding-left:18px; margin:0}
    .card li{margin:6px 0}

    /* Aside */
    .logo{
      width:clamp(120px, 30vw, 180px); border-radius:24px;
      background:#161922; box-shadow:var(--glow); border:2px solid #00b4fa44;
      margin:0 0 14px;
    }
    .toc{
      background:var(--card-bg); border-radius:17px; box-shadow:var(--glow);
      border:1.8px solid #00b4fa55; padding:16px; margin:0 0 18px;
    }
    .toc h2{margin:0 0 10px; font-size:1rem}
    .toc a{
      display:block; color:#00b4fa; margin:6px 0; padding:10px 12px;
      border-radius:10px; background:#172432b3; box-shadow:0 2px 10px #00b4fa33;
      font-size:clamp(.95rem, .6vw + .7rem, 1rem);
    }
    .toc a:hover{background:#e7d7b6; color:#003a5c; text-decoration:underline}

    .footer-spacer{height:30px}

    /* Responsive improvements */
    @media (max-width:980px){
      .wrap{flex-direction:column-reverse; gap:16px; padding:22px 4vw 32px}
      .aside{position:static; width:100%}
      .topbar{margin-bottom:12px}
      .back{width:100%; justify-content:center; padding:12px 16px; border-radius:14px}
      .card{padding:18px 16px 10px}
      .toc{padding:14px}
    }
    @media (max-width:700px){
      .wrap{padding:18px 4vw 26px}
      .toc a{padding:12px 14px}
    }
    @media (max-width:480px){
      body{line-height:1.65}
      .wrap{padding:16px 3.5vw 24px}
      .card{padding:16px 14px 10px}
      .toc h2{font-size:.95rem}
    }