:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #031417; }
body { color: rgba(239,255,255,.92); }
main, #world, .veil { position: fixed; inset: 0; width: 100%; height: 100%; }
#world { display: block; touch-action: none; cursor: crosshair; }
.veil { pointer-events: none; background: linear-gradient(180deg, rgba(1,10,12,.2), transparent 24%, transparent 75%, rgba(1,5,8,.5)); mix-blend-mode: multiply; }
header, footer { position: fixed; z-index: 2; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 28px 34px; font-size: .69rem; letter-spacing: .19em; }
header { top: 0; }
footer { bottom: 0; }
.sound-toggle { position: fixed; z-index: 3; left: 50%; bottom: 27px; width: 32px; height: 32px; padding: 5px; transform: translateX(-50%); border: 0; background: transparent; color: rgba(239,255,255,.72); cursor: pointer; transition: color .25s,filter .25s,opacity .25s; }
.sound-toggle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sound-toggle path { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .speaker { fill: currentColor; stroke: none; }
.sound-toggle:hover,.sound-toggle:focus-visible,.sound-toggle.active { color: #fff; filter: drop-shadow(0 0 5px rgba(247,255,255,.8)) drop-shadow(0 0 13px rgba(117,183,255,.9)); outline: none; }
.sound-toggle.active { animation: soundGlow 1.8s ease-in-out infinite alternate; }
.sound-toggle.active .sound-slash { display: none; }
.sound-toggle:not(.active) .sound-waves { display: none; }
.sound-toggle.error { color: #8fc5ff; }
.sound-toggle:disabled { opacity: .48; cursor: wait; }
@keyframes soundGlow { to { filter: drop-shadow(0 0 7px rgba(247,255,255,.9)) drop-shadow(0 0 19px rgba(117,183,255,1)); } }
.name { font-weight: 600; }
header a, footer a { color: rgba(239,255,255,.92); text-decoration: none; padding: 10px; margin: -10px; opacity: .7; transition: opacity .25s, text-shadow .25s; }
header a:hover, header a:focus-visible, footer a:hover, footer a:focus-visible { opacity: 1; text-shadow: 0 0 8px rgba(247,255,255,.9), 0 0 24px rgba(117,183,255,.95); outline: none; }
.overlay { position: fixed; z-index: 5; inset: 0; display: grid; align-items: center; padding: clamp(30px, 8vw, 130px); background: rgba(2,12,16,.09); backdrop-filter: blur(4px) saturate(105%); -webkit-backdrop-filter: blur(4px) saturate(105%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s; }
.overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 55% 44%, rgba(75,150,230,.16), transparent 48%); pointer-events: none; }
.panel { position: relative; display: none; max-width: 1100px; }
.panel.active { display: block; animation: panelIn .55s ease both; }
.eyebrow { margin: 0 0 18px; font-size: .68rem; letter-spacing: .24em; opacity: .65; }
.panel h1 { margin: 0; font-size: clamp(3.5rem, 11vw, 10rem); line-height: .88; font-weight: 400; letter-spacing: -.055em; text-shadow: 0 0 35px rgba(117,183,255,.42); }
.panel-link { display: inline-block; margin-top: 32px; color: rgba(245,255,255,.82); font-size: .75rem; letter-spacing: .18em; text-decoration: none; transition: color .25s, text-shadow .25s; }
.panel-link:hover, .panel-link:focus-visible { color: #fff; text-shadow: 0 0 18px rgba(117,183,255,.95); outline: none; }
.fun-panel { width: 100%; max-width: 1280px; }
.fun-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.fun-head .panel-link { margin: 0 0 8px; border: 0; background: transparent; cursor: pointer; }
.fun-panel h1 { font-size: clamp(3rem, 7vw, 6.5rem); }
.github-page { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: clamp(30px,5vw,70px); margin-top: 30px; padding: 28px; max-height: 58vh; overflow-y: auto; background: rgba(3,8,12,.48); border: 1px solid rgba(226,241,245,.16); border-radius: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.github-profile img { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.2); }
.github-profile h2 { margin: 18px 0 2px; font-size: 1.25rem; font-weight: 500; }
.github-profile p { margin: 0; color: rgba(235,249,250,.55); }
.repos-title { display: flex; gap: 10px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .9rem; letter-spacing: .04em; }
#repo-count { color: rgba(235,249,250,.5); }
.repo { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.repo:last-child { border-bottom: 0; }
.repo-open { padding: 0; border: 0; background: transparent; color: #75b7ff; font: inherit; font-size: 1.15rem; font-weight: 600; text-align: left; cursor: pointer; }
.repo-open:hover, .repo-open:focus-visible { color: white; text-decoration: underline; outline: none; text-shadow: 0 0 16px rgba(117,183,255,.8); }
.repo p { margin: 8px 0 0; color: rgba(235,249,250,.65); font-size: .87rem; line-height: 1.45; }
.repo-meta { display: flex; gap: 16px; margin-top: 12px; color: rgba(235,249,250,.48); font-size: .72rem; }
.repo-loading { color: rgba(235,249,250,.55); }
.repo-detail { min-width: 0; }
.repo-detail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.16); }
.repo-path { margin: 0 0 7px; color: rgba(235,249,250,.55); font-size: .78rem; }
.repo-detail h2 { margin: 0; font-size: clamp(1.55rem,3vw,2.5rem); font-weight: 500; color: #8fc5ff; }
.detail-description { margin: 14px 0 20px; color: rgba(245,255,255,.72); line-height: 1.5; }
.live-project { flex: 0 0 auto; padding: 10px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(7,12,18,.35); color: white; font-size: .68rem; letter-spacing: .14em; cursor: pointer; }
.live-project:hover { box-shadow: 0 0 22px rgba(117,183,255,.5); }
.live-frame-wrap { height: min(52vh,620px); margin: 18px 0; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; overflow: hidden; background: #05070b; }
#live-frame { width: 100%; height: 100%; border: 0; }
.repo-browser { display: grid; gap: 18px; }
.file-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; overflow: hidden; }
.file-item { padding: 11px 14px; border: 0; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(2,8,12,.2); color: rgba(240,250,255,.76); font: inherit; font-size: .78rem; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item:hover:not(:disabled) { color: white; background: rgba(117,183,255,.12); }
.file-item:disabled { opacity: .55; cursor: default; }
.readme { padding: clamp(18px,3vw,34px); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(1,7,10,.28); color: rgba(244,252,255,.86); line-height: 1.62; }
.readme h1,.readme h2,.readme h3,.readme h4 { margin: 1.2em 0 .45em; color: white; font-weight: 500; }
.readme h1:first-child,.readme h2:first-child { margin-top: 0; }
.readme p { margin: .65em 0; }
.readme a { color: #8fc5ff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.readme a:hover,.readme a:focus-visible { color: white; text-shadow: 0 0 16px rgba(117,183,255,.85); outline: none; }
.readme pre { margin: 18px 0 0; padding: 18px; max-height: 420px; overflow: auto; border-radius: 8px; background: rgba(0,0,0,.45); color: #dff7ff; font: .78rem/1.55 Consolas,monospace; white-space: pre-wrap; word-break: break-word; }
.bio-panel,.life-panel { width: 100%; max-width: 1280px; }
.bio-panel h1,.life-panel h1 { font-size: clamp(3rem,7vw,6.5rem); }
.window-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.window-note { margin-bottom: 8px; font-size: .68rem; letter-spacing: .17em; color: rgba(245,255,255,.65); }
.glass-window { margin-top: 30px; padding: 28px; max-height: 58vh; overflow-y: auto; background: rgba(3,8,12,.48); border: 1px solid rgba(226,241,245,.16); border-radius: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.bio-layout { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: clamp(34px,7vw,100px); align-items: center; }
.bio-label { margin: 0 0 18px; color: rgba(235,249,250,.58); font-size: .7rem; letter-spacing: .18em; }
.bio-copy { max-width: 820px; margin: 0; font-size: clamp(1rem,1.3vw,1.28rem); line-height: 1.65; letter-spacing: .01em; color: rgba(245,255,255,.88); }
.bio-contact { display: flex; gap: 20px; align-items: center; margin-top: 27px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.bio-contact span { color: rgba(235,249,250,.48); font-size: .66rem; letter-spacing: .17em; }
.bio-email { color: rgba(245,255,255,.82); font-size: .84rem; letter-spacing: .12em; text-decoration: none; transition: color .25s,text-shadow .25s; }
.bio-email:hover, .bio-email:focus-visible { color: #fff; text-shadow: 0 0 18px rgba(117,183,255,.95); outline: none; }
.contact-card { text-align: center; }
.donate-link { display: inline-block; border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
.donate-link:hover,.donate-link:focus-visible { transform: scale(1.025); box-shadow: 0 0 26px rgba(117,183,255,.58); outline: none; }
.donate-qr { display: block; width: 100%; max-width: 180px; height: auto; border-radius: 16px; box-shadow: 0 0 34px rgba(117,183,255,.32); }
.contact-name { margin: 14px 0 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(239,255,255,.75); }
.life-window { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 54px; }
.life-section { min-width: 0; }
.life-section h2 { margin: 0 0 15px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.17); color: white; font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.life-section ul { margin: 0; padding: 0; list-style: none; }
.life-section li { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 15px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); color: rgba(240,250,255,.76); font-size: .81rem; line-height: 1.48; }
.life-section time { color: rgba(235,249,250,.46); font-size: .72rem; letter-spacing: .04em; }
.life-section a { color: #75b7ff; text-decoration: none; }
.life-section a:hover,.life-section a:focus-visible { color: white; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 16px rgba(117,183,255,.8); outline: none; }
.tools-section { grid-column: 1/-1; }
.tools-section p { margin: 0; color: rgba(240,250,255,.72); font-size: .84rem; line-height: 1.6; }
.overlay-close { position: absolute; z-index: 2; top: 28px; right: 34px; appearance: none; border: 0; background: transparent; color: rgba(239,255,255,.8); font: inherit; font-size: .65rem; letter-spacing: .2em; cursor: pointer; padding: 10px; }
.overlay-close:hover, .overlay-close:focus-visible { color: white; text-shadow: 0 0 18px rgba(117,183,255,.9); outline: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
  header, footer { padding: 22px 20px; font-size: .62rem; }
  .overlay { padding: 70px 24px 40px; }
  .overlay-close { top: 18px; right: 16px; }
  .overlay { overflow-y: auto; align-items: start; }
  .bio-layout { grid-template-columns: 1fr; align-items: start; }
  .glass-window { margin-top: 22px; padding: 20px; max-height: 66vh; }
  .life-window { grid-template-columns: 1fr; gap: 30px; }
  .life-section li { grid-template-columns: 82px minmax(0,1fr); gap: 12px; }
  .window-note { display: none; }
  .contact-card { width: 150px; text-align: left; padding-bottom: 24px; }
  .donate-qr { width: 150px; }
  .contact-name { text-align: center; }
  .fun-head { align-items: center; }
  .github-page { grid-template-columns: 1fr; max-height: 65vh; padding: 20px; }
  .github-profile { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
  .github-profile img { width: 64px; height: 64px; grid-row: 1 / 3; }
  .github-profile h2, .github-profile p { margin: 0; }
  .repo-detail-head { align-items: start; }
  .live-project { margin-top: 4px; }
  .file-list { grid-template-columns: 1fr; }
  .sound-toggle { bottom: 60px; width: 31px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) { .sound-toggle.active { animation: none; } }