/* Website: light, dotted canvas, real browser windows, dark code-editor cards */
[data-page="website"]{--mono:'JetBrains Mono',ui-monospace,monospace}
body[data-page="website"]{background-image:radial-gradient(#CBD2E3 1px,transparent 1px);background-size:22px 22px}
.hweb{position:relative;overflow:hidden;padding:var(--s8) 0 var(--s9)}
.hweb .wrap{display:grid;gap:var(--s8);align-items:center}
@media(min-width:900px){.hweb .wrap{grid-template-columns:1.05fr .95fr}}
.hweb h1{font-size:clamp(3.4rem,11.5vw,9rem);line-height:.9;letter-spacing:-.045em;margin:var(--s4) 0 var(--s5)}
.hweb h1 span{background:var(--accent);color:#fff;padding:0 .1em;border-radius:.14em;display:inline-block;transform:rotate(-2deg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.chip{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-weight:700;font-size:.9rem;box-shadow:0 2px 0 var(--border)}
.hweb-art{position:relative;margin:0 var(--s4) var(--s4) 0}
.hweb-art::before{content:"";position:absolute;inset:7% -5% -5% 7%;background:var(--accent);border-radius:30px;transform:rotate(3deg)}
.hweb-art .t{position:relative;border:0;border-radius:24px;box-shadow:0 30px 80px rgba(47,91,255,.28)}
.br{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(20,22,26,.14)}
.br-bar{display:flex;align-items:flex-end;gap:7px;padding:10px 14px 0;background:#EEF0F5}
.br-bar i{width:10px;height:10px;border-radius:50%;background:#C9CEDA;margin-bottom:11px}
.br-tab{margin-left:12px;padding:8px 18px;border-radius:10px 10px 0 0;background:var(--surface);font:500 .76rem/1 var(--mono);color:var(--muted)}
.br .t{border:0;border-radius:0}
.site{display:grid;gap:var(--s6);align-items:center;margin-bottom:var(--s9)}
@media(min-width:900px){.site{grid-template-columns:1.6fr 1fr;gap:var(--s8)}.site .br{order:-1}.site.alt{grid-template-columns:1fr 1.6fr}.site.alt .br{order:0}}
.site .no{font:500 .85rem var(--mono);color:var(--accent)}
.site h3{font:800 clamp(2rem,4vw,3.2rem)/1 var(--display);margin:var(--s3) 0 var(--s4)}
.site .brand{border:1px solid var(--border);margin:0}
.site p{margin:var(--s3) 0 0;color:var(--muted);font:500 .8rem var(--mono)}
.code{background:#14161A;color:#E8EAF0;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(20,22,26,.2)}
.code-bar{display:flex;gap:8px;align-items:flex-end;padding:10px 14px 0;background:#0C0E12;font:500 .78rem var(--mono);color:#9AA0AE}
.code-bar b{font-weight:500;line-height:1;color:#E8EAF0;padding:8px 14px;background:#14161A;border-radius:10px 10px 0 0}
.code-body{padding:var(--s4)}.code .t{background:#0C0E12;border-color:#2A2F3A}
.code h3{margin:var(--s4) 0 var(--s1);color:#fff}.code p{color:#9AA0AE;margin:0 0 var(--s4)}
.code .btn.ghost{color:#fff;border-color:#3A3F4B}
.steps .num{font:800 2.4rem/1 var(--display);color:var(--accent)}

/* the whole project card is a link (it opens in a new tab) */
.code{position:relative}.code .btn::after{content:"";position:absolute;inset:0}
.code:hover{box-shadow:0 24px 70px rgba(47,91,255,.25)}

/* hero animation: a page loads, scrolls, and a cursor clicks the button (decorative) */
.hweb-art .wa{position:relative;container-type:inline-size;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(47,91,255,.28)}
.wa-bar{display:flex;align-items:flex-end;gap:7px;padding:10px 14px 0;background:#EEF0F5;position:relative}
.wa-bar i{width:10px;height:10px;border-radius:50%;background:#C9CEDA;margin-bottom:11px}
.wa-tab{margin-left:12px;padding:8px 18px;border-radius:10px 10px 0 0;background:#fff;font:500 .76rem/1 var(--mono);color:var(--muted)}
.wa-load{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform-origin:left;animation:wa-load 9s infinite}
.wa-view{position:relative;aspect-ratio:16/11;overflow:hidden;background:#fff}
.wa-page{position:absolute;left:0;right:0;top:0;padding:4cqw;display:grid;gap:4.5cqw;animation:wa-scroll 9s ease-in-out infinite}
.wa-nav{display:flex;align-items:center;gap:3cqw;height:6cqw}
.wa-nav b{width:12cqw;height:4cqw;border-radius:1cqw;background:var(--accent)}
.wa-nav span{width:7cqw;height:1.6cqw;border-radius:1cqw;background:#D5DAE6}
.wa-nav em{margin-left:auto;width:11cqw;height:4cqw;border-radius:2cqw;background:#14161A}
.wa-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:4cqw;align-items:center}
.wa-txt s{display:block;height:4cqw;border-radius:1cqw;background:#14161A;margin-bottom:2cqw}
.wa-txt .l1{width:92%}.wa-txt .l2{width:68%}.wa-txt .l3{width:84%;height:2cqw;background:#D5DAE6}
.wa-btn{display:block;width:21cqw;height:6.4cqw;border-radius:3.2cqw;background:var(--accent);margin-top:3cqw;animation:wa-btn 9s infinite}
.wa-img{position:relative;aspect-ratio:4/3;border-radius:2.5cqw;background:#DCE3FF;overflow:hidden}
.wa-img s{position:absolute;left:12%;right:12%;bottom:0;height:62%;background:var(--accent);border-radius:3cqw 3cqw 0 0;animation:wa-rise 9s infinite}
.wa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.wa-cards>div{border:1px solid var(--border);border-radius:2cqw;padding:2.5cqw;display:grid;gap:1.6cqw}
.wa-cards s{display:block;height:2cqw;border-radius:1cqw;background:#D5DAE6}.wa-cards s:first-child{height:9cqw;background:#E6EBFF;border-radius:1.5cqw}
.wa-band{background:#14161A;border-radius:3cqw;padding:5cqw;display:grid;gap:2cqw}
.wa-band s{display:block;height:2.4cqw;border-radius:1cqw;background:#3A3F4B;width:70%}.wa-band s:first-child{background:#fff;width:46%;height:3.4cqw}
.wa-cur{position:absolute;width:5.5cqw;height:5.5cqw;left:78%;top:70%;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));animation:wa-cur 9s ease-in-out infinite}
@keyframes wa-load{0%{transform:scaleX(0);opacity:1}7%{transform:scaleX(1);opacity:1}10%,100%{transform:scaleX(1);opacity:0}}
@keyframes wa-scroll{0%,16%{transform:translateY(0)}46%,58%{transform:translateY(-34%)}86%,100%{transform:translateY(0)}}
@keyframes wa-btn{0%,19%{transform:none;box-shadow:0 0 0 0 rgba(47,91,255,0)}22%{transform:scale(.9)}26%{transform:none;box-shadow:0 0 0 2.4cqw rgba(47,91,255,.22)}34%,100%{transform:none;box-shadow:0 0 0 0 rgba(47,91,255,0)}}
@keyframes wa-rise{0%{transform:translateY(100%)}9%,100%{transform:none}}
@keyframes wa-cur{0%{left:80%;top:72%}14%,23%{left:24%;top:42%}25%{left:24%;top:42%;transform:scale(.8)}28%{transform:scale(1)}42%,60%{left:62%;top:58%}82%,100%{left:80%;top:72%}}
@media(prefers-reduced-motion:reduce){.wa-load{display:none}.wa-page,.wa-btn,.wa-img s,.wa-cur{animation:none}}

/* featured projects: white browser frame, the whole image is the link */
.proj h3{margin:var(--s4) 0 0}
.pimg{position:relative;display:block;overflow:hidden}
.pimg .t{border:0;border-radius:0}
.pimg img{transition:transform .5s}
.pimg:hover img,.pimg:focus-visible img{transform:scale(1.04)}
.pimg::after{content:"";position:absolute;inset:0;background:rgba(20,22,26,0);transition:background .25s;pointer-events:none;z-index:1}
.pimg:hover::after,.pimg:focus-visible::after{background:rgba(20,22,26,.3)}
.pgo{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;gap:8px;align-items:center;padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,-35%);transition:opacity .25s,transform .25s;pointer-events:none}
.pimg:hover .pgo,.pimg:focus-visible .pgo{opacity:1;transform:translate(-50%,-50%)}