:root{--color-link:#5f5f5f;--color-link-hover:#5f5f5f;--color-enter:#fff;--color-title:#fff;--color-content:#222325;--font-alt:200 6vw/1 "Comic Sans MS","Helvetica Neue","Microsoft Yahei","Microsoft Yahei",-apple-system,sans-serif}.fade{opacity:0;transition:all 1s;transform:translateY(200px)}.fade.in{opacity:1;transform:none}*{box-sizing:border-box;-webkit-text-size-adjust:none}html{font-size:20px!important}body,html{height:100%;margin:0;padding:0;border:0}body{font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none}ul{margin:0;padding:0}img{border:0;vertical-align:middle}body{cursor:auto}a,button,img{cursor:pointer}a{text-decoration:none;color:var(--color-link);outline:0}@font-face{font-family:iconfont;font-display:swap;src:url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAigAAsAAAAADxAAAAhSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqPYIxdATYCJAMoCxYABCAFhG0HgRQbrwwjESZs1EX2FweZ3MWewKz2pGZnd5rMSlW4wjhlUqUv84D8x7m53bQj8T4Hz9Pa78/Mnd2n0iCRzCSrJLcMiURoGqJmutdv1r4PT5v7d9ySVimxGAuMWltbA1uzisTgtO+MAvywyraIH900QMCZeai4teMO1gmaEPOX8IubdfdzChP1jinP/vLTMlNIWwgfwvr/71XNxGyQebMtQAGL4ftZY3bshT2lD1ygsYb9UrDBaktSIAyAV8G8mg6vwyQ+DQW4SZRK1da39uLEINgUBsxMjg/idPkxMRyF02WHXGmkjoA+Tv3htoBD/ffVR7IzEhpLJDyrc6xuhMo38nMJLNFtK1okQFJeFOD3AwFSgeGdJ6HxY7BpTdXt7rDhekwBYUHmefqNfJ52ywe8Pf12/kfRzyU6HfwaopmEpCIs0qP/5oGFQbBxoNA4cYGyBbuXoa+3ueANLKtgwZsTXgwclrAR5xDBiw1HAFRwwNtOFRR8mldBw48iL07dUYJRuABwq1dEQRr0EkgeEJytjF2tze6CwYExu/pqsyFh8T4X3nWCRDyPCNkPOmJCJesJ45x0dZ7ZAQiPZhKrPg1WvxXSLIdCVRpmzwyto5U+PA3m1TxlL1OjCa3VHpNprBF1yCbmqdWCfhWtXX1ApQqWdh8Ilkh52nfCNJ+L53wkQKLCPng0tJmAha1orDQS789B0LjthOYgckqtDlFAiJaABaz6q3xWo/CS7nFsshfpmUDHuhLw1S+x18gr9IXZRUweerFfz9VstpTR14f0a14lp1JiyGgHBKdIpQRMzkzTk7SJ0acASKbwZHSHbah8TqBg0wC3LcXkENygEZCXVByDejWfsqo1hWSyKBlKS34a052ZJkcSiajFJpCwrbJgzirubUaDBqtErwo0N6vGtGGwIk5rcKhF+8MCjshtnUVm0Km66QTjfMl0iKyJNqdCNa6ylrZn9PksdwrTuskVDLGcKR9ur6I1mQ3ZyRjiR3o0NkMqkzfa8JpQWW3nMF0dotV6a9UO0nR1HT0RZWtz8xu0ikeFoqEdgwR1WNZHbXkMRyqUo8306iPS6mdDjJYZdggX6TZvjvqcNouVosSwhLBUUUpYpE9EcGJwQggZwuMoMB6EEgFpMKlTe6hLSMJ6YK2viZi+w62rmPkyH2P2q0Mw+1Zs2VxRw0xcETBa8KiZUsGY0EC1rcJme9i6w7j6ACTDs8RJ9iJQwtNnLAvUDD+ER+1GdgaQwef2o5jt8Hb/XknfYagQ6cTaJW0TtAUiWIwQpRYbIjSaAxe9pcfh6L2F65yFFTZcXYlNowj4FkedgWbNOUQMC8LAJXvcWIQ+lgbfN2a7oxGGQjPYzcjjxIvrLxRkfGvYzFAYgbLdjeEHd1PD9d5xwoG7BB1XYTML4zr13uJwwAWuPCzMiOp19En4rYq0LsdE5ZVASxaS5NcXI2ByqaySf4OS3XDJ8+HHRBQrhXvwcmq+ng3dNyvLR5T5TjzNZZAPrshi2XfGLdcrrCvXLcfRHVaMobu/u0jObvNiDaETjwV2uM/n8lMNiYap+fpXufUoIrCb6D1HAZSfmOLeb6z/UXBKNqAAbH9cwW/hJw/accUmdiQ2ycZEzLU7KCBs0jcJAsjR2VnM8XPgss38HahiZ+de0KTx1gM4dXepdkGxvq/ttcjfc/NeCX6TvoVna1v0d4y+gMHRmHeBA1doEX0Hi7KI423G8iIt+Hyhh/d4GlA2/X3fKYa3PeorFPIF5pG8+G1hKjz+2x+jsIiYMjwOT9iXTlTYfljmWOZQRlB0QS/KHejQ8PrRQYVltu1lqVWeVg4WeN99143rYVojNHXnvic+Pw5sC5cTgje5lSabh9Ky+KKABfShC6X3PkeYs0dM2wbtA1PQ7dOTl67f3wX4DnErzsw8Rs+LjzLLwGomv8AqSD+PuHAu/sITgsF1h9SAmz9cuQue5IhuCExijCo8v2CezP+rsfD28IjoOelffvHjH3U69h87Mzu8jgf5H7Pu37lOIxT27/4ebPAy2jgemW0OflbgBOFfvfi9s64FlkzdDKT43QzwHzz9o8j5ubPoR7/ah/4Pgc5l6/mW62EEeSTliOhGJcuKxzgpbrUOLjc4ESedsj33x99nMfcFse9PxD0AnFLCxw1LP/3yjjrdeT+1xZRmyXi/7ZSZz1Hi0cAA14Qnl58kIL5HhELw065/nKwCF7XHEoBut+BlKnV/CO4s7+S9i7VfOX1Ze/FedHV275uUA09vAp8k1iWzy6cuy9uY0LtW1/hXEHM/0ww4hi4E/Xictq4B/qMJZB5A7vT3Ou9W/bbftf4C/ktCJxLCQ+JvgU66YCPBnIjFuX0mpnHvP3CO4k+ffCAucOE3Z72DcA/VyA7N/ZckyF/Eib5oHDxeDCmXmK9JsLp/60Y2PsVyx0gwdu3CuYHHSiCsjTrGGUtteI45YzZoHCSA4CSJbOipYOEhF2ycVICbFA3Xe4iYRVDGgmQHBBRBl6DxcwVC0D0CAv0VLOI+g00wGNyM/uv5jtdeoqtXwUKxhnIDqrg3UkivjIFf2Ey+EKdJ5/+hjFSCJIy9HZ/Yo5Rxzjg3qaoBI9zBB3kees8wCFusNGxVh0MUmbBzw4q73ZVXAhVUla+B0qZOKqxndlZXvp//ghoTryAxM37U/yAxot2DRChOQf6096lmbMvw0ayRUho1QB4vWAd80CjyYp2BIfwwC1VUqM1RHRxEdCWT1h7W7+yWtumtNYtA3FWNIOkMJguzKZ2NtJ3Kc11IFeWUtVUvwq4gf1Gyw20q+qd56pKtVLCXvX1gBPuLtB9M7kYtKhfwjGI8L9cL0kp9UPGw7XYA") format("woff2")}.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor;font-family:iconfont!important;font-size:inherit;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-github:before{content:"\e7ab"}.icon-twitter:before{content:"\ecc1"}.icon-other:before{content:"\e631"}.icon-email:before{content:"\e62d"}.icon-bokeyuan:before{content:"\e603"}.icon-xiaolian:before{content:"\e650"}main{overflow:hidden}.content,main{height:100vh;width:100%;position:relative}.content{background:0 0}.content-intro{z-index:100;height:200vh}.content-main{position:fixed;top:0;left:0;background:#060606}.content-inner{position:relative}.content-inner,.wrap{width:100%;height:100vh}.wrap{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-align:center}.grid-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.content-intro .content-inner{background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shape{height:100vh;width:100%;display:block;background:0 0}.shape-wrap{position:relative;z-index:0;margin:-5px 0 0;will-change:scroll-position;background:0 0}.shape path{fill:#151515}.content-title{font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif;font-size:4.7rem;font-weight:200;color:#fff;line-height:1;margin-top:.8em;margin-bottom:.3em;animation:whiteShadow 1.5s ease-in-out infinite alternate;text-shadow:#452d2d 0 0 1px,#fffffb 0 0 1px,#fffffb 0 0 2px}@media screen and (max-width:50em){.content-title{font-size:2rem}}@keyframes whiteShadow{0%{text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 5px #333,0 0 8px #333,0 0 9px #333,0 0 10px #333,0 0 15px #333}to{text-shadow:0 0 .5px #fff,0 0 1px #fff,0 0 1.5px #fff,0 0 2px #333,0 0 4px #333,0 0 5px #333,0 0 6px #333,0 0 8px #333}}.content-subtitle{color:#fff;font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif;font-size:1.2rem;font-weight:200;margin-bottom:2em;text-shadow:0 0 4px #fff}@media screen and (max-width:1024px){.content-subtitle{font-size:1rem}}.enter{color:#fff;font-size:.8rem;letter-spacing:3px;white-space:pre;pointer-events:auto;transition:all .4s;z-index:999;position:relative;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.7),transparent);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2s linear infinite;text-shadow:0 0 10px hsla(0,0%,100%,.3)}.enter:focus,.enter:hover{color:#5f5f5f}@keyframes shimmer{0%{background-position:200%;text-shadow:0 0 10px hsla(0,0%,100%,.3)}50%{text-shadow:0 0 20px hsla(0,0%,100%,.6)}to{background-position:-200%;text-shadow:0 0 10px hsla(0,0%,100%,.3)}}.arrow{position:absolute;left:49.5%;top:95%;transform-origin:50% 50%;transform:translate3d(-50%,0,0)}.arrow-1{animation:arrow-movement 2s ease-in-out infinite}.arrow-2{animation:arrow-movement 2s 1s ease-in-out infinite}.arrow:after,.arrow:before{background:#fff;content:"";display:block;height:3px;position:absolute;top:0;left:0;width:13px;box-shadow:1px 1px 20px 0 #fff}.arrow:before{transform:rotate(45deg) translateX(-10%);transform-origin:top left}.arrow:after{transform:rotate(-45deg) translateX(10%);transform-origin:top right}@keyframes arrow-movement{0%{opacity:0;top:92%}70%{opacity:1}to{opacity:0}}.content-subtitle span{animation:letter-glow .7s 0s ease both}@keyframes letter-glow{0%{opacity:0;text-shadow:0 0 1px hsla(0,0%,100%,.1)}66%{opacity:1;text-shadow:0 0 20px hsla(0,0%,100%,.9)}77%{opacity:1}to{opacity:.7;text-shadow:0 0 20px hsla(0,0%,100%,.2)}}.content-subtitle span:first-child{animation-delay:50ms}.content-subtitle span:nth-child(2){animation-delay:.1s}.content-subtitle span:nth-child(3){animation-delay:.15s}.content-subtitle span:nth-child(4){animation-delay:.2s}.content-subtitle span:nth-child(5){animation-delay:.25s}.content-subtitle span:nth-child(6){animation-delay:.3s}.content-subtitle span:nth-child(7){animation-delay:.35s}.content-subtitle span:nth-child(8){animation-delay:.4s}.content-subtitle span:nth-child(9){animation-delay:.45s}.content-subtitle span:nth-child(10){animation-delay:.5s}.content-subtitle span:nth-child(11){animation-delay:.55s}.content-subtitle span:nth-child(12){animation-delay:.6s}.content-subtitle span:nth-child(13){animation-delay:.65s}.content-subtitle span:nth-child(14){animation-delay:.7s}.content-subtitle span:nth-child(15){animation-delay:.75s}.content-subtitle span:nth-child(16){animation-delay:.8s}.content-subtitle span:nth-child(17){animation-delay:.85s}.content-subtitle span:nth-child(18){animation-delay:.9s}.content-subtitle span:nth-child(19){animation-delay:.95s}.content-subtitle span:nth-child(20){animation-delay:1s}.content-subtitle span:nth-child(21){animation-delay:1.05s}.content-subtitle span:nth-child(22){animation-delay:1.1s}.content-subtitle span:nth-child(23){animation-delay:1.15s}.content-subtitle span:nth-child(24){animation-delay:1.2s}.content-subtitle span:nth-child(25){animation-delay:1.25s}.content-subtitle span:nth-child(26){animation-delay:1.3s}.content-subtitle span:nth-child(27){animation-delay:1.35s}.content-subtitle span:nth-child(28){animation-delay:1.4s}.content-subtitle span:nth-child(29){animation-delay:1.45s}.content-subtitle span:nth-child(30){animation-delay:1.5s}.content-subtitle span:nth-child(31){animation-delay:1.55s}.content-subtitle span:nth-child(32){animation-delay:1.6s}.content-subtitle span:nth-child(33){animation-delay:1.65s}.content-subtitle span:nth-child(34){animation-delay:1.7s}.content-subtitle span:nth-child(35){animation-delay:1.75s}.content-subtitle span:nth-child(36){animation-delay:1.8s}.content-subtitle span:nth-child(37){animation-delay:1.85s}.content-subtitle span:nth-child(38){animation-delay:1.9s}#background{position:absolute;width:100%;height:100%;z-index:-1}#card{position:relative;width:100vw;height:100vh;color:#93979e;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;transition:width .5s ease,height .5s ease}#card .card-inner{padding:0;border:0;width:100%;max-width:700px}@media screen and (max-width:540px){#card .card-inner header h1{font-size:1rem!important}#card .card-inner header h2,#card .card-inner ul li{font-size:.8rem!important}}#card .card-inner header{margin-bottom:40px}#card .card-inner header img{border:3px solid #fff;border-radius:50%;box-shadow:0 0 1px 1px rgba(0,0,0,.3);transition:.4s ease-in-out;z-index:2;position:relative}#card .card-inner header h1{margin:15px 15px 0;color:#fff;font-size:2rem;line-height:1.2em;font-weight:300;z-index:2;position:relative}#card .card-inner header h2{color:#ccc;letter-spacing:3px;font-size:.8rem;font-weight:lighter;z-index:2;position:relative}#card .card-inner ul{position:relative;margin:0;list-style-type:none;display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-pack:distribute;justify-content:space-around;padding-bottom:40px}#card .card-inner ul li{z-index:2;position:relative;display:inline-block;transition:all .2s;width:100%;height:100%}#card .card-inner ul li a{color:#b6b6b6;transition:all .2s}#card .card-inner ul li a:hover{color:#f6f6f6;text-shadow:0 0 2px #f6f6f6}#card{z-index:2;pointer-events:none}#card .card-inner,#card a,#card button,#card header{pointer-events:auto}.grid-background{z-index:1}.enter{border:0;font:inherit;padding:0}@media (prefers-reduced-motion:reduce){.fade{transition:none;transform:none}.fade.in{opacity:1}.content-title,.enter,.arrow-1,.arrow-2{animation:none}.content-subtitle span{animation:none;opacity:.85}}a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* ===== v2 extensions: theming, i18n controls, projects, footer, overlay, toast ===== */
:root{--bg-main:#060606;--fg:#f2f3f5;--fg-dim:#93979e;--panel-bg:#161616;--panel-border:#333;--card-bg:rgba(255,255,255,.04);--card-border:rgba(255,255,255,.12);--ctrl-bg:rgba(20,20,22,.55);--focus:#fff}
html[data-theme=light]{--bg-main:#eef1f5;--fg:#1c1e21;--fg-dim:#5a5f66;--panel-bg:#fff;--panel-border:#d8dce2;--card-bg:rgba(0,0,0,.035);--card-border:rgba(0,0,0,.12);--ctrl-bg:rgba(255,255,255,.65);--focus:#111}
body{background:var(--bg-main)}
html.theme-transition,html.theme-transition *{transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease,fill .5s ease!important}
/* light-theme overrides of the base (dark) rules */
html[data-theme=light] .content-main{background:#eef1f5}
html[data-theme=light] .shape path{fill:#dfe4ea}
html[data-theme=light] .content-title{color:#23252a;animation:none;text-shadow:0 0 14px rgba(238,241,245,.95),0 0 28px rgba(238,241,245,.8),0 1px 2px rgba(0,0,0,.2)}
html[data-theme=light] .content-subtitle{color:#3a3d44;text-shadow:0 0 10px rgba(238,241,245,.9),0 0 20px rgba(238,241,245,.7)}
html[data-theme=light] .content-subtitle span{animation-name:letter-glow-light}
@keyframes letter-glow-light{0%{opacity:0}66%{opacity:1}77%{opacity:1}to{opacity:.78}}
html[data-theme=light] .enter{color:#23252a;background:linear-gradient(90deg,transparent,rgba(20,22,26,.75),transparent);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:shimmer-light 2s linear infinite}
@keyframes shimmer-light{0%{background-position:200%}to{background-position:-200%}}
html[data-theme=light] .arrow:after,html[data-theme=light] .arrow:before{background:#3a3d44;box-shadow:1px 1px 12px 0 rgba(0,0,0,.3)}
html[data-theme=light] #card{color:#5a5f66}
html[data-theme=light] #card .card-inner header h1{color:#1c1e21}
html[data-theme=light] #card .card-inner header h2{color:#555}
html[data-theme=light] #card .card-inner ul li a{color:#5a5f66}
html[data-theme=light] #card .card-inner ul li a:hover{color:#111;text-shadow:none}
html[data-theme=light] #card .card-inner header img{box-shadow:0 2px 12px rgba(0,0,0,.18)}
a:focus-visible,button:focus-visible{outline-color:var(--focus)}
/* skip link */
.skip-link{position:fixed;top:-100px;left:16px;z-index:2500;background:var(--panel-bg);color:var(--fg);border:1px solid var(--panel-border);padding:8px 14px;border-radius:8px;font-size:.7rem;transition:top .2s ease}
.skip-link:focus{top:16px}
/* floating controls */
.site-controls{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));display:flex;gap:8px;z-index:1500}
.ctrl-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--card-border);background:var(--panel-bg);color:var(--fg);display:flex;align-items:center;justify-content:center;font:inherit;font-size:.65rem;line-height:1;padding:0;transition:border-color .25s,color .25s,transform .25s;}
.ctrl-btn:hover{border-color:var(--fg-dim);transform:translateY(-1px)}
html[data-theme=dark] .ic-moon{display:none}
html[data-theme=light] .ic-sun{display:none}
/* copy email */
li.email-item{position:relative}
.copy-email{position:absolute;top:-14px;right:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--card-border);background:var(--panel-bg);color:var(--fg-dim);display:flex;align-items:center;justify-content:center;padding:0;transition:color .2s,border-color .2s}
.copy-email:hover{color:var(--fg);border-color:var(--fg-dim)}
/* projects */
.projects{margin-top:6px;z-index:2;position:relative}
.projects h3{margin:0 0 14px;font-size:.6rem;font-weight:400;letter-spacing:5px;text-transform:uppercase;color:var(--fg-dim)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px}
.project-card{display:block;padding:13px 14px 14px;border:1px solid var(--card-border);border-radius:14px;background:var(--card-bg);text-align:center;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.project-card:hover{transform:translateY(-3px);border-color:var(--fg-dim);box-shadow:0 10px 26px rgba(0,0,0,.22)}
html[data-theme=light] .project-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.1)}
.project-name{display:block;font-size:.72rem;color:var(--fg);letter-spacing:.5px}
.project-desc{display:block;margin-top:5px;font-size:.58rem;line-height:1.55;color:var(--fg-dim)}
@media screen and (max-width:540px){.project-grid{grid-template-columns:1fr;gap:9px;padding:0 26px}.project-card{padding:10px 12px}}
/* footer */
.site-footer{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:center;font-size:.6rem;letter-spacing:1px;color:var(--fg-dim);z-index:2}
/* help overlay */
.overlay[hidden]{display:none}
.overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.overlay-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:22px 26px;max-width:340px;width:calc(100% - 48px);color:var(--fg);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.overlay-panel h3{margin:0 0 14px;font-size:.8rem;font-weight:500;letter-spacing:2px}
.shortcut-list{margin:0;font-size:.65rem}
.shortcut-list div{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:5px 0}
.shortcut-list dt,.shortcut-list dd{margin:0}
.shortcut-list dd{color:var(--fg-dim);text-align:right}
kbd{font:inherit;font-size:.58rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:5px;padding:1px 7px}
.overlay-close{margin-top:16px;width:100%;min-height:44px;padding:7px 0;border-radius:8px;border:1px solid var(--panel-border);background:transparent;color:var(--fg);font:inherit;font-size:.65rem;transition:background .2s}
.overlay-close:hover{background:var(--card-bg)}
/* toast */
.toast[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(8px);z-index:3000;background:var(--panel-bg);color:var(--fg);border:1px solid var(--panel-border);padding:9px 20px;border-radius:999px;font-size:.65rem;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
/* fit on short screens */
@media screen and (max-height:760px){#card .card-inner header{margin-bottom:24px}#card .card-inner ul{padding-bottom:24px}}
@media screen and (max-height:640px){#card{overflow-y:auto}#card .card-inner{margin:auto;padding:52px 0 60px}}
@media (prefers-reduced-motion:reduce){html.theme-transition,html.theme-transition *{transition:none!important}.project-card,.ctrl-btn,.skip-link{transition:none}.enter{animation:none}}

/* --- layout fixes: intro text above fixed card layer, no glass --- */
.content-main{z-index:1;pointer-events:none}
.content-intro{z-index:10;position:relative}
.content-intro .wrap{position:relative;z-index:2;pointer-events:auto}
.content-intro .content-title,.content-intro .content-subtitle,.content-intro .enter{z-index:3}
.content-intro .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65em;padding-bottom:72px}
.content-subtitle{margin-bottom:.5em;max-width:92vw;line-height:1.6}
.content-intro .enter{margin-top:.35em;z-index:5}
.content-intro .arrow{z-index:1;pointer-events:none}
.content-intro .arrow-1,.content-intro .arrow-2{top:auto;bottom:18px}
.ctrl-btn{background:var(--panel-bg)!important}
.overlay{background:rgba(0,0,0,.45)!important}
#card .card-inner,#card a,#card button,#card header,#card .projects,#card .site-footer{pointer-events:auto}
#gridCanvas{pointer-events:auto}

/* --- v3: accessibility + mobile UX --- */
html[data-theme=dark]{color-scheme:dark}
html[data-theme=light]{color-scheme:light}
/* focus: thicker, theme-aware, never hidden behind neighbours */
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px;z-index:10;position:relative}
.ctrl-btn:focus-visible,.copy-email:focus-visible{border-radius:50%}
/* social links: full-height >=44px touch targets */
#card .card-inner ul li a{display:block;padding:10px 4px;min-height:44px}
li.email-item{padding-right:0}
/* readable small text (no low-opacity dimming) */
.project-desc{font-size:.62rem}
.projects h3{font-size:.62rem}
/* bigger targets for touch devices */
@media (pointer:coarse){
  .ctrl-btn{width:44px;height:44px}
  .copy-email{width:32px;height:32px;top:-18px}
  .copy-email::after{content:"";position:absolute;inset:-6px}
  .overlay-close{min-height:48px}
  .skip-link{padding:12px 18px}
}

/* --- v4: enter keeps the shimmer but is always visible as "enter" --- */
/* Solid fill by default; only clip to the gradient where the browser supports it,
   and never let the gradient drop to fully transparent (letters stay >=4.5:1 mid-shimmer). */
.enter{-webkit-text-fill-color:currentColor;background:none;min-height:44px;padding:8px 16px}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .enter{
    -webkit-text-fill-color:transparent;
    background:linear-gradient(90deg,hsla(0,0%,100%,.62),#fff,hsla(0,0%,100%,.62));
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
  }
  html[data-theme=light] .enter{
    background:linear-gradient(90deg,rgba(20,22,26,.8),#14161a,rgba(20,22,26,.8));
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
  }
}
@media (pointer:coarse){.enter{min-height:48px;padding:12px 24px}}
/* hover/focus: solid high-contrast fill + underline (base rule used #5f5f5f on dark) */
.enter:hover,.enter:focus{color:#fff;-webkit-text-fill-color:currentColor;background:none;animation:none;text-decoration:underline;text-underline-offset:6px}
html[data-theme=light] .enter:hover,html[data-theme=light] .enter:focus{color:#111}

/* ===== v5 polish: spacing, typography, contrast, cards, footer, safe-area ===== */

/* -- intro typography -- */
.content-title{letter-spacing:.01em;margin-top:.6em;margin-bottom:.25em}
.content-subtitle{line-height:1.7;letter-spacing:.04em;max-width:min(92vw,34em);padding:0 1em;margin-bottom:.4em}

/* -- stronger light-theme halo so intro text stays readable over the fluid bg -- */
html[data-theme=light] .content-title{color:#1f2126;text-shadow:0 0 2px rgba(238,241,245,.95),0 0 10px rgba(238,241,245,.95),0 0 22px rgba(238,241,245,.9),0 0 42px rgba(238,241,245,.8),0 1px 3px rgba(0,0,0,.16)}
html[data-theme=light] .content-subtitle{color:#2e3138;text-shadow:0 0 2px rgba(238,241,245,.95),0 0 8px rgba(238,241,245,.95),0 0 18px rgba(238,241,245,.9),0 0 34px rgba(238,241,245,.75)}
html[data-theme=dark] .content-subtitle{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35)}
html[data-theme=dark] .content-subtitle span{animation-name:letter-glow-dark}
@keyframes letter-glow-dark{0%{opacity:0;text-shadow:0 0 1px hsla(0,0%,100%,.1)}66%{opacity:1;text-shadow:0 0 20px hsla(0,0%,100%,.9)}77%{opacity:1}to{opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.4),0 0 16px hsla(0,0%,100%,.2)}}

/* -- controls: safe-area aware, soft resting shadow, subtle press state -- */
.site-controls{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
.ctrl-btn{transition:border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.ctrl-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.16)}
.ctrl-btn:active{transform:translateY(0) scale(.94);box-shadow:none}
html[data-theme=light] .ctrl-btn{box-shadow:0 1px 6px rgba(15,23,42,.1)}

/* -- keep intro text clear of the fixed controls and device notches -- */
.content-intro .wrap{padding-top:calc(56px + env(safe-area-inset-top));padding-bottom:calc(72px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
.content-intro .arrow-1,.content-intro .arrow-2{bottom:calc(18px + env(safe-area-inset-bottom))}
@media screen and (max-height:520px){
  .content-title{font-size:2.3rem;margin-top:.3em}
  .content-subtitle{font-size:.85rem;margin-bottom:.6em}
  .content-intro .wrap{gap:.4em;padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* -- card typography & rhythm -- */
#card .card-inner header{margin-bottom:34px}
#card .card-inner header h1{margin:16px 15px 0;letter-spacing:.02em}
#card .card-inner header h2{margin:12px 15px 0;line-height:1.6}
#card .card-inner ul{max-width:560px;padding-bottom:34px}
#card .card-inner ul li a{border-radius:10px;transition:color .2s ease,transform .2s ease,text-shadow .2s ease}
#card .card-inner ul li a:hover{transform:translateY(-2px)}
#card .card-inner ul li a .icon{margin-bottom:7px}
.copy-email{transition:opacity .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.copy-email:hover{transform:scale(1.08)}
@media screen and (max-height:760px){#card .card-inner header{margin-bottom:22px}#card .card-inner ul{padding-bottom:22px}}

/* -- project cards -- */
.projects h3{margin:0 0 16px;letter-spacing:6px;text-indent:6px}
.project-grid{gap:14px;padding:0 20px}
.project-card{padding:16px 14px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
.project-card:hover,.project-card:focus-visible{transform:translateY(-2px);border-color:var(--fg-dim);box-shadow:0 8px 22px rgba(0,0,0,.2)}
html[data-theme=light] .project-card:hover,html[data-theme=light] .project-card:focus-visible{box-shadow:0 8px 22px rgba(15,23,42,.1)}
.project-name::after{content:"\2197";display:inline-block;margin-left:5px;font-size:.5rem;opacity:0;transform:translate(-2px,2px);transition:opacity .22s ease,transform .22s ease}
.project-card:hover .project-name::after,.project-card:focus-visible .project-name::after{opacity:.7;transform:translate(0,0)}
.project-desc{margin-top:6px;line-height:1.6}
@media screen and (max-width:540px){.project-grid{gap:10px}.project-card{padding:13px 14px}}

/* -- footer -- */
.site-footer{bottom:calc(10px + env(safe-area-inset-bottom));letter-spacing:1.5px;opacity:.8}
.site-footer .footer-sep{opacity:.55}
@media screen and (max-width:540px){.site-footer{flex-wrap:wrap;padding:0 16px;row-gap:2px}}

/* -- toast above home-indicator -- */
.toast{bottom:calc(44px + env(safe-area-inset-bottom))}

/* -- overlay panel: match card radius/spacing -- */
.overlay-panel{border-radius:14px;padding:24px 26px}
kbd{padding:2px 8px}

@media (prefers-reduced-motion:reduce){
  .ctrl-btn,.copy-email,#card .card-inner ul li a,.project-name::after{transition:none}
  .ctrl-btn:hover,.copy-email:hover,#card .card-inner ul li a:hover,.project-card:hover,.project-card:focus-visible{transform:none}
}