* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#050507; --bg2:#0a0a0f; --card:#101016; --line:rgba(255,255,255,.07);
  --text:#f2f2ef; --text2:#8a8a90; --acc:#8b7ff0; --acc2:#27c496; --acc3:#ff5c39;
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,'Segoe UI',sans-serif; line-height:1.6; overflow-x:hidden; cursor:none; }
a { color:inherit; text-decoration:none; cursor:none; }
::selection { background:var(--acc); color:#fff; }

/* ---------- preloader ---------- */
#loader { position:fixed; inset:0; background:var(--bg); z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .6s ease, visibility .6s; }
#loader.hide { opacity:0; visibility:hidden; }
#loader .l-num { font-size:64px; font-weight:800; letter-spacing:-.03em; background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#loader .l-label { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--text2); }
#loader .l-bar { width:200px; height:1px; background:var(--line); overflow:hidden; }
#loader .l-bar span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .2s; }

/* ---------- grain overlay ---------- */
#grain { position:fixed; inset:-100%; width:300%; height:300%; z-index:500; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 8s steps(10) infinite; }
@keyframes grainShift { 0%,100% { transform:translate(0,0); } 10% { transform:translate(-5%,-8%); } 20% { transform:translate(-12%,3%); } 30% { transform:translate(6%,-10%); } 40% { transform:translate(-4%,12%); } 50% { transform:translate(-10%,-6%); } 60% { transform:translate(12%,2%); } 70% { transform:translate(3%,10%); } 80% { transform:translate(-8%,-3%); } 90% { transform:translate(9%,6%); } }

/* ---------- custom cursor ---------- */
.cursor-dot { position:fixed; width:6px; height:6px; background:var(--acc); border-radius:50%; pointer-events:none; z-index:999; transform:translate(-50%,-50%); transition:transform .1s; }
.cursor-ring { position:fixed; width:34px; height:34px; border:1px solid rgba(139,127,240,.5); border-radius:50%; pointer-events:none; z-index:998; transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s; }
.cursor-ring.hovering { width:60px; height:60px; border-color:var(--acc2); }
@media (hover:none) { .cursor-dot,.cursor-ring { display:none; } body,a { cursor:auto; } }

/* ---------- nav ---------- */
nav { position:fixed; top:0; left:0; width:100%; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:22px 40px; }
nav .brand { font-weight:800; font-size:15px; letter-spacing:.05em; }
nav .links { display:flex; gap:30px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
nav .links a { position:relative; opacity:.7; transition:opacity .2s; }
nav .links a:hover { opacity:1; }
nav .links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--text); transition:width .25s; }
nav .links a:hover::after { width:100%; }
.theme-toggle { background:none; border:1px solid var(--line); border-radius:999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:none; transition:border-color .3s, transform .3s; }
.theme-toggle:hover { border-color:var(--acc); }
.theme-toggle svg { width:18px; height:18px; fill:var(--text2); transition:fill .3s; }
.theme-toggle:hover svg { fill:var(--acc); }

/* ---------- hero ---------- */
#hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; max-width:none; }
#three-canvas { position:absolute; inset:0; z-index:1; }
.hero-inner { position:relative; z-index:2; text-align:center; padding:0 24px; }
.hero-eyebrow { font-size:12px; letter-spacing:.35em; text-transform:uppercase; color:var(--acc2); margin-bottom:24px; opacity:0; animation:fadeUp .9s .3s forwards; }
.hero-title { font-size:clamp(44px,9vw,120px); font-weight:800; line-height:.95; letter-spacing:-.04em; }
.hero-title .line { display:block; overflow:hidden; }
.hero-title .line span { display:inline-block; transform:translateY(110%); animation:riseUp 1s cubic-bezier(.16,1,.3,1) forwards; }
.hero-title .line:nth-child(2) span { animation-delay:.15s; background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc)); background-size:200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:riseUp 1s .15s cubic-bezier(.16,1,.3,1) forwards, gradientShift 6s 1.2s linear infinite; }
@keyframes riseUp { to { transform:translateY(0); } }
@keyframes gradientShift { to { background-position:200% center; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.hero-sub { margin-top:28px; font-size:clamp(15px,1.8vw,19px); color:var(--text2); max-width:560px; margin-left:auto; margin-right:auto; opacity:0; animation:fadeUp .9s .7s forwards; }
.hero-sub b { color:var(--text); font-weight:600; }
.hero-ctas { margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .9s .9s forwards; }
.btn { padding:15px 32px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.02em; transition:transform .25s, box-shadow .25s; display:inline-flex; align-items:center; gap:8px; will-change:transform; }
.btn-solid { background:var(--text); color:#050507; }
.btn-solid:hover { box-shadow:0 12px 32px rgba(255,255,255,.15); }
.btn-ghost { border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--acc); }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--text2); display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero-scroll::after { content:''; width:1px; height:44px; background:linear-gradient(to bottom,var(--acc),transparent); animation:scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity:.3; transform:scaleY(.6); transform-origin:top; } 50% { opacity:1; transform:scaleY(1); } }

/* ---------- marquee ---------- */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; white-space:nowrap; background:var(--bg2); }
.marquee-track { display:inline-block; animation:marquee 28s linear infinite; }
.marquee span { font-size:15px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text2); margin:0 34px; }
.marquee span b { color:var(--acc); font-weight:600; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
section { position:relative; padding:140px 24px; max-width:1200px; margin:0 auto; }
.sec-head { display:flex; align-items:baseline; gap:24px; margin-bottom:64px; }
.sec-num { font-size:13px; color:var(--acc); font-weight:700; letter-spacing:.1em; }
.sec-title { font-size:clamp(32px,5vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.reveal { opacity:0; transform:translateY(44px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:start; }
.about-story p { font-size:19px; color:#d4d4d0; margin-bottom:24px; font-weight:300; }
.about-story p b { font-weight:600; color:var(--text); }
.big-quote { font-size:clamp(22px,3vw,30px); font-weight:300; font-style:italic; line-height:1.4; color:var(--text); border-left:2px solid var(--acc); padding-left:28px; margin:36px 0; font-family:Georgia,serif; }
.portrait-card { position:relative; width:200px; margin-bottom:0; }
.portrait-img { width:200px; height:200px; border-radius:24px; object-fit:cover; border:1px solid var(--line); display:block; background:#15151d; cursor:pointer; }
.portrait-ring { position:absolute; inset:-8px; border-radius:30px; border:1px solid rgba(139,127,240,.35); animation:portraitPulse 3.2s ease-in-out infinite; pointer-events:none; }
.portrait-ring.speaking { border-color:rgba(39,196,150,.7); animation:portraitSpeak .9s ease-in-out infinite; }
@keyframes portraitPulse { 0%,100% { transform:scale(1); opacity:.5; } 50% { transform:scale(1.03); opacity:1; } }
@keyframes portraitSpeak { 0%,100% { transform:scale(1); opacity:.6; } 50% { transform:scale(1.05); opacity:1; } }
.voice-btn { position:absolute; bottom:-8px; right:-8px; width:46px; height:46px; border-radius:50%; background:var(--acc); border:3px solid var(--bg); display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .2s; }
.voice-btn:hover { transform:scale(1.1); }
.voice-btn svg { width:17px; height:17px; fill:#fff; }
.portrait-caption { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text2); margin-top:16px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 22px; transition:border-color .3s, transform .3s; }
.stat:hover { border-color:var(--acc); transform:translateY(-4px); }
.stat .n { font-size:34px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .l { font-size:12.5px; color:var(--text2); margin-top:6px; line-height:1.5; }

/* ---------- projects ---------- */
.proj { border-top:1px solid var(--line); padding:56px 0; display:grid; grid-template-columns:70px 1fr auto; gap:36px; align-items:start; transition:background .3s; position:relative; }
.proj:last-child { border-bottom:1px solid var(--line); }
.proj:hover { background:linear-gradient(90deg, rgba(139,127,240,.04), transparent); }
.proj-idx { font-size:14px; color:var(--text2); font-weight:600; padding-top:10px; }
.proj-body h3 { font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:-.02em; margin-bottom:6px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:999px; font-weight:700; }
.tag-live { background:rgba(39,196,150,.12); color:#4fd8ac; border:1px solid rgba(39,196,150,.3); }
.tag-case { background:rgba(139,127,240,.12); color:#a99ff5; border:1px solid rgba(139,127,240,.3); }
.tag-wip { background:rgba(255,92,57,.1); color:#ff8a6b; border:1px solid rgba(255,92,57,.3); }
.proj-body .desc { font-size:16px; color:var(--text2); max-width:640px; margin-top:10px; }
.pill-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.pill { font-size:12px; padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:#c9c9d4; }
.proj-detail-row { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:640px; }
.mini { background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:14px; padding:16px; }
.mini h5 { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--acc); margin-bottom:8px; }
.mini p { font-size:13px; color:var(--text2); }
.mini ul { list-style:none; font-size:13px; color:var(--text2); }
.mini li { padding-left:14px; position:relative; margin-bottom:4px; }
.mini li::before { content:'—'; position:absolute; left:0; color:var(--acc); }
.proj-links { display:flex; flex-direction:column; gap:12px; padding-top:10px; min-width:170px; }
.plink { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--acc2); transition:gap .2s; }
.plink:hover { gap:14px; }
.plink.primary { background:var(--acc); color:#fff; padding:11px 20px; border-radius:999px; justify-content:center; transition:transform .2s, box-shadow .2s; will-change:transform; }
.plink.primary:hover { box-shadow:0 10px 24px rgba(139,127,240,.35); gap:8px; }
.plink.muted { color:var(--text2); font-style:italic; font-weight:400; }

/* ---------- skills ---------- */
.skills-wrap { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.skill-block { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:36px; transition:border-color .3s; }
.skill-block:hover { border-color:var(--acc); }
.skill-block h4 { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text2); margin-bottom:22px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-size:13.5px; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.02); transition:all .25s; }
.chip:hover { border-color:var(--acc2); color:var(--acc2); transform:translateY(-2px); }

/* ---------- how I think ---------- */
.think-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.think-card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:40px 32px; transition:border-color .4s, transform .4s, opacity .9s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.think-card:hover { border-color:var(--acc); transform:translateY(-6px); }
.think-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg, var(--acc), var(--acc2)); transform:scaleX(0); transform-origin:left; transition:transform .5s; }
.think-card:hover::before { transform:scaleX(1); }
.think-card.reveal:nth-child(1) { transition-delay:0s; }
.think-card.reveal:nth-child(2) { transition-delay:.12s; }
.think-card.reveal:nth-child(3) { transition-delay:.24s; }
.think-card.reveal:nth-child(4) { transition-delay:.36s; }
.think-num { font-size:48px; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg, rgba(139,127,240,.35), rgba(39,196,150,.15)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:16px; line-height:1; }
.think-card h3 { font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:14px; line-height:1.3; }
.think-card p { font-size:15px; color:var(--text2); line-height:1.7; }
.currently { margin-top:52px; padding:20px 28px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:14px; color:var(--text2); display:inline-flex; align-items:center; gap:12px; }
.currently b { color:var(--acc2); font-weight:600; }
.currently-dot { width:8px; height:8px; border-radius:50%; background:var(--acc2); box-shadow:0 0 12px rgba(39,196,150,.7); animation:nowPulse 2s ease-in-out infinite; flex-shrink:0; }
@keyframes nowPulse { 0%,100% { box-shadow:0 0 8px rgba(39,196,150,.4); } 50% { box-shadow:0 0 22px rgba(39,196,150,.9); } }

/* ---------- contact ---------- */
#contact { text-align:center; padding-bottom:120px; }
.contact-big { font-size:clamp(40px,7vw,90px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:22px; }
.contact-big .hl { background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#contact .sub { max-width:460px; margin:0 auto 44px; font-size:16px; color:var(--text2); }
.c-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- easter egg ---------- */
.egg-toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--card); border:1px solid var(--acc); border-radius:18px; padding:20px 32px; z-index:600; text-align:center; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s; opacity:0; pointer-events:none; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.egg-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.egg-toast .egg-emoji { font-size:32px; margin-bottom:8px; }
.egg-toast .egg-title { font-size:14px; font-weight:700; color:var(--acc); margin-bottom:6px; }
.egg-toast .egg-fact { font-size:14px; color:var(--text2); line-height:1.5; }

/* ---------- footer + perf badge ---------- */
footer { text-align:center; padding:36px; font-size:12px; color:var(--text2); border-top:1px solid var(--line); }
.perf-badge { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 18px; border:1px solid var(--line); border-radius:999px; font-size:11px; letter-spacing:.08em; color:var(--text2); transition:border-color .3s; }
.perf-badge:hover { border-color:var(--acc2); }
.perf-ring { width:28px; height:28px; position:relative; }
.perf-ring svg { width:28px; height:28px; transform:rotate(-90deg); }
.perf-ring circle { fill:none; stroke-width:3; }
.perf-ring .bg { stroke:var(--line); }
.perf-ring .fg { stroke:var(--acc2); stroke-dasharray:78.5; stroke-dashoffset:0; stroke-linecap:round; transition:stroke-dashoffset 1.5s ease; }
.perf-score { font-weight:700; font-size:13px; color:var(--acc2); }

/* =========================================================
   LIGHT MODE
   ========================================================= */
body.light { --bg:#f5f5f0; --bg2:#eaeae4; --card:#ffffff; --line:rgba(0,0,0,.08); --text:#0a0a0f; --text2:#5a5a64; --acc:#6b5ce7; --acc2:#15a070; --acc3:#e04420; }
body.light #grain { opacity:.04; }
body.light .cursor-dot { background:var(--acc); }
body.light .cursor-ring { border-color:rgba(107,92,231,.4); }
body.light .hero-scroll { color:var(--text2); }
body.light .hero-eyebrow { color:var(--acc2); }
body.light .hero-title, body.light .hero-title .line span { color:#0a0a0f; }
body.light .hero-title .line:nth-child(2) span { background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc)); background-size:200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.light .hero-sub { color:#4a4a54; }
body.light .hero-sub b { color:#0a0a0f; }
body.light .btn-solid { background:#1a1a24; color:#f2f2ef; }
body.light .btn-solid:hover { box-shadow:0 12px 32px rgba(0,0,0,.18); }
body.light .btn-ghost { border-color:rgba(0,0,0,.2); color:#1a1a24; }
body.light .btn-ghost:hover { border-color:var(--acc); }
body.light .marquee { background:var(--bg2); border-top-color:rgba(0,0,0,.06); border-bottom-color:rgba(0,0,0,.06); }
body.light .marquee span { color:#6a6a74; }
body.light .marquee span b { color:var(--acc); }
body.light .sec-num { color:var(--acc); }
body.light .sec-title { color:#0a0a0f; }
body.light p { color:#4a4a54; }
body.light .about-story p { color:#3a3a42; }
body.light .about-story p b { color:#0a0a0f; }
body.light .big-quote { color:#1a1a24; border-left-color:var(--acc); }
body.light .portrait-img { background:#e0e0da; border:1px solid rgba(0,0,0,.08); }
body.light .portrait-ring { border-color:rgba(107,92,231,.3); }
body.light .voice-btn { border-color:#f5f5f0; }
body.light .portrait-caption { color:#5a5a64; }
body.light .stat { background:#fff; border-color:rgba(0,0,0,.08); }
body.light .stat:hover { border-color:var(--acc); }
body.light .stat .n { background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; }
body.light .stat .l { color:#5a5a64; }
body.light .proj { border-top-color:rgba(0,0,0,.08); }
body.light .proj:last-child { border-bottom-color:rgba(0,0,0,.08); }
body.light .proj:hover { background:linear-gradient(90deg, rgba(107,92,231,.04), transparent); }
body.light .proj-idx { color:#8a8a94; }
body.light .proj-body .desc { color:#4a4a54; }
body.light .pill { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); color:#4a4a54; }
body.light .tag-case { background:rgba(107,92,231,.1); color:#5a4bc7; border-color:rgba(107,92,231,.25); }
body.light .tag-live { background:rgba(21,160,112,.1); color:#0d7a55; border-color:rgba(21,160,112,.25); }
body.light .tag-wip { background:rgba(224,68,32,.08); color:#c03818; border-color:rgba(224,68,32,.2); }
body.light .mini { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08); }
body.light .mini h5 { color:var(--acc); }
body.light .mini p, body.light .mini li { color:#4a4a54; }
body.light .plink { color:var(--acc2); }
body.light .plink.primary { background:var(--acc); color:#fff; }
body.light .plink.muted { color:#8a8a94; }
body.light .skill-block { background:#fff; border-color:rgba(0,0,0,.08); }
body.light .skill-block:hover { border-color:var(--acc); }
body.light .skill-block h4 { color:#5a5a64; }
body.light .chip { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.1); color:var(--text); }
body.light .chip:hover { border-color:var(--acc2); color:var(--acc2); }
body.light .think-card { background:#fff; border-color:rgba(0,0,0,.08); }
body.light .think-card:hover { border-color:var(--acc); }
body.light .think-card h3 { color:#0a0a0f; }
body.light .think-card p { color:#4a4a54; }
body.light .think-num { background:linear-gradient(135deg, rgba(107,92,231,.4), rgba(21,160,112,.2)); -webkit-background-clip:text; background-clip:text; }
body.light .currently { background:#fff; border-color:rgba(0,0,0,.08); color:#4a4a54; }
body.light .contact-big { color:#0a0a0f; }
body.light .contact-big .hl { background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; }
body.light #contact .sub { color:#4a4a54; }
body.light .theme-toggle { border-color:rgba(0,0,0,.15); }
body.light .theme-toggle svg { fill:#4a4a54; }
body.light .theme-toggle:hover { border-color:var(--acc); }
body.light .theme-toggle:hover svg { fill:var(--acc); }
body.light .egg-toast { background:#fff; border-color:var(--acc); box-shadow:0 20px 60px rgba(0,0,0,.12); }
body.light .egg-toast .egg-fact { color:#4a4a54; }
body.light footer { color:#6a6a74; border-top-color:var(--line); }
body.light .perf-badge { color:#5a5a64; }
body.light .perf-ring .bg { stroke:rgba(0,0,0,.1); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px) {
  nav { padding:18px 22px; }
  nav .links { display:none; }
  .about-grid { grid-template-columns:1fr; gap:44px; }
  .proj { grid-template-columns:1fr; gap:18px; }
  .proj-idx { display:none; }
  .proj-links { flex-direction:row; flex-wrap:wrap; }
  .proj-detail-row { grid-template-columns:1fr; }
  .skills-wrap { grid-template-columns:1fr; }
  .think-grid { grid-template-columns:1fr; }
  section { padding:90px 20px; }
  .currently { font-size:13px; padding:16px 22px; border-radius:20px; }
  .perf-badge { margin-top:10px; }
}