:root {
  --bg-start: #0a0a0a; --bg-end: #111111;
  --card: #1c1c1c; --text: #e0e0e0; --muted: #a0a0a0;
  --accent: #1e90ff; --green: #2ed060; --green-hov: #26b353;
  --red: #ff4f4f; --border: #30363d; --shadow: 0 15px 30px rgba(0,0,0,0.6);
}

html[data-theme="light"] {
  --bg-start: #f8f8f8; --bg-end: #ffffff;
  --card: #ffffff; --text: #222222; --muted: #666666;
  --accent: #0969da; --green: #1a7f37; --green-hov: #2b9a47;
  --red: #cf222e; --border: #e0e0e0; --shadow: 0 10px 20px rgba(0,0,0,0.1);
}

*,*::before,*::after{transition:all .4s ease}
body{background:linear-gradient(135deg,var(--bg-start),var(--bg-end));color:var(--text);margin:0;min-height:100vh;font-family:"Segoe UI",system-ui,sans-serif;line-height:1.6}
.container{max-width:900px;margin:0 auto;padding:40px 20px}

.navbar { text-align: center; margin-bottom: 20px; }
.navbar ul { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.navbar li { margin: 0 15px; }
.navbar a { color: var(--accent); text-decoration: none; font-weight: bold; }
.navbar a:hover { text-decoration: underline; }

header{text-align:center;margin-bottom:60px}
.logo{max-width:260px;border-radius:50%;border:6px solid var(--accent);box-shadow:var(--shadow);margin-bottom:24px;transition:all .3s}
.logo:hover{box-shadow:var(--shadow),0 0 20px var(--accent);transform:scale(1.05)}

.main-title{
  font-family:"DynaPuff",system-ui,sans-serif;
  font-size:6.5rem;font-weight:700;
  margin:16px 0 8px;line-height:1;
  color:white;
  text-shadow:0 6px 16px rgba(0,0,0,.6);
  letter-spacing:-2px;
  transition:color .4s ease;
}
html[data-theme="light"] .main-title{color:#131943;text-shadow:0 4px 12px rgba(19,25,67,.2)}

.tagline{font-size:1.35rem;color:var(--muted);font-style:italic;margin-top:10px}

/* Install Instructions */
.install-instructions{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px;margin:60px 0;box-shadow:var(--shadow);text-align:center}
.install-instructions h2{font-size:2.4rem;color:var(--accent);margin:0 0 32px}
.install-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:32px}
.install-card{background:rgba(255,255,255,0.05);border-radius:16px;padding:20px;border:1px solid var(--border)}
.install-icon{width:48px;height:48px;object-fit:contain;margin-bottom:12px}
.install-card h3{margin:8px 0;font-size:1.3rem}
.install-card code{background:rgba(0,0,0,0.3);padding:6px 12px;border-radius:8px;font-size:0.95rem;font-family:'Courier New',monospace;word-break:break-word;display:inline-block;max-width:100%;box-sizing:border-box}
.install-note{font-size:1.1rem;color:var(--muted);font-style:italic;line-height:1.7}

/* Downloads & Features */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px;padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center;transition:all .3s;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.os-icon{width:60px;height:60px;object-fit:contain;margin-bottom:10px}
.os-icon-linux{filter:none}
html[data-theme="light"] .os-icon-linux{filter:invert(1) brightness(1.1)}
.source-icon-circle{border-radius:50%;width:80px;height:80px;border:3px solid var(--accent);margin-top:-10px;margin-bottom:5px}
.card h3{margin:5px 0 5px;color:var(--text)}
.card .size{color:var(--muted);font-size:.9rem;margin-bottom:15px}
.note{color:var(--red);font-size:.85rem;margin-top:10px;font-style:italic}
.dl-btn{display:block;background:var(--green);color:white;padding:10px 0;border-radius:8px;text-decoration:none;font-weight:bold;transition:all .2s}
.dl-btn:hover{background:var(--green-hov);transform:translateY(-1px)}
.dl-source{background:var(--accent)}
.dl-source:hover{background:#1c88e8}
.mt-2{margin-top:8px}

.section-title{font-family:"DynaPuff",system-ui,sans-serif;font-size:2rem;color:var(--accent);text-align:center;margin:80px 0 30px}
.features{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding-bottom:60px}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:25px;transition:all .3s;box-shadow:0 4px 10px rgba(0,0,0,.2);position:relative;overflow:hidden}
.feature-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--shadow)}
.feature-card h4{margin:0 0 8px;color:var(--text);font-size:1.25rem}
.feature-card p{color:var(--muted);font-size:.95rem;margin:0}
.feature-card.done::before{content:"Done";position:absolute;top:8px;right:-38px;background:var(--green);color:white;padding:4px 40px;transform:rotate(45deg);font-size:.75rem;font-weight:bold;box-shadow:0 2px 5px rgba(0,0,0,.3)}
html[data-theme="light"] .feature-card.done::before{background:#1a7f37}
.feature-card.wip .status-tag{display:inline-block;background:var(--red);color:white;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:bold;margin-top:10px}
html[data-theme="light"] .feature-card.wip .status-tag{background:#cf222e}

/* Timeline Styles */
.timeline { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; margin: 60px 0; box-shadow: var(--shadow); }
.timeline ul { list-style: none; padding: 0; }
.timeline li { margin-bottom: 20px; padding-left: 20px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }
.timeline li .date { font-weight: bold; color: var(--accent); }
.timeline li .message { display: block; color: var(--text); }
.timeline li .author { font-size: 0.85rem; color: var(--muted); }

.documentation { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; margin: 60px 0; box-shadow: var(--shadow); text-align: center; }

footer{text-align:center;margin-top:80px;padding:20px 0;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem}
.wave{font-size:2rem;animation:wave 2s infinite}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-20deg)}}

#theme-toggle{position:fixed;top:20px;right:20px;background:var(--card);border:2px solid var(--border);border-radius:50%;width:56px;height:56px;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:all .3s}
#theme-toggle:hover{transform:scale(1.05);border-color:var(--accent)}
#theme-toggle img{transition:all .4s}
html[data-theme="light"] #theme-toggle img{width:30px;height:30px}

@media (max-width: 768px) {
  .container { padding: 20px; }
  .main-title { font-size: 4rem; }
  .install-grid, .downloads, .features { grid-template-columns: 1fr; }
  .navbar ul { flex-direction: column; }
  .navbar li { margin: 10px 0; }
}

/* NEW STYLES FOR MEDIA & DOCUMENTATION */

.media-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  margin: 60px 0;
  box-shadow: var(--shadow);
  text-align: center;
}

.video-container {
  max-width: 800px; /* Adjust to fit the video aspect ratio well */
  margin: 0 auto 20px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.responsive-video {
  width: 100%;
  height: auto;
  display: block;
}

.video-caption {
  font-size: 1rem;
  color: var(--muted);
  font-style: italic;
}

.diagram-figure {
  margin: 20px auto 40px; /* Add margin around the figure */
  max-width: 100%;
}

.responsive-diagram {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

.diagram-figure figcaption {
  margin-top: 10px;
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Updated documentation section to accommodate the diagram */
.documentation {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  margin: 60px 0;
  box-shadow: var(--shadow);
  /* Removed 'text-align: center;' to let the diagram figure handle centering */
}

.documentation p {
  text-align: center;
}