:root{--ink:#16475d;--muted:#365f6e;--glass:linear-gradient(135deg,#f4ffffed,#d5f5f3db 55%,#b3e2eedb)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);font:15px/1.65 'Segoe UI',Tahoma,Arial,sans-serif;background:#3aaed3 url('../assets/reference-1.jpg') center/cover fixed}a{color:inherit}button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #007ca9;outline-offset:3px}.skip{position:fixed;top:-100px;background:white;padding:10px;z-index:3000}.skip:focus{top:10px}.topbar{max-width:1120px;margin:24px auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;border:1px solid white;border-radius:8px;background:linear-gradient(#efffffee,#c5e9eddb 49%,#a7d7e4d9 50%,#ecffffe8);box-shadow:0 4px 20px #004c6733}.brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:600;letter-spacing:-1px;text-decoration:none}.brand-light{font-weight:300}.orb{height:44px;width:44px;border-radius:50%;display:grid;place-items:center;font:italic 36px Georgia;color:white;background:radial-gradient(ellipse at 50% 12%,#ffffffb0,transparent 55%),linear-gradient(#5de5ee,#057fa5 53%,#0cbeb2 55%,#85f4cc);border:1px solid white;box-shadow:0 2px 5px #00557566}.topbar nav{display:flex;gap:25px;font-size:13px}.topbar nav a{text-decoration:none}.topbar nav a:hover{text-decoration:underline}main,.site-footer{max-width:1120px;margin:auto}.hero-layout{display:grid;grid-template-columns:340px 1fr;gap:24px;margin:36px 0 24px;align-items:stretch}.window{border:1px solid #f4ffff;border-radius:8px;background:var(--glass);box-shadow:inset 0 0 0 4px #ebffff44,0 8px 25px #00588433;backdrop-filter:blur(14px);overflow:hidden}.titlebar{margin:4px 4px 0;padding:6px 12px;background:linear-gradient(#ffffffb5,#b5e5f075);border-bottom:1px solid white;font-size:12px;text-shadow:0 1px white}.window-body{padding:28px}h1,h2,h3,p{margin-top:0}h1{font-weight:400;font-size:64px;line-height:1.03;letter-spacing:-3px;margin:12px 0 24px}h2{font-size:27px;font-weight:400;line-height:1.2;margin-bottom:22px}h3{font-size:22px;font-weight:500;line-height:1.25;margin-bottom:16px}p{color:var(--muted);margin-bottom:16px}.aqua-button,.glass-button{display:inline-block;border:1px solid #5b98ae;border-radius:5px;padding:5px 15px;background:linear-gradient(#fff,#d4f7fa 48%,#9cd7e5 49%,#d5f7f5);color:#16475d;font-size:12px;text-decoration:none}.hero-image{display:block;width:100%;height:100%;min-height:410px;object-fit:cover;border:1px solid white;border-radius:8px;box-shadow:0 8px 25px #00588433}.image-pair{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;margin-bottom:45px}.image-pair img{display:block;width:100%;height:330px;object-fit:cover;border:1px solid white;border-radius:6px;box-shadow:0 8px 25px #00588433}.image-pair img:last-child{object-position:center 42%}.about-window{max-width:760px;margin:0 0 45px}.about-window .window-body{padding:28px 32px}.about-window p:last-child{margin-bottom:0}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-note{font-size:12px}.site-footer{display:flex;gap:24px;align-items:center;padding:35px 0 150px;font-size:12px}.site-footer a:last-child{margin-left:auto}#desktop-pet{width:300px;right:16px;bottom:16px}#secret-view{height:100dvh;background:#a2e0f5}.secret-toolbar{height:48px;padding:8px 12px}#secret-frame{width:100%;height:calc(100dvh - 48px);border:0}@media(max-width:1180px){.topbar,main,.site-footer{margin-left:24px;margin-right:24px}}@media(max-width:850px){.topbar{margin:12px;padding:12px}.brand{font-size:20px}.orb{width:35px;height:35px;font-size:28px}.topbar nav{gap:14px}main,.site-footer{margin-left:16px;margin-right:16px}.hero-layout{grid-template-columns:1fr;margin-top:20px;gap:16px}.hero-image{min-height:0;height:290px}.welcome-window .window-body{padding:24px}h1{font-size:48px;margin:0 0 20px}.image-pair{gap:12px;grid-template-columns:1fr 1fr;margin-bottom:30px}.image-pair img{height:220px}.project-grid{grid-template-columns:1fr;gap:16px}.about-window{margin-bottom:32px}#desktop-pet{width:260px}.site-footer{padding-bottom:130px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Windows 7 Aero glass and command buttons. */
:root{--glass:linear-gradient(135deg,#e9f8ffba,#d7eef5a6 55%,#c0e0ee99)}
.topbar{border-color:#ffffff55;background:linear-gradient(115deg,#d8edff70,#99c4e947 48%,#7babd052 49%,#bcdcf566);box-shadow:0 5px 20px #001d3926;backdrop-filter:none}
.window{border-color:#e6f5ff66;background:var(--glass);box-shadow:0 8px 24px #002b4926;backdrop-filter:none}
.window-body{margin:0;background:transparent;border:0;border-radius:0}
.titlebar{border-bottom-color:#ffffff24;background:linear-gradient(#edfaff2e,#c1e2f01a);color:#173f57;text-shadow:0 0 5px #fffffff0,0 1px #ffffffa6}
.hero-image,.image-pair img{border-color:#ffffff47;box-shadow:0 0 0 4px #d8edff1a,0 8px 25px #002c4930}
.orb{border-color:#ffffff73}
.aqua-button,.glass-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:25px;padding:3px 15px;border:1px solid #707070;border-radius:3px;background:linear-gradient(#f2f2f2 0%,#ebebeb 46%,#ddd 47%,#cfcfcf 100%);box-shadow:inset 0 0 0 1px #ffffffbd,0 1px 1px #0000000d;color:#1b1b1b;font:12px/1.4 'Segoe UI',Tahoma,sans-serif;text-shadow:0 1px #ffffffa6;text-decoration:none}
.aqua-button:hover,.glass-button:hover{border-color:#3c7fb1;background:linear-gradient(#eaf6fd,#d9f0fc 46%,#bee6fd 47%,#a7d9f5);box-shadow:inset 0 0 0 1px #ffffffd9,0 0 3px #55b8f15c}
.aqua-button:active,.glass-button:active{border-color:#2c628b;background:linear-gradient(#c9e4f4,#bddff2 46%,#a4d3ed 47%,#9ac9e0);box-shadow:inset 0 1px 3px #174f7138}
.topbar nav{gap:6px}.topbar nav a{padding:4px 11px;border:1px solid transparent;border-radius:3px}.topbar nav a:hover{border-color:#ffffff66;background:linear-gradient(#ffffff5c,#beddf63b);box-shadow:inset 0 0 0 1px #416e8d33;text-decoration:none}

/* Keep glass panels in one paint layer, without nested rectangular rims. */
.topbar,.window{isolation:isolate;background-clip:padding-box;-webkit-backdrop-filter:none}.window{overflow:hidden}.titlebar{margin:0;border-radius:7px 7px 0 0}.hero-layout>*{min-width:0}.topbar nav{flex-wrap:wrap}