:root {
     color-scheme: dark;
     --bg: #07111f;
     --panel: #101b30;
     --panel-strong: #16253d;
     --text: #f5f7ff;
     --muted: #a6b0c5;
     --accent: #64d7ff;
 }

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: Inter, "Segoe UI", Roboto, sans-serif;
     background: linear-gradient(135deg, #07111f, #14233b 70%, #07111f);
     color: var(--text);
     line-height: 1.6;
 }

 .site-header {
     background: rgba(7, 17, 31, 0.95);
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     padding: 16px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     position: sticky;
     top: 0;
     z-index: 10;
 }

 .site-header a {
     color: var(--text);
     text-decoration: none;
 }

 .brand {
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }

 .site-nav {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .site-nav a {
     color: var(--muted);
     padding: 6px 10px;
     border-radius: 999px;
 }

 .site-nav a:hover {
     color: var(--text);
     background: rgba(255, 255, 255, 0.08);
 }

 .layout {
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr);
     gap: 24px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 24px;
 }

 .index-card,
 .content-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 18px;
     padding: 20px;
     box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
 }

 .index-card h2 {
     margin-top: 0;
     font-size: 1.1rem;
 }

 .index-card ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: 8px;
 }

 .index-card a {
     color: var(--accent);
     text-decoration: none;
 }

 .content-card h1 {
     margin-top: 0;
     margin-bottom: 8px;
     font-size: 2rem;
 }

 .lead {
     color: var(--muted);
     margin-top: 0;
     margin-bottom: 24px;
 }

 .entry {
     margin-bottom: 28px;
 }

 .entry h2,
 .entry h3 {
     margin-bottom: 8px;
 }

 .media-grid {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     margin-top: 12px;
 }

 img {
     display: block;
     width: auto;
     max-width: min(100%, 820px);
     height: auto;
     border: 0;
     border-radius: 12px;
     background: #0c1426;
 }

 iframe {
     display: block;
     width: min(100%, 560px);
     max-width: 100%;
     aspect-ratio: 16 / 9;
     height: auto;
     border: 0;
     border-radius: 12px;
     background: #0c1426;
 }

 .note {
     color: var(--muted);
 }

 footer {
     margin-top: 24px;
     color: var(--muted);
     font-size: 0.95rem;
 }

 @media (max-width: 840px) {
     .layout {
         grid-template-columns: 1fr;
     }
 }