/* RZ99 / terminal visual system — inspired by the supplied reference */
:root {
  --bg-color: #070b12;
  --text-color: #eaf1fc;
  --muted: #8796ae;
  --accent-cyan: #00d4ff;
  --accent-purple: #a855f7;
  --accent-gold: #00d4ff;
  --surface: #0b1120;
  --card-bg: #0c1321;
  --glass-border: rgba(112, 143, 187, .22);
  --line: rgba(112, 143, 187, .22);
  --page-width: 1180px;
  --terminal-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
html { background:#070b12; }
body { background:radial-gradient(ellipse at 74% 8%,rgba(89,49,153,.14),transparent 38%),#070b12; color:var(--text-color); }
.site-header { background:rgba(7,11,18,.91); border-bottom-color:rgba(0,212,255,.16); box-shadow:0 10px 35px rgba(0,0,0,.18); }
.brand-mark { border-color:rgba(0,212,255,.65); color:var(--accent-cyan); box-shadow:0 0 18px rgba(0,212,255,.12); }
.brand-type small, .availability, .main-nav a { color:#91a2bd; }
.main-nav a::after { background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); }
.toggle-select { background:#0d1422; border-color:#283750; }
.toggle-select:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline-color:var(--accent-cyan); }
#hero { height:auto; min-height:auto; justify-content:flex-start; padding:clamp(38px,5vw,68px) 0 16px; background:radial-gradient(ellipse at 16% 58%,rgba(168,85,247,.1),transparent 36%),radial-gradient(ellipse at 88% 36%,rgba(0,212,255,.08),transparent 36%),#070b12; }
#hero::before { background:linear-gradient(transparent,rgba(0,212,255,.13) 18%,rgba(0,212,255,.13) 82%,transparent); }
.terminal-wrap { position:relative; z-index:1; }
.terminal-window { overflow:hidden; border:1px solid #283750; border-radius:14px; background:#090e18; box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 70px rgba(75,45,130,.09); }
.terminal-bar { min-height:54px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:0 20px; color:#8292ac; background:linear-gradient(180deg,#121a2a,#0e1522); border-bottom:1px solid #243149; font:500 .66rem var(--terminal-mono); letter-spacing:.04em; }
.terminal-controls { display:flex; gap:8px; }
.terminal-controls i { display:block; width:10px; height:10px; border-radius:50%; background:#ff5f57; box-shadow:0 0 8px rgba(255,95,87,.18); }
.terminal-controls i:nth-child(2) { background:#febc2e; box-shadow:0 0 8px rgba(254,188,46,.18); }
.terminal-controls i:nth-child(3) { background:#28c840; box-shadow:0 0 8px rgba(40,200,64,.18); }
.terminal-bar-state { justify-self:end; color:#5fe5b5; font-size:.58rem; }
.terminal-bar-state i, .online-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#35dfa4; box-shadow:0 0 10px rgba(53,223,164,.7); }
.terminal-body { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:clamp(24px,4vw,56px); padding:clamp(24px,4vw,52px); }
.visualizer-panel { display:flex; flex-direction:column; padding:16px 16px 13px; border:1px solid #223149; border-radius:8px; background:radial-gradient(ellipse at 50% 45%,rgba(64,46,116,.14),transparent 58%),#080d17; }
.panel-label, .visualizer-foot { display:flex; justify-content:space-between; align-items:center; color:#71819a; font:500 .56rem var(--terminal-mono); letter-spacing:.09em; }
.panel-label span:last-child { color:#ff657e; }
.particle-stage { position:relative; min-height:310px; flex:1; display:grid; place-items:center; overflow:hidden; }
.profile-avatar-wrap { position:relative; z-index:2; width:clamp(184px,82%,270px); aspect-ratio:1; display:grid; place-items:center; margin:auto; animation:profile-float 4.8s ease-in-out infinite; }
.profile-avatar-wrap::before { content:""; position:absolute; z-index:1; width:86%; height:86%; border:1px solid rgba(168,85,247,.65); border-radius:50%; background:radial-gradient(circle at 42% 38%,rgba(168,85,247,.08),rgba(8,13,23,.22) 68%); box-shadow:0 0 30px rgba(168,85,247,.3),0 0 70px rgba(168,85,247,.18); pointer-events:none; }
.profile-avatar-wrap::after { content:none; }
.profile-avatar-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.profile-portrait { position:absolute; z-index:2; top:-24%; left:-24%; display:block; width:148%; height:148%; max-width:none; border:0; border-radius:50%; background:transparent; box-shadow:none; }
.profile-avatar-wrap:hover::before { box-shadow:0 0 40px rgba(168,85,247,.42),0 0 88px rgba(168,85,247,.24); }
@keyframes profile-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.tech-chip { position:absolute; z-index:3; display:grid; place-items:center; min-width:38px; height:30px; padding:0 7px; border:1px solid rgba(0,212,255,.55); border-radius:5px; background:rgba(8,14,25,.94); color:#a9ecff; font:600 .62rem var(--terminal-mono); letter-spacing:.02em; box-shadow:0 0 15px rgba(0,212,255,.12); }
.profile-avatar-wrap.is-assembled .tech-chip { animation:chip-ready-pulse .86s ease-out 1; }
@keyframes chip-ready-pulse { 0%,100% { box-shadow:0 0 15px rgba(0,212,255,.12); } 38% { box-shadow:0 0 24px rgba(0,212,255,.48); } }
@media (prefers-reduced-motion: reduce) { .profile-avatar-wrap.is-assembled .tech-chip { animation:none; } }
.chip-ts { top:8%; left:8%; color:#80caff; border-color:rgba(49,120,198,.8); }
.chip-js { top:19%; right:0; color:#ffe66e; border-color:rgba(247,223,30,.7); }
.chip-php { bottom:19%; right:2%; color:#c0b5ff; border-color:rgba(119,123,180,.8); }
.chip-py { bottom:7%; left:13%; color:#b7e5a1; border-color:rgba(88,166,92,.8); }
.chip-ai { top:52%; left:0; color:#e0b7ff; border-color:rgba(168,85,247,.8); }
.scan-line { position:absolute; left:0; right:0; height:1px; top:4%; background:linear-gradient(90deg,transparent,rgba(0,212,255,.7),rgba(168,85,247,.35),transparent); box-shadow:0 0 13px rgba(0,212,255,.4); opacity:.5; animation:terminal-scan 5.4s linear infinite; }
@keyframes terminal-scan { from { transform:translateY(0); } to { transform:translateY(280px); } }
.visualizer-foot { padding-top:12px; border-top:1px solid #1d293d; }
.visualizer-foot span:first-child { color:#af78ff; }
.system-panel { align-self:center; min-width:0; padding:2px 0; }
.terminal-prompt { margin:0 0 20px; color:#9baac0; font:500 .72rem var(--terminal-mono); }
.terminal-prompt span { color:var(--accent-purple); }
.terminal-role { min-height:1.5em; margin:0 0 8px; color:var(--accent-cyan); font:500 .7rem var(--terminal-mono); letter-spacing:.015em; }
.terminal-role b { display:inline-block; margin-left:3px; color:var(--accent-purple); animation:cursor-blink 1s steps(2,start) infinite; }
@keyframes cursor-blink { to { visibility:hidden; } }
.terminal-name { margin:0; color:#f2f6ff; font:600 clamp(2rem,4.5vw,3.55rem)/1.1 var(--sans); letter-spacing:-.055em; }
.terminal-alias { margin:8px 0 0; color:#8796ae; font:500 .68rem var(--terminal-mono); }
.terminal-alias strong { color:#d7b5ff; }
.terminal-alias span { color:#65748b; }
.terminal-divider { height:1px; margin:26px 0 18px; background:linear-gradient(90deg,#26344b,rgba(0,212,255,.48),rgba(168,85,247,.2),transparent); }
.system-metadata { margin:0; }
.system-metadata > div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid rgba(112,143,187,.1); }
.system-metadata dt { color:#71819a; font:500 .58rem var(--terminal-mono); letter-spacing:.08em; }
.system-metadata dd { min-width:0; margin:0; color:#cbd7e9; font:400 .67rem/1.55 var(--terminal-mono); }
.system-metadata dd .online-dot { width:6px; height:6px; vertical-align:1px; }
.terminal-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:23px; }
.terminal-cta, .terminal-quiet { color:var(--accent-cyan); font:600 .62rem var(--terminal-mono); letter-spacing:.04em; text-decoration:none; transition:color .2s ease,text-shadow .2s ease; }
.terminal-cta:hover, .terminal-quiet:hover { color:#eaf6ff; text-shadow:0 0 12px rgba(0,212,255,.55); }
.terminal-quiet { color:#a68acb; }
.terminal-statusline { display:flex; justify-content:space-between; gap:12px; padding:12px 22px; border-top:1px solid #202c40; background:#0c1320; color:#65748b; font:500 .53rem var(--terminal-mono); letter-spacing:.08em; }
.terminal-statusline span:first-child { color:var(--accent-cyan); }
.terminal-hero-bottom { margin-top:25px; color:#8291a7; }
.hero-rule { background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); }
.terminal-hero-bottom a { color:var(--accent-cyan); }
.eyebrow { color:#8a9ab2; }
.eyebrow b { background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); }
.btn-primary { border-color:var(--accent-cyan); background:var(--accent-cyan); color:#06111a; }
.btn-primary:hover { color:var(--accent-cyan); }
.heading-period { color:var(--accent-cyan); }
#about { background:linear-gradient(180deg,#070b12,#090e18); }
.about-card { border-color:rgba(0,212,255,.2); }
.about-card .eyebrow { color:#8999b2; }
#projects { background:#0a101b; border-color:rgba(0,212,255,.12); }
.projects-grid > .glass-card { border-color:#26344a; border-radius:6px; background:#0c1320; }
.projects-grid > .glass-card::before { background:radial-gradient(ellipse at 28% 62%,rgba(168,85,247,.22),transparent 34%),radial-gradient(ellipse at 80% 12%,rgba(0,212,255,.12),transparent 40%),linear-gradient(135deg,#15182a,#0c1320 65%,#101a26); }
.projects-grid > .glass-card:nth-child(3n+2)::before { background:radial-gradient(ellipse at 76% 28%,rgba(0,212,255,.2),transparent 34%),linear-gradient(130deg,#0d1c29,#0c1320 68%,#15162a); }
.projects-grid > .glass-card:nth-child(3n)::before { background:radial-gradient(ellipse at 34% 34%,rgba(168,85,247,.23),transparent 37%),linear-gradient(130deg,#19152a,#0c1320 66%,#141b2b); }
.projects-grid > .glass-card:hover { border-color:rgba(0,212,255,.5); background:#101a29; }
.projects-grid > .glass-card::after { color:#9aabc3; }
.project-preview { position:absolute; z-index:1; inset:0 0 auto; height:142px; overflow:hidden; pointer-events:none; background:linear-gradient(135deg,#15182a,#0c1320 65%,#101a26); }
.projects-grid > .glass-card:nth-child(-n+2) .project-preview { height:170px; }
.project-preview-image { display:block; width:100%; height:100%; object-fit:cover; opacity:.56; filter:blur(.45px) saturate(.68) brightness(.72); transform:scale(1.025); transition:opacity .35s ease,filter .35s ease,transform .55s ease; }
.project-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,11,18,.2),rgba(7,11,18,.08) 52%,rgba(7,11,18,.72)),linear-gradient(110deg,rgba(0,212,255,.14),rgba(168,85,247,.11)); }
.projects-grid > .glass-card > h3, .projects-grid > .glass-card > p, .projects-grid > .glass-card > a { position:relative; z-index:2; }
.projects-grid > .glass-card::after { z-index:3; }
.project-preview-image:not([src]), .preview-unavailable .project-preview-image { display:none; }
.projects-grid > .glass-card:hover .project-preview-image { opacity:.72; filter:blur(0) saturate(.78) brightness(.8); transform:scale(1.055); }
/* Canvas portrait animation observes prefers-reduced-motion in JavaScript. */
#projects .glass-card .btn-primary { color:var(--accent-cyan); border-color:rgba(0,212,255,.45); }
.strategy-grid, .strategy-grid .glass-card + .glass-card { border-color:#26344a; }
.strategy-grid h3 { color:var(--accent-cyan)!important; }
.services-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px; border:0; }
.services-grid .glass-card, .services-grid .glass-card + .glass-card { min-width:0; min-height:230px; padding:24px; border:1px solid #26344a; border-radius:6px; background:rgba(12,19,32,.72); }
.services-grid .glass-card:hover { border-color:rgba(0,212,255,.42); background:#101a29; }
.github-calendar-note { margin:10px 2px 0; color:#8796ae; font-size:.68rem; line-height:1.6; }
#github-signal .github-calendar-card { padding-bottom:14px; }
#social-hub { background:#0a101b!important; border-color:rgba(0,212,255,.14); }
#social-hub .social-card-v2 { border-color:#26344a!important; border-radius:6px!important; background:#0c1320!important; }
#social-hub .social-card-v2:hover { border-color:rgba(0,212,255,.42)!important; background:#101a29!important; }
#social-hub .icon-wrapper { color:var(--accent-cyan)!important; }
#social-hub .social-card-v2 h3 { color:#eaf1fc!important; }
.latest-video-feed { position:relative; overflow:hidden; padding:clamp(56px,8vw,100px) 0; background:radial-gradient(ellipse at 15% 80%,rgba(0,212,255,.08),transparent 36%),radial-gradient(ellipse at 84% 12%,rgba(168,85,247,.1),transparent 38%),#080d16; border-top:1px solid rgba(0,212,255,.1); border-bottom:1px solid rgba(168,85,247,.1); }
.latest-video-feed[hidden] { display:none!important; }
.spotify-player-wrap { max-width:720px; margin:34px auto 0; padding:22px; border:1px solid #26344a; background:rgba(9,14,24,.82); }
.spotify-player-wrap iframe { display:block; border:0; border-radius:8px; }
.youtube-video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.youtube-video-card { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border:1px solid #26344a; border-radius:7px; background:#0c1320; text-decoration:none; isolation:isolate; }
.youtube-video-card img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:.58; filter:blur(.35px) saturate(.68) brightness(.72); transition:opacity .35s ease,filter .35s ease,transform .55s ease; }
.youtube-video-card::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(7,11,18,.08),rgba(7,11,18,.18) 40%,rgba(7,11,18,.88)),linear-gradient(115deg,rgba(0,212,255,.14),rgba(168,85,247,.16)); pointer-events:none; }
.youtube-video-card:hover { border-color:rgba(0,212,255,.48); }
.youtube-video-card:hover img { opacity:.78; filter:blur(0) saturate(.8) brightness(.82); transform:scale(1.045); }
.youtube-video-overlay { position:absolute; z-index:2; inset:auto 0 0; display:flex; flex-direction:column; gap:7px; padding:16px; }
.youtube-video-channel { color:#70e7ff; font:500 .54rem var(--terminal-mono); letter-spacing:.1em; text-transform:uppercase; }
.youtube-video-title { color:#edf4ff; font:600 .84rem/1.5 var(--sans); }
footer { background:#070b12; }
.form-input { border-color:#26344a; background:#0c1320; }
.form-input:focus { border-color:var(--accent-cyan); }
#form-status { color:var(--accent-cyan)!important; }
.footer-bottom { border-color:#253249; }
.footer-brand span { color:var(--accent-cyan); }
.back-top { color:var(--accent-cyan); }
.github-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.github-stat-card, .github-activity-card, .github-calendar-card { min-width:0; margin:0; overflow:hidden; border:1px solid #26344a; border-radius:7px; background:#090e18; box-shadow:0 18px 42px rgba(0,0,0,.2); }
.github-stat-card { display:grid; place-items:center; min-height:205px; padding:10px; }
.github-stat-card img { display:block; width:100%; max-width:500px; height:auto; }
.github-streak-card { margin-top:14px; padding:12px; }
.github-streak-card img { display:block; width:100%; height:auto; }
.github-calendar-card { margin-top:14px; padding:18px 16px 12px; }
.github-calendar-card img { display:block; width:100%; height:auto; }
.github-repositories { margin-top:48px; }
.repo-section-heading { margin-bottom:22px; }
.repo-section-heading .eyebrow { margin-bottom:10px; }
.repo-section-heading h3 { margin:0; color:#eaf1fc; font:600 clamp(1.35rem,2.4vw,1.8rem)/1.25 var(--sans); letter-spacing:-.035em; }
.repo-section-heading .section-deck { margin-top:8px; font-size:.78rem; }
.github-repo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; }
.github-repo-card { display:flex; min-height:150px; flex-direction:column; gap:12px; padding:17px; border:1px solid #26344a; border-radius:7px; background:linear-gradient(145deg,rgba(15,24,39,.96),rgba(9,14,24,.96)); color:inherit; text-decoration:none; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.github-repo-card:hover { transform:translateY(-3px); border-color:rgba(0,212,255,.48); box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 24px rgba(0,212,255,.07); }
.github-repo-card-top, .github-repo-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.github-repo-card h4 { margin:0; color:#eaf1fc; font:600 .82rem var(--terminal-mono); overflow-wrap:anywhere; }
.github-repo-stars { flex:none; padding:4px 7px; border:1px solid rgba(168,85,247,.35); border-radius:999px; color:#d7b5ff; font:500 .56rem var(--terminal-mono); }
.github-repo-card > p { flex:1; margin:0; color:#96a5bb; font-size:.73rem; line-height:1.65; }
.github-repo-meta { color:#74849d; font:500 .53rem var(--terminal-mono); }
.github-repo-status { grid-column:1/-1; margin:0; padding:16px; border:1px dashed #26344a; border-radius:7px; color:#8796ae; font-size:.75rem; }
.github-repo-status a { color:var(--accent-cyan); }
#github-signal { background:radial-gradient(ellipse at 80% 15%,rgba(168,85,247,.08),transparent 36%),#070b12; }
#github-signal .section-heading { margin-bottom:34px; }
@media(max-width:1000px) {
  .terminal-body { grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:26px; padding:30px; }
  .particle-stage { min-height:275px; }
}
@media(max-width:700px) {
  #hero { min-height:auto; padding:44px 0 24px; }
  .terminal-window { border-radius:9px; }
  .terminal-bar { min-height:45px; padding:0 13px; font-size:.55rem; }
  .terminal-bar-state { font-size:.48rem; }
  .terminal-controls { gap:5px; }
  .terminal-controls i { width:8px; height:8px; }
  .terminal-body { grid-template-columns:1fr; gap:22px; padding:15px; }
  .visualizer-panel { padding:12px; }
  .particle-stage { min-height:235px; }
  .profile-avatar-wrap { width:clamp(166px,64vw,226px); }
  .tech-chip { min-width:34px; height:27px; font-size:.56rem; }
  .terminal-name { font-size:clamp(2rem,9vw,3rem); }
  .terminal-prompt { margin-bottom:14px; }
  .terminal-divider { margin:19px 0 13px; }
  .system-metadata > div { grid-template-columns:88px minmax(0,1fr); gap:8px; padding:7px 0; }
  .system-metadata dt { font-size:.51rem; }
  .system-metadata dd { font-size:.59rem; }
  .terminal-cta, .terminal-quiet { font-size:.55rem; }
  .terminal-statusline { padding:10px 13px; font-size:.46rem; }
  .terminal-statusline span:nth-child(2) { display:none; }
  .terminal-hero-bottom { margin-top:17px; }
  .github-stats-grid { grid-template-columns:1fr; }
  .github-stat-card { min-height:170px; }
  .github-calendar-card { padding:12px 8px 8px; }
}
@media(max-width:390px) {
  .terminal-bar { grid-template-columns:auto 1fr auto; gap:7px; }
  .terminal-bar > span:nth-child(2) { font-size:.49rem; text-align:center; }
  .terminal-body { padding:11px; }
  .system-metadata > div { grid-template-columns:78px minmax(0,1fr); }
  .terminal-actions { gap:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .scan-line, .terminal-role b { animation:none!important; }
}

/* Mobile safety overrides: keep the terminal hero fully visible on narrow devices. */
html, body { min-width: 0; }
body { overflow-x: clip; }
.terminal-window, .terminal-body, .visualizer-panel, .system-panel { min-width: 0; max-width: 100%; }
.terminal-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-metadata dd { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .brand-lockup, .header-actions, .main-nav { min-width: 0; }
  .main-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; }
  .terminal-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .terminal-bar-state { white-space: nowrap; }
  .terminal-body { min-width: 0; }
  .visualizer-panel, .system-panel { width: 100%; }
}

@media (max-width: 390px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .brand-type strong { letter-spacing: .1em; }
  .terminal-bar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .terminal-bar > span:nth-child(2) { font-size: .46rem; }
  .terminal-bar-state { font-size: .42rem; }
  .terminal-body { padding: 9px; }
  .visualizer-panel { padding: 10px; }
  .particle-stage { min-height: 215px; }
}

/* Viewport-safe fallback for phones/tablets that report a wider CSS viewport. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
body { overflow-wrap: break-word; }
img, svg, canvas, iframe, video { max-width: 100%; }
.site-header, main, section, footer, .container, .terminal-wrap, .terminal-window,
.hero-layout, .terminal-body, .visualizer-panel, .system-panel, .about-card,
.projects-grid, .strategy-grid, #social-hub, #contact { min-width: 0; max-width: 100%; }
.site-header, section, footer { width: 100%; }
.container, #social-hub .container.relative.z-10 { width: min(calc(100% - 38px), var(--page-width)); }
.terminal-body, .hero-layout, .about-card, .projects-grid, .strategy-grid { width: 100%; }
.system-metadata, .system-metadata > div, .system-metadata dd { min-width: 0; max-width: 100%; }
.system-metadata dd { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 1024px) {
  .terminal-body { grid-template-columns: minmax(0, 1fr); }
  .visualizer-panel, .system-panel { width: 100%; min-width: 0; }
  .main-nav { min-width: 0; }
  #social-hub .container.relative.z-10 { max-width: 100%; }
}
@media (max-width: 700px) {
  .container, #social-hub .container.relative.z-10 { width: calc(100% - 28px); }
  .site-header { width: 100%; overflow: hidden; }
  .brand-lockup, .brand-type, .header-actions, .main-nav { min-width: 0; max-width: 100%; }
  .main-nav { flex-wrap: wrap; justify-content: center; row-gap: 7px; overflow: visible; white-space: normal; }
  .main-nav a { flex: 0 1 auto; white-space: nowrap; }
  #hero { padding-left: 0; padding-right: 0; }
  .terminal-window { width: 100%; }
  .terminal-body { padding: clamp(10px, 4vw, 18px); }
  .visualizer-panel, .system-panel { width: 100%; min-width: 0; }
  .system-metadata > div { grid-template-columns: minmax(72px, 26%) minmax(0, 1fr); }
  .terminal-name { font-size: clamp(1.85rem, 10vw, 3rem); overflow-wrap: anywhere; }
  .hero-title { font-size: clamp(2.35rem, 13vw, 4.5rem); overflow-wrap: anywhere; }
  .hero-lede, .section-deck, .about-card p, .contact-intro { max-width: 100%; overflow-wrap: anywhere; }
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
  .projects-grid > .glass-card, .projects-grid > .glass-card:nth-child(-n+2) { grid-column: 1; min-width: 0; }
}
@media (max-width: 390px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .terminal-body { padding: 9px; }
  .visualizer-panel { padding: 9px; }
}

/* One continuous terminal window contains the complete portfolio page. */
.terminal-window.site-shell { width: min(100%, 1440px); min-height: 100vh; margin: 0 auto; }

/* Keep navigation and language choice balanced inside the terminal-style window. */
.terminal-window > .site-header {
  position: relative;
  top: auto;
  z-index: 2;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 10px clamp(14px, 2.5vw, 30px);
  border-bottom: 1px solid #243149;
  background: rgba(11, 17, 32, .94);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.terminal-window > .site-header .main-nav { justify-content: flex-start; gap: clamp(10px, 1.7vw, 22px); }
.terminal-window > .site-header .header-actions { justify-content: flex-end; }
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(112, 143, 187, .3);
  border-radius: 999px;
  background: rgba(7, 11, 18, .9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 5px 16px rgba(0, 0, 0, .2);
}
.language-option {
  min-width: 44px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #91a2bd;
  font: 600 .58rem var(--terminal-mono);
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.language-option[data-lang-option="my"] { min-width: 70px; padding: 7px 9px; font-family: 'Noto Sans Myanmar', 'Myanmar Text', sans-serif; font-size: .72rem; line-height: 1.45; }
.language-option:hover { color: #eaf1fc; }
.language-option.is-active {
  border-color: rgba(0, 212, 255, .58);
  background: linear-gradient(120deg, #00d4ff, #8e78ff);
  color: #06111a;
  box-shadow: 0 0 14px rgba(0, 212, 255, .22);
}

@media (max-width: 1000px) {
  .terminal-window > .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 20px; }
  .terminal-window > .site-header .main-nav { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: clamp(8px, 1.2vw, 16px); padding: 0; overflow: hidden; }
  .terminal-window > .site-header .header-actions { grid-column: 2; grid-row: 1; }
}

@media (max-width: 700px) {
  .terminal-window > .site-header { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 12px; }
  .terminal-window > .site-header .main-nav { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: 14px; padding: 0 0 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; white-space: nowrap; }
  .terminal-window > .site-header .main-nav::-webkit-scrollbar { display: none; }
  .terminal-window > .site-header .main-nav a { flex: 0 0 auto; font-size: .58rem; }
  .terminal-window > .site-header .header-actions { grid-column: 1; grid-row: 1; justify-self: end; gap: 8px; }
}

@media (max-width: 390px) {
  .terminal-window > .site-header { padding-left: 10px; padding-right: 10px; }
  .terminal-window > .site-header .main-nav { gap: 12px; }
  .terminal-window > .site-header .main-nav a { font-size: .54rem; }
}

/* Give the moving particle field enough room so it is not cut off by its stage. */
.particle-stage {
  min-height: clamp(340px, 31vw, 400px);
  margin-inline: -12px;
  overflow: visible;
}

@media (max-width: 1024px) and (orientation: portrait) {
  .particle-stage { min-height: clamp(320px, 45vw, 380px); }
}

@media (max-width: 700px) and (orientation: portrait) {
  .particle-stage { min-height: clamp(300px, 80vw, 340px); }
}

@media (max-width: 390px) and (orientation: portrait) {
  .particle-stage { min-height: clamp(280px, 82vw, 320px); }
}

/* Keep the profile and bio side-by-side on short landscape screens. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
  .terminal-bar { min-height: 34px; gap: 8px; padding-inline: 10px; font-size: .52rem; }
  .terminal-window > .site-header {
    min-height: 40px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 8px;
    padding: 4px 10px;
  }
  .terminal-window > .site-header .main-nav {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(7px, 1.1vw, 12px);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .terminal-window > .site-header .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  #hero { padding-top: 8px; padding-bottom: 8px; }
  .terminal-body {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: clamp(12px, 2vw, 20px);
    padding: clamp(8px, 1.5vw, 14px);
  }
  .visualizer-panel { align-self: start; padding: 7px; }
  .particle-stage { min-height: clamp(200px, 52vh, 238px); margin-inline: -6px; }
  .profile-avatar-wrap { width: clamp(145px, 38vh, 175px); }
  .system-panel { align-self: start; }
  .terminal-prompt { margin-bottom: 6px; font-size: .57rem; }
  .terminal-name { font-size: clamp(1.5rem, 4.1vw, 2rem); }
  .terminal-alias { margin-top: 4px; font-size: .56rem; }
  .terminal-divider { margin: 10px 0 6px; }
  .system-metadata > div { padding: 3px 0; }
  .system-metadata dt { font-size: .47rem; }
  .system-metadata dd { font-size: .55rem; line-height: 1.3; }
  .terminal-actions { gap: 12px; margin-top: 9px; }
  .terminal-hero-bottom { margin-top: 8px; }
}