@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--bg:#f6f5f2;--ink:#20201f;--muted:#72716e;--line:#d9d8d3;--card:#e8e7e2;--paper:#fff;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#252524;color:var(--ink);font-family:'DM Sans',Arial,'Microsoft YaHei',sans-serif}body.dark{--bg:#181818;--ink:#f1f0eb;--muted:#aaa9a4;--line:#3c3c39;--card:#292927;--paper:#222;color-scheme:dark}.frame{background:var(--bg);margin:12px;border-radius:20px;overflow:hidden}a{color:inherit;text-decoration:none}a:hover{opacity:.75}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.skip{position:fixed;top:-100px;z-index:10;padding:12px;background:var(--bg)}.skip:focus{top:20px}header{height:110px;display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:auto;padding:0 60px}.logo{font-size:28px;font-weight:700;letter-spacing:-1px}.logo sup{font-size:11px;letter-spacing:0;margin-left:7px}nav{display:flex;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:40px;padding:7px;gap:3px}nav a{font-size:13px;padding:10px 20px;border-radius:25px}nav a:hover{background:var(--card)}nav button{background:none;border:0;border-left:1px solid var(--line);color:var(--ink);font-size:23px;padding:0 13px;cursor:pointer}.github,.eyebrow,.hero-bottom,.meta,footer{font-size:11px;letter-spacing:1.5px}.hero{max-width:1320px;min-height:710px;margin:auto;padding:76px 60px 0;position:relative;display:grid;grid-template-columns:1fr 270px;gap:0 30px}.intro{position:relative;z-index:1}.eyebrow{font-weight:500;line-height:1.8}h1{font-size:clamp(40px,5.3vw,72px);font-weight:500;letter-spacing:-3px;line-height:1.1;margin:25px 0}em{font-family:'Instrument Serif',Georgia,'SimSun',serif;font-weight:400}h1 em{font-size:1.1em}.lede{font-size:22px;line-height:1.7;margin:25px 0 12px}.muted{color:var(--muted);font-size:13px}.actions{display:flex;align-items:center;gap:28px;margin:32px 0 65px;font-size:13px}.button{display:inline-block;padding:17px 23px;border-radius:35px;font-size:13px;background:var(--ink);color:var(--bg);transition:transform .25s}.button:hover{transform:translateY(-3px)}figure{margin:35px 0 0;position:relative;align-self:start;transform:rotate(5deg);background:var(--paper);padding:12px 12px 0;box-shadow:0 20px 45px #00000010;transition:transform .4s}figure:hover{transform:rotate(0) translateY(-5px)}figure img{width:100%;height:285px;object-fit:cover;object-position:center 28%;background:#eee}figcaption{display:flex;justify-content:space-between;padding:20px 0;font-size:11px}figcaption span{color:var(--muted)}figure b{position:absolute;font-size:90px;right:-24px;bottom:-35px;font-weight:400}.orb{position:absolute;width:500px;height:500px;right:80px;top:0;opacity:.16;border-radius:50%;background:repeating-radial-gradient(ellipse at 35% 35%,transparent 0 12px,#8a8986 14px 15px,transparent 17px 26px);mask-image:radial-gradient(black,transparent 68%);animation:drift 20s linear infinite;pointer-events:none}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:25px 0;color:var(--muted);position:relative}.projects,.about,.contact,footer{max-width:1200px;margin:auto}.projects{padding:95px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}.section-heading>a,.about a{font-size:13px}h2{font-size:38px;font-weight:500;letter-spacing:-1px;line-height:1.35;margin:20px 0 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.art{height:330px;background:var(--card);position:relative;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.terminal{width:77%;background:#242424;color:#deded9;border-radius:9px;transform:rotate(-5deg);box-shadow:0 24px 40px #0002;transition:transform .4s}.project:hover .terminal,.project:hover .browser{transform:rotate(0) translateY(-7px)}.bar{padding:13px 15px;border-bottom:1px solid #6665;font-size:9px}.bar span{float:right;color:#aaa;letter-spacing:1px}pre{padding:8px 23px;font:13px/1.9 monospace}pre span{color:#888;margin-right:15px}.flow{padding:12px 23px 25px;font:10px monospace}.art>small{position:absolute;bottom:16px;left:20px;font-size:8px;color:var(--muted);letter-spacing:1.5px}.web{background:#dcdcd9}.browser{width:70%;background:#fafaf6;border:1px solid #bbb;border-radius:8px;transform:rotate(5deg);color:#242424;box-shadow:0 24px 40px #0002;transition:transform .4s}.mock{padding:25px}.mock small{font-size:8px;letter-spacing:2px}.mock strong{display:block;font:36px/1.05 Georgia;margin:20px 0}.mock i{display:block;width:80%;height:5px;background:#ddd;margin:9px 0}.mock i:last-child{width:55%}.project h3{font-size:20px;font-weight:500;margin:20px 0 10px}.project h3 span{float:right}.project p,.note{font-size:13px;line-height:1.8;color:var(--muted)}.meta{display:flex;justify-content:space-between;font-size:10px;padding-top:10px}.note{font-size:11px;margin-top:25px}.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding:80px 0 100px}.about>div>p:not(.eyebrow){font-size:16px;line-height:1.95;color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}.tags span{padding:9px 12px;border:1px solid var(--line);border-radius:25px;font-size:11px}.contact{padding:60px;background:var(--card);border-radius:15px;position:relative;overflow:hidden}.contact h2{font-size:55px;margin-bottom:30px}.star{position:absolute;right:100px;top:60px;font-size:230px;font-weight:400;animation:turn 35s linear infinite}footer{padding:40px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}@keyframes drift{50%{transform:rotate(20deg) scale(1.1)}}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:1320px){.projects,.about,.contact,footer{margin-left:60px;margin-right:60px}}@media(max-width:900px){header{padding:0 30px}.hero{padding:65px 30px 0;grid-template-columns:1fr 220px}figure{padding:8px}figure img{height:230px}h1{font-size:48px;letter-spacing:-2px}.projects,.about,.contact,footer{margin-left:30px;margin-right:30px}.art{height:280px}.star{right:40px;font-size:160px}.about{gap:30px}.mock strong{font-size:28px}}@media(max-width:650px){.frame{margin:6px;border-radius:15px}header{height:88px;padding:0 20px}.logo{font-size:24px}.github{display:none}nav a{padding:9px 14px}.hero{padding:40px 24px 0;display:flex;flex-direction:column;min-height:auto}h1{font-size:clamp(32px,8.3vw,52px);letter-spacing:-1.8px}.lede{font-size:19px}.actions{margin-bottom:25px}figure{width:190px;align-self:center;margin:15px 0 55px}figure img{height:190px}figure b{font-size:64px}.hero-bottom{width:100%;font-size:8px;gap:10px}.hero-bottom span:last-child{display:none}.orb{width:360px;height:450px;right:-90px;top:50px}.projects,.about,.contact,footer{margin-left:24px;margin-right:24px}.projects{padding:60px 0}.section-heading{display:block}.section-heading>a{display:inline-block;margin-top:20px}h2{font-size:29px}.grid,.about{grid-template-columns:1fr}.grid{gap:40px}.art{height:290px}.about{padding:45px 0 55px;gap:15px}.contact{padding:30px 24px}.contact h2{font-size:36px;position:relative;z-index:1}.star{font-size:105px;right:15px;top:70px;opacity:.12}footer{gap:20px;font-size:9px;line-height:1.7}footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}