:root{--bg:#050505;--fg:#fff;--muted:#a1a1a1;--glass:rgba(255,255,255,.04);--bd:rgba(255,255,255,.12);--hl:rgba(255,255,255,.1);--shadow:0 20px 50px rgba(0,0,0,.5);--solid-bg:#fff;--solid-fg:#050505;--grid:rgba(255,255,255,.035);--hdr:rgba(5,5,5,.7);--pad:clamp(16px,4vw,48px);--r:16px;--star:#fff;--arc:rgba(255,255,255,.1);--pglow:rgba(255,255,255,.08);--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
[data-theme=light]{--bg:#f6f7fb;--fg:#12131a;--muted:#5b5f6e;--glass:rgba(255,255,255,.75);--bd:rgba(20,24,40,.12);--hl:#fff;--shadow:0 10px 30px rgba(30,40,80,.08);--solid-bg:#12131a;--solid-fg:#fff;--grid:rgba(20,24,40,.05);--hdr:rgba(246,247,251,.85);--star:#12131a;--arc:rgba(20,24,40,.18);--pglow:rgba(60,80,160,.18)}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
img{max-width:100%;display:block}
.ic{width:1.1em;height:1.1em;flex:none}
.wrap{width:min(1200px,100%);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,1.2rem + 2.5vw,2.8rem);margin-bottom:8px}
.glass{background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow),inset 0 1px 0 var(--hl)}

/* background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.grid{position:absolute;inset:0;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px}
.orbit-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.planet{position:absolute;width:clamp(190px,min(46vw,76vh),640px);height:auto;aspect-ratio:1;object-fit:contain;will-change:transform,opacity;filter:drop-shadow(0 0 50px var(--pglow))}
.orbit-ring{position:absolute;border:1px dashed var(--arc);border-radius:50%;transform:translate(-50%,-50%)}
.sun{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;box-shadow:0 0 30px 8px rgba(255,255,255,.35)}
[data-theme=light] .sun{background:#f5a623;box-shadow:0 0 30px 8px rgba(245,166,35,.45)}
[data-theme=light] .stars{opacity:.35}
[data-theme=light] .term{box-shadow:0 14px 34px rgba(30,40,80,.18)}
[data-theme=light] .pv{background:linear-gradient(135deg,#e4e6ee,#cfd3e0)}
.arc{position:absolute;border-radius:50%;border:1px solid var(--arc)}
.a1{width:70vw;aspect-ratio:1;left:-45vw;top:8vh}
.a2{width:90vw;aspect-ratio:1;right:-30vw;bottom:-70vw}
.stars{position:absolute;inset:0;width:2px;height:2px;border-radius:50%;background:var(--star);opacity:.7;color:var(--star);box-shadow:12vw 18vh,34vw 8vh,48vw 62vh,70vw 40vh,88vw 74vh,22vw 80vh,6vw 52vh,60vw 90vh}

/* header */
.hdr{position:sticky;top:0;z-index:50!important;padding-top:env(safe-area-inset-top);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.hdr.solid{background:var(--hdr);border-color:var(--bd);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--bd)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:1.1rem}
.nav{display:flex;gap:clamp(16px,3vw,40px)}
.nav a{position:relative;padding:6px 0;font-size:.92rem;font-weight:500}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transition:transform .3s}
.nav a.active::after,.nav a:hover::after{transform:scaleX(1)}
.hdr-r{display:flex;align-items:center;gap:10px}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:var(--glass)}
.icon-btn:hover{background:var(--glass)}
.menu-btn,.nav-close{display:none;border:1px solid var(--bd);background:var(--glass)}
.scrim{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 clamp(14px,2vw,22px);border-radius:10px;font-size:.9rem;font-weight:600;white-space:nowrap;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-w{background:var(--solid-bg);color:var(--solid-fg)}
.btn-o{border:1px solid var(--bd);background:var(--glass)}
.btn-o:hover{background:var(--hl)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;margin-top:-64px;padding:clamp(88px,12vh,120px) 0 48px}
.hero{position:relative}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero-l{display:grid;gap:20px;justify-items:start}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--bd);background:var(--glass);border-radius:99px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--fg)}
h1{font-size:clamp(2.4rem,1.4rem + 5vw,5rem);line-height:1.02}
h1 span{display:block;font-weight:500}
.sub{font-size:clamp(1.1rem,1rem + .8vw,1.7rem);font-weight:500}
.lead{max-width:34em;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(16px,4vw,48px);padding:16px 22px;margin-top:6px;max-width:100%}
.stats dt{font-weight:700;font-size:.95rem}.stats dd{font-size:.78rem;color:var(--muted)}
.term{overflow:hidden;font-family:var(--mono);background:rgba(8,8,8,.9);border-color:rgba(255,255,255,.14);color:#e8e8e8;border-radius:20px}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.8rem}
.term-bar b{font-weight:500;margin-left:10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d{width:11px;height:11px;border-radius:50%}.r{background:#ff5f57}.y{background:#febc2e}.g{background:#28c840}
.term-body{min-height:15.5em;padding:20px 24px;font:inherit;font-size:clamp(.75rem,.7rem + .3vw,.95rem);line-height:1.9;white-space:pre-wrap;word-break:break-word}
.term-body .ok{color:#28c840}
.caret{display:inline-block;width:.6em;height:1.1em;background:#fff;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* sections */
.sec{padding:clamp(56px,9vw,110px) 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.pillb{min-height:44px;padding:0 20px;border-radius:99px;font-size:.88rem;color:var(--muted);background:var(--glass);transition:.2s}
.pillb.on{background:var(--solid-bg);color:var(--solid-fg);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,28px);margin-top:28px}
.sec-head+.cards{margin-top:0}
.card{display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px}
.card[hidden]{display:none}
.card.pop{animation:pop .4s}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.pv{position:relative;aspect-ratio:16/6.5;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#222,#080808);display:grid;place-items:center;border:1px solid var(--bd)}
.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{font-family:var(--mono);font-weight:700;color:#888}
.ext{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
.card h3,.card p,.card .tags,.card .btns{margin-inline:6px}
.card h3{font-size:1.15rem;letter-spacing:0}
.card p{font-size:.92rem;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:4px 12px;border:1px solid var(--bd);border-radius:6px;font-size:.75rem;color:var(--muted)}
.card .btns{margin-top:4px}.card .btn{flex:1;min-width:0}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:20px}
.big{font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chips li{padding:12px 22px;font-weight:500}
.gh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:28px 0 12px}
.gh-stats div{padding:18px 22px;display:grid}
.gh-stats b{font-size:1.8rem}
.note{font-size:.88rem;min-height:1.4em}
.repos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px;margin-top:12px}
.repo{display:grid;gap:6px;padding:20px;align-content:start;transition:transform .2s}
.repo:hover{transform:translateY(-3px)}
.repo span{font-size:.9rem}.repo small{color:var(--muted)}
.sk{min-height:80px;animation:sk 1.4s infinite alternate}.sk.tall{min-height:130px}
@keyframes sk{to{opacity:.35}}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:28px}
.svc article{padding:28px}.svc h3{font-size:1.2rem;margin-bottom:10px;letter-spacing:0}
.tl{display:grid;gap:16px;margin-top:28px;border-left:1px solid var(--bd);padding-left:clamp(16px,3vw,32px)}
.tl li{display:grid;gap:4px;padding:18px 22px}

/* footer */
.ftr{border-top:1px solid var(--bd);padding:40px 0 24px}
.ftr-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:flex-start}
.ftr nav a{color:var(--muted);padding:8px 0}.ftr nav a:hover{color:var(--fg)}
.copy{margin-top:24px;font-size:.85rem}

/* misc */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--fg);z-index:100}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--solid-bg);color:var(--solid-fg);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;z-index:40}
.to-top.show{opacity:1;visibility:visible;transform:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
dialog{width:min(600px,calc(100% - 32px));max-height:calc(100svh - 32px);margin:auto;overflow:auto;padding:clamp(22px,4vw,36px);color:var(--fg);background:#0c0c0c;border:1px solid var(--bd);border-radius:20px;box-shadow:var(--shadow)}
[data-theme=light] dialog{background:#fff}
dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.m-close{position:absolute;top:12px;right:12px}
#mBody{display:grid;gap:14px}#mBody h3{font-size:1.6rem;padding-right:40px}#mBody h4{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.feat{display:grid;gap:6px;padding-left:18px;list-style:disc;color:var(--muted)}

/* responsive */
@media(max-width:1024px){.hero-in{grid-template-columns:1fr}.term{max-width:560px;width:100%}.hdr-gh{display:none}}
@media(max-width:860px){
  .menu-btn,.nav-close{display:grid}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(300px,82vw);flex-direction:column;gap:4px;padding:calc(env(safe-area-inset-top) + 20px) 24px 24px;background:var(--bg);border-left:1px solid var(--bd);transform:translateX(100%);transition:transform .3s;z-index:70}
  .nav.open{transform:none}
  .nav a{padding:12px 0;font-size:1.1rem}.nav-close{align-self:flex-end;margin-bottom:12px}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.3s;z-index:60}
  .scrim.show{opacity:1;visibility:visible}
  .hdr-gh{display:none}
}
@media(max-width:480px){.stats{grid-template-columns:repeat(2,auto);justify-content:start}.stats div:last-child{display:none}.btn{font-size:.85rem}.hero-l .btns .btn{flex:1}.pillb{padding:0 16px}}
@media(max-width:360px){.hero-l .btns .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.caret{animation:none}}

main,.ftr,.hdr{position:relative;z-index:2}
.hdr{position:sticky}
.sec{min-height:80svh}


/* ===== Responsive/mobile overhaul ===== */
html, body { width:100%; max-width:100%; overflow-x:clip; }
body { min-width:0; }
main, section, header, footer, .wrap, .hero-in, .split, .cards, .repos, .svc { min-width:0; }
.wrap { width:100%; max-width:1240px; }
.hero, .sec { overflow:clip; }

/* Planet: fully contained, responsive and never clipped by the viewport */
.orbit-layer { position:fixed; inset:0; z-index:0; overflow:hidden; contain:layout paint; pointer-events:none; }
.planet, .planet-trail {
  position:absolute;
  left:50%; top:50%;
  width:clamp(220px, 32vw, 520px);
  height:clamp(220px, 32vw, 520px);
  aspect-ratio:1;
  border-radius:50%;
  transform-origin:center;
}
.planet { object-fit:contain; pointer-events:none; will-change:transform,opacity,filter; filter:drop-shadow(0 0 42px var(--pglow)); }
.planet-trail {
  z-index:-1;
  background:url('assets/images/planet.webp') center/contain no-repeat;
  opacity:0;
  filter:blur(12px);
  transform:translate(-50%,-50%) scale(.98);
  mix-blend-mode:screen;
  will-change:transform,opacity,filter;
}
.orbit-ring { max-width:92vw; max-height:78vh; }

/* Real scroll-friendly motion: menu never locks the page */
body.lock { overflow:auto; }
.scrim { touch-action:none; }

/* Glass UI */
.glass { -webkit-backdrop-filter:blur(20px) saturate(120%); backdrop-filter:blur(20px) saturate(120%); }
.nav { -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%); }

@media (max-width: 860px) {
  :root { --pad:clamp(14px,5vw,24px); }
  .hdr { z-index:100; }
  .hdr-in { min-height:60px; gap:8px; }
  .logo { min-width:0; max-width:calc(100vw - 150px); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .avatar { width:30px; height:30px; }
  .hdr-r { flex:0 0 auto; }
  .hdr-r .icon-btn { width:40px; height:40px; }
  .nav { width:min(340px,88vw); max-width:88vw; height:100dvh; right:0; left:auto; bottom:auto; overflow-y:auto; overscroll-behavior:contain; padding:calc(env(safe-area-inset-top) + 14px) 22px calc(24px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 78%,transparent); }
  .nav a { width:100%; padding:14px 0; border-bottom:1px solid var(--bd); }
  .nav-close { width:42px; height:42px; margin-bottom:10px; }
  .scrim { z-index:90; }
  .hero { min-height:auto; margin-top:-60px; padding:100px 0 52px; }
  .hero-in { grid-template-columns:1fr; gap:28px; }
  .hero-l { width:100%; gap:16px; }
  h1 { max-width:100%; font-size:clamp(2.15rem,11vw,4rem); overflow-wrap:anywhere; }
  .sub { font-size:clamp(1rem,4.5vw,1.35rem); }
  .lead { max-width:100%; font-size:.95rem; }
  .btns { width:100%; }
  .hero-l > .btns .btn { min-width:0; }
  .stats { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:14px; }
  .stats dt { font-size:.82rem; overflow-wrap:anywhere; }
  .stats dd { font-size:.7rem; }
  .term { width:100%; max-width:none; min-width:0; border-radius:16px; }
  .term-bar { padding:12px 14px; }
  .term-body { min-height:13em; padding:16px; overflow:hidden; font-size:.72rem; }
  .sec { min-height:auto; padding:64px 0; }
  .sec-head { align-items:flex-start; }
  .filters { width:100%; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:4px; }
  .filters::-webkit-scrollbar { display:none; }
  .pillb { flex:0 0 auto; }
  .cards, .repos, .svc { grid-template-columns:minmax(0,1fr); }
  .card, .repo, .svc article, .tl li { min-width:0; }
  .pv { aspect-ratio:16/9; }
  .card h3, .card p { overflow-wrap:anywhere; }
  .tags { min-width:0; }
  .tags li { max-width:100%; overflow-wrap:anywhere; }
  .card .btns { flex-wrap:wrap; }
  .card .btn { flex:1 1 150px; }
  .split { grid-template-columns:minmax(0,1fr); }
  .gh-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr-in { flex-direction:column; }
  .ftr nav { width:100%; }
  dialog { width:min(94vw,620px); max-height:88dvh; margin:auto; }
}

@media (max-width: 600px) {
  /* Mobile planet: large enough to read, but always completely inside the screen */
  .planet, .planet-trail { width:clamp(270px,78vw,360px); height:clamp(270px,78vw,360px); }
  .orbit-ring { width:clamp(280px,78vw,420px)!important; height:clamp(220px,58vh,340px)!important; }
  .sun { width:8px; height:8px; margin:-4px; }
  .hero { padding-top:94px; }
  .pill { max-width:100%; padding:7px 12px; font-size:.62rem; }
  .hero-l .btns { display:grid; grid-template-columns:1fr; }
  .hero-l .btns .btn { width:100%; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats > div:last-child { grid-column:1/-1; }
  .term-body { min-height:12em; }
  .sec-head { gap:14px; }
  h2 { font-size:clamp(1.65rem,8vw,2.25rem); }
  .chips li { padding:10px 14px; }
  .svc article { padding:22px; }
  .tl { padding-left:14px; }
  .tl li { padding:16px; }
  .to-top { width:44px; height:44px; }
}

@media (max-width: 380px) {
  .logo { max-width:calc(100vw - 130px); }
  .hdr-r .icon-btn { width:38px; height:38px; }
  .hero { padding-top:90px; }
  .stats { grid-template-columns:1fr 1fr; }
  .term-body { padding:13px; font-size:.66rem; }
  .card { padding:9px 9px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .planet { transition:filter .18s ease; }
  .btn:hover { filter:brightness(1.08); }
  .card:hover { transform:translateY(-3px); transition:transform .25s ease; }
}

@media (max-width: 480px) {
  .planet, .planet-trail { width:clamp(275px,80vw,330px); height:clamp(275px,80vw,330px); }
}
@media (max-width: 360px) {
  .planet, .planet-trail { width:270px; height:270px; }
}


/* FINAL PLANET FIX: preserve the original orbital movement, but keep the whole globe visible */
.orbit-layer{overflow:hidden}
.planet{transform-origin:center center;object-fit:contain;max-width:none;max-height:none}
.planet-trail{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;background:url('assets/images/planet.webp') center/contain no-repeat;opacity:0;transform-origin:center center}
@media (max-width:699px){.planet{min-width:0;min-height:0}.orbit-ring{opacity:.55}}