@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root { --bg:#0b0b0c; --fg:#f3f4f6; --muted:#a1a1aa; --line:#29292c; --card:#101011; --accent:#38bdf8; --green-0:#1f242c; --green-1:#0e4429; --green-2:#006d32; --green-3:#26a641; --green-4:#39d353; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--fg); font-family:Inter,Arial,sans-serif; font-size:14px; line-height:1.55; } a { color:inherit; } button { font:inherit; }
.leetcode-grid .l1,.leetcode-section .legend.l1 { background:#713f12; }.leetcode-grid .l2,.leetcode-section .legend.l2 { background:#a16207; }.leetcode-grid .l3,.leetcode-section .legend.l3 { background:#d97706; }.leetcode-grid .l4,.leetcode-section .legend.l4 { background:#fbbf24; }.light .leetcode-grid .l1,.light .leetcode-section .legend.l1 { background:#fde68a; }.light .leetcode-grid .l2,.light .leetcode-section .legend.l2 { background:#fbbf24; }.light .leetcode-grid .l3,.light .leetcode-section .legend.l3 { background:#f59e0b; }.light .leetcode-grid .l4,.light .leetcode-section .legend.l4 { background:#d97706; }
.contribution-section .contribution-grid { grid-template-columns:repeat(53,minmax(0,1fr)); grid-auto-columns:auto; grid-template-rows:repeat(7,minmax(0,1fr)); width:100%; aspect-ratio:53/7; gap:2.8px; overflow:visible; }.contribution-section .contribution-grid .day { width:100%; height:100%; min-width:0; min-height:0; }
.activity-title { display:flex; align-items:baseline; gap:9px; }.activity-title h2 { margin:0; }.activity-title span { color:var(--muted); font:500 10px "Geist Mono",monospace; }
.experience-list { display:grid; }.experience-item { display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:0 14px; padding:0 0 27px; }.experience-item:last-child { padding-bottom:0; }.experience-rail { position:relative; display:flex; justify-content:center; }.experience-rail::after { position:absolute; top:11px; bottom:-1px; width:1px; content:""; background:var(--line); }.experience-item:last-child .experience-rail::after { display:none; }.experience-rail i { position:relative; z-index:1; width:8px; height:8px; margin-top:4px; border:2px solid var(--bg); border-radius:50%; background:var(--muted); box-shadow:0 0 0 1px var(--line); transition:background .18s ease,box-shadow .18s ease; }.experience-item:first-child .experience-rail i { background:var(--accent); }.experience-main { min-width:0; }.experience-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 9px; }.experience-heading h3 { margin:0; color:var(--fg); font-size:14px; font-weight:650; line-height:1.35; }.experience-heading a,.experience-heading strong { color:rgba(243,244,246,.78); font-size:13px; font-weight:500; line-height:1.35; }.experience-heading a { text-decoration:none; }.experience-heading a:hover { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }.experience-main p { margin:4px 0 5px; color:rgba(243,244,246,.76); font-size:11px; font-weight:600; }.experience-main p span { color:var(--muted); }.experience-main > div:last-child { max-width:560px; color:var(--muted); font-size:12px; line-height:1.65; }.experience-item time { align-self:start; margin-top:1px; color:var(--muted); font:500 11px/1.4 "Geist Mono",monospace; white-space:nowrap; }.experience-item:hover .experience-rail i { background:var(--accent); box-shadow:0 0 0 1px var(--accent); }.light .experience-heading a,.light .experience-heading strong { color:#52525b; }.light .experience-main p { color:#52525b; }
.about-layout { display:grid; gap:24px; }.about-lede { margin:0; color:rgba(243,244,246,.9); font-size:17px; font-weight:400; line-height:1.55; }.about-lede strong { color:var(--fg); font-weight:600; }.about-detail { display:grid; grid-template-columns:1fr; }.about-detail p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }.about-detail blockquote { margin:0; padding:2px 0 2px 14px; border-left:2px solid var(--accent); color:var(--fg); font:600 13px/1.55 "Geist Mono",monospace; }.light .about-lede { color:#3f3f46; }.light .about-detail p { color:#71717a; }
.site-shell { width:min(768px,calc(100vw - 32px)); min-height:100vh; margin:0 auto; border-inline:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 0 24px 24px; background:var(--bg); }
.skip-link { position:fixed; top:-60px; left:12px; z-index:100; padding:8px 12px; background:#fff; color:#111; }.skip-link:focus { top:12px; }
.theme-curtain { position:fixed; z-index:9999; inset:0; display:none; background:#0b0b0c; box-shadow:0 18px 44px rgba(0,0,0,.3); pointer-events:none; transform:translateY(-100%); }.theme-curtain-light { display:block; background:#fafafa; }.theme-curtain-dark { display:block; background:#0b0b0c; }.theme-curtain.is-entering { animation:theme-curtain-enter .3s cubic-bezier(.33,1,.68,1) forwards; }.theme-curtain.is-exiting { animation:theme-curtain-exit .3s cubic-bezier(.33,1,.68,1) forwards; }@keyframes theme-curtain-enter { from { transform:translateY(-100%); } to { transform:translateY(0); } }@keyframes theme-curtain-exit { from { transform:translateY(0); } to { transform:translateY(100%); } }

.site-header { position:sticky; top:0; z-index:10; display:flex; height:56px; align-items:center; justify-content:space-between; padding:0 24px; margin-inline:-1px; }.site-header::before { position:absolute; z-index:-1; inset-block:0; left:50%; width:100vw; content:""; transform:translateX(-50%); border-bottom:1px solid var(--line); background:rgba(11,11,12,.88); backdrop-filter:blur(12px); }.site-header::after { position:absolute; z-index:0; inset:0; content:""; border-inline:1px solid rgba(255,255,255,.13); pointer-events:none; }.site-header > * { position:relative; z-index:1; }
nav { display:flex; align-items:center; gap:20px; } nav a { padding:4px 0; color:var(--muted); font-size:12px; font-weight:500; text-decoration:none; transition:color .15s ease; } nav a.active,nav a:hover { color:var(--fg); font-weight:600; }.header-actions { display:flex; align-items:center; gap:8px; }.theme-toggle,.music-toggle { display:grid; width:28px; height:28px; place-items:center; padding:0; border:0; background:transparent; color:var(--fg); cursor:pointer; }.theme-toggle { font-size:21px; }.music-toggle { position:relative; }.music-icon { display:block; width:0; height:0; margin-left:2px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }.music-toggle.is-playing .music-icon { width:10px; height:12px; margin-left:0; border:0; background:linear-gradient(to right,currentColor 0 3px,transparent 3px 7px,currentColor 7px); }.music-toggle.is-playing { color:var(--accent); }.theme-toggle:hover,.music-toggle:hover { opacity:.72; }.menu-toggle { display:none; }

.home-section { padding:48px 24px; border-bottom:1px solid var(--line); }.workspace-banner { width:100%; height:208px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#070b1c url("assets/reference-workspace.gif") center / cover no-repeat; box-shadow:inset 0 1px 10px rgba(255,255,255,.04); }.workspace-banner::before,.workspace-banner::after { display:none; }
.profile-row { position:relative; display:flex; align-items:flex-end; gap:16px; margin-top:-64px; padding:0 8px; }.avatar-wrap { position:relative; display:flex; width:112px; flex:0 0 112px; flex-direction:column; align-items:center; }.avatar-wrap img { width:112px; height:112px; padding:0; border:0; border-radius:16px; outline:0; object-fit:cover; object-position:center 25%; }.avatar-mode { display:grid; width:28px; height:28px; place-items:center; margin-top:-6px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--fg); font:600 9px/1 "Geist Mono",monospace; cursor:pointer; }
.identity { flex:1; padding-bottom:9px; }.identity-title { display:flex; align-items:center; gap:6px; }.identity h1 { margin:0; font:700 20px/1.15 "Geist Mono",monospace; letter-spacing:0; }.verified { display:grid; width:16px; height:16px; place-items:center; border-radius:50%; background:var(--accent); color:#083344; font-size:10px; font-weight:900; }.identity p { height:24px; margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:14px; font-weight:500; }.intro { margin:24px 8px 0; color:rgba(243,244,246,.85); font-size:14px; line-height:1.65; }.intro strong { color:var(--fg); font-weight:500; }
.home-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 8px 0; }.button { display:inline-flex; min-height:32px; align-items:center; gap:6px; padding:6px 13px; border:1px solid var(--line); border-radius:4px; background:rgba(16,16,17,.6); color:var(--fg); font-size:12px; font-weight:500; text-decoration:none; transition:background .15s ease; }.button:hover { background:#18181a; }.button-primary { border-color:var(--fg); background:var(--fg); color:var(--bg); font-weight:600; }.button-primary:hover { background:#ddd; }.action-divider { width:1px; height:16px; margin:0 4px; background:var(--line); }.social-icons { display:flex; align-items:center; gap:12px; }.social-icons a { display:grid; width:16px; height:16px; place-items:center; color:var(--muted); }.social-icons img { width:16px; height:16px; opacity:.76; filter:grayscale(1) brightness(1.8); }.social-icons a:hover img { opacity:1; }

.content-section { margin-inline:-1px; padding:40px 24px; border-bottom:1px solid var(--line); scroll-margin-top:56px; }.content-section h2 { margin:0 0 24px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }.prose { color:rgba(243,244,246,.8); font-size:14px; line-height:1.7; }.prose p { margin:0 0 18px; }.prose p:last-child { margin-bottom:0; color:rgba(243,244,246,.92); }.prose strong { color:var(--fg); font-weight:500; }
.record-list { display:grid; gap:24px; }.record { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }.record h3,.other-row h3 { margin:0; color:var(--fg); font-size:14px; font-weight:600; line-height:1.35; }.record h3 span { color:rgba(161,161,170,.5); font-size:12px; }.record h3 a { color:rgba(243,244,246,.86); text-decoration:none; }.record h3 a:hover,.other-row a:hover { text-decoration:underline; text-underline-offset:4px; }.record p { margin:2px 0 4px; color:rgba(243,244,246,.85); font-size:12px; font-weight:500; }.record span { display:block; max-width:510px; color:var(--muted); font-size:12px; line-height:1.6; }.record time { flex:0 0 auto; margin-top:2px; color:var(--muted); font:500 12px/1.5 "Geist Mono",monospace; white-space:nowrap; }.experience-record { gap:32px; }
.skills-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }.skill-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:start; padding:13px 0; border-top:1px solid var(--line); }.skill-row:nth-child(1),.skill-row:nth-child(2) { padding-top:0; border-top:0; }.skill-row > span { padding-top:5px; color:var(--muted); font:600 10px/1.25 "Geist Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.skill-row > div { display:flex; flex-wrap:wrap; gap:6px; }.skill-row b { display:inline-flex; align-items:center; min-height:26px; padding:3px 8px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.025); color:rgba(243,244,246,.88); font-size:11px; font-weight:550; line-height:1.2; transition:border-color .15s ease,background-color .15s ease,color .15s ease; }.skill-row b:hover { border-color:rgba(59,130,246,.6); background:rgba(59,130,246,.08); color:var(--fg); }.light .skill-row b { background:#fff; color:#3f3f46; }.light .skill-row b:hover { border-color:#60a5fa; background:#eff6ff; color:#18181b; }

.section-title-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }.section-title-row h2 { margin:0; }.section-title-row a { color:var(--muted); font:500 12px "Geist Mono",monospace; text-decoration:none; }.months { display:grid; grid-template-columns:repeat(12,1fr); padding-left:18px; margin-bottom:8px; color:#d4d4d8; font-size:11px; }.contribution-grid { display:grid; grid-auto-columns:11.5px; grid-auto-flow:column; grid-template-rows:repeat(7,11.5px); gap:2.8px; overflow:hidden; }.day { width:11.5px; height:11.5px; border-radius:2px; background:var(--green-0); }.l1 { background:var(--green-1); }.l2 { background:var(--green-2); }.l3 { background:var(--green-3); }.l4 { background:var(--green-4); }.contribution-foot { display:flex; justify-content:space-between; gap:16px; margin-top:13px; color:#d4d4d8; font-size:12px; }.legend { display:inline-block; width:11.5px; height:11.5px; margin:0 1px -2px; border-radius:2px; }.legend.l0 { background:var(--green-0); }

.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.project-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:rgba(16,16,17,.4); transition:border-color .18s ease,transform .18s ease; }.project-card:hover,.project-card:focus-within { border-color:var(--fg); transform:translateY(-2px); }.project-media { display:block; overflow:hidden; border-bottom:1px solid var(--line); background:#111; }.project-media:focus-visible { outline:2px solid var(--fg); outline-offset:-3px; }.project-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; transition:transform .3s ease; }.project-card:hover img { transform:scale(1.025); }.project-copy { display:grid; flex:1; gap:10px; padding:14px; }.project-heading { display:flex; min-width:0; align-items:baseline; gap:8px; }.project-heading span { color:var(--accent); font:600 10px "Geist Mono",monospace; }.project-copy h3 { overflow:hidden; margin:0; color:var(--fg); font-size:14px; font-weight:650; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.project-copy p { display:-webkit-box; overflow:hidden; min-height:39px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.project-copy p.is-expanded { display:block; min-height:0; }.project-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--line); }.project-actions button,.project-actions a { padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; font-weight:600; text-decoration:none; cursor:pointer; }.project-actions button:hover,.project-actions a:hover { color:var(--fg); }.project-actions a { color:var(--fg); }.projects-section { padding-bottom:40px; }
.other-section { padding-bottom:56px; }.other-list { border-top:1px solid var(--line); }.other-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:16px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); transition:background-color .16s ease; }.other-row:hover { background:rgba(255,255,255,.025); }.other-index { align-self:start; padding-top:2px; color:var(--muted); font:500 10px "Geist Mono",monospace; }.other-row small { display:block; margin-bottom:2px; color:var(--muted); font:600 9px "Geist Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }.other-row h3 { margin:0; color:var(--fg); font-size:13px; font-weight:600; line-height:1.35; }.other-row p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }.other-row a { align-self:center; color:var(--fg); font:500 11px "Geist Mono",monospace; text-decoration:none; white-space:nowrap; }.other-row a:hover { text-decoration:underline; text-underline-offset:4px; }.light .other-row:hover { background:#f4f4f5; }
footer { padding:48px 24px 0; border-radius:0 0 23px 23px; }.pixel-field { position:relative; height:192px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#070b1c url("assets/reference-footer.gif") center bottom / cover no-repeat; }.pixel-field > * { display:none; }.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:40px 0; }.footer-links > div { display:grid; grid-template-columns:repeat(2,max-content); gap:8px 50px; }.footer-links p { grid-column:1/-1; margin:0 0 8px; color:var(--muted); font:500 12px "Geist Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.footer-links a { color:var(--muted); font-size:12px; text-decoration:none; }.footer-links a:hover { color:var(--fg); }.footer-bottom { display:flex; justify-content:space-between; padding:28px 0 64px; border-top:1px solid var(--line); color:var(--muted); font:500 12px/1.8 "Geist Mono",monospace; }.footer-bottom a { color:var(--fg); text-decoration:none; }.footer-bottom a:hover { text-decoration:underline; }

/* Reference-style profile interactions and compact certificate gallery. */
.avatar-images { position:relative; width:112px; height:112px; overflow:hidden; border:1px solid var(--line); border-radius:16px; outline:4px solid var(--bg); }.avatar-wrap .avatar-images img { position:absolute; inset:0; width:112px; height:112px; border:0; border-radius:15px; outline:0; object-fit:cover; transition:opacity .2s ease; }.avatar-wrap .avatar-images .avatar-photo { background:#fff; object-fit:contain; object-position:center; }.avatar-wrap .avatar-images .avatar-pixel { object-position:center 43%; }.avatar-pixel { opacity:0; }.avatar-wrap.pixel-mode .avatar-photo { opacity:0; }.avatar-wrap.pixel-mode .avatar-pixel { opacity:1; }.avatar-wrap::after { position:absolute; z-index:2; top:0; left:0; width:112px; height:0; content:""; background:var(--bg); pointer-events:none; }.avatar-wrap.pixel-mode::after { animation:avatar-wipe .24s cubic-bezier(.65,0,.35,1); }.avatar-mode { position:relative; z-index:3; }.avatar-mode svg { display:block; width:14px; height:14px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }.avatar-wrap.pixel-mode .avatar-mode svg { transform:rotate(180deg); }.identity p { transition:opacity .18s ease,transform .18s ease; }.identity p.is-changing { opacity:0; transform:translateY(-6px); }
@keyframes avatar-wipe { 0% { height:0; } 48% { height:112px; } 100% { height:0; top:112px; } }
.section-count { color:var(--muted); font:500 11px "Geist Mono",monospace; }.certificate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.certificate-card { position:relative; display:block; overflow:hidden; min-width:0; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); text-align:left; cursor:pointer; transition:border-color .15s ease,transform .15s ease; }.certificate-card:hover { border-color:var(--muted); transform:translateY(-2px); }.certificate-card:focus-visible,.certificate-modal-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }.certificate-card img { display:block; width:100%; height:116px; object-fit:cover; object-position:top; }.certificate-card span { display:grid; gap:2px; min-height:56px; padding:9px; }.certificate-card strong { overflow:hidden; font-size:11px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }.certificate-card small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.certificate-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease; }.certificate-modal.is-open { opacity:1; pointer-events:auto; }.certificate-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(0,0,0,.78); cursor:default; }.certificate-modal-panel { position:relative; z-index:1; width:min(680px,100%); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 24px 80px rgba(0,0,0,.45); }.certificate-modal-panel img { display:block; width:100%; max-height:68vh; background:#111; object-fit:contain; }.certificate-modal-panel div { padding:16px 18px; }.certificate-modal-panel h2 { margin:0; font-size:15px; }.certificate-modal-panel p { margin:4px 0 0; color:var(--muted); font-size:12px; }.certificate-modal-close { position:absolute; top:10px; right:10px; display:grid; width:30px; height:30px; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:rgba(12,12,13,.88); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.light { --bg:#fafafa; --fg:#18181b; --muted:#71717a; --line:#dedee1; --card:#fff; --green-0:#ebedf0; }.light .site-header::before { background:rgba(250,250,250,.88); }.light .site-header::after { border-color:#dedee1; }.light .button-primary { background:#18181b; border-color:#18181b; color:#fff; }.light .project-card { background:#fff; }.light .intro,.light .prose,.light .prose p:last-child,.light .record p { color:#3f3f46; }.light .intro strong,.light .prose strong,.light .record h3 a { color:#18181b; }.light .button:not(.button-primary) { background:#fff; }.light .button:not(.button-primary):hover { background:#f4f4f5; }.light .button-primary:hover { background:#27272a; }.light .social-icons img { filter:grayscale(1) brightness(.32); }.light .project-copy p,.light .other-row p { color:#71717a; }.light .project-footer a { color:#3f3f46; }.light .certificate-modal-close { background:rgba(255,255,255,.94); color:#18181b; }

@media (max-width:640px) { .site-shell { width:100%; border-inline:0; border-bottom:0; border-radius:0; }.site-header { height:56px; padding:0 18px; margin-inline:0; border-inline:0; }.site-header::after { display:none; } nav { gap:18px; } nav a { font-size:12px; }.site-header nav a:nth-child(4) { display:none; }.home-section { padding:32px 18px; }.workspace-banner { height:176px; border-radius:12px; background-position:54% center; }.profile-row { gap:12px; margin-top:-54px; padding:0 8px; }.avatar-wrap { width:96px; flex-basis:96px; }.avatar-images { width:96px; height:96px; border-radius:14px; }.avatar-wrap .avatar-images img { width:96px; height:96px; border-radius:14px; }.avatar-wrap.pixel-mode::after { animation-name:avatar-wipe-mobile; }.identity { padding-bottom:5px; }.identity h1 { font-size:17px; }.identity p { height:20px; margin-top:3px; font-size:12px; }.verified { width:14px; height:14px; font-size:8px; }.intro { margin:20px 8px 0; font-size:13px; }.home-actions { gap:8px; margin-top:20px; }.social-icons { width:100%; padding-top:3px; }.action-divider { display:none; }.content-section { padding:36px 18px; }.content-section h2 { margin-bottom:20px; }.prose { font-size:13px; }.prose p { margin-bottom:16px; }.skills-list { grid-template-columns:1fr; gap:0; }.skill-row { grid-template-columns:84px minmax(0,1fr); padding:10px 0; }.skill-row:nth-child(2) { padding-top:10px; border-top:1px solid var(--line); }.record { display:block; }.record time { display:block; margin-top:6px; }.record-list { gap:22px; }.months { display:none; }.contribution-grid { grid-auto-columns:9px; grid-template-rows:repeat(7,9px); gap:2px; }.day { width:9px; height:9px; }.contribution-foot { font-size:11px; }.contribution-foot span:last-child { display:none; }.certificate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.certificate-card img { height:108px; }.certificate-card span { min-height:52px; }.project-grid { grid-template-columns:1fr; }.project-copy { min-height:0; }.other-section { padding-bottom:48px; }.other-row { display:block; }.other-row a { display:inline-block; margin-top:10px; } footer { padding:36px 18px 0; border-radius:0; }.pixel-field { height:170px; border-radius:12px; }.footer-links { grid-template-columns:1fr; padding:36px 0; }.footer-bottom { padding-bottom:48px; font-size:11px; } }
.gallery-actions { display:flex; justify-content:center; padding-top:18px; }.gallery-toggle { min-height:32px; padding:6px 12px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--fg); font:500 11px "Geist Mono",monospace; cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }.gallery-toggle:hover { border-color:var(--fg); background:rgba(255,255,255,.04); }.gallery-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }.gallery-toggle[hidden] { display:none; }.light .gallery-toggle:hover { background:#f4f4f5; }
@keyframes avatar-wipe-mobile { 0% { height:0; } 48% { height:96px; } 100% { height:0; top:96px; } }
.about-section { padding-bottom:16px; }.journey-marquee { position:relative; margin-top:2px; overflow:hidden; outline:none; }.journey-marquee:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }.journey-track { display:flex; width:max-content; animation:journey-scroll 72s linear infinite; will-change:transform; }.journey-set { display:flex; flex:0 0 auto; gap:12px; padding:14px 12px 14px 0; }.journey-card { width:216px; height:144px; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--card); }.journey-card img { display:block; width:100%; height:100%; object-fit:cover; }@keyframes journey-scroll { to { transform:translateX(-50%); } }@media (max-width:640px) { .about-section { padding-bottom:12px; }.journey-set { gap:10px; padding-block:12px; padding-right:10px; }.journey-card { width:178px; height:118px; } }@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }.journey-marquee { overflow-x:auto; scrollbar-width:none; }.journey-marquee::-webkit-scrollbar { display:none; }.journey-track { animation:none!important; }.journey-set[aria-hidden="true"] { display:none; } }

.coding-section { padding-bottom:44px; }.coding-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:28px; border-block:1px solid var(--line); }.coding-overview-item { min-width:0; padding:16px 18px 17px; border-right:1px solid var(--line); }.coding-overview-item:first-child { padding-left:0; }.coding-overview-item:last-child { border-right:0; }.coding-overview-item strong { display:block; overflow:hidden; color:var(--fg); font:650 24px/1.1 "Geist Mono",monospace; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }.coding-overview-item span { display:block; margin-top:6px; color:var(--muted); font:600 10px/1.35 "Geist Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.coding-platforms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }.coding-platform { display:grid; min-width:0; min-height:174px; padding:18px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background-color .16s ease; }.coding-platform:nth-child(odd) { padding-right:18px; border-right:1px solid var(--line); }.coding-platform:nth-child(even) { padding-left:18px; }.coding-platform:hover,.coding-platform:focus-visible { background:rgba(255,255,255,.025); }.coding-platform:focus-visible { position:relative; z-index:1; outline:2px solid var(--accent); outline-offset:-2px; }.coding-platform-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.coding-platform-brand { display:flex; min-width:0; align-items:center; gap:9px; }.coding-platform-mark { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border:1px solid var(--line); border-radius:6px; color:var(--fg); font:650 9px/1 "Geist Mono",monospace; letter-spacing:0; }.coding-platform[data-platform="leetcode"] .coding-platform-mark { border-color:rgba(234,88,12,.58); color:#fb923c; }.coding-platform[data-platform="codeforces"] .coding-platform-mark { border-color:rgba(37,99,235,.58); color:#60a5fa; }.coding-platform[data-platform="codechef"] .coding-platform-mark { border-color:rgba(22,163,74,.55); color:#4ade80; }.coding-platform-name { display:grid; min-width:0; gap:1px; }.coding-platform-name strong { overflow:hidden; color:var(--fg); font-size:13px; font-weight:650; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.coding-platform-name span { overflow:hidden; color:var(--muted); font:500 10px/1.25 "Geist Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.coding-platform-arrow { color:var(--muted); font:500 13px/1 "Geist Mono",monospace; }.coding-platform-primary { align-self:end; margin-top:22px; color:var(--fg); font:650 21px/1.15 "Geist Mono",monospace; }.coding-platform-primary small { margin-left:5px; color:var(--muted); font:500 10px/1 "Geist Mono",monospace; }.coding-platform-metrics { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:13px; color:var(--muted); font:500 10px/1.4 "Geist Mono",monospace; }.coding-platform-metrics b { color:var(--fg); font-weight:600; }.coding-platform-error { padding:18px 0; color:var(--muted); font-size:12px; }.light .coding-platform:hover,.light .coding-platform:focus-visible { background:#f4f4f5; }.light .coding-platform-mark { background:#fff; }

@media (max-width:640px) { .coding-section { padding-bottom:32px; }.coding-overview { grid-template-columns:1fr; margin-bottom:22px; }.coding-overview-item,.coding-overview-item:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-right:0; border-bottom:1px solid var(--line); }.coding-overview-item:last-child { border-bottom:0; }.coding-overview-item strong { font-size:20px; }.coding-overview-item span { margin:0; text-align:right; }.coding-platforms { grid-template-columns:1fr; }.coding-platform { min-height:0; padding:16px 0; }.coding-platform:nth-child(odd),.coding-platform:nth-child(even) { padding-inline:0; border-right:0; }.coding-platform-primary { margin-top:16px; font-size:19px; }.coding-platform-metrics { gap:5px 12px; margin-top:10px; } }

.coding-overview { gap:0; background:rgba(255,255,255,.018); }.coding-overview-item { position:relative; padding-block:19px; }.coding-overview-item::before { position:absolute; top:0; left:0; width:3px; height:100%; content:""; background:var(--accent); opacity:.72; }.coding-overview-item:nth-child(2)::before { background:#a3a3a3; }.coding-overview-item:nth-child(3)::before { background:#22c55e; }.coding-overview-item strong { font-size:25px; }.coding-platforms { gap:10px; border:0; }.coding-platform { min-height:188px; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--card); }.coding-platform:nth-child(odd),.coding-platform:nth-child(even) { padding:20px; border-right:1px solid var(--line); }.coding-platform:hover,.coding-platform:focus-visible { border-color:var(--muted); background:rgba(255,255,255,.035); }.coding-platform[data-platform="github"]:hover,.coding-platform[data-platform="github"]:focus-visible { border-color:#8b8b8b; }.coding-platform[data-platform="leetcode"]:hover,.coding-platform[data-platform="leetcode"]:focus-visible { border-color:#fb923c; }.coding-platform[data-platform="codeforces"]:hover,.coding-platform[data-platform="codeforces"]:focus-visible { border-color:#60a5fa; }.coding-platform[data-platform="codechef"]:hover,.coding-platform[data-platform="codechef"]:focus-visible { border-color:#a78b6d; }.coding-platform-mark { width:40px; height:40px; flex-basis:40px; border-color:rgba(255,255,255,.16); border-radius:8px; background:#fff; }.coding-platform-mark img { display:block; width:23px; height:23px; object-fit:contain; }.coding-platform[data-platform="codeforces"] .coding-platform-mark { border-color:rgba(37,99,235,.4); color:inherit; }.coding-platform[data-platform="codechef"] .coding-platform-mark { border-color:rgba(91,70,56,.45); color:inherit; }.coding-platform-name { gap:3px; }.coding-platform-name strong { font-size:14px; }.coding-platform-name span { font-size:10px; }.coding-platform-primary { margin-top:28px; font-size:23px; }.coding-platform-primary small { font-size:10px; }.coding-platform-metrics { gap:7px; margin-top:15px; }.coding-platform-metrics span { padding:4px 6px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.02); font-size:10px; }.light .coding-overview { background:#f6f6f7; }.light .coding-platform { background:#fff; }.light .coding-platform:hover,.light .coding-platform:focus-visible { background:#fafafa; }.light .coding-platform-mark { border-color:#dedee1; }

@media (max-width:640px) { .coding-overview-item,.coding-overview-item:first-child { padding:13px 0 13px 12px; }.coding-overview-item::before { width:2px; }.coding-platforms { gap:8px; }.coding-platform,.coding-platform:nth-child(odd),.coding-platform:nth-child(even) { padding:16px; border-right:1px solid var(--line); }.coding-platform-mark { width:36px; height:36px; flex-basis:36px; border-radius:7px; }.coding-platform-mark img { width:21px; height:21px; }.coding-platform-primary { margin-top:19px; font-size:21px; }.coding-platform-metrics { margin-top:12px; } }

.coding-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px; border:0; background:transparent; }.coding-activity-panel { min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--card); }.coding-activity-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }.coding-activity-head > span { display:flex; min-width:0; align-items:center; gap:7px; color:var(--fg); font-size:12px; font-weight:650; }.coding-activity-head img { width:17px; height:17px; padding:2px; border-radius:4px; background:#fff; object-fit:contain; }.coding-activity-head b { overflow:hidden; color:var(--muted); font:500 10px/1.3 "Geist Mono",monospace; text-align:right; text-overflow:ellipsis; white-space:nowrap; }.coding-heatmap { display:grid; grid-template-columns:repeat(53,minmax(0,1fr)); grid-template-rows:repeat(7,minmax(0,1fr)); width:100%; aspect-ratio:53/7; gap:3px; }.coding-day { min-width:0; min-height:0; border-radius:2px; background:#20242c; }.coding-activity-panel[data-tone="github"] .coding-day.l1 { background:#0e4429; }.coding-activity-panel[data-tone="github"] .coding-day.l2 { background:#006d32; }.coding-activity-panel[data-tone="github"] .coding-day.l3 { background:#26a641; }.coding-activity-panel[data-tone="github"] .coding-day.l4 { background:#39d353; }.coding-activity-panel[data-tone="leetcode"] .coding-day.l1 { background:#713f12; }.coding-activity-panel[data-tone="leetcode"] .coding-day.l2 { background:#a16207; }.coding-activity-panel[data-tone="leetcode"] .coding-day.l3 { background:#d97706; }.coding-activity-panel[data-tone="leetcode"] .coding-day.l4 { background:#fbbf24; }.coding-activity-panel > small { display:block; margin-top:10px; color:var(--muted); font:500 9px/1 "Geist Mono",monospace; }.light .coding-activity-panel { background:#fff; }.light .coding-day { background:#e8eaed; }.light .coding-activity-panel[data-tone="github"] .coding-day.l1 { background:#9be9a8; }.light .coding-activity-panel[data-tone="github"] .coding-day.l2 { background:#40c463; }.light .coding-activity-panel[data-tone="github"] .coding-day.l3 { background:#30a14e; }.light .coding-activity-panel[data-tone="github"] .coding-day.l4 { background:#216e39; }.light .coding-activity-panel[data-tone="leetcode"] .coding-day.l1 { background:#fde68a; }.light .coding-activity-panel[data-tone="leetcode"] .coding-day.l2 { background:#fbbf24; }.light .coding-activity-panel[data-tone="leetcode"] .coding-day.l3 { background:#f59e0b; }.light .coding-activity-panel[data-tone="leetcode"] .coding-day.l4 { background:#d97706; }

@media (max-width:640px) { .coding-overview { grid-template-columns:1fr; gap:8px; margin-bottom:20px; }.coding-activity-panel { padding:14px; }.coding-activity-head { margin-bottom:13px; }.coding-heatmap { grid-template-columns:repeat(26,minmax(0,1fr)); aspect-ratio:26/7; gap:3px; }.coding-activity-head b { font-size:9px; }.coding-activity-panel > small { margin-top:8px; } }

.coding-heatmap { grid-auto-flow:column; }