:root{--bg:#0f0f14;--bg-soft:#13151d;--text:#eaeaf0;--muted:#a3a5b1;--accent:#7f5af0;--accent-2:#ff9a8c;--surface:#ffffff0d}body.light{--bg:#f9f9fb;--bg-soft:#fff;--text:#111a2d;--muted:#5f6a87;--accent:#5b72ff;--accent-2:#ff8aac;--surface:#1118270d}*{box-sizing:border-box}body{background-color:var(--bg);min-height:100vh;color:var(--text);margin:0;font-family:Segoe UI,Inter,system-ui,sans-serif;line-height:1.53;transition:background .35s,color .35s}#root{justify-content:center;align-items:center;min-height:100vh;padding:20px 0;display:flex}main,body>div{text-align:center;width:min(1100px,100%);margin:0 auto;padding:16px 20px 40px}header{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(145deg,#ffffff0a,#0000002e);border:1px solid #ffffff1a;border-radius:16px;justify-content:space-between;align-items:center;margin:0 0 18px;padding:14px 16px;display:flex;position:sticky;top:8px}header h1{letter-spacing:.03em;cursor:pointer;background:linear-gradient(90deg, var(--accent), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:clamp(1.35rem,2.5vw,2.2rem);font-weight:800;transition:transform .25s}header h1:hover{transform:scale(1.025)}.toggles{gap:10px;display:flex}button{color:#fff;background:var(--accent);cursor:pointer;border:1px solid #0000;border-radius:12px;margin:0;padding:8px 14px;font-weight:700;transition:transform .2s,background .2s,border-color .2s}button:hover{background:linear-gradient(110deg, var(--accent), var(--accent-2));border-color:#ffffff59;transform:translateY(-1px)}section{background:var(--bg-soft);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid #ffffff14;border-radius:16px;margin:20px 0;padding:17px 18px;box-shadow:0 12px 22px #0000001f}section h2,section h3{margin-top:0;margin-bottom:8px;font-weight:700}.hero{background:linear-gradient(135deg,#7f5af02e,#3178f01a);gap:10px;padding:28px 20px;display:grid}.hero h2{font-size:clamp(1.45rem,4vw,2.3rem)}.hero p{color:var(--muted);font-size:1.05rem}.art-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.art-item{object-fit:cover;border-radius:14px;width:100%;min-height:120px;transition:transform .35s,box-shadow .35s}.motion-on .art-item:hover{transform:translateY(-4px)scale(1.04);box-shadow:0 14px 22px #00000047}.repo-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.repo-card{color:var(--text);background:#7f5af029;border-radius:14px;padding:18px;text-decoration:none;transition:transform .28s,background .28s;display:block}.repo-card h4{margin:0 0 6px;font-size:1.05rem}.repo-card p{color:var(--muted);margin:0;font-size:.95rem}.motion-on .repo-card:hover{background:#7f5af04a;transform:translateY(-6px)}.socials{flex-wrap:wrap;gap:14px;display:flex}.socials a{color:var(--accent);background:#7f5af017;border:1px solid #7f5af073;border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-weight:700;text-decoration:none;display:inline-flex}.socials a:hover{background:#7f5af02e;transform:translateY(-1px)}.socials img{width:20px;height:20px}body.dark .socials img{filter:invert()}body.light .socials img{filter:invert(0)}.motion-on section{animation:.8s fadeUp}.motion-off *{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.secret-mode{background:linear-gradient(270deg,#f0c,#33f) 0 0/400% 400%;animation:5s infinite gradientShift}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.chaos *{transform:rotate(1deg)}.motion-on .chaos :hover{transform:rotate(-2deg)scale(1.05)}.note{opacity:.6;font-style:italic}footer{text-align:center;color:var(--muted);border-top:1px solid #ffffff14;margin-top:16px;padding-top:12px}footer:hover{animation:.3s infinite glitch}@keyframes glitch{0%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}to{transform:translate(1px,1px)}}