From 383a967cc82c9b14a67d731d4d138af319f77d3a Mon Sep 17 00:00:00 2001
From: KeshavAnandCode <keshavanandofficial@gmail.com>
Date: Tue, 4 Nov 2025 16:20:09 -0600
Subject: [PATCH] simplified website

---
 .DS_Store  |  Bin 6148 -> 6148 bytes
 index.html | 1385 +++++++++++++++++-----------------------------------
 2 files changed, 461 insertions(+), 924 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 2ef040cb0c8a6cd2b9755f520b74e3a37fb42be1..bd2bf69a25e7c0afdb4d1b3a0e613d2d23c01c9f 100644
GIT binary patch
delta 74
zcmZoMXfc=|#>CJ*u~2NHo+3XB0|Nsi1A_nqLuN{Ga?a!ljJk|0o0S=#uua~;IDIoa
e2R{c;@#ck$-<c=#ix@I8Ot#^X-W(&cf*Am@uM-jg

delta 94
zcmZoMXfc=|#>B`mu~2NHo+39Z0|Nsi1A_nqL(0S`!^r}S4H6(BR)!>oQie>19EOyX
t;^ds9{QMk-jXh7;HnVf^a{zU3W@P-%Jegm_kOQchp#g|Ddx-2|1^};*6jJ~I

diff --git a/index.html b/index.html
index 88564da..811bbe6 100644
--- a/index.html
+++ b/index.html
@@ -1,981 +1,518 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Keshav Anand | Terminal Portfolio (Enhanced)</title>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>OS Terminal Command — Hacker Green</title>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+
+
 <style>
-html, body {
+ /* --- General Reset & Base --- */
+* {
+  box-sizing: border-box;
   margin: 0;
-  height: 100%;
-  font-family: "JetBrains Mono", monospace;
-  background: #000;
-  color: #00ffcc;
-  overflow: hidden;
-  transition: background 0.3s;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-:root {
-  --accent: #00ffcc;
-  --muted: rgba(0,255,200,0.12);
-  --panel-bg: rgba(0,15,20,0.65);
-  --panel-border: rgba(0,255,200,0.18);
-  --copy-hint-bg: rgba(0,0,0,0.7);
-  --cursor-glow: rgba(0,255,170,0.32);
-  --cursor-glow-strong: rgba(0,255,170,0.48);
+  padding: 0;
 }
 
-/* Canvas Matrix Background */
-canvas#matrix {
-  position: fixed;
-  top: 0; left: 0;
+html, body {
+  height: 100%;
   width: 100%;
-  height: 100%;
-  z-index: 0;
-  background: radial-gradient(ellipse at center, #000814 0%, #000 100%);
-  transition: background 0.5s ease;
-  mix-blend-mode: overlay;
+  font-family: 'JetBrains Mono', monospace;
+  background-color: #1e1e2e; /* Catppuccin Mocha */
+  color: #b5f59b;
+  display: flex;
+  justify-content: center;
+  padding: 12px;
 }
 
-/* Ambient Glow Animation */
-.ambient-glow {
-  position: fixed;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background: radial-gradient(circle at 60% 40%, rgba(0,150,255,0.08), transparent 70%);
-  animation: ambientShift 6s infinite alternate ease-in-out;
-  z-index: 0;
-  pointer-events: none;
-  transition: opacity 0.5s;
-}
-@keyframes ambientShift {
-  from { background: radial-gradient(circle at 60% 40%, rgba(0,150,255,0.08), transparent 70%); }
-  to   { background: radial-gradient(circle at 40% 60%, rgba(0,255,200,0.06), transparent 70%); }
-}
-
-/* Spotlight overlay */
-.spotlight {
-  position: fixed;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background: radial-gradient(circle at center, rgba(0,150,255,0.06), transparent 60%);
-  mix-blend-mode: screen;
-  pointer-events: none;
-  z-index: 1;
-  transition: background-position 0.06s linear, opacity 0.12s;
-}
-
-/* Cursor Glow */
-#cursorGlow {
-  position: fixed;
-  width: 26vmin;
-  height: 26vmin;
-  pointer-events: none;
-  z-index: 1;
-  transform: translate(-50%, -50%) scale(1);
-  transition: width 0.12s ease, height 0.12s ease, opacity 0.12s ease;
-  opacity: 1;
-  border-radius: 50%;
-  mix-blend-mode: normal;
-  background: transparent;
-  filter: none;
-  will-change: transform, left, top;
-}
-
-/* Dark overlay */
-#darkenOverlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.0);
-  z-index: 0.5;
-  pointer-events: none;
-  transition: background 200ms ease;
-}
-
-/* Body hover bg */
-body.hover-bg { background: #010d0a; }
-
-/* Terminal container */
-.terminal-container {
-  position: absolute;
-  top: 50%; left: 50%;
-  transform: translate(-50%, -50%) scale(0.85);
-  z-index: 2;
+.page {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  text-align: left;
-  backdrop-filter: blur(10px) brightness(0.8);
-  background: var(--panel-bg);
-  border: 1px solid var(--panel-border);
-  border-radius: 18px;
-  box-shadow: 0 0 25px rgba(0,255,200,0.12), inset 0 0 30px rgba(0,255,200,0.03);
-  padding: 2rem 3.5rem;
-  max-width: 98%;
+  width: 100%;
+  max-width: 1200px;
+  gap: 14px;
+  padding-bottom: 24px;
+}
+
+
+/* --- Terminal Box --- */
+.terminal-wrapper {
+  background-color: #0b0f0b;
+  border: 2px solid #a6e3a1; /* soft green border */
+  border-radius: 12px;
+  padding: 16px;
   overflow-x: auto;
-  white-space: nowrap;
-  transition: transform 0.8s cubic-bezier(0.68,-0.55,0.27,1.55);
-  min-width: 300px;
-}
-.terminal-container:focus { outline: none; }
-.terminal-container.active {
-  transform: translate(-50%, -50%) scale(1);
-  animation: glowPulse 1800ms ease-in-out infinite alternate;
-}
-@keyframes glowPulse {
-  0% { box-shadow: 0 0 25px rgba(0,255,200,0.12); }
-  50% { box-shadow: 0 0 55px rgba(0,255,200,0.26); }
-  100% { box-shadow: 0 0 70px rgba(0,255,200,0.34); }
+  max-width: 100%;
+  font-size: 1rem;
+  box-shadow: 0 0 12px rgba(166,227,161,0.3);
 }
 
-/* Command line boxes */
-.command-line {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.8rem;
-  font-size: 1.25rem;
-  color: var(--accent);
-  text-shadow: 0 0 8px var(--accent);
-  user-select: none;
-  line-height: 1.5;
-  background: rgba(0, 0, 0, 0.4);
-  padding: 0.8rem 1rem;
-  border-radius: 8px;
-  border: 1px solid rgba(0,255,200,0.12);
-  box-shadow: inset 0 0 15px rgba(0,255,200,0.03);
-  white-space: nowrap;
-  position: relative;
-  cursor: default;
-  transition: transform 0.18s, background 0.28s, box-shadow 0.18s;
-  min-width: 240px;
-  max-width: calc(100vw - 32px);
-}
-.command-line:focus { outline: none; box-shadow: 0 0 20px rgba(0,255,200,0.06); }
-.command-line:hover { transform: translateY(-2px); }
-.command-label, .os-label {
-  font-weight: 600;
-  color: #eee;
-  margin-right: 8px;
-  min-width: 90px;
-  text-align: right;
-  user-select: none;
-}
-.command-line.main-box {
-  cursor: default;
-  position: relative;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 12px;
+pre.shell {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-/* Command text */
-.cmd-text {
-  display: inline-block;
-  font-family: "JetBrains Mono", monospace;
-  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
-  color: var(--accent);
-  white-space: pre;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 64px);
-}
-@media (max-width: 700px) {
-  .command-line { white-space: normal; flex-wrap: wrap; gap: 6px; font-size: 1rem; }
-  .cmd-text { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
-}
-@media (max-width: 500px) {
-  .terminal-container { padding: 1rem 1rem; min-width: 90%; transform: translate(-50%, -50%) scale(0.92); }
-  .command-line { font-size: 0.95rem; }
-  #cursorGlow { width: 36vmin; height: 36vmin; }
-}
-@media (max-width: 380px) {
-  .command-line { font-size: 0.9rem; padding: 0.5rem 0.6rem; gap: 4px; }
-  .cmd-text { font-size: 0.85rem; }
-}
-
-/* Copy button */
-.cmd-copy-btn {
-  margin-left: 12px;
-  background: transparent;
-  border: none;
-  color: var(--accent);
-  cursor: pointer;
-  font-size: 1.05rem;
-  padding: 6px 8px;
-  border-radius: 8px;
-  transition: transform 120ms ease, color 140ms ease, background 140ms ease;
-  display: inline-grid;
-  place-items: center;
-}
-.cmd-copy-btn:focus { outline: 2px solid rgba(0,255,200,0.14); transform: translateY(-1px); }
-.cmd-copy-btn:active { transform: scale(.98); }
-.cmd-copy-btn .fa-solid { pointer-events: none; }
-.cmd-copy-btn.success { color: #39ff14; }
-.cmd-copy-btn.fail { color: #ff7777; }
-
-.has-copy-hint { position: relative; }
-.has-copy-hint::after {
-  content: attr(data-copy-hint);
-  position: absolute;
-  top: -1.85rem;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.72rem;
-  color: #fff;
-  background: var(--copy-hint-bg);
-  padding: 3px 8px;
-  border-radius: 6px;
-  pointer-events: none;
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.15s ease, transform 0.12s ease;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
-  z-index: 6;
+pre.shell code {
   display: block;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #b5f59b;
 }
-.has-copy-hint:hover::after,
-.has-copy-hint:focus::after,
-.has-copy-hint:active::after { opacity: 1; transform: translateX(-50%) translateY(-2px); }
-.command-line.main-box.has-copy-hint::after { display: none; }
-.has-copy-hint.show-hint::after,
-.command-line.main-box.has-copy-hint.show-hint::after { display: block; opacity: 1; transform: translateX(-50%) translateY(-2px); }
 
-/* Other OS toggle */
-.other-os-toggle {
-  display: inline-flex; align-items: center; gap: 8px;
-  padding: 0.5rem 0.8rem; margin-top: 0.6rem;
-  cursor: pointer; user-select: none;
-  border-radius: 8px; border: 1px solid rgba(0,255,200,0.08);
-  background: rgba(0,0,0,0.25); color: #39a0ff; font-weight: 600;
-  transition: transform 0.16s ease, background 0.18s;
+.prompt {
+  color: #a6e3a1;
+  margin-right: 6px;
 }
-.other-os-toggle:hover { transform: translateY(-3px); background: rgba(0,255,200,0.03); }
 
-.other-os-container {
-  display: flex; flex-direction: column; gap: 0.6rem;
-  margin-top: 1rem; max-height: 0; overflow: hidden;
-  transition: max-height 0.6s cubic-bezier(.2,.9,.2,1), opacity 0.5s;
-  opacity: 0; width: 100%; z-index: 3;
+.controls {
+  display: flex;
+  flex-wrap: wrap;      /* allow wrapping on small screens */
+  gap: 10px;
+  align-items: flex-end; /* align bottom of elements */
+  width: 100%;
+  justify-content: flex-start; /* avoid pushing button offscreen */
 }
-.other-os-container.show { max-height: 800px; opacity: 1; padding-top: 0.8rem; }
-.other-os-wrapper { display: flex; align-items: center; gap: 10px; }
-.other-os {
-  background: rgba(0,0,0,0.25); border: 1px solid rgba(0,255,200,0.12);
-  border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.85rem;
-  cursor: default; position: relative; transition: background 0.14s, transform 0.14s, box-shadow 0.14s;
-  flex: 1; text-align: left; overflow-x: auto; white-space: pre;
-  display: flex; align-items: center; gap: 10px;
-}
-.other-os:hover { background: rgba(0,255,200,0.08); transform: none; box-shadow: 0 0 14px rgba(0,255,200,0.08); }
-.other-os::after {
-  content: attr(data-copy-hint); position: absolute; top: -1.2rem; left: 50%;
-  transform: translateX(-50%); font-size: 0.72rem; color: #fff;
-  background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 4px;
-  pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.12s;
-}
-.other-os:hover::after { opacity: 1; }
-.other-os.copied { animation: copiedPulse 420ms ease forwards; background: rgba(0,255,200,0.14) !important; box-shadow: 0 10px 34px rgba(0,255,170,0.06) !important; transform: none !important; }
-.other-os.copy-fail { animation: copyFailPulse 420ms ease forwards; background: rgba(255,80,80,0.12) !important; box-shadow: 0 10px 34px rgba(255,90,90,0.06) !important; transform: scale(0.995) !important; }
-@keyframes copiedPulse { 0% { opacity: 0.98; } 40% { opacity: 1; } 100% { opacity: 1; } }
-@keyframes copyFailPulse { 0% { transform: scale(1); opacity: 0.98; } 40% { transform: scale(0.995); opacity: 1; } 100% { transform: scale(0.995); opacity: 1; } }
 
-/* Dropdowns */
-.dropdown {
-  position: absolute; bottom: 5%; width: 100%; text-align: center;
-  z-index: 2; background: rgba(0,0,0,0.65); border-top: 1px solid rgba(0,255,200,0.1);
-  box-shadow: inset 0 0 20px rgba(0,255,200,0.05);
-  padding-bottom: 0.5rem; opacity: 0; transform: scale(0.8);
-  transition: transform 0.4s ease, opacity 0.4s ease;
+.left-controls {
+  display: flex;
+  flex-direction: column; 
+  flex: 1 1 60%;       /* allow it to shrink */
+  min-width: 120px;    /* small enough for narrow devices */
 }
-.dropdown.show { opacity: 1; transform: scale(1); animation: bangPop 0.6s ease-out forwards; }
-@keyframes bangPop { 0% { transform: scale(0.3) rotate(-15deg); opacity:0; } 50% { transform: scale(1.2) rotate(10deg); opacity:1; } 70% { transform: scale(0.95) rotate(-5deg); } 100% { transform: scale(1) rotate(0deg); } }
-.dropdown-toggle { display: inline-block; cursor: pointer; padding: 0.8rem; color: #39a0ff; font-weight: 600; font-family: "JetBrains Mono", monospace; font-size: 1.2rem; letter-spacing: 1px; position: relative; overflow: hidden; white-space: nowrap; }
-.dropdown-content { display: none; padding: 1rem 2rem; color: var(--accent); font-size: 0.95rem; max-width: 800px; margin: 0 auto; text-align: left; font-family: "JetBrains Mono", monospace; background: rgba(0,15,20,0.85); border: 1px solid rgba(0,255,200,0.12); border-radius: 10px; box-shadow: 0 0 25px rgba(0,255,200,0.15); }
-.dropdown.open .dropdown-content { display: block; animation: fadeIn 0.3s ease; }
-@keyframes fadeIn { from {opacity: 0; transform: translateY(6px); } to {opacity: 1; transform: translateY(0); } }
 
-/* HOW IT WORKS section */
-.how-section { display: block; padding: 0.6rem 0.6rem; color: var(--accent); }
-.how-intro { margin-bottom: 0.6rem; font-size: 0.95rem; line-height: 1.45; color: rgba(255,255,255,0.92); }
-.how-list { counter-reset: step; list-style: none; padding: 0; margin: 0; }
-.how-list li {
-  position: relative; padding: 0.85rem 0.8rem 0.85rem 3.8rem; margin-bottom: 0.5rem; border-radius: 8px;
-  background: linear-gradient(90deg, rgba(0,255,200,0.03), rgba(0,0,0,0.02));
-  border-left: 2px solid rgba(0,255,200,0.06);
-  overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.995);
-  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.25);
+.right-controls {
+  flex: 0 1 auto;      /* shrink if needed */
+  display: flex;
+  justify-content: flex-start; /* aligns button nicely next to select or below if wrapped */
+  margin-top: 4px;     /* gives small spacing if wrapped */
 }
-.how-list li::before {
-  counter-increment: step;
-  content: counter(step);
-  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
-  width: 36px; height: 36px; border-radius: 8px; display: inline-grid; place-items: center;
-  font-weight: 700; color: #001;
-  background: linear-gradient(135deg,#00ffcc,#39a0ff);
-  box-shadow: 0 4px 18px rgba(0,255,170,0.06); font-size: 0.95rem;
-}
-.how-list li h4 { margin: 0 0 0.25rem 0; font-size: 0.95rem; color: #e8fff7; letter-spacing: 0.2px; }
-.how-list li p { margin: 0; color: rgba(220,255,244,0.92); font-size: 0.86rem; line-height: 1.35; }
-.how-list li.revealed { animation: listReveal 420ms cubic-bezier(.2,.9,.2,1) forwards; }
-@keyframes listReveal { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } }
 
-/* Repo Button */
-.repo-wrap { margin-top: 0.9rem; display: flex; justify-content: center; }
-.repo-btn {
-  --g: linear-gradient(90deg,#00ffcc,#39a0ff);
-  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
-  border: 1px solid rgba(0,255,200,0.12); color: #e9fff9; padding: 0.6rem 1rem; border-radius: 8px;
-  font-weight: 700; text-decoration: none; font-family: "JetBrains Mono", monospace;
-  display: inline-flex; gap: 0.6rem; align-items: center; transition: transform 220ms ease, box-shadow 220ms ease;
-  box-shadow: 0 6px 30px rgba(0,255,170,0.04); position: relative; overflow: hidden;
-}
-.repo-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,255,170,0.04), rgba(57,160,255,0.04)); transform: translateX(-100%); transition: transform 420ms ease; pointer-events: none; }
-.repo-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 60px rgba(0,255,170,0.06); }
-.repo-btn:hover::after { transform: translateX(0); }
-.repo-icon { width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 0.9rem; color: var(--accent); }
-
-/* Cursor blinking */
-.cursor { display: inline-block; width: 6px; height: 18px; background: var(--accent); margin-left: 4px; animation: blink 1s infinite; vertical-align: bottom; border-radius: 2px; }
-@keyframes blink { 0%,50% { opacity: 1; transform: scaleY(1); } 50.1%,100% { opacity: 0; transform: scaleY(0.6); } }
-
-/* Warning text */
-.warning { font-size: 0.85rem; color: #ff4444; margin-top: 0.8rem; opacity: 0.95; animation: neonGlow 2s infinite alternate; }
-@keyframes neonGlow { 0% { text-shadow: 0 0 5px #ff4444,0 0 10px #ff4444; } 50% { text-shadow:0 0 10px #ff7777,0 0 20px #ff7777; } 100% { text-shadow:0 0 5px #ff4444,0 0 10px #ff4444; } }
-
-/* Fade out */
-.fade-out { animation: fadeOutScale 400ms ease forwards; }
-@keyframes fadeOutScale { from { opacity:1; transform: scale(1); } to { opacity:0; transform: scale(0.95); } }
-
-/* Media Queries for responsive scaling */
-@media (max-width: 980px) {
-  .terminal-container { padding: 1.8rem 1.6rem; min-width: unset; max-width: 94vw; transform-origin: center; }
-  .command-line { font-size: 1.05rem; min-width: unset; max-width: calc(100vw - 32px); white-space: normal; }
-  #cursorGlow { width: 48vmin; height: 48vmin; }
-}
-@media (max-width: 900px) {
-  .terminal-container { padding: 1.2rem 1.4rem; white-space: normal; transform: translate(-50%,-50%) scale(0.95); }
-  .command-line { font-size: 1rem; flex-wrap: wrap; gap: 6px; }
-  .other-os-container { justify-content: flex-start; }
-}
-@media (max-width: 500px) {
-  .terminal-container { padding: 1rem 1rem; min-width: 90%; transform: translate(-50%, -50%) scale(0.92); }
-  .command-line { font-size: 0.95rem; }
-  #cursorGlow { width: 36vmin; height: 36vmin; }
-}
+/* Small devices: stack copy button below select to avoid horizontal scroll */
 @media (max-width: 480px) {
-  .command-line { font-size: 0.9rem; padding: 0.5rem 0.6rem; gap: 4px; }
-  .cmd-text { font-size: 0.85rem; }
+  .controls {
+    flex-direction: column;   /* stack elements vertically */
+    align-items: stretch;     /* full width for both */
+    gap: 6px;
+  }
+  .right-controls {
+    justify-content: center;  /* center button below select */
+    margin-top: 4px;
+  }
+  .left-controls {
+    flex: 1 1 100%;           /* take full width */
+  }
 }
+
+.left-controls label.select-label {
+  margin-bottom: 4px; /* small margin so button is closer to select */
+}
+
+label.select-label {
+  display: block;
+  color: #a6e3a1;
+  margin-bottom: 4px;
+  font-size: 0.95rem;
+}
+
+select {
+  width: 100%;
+  max-width: 100%;
+  padding: 8px;
+  border-radius: 8px;
+  background: #2a2a38;
+  color: #b5f59b;
+  border: 1px solid rgba(166,227,161,0.3);
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: border 0.2s ease-in-out;
+}
+
+select:hover, select:focus {
+  border-color: #b5f59b;
+  outline: none;
+}
+
+.copy-btn {
+  background: #2a2a38;
+  color: #b5f59b;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(166,227,161,0.4);
+  cursor: pointer;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.95rem;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 0 6px rgba(166,227,161,0.2);
+}
+
+.copy-btn:hover {
+  background: #3c3c50;
+  transform: translateY(-1px);
+  box-shadow: 0 0 12px rgba(166,227,161,0.35);
+}
+
+/* --- Instructions --- */
+.instructions {
+  background: #2a2a38;
+  border: 2px solid rgba(166,227,161,0.3);
+  border-radius: 10px;
+  padding: 14px;
+  color: #b5f59b;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  text-align: left;
+  box-shadow: 0 0 8px rgba(166,227,161,0.15);
+}
+
+.instructions strong {
+  color: #a6e3a1;
+}
+
+/* --- Run at Your Own Risk --- */
+.warning {
+  margin-top: 8px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 0.95rem;
+  color: #ff4c4c;
+  text-shadow: 0 0 6px #ff4c4c;
+  animation: flash 2s infinite;
+}
+
+@keyframes flash {
+  0%, 60%, 100% { opacity: 1; }
+  30%, 90% { opacity: 0.5; }
+}
+
+/* --- How it works section (Catppuccin Mocha vibes) --- */
+.how-toggle button {
+  text-align: left;
+  background: #2a2a38;
+  color: #a6e3a1;
+  border: 1px solid rgba(166,227,161,0.3);
+  padding: 12px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1rem;
+  transition: all 0.25s ease-in-out;
+  box-shadow: 0 0 6px rgba(166,227,161,0.2);
+}
+
+.how-toggle button:hover {
+  background: #3c3c50;
+  box-shadow: 0 0 12px rgba(166,227,161,0.35);
+}
+
+.how-content {
+  display: none;
+  background: #1e1e2e;
+  color: #b5f59b;
+  padding: 18px;
+  border-radius: 10px;
+  border: 1px solid rgba(166,227,161,0.2);
+  box-shadow: 0 0 8px rgba(166,227,161,0.15);
+  max-height: 60vh;
+  overflow-y: auto;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+}
+
+.how-content div {
+  background: #2a2a38;
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: 0 0 10px rgba(166,227,161,0.15);
+  line-height: 1.6;
+}
+
+.how-content ol, .how-content ul {
+  margin-left: 20px;
+  margin-bottom: 8px;
+}
+
+.how-content a {
+  display:inline-block;
+  text-decoration:none;
+  padding:6px 12px;
+  border-radius:6px;
+  background:#a6e3a1;
+  color:#1e1e2e;
+  font-weight:bold;
+  font-family:'JetBrains Mono';
+  transition: all 0.2s ease-in-out;
+}
+
+.how-content a:hover {
+  background:#8bdc91;
+}
+
+/* --- Small Devices --- */
+@media (max-width: 768px) {
+  pre.shell code { font-size: 0.95rem; }
+  select, .copy-btn, .instructions, .how-toggle button { font-size: 0.9rem; padding: 8px 12px; }
+  .terminal-wrapper { padding: 12px; }
+  .how-content { font-size: 0.9rem; padding: 14px; }
+  .how-content div { padding: 14px; }
+}
+
+
+@media (max-width: 620px) {
+  #copyBtn {
+    display: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+
+    /* Remove ALL possible horizontal overflow sources */
+  .controls,
+  .left-controls,
+  .right-controls,
+  .terminal-wrapper,
+  select {
+    max-width: 100% !important;
+    overflow-x: hidden !important;
+  }
+
+  /* Remove leftover flex spacing from button zone */
+  .right-controls {
+    flex: 0 0 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Remove the invisible width reservation for the old button */
+  .controls {
+    justify-content: center !important;
+  }
+
+  /* Ensure dropdown never triggers overflow */
+  select {
+    width: 100% !important;
+  }
+
+  /* Terminal text & spacing */
+  pre.shell code { 
+    font-size: 0.85rem; 
+    line-height: 1.4; 
+  }
+
+  select, 
+  .copy-btn, 
+  .instructions, 
+  .how-toggle button { 
+    font-size: 0.85rem; 
+    padding: 6px 10px; 
+  }
+
+  .terminal-wrapper { 
+    padding: 10px; 
+  }
+
+  /* ✅ FORCE vertical stacking */
+  .controls { 
+    flex-direction: column; 
+    gap: 6px; 
+    width: 100%;
+  }
+
+  /* ✅ SELECT full width */
+  .left-controls { 
+    width: 100%; 
+    justify-content: center; 
+    flex: 1 1 100%;
+    min-width: 0;               /* override your 120px minimum */
+  }
+
+  /* ✅ COPY BUTTON always on its own line and centered */
+  .right-controls { 
+    width: 100%;
+    justify-content: center;
+    flex: 1 1 100%;
+    margin-top: 0;
+  }
+
+  /* ✅ Never cause overflow — always fit in viewport */
+  .copy-btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  /* Instructions */
+  .instructions { 
+    font-size: 0.85rem; 
+    padding: 12px; 
+  }
+
+  /* How it works */
+  .how-content { 
+    font-size: 0.85rem; 
+    padding: 12px; 
+    max-height: 50vh; 
+  }
+
+  .how-content div { 
+    padding: 12px; 
+  }
+}
+
+
 </style>
 
 </head>
+
 <body>
-  <canvas id="matrix" aria-hidden="true"></canvas>
-  <div class="ambient-glow" aria-hidden="true"></div>
-  <div class="spotlight" id="spotlight" aria-hidden="true"></div>
-  <div id="cursorGlow" aria-hidden="true"></div>
-  <div id="darkenOverlay" aria-hidden="true"></div>
+<div class="page">
 
-  <!-- offscreen aria live for screen reader feedback -->
-  <div id="ariaStatus" aria-live="polite" style="position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;"></div>
-
-  <div class="terminal-container" id="terminal" role="region" aria-label="Terminal portfolio" tabindex="0">
-    <span class="os-label" id="mainOSLabel" aria-hidden="true"></span>
-
-    <!-- IMPORTANT: removed has-copy-hint from main box to remove hover "Click to copy" prompt.
-         Copy button will be added to the right (by JS) for the main command. -->
-    <div class="command-line main-box" id="osCommand">
-      <span class="cursor" aria-hidden="true"></span>
-      <span class="cmd-text">Detecting your OS...</span>
-      <!-- copy button will be appended by JS -->
-    </div>
-
-    <div class="warning" role="alert">⚠ Run at your own risk</div>
-
-    <div style="width:100%; display:flex; justify-content: center;">
-      <div class="other-os-toggle" id="otherOsToggle" role="button" aria-pressed="false" tabindex="0">
-        <i class="fa-solid fa-terminal" style="font-size:0.9rem;"></i>
-        <span id="otherToggleText">▼ Show other OS commands</span>
-      </div>
-    </div>
-
-    <div class="other-os-container" id="otherOSContainer" aria-hidden="true"></div>
+  <div class="terminal-wrapper">
+    <pre class="shell">
+<code id="cmdline"><span class="prompt">$</span> <span class="command">Detecting your OS...</span></code>
+    </pre>
   </div>
 
-  <div class="dropdown" id="dropdown" aria-hidden="false">
-    <div class="dropdown-toggle typing" id="dropdownToggle"><span>▼ How It Works</span></div>
-    <div class="dropdown-content" role="region" aria-label="How it works">
-      <!-- Replaced lorem ipsum with a polished, numbered explanation.
-           This section is intentionally descriptive (no installer preview). -->
-      <div class="how-section">
-
-
-        <ol class="how-list" id="howList">
-          <li>
-            <h4>Executable-driven UI</h4>
-            <p>The portfolio is rendered by a native executable built with C++ and the FTXUI library — the app draws an interactive, rich interface directly inside the terminal window.</p>
-          </li>
-
-          <li>
-            <h4>Cross-platform builds</h4>
-            <p>Prebuilt binaries are provided for macOS, Windows and Linux (x64). Each binary is compiled to use the host shell as the UI surface so the experience feels native.</p>
-          </li>
-
-          <li>
-            <h4>Command-outlined install flow</h4>
-            <p>The visible terminal command on this page only instructs the shell to fetch the project's runtime assets from the repository and run the appropriate executable for the host OS — the installer commands are run by the shell and kept out of this explanation for safety.</p>
-          </li>
-
-          <li>
-            <h4>Repository-first model</h4>
-            <p>All source, build scripts, and assets are available in the repository. If you want to inspect, build, or audit anything, the GitHub link provides the full codebase and release binaries.</p>
-          </li>
-
-          <li>
-            <h4>Safe & auditable</h4>
-            <p>The design keeps installation steps explicit and auditable: you can review the scripts in the repo before running anything locally — useful when you prefer to vet code first.</p>
-          </li>
-        </ol>
-
-        <div class="repo-wrap">
-          <a class="repo-btn" id="repoBtn" href="https://github.com/KeshavAnandCode/Terminal" target="_blank" rel="noopener noreferrer" aria-label="Open source repository">
-            <span class="repo-icon"><i class="fa-brands fa-github"></i></span>
-            <span>View source on GitHub</span>
-          </a>
-        </div>
-      </div>
+  <div class="controls">
+    <div class="left-controls">
+      <label class="select-label" for="osSelect">Choose OS command</label>
+      <select id="osSelect">
+        <option value="">Select OS</option>
+      </select>
+    </div>
+    <div class="right-controls">
+      <button id="copyBtn" class="copy-btn">Copy Command</button>
     </div>
   </div>
 
-  <script>
-    const $ = s => document.querySelector(s);
-    const $$ = s => Array.from(document.querySelectorAll(s));
-    const ariaStatus = document.getElementById('ariaStatus');
+  <!-- Instructions section -->
+  <div class="instructions" id="instructions">
+    <!-- JS injects instructions here -->
+  </div>
 
-    async function safeCopy(text) {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(text);
-          return true;
-        } else {
-          const ta = document.createElement('textarea');
-          ta.value = text;
-          ta.setAttribute('readonly', '');
-          ta.style.position = 'absolute';
-          ta.style.left = '-9999px';
-          document.body.appendChild(ta);
-          ta.select();
-          try {
-            document.execCommand('copy');
-            document.body.removeChild(ta);
-            return true;
-          } catch (err) {
-            document.body.removeChild(ta);
-            return false;
-          }
-        }
-      } catch (err) {
-        console.warn('Copy failed', err);
-        return false;
-      }
-    }
+  <!-- Run at your own risk -->
+  <div class="warning">Run at Your Own Risk</div>
 
-    /* matrix */
-    const canvas = document.getElementById('matrix');
-    const ctx = canvas.getContext('2d');
-    let width  = canvas.width  = window.innerWidth;
-    let height = canvas.height = window.innerHeight;
-    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&";
-    const fontSize = 14;
-    let columns = Math.floor(width / fontSize);
-    const drops = Array.from({length: columns}, () => Math.floor(Math.random() * 40) + 1);
-    function drawMatrixFrame() {
-      ctx.fillStyle = "rgba(0, 0, 0, 0.06)";
-      ctx.fillRect(0, 0, width, height);
-      ctx.fillStyle = "#00ffcc";
-      ctx.font = fontSize + "px JetBrains Mono";
-      for (let i = 0; i < drops.length; i++) {
-        const text = letters.charAt(Math.floor(Math.random() * letters.length));
-        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
-        if (drops[i] * fontSize > height && Math.random() > 0.975) {
-          drops[i] = 0;
-        }
-        drops[i]++;
-      }
-    }
-    const MATRIX_INTERVAL_MS = 40;
-    drawMatrixFrame();
-    const matrixInterval = setInterval(drawMatrixFrame, MATRIX_INTERVAL_MS);
-    window.addEventListener('resize', () => {
-      const oldColumns = columns;
-      width = canvas.width = window.innerWidth;
-      height = canvas.height = window.innerHeight;
-      columns = Math.floor(width / fontSize);
-      if (columns > oldColumns) {
-        for (let i = 0; i < columns - oldColumns; i++) {
-          drops.push(Math.floor(Math.random() * 40) + 1);
-        }
-      } else if (columns < oldColumns) {
-        drops.length = columns;
-      }
-    });
+  <!-- How it works -->
+<!-- How It Works -->
+<div class="how-toggle">
+  <button id="howToggle" aria-expanded="false">Show How It Works ▼</button>
+  <div id="howContent" class="how-content" style="font-family:'JetBrains Mono';">
+    <div style="background:#1e1e2e; border:1px solid #3fe07a; border-radius:8px; padding:14px; box-shadow:0 0 8px rgba(0,255,0,0.2); line-height:1.5;">
 
-    const spotlight = document.getElementById('spotlight');
-    const cursorGlow = document.getElementById('cursorGlow');
-    const darkenOverlay = document.getElementById('darkenOverlay');
+      <ol style="margin-left:32px; color:#b5f59b;">
+        <li>
+          <strong>Terminal Command Execution:</strong>  
+          The command you copy downloads a platform-specific script:
+          <ul style="margin-left:32px;">
+            <li><code>.sh</code> for Mac/Linux</li>
+            <li><code>.bat</code> for Windows</li>
+          </ul>
+          This script is hosted on my GitHub and automatically runs the corresponding binary.
+        </li>
 
-    function throttle(fn, wait = 16) {
-      let last = 0;
-      return (...args) => {
-        const now = performance.now();
-        if (now - last >= wait) {
-          last = now;
-          fn(...args);
-        }
-      };
-    }
+        <li style="margin-top:6px;">
+          <strong>Binary Execution:</strong>  
+          The binary is compiled in <strong>C++ separately for each OS</strong> and controls the standard input/output of your terminal to create a clean, interactive interface.
+        </li>
 
-    // Mousemove: only move the cursorGlow element; do NOT alter background brightness or spotlight.
-    document.addEventListener('mousemove', throttle((e) => {
-      cursorGlow.style.left = e.clientX + 'px';
-      cursorGlow.style.top  = e.clientY + 'px';
-      const speed = Math.sqrt((e.movementX||0)*(e.movementX||0) + (e.movementY||0)*(e.movementY||0));
-      if (speed > 8) {
-        cursorGlow.style.transform = 'translate(-50%, -50%) scale(1.08)';
-        cursorGlow.style.opacity = '1';
-      } else {
-        cursorGlow.style.transform = 'translate(-50%, -50%) scale(1)';
-        cursorGlow.style.opacity = '1';
-      }
-      document.body.classList.add('hover-bg');
-      // IMPORTANT: do NOT change spotlight, darkenOverlay, canvas opacity, or cursor filters here.
-    }, 12));
+        <li style="margin-top:6px;">
+          <strong>FTXUI Integration:</strong>  
+          It leverages the <code>FTXUI</code> library to render a web-like interactive menu directly inside your terminal, making navigation and presentation of my portfolio terminal-friendly but visually elegant.
+        </li>
 
-    document.addEventListener('mouseleave', () => {
-      document.body.classList.remove('hover-bg');
-      cursorGlow.style.opacity = '0';
-      // Do NOT modify darkenOverlay here; keep background unchanged.
-    });
+        <li style="margin-top:6px;">
+          <strong>Cross-Platform Support:</strong>  
+          Each OS has its own binary to ensure consistent behavior on Windows, Mac, and Linux.
+        </li>
+      </ol>
 
-    document.addEventListener('touchstart', (ev) => {
-      const t = ev.touches[0];
-      if (t) {
-        cursorGlow.style.left = t.clientX + 'px';
-        cursorGlow.style.top  = t.clientY + 'px';
-        cursorGlow.style.opacity = '1';
-      }
-    });
+      <p style="margin-top:12px;">
+        <a href="https://github.com/KeshavAnandCode/TerminalPortfolio" target="_blank" style="
+          display:inline-block;
+          text-decoration:none;
+          padding:6px 12px;
+          border-radius:6px;
+          background:#00ff00;
+          color:#0b0f0b;
+          font-weight:bold;
+          font-family:'JetBrains Mono';
+          transition: all 0.2s ease-in-out;
+        " onmouseover="this.style.background='#3fff3f'" onmouseout="this.style.background='#00ff00'">
+          View Source on GitHub
+        </a>
+      </p>
+    </div>
+  </div>
+</div>
+</div>
 
-    function distanceFromCenter(x,y){
-      const cx = window.innerWidth/2;
-      const cy = window.innerHeight/2;
-      const dx = (x - cx) / (window.innerWidth/2);
-      const dy = (y - cy) / (window.innerHeight/2);
-      return Math.sqrt(dx*dx + dy*dy);
-    }
+<script>
+const cmdEl = document.getElementById('cmdline');
+const commandSpan = cmdEl.querySelector('.command');
+const osSelect = document.getElementById('osSelect');
+const copyBtn = document.getElementById('copyBtn');
+const howToggle = document.getElementById('howToggle');
+const howContent = document.getElementById('howContent');
+const instructionsEl = document.getElementById('instructions');
 
-    // Make updateBackgroundDarkness a no-op so cursor movement won't alter background appearance.
-    function updateBackgroundDarkness(x,y){
-      // intentionally empty to preserve continuous background visuals regardless of cursor
-      return;
-    }
+const commands = {
+  Windows: 'iwr https://terminalportfolio.keshavanand.net/run-windows.bat -OutFile $env:TEMP\\run-windows.bat; Start-Process $env:TEMP\\run-windows.bat -Wait',
+  Mac: '/bin/bash -c "$(curl -fsSL https://terminalportfolio.keshavanand.net/run-mac.sh)"',
+  Linux: '/bin/bash -c "$(curl -fsSL https://terminalportfolio.keshavanand.net/run-linux.sh)"'
+};
 
-    const osCommand = document.getElementById('osCommand');
-    const otherOSContainer = document.getElementById('otherOSContainer');
-    const mainOSLabel = document.getElementById('mainOSLabel');
+const platform = (navigator.platform || '').toLowerCase();
+let detectedOS = 'Linux';
+if(platform.includes('win')) detectedOS='Windows';
+else if(platform.includes('mac')) detectedOS='Mac';
 
-    const commands = {
-      Windows: `iwr https://terminalportfolio.keshavanand.net/run-windows.bat -OutFile $env:TEMP\\run-windows.bat; Start-Process $env:TEMP\\run-windows.bat -Wait`,
-      macOS: `/bin/bash -c "$(curl -fsSL https://terminalportfolio.keshavanand.net/run-mac.sh)"`,
-      Linux: `/bin/bash -c "$(curl -fsSL https://terminalportfolio.keshavanand.net/run-linux.sh)"`,
-    };
+// populate dropdown
+Object.keys(commands).forEach(os=>{
+  const option=document.createElement('option');
+  option.value=commands[os];
+  option.textContent=os + (os===detectedOS ? ' (Detected)' : '');
+  osSelect.appendChild(option);
+});
 
-    function detectOS() {
-      const platform = (navigator.platform || '').toLowerCase();
-      if (platform.includes("win")) return "Windows";
-      if (platform.includes("mac")) return "macOS";
-      if (platform.includes("linux")) return "Linux";
-      const ua = (navigator.userAgent || '').toLowerCase();
-      if (ua.includes('android')) return "Linux";
-      if (ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod')) return "macOS";
-      return "Unknown";
-    }
+// set initial command
+osSelect.value=commands[detectedOS];
+commandSpan.textContent=commands[detectedOS];
 
-    const userOS = detectOS();
+// instructions per OS
+const instructions = {
+  Windows: "💻 <strong>Windows:</strong> Copy the command, open PowerShell, and paste.",
+  Mac: "💻 <strong>Mac:</strong> Copy the command, open Terminal, and paste.",
+  Linux: "💻 <strong>Linux:</strong> Copy the command, open your terminal, and paste."
+};
+instructionsEl.innerHTML = instructions[detectedOS];
 
-    /* helper: build a copy button that immediately shows success/fail */
-    function makeCopyButton(commandText, ariaLabel) {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.className = 'cmd-copy-btn';
-      btn.setAttribute('aria-label', ariaLabel || 'Copy command');
-      btn.innerHTML = '<i class="fa-solid fa-copy"></i>';
+// update command when dropdown changes
+osSelect.addEventListener('change', e=>{
+  if(!e.target.value) return;
+  commandSpan.textContent = e.target.value;
+  const selectedOS = osSelect.options[osSelect.selectedIndex].text.split(' ')[0];
+  instructionsEl.innerHTML = instructions[selectedOS] || '';
+});
 
-      btn.addEventListener('click', async (ev) => {
-        ev.stopPropagation();
-        // immediate visual feedback: show check
-        btn.classList.remove('fail');
-        btn.classList.add('success');
-        btn.innerHTML = '<i class="fa-solid fa-check"></i>';
-        try { ariaStatus.textContent = 'Copied to clipboard'; } catch(e){}
+// copy button
+copyBtn.addEventListener('click', async ()=>{
+  const text = commandSpan.textContent || '';
+  try{
+    await navigator.clipboard.writeText(text);
+    copyBtn.textContent='Copied!';
+    setTimeout(()=>copyBtn.textContent='Copy Command',1400);
+  }catch(err){console.error('Copy failed',err);}
+});
 
-        const ok = await safeCopy(commandText);
-        if (!ok) {
-          // swap to fail state
-          btn.classList.remove('success');
-          btn.classList.add('fail');
-          btn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
-          try { ariaStatus.textContent = 'Copy failed'; } catch(e){}
-        }
-        // revert after short delay (keeps immediate feedback but resets)
-        setTimeout(() => {
-          btn.classList.remove('success','fail');
-          btn.innerHTML = '<i class="fa-solid fa-copy"></i>';
-        }, 1200);
-      }, { passive: false });
-
-      btn.addEventListener('keydown', (ev) => {
-        if (ev.key === ' ' || ev.key === 'Enter') {
-          ev.preventDefault();
-          btn.click();
-        }
-      });
-
-      return btn;
-    }
-
-    /* create an other-os box with text + copy button */
-    function createOSBox(os, command, container) {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'other-os-wrapper';
-      const label = document.createElement('div');
-      label.className = 'command-label';
-      label.textContent = os;
-      label.setAttribute('aria-hidden', 'true');
-
-      const box = document.createElement('div');
-      box.className = 'other-os has-copy-hint';
-      box.setAttribute('tabindex', '0');
-
-      const textSpan = document.createElement('span');
-      textSpan.className = 'cmd-text';
-      textSpan.textContent = command;
-
-      const btn = makeCopyButton(command, `Copy ${os} command`);
-      // append text and button inside box
-      box.appendChild(textSpan);
-      box.appendChild(btn);
-
-      // also keep the existing behavior where clicking the whole box copies
-      // — but since we now have an explicit button, preserve both (for mouse & keyboard)
-      box.addEventListener('click', async (ev) => {
-        // if click target was the button, it already handled; else emulate button click
-        if (ev.target.closest('.cmd-copy-btn')) return;
-        try { const sel = window.getSelection && window.getSelection(); if (sel) sel.removeAllRanges(); } catch(e){}
-        // show immediate hint and effect
-        box.classList.remove('copy-fail');
-        box.classList.add('copied');
-        box.setAttribute('data-copy-hint', 'Copied');
-        box.classList.add('show-hint');
-        try { ariaStatus.textContent = 'Copied to clipboard'; } catch(e){}
-        const ok = await safeCopy(command);
-        if (!ok) {
-          box.classList.remove('copied');
-          box.classList.add('copy-fail');
-          box.setAttribute('data-copy-hint', 'Copy failed');
-          try { ariaStatus.textContent = 'Copy failed'; } catch(e){}
-        }
-        setTimeout(()=> {
-          box.classList.remove('copied','copy-fail','show-hint');
-          box.setAttribute('data-copy-hint', prevHint);
-        }, 1200);
-      });
-
-      box.addEventListener('keydown', (ev) => {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-          ev.preventDefault();
-          btn.focus();
-          btn.click();
-        }
-      });
-
-      wrapper.appendChild(label);
-      wrapper.appendChild(box);
-      container.appendChild(wrapper);
-    }
-
-    /* render UI */
-    otherOSContainer.innerHTML = '';
-
-    if (userOS === "Unknown") {
-      mainOSLabel.textContent = "(Unknown)";
-      const mainTextSpan = osCommand.querySelector('.cmd-text');
-      if (mainTextSpan) mainTextSpan.textContent = 'Unknown OS detected. Click ▼ to expand commands.';
-      // add hint for the main area? user wanted the main prompt not to show click-to-copy; so we leave it without a hover hint.
-      for (const os in commands) createOSBox(os, commands[os], otherOSContainer);
-    } else {
-      mainOSLabel.textContent = `(${userOS})`;
-      const mainTextSpan = osCommand.querySelector('.cmd-text');
-      if (mainTextSpan) mainTextSpan.textContent = commands[userOS];
-
-      // create copy button for main command (explicit button only)
-      // remove any preexisting button
-      const existing = osCommand.querySelector('.cmd-copy-btn');
-      if (existing) existing.remove();
-      const mainBtn = makeCopyButton(commands[userOS], `Copy ${userOS} command`);
-      // append to main box
-      osCommand.appendChild(mainBtn);
-
-      // For keyboard users: pressing Enter/Space on the main box should activate the copy button
-      osCommand.setAttribute('tabindex','0');
-      osCommand.addEventListener('keydown', (ev) => {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-          ev.preventDefault();
-          mainBtn.focus();
-          mainBtn.click();
-        }
-      });
-
-      // create other OS boxes for the rest
-      for (const os in commands) {
-        if (os !== userOS) createOSBox(os, commands[os], otherOSContainer);
-      }
-    }
-
-    /* toggle other os list */
-    const otherToggle = document.getElementById('otherOsToggle');
-    const otherToggleText = document.getElementById('otherToggleText');
-
-    function setOtherContainerState(show) {
-      if (show) {
-        otherOSContainer.classList.add('show');
-        otherOSContainer.setAttribute('aria-hidden','false');
-        otherToggle.setAttribute('aria-pressed','true');
-        otherToggleText.textContent = '▲ Hide other OS commands';
-        otherOSContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      } else {
-        otherOSContainer.classList.remove('show');
-        otherOSContainer.setAttribute('aria-hidden','true');
-        otherToggle.setAttribute('aria-pressed','false');
-        otherToggleText.textContent = '▼ Show other OS commands';
-      }
-    }
-
-    let otherVisible = false;
-    setOtherContainerState(false);
-
-    otherToggle.addEventListener('click', () => {
-      otherVisible = !otherVisible;
-      setOtherContainerState(otherVisible);
-    });
-    otherToggle.addEventListener('keydown', (ev) => {
-      if (ev.key === 'Enter' || ev.key === ' ') {
-        ev.preventDefault();
-        otherToggle.click();
-      }
-    });
-
-    /* dropdown / how it works */
-    const dropdown = document.getElementById('dropdown');
-    const toggle = document.getElementById('dropdownToggle');
-    toggle.addEventListener('click', () => {
-      dropdown.classList.toggle('open');
-      if (dropdown.classList.contains('open')) {
-        staggerRevealHowList();
-      } else {
-        clearHowListReveal();
-      }
-    });
-    setTimeout(()=>dropdown.classList.add('show'), 1500);
-    const terminal = document.getElementById('terminal');
-    setTimeout(()=>terminal.classList.add('active'),100);
-
-    (function devSummary(){
-      try {
-        console.groupCollapsed('%cTerminal Portfolio — Debug Summary', 'color: #00ffcc; font-weight:700; background:#001; padding:6px;');
-        console.log('Detected OS:', userOS);
-        console.log('Commands available:', Object.keys(commands));
-        console.log('Matrix interval (ms):', MATRIX_INTERVAL_MS);
-        console.groupEnd();
-      } catch(e) { }
-    })();
-
-    document.addEventListener('keydown', (ev) => {
-      const tag = document.activeElement && document.activeElement.tagName;
-      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
-      if (ev.key.toLowerCase() === 't') {
-        otherToggle.click();
-      }
-      if (ev.key.toLowerCase() === 'h') {
-        toggle.click();
-      }
-    });
-
-    window.addEventListener('beforeunload', () => {
-      try {
-        clearInterval(matrixInterval);
-      } catch (e) { }
-    });
-
-    (function globalCopyTooltip(){
-      let tip = document.createElement('div');
-      tip.style.position = 'fixed';
-      tip.style.padding = '6px 10px';
-      tip.style.background = 'rgba(0,0,0,0.85)';
-      tip.style.color = '#fff';
-      tip.style.fontFamily = '"JetBrains Mono", monospace';
-      tip.style.fontSize = '12px';
-      tip.style.borderRadius = '6px';
-      tip.style.pointerEvents = 'none';
-      tip.style.opacity = '0';
-      tip.style.transform = 'translate(-50%,-140%)';
-      tip.style.transition = 'opacity 120ms ease, transform 120ms ease';
-      tip.style.zIndex = 9999;
-      document.body.appendChild(tip);
-
-      let active = null;
-      function showTipFor(el, evt){
-        tip.textContent = text;
-        const x = evt.clientX || window.innerWidth/2;
-        const y = (evt.clientY || window.innerHeight/2) - 10;
-        tip.style.left = x + 'px';
-        tip.style.top = y + 'px';
-        tip.style.opacity = '1';
-        tip.style.transform = 'translate(-50%,-120%)';
-      }
-      function hideTip(){
-        tip.style.opacity = '0';
-        tip.style.transform = 'translate(-50%,-140%)';
-      }
-
-      document.addEventListener('mousemove', throttle((e)=>{
-        const target = e.target.closest && e.target.closest('.has-copy-hint');
-        if (target) {
-          showTipFor(target, e);
-          active = target;
-        } else {
-          active = null;
-          hideTip();
-        }
-      }, 16));
-
-      document.addEventListener('mouseleave', hideTip);
-      document.addEventListener('scroll', hideTip, true);
-      document.addEventListener('touchstart', (ev)=>{
-        const t = ev.touches[0];
-        if (!t) return;
-        const el = document.elementFromPoint(t.clientX, t.clientY);
-        const target = el && el.closest && el.closest('.has-copy-hint');
-        if (target) showTipFor(target, t);
-      }, {passive:true});
-    })();
-
-    (function ensureOtherOSCopyHints(){
-      const others = document.querySelectorAll('.other-os');
-      others.forEach(el => {
-        if(!el.classList.contains('has-copy-hint')) el.classList.add('has-copy-hint');
-      });
-      const main = document.querySelectorAll('.command-line');
-      main.forEach(el => {
-        // main intentionally does not get a hover copy prompt by default
-        // but ensure if any element needs the class it's present
-        // (do not add has-copy-hint to main)
-      });
-    })();
-
-    (function enhanceHowItWorksTyping(){
-      const toggleEl = document.getElementById('dropdownToggle');
-      const showAfterMs = 1500;
-      function typeText(el, text, speed=60, caret=true){
-        el.textContent = '';
-        let i = 0;
-        if(caret){
-          el.style.borderRight = '2px solid #00ffcc';
-        }
-        const interval = setInterval(()=> {
-          if(i < text.length){
-            el.textContent += text[i++];
-          } else {
-            clearInterval(interval);
-            if(caret) el.style.borderRight = 'none';
-          }
-        }, speed);
-      }
-
-      const origContent = toggleEl.innerHTML;
-      setTimeout(()=>{
-        dropdown.classList.add('show');
-        toggleEl.innerHTML = '';
-        toggleEl.setAttribute('aria-hidden','false');
-        const span = document.createElement('span');
-        span.textContent = '';
-        span.style.display = 'inline-block';
-        span.style.whiteSpace = 'pre';
-        span.style.overflow = 'hidden';
-        span.style.fontFamily = '"JetBrains Mono", monospace';
-        span.style.fontSize = '1.05rem';
-        toggleEl.appendChild(span);
-        setTimeout(()=> {
-          typeText(span, '▼ How It Works', 60, true);
-        }, 260);
-      }, showAfterMs);
-      toggleEl.addEventListener('click', ()=>{
-        const wasOpen = dropdown.classList.contains('open');
-        if(!wasOpen){
-          const span = toggleEl.querySelector('span');
-          if(span) {
-            span.textContent = '';
-            typeText(span, '▼ How It Works', 45, true);
-          }
-        }
-      });
-    })();
-
-    (function startWithBlueAmbient(){
-      const ag = document.querySelector('.ambient-glow');
-      ag.style.background = 'radial-gradient(circle at 60% 40%, rgba(0,150,255,0.08), transparent 70%)';
-      const sp = document.getElementById('spotlight');
-      sp.style.background = 'radial-gradient(circle at center, rgba(0,150,255,0.06), transparent 60%)';
-      const cvs = document.getElementById('matrix');
-      cvs.style.background = 'radial-gradient(ellipse at center, #000814 0%, #000 100%)';
-    })();
-
-    (function strengthenCursorGlowAndDarkenBackground(){
-      const cg = document.getElementById('cursorGlow');
-      // Keep cursor glow element present but transparent so it never alters background.
-      cg.style.background = 'transparent';
-      cg.style.filter = 'none';
-      cg.style.width = '22vmin';
-      cg.style.height = '22vmin';
-      darkenOverlay.style.background = 'rgba(0,0,0,0.0)';
-      canvas.style.transition = 'opacity 240ms linear';
-    })();
-
-    (function preserveEverythingElse(){ })();
-
-    /* ========== How list reveal helpers ========== */
-    function staggerRevealHowList() {
-      const list = document.getElementById('howList');
-      if (!list) return;
-      const items = Array.from(list.children);
-      // Clear any previous state:
-      items.forEach(it => it.classList.remove('revealed'));
-      // Staggered reveal
-      items.forEach((it, idx) => {
-        setTimeout(() => it.classList.add('revealed'), idx * 120 + 80);
-      });
-    }
-    function clearHowListReveal() {
-      const list = document.getElementById('howList');
-      if (!list) return;
-      Array.from(list.children).forEach(it => it.classList.remove('revealed'));
-    }
-
-  </script>
+// toggle How It Works
+howToggle.addEventListener('click', ()=>{
+  const isOpen = howContent.style.display==='block';
+  howContent.style.display = isOpen ? 'none' : 'block';
+  howToggle.textContent = isOpen ? 'Show How It Works ▼' : 'Hide How It Works ▲';
+});
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
