:root{
  --bg1:#8fc1f3;
  --bg2:#5f99da;
  --bg3:#2f6fc2;
  --win:#d6e7fbcc;
  --win2:#bfd7f4e8;
  --line:#9ebde4;
  --title1:#dcecff;
  --title2:#6fa0df;
  --title3:#2e62b2;
  --ink:#234c80;
  --ink2:#3b6295;
  --shadow:rgba(28,62,109,.26);
  --white:#f6fbff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, "Trebuchet MS", Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.35), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(128,255,213,.12), transparent 24%),
    linear-gradient(180deg, #9fd1ff 0%, #6fa8e5 25%, #4b86d2 65%, #2b64b5 100%);
  overflow-x:hidden;
}
.bg-grid,.bg-glow,.bg-wireframes,.sparkles{
  position:fixed; inset:0; pointer-events:none;
}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.6;
}
.bg-glow{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.36), transparent 24%),
    radial-gradient(circle at 78% 16%, rgba(150,255,217,.12), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.14), transparent 40%);
}
.bg-wireframes{opacity:.42}
.sparkles i{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#e7f6ff; box-shadow:0 0 8px #fff;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{50%{opacity:.25; transform:scale(.6)}}

.boot-screen{
  position:fixed; inset:0; z-index:99;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(20,45,92,.68), rgba(10,22,50,.82));
  transition:opacity .5s ease, visibility .5s ease;
}
.boot-screen.hidden{opacity:0; visibility:hidden}
.boot-card{width:min(92vw,560px)}
.boot-body{padding:18px}
.boot-logo{font-family:"VT323", monospace; font-size:2rem; color:#eff8ff; margin:0 0 10px}
.boot-lines{min-height:150px; color:#dbf0ff; font-size:1rem}
.boot-lines div{margin:4px 0}
.boot-progress{height:16px; border:1px solid #a8c6e8; background:#d8e7f7; margin-top:10px}
.boot-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,#7ff18d,#49b54f)}

.desktop{position:relative; z-index:2; width:min(1440px, calc(100% - 22px)); margin:10px auto 18px;}
.grid{
  display:grid;
  grid-template-columns:minmax(250px,270px) minmax(540px,1fr) minmax(250px,290px);
  gap:14px;
}
.leftcol,.rightcol,.maincol{display:flex; flex-direction:column; gap:14px; min-width:0}
.xp-window{
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.35), transparent 24%),
    linear-gradient(180deg, var(--win) 0%, var(--win2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px var(--shadow);
}
.titlebar{
  min-height:31px;
  padding:4px 8px 4px 10px;
  display:flex; align-items:flex-start; gap:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.15) 36%, transparent 37%),
    linear-gradient(180deg, var(--title1) 0%, var(--title2) 42%, var(--title3) 100%);
  border-bottom:1px solid #6a98d4;
}
.titletext{
  font-family:"VT323", monospace;
  color:#eff8ff;
  text-shadow:0 1px 0 rgba(0,0,0,.24), 0 0 8px rgba(255,255,255,.22);
  line-height:.9;
  letter-spacing:.06em;
  font-size:2rem;
  flex:1 1 auto;
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}
.titlebuttons{display:flex; gap:4px; margin-left:auto; flex:0 0 auto}
.titlebuttons span{
  position:relative;
  width:21px; height:18px; border:1px solid #6288bf;
  background:linear-gradient(180deg, #f3f9ff 0%, #cadcf3 46%, #8cadcf 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.titlebuttons span:nth-child(1)::before,
.titlebuttons span:nth-child(2)::before,
.titlebuttons span:nth-child(3)::before{
  content:""; position:absolute; inset:0; margin:auto; background:#2a4e83;
}
.titlebuttons span:nth-child(1)::before{width:9px;height:2px; top:7px}
.titlebuttons span:nth-child(2)::before{width:9px;height:7px; border:2px solid #2a4e83; background:transparent; top:3px}
.titlebuttons span:nth-child(3)::before{width:10px;height:2px; transform:rotate(45deg); top:8px}
.titlebuttons span:nth-child(3)::after{content:""; position:absolute; width:10px; height:2px; background:#2a4e83; inset:0; margin:auto; transform:rotate(-45deg)}
.windowbody{
  padding:14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(158,255,208,.08), transparent 24%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.3), transparent 28%),
    linear-gradient(180deg, rgba(240,247,255,.78), rgba(199,220,246,.78));
}
.windowbody.compact{padding:8px 12px}
.collapse-toggle{cursor:pointer}
.collapsible .windowbody{
  overflow:hidden;
  max-height:var(--panel-h, 2000px);
  opacity:1;
  transition:max-height .38s ease, opacity .25s ease, padding .25s ease;
}
.collapsible.closed .windowbody{
  max-height:0 !important;
  opacity:0;
  padding-top:0; padding-bottom:0;
}
p{margin:0 0 10px; line-height:1.38; color:var(--ink2)}
h1,h2,h3{margin:0 0 8px; color:var(--ink)}
.eyebrow{
  color:#587eb0; text-transform:uppercase; letter-spacing:.24em; font-size:.8rem; margin-bottom:12px;
}
.hero-body{
  display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:20px; align-items:start;
}
.hero-copy h1{
  font-size:clamp(2.3rem, 5vw, 4.2rem);
  line-height:.95;
  font-weight:800;
  color:#234c80;
  margin-bottom:14px;
}
.lead{font-size:1.06rem}
.nested{width:100%}
.monitor{
  position:relative; min-height:365px; overflow:hidden;
  border:1px solid #8ab0df;
  background:linear-gradient(180deg,#7eb4f0 0%, #4b83ce 55%, #2f69b7 100%);
}
.monitor::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:28px 28px;
}
.monitor::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.22), transparent 35%);
}
.monitor-wireframe{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.42;
}
.monitor-overlay{
  position:relative; z-index:2; padding:18px;
  color:#f9fdff;
}
.monitor-badge{
  display:inline-block; padding:8px 16px; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.45); color:#f6fbff; text-transform:uppercase; font-weight:700;
  background:rgba(255,255,255,.09);
}
.monitor-title{
  font-size:clamp(2.1rem, 7vw, 4rem);
  line-height:.88;
  color:#f8fbff; text-shadow:0 3px 0 rgba(0,0,0,.16);
  margin-bottom:16px;
}
.monitor ul{margin:0 0 18px 20px; padding:0; color:#f1f7ff; font-size:1.02rem}
.monitor-line{
  font-family:"VT323", monospace; font-size:1.4rem; color:#f5fbff;
  min-height:52px; letter-spacing:.05em;
}
.caret{animation: blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
.tagrow,.chips,.statuslist,.btnrow,.buttongrid,.tasktabs,.playlist{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  padding:7px 12px; border:1px solid #8eaede;
  background:linear-gradient(180deg,#f4f9ff 0%, #cfdef1 46%, #a8c1df 100%);
  color:#335785; font-weight:600;
}
.cardgrid{
  display:grid; gap:14px;
}
.repo-card{padding:12px 14px;}
.cardgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.slot{
  border:1px solid #a9c4e4;
  background:linear-gradient(180deg, rgba(247,251,255,.82), rgba(207,224,244,.82));
  padding:14px;
  min-width:0;
}
.card h3{
  font-size:1rem;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.card p{margin-bottom:0}
.label{
  display:inline-block; padding:5px 9px; margin-bottom:12px;
  border:1px solid #95b7e1; font-size:.83rem; font-weight:700; color:#365b8d;
  background:linear-gradient(180deg,#f8fbff 0%, #d2e4f8 48%, #a3bfe0 100%);
}
.video-grid .card{padding:12px}
.thumb{
  aspect-ratio:16/9; border:1px solid #8eaede; margin-bottom:12px; background:#8ab3df;
}
.thumb.placeholder{
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 40%),
    linear-gradient(180deg,#7ca9da 0%, #5c8aca 100%);
}
.statusbullets{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.statusbullets li{display:flex; align-items:center; gap:12px; color:#284f81}
.dot{width:11px;height:11px;border-radius:50%; display:inline-block; flex:0 0 auto}
.dot.green{background:#6fda8c}.dot.cyan{background:#79cdf8}.dot.pale{background:#b9cee9}
.chips span,.pill{
  padding:7px 12px; border:1px solid #9bbbe4; background:linear-gradient(180deg,#f8fbff 0%, #d2e4f8 48%, #aac4e2 100%); color:#335785; font-weight:600
}
.pill.green{background:linear-gradient(180deg,#d7ffe3 0%, #bce9c5 48%, #8fcf9d 100%)}
.stack{display:flex; flex-direction:column; gap:12px}
.smallgap{gap:10px}
.contact-card .bigline{
  font-size:clamp(1.35rem, 3.3vw, 2.2rem);
  line-height:.95; color:#244a7b; margin-bottom:8px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.slotgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.slot{
  min-height:100px;
  display:grid; place-items:center;
  text-align:center;
}
.slot span{
  font-family:"VT323", monospace;
  font-size:clamp(1.6rem, 4vw, 2.1rem);
  color:#2f568a; line-height:1; white-space:normal;
}
.counter{
  padding:22px 10px; text-align:center;
  font-family:"VT323", monospace; font-size:4rem; color:#234a7d;
  border:1px solid #a9c4e4;
  background:linear-gradient(180deg, rgba(247,251,255,.82), rgba(207,224,244,.82));
}
.xpbtn,.tasktab{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:8px 13px;
  border:1px solid #7ea4d7;
  background:linear-gradient(180deg,#fbfdff 0%, #d4e5f8 48%, #92b5df 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  color:#2b4f80; text-decoration:none; font-weight:700; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, opacity .15s ease;
}
.xpbtn:hover,.tasktab:hover{transform:translateY(-1px); filter:brightness(1.03)}
.xpbtn.small{min-height:30px; padding:6px 10px}
.buttongrid.two{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.marquee{overflow:hidden}
.marquee-track{
  display:inline-flex; min-width:max-content; gap:30px; color:#315682; font-weight:600;
  animation: marquee 20s linear infinite;
}
@keyframes marquee{to{transform:translateX(-50%)}}
.taskbar{
  margin-top:14px; display:flex; gap:8px; align-items:center;
  padding:8px 10px;
  border:1px solid #8fb0d9;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.12) 36%, transparent 37%),
    linear-gradient(180deg,#dfeefe 0%, #a4c2e5 48%, #6c95c7 100%);
}
.tasktabs{flex:1}
.taskpill{
  padding:8px 14px; border:1px solid #7ea4d7; background:linear-gradient(180deg,#fbfdff 0%, #d4e5f8 48%, #92b5df 100%); color:#2b4f80; font-weight:700;
}
.musicdock{display:grid; gap:12px}
.disc-wrap{display:flex; justify-content:center}
.disc{
  width:74px; height:74px; border-radius:50%;
  background:
    radial-gradient(circle at center, #d7efff 0 15%, #6ca5e4 16% 22%, #153b74 23% 26%, #7eb6ef 27% 40%, #3169b6 41% 60%, #cfe8ff 61% 100%);
  box-shadow:0 0 18px rgba(255,255,255,.3);
}
.spinning{animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.musicmeta{text-align:center}
.music-title{font-weight:700; color:#264b7e}
.music-sub{color:#587eb0}
.slider{width:100%}
.eq{display:flex; gap:5px; align-items:end; height:28px}
.eq span{
  flex:1; background:linear-gradient(180deg,#b6ffbe 0%, #6ada72 50%, #2ca73d 100%);
  animation:eq 1.2s ease-in-out infinite; transform-origin:bottom;
}
.eq span:nth-child(2){animation-delay:.1s}.eq span:nth-child(3){animation-delay:.25s}.eq span:nth-child(4){animation-delay:.4s}.eq span:nth-child(5){animation-delay:.15s}
@keyframes eq{0%,100%{height:28%}50%{height:100%}}
.track{
  padding:7px 10px; border:1px solid #9abbe4; background:linear-gradient(180deg,#f8fbff 0%, #d2e4f8 48%, #aac4e2 100%); color:#335785; cursor:pointer;
}
.track.active{filter:brightness(1.06)}
.sectionhead{margin-bottom:14px}
.sectionhead h2{font-size:1.9rem}
.fit-title,.fit-copy{display:block}
@keyframes panelPop{from{transform:translateY(4px); opacity:.85}to{transform:none; opacity:1}}

@media (max-width: 1200px){
  .grid{grid-template-columns:1fr}
  .hero-body{grid-template-columns:1fr}
}


/* extra life + readability pass */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 8% 18%, rgba(183,255,221,.14), transparent 18%),
    radial-gradient(circle at 90% 14%, rgba(176,244,255,.14), transparent 20%),
    radial-gradient(circle at 60% 85%, rgba(150,223,255,.10), transparent 22%);
}
.bg-wireframes{opacity:.30; filter:drop-shadow(0 0 8px rgba(255,255,255,.1));}
.titletext{
  color:#eff7ff;
  text-shadow:0 1px 0 rgba(20,38,70,.5), 0 0 4px rgba(255,255,255,.12);
}
.windowbody{
  background:
    radial-gradient(circle at 100% 0%, rgba(120,255,201,.10), transparent 24%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(223,237,255,.86), rgba(188,213,244,.86));
}
.card,.slot,.counter{
  background:linear-gradient(180deg, rgba(234,243,255,.92), rgba(198,217,243,.90));
}
.tag.dark{
  color:#224978;
  background:linear-gradient(180deg,#eef6ff 0%, #d2e3f7 48%, #9fbde1 100%);
}
.repo-card{
  min-height:unset;
}
.repo-card p{
  overflow-wrap:break-word;
}
#github-grid{
  align-items:stretch;
}
#github-panel .windowbody{
  overflow:visible;
}
.compactbullets{gap:8px}
.orb-layer,.toast-layer{
  position:fixed; inset:0; pointer-events:none; z-index:1;
}
.orb{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.65), rgba(181,247,255,.22) 45%, rgba(138,200,255,.05) 65%, transparent 72%);
  box-shadow:0 0 24px rgba(178,240,255,.20);
  animation:orbFloat linear infinite;
}
@keyframes orbFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(18px,-26px,0) scale(1.06)}
  to{transform:translate3d(-14px,-56px,0) scale(.96)}
}
.toast-layer{
  display:flex; flex-direction:column; gap:10px; align-items:flex-end; justify-content:flex-start;
  padding:72px 22px 22px;
}
.toast{
  min-width:180px; max-width:260px;
  padding:10px 12px;
  border:1px solid #8daedf;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.08) 34%, transparent 35%),
    linear-gradient(180deg, rgba(230,244,255,.95), rgba(160,195,235,.92));
  box-shadow:0 10px 22px rgba(20,54,100,.16), inset 0 1px 0 rgba(255,255,255,.9);
  color:#254b7d;
  opacity:0; transform:translateY(-8px) translateX(20px);
  animation:toastIn .55s ease forwards, toastOut .55s ease forwards;
  animation-delay:var(--delay,0s), calc(var(--delay,0s) + 4.6s);
}
.toast b{display:block; font-size:.92rem; margin-bottom:2px}
.toast span{font-size:.85rem; color:#446897}
@keyframes toastIn{to{opacity:.96; transform:translateY(0) translateX(0)}}
@keyframes toastOut{to{opacity:0; transform:translateY(-6px) translateX(18px)}}
.musicdock{
  position:relative;
  overflow:hidden;
}
.musicdock::before{
  content:""; position:absolute; inset:-30% 18% auto auto; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(173,255,219,.25), transparent 64%);
  pointer-events:none;
}
.disc{
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 24px rgba(118,212,255,.18);
}
@media (max-width: 1180px){
  .toast-layer{padding-top:120px}
}


/* v3 cleanup + more juice */
body{
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(111,255,220,.16), transparent 22%),
    linear-gradient(180deg, #7eb8f2 0%, #4f8edc 32%, #346fca 68%, #2559b2 100%);
}
.bg-glow{
  background:
    radial-gradient(circle at 18% 0%, rgba(207,240,255,.28), transparent 22%),
    radial-gradient(circle at 75% 15%, rgba(137,255,210,.14), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(168,233,255,.10), transparent 36%);
}
.bg-wireframes{opacity:.44; filter:drop-shadow(0 0 10px rgba(233,249,255,.14));}
.desktop{animation:desktopFloat .9s ease both;}
@keyframes desktopFloat{from{opacity:.0; transform:translateY(8px)} to{opacity:1; transform:none}}
.xp-window{position:relative; isolation:isolate;}
.xp-window::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(130deg, rgba(255,255,255,.22), transparent 18%, transparent 76%, rgba(171,255,217,.05)); opacity:.9;}
.xp-window::after{content:""; position:absolute; inset:1px; pointer-events:none; z-index:0; border:1px solid rgba(255,255,255,.18); mix-blend-mode:screen; opacity:.55;}
.titlebar{position:relative; overflow:hidden;}
.titlebar::after{content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.05) 70%, transparent 100%); animation:titleSweep 8s ease-in-out infinite;}
@keyframes titleSweep{0%,65%,100%{transform:translateX(-120%)} 80%{transform:translateX(120%)}}
.windowbody,.titlebar{position:relative; z-index:1;}
.windowbody{
  background:
    radial-gradient(circle at 100% 0%, rgba(116,255,201,.12), transparent 24%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.13), transparent 28%),
    linear-gradient(180deg, rgba(219,235,255,.88), rgba(184,210,244,.90));
}
.card,.slot{background:linear-gradient(180deg, rgba(228,239,255,.94), rgba(193,214,241,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 16px rgba(24,58,108,.08);}
.xpbtn,.tasktab,.chips span,.pill,.tag,.track{transition:transform .16s ease, filter .16s ease, box-shadow .2s ease, background-position .3s ease; background-size:100% 100%, 180% 100%;}
.xpbtn:hover,.tasktab:hover,.track:hover,.chips span:hover,.tag:hover,.pill:hover{transform:translateY(-1px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 16px rgba(31,75,140,.18);}
.xpbtn:active,.tasktab:active,.track:active{transform:translateY(0) scale(.99);}
.monitor{box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 44px rgba(255,255,255,.06), 0 14px 26px rgba(24,58,108,.18);}
.monitor::after{background:linear-gradient(115deg, rgba(255,255,255,.16), transparent 35%), repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, rgba(255,255,255,0) 2px 5px);}
.monitor-overlay{backdrop-filter: blur(.2px);}
.monitor-badge{box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 0 16px rgba(255,255,255,.07);}
.monitor-title{font-size:clamp(1.85rem, 6vw, 3.15rem); letter-spacing:.02em; text-wrap:balance;}
.repo-card{overflow:visible; min-height:unset;}
#github-grid .card{animation:cardRise .45s ease both;}
#github-grid .card:nth-child(2){animation-delay:.04s}#github-grid .card:nth-child(3){animation-delay:.08s}#github-grid .card:nth-child(4){animation-delay:.12s}#github-grid .card:nth-child(5){animation-delay:.16s}
@keyframes cardRise{from{opacity:.0; transform:translateY(8px)} to{opacity:1; transform:none}}
.toast{backdrop-filter: blur(4px);}
.orb-layer,.orb{display:none !important;}


.micro-links{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#476da5;
  font-size:14px;
}
.micro-links a{
  color:#32598f;
  text-decoration:none;
}
.micro-links a:hover{
  text-decoration:underline;
}