.full-width-background{width: 100%;
    display: block;}
.container{max-width: 1200px; 
    margin: auto; 
    padding: 0 15px; 
    text-align: center;}
.main,.section-content,footer{width: 100%;}
header,footer{max-width: 100%;}
@media (max-width: 1200px) {.container{padding: 0 30px;}}
.logo{display: inline-flex;
    align-items: center;
    font-size: 2rem; 
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-decoration: none;}
.logo .logo-icon{font-size: 1.5em; 
    margin-right: 0.5rem;}
.logo,.nav-links a{transition: color 0.3s ease;}
:is(h1, h2){font-size: 2.5rem; 
    margin-bottom: 40px;
    text-transform: uppercase;
    padding: 15px 30px; 
    position: relative; 
    display: inline-block; 
    background: rgba(255, 255, 255, 0.5); 
    border-radius: 10px; 
    z-index: 2; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;}
:is(h1, h2){text-shadow: 
        1px 1px 0 rgba(0,0,0,0.6),
        2px 2px 0 rgba(0,0,0,0.4),
        3px 3px 0 rgba(0,0,0,0.3);}
:is(h1, h2)::before{content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;}
#about :is(h1, h2),#about :is(h1, h2)::before{}
#services :is(h1, h2),#services :is(h1, h2)::before{}
#portfolio :is(h1, h2),#portfolio :is(h1, h2)::before{}
#testimonials :is(h1, h2),#testimonials :is(h1, h2)::before{}
#blog :is(h1, h2),#blog :is(h1, h2)::before{background-color: #ffb199; color: #ffb199;}
#contact :is(h1, h2),#contact :is(h1, h2)::before{background-color: #ff7e5f; color: #ff7e5f;}
#about-img{transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
#about-img:hover{transform: scale(1.05); 
    box-shadow: 0 0 20px rgba(255, 194, 194, 0.787), 
                 0 0 30px rgba(255, 147, 111, 0.75);}
body.dark-mode #about-img{transition: transform 0.3s ease, box-shadow 0.3s ease;}
body.dark-mode #about-img:hover{transform: scale(1.05); 
    box-shadow: 0 0 20px rgba(255, 84, 68, 0.6), 
                 0 0 30px rgba(255, 177, 153, 0.6);}
:is(h1, h2){box-shadow: 0 0 8px rgba(0,0,0,0.2);}
:is(h1, h2):hover{transform: scale(1.05); 
    box-shadow: 0 0 15px rgba(0,0,0,0.3);}
:is(h1, h2):hover::before{box-shadow: 0 5px 15px rgba(0,0,0,0.4);}
body.dark-mode :is(h1, h2){background: rgba(0, 0, 0, 0.5); 
    
    text-shadow: 
        1px 1px 0 rgba(255,255,255,0.2),
        2px 2px 0 rgba(255,255,255,0.15),
        3px 3px 0 rgba(255,255,255,0.1);}
body.dark-mode :is(h1, h2)::before{background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);}
body.dark-mode #about :is(h1, h2),body.dark-mode #about :is(h1, h2)::before{background-color: #374785;}
body.dark-mode #services :is(h1, h2),body.dark-mode #services :is(h1, h2)::before{}
body.dark-mode #portfolio :is(h1, h2),body.dark-mode #portfolio :is(h1, h2)::before{background-color: #233B6E;}
body.dark-mode #testimonials :is(h1, h2),body.dark-mode #testimonials :is(h1, h2)::before{background-color: #423F8D;}
body.dark-mode #blog :is(h1, h2),body.dark-mode #blog :is(h1, h2)::before{color: #ffb199;}
body.dark-mode #contact :is(h1, h2),body.dark-mode #contact :is(h1, h2)::before{color: #ff7e5f;}
.nav-links a[href="#about"]{;}
.nav-links a[href="#services"]{}
.nav-links a[href="#portfolio"]{}
.nav-links a[href="#testimonials"]{}
.nav-links a[href="#blog"]{color: #ffb199;}
.nav-links a[href="#contact"]{color: #ff7e5f;}
body.dark-mode .logo{color: #007aff;}
body.dark-mode .nav-links a[href="#about"]{;}
body.dark-mode .nav-links a[href="#services"]{}
body.dark-mode .nav-links a[href="#portfolio"]{}
body.dark-mode .nav-links a[href="#testimonials"]{}
body.dark-mode .nav-links a[href="#blog"]{color: #ffb199;}
body.dark-mode .nav-links a[href="#contact"]{color: #ff7e5f;}
.portfolio-window{transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform: translateZ(0);
    display: block;
    margin: 20px auto;
    box-sizing: border-box;
    max-width: 1240px;
    width: 100%;
    aspect-ratio: 16 / 9;}
.portfolio-window{zoom: 0.8;
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);}
.portfolio-window:hover{transform: scale(1) translateZ(50px); 
    box-shadow: 0 20px 30px rgba(0,0,0,0.5);}
.nav-links a{transition: transform 0.3s ease, color 0.3s ease; 
    
    margin-left: 4px; 
    display: inline-block;}
.nav-links a:hover{transform: scale(1.1); 
    opacity: 0.5;}
.nav-links a:hover{opacity: 0.9;

    
    transform: translateZ(0) translateY(-2px) scale(1.05); 
    text-shadow:
        1px 1px 2px rgba(255, 8, 68, 0.7), 
        -1px -1px 2px rgba(255, 177, 153, 0.7), 
        0 0 5px rgba(255, 8, 68, 0.5), 
        0 0 7px rgba(255, 177, 153, 0.5); 

    transition: transform 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease; 
    position: relative; 
    z-index: 1; 
    overflow: visible;}
body.dark-mode .logo .logo-icon{color: #ff4500 !important;}
body{font-family: "Arial", sans-serif;
    overflow-x: hidden; 
    background-color:  #ff7e5f;}
svg{position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;}
.links{position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 18px;
        font-family: sans-serif;}
a{text-decoration: none;
        color: black;
        margin-left: 1em;}
a:hover{text-decoration: none;}
a img.icon{display: inline-block;
        height: 1em;
        margin: 0 0 -0.1em 0.3em;}
p,a{font-size: 16px;
    line-height: 1.6;
    color: #333;}
a{text-decoration: none;
    transition: color 0.2s ease-in-out;}
a:hover{color: #007aff;}
header{width: 100%;
    background-color: rgba(10, 1, 1, 0.65); 
    backdrop-filter: blur(10px); 
    color: #333; 
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), 
                 0 0 20px rgba(0, 0, 0, 0.1), 
                 inset 0 -1px 2px rgba(0, 0, 0, 0.1); 
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5em 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);}
header nav{display: flex; 
    justify-content: space-between; 
    align-items: center;}
.nav-container{display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;}
.nav-links{list-style: none; 
    display: flex; 
    margin: 0; 
    padding: 0;}
.nav-links li{margin-right: 20px; 
    display: inline-block;}
.nav-links li:last-child{margin-right: 0;}
.nav-links li a{color: #333; 
    font-weight: bold; 
    text-decoration: none; 
    transition: color 0.3s ease-in-out;}
*{margin: 0;
    padding: 0;
    box-sizing: border-box;}
html,body{margin: 0;
    padding: 0;
    overflow-x: hidden; 
    
    height: 100%;}
body{scroll-snap-type: y mandatory;}
section{min-height: 100vh; 
    scroll-snap-align: start; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 15px; 
    text-align: center;}
.nav-links a.active{font-weight: 900; 
    text-shadow: 
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 3px 0 rgba(0, 0, 0, 0.5),
        0 4px 0 rgba(0, 0, 0, 0.4),
        0 5px 0 rgba(0, 0, 0, 0.3),
        0 6px 0 rgba(0, 0, 0, 0.2),
        0 7px 0 rgba(0, 0, 0, 0.1),
        0 8px 10px rgba(255, 255, 255, 0.4),
        0 10px 20px rgba(255, 255, 255, 0.3),
        0 15px 30px rgba(255, 255, 255, 0.2); 
    transition: transform 0.3s ease, text-shadow 0.3s ease;}
.nav-links a.active:hover{transform: translateY(-2px) scale(1.03);}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}
section{animation: fadeIn 1s ease-out; 
    visibility: visible;}
.toggle-container{display: flex;
    align-items: center;}
.mode-icon{display: inline-block;
    margin: 0 5px;}
#toggle-dark-mode{height: 0;
    width: 0;
    visibility: hidden;}
.toggle-label{cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 25px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;}
.toggle-label:after{content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;}
#toggle-dark-mode:checked + .toggle-label:after{left: 27px; 
    transform: translateX(0);}
section{min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    transition: transform 0.5s ease, opacity 0.5s ease;}
section{animation: fadeIn 1s ease-out;
    visibility: visible;}
#about{padding-top: 100px;}
:root{--color-blog: #ffb199;
    --color-contact: #ff7e5f;

    
    --text-color: #830000d0; 
    --background-color: #fff; 

    
    --text-color-dark: #ff7f7f; 
    --background-color-dark: #333;}
#about{background: radial-gradient(circle at center, rgba(255, 98, 119, 0.2) 50%, transparent 70%);}
#services{background: radial-gradient(circle at center, rgba(255, 81, 119, 0.2) 50%, transparent 70%);}
#portfolio{display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: visible;
    border-radius: 0;}
#testimonials{background: radial-gradient(circle at center, rgba(255, 156, 158, 0.2) 50%, transparent 70%);}
#blog{background: radial-gradient(circle at center, rgba(255, 177, 153, 0.2) 50%, transparent 70%);}
#contact{background: radial-gradient(circle at center, rgba(255, 126, 95, 0.2) 50%, transparent 70%);}
section{position: relative;
    overflow: hidden;
    padding: 10px 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50000px; 
    margin: 20px 0; 
    transition: all 0.3s ease;}
body.dark-mode #about,body.dark-mode #services,body.dark-mode #portfolio,body.dark-mode #testimonials,body.dark-mode #blog,body.dark-mode #contact{background-color: var(--section-background-dark);}
section :is(h1, h2),section p{color: var(--text-color);}
p{position: relative;
    padding: 5px 0; 
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default; 
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75), rgba(255, 255, 255, 0)); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    text-shadow: none;}
p:hover{background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75) 50%, rgba(255, 255, 255, 0)); 
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), 
        0 0 20px rgb(253, 125, 113, 1), 
        0 0 30px rgb(248, 155, 147, 1), 
        0 0 40px rgba(255, 177, 153, 1), 
        0 0 50px rgba(255, 177, 153, 1);}
body.dark-mode p{background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 132, 68, 0.5), rgba(0, 0, 0, 0));}
body.dark-mode p:hover{background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 177, 153, 0.5) 50%, rgba(0, 0, 0, 0));}
h3{color: rgb(255, 52, 34); 
    transition: color 0.3s ease; 
    position: relative;
    padding: 5px 0; 
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default; 
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75), rgba(255, 255, 255, 0)); 
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
    text-shadow: none;}
h3:hover{background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 84, 68, 0.75) 50%, rgba(255, 255, 255, 0)); 
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), 
        0 0 20px rgb(253, 125, 113, 1), 
        0 0 30px rgb(248, 155, 147, 1), 
        0 0 40px rgba(255, 177, 153, 1), 
        0 0 50px rgba(255, 177, 153, 1);}
body.dark-mode h3{background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 132, 68, 0.5), rgba(0, 0, 0, 0)); 
    color: rgb(255, 177, 153);}
body.dark-mode h3:hover{background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 177, 153, 0.5) 50%, rgba(0, 0, 0, 0));}
@media (max-width: 768px) {.nav-links li{margin: 10px 0;}}
#contact form{position: relative; 
    max-width: 600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
    margin-top: 50px;}
#contact form input[type="text"],#contact form input[type="email"]{width: 100%;}
#contact form textarea{grid-column: 1 / -1; 
    width: 100%;
    height: 150px; 
    resize: vertical;}
#send-message{position: absolute; 
    right: 0; 
    bottom: -50px;}
#message-info{font-size: 0.8em; 
    color: #888; 
    margin-right: 0px; 
    align-self: flex-end;}
@media (max-width: 768px) {#contact form{grid-template-columns: 1fr;}
#send-message{position: static;}}
.section-content{opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;}
.animate-on-scroll{opacity: 1; 
    transform: translateY(0);}
section{background-attachment: fixed;}
section{background-color: var(--section-background-light);}
body.dark-mode section{background-color: var(--section-background-dark);}
section p{font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;}
section img{max-width: 60%;
    height: auto;
    border-radius: 10px;}
footer{background-color: #333;
    color: white;
    text-align: center;
    padding: 1.5em 0;
    clear: both; 
    position: relative; 
    width: 100%;}
body.dark-mode .logo,body.dark-mode .nav-links a{color: inherit;}
body.dark-mode .nav-links a:hover{transform: scale(1.1); 
    opacity: 0.8; 
    transition: transform 0.3s ease, opacity 0.3s ease;}
body.dark-mode .nav-links a[href="#about"]{;}
body.dark-mode{--text-color: var(--text-color-dark);
    --background-color: var(--background-color-dark);}
body.dark-mode header{width: 100%;
    background-color: rgba(10, 1, 1, 0.65); 
    backdrop-filter: blur(10px); 
    color: #333; 
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), 
                 0 0 20px rgba(0, 0, 0, 0.1), 
                 inset 0 -1px 2px rgba(0, 0, 0, 0.1); 
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5em 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);}
body.dark-mode nav ul li a{color: #fff;}
body.dark-mode .navbar,body.dark-mode .nav-container{background-color: transparent;}
body.dark-mode .navbar{background-color: transparent;}
body.dark-mode input[type="text"],body.dark-mode input[type="email"],body.dark-mode textarea{background-color: #666; 
    color: #fff; 
    border: 1px solid #777;}
body.dark-mode button{background-color: #777; 
    color: #fff; 
    border-color: #888;}
@media (max-width: 768px) {nav ul li{display: block; 
        margin: 10px 0;}
.nav-links{flex-direction: column;}
.nav-links li{margin-bottom: 10px;}
.nav-links li a{font-size: 1.2em;}
.nav-links{display: flex;
    justify-content: space-around;
    align-items: center;}
.site-header .menu-icon{display: none !important;
    cursor: pointer;}
@media (max-width: 768px) {.nav-container .menu-icon{display: block !important; 
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;}
.nav-container .nav-links{display: flex; 
        flex-direction: column;
        position: absolute;
        top: 57px; 
        left: 50%;
        transform: translateX(-50%) translateY(-100%); 
        width: 90%;
        background-color: #00000096; 
        transition: transform 0.5s ease; 
        visibility: hidden;}
.nav-container .nav-links.active{transform: translateX(-50%) translateY(0); 
        visibility: visible;}
#contact form{grid-template-columns: 1fr; 
        grid-gap: 20px;}
#send-message{position: static;}}
.brand-name a{font-size: 1.5em;
    color: #333;
    text-decoration: none;}
footer a{color: #007aff;
    text-decoration: none;}
footer a:hover{text-decoration: none;}}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url("vendor/fontawesome/webfonts/fa-brands-400.woff2") format("woff2")}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("vendor/fontawesome/webfonts/fa-solid-900.woff2") format("woff2")}.fa-brands,.fa-solid{display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased}.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}.fa-brands::before,.fa-solid::before{content:var(--fa)}.fa-arrow-right{--fa:"\f061"}.fa-briefcase{--fa:"\f0b1"}.fa-comment-dots{--fa:"\f4ad"}.fa-dev{--fa:"\f6cc"}.fa-envelope{--fa:"\f0e0"}.fa-folder-open{--fa:"\f07c"}.fa-github{--fa:"\f09b"}.fa-linkedin{--fa:"\f08c"}.fa-linkedin-in{--fa:"\f0e1"}.fa-user{--fa:"\f007"}
html{height: auto; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 78px; scroll-snap-type: y proximity;}
body{height: auto; overflow-x: clip; scroll-snap-type: none;}
.site-background{pointer-events: none; z-index: -1;}
body.dark-mode{color: #fff;}
body.dark-mode .site-background .out-top{fill: #374785;}
body.dark-mode .site-background .in-top{}
body.dark-mode .site-background .out-bottom{fill: #233b6e;}
body.dark-mode .site-background .in-bottom{fill: #423f8d;}
.site-background path{transition: fill .5s ease;}
header{min-height: 70px;}
.nav-links a{min-height: 44px; display: inline-flex; align-items: center; gap: 4px;}
.nav-links li{margin-right: 16px;}
.logo{margin-left: 0;}
.logo:focus-visible{-webkit-text-fill-color: #ffb199;}
.toggle-container{position: relative; min-width: 104px; min-height: 44px; justify-content: center;}
#toggle-dark-mode{position: absolute; left: 27px; top: 0; width: 50px; height: 44px; opacity: 0; visibility: visible; z-index: 2; cursor: pointer;}
#toggle-dark-mode:focus-visible + .toggle-label{outline: 3px solid #fff2d9; outline-offset: 5px;}
#toggle-dark-mode:checked + .toggle-label{background: #756390;}
.mode-icon{pointer-events: none;}
.menu-icon{display: none;}
.skip-link{position: fixed; left: 16px; top: 10px; transform: translateY(-160%); z-index: 2000; padding: 10px 18px; color: #fff; border-radius: 6px;}
.skip-link:focus{transform: none;}
a:focus-visible,button:focus-visible{outline-offset: 5px;}
header a:focus-visible,header button:focus-visible,footer a:focus-visible,.dark-mode a:focus-visible,.dark-mode button:focus-visible{outline-color: #fff2d9;}
main:focus,section:focus{outline: none;}
section{animation: none; scroll-margin-top: 0; overflow: visible;}
#about{min-height: calc(100svh - 70px); padding-top: 80px; padding-bottom: 64px;}
#about-picture{display: block; width: 60%; margin: 0 auto;}
#about-img{display: block; max-width: 100%; width: 100%; height: auto;}
section p{}
body.dark-mode section p{color: #ffd0cf;}
.service h3{}
body.dark-mode .service h3{color: #ffb199;}
section.arrived > :not(.project-grid){animation: section-arrival .7s cubic-bezier(.2,.75,.25,1);}
@keyframes section-arrival { from { opacity: .4; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
#portfolio{padding: 100px 20px;}
.project-grid{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px; width: 100%; max-width: 1100px; text-align: left;}
.project-card{overflow: hidden; position: relative; border: 1px solid rgba(101,35,57,.35); border-radius: 16px; background: linear-gradient(145deg,rgba(255,220,221,.87),rgba(255,152,170,.87)); box-shadow: 0 12px 0 -7px rgba(97,35,56,.22), 0 20px 38px rgba(98,24,56,.22), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .3s ease,box-shadow .3s ease;}
.project-card:hover,.project-card:focus-within{transform: translateY(-6px); box-shadow: 0 15px 0 -7px rgba(97,35,56,.2),0 28px 42px rgba(76,22,51,.3),inset 0 1px 0 rgba(255,255,255,.7);}
.project-image{position: relative; padding: 14px 14px 0;}
.project-image img{display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid rgba(75,26,49,.2); border-radius: 9px; box-shadow: 0 5px 14px rgba(46,14,39,.14);}
.project-number{position: absolute; bottom: 14px; right: 28px; font-size: 13px; letter-spacing: .1em; padding: 8px 10px; border-radius: 5px; box-shadow: 0 3px 9px #0003;}
.project-copy{padding: 26px 28px 30px;}
.project-category{font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.7;}
.project-card h3{font-size: 25px; line-height: 1.2; margin: 10px 0 12px; background: none;}
.project-card p{font-size: 16px; line-height: 1.6; margin: 0 0 18px; background: none;}
.project-card p:hover,.project-card h3:hover{text-shadow: none;}
.project-tech{display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.6; padding: 6px 10px; border-radius: 5px;}
.project-caption{font-size: 12px; line-height: 1.6; margin: 13px 0 9px;}
.project-link,.project-unavailable{display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-left: 0; font-size: 14px; font-weight: 700;}
.project-link{text-decoration: none; text-underline-offset: 5px;}
.project-link:hover{}
.project-unavailable{font-size: 13px; font-weight: 400;}
body.dark-mode .project-card{background: linear-gradient(145deg,rgba(50,52,96,.96),rgba(41,31,61,.96)); border-color: #a085b080; box-shadow: 0 12px 0 -7px #17162c88,0 20px 40px #0c092466,inset 0 1px 0 #d5b4e233;}
body.dark-mode .project-card h3{}
body.dark-mode .project-category,body.dark-mode .project-caption{}
body.dark-mode .project-card p{color: #f4e1ec;}
body.dark-mode .project-tech{color: #ffe0d9;}
body.dark-mode .project-link,body.dark-mode .project-unavailable{}
#contact{padding: 100px 20px;}
.contact-content{width: 100%; max-width: 1050px;}
.contact-badges{display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 28px 0 40px;}
.social-badge{display: inline-flex; align-items: center; margin: 0; min-height: 48px; border-radius: 5px; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; border: 1px solid #fff5; transition: transform .25s ease,box-shadow .25s ease;}
.social-badge > span:last-child{padding: 0 20px;}
.badge-icon{padding: 13px 15px; font-size: 22px; background: #0002; line-height: 1;}
.badge-email{}
.badge-linkedin{background: #08628d;}
.badge-github{background: #343147;}
.social-badge:hover{transform: translateY(-4px) rotate(-1deg); color: #fff; text-decoration: none;}
.contact-letter{position: relative; width: 100%; max-width: 600px; margin: auto; padding: 30px 36px; border-radius: 12px; text-align: left;}
.letter-heading{display: flex; align-items: center; gap: 14px; font-size: 23px; font-weight: 700;}
.letter-stamp{margin-left: auto; padding: 10px; border-radius: 3px; font-size: 34px; transform: rotate(8deg);}
#contact .letter-address{margin: 16px 0 23px; border-bottom: 0; padding-bottom: 22px; background: none;}
.letter-address a{margin: 0; font-size: clamp(18px,2.5vw,26px); overflow-wrap: anywhere;}
.contact-send{display: inline-flex; min-height: 48px; align-items: center; gap: 22px; margin: 0; padding: 9px 20px; color: #fff; border-radius: 5px; transition: transform .25s ease;}
.contact-send:hover{transform: translateY(-2px); color: #fff;}
.contact-note{display: block; margin-top: 12px; font-size: 12px;}
body.dark-mode .contact-letter{background: linear-gradient(145deg,#45364fea,#292c50f5);}
body.dark-mode .letter-heading,body.dark-mode .letter-address a,body.dark-mode .contact-note{}
body.dark-mode .contact-send{}
footer{scroll-snap-align: end;}
footer.container{max-width: none; padding: 30px; background: #241a28;}
.footer-inner{max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;}
footer p,body.dark-mode footer p{background: none;}
.footer-social{display: flex; gap: 12px;}
.footer-social a{display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; font-size: 24px; margin: 0;}
@media (max-width:1100px) {.nav-links li{margin-right: 7px;}
.nav-links a{font-size: 14px;}
.brand-name .logo{font-size: 26px;}}
@media (max-width:900px) {header,body.dark-mode header{padding: 8px 16px;}
header nav.container{padding: 0;}
.nav-container{gap: 4px;}
.brand-name{flex: 1;}
.brand-name .logo{font-size: 26px;}
.toggle-container{margin-right: 54px;}
.nav-container .menu-icon{display: flex !important; position: absolute; top: 13px; right: 14px; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 0; border-radius: 5px; background: transparent; cursor: pointer;}
.bar{display: block; width: 23px; height: 2px; transition: transform .3s ease,opacity .3s ease;}
.menu-icon[aria-expanded=true] .bar:nth-child(1){transform: translateY(7px) rotate(45deg);}
.menu-icon[aria-expanded=true] .bar:nth-child(2){opacity: 0;}
.menu-icon[aria-expanded=true] .bar:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.nav-container .nav-links{position: absolute; top: 100%; left: 0; width: 100%; display: flex; flex-direction: column; padding: 16px; gap: 2px; box-shadow: 0 14px 26px #24152e55; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: transform .4s ease,opacity .4s ease,visibility .4s;}
.nav-container .nav-links.active{visibility: visible; opacity: 1; transform: translateY(0);}
.nav-links li{display: block; width: 100%; margin: 0;}
.nav-links li a{display: flex; justify-content: center; font-size: 17px; min-height: 48px;}}
@media (max-width:768px) {main.container{padding: 0 16px;}
section{min-height: calc(100svh - 70px); border-radius: 0; margin: 20px 0; padding: 60px 8px;}
#about{padding: 60px 0;}
#about .container{padding: 0 16px;}
:is(h1,h2){font-size: clamp(26px,6.5vw,36px); padding: 15px 20px; margin-bottom: 30px;}
section p{font-size: 17px; line-height: 1.65;}
#about-picture{width: 100%;}
#portfolio,#contact{padding: 60px 8px;}
.project-grid{grid-template-columns: 1fr; gap: 34px; max-width: 540px;}
.project-copy{padding: 22px;}
.project-card h3{font-size: 23px;}
.contact-badges{gap: 12px; margin: 24px 0 32px;}
.social-badge > span:last-child{padding: 0 14px;}
.contact-letter{padding: 24px;}
.letter-heading{font-size: 21px;}
.footer-inner{flex-direction: column; gap: 16px;}}
@media (max-width:359px) {.brand-name .logo{font-size: 22px;}
.logo .logo-icon{margin-right: 5px;}
.toggle-container{min-width: 94px;}
.mode-icon{margin: 0 3px;}
#toggle-dark-mode{left: 22px;}
.letter-stamp{padding: 6px; font-size: 28px;}}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior: auto; scroll-snap-type: none;}
*,*::before,*::after{animation: none !important; transition: none !important; scroll-behavior: auto !important;}
.project-card:hover,.project-card:focus-within,#about-img:hover,:is(h1,h2):hover,.social-badge:hover,.contact-send:hover,.nav-links a:hover,.nav-links a.active:hover,body.dark-mode .nav-links a:hover{transform: none !important;}}
:root{--header-height: 70px;}
html{scroll-behavior: auto; scroll-padding-top: var(--header-height); scroll-snap-type: none;}
section,.portfolio-page{scroll-margin-top: 0;}
#portfolio{display: block; padding: 0; margin: 0; border-radius: 0; min-height: 0;}
.portfolio-page{min-height: calc(100svh - var(--header-height)); padding: 36px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.portfolio-page:focus{outline: none;}
.portfolio-page > h2{margin: 0 0 28px;}
.portfolio-page .project-grid{max-width: 1050px; gap: 32px; align-items: stretch;}
.portfolio-page .project-image img{aspect-ratio: 2.2;}
.portfolio-page .project-copy{padding: 20px 24px 18px;}
.portfolio-page .project-card h3{font-size: 24px; min-height: 58px; margin: 8px 0;}
.portfolio-page .project-card p{margin-bottom: 12px;}
.portfolio-page .project-caption{margin: 10px 0 2px;}
.portfolio-pager{display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; width: 100%;}
.portfolio-pager a{display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0; font-size: 14px;}
.portfolio-pager span{font-size: 12px; letter-spacing: .16em;}
.dark-mode .portfolio-pager a,.dark-mode .portfolio-pager span{}
.project-card:focus-visible{outline-offset: 5px;}
.dark-mode .project-card:focus-visible{outline-color: #fff2d9;}
.project-card:focus-visible{transform: translateY(-6px);}
.project-image img{transition: filter .3s ease;}
.project-card:hover .project-image img,.project-card:focus-within .project-image img{filter: saturate(1.08) contrast(1.02);}
@media (hover: hover) and (pointer: fine) {.project-tech,.project-link{opacity: .78; transform: translateY(3px); transition: opacity .25s ease, transform .25s ease;}
.project-card:hover .project-tech,.project-card:focus-within .project-tech,.project-card:hover .project-link,.project-card:focus-within .project-link{opacity: 1; transform: none;}}
@media (min-width: 1000px) and (min-height: 740px) {main > section:not(#portfolio){min-height: calc(100svh - var(--header-height)); margin: 0; padding-top: 36px; padding-bottom: 36px;}
#about{padding-top: 28px; padding-bottom: 28px;}
#about h1{margin-bottom: 28px;}}
html[data-layout=featured] .project-grid{grid-template-columns: 1fr; max-width: 1120px;}
html[data-layout=featured] .project-card{display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; min-height: 440px;}
html[data-layout=featured] .project-image{padding: 24px;}
html[data-layout=featured] .project-image img{aspect-ratio: 1.45; object-fit: contain; background: #fff;}
html[data-layout=featured] .project-copy{padding: 32px;}
html[data-layout=featured] .project-card h3{min-height: 0; font-size: 30px; margin-bottom: 20px;}
@media (max-width: 999px), (max-height: 739px) {.portfolio-page{padding: 60px 8px;}
.portfolio-page .project-grid{grid-template-columns: 1fr; max-width: 540px; gap: 34px;}
.portfolio-page .project-image img{aspect-ratio: 16 / 10;}
.portfolio-page .project-card h3{min-height: 0; font-size: 23px;}
.project-tech,.project-link{opacity: 1; transform: none;}
html[data-layout=featured] .project-card{display: block; min-height: 0;}
html[data-layout=featured] .project-image{padding: 14px 14px 0;}
html[data-layout=featured] .project-copy{padding: 22px;}
.portfolio-pager{gap: 10px;}
.portfolio-pager a{font-size: 13px;}}
@media (prefers-reduced-motion: reduce) {.project-tech,.project-link{opacity: 1; transform: none;}
.project-card:focus-visible{transform: none;}
.project-card:hover .project-image img,.project-card:focus-within .project-image img{filter: none;}}
:root{--stage-surface:#ffd3cc; --glide:cubic-bezier(.16,1,.3,1);}
body{isolation:isolate; transition:background-color .4s ease,color .3s ease;}
body.dark-mode{--stage-surface:#282940; --project-accent:#ac8cd6;}
.site-background{z-index:-2;}
.ambient-light{position:fixed; inset:-15%; z-index:-1; pointer-events:none; opacity:0; filter:blur(85px); transition:opacity .48s ease;}
.dark-mode .ambient-light{opacity:1;}
body.dark-mode section#about,body.dark-mode section#services,body.dark-mode section#portfolio,body.dark-mode section#testimonials,body.dark-mode section#contact{background:transparent;}
body.dark-mode section p,body.dark-mode section h3{background-image:none;}
body.dark-mode section p:hover,body.dark-mode section h3:hover{background-image:none;}
section{transition:background-color .35s ease;}
section p,section h3,.project-category,.media-caption,.project-tech,.project-action,.project-selector{transition:color .28s ease,background-color .35s ease,border-color .35s ease,box-shadow .3s ease;}
.site-background path{transition:fill .42s ease;}
#about-picture{position:relative;}
#about-picture picture{display:block;}
#about-picture img{display:block; width:100%; max-width:100%; height:auto; border-radius:10px; transition:transform .4s var(--glide),box-shadow .35s ease;}
#about-picture .portrait-night{position:absolute; inset:0; opacity:0; transition:opacity .38s ease;}
body.dark-mode #about-picture .portrait-night{opacity:1;}
#about-picture:hover img,#about-picture:focus-within img{transform:scale(1.035); box-shadow:0 0 20px #ffc2c2b0,0 0 30px #ff936f80;}
body.dark-mode #about-picture:hover img{}
#portfolio{margin:0; padding:0; border-radius:0; display:block;}
.portfolio-scene{min-height:calc(100svh - var(--header-height)); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:26px 20px; position:relative;}
.portfolio-scene:focus,.project-panel:focus{outline:none;}
#portfolio .portfolio-heading{flex:none; font-size:34px; margin:0 0 20px; padding:12px 28px;}
.project-rail{display:flex; justify-content:center; align-items:stretch; gap:6px; margin-bottom:24px; padding:5px; max-width:100%; border-radius:12px; box-shadow:inset 0 1px 0 #ffe7df77;}
.project-selector{display:inline-flex; gap:9px; align-items:center; justify-content:center; min-height:44px; margin:0; padding:8px 17px; border-radius:7px; font-size:13px; font-weight:700; text-decoration:none; position:relative;}
.selector-number{font-size:10px; opacity:.7; letter-spacing:.09em;}
.project-selector::after{content:none;}
.project-selector[aria-current=true]{background:#fff0dc9c;}
.project-selector:hover{background:#ffe5db80;}
.dark-mode .project-rail{background:#211e3599; border-color:#b496cf55; box-shadow:inset 0 1px 0 #dfbded19;}
.dark-mode .project-selector{}
.dark-mode .project-selector[aria-current=true],.dark-mode .project-selector:hover{background:#574266;}
.showcase-stage{width:100%; max-width:1130px; position:relative;}
.project-panel{--image-shift:0px; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); align-items:center; gap:32px; width:100%; padding:24px; border:1px solid var(--stage-edge); border-radius:18px; color:var(--stage-ink); background-color:var(--stage-surface); position:relative; transition:background-color .35s ease,border-color .3s ease,box-shadow .4s ease,transform .4s var(--glide);}
.project-panel::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;}
.project-panel:hover::after,.project-panel:focus-within::after{opacity:1;}
.project-panel:hover,.project-panel:focus-within{}
.dark-mode .project-panel{}
.dark-mode .project-panel:hover,.dark-mode .project-panel:focus-within{}
.dark-mode .project-panel::after{}
.project-visual{min-width:0; position:relative;}
.visual-topline{display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.17em; color:var(--stage-muted); font-weight:700; margin:0 0 12px;}
.visual-topline::before{content:""; width:7px; height:7px; border-radius:50%;}
.dark-mode .visual-topline::before{}
.project-media{overflow:hidden; border-radius:11px; background:#fff;}
.project-media img{display:block; width:100%; aspect-ratio:1.56; object-fit:contain; max-width:100%; transition:transform .6s var(--glide),filter .35s ease;}
.project-panel:hover .project-media img,.project-panel:focus-within .project-media img{transform:scale(1.018); filter:saturate(1.06);}
.media-caption{color:var(--stage-muted); font-size:11px; line-height:1.6; margin-top:12px;}
.project-details{min-width:0; padding:8px 8px 8px 0; text-align:left;}
#portfolio .project-category{font-size:10px; letter-spacing:.16em; color:var(--stage-muted);}
#portfolio .project-details h3{font-size:clamp(25px,2.7vw,38px); line-height:1.13; letter-spacing:-.035em; min-height:0; margin:14px 0 18px; padding:0; background:none; color:var(--stage-ink); text-shadow:none;}
#portfolio .project-details p{padding:0; margin:0 0 22px; font-size:16px; line-height:1.65; background:none; color:var(--stage-ink); text-shadow:none;}
#portfolio .project-tech{color:var(--stage-muted); border-color:var(--stage-edge); font-size:11px; font-weight:700; padding:7px 10px; background:#ffebdf55; border-radius:6px; opacity:1; transform:none; transition:transform .4s var(--glide),background-color .3s ease;}
.dark-mode #portfolio .project-tech{background:#51426455;}
.project-panel:hover .project-tech,.project-panel:focus-within .project-tech{transform:translateY(-2px);}
.project-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; align-items:center;}
.project-action{display:inline-flex; align-items:center; justify-content:center; min-height:46px; gap:12px; padding:11px 17px; margin:0; border-radius:7px; font-size:13px; font-weight:700; border:1px solid transparent; text-decoration:none; transition:transform .25s var(--glide),box-shadow .25s ease,background-color .3s ease,color .3s ease;}
.project-action.primary{color:#fff4ec;}
.project-action.secondary{background:#ffe5da88;}
.project-action:hover{transform:translateY(-3px); text-decoration:none;}
.project-action:active{transform:translateY(1px); box-shadow:none;}
.dark-mode .project-action.primary{color:#392b45;}
.dark-mode .project-action.secondary{background:#473851; border-color:#997ba688; box-shadow:0 3px 0 #221c31;}
.project-action:focus-visible,.project-selector:focus-visible,.deck-preview:focus-visible{outline-offset:5px;}
.dark-mode .project-action:focus-visible,.dark-mode .project-selector:focus-visible,.dark-mode .deck-preview:focus-visible{outline-color:#ffe2c9;}
.action-note{margin-top:16px; color:var(--stage-muted); font-size:11px; line-height:1.6;}
#portfolio .project-unavailable{color:var(--stage-muted); min-height:46px; margin:0; font-size:13px; padding-left:12px;}
.story-wayfinding,.stage-wayfinding{color:var(--stage-ink); font-size:10px; letter-spacing:.12em; margin-top:24px;}
html[data-concept=c].showcase-ready .interactive-scene .showcase-stage{min-height:var(--panel-height,460px);}
html.showcase-ready .interactive-scene .project-panel[hidden]{display:none;}
html[data-concept=c] .showcase-stage{max-width:1120px; padding:0 80px;}
html[data-concept=c] .project-panel{z-index:2; gap:25px; padding:22px;}
.deck-preview{display:none;}
html[data-concept=c].showcase-ready .deck-preview{display:block; position:absolute; z-index:1; top:38px; width:90px; height:calc(100% - 75px); min-height:220px; padding:7px; border-radius:15px; cursor:pointer; transition:transform .5s var(--glide),box-shadow .3s ease; box-shadow:0 18px 35px #36204433;}
.deck-preview img{width:100%; border-radius:7px; height:70%; object-fit:cover; object-position:left; opacity:.85;}
.deck-preview span{display:block; font-size:10px; font-weight:700; padding-top:14px; overflow-wrap:anywhere;}
.deck-left{left:0; transform:rotate(-5deg) translateY(-7px); text-align:left;}
.deck-right{right:0; transform:rotate(5deg) translateY(7px); text-align:right;}
.deck-left:hover,.deck-left:focus-visible{transform:rotate(-6deg) translateX(-12px);}
.deck-right:hover,.deck-right:focus-visible{transform:rotate(6deg) translateX(12px);}
.dark-mode .deck-preview{background:#49415f!important; box-shadow:0 18px 35px #10102780;}
@media (min-width:1000px) and (min-height:680px) {main > section:not(#portfolio){min-height:calc(100svh - var(--header-height)); margin:0; padding-top:28px; padding-bottom:28px;}
#about-picture{max-width:min(60%,calc((100svh - 330px)*1.5));}
.showcase-stage .project-panel{min-height:420px;}
.portfolio-scene{padding-top:24px; padding-bottom:24px;}}
@media (min-width:1000px) and (max-height:820px) {.portfolio-scene{padding:20px;}
#portfolio .portfolio-heading{font-size:30px; padding:10px 25px; margin-bottom:14px;}
.project-rail{margin-bottom:18px;}
.project-panel{padding:19px; gap:25px;}
.project-media img{aspect-ratio:1.85;}
.showcase-stage .project-panel{min-height:360px;}
#portfolio .project-details h3{font-size:30px; margin:10px 0 12px;}
#portfolio .project-details p{font-size:15px; margin-bottom:14px;}
.project-actions{margin-top:18px;}
.story-wayfinding,.stage-wayfinding{margin-top:18px;}}
@media (max-width:999px), (max-height:679px), (pointer:coarse) {.portfolio-scene{padding:52px 8px;}
#portfolio .portfolio-heading{font-size:30px;}
.project-rail{display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:560px; gap:4px; margin-bottom:28px;}
.project-selector{padding:10px 12px; justify-content:flex-start; font-size:12px;}
.showcase-stage{max-width:620px; display:grid; gap:36px;}
.project-panel{display:block!important; padding:18px; min-height:0;}
.project-panel[hidden]{display:block!important;}
.project-details{padding:24px 4px 6px;}
.project-media img{aspect-ratio:1.56;}
#portfolio .project-details h3{font-size:30px;}
.project-actions{gap:10px;}
.project-action{padding:11px 15px;}
html[data-concept=c] .showcase-stage{max-width:620px; padding:0;}
html[data-concept=c].showcase-ready .deck-preview{display:none;}
.stage-wayfinding{display:none;}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
.project-panel:hover .project-media img,.project-panel:focus-within .project-media img,.project-panel:hover .project-tech,.project-panel:focus-within .project-tech,.project-action:hover,#about-picture:hover img,.deck-preview:hover,.deck-preview:focus-visible{transform:none!important; filter:none!important;}}
html.theme-initializing *,html.theme-initializing *::before,html.theme-initializing *::after{transition:none!important;}
:root{--deck-ease:cubic-bezier(.215,.61,.355,1)}
body.dark-mode{background-color:#282438}
body.dark-mode .site-background .in-top{fill:#373049}
.ambient-light{inset:0;filter:none;background:none!important;overflow:visible}
.ambient-light::before,.ambient-light::after{content:"";position:absolute;width:28vw;max-width:430px;height:28vw;max-height:430px;border-radius:50%;filter:blur(145px);background:#687baf33}
.ambient-light::before{left:14%;top:9%}
.ambient-light::after{right:8%;bottom:12%;background:#766aa329;width:23vw;height:23vw}
.dark-mode .ambient-light{opacity:.45}
#portfolio .portfolio-heading{margin-bottom:20px}
.dark-mode #portfolio .portfolio-heading{box-shadow:0 3px 0 #17243f,0 9px 26px #14152766,inset 0 1px 1px #beb1e355}
.project-rail{padding:7px;gap:8px;border-radius:14px;margin-bottom:32px}
.project-selector{min-height:47px;padding:9px 16px;gap:8px;font-size:12px;border:1px solid transparent;text-shadow:0 1px #ffdfd780;transition:background .25s,color .25s,box-shadow .25s,translate .25s}
.project-selector>i{font-size:15px}
.selector-number{font-size:9px;opacity:.8}
.project-selector[aria-current=true]{}
.project-selector:hover{translate:0 -2px}
.project-selector::after{content:none;}
.dark-mode .project-rail{background:linear-gradient(130deg,#2e2946dd,#242139cc);border-color:#8779a965;box-shadow:inset 0 1px #b3a5db4d,0 4px 0 #17162a,0 10px 25px #17122766}
.dark-mode .project-selector{text-shadow:none}
.dark-mode .project-selector[aria-current=true]{}
html[data-concept=c] .showcase-stage{max-width:1190px;padding:0 100px;perspective:1200px;isolation:isolate;min-height:0!important}
.deck-core{position:relative;width:100%;z-index:3;perspective:1100px}
html[data-concept=c] .project-panel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;padding:23px;border-radius:24px;min-height:440px}
.project-panel::before{content:"";position:absolute;inset:9px;border-radius:16px;pointer-events:none}
.project-panel::after{inset:-3px;border-radius:25px}
html[data-concept=c] .project-panel:hover,html[data-concept=c] .project-panel:focus-within{}
.dark-mode .deck-core .project-panel{background:linear-gradient(135deg,#353047,#262b45 65%,#382c4f);box-shadow:0 7px 0 -2px #19172c,0 25px 60px #0b102b99,inset 0 0 0 3px #a390c527,inset 0 5px 7px #dfc3f217}
.dark-mode .deck-core .project-panel:hover,.dark-mode .deck-core .project-panel:focus-within{box-shadow:0 9px 0 -2px #19172c,0 26px 55px #b188c33b,inset 0 0 0 3px #a390c53b,inset 0 5px 7px #dfc3f227}
.dark-mode .project-panel::before{border-color:#b899ce38}
.dark-mode .project-panel::after{}
.project-visual{min-width:0}
.visual-topline{font-size:10px;letter-spacing:.14em;margin-bottom:13px}
.project-media{border-radius:15px;border:4px solid #fff4ea;overflow:hidden}
.project-media img{aspect-ratio:1.55;object-fit:contain;background:#fff}
.dark-mode .project-media{border-color:#80709088;box-shadow:0 2px 0 #171d35,0 9px 25px #13152c77}
.dark-mode .visual-topline{}
.media-caption{font-size:10px;line-height:1.5;margin:10px 4px 0;text-align:left}
.dark-mode .media-caption{color:#d5c2df}
.project-details{padding:8px 1px}
#portfolio .project-details h3{font-size:clamp(26px,2.5vw,35px);margin:13px 0 17px;line-height:1.12;text-shadow:0 1px #fff8}
.dark-mode #portfolio .project-details h3{text-shadow:0 2px #11142c}
#portfolio .project-details p{font-size:15px;line-height:1.65;margin-bottom:17px}
.dark-mode #portfolio .project-details p{}
#portfolio .project-category{font-size:9px;letter-spacing:.13em}
.dark-mode #portfolio .project-category{}
#portfolio .project-tech{font-size:10px;border-radius:7px;background:#fff0dfaa;box-shadow:inset 0 1px #fff6}
.dark-mode #portfolio .project-tech{background:#77608233;border-color:#a383b155;box-shadow:inset 0 1px #b89ac51c}
.project-actions{gap:10px;margin-top:23px}
.project-action{min-height:46px;font-size:11px;letter-spacing:.065em;text-transform:uppercase;border-radius:9px;padding:12px 16px;gap:10px}
.project-action.primary{}
.dark-mode .project-action.primary{}
.project-action.secondary{}
.dark-mode .project-action.secondary{background:#463550;border-color:#92749f}
.action-note{font-size:10px;line-height:1.5;margin-top:17px}
.dark-mode .action-note{}
html[data-concept=c].showcase-ready .deck-preview{width:118px;height:80%;min-height:0;top:10%;padding:10px;border-radius:19px;z-index:1;text-align:center}
.deck-preview img{height:65%;width:100%;object-fit:cover;opacity:.62;filter:saturate(.5);border:2px solid #ffe3d888;border-radius:8px}
.deck-preview span{font-size:11px;line-height:1.3;letter-spacing:.015em;padding:10px 0 0;overflow-wrap:normal}
.deck-number{display:block;font-size:12px;letter-spacing:.13em;margin-bottom:11px}
.deck-left{left:1px;transform:rotateY(11deg) rotateZ(-6deg) scale(.94);transform-origin:right center}
.deck-right{right:1px;transform:rotateY(-11deg) rotateZ(6deg) scale(.94);transform-origin:left center}
.deck-left:hover,.deck-left:focus-visible{transform:translateX(-6px) rotateY(6deg) rotateZ(-4deg) scale(.98)}
.deck-right:hover,.deck-right:focus-visible{transform:translateX(6px) rotateY(-6deg) rotateZ(4deg) scale(.98)}
.deck-preview:hover img,.deck-preview:focus-visible img{opacity:.85;filter:saturate(.9)}
.dark-mode .deck-preview{background:linear-gradient(130deg,#403856,#33394f)!important;border-color:#77688f!important;box-shadow:0 6px 0 #18162b,0 18px 35px #13102b80,inset 0 0 0 3px #a38aba33!important}
.departing{position:absolute!important;inset:0;z-index:5;pointer-events:none}
.deck-wayfinding{display:flex;align-items:center;gap:15px;margin-top:24px;font-size:10px;letter-spacing:.08em}
.deck-position{font-weight:700;border-radius:5px;padding:4px 8px;background:#ffe0d675;box-shadow:inset 0 1px #fff5}
.dark-mode .deck-wayfinding{}
.dark-mode .deck-position{background:#56416655;box-shadow:inset 0 1px #be9cca33}
html[data-scroll-profile=native]{scroll-snap-type:y mandatory}
html[data-scroll-profile=native] main>section:not(#portfolio),html[data-scroll-profile=native] .portfolio-scene{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--header-height)}
@media(min-width:1000px) and (max-height:820px){html[data-concept=c] .project-panel{min-height:360px;padding:19px;gap:23px}
.project-media img{aspect-ratio:1.8}
.project-rail{margin-bottom:22px}
.deck-wayfinding{margin-top:18px}
#portfolio .portfolio-heading{font-size:30px;margin-bottom:15px}
.project-actions{margin-top:18px}
#portfolio .project-details p{font-size:14px}}
@media(max-width:999px),(max-height:679px),(pointer:coarse),(max-width:1099px) and (max-height:739px){html[data-concept=c] .showcase-stage{padding:0;max-width:640px}
.deck-core{height:auto!important;display:grid;gap:38px}
.project-rail{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:620px}
.project-selector{padding:10px 8px;min-height:48px}
.selector-number{display:none}
html[data-concept=c] .project-panel{display:block!important;padding:21px;border-radius:21px}
.project-details{padding-top:25px}
.project-media img{aspect-ratio:1.5}
.deck-preview{display:none!important}
.deck-wayfinding{display:none}
.project-details h3{font-size:29px!important}
.project-actions{margin-top:23px}
.action-note{font-size:11px}
html[data-scroll-profile=native]{scroll-snap-type:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.project-panel,.project-media img,.project-action,.project-tech,.project-selector,.deck-preview{transform:none!important;translate:none!important}
.deck-preview img{filter:none}}
.showcase-stage::before{content:"";position:absolute;inset:10% 12%;z-index:-1;pointer-events:none;background:var(--deck-accent);filter:blur(70px);opacity:.12;transition:background-color .58s var(--deck-ease)}
.dark-mode .showcase-stage::before{opacity:.07}
.deck-wayfinding{font-size:11px}
.dark-mode .deck-wayfinding{}
:root{--motion-ease:cubic-bezier(.22,.68,.2,1);--deck-ease:var(--motion-ease);--motion-fast:180ms;--motion-medium:420ms;--motion-major:640ms;scroll-behavior:smooth;scroll-snap-type:none!important}
body,main,section,.portfolio-scene{scroll-snap-type:none!important;scroll-snap-align:none!important}
.site-background .out-top{animation-duration:40s}
.site-background .in-top{animation-duration:20s}
.site-background .out-bottom{animation-duration:50s}
.site-background .in-bottom{animation-duration:30s}
html[data-speed=slightly-faster] .out-top{animation-duration:36s}
html[data-speed=slightly-faster] .in-top{animation-duration:18s}
html[data-speed=slightly-faster] .out-bottom{animation-duration:45s}
html[data-speed=slightly-faster] .in-bottom{animation-duration:27s}
html[data-speed=slightly-slower] .out-top{animation-duration:44s}
html[data-speed=slightly-slower] .in-top{animation-duration:22s}
html[data-speed=slightly-slower] .out-bottom{animation-duration:55s}
html[data-speed=slightly-slower] .in-bottom{animation-duration:33s}
.nav-links a{border-radius:7px;transition:color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast)}
.nav-links a:focus-visible{outline-offset:4px}
.dark-mode .nav-links a:focus-visible{}
.nav-links a.active{box-shadow:none}
.dark-mode .nav-links a.active{box-shadow:none}
:is(h1,h2){letter-spacing:.025em}
#about p{max-width:780px;line-height:1.75}
.service p{max-width:680px;margin-inline:auto;line-height:1.75}
.portfolio-scene{padding:50px 20px 58px;min-height:calc(100svh - var(--header-height));gap:0}
#portfolio .portfolio-heading{margin-bottom:24px;font-size:clamp(28px,2.7vw,37px)}
.project-rail{max-width:940px;margin-bottom:37px;padding:6px;gap:3px;flex-wrap:wrap;justify-content:center}
.project-selector{padding:9px 12px;font-size:11px;min-height:44px;border-radius:8px}
html[data-concept=c] .showcase-stage{width:100%;max-width:1100px;padding:0 150px}
html[data-concept=c] .project-panel{min-height:390px;padding:22px;gap:24px;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);border-radius:20px;transition:transform var(--motion-medium) var(--motion-ease),box-shadow var(--motion-medium),border-color var(--motion-fast)}
.project-panel::before{border-radius:13px}
.project-panel::after{border-radius:21px;transition:opacity 640ms var(--motion-ease)}
html[data-concept=c] .project-panel:hover,html[data-concept=c] .project-panel:focus-within{transform:translateY(-3px)}
.project-media img{aspect-ratio:1.5;transition:transform 640ms var(--motion-ease)!important;filter:none!important}
.project-media{border-width:3px;border-radius:12px}
.visual-topline{font-size:9px}
.media-caption{font-size:10px;line-height:1.55}
#portfolio .project-details h3{font-size:clamp(25px,2.15vw,31px);margin:10px 0 9px;line-height:1.13}
#portfolio .project-role{font-size:11px;line-height:1.5;font-weight:700;margin:0 0 13px}
.dark-mode #portfolio .project-role{}
#portfolio .project-details p{font-size:13px;line-height:1.65;margin-bottom:13px}
#portfolio .project-category{font-size:9px;line-height:1.55;letter-spacing:.09em}
#portfolio .project-tech{font-size:10px;padding:8px 10px;line-height:1.55;transition:transform var(--motion-medium) var(--motion-ease)}
.project-actions{gap:9px;margin-top:17px;flex-wrap:wrap}
.project-action{min-height:44px;font-size:10px;padding:11px 12px;letter-spacing:.055em}
.action-note{margin-top:14px;font-size:10px}
html[data-concept=c].showcase-ready .deck-preview{width:140px;height:77%;top:11.5%;padding:12px;border-radius:17px;transition:transform 640ms var(--motion-ease),box-shadow 420ms}
.deck-left{left:23px;transform:rotateY(8deg) rotateZ(-5deg) scale(.92)}
.deck-right{right:23px;transform:rotateY(-8deg) rotateZ(5deg) scale(.92)}
.deck-preview img{height:60%;opacity:.74;filter:saturate(.65);transition:opacity 420ms}
.deck-preview span{font-size:11px;line-height:1.4}
.deck-number{font-size:10px}
.deck-wayfinding{margin-top:29px;font-size:10px}
:is(.project-action,.social-badge,.contact-send){border-radius:8px;transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-medium),background-color var(--motion-medium);text-decoration:none}
:is(.project-action,.social-badge,.contact-send):is(:hover,:focus-visible){transform:translateY(-2px);outline-offset:4px}
.dark-mode :is(.project-action,.social-badge,.contact-send):focus-visible{}
:is(.project-action,.social-badge,.contact-send):active{transform:translateY(1px)}
.social-badge{}
.dark-mode .social-badge{}
#contact p{line-height:1.7}
.social-badge i{transition:transform 420ms var(--motion-ease)}
.social-badge:is(:hover,:focus-visible) i{transform:translateY(-2px) rotate(-4deg)}
#site-footer{padding-block:25px;line-height:1.6}
.toggle-container:focus-within{}
@media(min-width:1000px) and (max-width:1199px){html[data-concept=c] .showcase-stage{padding-inline:130px}
.project-rail{max-width:830px}
.project-selector{padding-inline:8px}
.deck-left{left:8px}
.deck-right{right:8px}
html[data-concept=c].showcase-ready .deck-preview{width:128px}}
@media(max-width:999px),(max-height:679px),(pointer:coarse),(max-width:1099px) and (max-height:739px){.portfolio-scene{padding:42px 8px}
html[data-concept=c] .showcase-stage{max-width:610px;padding:0}
.project-rail{grid-template-columns:repeat(2,1fr);max-width:610px;margin-bottom:30px}
.project-selector:last-child{grid-column:1/-1}
.project-selector{font-size:12px}
.deck-core{gap:30px}
html[data-concept=c] .project-panel{min-height:0;padding:22px}
.project-details{padding-top:22px}
#portfolio .project-details p{font-size:14px}
.project-action{font-size:11px}
.project-panel{scroll-margin-top:90px}
.project-role{font-size:12px!important}
.project-media img{aspect-ratio:1.65}
.deck-wayfinding{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.project-panel,.project-media img,.project-tech,.project-action,.project-selector,.deck-preview,.social-badge{transform:none!important;translate:none!important}}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;transform:none!important}
.contact-send{border-radius:8px;min-height:46px}
.social-badge{text-shadow:none!important}
.social-badge :is(span,i){color:inherit!important}
.dark-mode .social-badge{}
.contact-send{text-shadow:none!important}
:root{--violet:#a88cc7;--indigo:#344273;
 --surface:#fbd0cd;--surface-high:#ffe6dc;--edge-lit:#fff3e5c9;--ambient-opacity:.18;--action-ink:#fff4ee;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
 --radius-control:9px;--radius-label:6px;--radius-surface:16px;--radius-card:22px;
 --shadow-rest:0 2px 0 var(--depth),0 5px 10px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-raised:0 4px 0 var(--depth),0 10px 20px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-hover:0 5px 0 var(--depth),0 12px 24px var(--shade),0 0 18px var(--glow),inset 0 1px var(--edge-lit);
 --shadow-pressed:0 1px 0 var(--depth),0 3px 8px var(--shade),inset 0 1px 3px var(--shade);
 --shadow-card:0 6px 0 -2px var(--depth),0 22px 42px var(--shade),inset 0 1px 1px var(--edge-lit);
 --shadow-heading:0 3px 0 var(--depth),0 9px 20px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-focus:0 0 0 3px var(--surface-high),0 0 0 6px var(--focus),0 0 22px var(--glow);
 --font-body:Arial,Helvetica,sans-serif;--type-wordmark:30px;--type-nav:14px;--type-hero:clamp(28px,3vw,38px);--type-heading:clamp(27px,2.6vw,35px);--type-project:clamp(25px,2.1vw,30px);--type-body:17px;--type-button:11px;--type-meta:10px;
 --line-body:1.75;--line-title:1.15;--measure:70ch;--tracking-meta:.1em;
 --duration-feedback:100ms;--duration-fast:180ms;--duration-standard:300ms;--duration-deliberate:460ms;--duration-cinematic:620ms;--duration-theme:320ms;
 --ease-out:cubic-bezier(.2,.75,.25,1);--ease-flow:cubic-bezier(.22,.68,.2,1);--ease-press:cubic-bezier(.3,0,.65,1);
 --motion-ease:var(--ease-flow);--deck-ease:var(--ease-flow);--glide:var(--ease-out);
 --z-background:-2;--z-ambient:-1;--z-content:1;--z-deck:3;--z-header:100;--z-skip:200;
 --header-height:72px;--deck-width:750px;--deck-shoulder:150px;
 color-scheme:light;scroll-padding-top:var(--header-height);}
:root[data-theme=night]{--canvas:#272438;
 --surface:#353148;--surface-high:#51425f;--surface-low:#24243b;--surface-gradient:linear-gradient(135deg,#3b354e,#2c2c45 72%,#39304f);
 --edge:#a286b185;--depth:#1b192d;--shade:#0b102c80;--ambient-opacity:.35;--glow:#b78ddd42;--header-surface:#211b2af5;--heading-surface:linear-gradient(135deg,#404169,#303454);
 color-scheme:dark;}
:root[data-deck-scale="64"]{--deck-width:750px}
:root[data-ambient=balanced]{--ambient-opacity:.35}
html,body,body.dark-mode{background-color:var(--canvas);color:var(--ink);font-family:var(--font-body)}
html{scroll-behavior:smooth;scroll-snap-type:none!important}
body{transition:background-color var(--duration-theme) var(--ease-flow),color var(--duration-theme)}
:is(a,button,[role=button],label),:is(a,button,[role=button],label) *{text-decoration:none!important;text-decoration-line:none!important}
a{color:var(--ink);text-underline-offset:0}
:where(a,button,[tabindex="0"]):focus-visible{outline:2px solid var(--focus)!important;outline-offset:5px;box-shadow:var(--shadow-focus)!important}
:where(a,button):focus:not(:focus-visible){outline:none}
::selection{color:#fff}
*{}
header,body.dark-mode header{height:var(--header-height);min-height:var(--header-height);padding:0 24px;background:var(--header-surface);border:0;border-bottom:1px solid var(--edge);backdrop-filter:none;box-shadow:0 3px 12px var(--shade);z-index:var(--z-header);transition:background-color var(--duration-theme),box-shadow var(--duration-standard)}
html[data-scrolled=true] header{box-shadow:0 7px 23px var(--shade),inset 0 -1px var(--edge-lit)}
header nav.container{height:100%;max-width:1200px;padding:0}
header .nav-container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-name{display:flex;align-items:center;flex:none}
.brand-name .logo,footer .logo{font-size:var(--type-wordmark);line-height:1;letter-spacing:-.035em;font-weight:500;min-height:44px;margin:0;transition:transform var(--duration-standard) var(--ease-out),filter var(--duration-standard)}
.dark-mode .logo{}
.logo .logo-icon{font-size:1.3em;line-height:1;margin-right:8px;transition:transform var(--duration-standard) var(--ease-out)}
.logo:hover,.logo:focus-visible{transform:translateY(-1px)}
.logo:is(:hover,:focus-visible) .logo-icon{transform:rotate(-3deg)}
.logo:active{transform:translateY(1px)}
header .nav-links{gap:6px;margin:0;align-items:center;flex-wrap:nowrap}
header .nav-links li{margin:0;display:flex}
header .nav-links a,body.dark-mode header .nav-links a{display:inline-flex;align-items:center;gap:6px;font-size:var(--type-nav);font-weight:600;line-height:1;min-height:44px;padding:0 10px;margin:0;border:1px solid transparent;border-radius:var(--radius-control);color:var(--header-ink);background:none;box-shadow:none;opacity:1;text-shadow:none;transform:none;transition:transform var(--duration-fast) var(--ease-out),color var(--duration-fast),background-color var(--duration-standard),box-shadow var(--duration-standard)}
header .nav-links a::after,header .nav-links a::before,.project-selector::after{content:none!important;display:none!important}
header .nav-links a:is(:hover,:focus-visible),body.dark-mode header .nav-links a:is(:hover,:focus-visible){transform:translateY(-1px);color:var(--ink);background:var(--surface);opacity:1}
header .nav-links a.active,body.dark-mode header .nav-links a.active{color:var(--ink);background:var(--surface-gradient);border-color:var(--edge);box-shadow:var(--shadow-rest)}
header .nav-links i{font-size:13px;opacity:.86}
.toggle-container{flex:none;display:flex;gap:6px;min-width:112px;height:44px;margin:0;filter:none!important}
.mode-icon{font-size:16px;margin:0;line-height:1;transition:opacity var(--duration-theme),transform var(--duration-deliberate) var(--ease-out);width:19px;text-align:center}
.toggle-container .mode-icon:last-child{opacity:.45;transform:scale(.88)}
.dark-mode .toggle-container .mode-icon:first-child{opacity:.45;transform:scale(.88)}
.dark-mode .toggle-container .mode-icon:last-child{opacity:1;transform:scale(1)}
#toggle-dark-mode{left:25px;top:0;width:56px;height:44px;margin:0}
.toggle-label{width:52px;height:28px;border:1px solid var(--edge);transition:background-color var(--duration-theme),box-shadow var(--duration-standard)}
.toggle-label::after{width:20px;height:20px;left:3px;top:3px;bottom:auto;background:#fff2df;transition:transform var(--duration-deliberate) var(--ease-out),background-color var(--duration-theme);transform:translateX(0)}
#toggle-dark-mode:checked+.toggle-label{background:#665783}
#toggle-dark-mode:checked+.toggle-label::after{transform:translateX(24px);background:#f5e6ff}
#toggle-dark-mode:hover+.toggle-label{box-shadow:inset 0 2px 4px #2e234044,0 0 14px var(--glow)}
#toggle-dark-mode:active+.toggle-label::after{scale:.92}
#toggle-dark-mode:focus-visible+.toggle-label{outline:2px solid var(--focus);outline-offset:5px;box-shadow:var(--shadow-focus)}
.site-background path{transition:fill var(--duration-theme) var(--ease-flow);animation-timing-function:linear}
.site-background .out-top{animation-duration:40s;animation-delay:-11s;opacity:.9}
.site-background .in-top{animation-duration:20s;animation-delay:-7s;opacity:.83}
.site-background .out-bottom{animation-duration:50s;animation-delay:-23s;opacity:.94}
.site-background .in-bottom{animation-duration:30s;animation-delay:-13s;opacity:.86}
.ambient-light,.dark-mode .ambient-light{opacity:var(--ambient-opacity);filter:none;transition:opacity var(--duration-theme)}
.ambient-light::before,.ambient-light::after{filter:none;width:65vw;height:65vw;max-width:900px;max-height:900px;background:radial-gradient(ellipse,#9383cd55,transparent 66%);left:-10%;top:-20%;border-radius:50%}
.ambient-light::after{left:auto;top:auto;right:-14%;bottom:-18%}
main>section:not(#portfolio),.portfolio-scene{border-radius:0;background:transparent!important;min-height:calc(100svh - var(--header-height));margin:0;padding:64px 20px}
section.arrived>:not(.project-grid){animation:none!important}
section p,section p:hover,section h3,section h3:hover,body.dark-mode section p:hover,body.dark-mode section h3:hover{background:none;text-shadow:none;color:var(--ink-secondary)}
section p{font-size:var(--type-body);line-height:var(--line-body)}
main :is(h1,h2),#portfolio .portfolio-heading,body.dark-mode main :is(h1,h2){font-size:var(--type-heading);line-height:1.15;letter-spacing:.015em;padding:15px 24px;margin:0 0 40px;color:var(--heading-ink);background:var(--heading-surface);border:1px solid var(--edge);border-radius:11px;box-shadow:var(--shadow-heading);text-shadow:var(--heading-emboss);transform:none;transition:color var(--duration-theme),background-color var(--duration-theme),box-shadow var(--duration-theme)}
main :is(h1,h2)::before{content:none}
main :is(h1,h2):hover{transform:none}
main :is(h1,h2) i{font-size:.87em;margin-right:5px}
#about .container{width:100%;display:flex;flex-direction:column;align-items:center;padding:0}
#about h1{font-size:var(--type-hero);margin-bottom:28px}
#about p{max-width:var(--measure);font-size:17px;line-height:1.75;margin:0 0 32px;padding:0}
#about p>i{font-size:.75em;color:var(--heading-ink)}
#about-picture{width:min(100%,660px);max-width:min(100%,660px);padding:7px;border:1px solid var(--edge);border-radius:14px;background:var(--surface-gradient);box-shadow:var(--shadow-card);isolation:isolate}
#about-picture picture{overflow:hidden;border-radius:9px}
#about-picture .portrait-night{inset:7px}
#about-picture img{border:0;box-shadow:none;border-radius:8px;transition:transform var(--duration-cinematic) var(--ease-out)}
#about-picture:hover img,#about-img:hover,body.dark-mode #about-picture:hover img{transform:scale(1.012);box-shadow:none}
#about-picture::after{content:"";position:absolute;inset:-7px;border:1px solid var(--edge);border-radius:18px;opacity:.3;pointer-events:none}
#services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;align-items:stretch;gap:28px;justify-items:center}
#services>h2{grid-column:1/-1;align-self:start;margin-bottom:12px}
.service{width:100%;max-width:460px;margin:0;padding:36px 32px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-card);text-align:left;transition:transform var(--duration-deliberate) var(--ease-out),border-color var(--duration-standard)}
.service:first-of-type{justify-self:end}
.service:last-of-type{justify-self:start}
.service:hover{transform:translateY(-3px);border-color:var(--focus)}
.service h3,.dark-mode .service h3{font-size:22px;line-height:1.3;color:var(--ink);padding:0;margin:0 0 20px;letter-spacing:-.015em}
.service h3 i{display:block;width:48px;height:48px;padding-top:13px;text-align:center;margin-bottom:24px;font-size:22px;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface);box-shadow:var(--shadow-rest);color:var(--heading-ink)}
.service p{font-size:16px;line-height:1.8;margin:0}
#portfolio{padding:0}
.portfolio-scene{padding:48px 0 56px;gap:0}
#portfolio .portfolio-heading{margin-bottom:28px}
.project-rail,.dark-mode .project-rail{max-width:100%;padding:7px;gap:5px;margin:0 0 38px;background:var(--surface-gradient);border:1px solid var(--edge);border-radius:13px;box-shadow:var(--shadow-raised)}
.project-selector,.dark-mode .project-selector{font-size:11px;gap:7px;padding:10px 11px;border-radius:var(--radius-control);color:var(--ink-secondary);text-shadow:none;min-height:46px;transition:transform var(--duration-standard) var(--ease-out),background-color var(--duration-standard),box-shadow var(--duration-standard)}
.project-selector>i{font-size:13px}
.project-selector:hover{translate:none;transform:translateY(-1px)}
.project-selector[aria-current=true],.dark-mode .project-selector[aria-current=true]{background:var(--surface-high);color:var(--ink);border-color:var(--edge);box-shadow:var(--shadow-rest)}
.project-selector[aria-current=true] i{color:var(--heading-ink);filter:drop-shadow(0 0 4px var(--glow))}
.project-selector:not([aria-current=true]):hover{color:var(--ink);background:var(--surface-high)}
html[data-concept=c] .showcase-stage{max-width:calc(var(--deck-width) + 2 * var(--deck-shoulder));padding:0 var(--deck-shoulder)}
html[data-concept=c] .project-panel,.dark-mode .deck-core .project-panel{padding:26px;gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:394px;border:1px solid var(--edge);border-radius:var(--radius-card);background:var(--surface-gradient);box-shadow:var(--shadow-card);align-items:center;transition:transform var(--duration-deliberate) var(--ease-out),border-color var(--duration-theme),box-shadow var(--duration-theme)}
.project-panel::before{inset:7px;border-radius:16px;border-color:var(--edge);opacity:.38}
.project-panel::after,.dark-mode .project-panel::after{inset:-2px;border-radius:24px;box-shadow:0 0 0 1px var(--edge-lit),0 0 28px var(--glow);transition:opacity var(--duration-deliberate)}
html[data-concept=c] .project-panel:is(:hover,:focus-within),.dark-mode .deck-core .project-panel:is(:hover,:focus-within){transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--focus)}
.project-details{padding:4px 0}
.visual-topline,.dark-mode .visual-topline{font-size:9px;color:var(--ink-muted);letter-spacing:.11em;margin-bottom:14px}
.media-caption,.dark-mode .media-caption{font-size:10px;line-height:1.6;color:var(--ink-muted);margin:12px 2px 0}
.project-media,.dark-mode .project-media{border:2px solid var(--edge-lit);border-radius:11px;box-shadow:0 3px 0 var(--shade),0 8px 16px var(--shade)}
.project-media img{aspect-ratio:1.5;object-fit:contain;transition:transform var(--duration-cinematic) var(--ease-out)!important}
#portfolio .project-details h3,.dark-mode #portfolio .project-details h3{font-size:var(--type-project);line-height:1.12;margin:9px 0 10px;letter-spacing:-.035em;color:var(--ink);text-shadow:0 1px var(--edge-lit);text-wrap:balance}
#portfolio .project-category,.dark-mode #portfolio .project-category{font-size:9px;letter-spacing:.1em;color:var(--ink-muted)}
#portfolio .project-role,.dark-mode #portfolio .project-role{font-size:11px;color:var(--ink-secondary);line-height:1.55;margin-bottom:13px}
#portfolio .project-details p,.dark-mode #portfolio .project-details p{font-size:13px;line-height:1.7;color:var(--ink-secondary);margin:0 0 14px}
#portfolio .project-tech,.dark-mode #portfolio .project-tech{font-size:10px;line-height:1.6;padding:7px 9px;background:var(--surface-low);border-color:var(--edge);color:var(--ink-secondary);box-shadow:inset 0 1px var(--edge-lit);border-radius:var(--radius-label);transform:none}
.project-panel:is(:hover,:focus-within) .project-tech{transform:translateY(-1px)}
.project-actions{margin-top:18px;gap:10px}
.action-note,.dark-mode .action-note{font-size:10px;color:var(--ink-muted);line-height:1.6;margin-top:14px}
html[data-concept=c].showcase-ready .deck-preview{width:133px;padding:13px;height:76%;top:12%;border-width:1px;border-radius:17px}
.deck-left{left:20px}
.deck-right{right:20px}
.deck-preview img{border-width:1px;opacity:.8;filter:saturate(.72)}
.deck-preview span{font-size:11px;line-height:1.4;padding-top:14px}
.deck-wayfinding{margin-top:28px;color:var(--ink-muted)!important}
.showcase-stage::before{filter:none;inset:-15% 0;background:radial-gradient(ellipse,var(--deck-accent),transparent 68%);opacity:.08}
.dark-mode .showcase-stage::before{opacity:.09}
:is(.project-action,.contact-send,.social-badge,.lab-button),.dark-mode :is(.project-action,.contact-send,.social-badge,.lab-button){min-height:46px;border:1px solid var(--edge)!important;border-radius:var(--radius-control);background:var(--surface-gradient)!important;color:var(--ink)!important;box-shadow:var(--shadow-raised)!important;text-shadow:none!important;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast),border-color var(--duration-theme);outline:none;font-family:var(--font-body)}
:is(.project-action.primary,.contact-send),.dark-mode :is(.project-action.primary,.contact-send){background:var(--action-bg)!important;color:var(--action-ink)!important;box-shadow:0 4px var(--action-depth),0 9px 17px var(--shade),inset 0 1px #fff5!important}
.project-action{font-size:10px;letter-spacing:.05em;padding:11px 12px;gap:9px}
.project-action i,.contact-send i,.social-badge i{transition:transform var(--duration-standard) var(--ease-out)}
:is(.project-action,.social-badge,.contact-send,.lab-button):is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:var(--shadow-hover)!important;outline:none}
:is(.project-action,.social-badge,.contact-send,.lab-button):focus-visible{outline:2px solid var(--focus)!important;outline-offset:5px;box-shadow:var(--shadow-focus)!important}
:is(.project-action,.social-badge,.contact-send):is(:hover,:focus-visible) i{transform:translate(1px,-1px)}
:is(.project-action,.social-badge,.contact-send,.lab-button):active{transform:translateY(2px);box-shadow:var(--shadow-pressed)!important}
:is(button:disabled,[aria-disabled=true]){opacity:.48;cursor:not-allowed;transform:none!important;box-shadow:var(--shadow-rest)!important}
#testimonials{min-height:65svh}
#testimonials blockquote{max-width:760px;margin:0;padding:25px 32px;border-inline:1px solid var(--edge);border-radius:var(--radius-surface);background:linear-gradient(90deg,transparent,var(--surface),transparent)}
#testimonials p{margin:0;line-height:1.85;font-size:18px}
#contact{padding:64px 20px 80px}
.contact-content{max-width:960px;display:grid;grid-template-columns:1fr 1.1fr;gap:20px 56px;align-items:center;text-align:left}
.contact-content>p{grid-column:1;grid-row:1;margin:0;max-width:38ch;align-self:end;font-size:18px;line-height:1.85}
.contact-badges{grid-column:1;grid-row:2;align-self:start;justify-content:flex-start;gap:12px;margin:4px 0 0}
.contact-letter{grid-column:2;grid-row:1/3;max-width:none;margin:0;padding:32px;border-radius:var(--radius-surface);background:var(--surface-gradient)!important;border:1px solid var(--edge)!important;box-shadow:var(--shadow-card)}
.social-badge{font-size:11px;letter-spacing:.08em;overflow:visible}
.badge-icon{padding:13px;font-size:19px;background:transparent;border-right:1px solid var(--edge)}
.social-badge>span:last-child{padding:0 14px}
.letter-heading,.dark-mode .letter-heading{font-size:24px;color:var(--ink);gap:12px}
.letter-stamp{font-size:29px;padding:8px;transition:transform var(--duration-deliberate) var(--ease-out)}
.contact-letter:is(:hover,:focus-within) .letter-stamp{transform:rotate(3deg)}
#contact .letter-address{border:0;padding:0;margin:24px 0 30px;font-size:23px}
.letter-address a,.dark-mode .letter-address a{display:inline-flex;align-items:center;min-height:44px;font-size:23px;font-weight:500;letter-spacing:-.02em;color:var(--ink);transition:color var(--duration-standard),text-shadow var(--duration-standard)}
.letter-address a:hover{color:var(--heading-ink);text-shadow:0 0 15px var(--glow)}
.contact-send{font-size:14px;justify-content:space-between;width:100%;padding:12px 18px}
.contact-note,.dark-mode .contact-note{color:var(--ink-muted);font-size:11px;margin-top:15px}
footer.container,#site-footer{background:var(--header-surface);border-top:1px solid var(--edge);padding:30px 28px;box-shadow:0 -8px 28px var(--shade)}
.footer-inner{max-width:1120px;gap:24px}
.footer-inner .logo{font-size:24px}
.footer-inner p,body.dark-mode footer p{font-size:12px;letter-spacing:.03em;color:var(--ink-muted);margin:0;padding:0}
.footer-social{gap:9px}
.footer-social a{font-size:20px;color:var(--header-ink);border-radius:var(--radius-control);border:1px solid transparent;transition:transform var(--duration-standard),box-shadow var(--duration-standard)}
.footer-social a:is(:hover,:focus-visible){background:var(--surface-gradient);border-color:var(--edge);box-shadow:var(--shadow-rest);transform:translateY(-1px)}
.skip-link{z-index:var(--z-skip);background:var(--ink);color:var(--surface-high)}
@media(min-width:1000px) and (max-height:820px){main>section:not(#portfolio),.portfolio-scene{padding-block:36px}
#about-picture{width:550px;max-width:min(100%,550px)}
#about p{font-size:16px;margin-bottom:24px}
#about h1{margin-bottom:24px}
.portfolio-scene{padding-block:30px}
#portfolio .portfolio-heading{margin-bottom:23px}
.project-rail{margin-bottom:30px}
html[data-concept=c] .project-panel{min-height:376px;padding:23px;gap:22px}
.deck-wayfinding{margin-top:23px}}
@media(min-width:901px) and (max-width:1150px){header{padding-inline:20px}
header .nav-container{gap:12px}
.brand-name .logo{font-size:26px}
header .nav-links{gap:2px}
header .nav-links a,body.dark-mode header .nav-links a{padding-inline:7px;font-size:13px;gap:4px}
header .nav-links i{font-size:12px}}
@media(max-width:999px),(max-height:679px),(pointer:coarse),(max-width:1099px) and (max-height:739px){.portfolio-scene{padding:48px 8px}
html[data-concept=c] .showcase-stage{max-width:610px;padding:0}
.project-rail{max-width:610px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.project-selector{font-size:12px;min-height:48px;justify-content:flex-start;padding-inline:14px}
.project-selector:last-child{grid-column:1/-1;justify-content:center}
.deck-core{gap:32px}
html[data-concept=c] .project-panel{padding:25px;min-height:0}
.project-details{padding-top:22px}
#portfolio .project-details h3{font-size:29px}
#portfolio .project-details p{font-size:15px}
.project-media img{aspect-ratio:1.65}
.project-action{font-size:11px}
.project-panel{scroll-margin-top:22px}
.project-category{font-size:10px!important}
.action-note,.media-caption{font-size:11px}
.contact-content{gap:24px;max-width:680px;grid-template-columns:1fr}
.contact-content>p{max-width:55ch;text-align:center;margin:auto;grid-row:auto}
.contact-badges{grid-row:auto;justify-content:center}
.contact-letter{grid-column:1;grid-row:auto;max-width:520px;width:100%;margin:12px auto 0}}
@media(max-width:900px){:root{--header-height:68px}
header,body.dark-mode header{padding:0 18px}
.brand-name .logo{font-size:28px}
.toggle-container{margin-right:50px}
.nav-container .menu-icon{right:15px;top:12px;width:44px;height:44px;background:none!important;border:1px solid transparent;border-radius:var(--radius-control)}
.menu-icon .bar{background:var(--header-ink);width:22px}
.menu-icon:hover{background:var(--surface)!important}
.nav-container .nav-links{background:var(--header-surface);padding:16px;gap:5px;border-bottom:1px solid var(--edge);box-shadow:var(--shadow-card)}
header .nav-links li a,body.dark-mode header .nav-links li a{min-height:48px;font-size:16px;justify-content:flex-start;padding-inline:20px;gap:12px}
.nav-links li{width:100%}
.nav-links li a{width:100%}
#services{gap:22px}
.service{padding:28px 24px}
.service h3{font-size:20px}
.service p{font-size:15px}}
@media(max-width:600px){main.container{padding:0 16px}
main>section:not(#portfolio){padding:48px 8px;min-height:auto}
#about{padding-top:48px!important;padding-bottom:60px!important}
#about .container{padding:0 8px}
#about p{font-size:16px;text-wrap:pretty;line-height:1.8;margin-bottom:28px}
#about-picture{max-width:100%;width:100%;padding:5px}
#about-picture .portrait-night{inset:5px}
main :is(h1,h2),body.dark-mode main :is(h1,h2),#portfolio .portfolio-heading{font-size:26px;padding:13px 18px;margin-bottom:30px}
#services{grid-template-columns:1fr;gap:23px}
#services>h2{grid-column:1;margin-bottom:7px}
.service{max-width:460px!important;padding:28px;justify-self:center!important}
.service h3 i{float:left;display:flex;align-items:center;justify-content:center;padding:0;width:44px;height:44px;font-size:20px;margin:0 15px 12px 0}
.service h3{font-size:21px;min-height:48px;margin-bottom:16px}
.service p{clear:both;font-size:16px}
.portfolio-scene{padding:48px 8px}
.project-rail{padding:7px;gap:6px;margin-bottom:28px}
.project-selector{padding:10px;font-size:11px;gap:8px}
.project-selector i{font-size:13px}
.project-selector .project-name{white-space:normal;text-align:left;line-height:1.4}
html[data-concept=c] .project-panel{padding:23px 20px}
.project-details{padding-top:21px}
#portfolio .project-details h3{font-size:27px!important;line-height:1.16}
#portfolio .project-details p{font-size:14px}
.visual-topline{font-size:9px}
.project-action{font-size:10px;padding:11px 12px}
.project-actions{gap:12px}
.project-role{font-size:11px!important}
.contact-content>p{font-size:16px;line-height:1.8}
.contact-letter{padding:25px 22px}
.letter-heading{font-size:23px}
#contact .letter-address a{font-size:22px}
.contact-badges{gap:12px}
.social-badge{font-size:11px}
.social-badge>span:last-child{padding:0 13px}
.badge-icon{padding:12px;font-size:19px}
#testimonials{padding-block:60px}
#testimonials blockquote{padding:20px}
#testimonials p{font-size:16px}
footer.container,#site-footer{padding:28px 20px}
.footer-inner{gap:18px}
.footer-social{gap:15px}}
@media(max-width:359px){header,body.dark-mode header{padding-inline:12px}
.brand-name .logo{font-size:23px}
.logo .logo-icon{margin-right:5px}
.toggle-container{min-width:92px;width:92px;gap:3px;margin-right:43px}
.mode-icon{width:14px;font-size:13px}
.toggle-label{width:48px}
#toggle-dark-mode{left:18px;width:48px}
.toggle-label::after{width:18px;height:18px;top:4px}
#toggle-dark-mode:checked+.toggle-label::after{transform:translateX(22px)}
.nav-container .menu-icon{right:7px}
.project-selector{font-size:10px;padding-inline:7px}
.project-selector i{font-size:11px}
html[data-concept=c] .project-panel{padding:20px 16px}
#portfolio .project-details h3{font-size:25px!important}
.project-action{padding-inline:10px;font-size:9px}
.letter-heading{font-size:21px;gap:9px}
.letter-stamp{font-size:26px;padding:6px}
#contact .letter-address a{font-size:20px}
.contact-letter{padding:23px 18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.logo,.logo i,.service,.project-panel,.project-media img,.project-selector,.project-action,.contact-send,.social-badge{transform:none!important}}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(forced-colors:active){:is(a,button):focus-visible{outline:3px solid LinkText!important}
.logo{-webkit-text-fill-color:LinkText;background:none}
.project-selector[aria-current=true],header .nav-links a.active{border:2px solid Highlight}}
main :is(#about,#services,#portfolio,#testimonials,#contact) :is(h1,h2),body.dark-mode main :is(#about,#services,#portfolio,#testimonials,#contact) :is(h1,h2){color:var(--heading-ink);background:var(--heading-surface);text-shadow:var(--heading-emboss);box-shadow:var(--shadow-heading)}
#toggle-dark-mode:checked+.toggle-label::after{left:3px;right:auto}
header .nav-links a[href],body.dark-mode header .nav-links a[href]{color:var(--header-ink)}
header .nav-links a[href].active,body.dark-mode header .nav-links a[href].active{color:var(--ink)}
header .nav-links a.active,header .nav-links a.active:hover,body.dark-mode header .nav-links a.active{transform:none;text-shadow:none}
header .nav-links a.active:is(:hover,:focus-visible),body.dark-mode header .nav-links a.active:is(:hover,:focus-visible){transform:translateY(-1px)}
body:not(.dark-mode) main p{color:var(--ink-secondary)}
@media(max-width:999px),(max-height:679px),(pointer:coarse),(max-width:1099px) and (max-height:739px){.project-rail,.dark-mode .project-rail{max-width:610px}}
@supports(padding:max(0px)){header,body.dark-mode header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
footer.container{padding-bottom:max(28px,env(safe-area-inset-bottom))}}
:root{--header-gutter:24px}
@media(max-width:900px){:root{--header-gutter:18px}}
@media(max-width:359px){:root{--header-gutter:12px}}
@supports(padding:max(0px)){header,body.dark-mode header{padding-left:max(var(--header-gutter),env(safe-area-inset-left));padding-right:max(var(--header-gutter),env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){#toggle-dark-mode:checked+.toggle-label::after{left:27px;transform:none!important}}
html[data-motion=reduce] #toggle-dark-mode:checked+.toggle-label::after{left:27px;transform:none!important}
@media(max-width:359px){html[data-motion=reduce] #toggle-dark-mode:checked+.toggle-label::after{left:25px}
@media(prefers-reduced-motion:reduce){#toggle-dark-mode:checked+.toggle-label::after{left:25px}}}
:root{--material-system:pass7;
 --canvas:#eeede7;--ink:#292e31;--ink-secondary:#363d40;--ink-muted:#495355;
 --signature:#923328;--signature-bright:#d7503d;--coral:#f77062;--cool:#738693;
 --geo-1:#d9d8d0;--geo-2:#c9cec9;--geo-3:#dde0e1;--geo-4:#f5f1e8;
 --glass-rgb:246 245 239;--glass-deep-rgb:221 224 219;--edge-rgb:67 78 79;--specular-rgb:255 255 249;
 --surface:#ebece6;--surface-high:#f6f4ee;--surface-low:#dfe3df;--surface-gradient:linear-gradient(135deg,rgb(var(--glass-rgb)/.76),rgb(var(--glass-deep-rgb)/.53));
 --edge:rgb(var(--edge-rgb)/.24);--edge-lit:rgb(var(--specular-rgb)/.78);--depth:#aeb7b2;--shade:#293e4426;--glow:#d7503d19;
 --focus:#92392f;--header-ink:#384245;--header-surface:rgb(var(--glass-rgb)/.69);
 --heading-ink:#384345;--heading-surface:linear-gradient(140deg,rgb(var(--specular-rgb)/.66),rgb(var(--glass-deep-rgb)/.59));--heading-emboss:0 1px 0 #fffef8,0 2px 0 #929f9c40;
 --action-bg:linear-gradient(145deg,#b34536,#8f3028);--action-ink:#fffaf5;--action-depth:#692d28;
 --ambient-opacity:.27;--ambient-warm:#b45d3030;--ambient-cool:#64839940;--deck-accent:var(--signature);
 --nav-alpha:.69;--content-alpha:.45;--card-alpha:.64;--secondary-alpha:.34;--control-alpha:.45;
 --nav-blur:10px;--content-blur:5px;--card-blur:12px;--secondary-blur:3px;--saturation:1.06;--specular-alpha:.73;--edge-alpha:.23;
 --shadow-rest:0 2px 0 #81918b40,0 5px 10px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-raised:0 3px 0 #81918b55,0 9px 18px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-hover:0 4px 0 #81918b55,0 12px 24px var(--shade),0 0 18px var(--glow),inset 0 1px var(--edge-lit);
 --shadow-pressed:0 1px 0 var(--depth),0 3px 7px var(--shade),inset 0 1px 3px #172c331f;
 --shadow-card:0 5px 0 -2px #82908b70,0 22px 42px var(--shade),inset 0 1px 1px var(--edge-lit),inset 0 -1px 1px #7687861a;
 --shadow-heading:0 3px 0 #9eaaa57a,0 9px 20px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-focus:0 0 0 3px var(--surface-high),0 0 0 6px var(--focus),0 0 18px var(--glow);
 scrollbar-color:#8c9691 var(--canvas);}
:root[data-theme=night]{--canvas:#1c2231;--ink:#f2f2ec;--ink-secondary:#e1e5e6;--ink-muted:#bbc5d0;
 --signature:#f8a78f;--signature-bright:#ff7e5f;--coral:#f77062;--cool:#8097c6;
 --geo-1:#2a3656;--geo-2:#29313e;--geo-3:#233b54;--geo-4:#3b4461;
 --glass-rgb:40 50 65;--glass-deep-rgb:24 33 48;--edge-rgb:161 180 203;--specular-rgb:210 229 248;
 --surface:#2e3b4d;--surface-high:#39485a;--surface-low:#273545;--edge:rgb(var(--edge-rgb)/.25);--edge-lit:rgb(var(--specular-rgb)/.23);--depth:#121c2b;--shade:#050b2080;--glow:#e781571c;
 --focus:#ffac91;--header-ink:#d3dbe4;--header-surface:rgb(var(--glass-rgb)/.69);
 --heading-ink:#e1e8ed;--heading-emboss:0 1px 0 #07101e,0 2px 0 #132139,0 -1px #d2e5f822;
 --action-bg:linear-gradient(145deg,#ae4533,#873429);--action-ink:#fff9f1;--action-depth:#482720;
 --ambient-opacity:.34;--ambient-warm:#d9783526;--ambient-cool:#799ad152;
 --shadow-rest:0 2px 0 #101c2c80,0 5px 10px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-raised:0 3px 0 #101c2c99,0 9px 18px var(--shade),inset 0 1px var(--edge-lit);
 --shadow-hover:0 4px 0 #101c2c99,0 12px 24px var(--shade),0 0 18px var(--glow),inset 0 1px var(--edge-lit);
 --shadow-card:0 5px 0 -2px #0e1828aa,0 22px 42px var(--shade),inset 0 1px 1px var(--edge-lit),inset 0 -1px 1px #08152566;
 --shadow-heading:0 3px 0 #101b2dbb,0 9px 20px var(--shade),inset 0 1px var(--edge-lit);scrollbar-color:#63738b var(--canvas);}
html,body,body.dark-mode{background-color:var(--canvas);background-image:none;color:var(--ink)}
::selection{background:var(--signature);color:var(--canvas)}
*{-webkit-tap-highlight-color:#bd4b3226}
body .site-background .out-top,body.dark-mode .site-background .out-top{fill:var(--geo-1)}
body .site-background .in-top,body.dark-mode .site-background .in-top{fill:var(--geo-2)}
body .site-background .out-bottom,body.dark-mode .site-background .out-bottom{fill:var(--geo-3)}
body .site-background .in-bottom,body.dark-mode .site-background .in-bottom{fill:var(--geo-4)}
.ambient-light::before{background:radial-gradient(ellipse,var(--ambient-cool),transparent 66%)}
.ambient-light::after{background:radial-gradient(ellipse,var(--ambient-warm),transparent 68%)}
header,body.dark-mode header{background:rgb(var(--glass-rgb)/var(--nav-alpha));backdrop-filter:blur(var(--nav-blur)) saturate(var(--saturation));-webkit-backdrop-filter:blur(var(--nav-blur)) saturate(var(--saturation));border-color:var(--edge);box-shadow:0 3px 12px var(--shade),inset 0 -1px rgb(var(--specular-rgb)/.2)}
.brand-name .logo,footer .logo,body.dark-mode .logo{background:none;color:var(--ink);-webkit-text-fill-color:currentColor;text-shadow:none}
.logo .logo-icon,body.dark-mode .logo .logo-icon{color:var(--signature)!important;-webkit-text-fill-color:currentColor}
.logo:hover,.logo:focus-visible{filter:drop-shadow(0 2px 5px var(--glow))}
html[data-wordmark=coral] .logo .logo-icon{color:var(--signature-bright)!important}
html[data-wordmark=ember] .logo .logo-icon{background:linear-gradient(10deg,var(--signature),var(--signature-bright));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
header .nav-links a[href],body.dark-mode header .nav-links a[href]{color:var(--header-ink)}
header .nav-links a[href]:is(:hover,:focus-visible),header .nav-links a[href].active,body.dark-mode header .nav-links a[href]:is(:hover,:focus-visible),body.dark-mode header .nav-links a[href].active{color:var(--signature);background:linear-gradient(130deg,rgb(var(--specular-rgb)/.19),rgb(var(--glass-rgb)/.38));border-color:var(--edge);box-shadow:var(--shadow-rest)}
.toggle-label{background:#7c8885;box-shadow:inset 0 2px 4px #23353255,0 1px var(--edge-lit)}
.toggle-label::after{background:#fcfaf1;box-shadow:0 2px 4px #26383a55}
#toggle-dark-mode:checked+.toggle-label{background:#3e5069}
#toggle-dark-mode:checked+.toggle-label::after{background:#dce6ef}
.service,body.dark-mode .service,#about-picture,.project-rail,.dark-mode .project-rail{background:rgb(var(--glass-rgb)/var(--content-alpha));background-image:linear-gradient(135deg,rgb(var(--specular-rgb)/.12),transparent 45%);backdrop-filter:blur(var(--content-blur)) saturate(var(--saturation));-webkit-backdrop-filter:blur(var(--content-blur)) saturate(var(--saturation));border-color:var(--edge)}
#about-picture{backdrop-filter:none;-webkit-backdrop-filter:none}
.service h3 i{color:var(--signature);background:rgb(var(--glass-rgb)/.32)}
.service:hover{border-color:rgb(var(--edge-rgb)/.4);box-shadow:var(--shadow-card),0 0 18px var(--glow)}
main :is(#about,#services,#portfolio,#testimonials,#contact) :is(h1,h2),body.dark-mode main :is(#about,#services,#portfolio,#testimonials,#contact) :is(h1,h2){background:var(--heading-surface);color:var(--heading-ink);text-shadow:var(--heading-emboss);border-color:var(--edge);box-shadow:var(--shadow-heading)}
.project-selector[aria-current=true],.dark-mode .project-selector[aria-current=true]{background:rgb(var(--glass-rgb)/.62);color:var(--signature)}
.project-selector[aria-current=true] i{color:var(--signature)}
.project-selector:not([aria-current=true]):hover{background:rgb(var(--glass-rgb)/.5);color:var(--signature)}
html[data-concept=c] .project-panel,body.dark-mode .deck-core .project-panel{background:rgb(var(--glass-rgb)/var(--card-alpha));background-image:linear-gradient(132deg,rgb(var(--specular-rgb)/.13),transparent 34%,rgb(var(--glass-deep-rgb)/.14));backdrop-filter:blur(var(--card-blur)) saturate(var(--saturation));-webkit-backdrop-filter:blur(var(--card-blur)) saturate(var(--saturation));border-color:rgb(var(--edge-rgb)/var(--edge-alpha));box-shadow:var(--shadow-card)}
.project-panel::before{border-color:rgb(var(--specular-rgb)/var(--specular-alpha));opacity:.5;background:none}
.project-panel::after,.dark-mode .project-panel::after{box-shadow:inset 0 1px rgb(var(--specular-rgb)/var(--specular-alpha)),0 0 16px var(--glow);background:radial-gradient(ellipse at 12% 0%,var(--glow),transparent 42%);opacity:0}
html[data-concept=c] .project-panel:is(:hover,:focus-within),body.dark-mode .deck-core .project-panel:is(:hover,:focus-within){border-color:rgb(var(--edge-rgb)/.42);box-shadow:var(--shadow-card)}
.project-panel:is(:hover,:focus-within)::after{opacity:1}
.project-media,.dark-mode .project-media{border-color:rgb(var(--specular-rgb)/.54);box-shadow:0 2px 0 var(--shade),0 7px 16px var(--shade),inset 0 0 0 1px var(--edge);background:#fff}
.project-media img{filter:none!important}
html[data-concept=c].showcase-ready .deck-preview,body.dark-mode .deck-preview{background:rgb(var(--glass-rgb)/var(--secondary-alpha))!important;border-color:var(--edge)!important;color:var(--ink-secondary)!important;box-shadow:0 5px 0 -2px var(--depth),0 18px 30px var(--shade),inset 0 1px var(--edge-lit)!important;backdrop-filter:blur(var(--secondary-blur));-webkit-backdrop-filter:blur(var(--secondary-blur))}
.deck-preview img{border-color:var(--edge-lit)}
.deck-preview:hover,.deck-preview:focus-visible{border-color:var(--signature)!important}
.showcase-stage::before{background:radial-gradient(ellipse,var(--cool),transparent 68%);opacity:.07}
.dark-mode .showcase-stage::before{opacity:.11}
:is(.project-action,.contact-send,.social-badge,.lab-button),.dark-mode :is(.project-action,.contact-send,.social-badge,.lab-button){background:linear-gradient(140deg,rgb(var(--specular-rgb)/.13),transparent 70%),rgb(var(--glass-rgb)/var(--control-alpha))!important;border-color:var(--edge)!important;box-shadow:var(--shadow-raised)!important;color:var(--ink)!important;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast),border-color var(--duration-theme),background-color var(--duration-theme),color var(--duration-theme)}
:is(.project-action.primary,.contact-send),.dark-mode :is(.project-action.primary,.contact-send){background:var(--action-bg)!important;color:var(--action-ink)!important;border-color:#792f2744!important;box-shadow:0 4px var(--action-depth),0 9px 17px var(--shade),inset 0 1px #fff5!important}
:is(.project-action,.contact-send,.social-badge,.lab-button):is(:hover,:focus-visible){border-color:var(--signature)!important;box-shadow:var(--shadow-hover)!important}
:is(.project-action.primary,.contact-send):is(:hover,:focus-visible){box-shadow:0 4px var(--action-depth),0 12px 22px var(--shade),inset 0 1px #fff8,0 0 15px var(--glow)!important}
:is(.project-action,.contact-send,.social-badge,.lab-button):active,:is(.project-action,.contact-send,.social-badge,.lab-button)[data-demo-state=pressed]{transform:translateY(2px);box-shadow:var(--shadow-pressed)!important}
:is(.project-action,.contact-send,.social-badge,.lab-button):focus-visible{outline:2px solid var(--focus)!important;outline-offset:5px;box-shadow:var(--shadow-focus)!important}
:is(button:disabled,[aria-disabled=true]){opacity:.48;box-shadow:var(--shadow-rest)!important;transform:none!important}
#portfolio .project-tech,.dark-mode #portfolio .project-tech{background:rgb(var(--glass-rgb)/.35);color:var(--ink-secondary);border-color:var(--edge);box-shadow:inset 0 1px rgb(var(--specular-rgb)/.3)}
.contact-letter,body.dark-mode .contact-letter{background:linear-gradient(140deg,rgb(var(--specular-rgb)/.13),transparent 56%),rgb(var(--glass-rgb)/.55)!important;border-color:var(--edge)!important;backdrop-filter:blur(var(--content-blur));-webkit-backdrop-filter:blur(var(--content-blur));box-shadow:var(--shadow-card)}
.letter-stamp{border-color:var(--signature);color:var(--signature)}
.letter-address a:hover,body.dark-mode .letter-address a:hover{color:var(--signature)}
.badge-icon{color:var(--signature)}
#testimonials blockquote{background:linear-gradient(90deg,transparent,rgb(var(--glass-rgb)/.48),transparent)}
footer.container,#site-footer{background:rgb(var(--glass-rgb)/.65);border-color:var(--edge);box-shadow:0 -8px 28px var(--shade)}
.footer-social a{color:var(--header-ink)}
.footer-social a:is(:hover,:focus-visible){color:var(--signature);background:rgb(var(--glass-rgb)/.6)}
.service,#about-picture,.project-rail,.contact-letter,footer,.project-tech{transition-property:transform,color,background-color,border-color,box-shadow;transition-duration:var(--duration-standard);transition-timing-function:var(--ease-out)}
@media(max-width:900px){:root{--nav-blur:6px;--content-blur:0px;--card-blur:4px;--nav-alpha:.87;--content-alpha:.65;--card-alpha:.79}
.nav-container .nav-links{background:rgb(var(--glass-rgb)/.97);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:600px),(pointer:coarse){:root{--card-blur:0px;--content-blur:0px;--secondary-blur:0px;--card-alpha:.86}
.project-panel,.service,.contact-letter,.project-rail{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--nav-alpha:.95;--card-alpha:.94;--content-alpha:.84;--secondary-alpha:.8}}
@media(prefers-reduced-transparency:reduce){:root{--nav-alpha:1;--card-alpha:1;--content-alpha:.96;--secondary-alpha:.92}
header,.project-panel,.service,.contact-letter,.project-rail,.deck-preview{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){.project-action,.contact-send,.social-badge{transform:none!important}}
html[data-motion=reduce] :is(.project-action,.contact-send,.social-badge){transform:none!important}
@media(forced-colors:active){.logo,.logo .logo-icon{color:LinkText!important;-webkit-text-fill-color:LinkText!important}
header,.project-panel,.contact-letter{background:Canvas!important;backdrop-filter:none!important}
.project-selector[aria-current=true],header .nav-links a.active{border-color:Highlight!important}}
:is(.project-action,.contact-send,.social-badge)[data-demo-state=hover]{transform:translateY(-2px);box-shadow:var(--shadow-hover)!important;border-color:var(--signature)!important}
:is(.project-action,.contact-send,.social-badge)[data-demo-state=focus]{outline:2px solid var(--focus)!important;outline-offset:5px;box-shadow:var(--shadow-focus)!important}
:is(.project-action,.contact-send,.social-badge)[data-demo-state=disabled]{opacity:.48;box-shadow:var(--shadow-rest)!important;transform:none!important}
html[data-concept=c] .project-panel,body.dark-mode .deck-core .project-panel{color:var(--ink)}
.visual-topline::before,.dark-mode .visual-topline::before{background:var(--signature);box-shadow:0 0 0 3px var(--glow)}
.deck-position,.dark-mode .deck-position{background:rgb(var(--glass-rgb)/.38);color:var(--ink-muted);box-shadow:inset 0 1px var(--edge-lit)}
main :is(h1,h2)::before,body.dark-mode main :is(h1,h2)::before{background:transparent!important;color:var(--heading-ink)!important}
:root[data-theme=night]{--surface-gradient:linear-gradient(135deg,rgb(var(--glass-rgb)/.76),rgb(var(--glass-deep-rgb)/.53));--heading-surface:linear-gradient(140deg,rgb(var(--specular-rgb)/.11),rgb(var(--glass-deep-rgb)/.66))}
.project-panel::before,.dark-mode .project-panel::before{border-color:rgb(var(--specular-rgb)/var(--specular-alpha))}
#portfolio .project-unavailable,body.dark-mode #portfolio .project-unavailable{color:var(--ink-muted);border-color:var(--edge)}
html[data-motion=reduce]{scroll-behavior:auto!important}
@media(max-width:600px),(pointer:coarse){html[data-concept=c] .project-panel{--card-alpha:.86}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-concept=c] .project-panel{--card-alpha:.94}}
@media(prefers-reduced-transparency:reduce){html[data-concept=c] .project-panel{--card-alpha:1}}
body.dark-mode main :is(#about,#services,#testimonials,#contact) p{color:var(--ink-secondary);background:none;text-shadow:none}
body.dark-mode main #services .service h3{color:var(--ink)}
body.dark-mode main #services .service h3 i{color:var(--signature)}
@font-face{font-family:"Kumbh Sans";src:url("vendor/kumbh-sans/regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--material-system:pass8;
 --brand-fallback:#ff8177;--brand-gradient-bottom:#ff0844;--brand-gradient-top:#ffb199;
 --ui-red:#923328;--ui-red-bright:#d7503d;--ui-coral:#f77062;--ui-red-night:#ae4533;
 --deck-out:180ms;--deck-in:460ms;--deck-detail:300ms;
 --portrait-warm:rgb(181 98 59/.11);--portrait-cool:rgb(113 139 148/.15);}
html body :is(header,footer) .logo.logo,html body.dark-mode :is(header,footer) .logo.logo{display:inline-flex;align-items:center;height:44px;width:max-content;max-width:none;
 font-family:"Kumbh Sans",sans-serif;font-size:32px;font-weight:400;line-height:normal;letter-spacing:normal;
 background-color:var(--brand-fallback);background-image:linear-gradient(to top,var(--brand-gradient-bottom) 0%,var(--brand-gradient-top) 100%);
 background-size:100% 80px;background-position:center;background-repeat:no-repeat;
 background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
 color:var(--brand-fallback);text-shadow:none;filter:none;opacity:1;transform:none;
 text-decoration:none!important;transition:filter var(--duration-fast) var(--ease-out);border:0;border-radius:0;box-shadow:none;}
html body :is(header,footer) .logo.logo .logo-icon,html body.dark-mode :is(header,footer) .logo.logo .logo-icon{font-family:"Font Awesome 6 Brands";font-weight:400;font-size:1em;line-height:1;margin:0;
 background:none!important;color:inherit!important;-webkit-text-fill-color:transparent;text-shadow:none;filter:none;transform:none;}
html body :is(header,footer) .logo.logo:is(:hover,:focus-visible){filter:drop-shadow(0 2px 2px rgb(28 34 49/.12));transform:none;opacity:1}
html body :is(header,footer) .logo.logo:focus-visible{outline:2px solid var(--focus);outline-offset:5px;border-radius:3px}
@media(max-width:900px){html[data-theme] body :is(header,footer) .logo.logo{font-size:28px;background-size:100% 70px}}
@media(max-width:359px){html[data-theme] body :is(header,footer) .logo.logo{font-size:23px;background-size:100% 57.5px}}
:root[data-theme=night]{--signature:#f8a78f;--ambient-warm:#a9532921;--ambient-cool:#6788bf4a;--portrait-warm:rgb(174 69 51/.10);--portrait-cool:rgb(101 133 180/.21);--night-light:radial-gradient(ellipse at 50% 100%,#ee80522e,transparent 70%),linear-gradient(140deg,#8298cf25,#2a35474d);--night-hover-edge:#9aacc144}
body.dark-mode header .nav-links a[href]:is(:hover,:focus-visible),body.dark-mode header .nav-links a[href][data-demo-hover=true]{color:#edf1f2;background:var(--night-light);border-color:var(--night-hover-edge);box-shadow:0 3px 8px #07122466,inset 0 1px #d2e5f825;transform:translateY(-1px);text-shadow:none}
body.dark-mode header .nav-links a[href].active,body.dark-mode header .nav-links a[href].active:is(:hover,:focus-visible){color:var(--signature);background:linear-gradient(135deg,#ae453325,#25364f70);border-color:#d78e6e55;box-shadow:0 2px 0 #142034,inset 0 1px #ffd9bc26}
body.dark-mode header .nav-links a[href]:focus-visible{outline:2px solid #c4d8ef;outline-offset:3px}
:root{--deck-accent:var(--signature)}
html[data-concept=c][data-project-transition=true] .deck-core .project-panel,html[data-concept=c][data-project-transition=true] .deck-core .project-panel:is(:hover,:focus-within){transform:none;transition:none}
html[data-project-transition=true] .project-panel :is(.project-tech,.project-media img){transform:none!important;transition:none}
.deck-measure{position:absolute!important;inset:0 auto auto 0!important;width:100%!important;height:auto!important;visibility:hidden!important;pointer-events:none!important;transform:none!important;transition:none!important;animation:none!important}
@media(min-width:1100px) and (min-height:680px),(min-width:1000px) and (min-height:740px){.deck-core>.project-panel:not(.deck-measure){min-height:100%}}
.project-selector[data-pending]:not([aria-current=true]){box-shadow:inset 0 0 0 1px var(--edge);background:rgb(var(--glass-rgb)/.3)}
html body #about-picture{overflow:visible;background:none;padding:7px;border-color:transparent;box-shadow:none;isolation:isolate;transition:background-color var(--duration-theme),border-color var(--duration-theme),box-shadow var(--duration-theme)}
html body #about-picture img,html body #about-picture:hover img{transform:none;filter:none;box-shadow:none;border-radius:10px}
#about-picture picture{position:relative;z-index:1;transition:opacity var(--duration-theme) var(--ease-out)}
#about-picture .portrait-night{inset:7px;position:absolute;transition:opacity var(--duration-theme) var(--ease-out)}
#about-picture::before,#about-picture::after{content:"";position:absolute;pointer-events:none;z-index:0;transition:transform var(--duration-deliberate) var(--ease-out),opacity var(--duration-theme);filter:none}
#about-picture::before{inset:0;border:1px solid var(--edge);border-radius:28px 18px 31px 20px;background:linear-gradient(135deg,rgb(var(--specular-rgb)/.25),transparent 45%,var(--portrait-cool));box-shadow:inset 0 1px var(--edge-lit),0 14px 28px var(--shade);opacity:.65}
#about-picture::after{inset:-6px 10px;border:1px solid rgb(var(--specular-rgb)/.36);border-radius:31px 20px 35px 26px;background:radial-gradient(ellipse at 8% 10%,var(--portrait-warm),transparent 44%);opacity:.7}
html[data-portrait=dissolve] #about-picture picture{border-radius:16px;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 86%,transparent);mask-composite:intersect}
html[data-portrait=dissolve] #about-picture::before{inset:5% 4% 8%;border:0;border-radius:45%;opacity:.35;background:radial-gradient(ellipse,var(--portrait-cool),transparent 70%);box-shadow:none}
html[data-portrait=dissolve] #about-picture::after{display:none}
@media(max-width:600px){html body #about-picture{padding:5px}
#about-picture .portrait-night{inset:5px}
html[data-portrait=dissolve] #about-picture picture{mask-image:linear-gradient(to right,transparent,#000 1%,#000 99%,transparent),linear-gradient(to bottom,#000 90%,transparent)}}
header,body.dark-mode header,header .nav-links a[href],.service,.project-rail,.contact-letter,#site-footer,.project-panel{transition-duration:var(--duration-theme);transition-timing-function:var(--ease-out)}
:root[data-theme=night] ::selection{background:#ae4533;color:#fff9f1}
:root[data-theme=night]{scrollbar-color:#687b95 #1c2231}
@media(prefers-reduced-motion:reduce){#about-picture::before,#about-picture::after{transform:none!important;transition:none!important}}
html[data-motion=reduce] #about-picture::before,html[data-motion=reduce] #about-picture::after{transform:none!important;transition:none!important}
@media(forced-colors:active){html body :is(header,footer) .logo.logo,html body :is(header,footer) .logo.logo .logo-icon{background:none!important;-webkit-text-fill-color:LinkText!important;color:LinkText!important}
#about-picture picture{mask-image:none!important}}
body.dark-mode #about-picture .portrait-day{opacity:0}
html[data-deck-mode=layered] #portfolio .project-details h3{min-height:2.24em}
html[data-deck-mode=layered] .project-details:not(:has(.action-note))::after{content:"";display:block;height:30px}
@media(max-width:600px){header .nav-container{gap:8px}}
:root{--signature:var(--ui-red);--signature-bright:var(--ui-red-bright);--coral:var(--ui-coral);--action-red-start:#b34536;--action-red-end:#8f3028;--action-bg:linear-gradient(145deg,var(--action-red-start),var(--action-red-end))}
:root[data-theme=night]{--ui-red-light:#f8a78f;--signature:var(--ui-red-light);--action-red-start:var(--ui-red-night);--action-red-end:#873429;--action-bg:linear-gradient(145deg,var(--action-red-start),var(--action-red-end))}
html[data-scroll-engine="ready"],html[data-scroll-engine="ready"] body{scroll-behavior:auto!important;scroll-snap-type:none!important;overflow-anchor:none;}
html[data-scroll-engine="ready"] main>section{scroll-snap-align:none;}
html[data-scroll-engine="ready"]{touch-action:auto;}
.identity-kicker{font-size:14px;letter-spacing:.055em;color:var(--ink-muted);margin:0 0 20px;text-align:center}
#about h1{max-width:900px;text-wrap:balance}
#about .about-copy{max-width:850px}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 auto 32px}
.hero-actions .project-action{font-size:12px;min-height:44px;padding:12px 19px}
#services{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.expertise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:950px;width:100%}
.expertise-grid .service{max-width:none;justify-self:stretch;padding:28px 30px}
.expertise-grid .service h3 i{float:left;margin:0 14px 12px 0}
.expertise-grid .service h3{min-height:48px;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.expertise-grid .service h3 i{flex:0 0 48px;margin:0}
.expertise-grid .service p{clear:both;line-height:1.75}
.service details{margin-top:17px;border-top:1px solid var(--edge);padding-top:12px}
.service summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--ink-secondary);font-size:14px}
.service details p{font-size:14px;margin-top:10px}
.capability-proof{display:inline-flex;align-items:center;min-height:44px;gap:8px;margin-top:8px;font-size:14px;color:var(--signature);font-weight:600}
#experience{display:flex;flex-direction:column;align-items:center;gap:26px}
#experience h2,body.dark-mode #experience h2{background:var(--heading-surface);color:var(--heading-ink);text-shadow:var(--heading-emboss);border-color:var(--edge);box-shadow:var(--shadow-heading);margin-bottom:8px}
.work-intro{max-width:800px;text-align:center;font-size:17px;line-height:1.8;margin:0}
.experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1080px}
.work-card,.education-note{border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-card);padding:27px;text-align:left}
.work-meta{font-size:11px;line-height:1.7;color:var(--ink-muted);margin-bottom:12px}
.work-card h3{font-size:21px;color:var(--ink);margin:0 0 18px}
.work-card p{font-size:15px;line-height:1.8;margin:0;color:var(--ink-secondary)}
.education-note{max-width:1080px;width:100%;display:grid;grid-template-columns:.5fr 1fr 1fr;gap:24px;align-items:start;box-shadow:var(--shadow-rest);padding:24px 27px}
.education-note h3{font-size:17px;margin:0;color:var(--ink)}
.education-note p{font-size:13px;line-height:1.8;margin:0;color:var(--ink-secondary)}
.creative-note{font-size:14px;line-height:1.8;color:var(--ink-muted);text-align:center;max-width:760px;margin:0}
@media(max-width:999px),(max-height:679px),(pointer:coarse),(max-width:1099px) and (max-height:739px){.project-selector:last-child:nth-child(even){grid-column:auto;justify-content:flex-start}}
@media(min-width:1000px) and (min-height:680px){.project-rail .project-selector{padding-inline:10px}
.project-rail .project-name{white-space:normal;text-wrap:balance}}
.document-main{max-width:1160px;margin:0 auto;padding:125px 30px 70px;min-height:80vh}
.case-document,.resume-document{max-width:970px;margin:auto}
.document-main h1{color:var(--heading-ink);background:var(--heading-surface);border:1px solid var(--edge);box-shadow:var(--shadow-heading);font-size:36px;line-height:1.2;text-wrap:balance;letter-spacing:-.03em;border-radius:var(--radius-surface);display:table;padding:18px 24px;margin:18px 0 24px;text-align:left}
.document-kicker{font-size:12px;color:var(--ink-muted);line-height:1.7;margin:25px 0 10px;letter-spacing:.035em}
.document-subtitle{font-size:24px;line-height:1.45;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px}
.document-lead{font-size:19px;line-height:1.8;max-width:850px;color:var(--ink-secondary);margin:0 0 28px}
.back-link{display:inline-flex;align-items:center;min-height:44px;color:var(--signature);font-size:14px}
.case-figure{margin:35px 0 40px;padding:12px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-card)}
.case-figure img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:10px;background:var(--surface-low)}
figcaption{font-size:12px;line-height:1.7;padding:12px 5px 2px;color:var(--ink-muted)}
.case-blocks{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.document-main .case-block{min-height:0;display:block;padding:26px;margin:0;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-rest);text-align:left}
.document-main .case-block h2{display:block;font-size:22px;line-height:1.4;letter-spacing:-.02em;color:var(--ink);background:none;box-shadow:none;border:0;padding:0;margin:0 0 15px;text-shadow:none}
.document-main .case-block p{font-size:16px;line-height:1.85;color:var(--ink-secondary);margin:0}
.document-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.document-actions .project-action{font-size:12px;min-height:44px}
.analysis-flow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 35px;padding:0;list-style:none;counter-reset:flow}
.analysis-flow li{flex:1 1 130px;min-width:0;counter-increment:flow;padding:16px;background:var(--surface-gradient);border:1px solid var(--edge);border-radius:10px;font-size:13px;line-height:1.6;color:var(--ink-secondary)}
.analysis-flow li::before{content:counter(flow,decimal-leading-zero);display:block;color:var(--signature);font-size:11px;margin-bottom:7px}
.resume-document{max-width:820px}
.resume-document h2{font-size:22px;margin:36px 0 20px;color:var(--ink);border-bottom:1px solid var(--edge);padding-bottom:12px;background:none;box-shadow:none;text-shadow:none;text-align:left}
.resume-document h3{font-size:17px;line-height:1.6;color:var(--ink);margin:25px 0 12px}
.resume-document p{font-size:15px;line-height:1.8;color:var(--ink-secondary);margin:10px 0}
.resume-document .resume-headline{font-size:12px;letter-spacing:.07em}
.resume-contact a{color:var(--signature)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:35px 0}
.review-link{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:65px;padding:18px 24px;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface-gradient);color:var(--ink);box-shadow:var(--shadow-rest);font-size:16px}
.review-link:hover{border-color:var(--focus)}
.photo-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}
.photo-comparison figure{margin:0}
.photo-comparison img{width:100%;height:auto;border-radius:var(--radius-surface)}
.photo-comparison+.case-block{margin-bottom:24px}
.review-intro p{color:var(--ink-secondary);line-height:1.7}
.content-lab-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:25px;margin-top:30px}
.lab-controls{display:flex;flex-direction:column;gap:18px;padding:22px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);align-self:start}
.lab-controls label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink)}
.lab-controls select{width:100%;font:inherit;color:var(--ink);background:var(--surface-high);border:1px solid var(--edge);padding:12px;border-radius:8px;min-height:44px}
.lab-controls a{color:var(--signature);font-size:14px;line-height:1.7}
.lab-controls p{font-size:12px;line-height:1.6;color:var(--ink-secondary);margin:0}
#copy-preview,#deck-preview,#qa-preview{width:100%;height:900px;border:1px solid var(--edge);border-radius:16px;background:var(--canvas)}
.qa-output{white-space:pre-wrap;word-break:break-word;font:12px/1.7 monospace;color:var(--ink);background:var(--surface-high);padding:20px;border-radius:12px;max-height:420px;overflow:auto}
.qa-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}
.qa-controls button{min-height:44px}
@media(max-width:999px){.experience-grid{grid-template-columns:1fr;max-width:680px}
.education-note{grid-template-columns:1fr;max-width:680px;gap:18px}
.work-card{padding:25px}
.work-intro{max-width:680px}
.document-main{padding-top:108px}
.case-blocks{gap:18px}
.content-lab-layout{grid-template-columns:1fr}
.lab-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#copy-preview{height:900px}}
@media(max-width:600px){.identity-kicker{font-size:12px;line-height:1.7;margin-bottom:18px}
#about h1{font-size:27px;line-height:1.25;max-width:100%;padding:15px 17px}
#about .about-copy{font-size:16px;line-height:1.75;margin-bottom:24px}
.hero-actions{gap:10px;margin-bottom:30px}
.hero-actions .project-action{font-size:11px;padding:12px 14px}
.expertise-grid{grid-template-columns:1fr;gap:22px}
.expertise-grid .service{padding:25px}
.expertise-grid .service h3{font-size:21px}
.work-intro{font-size:16px}
.work-card p{font-size:15px}
.creative-note{font-size:14px}
#experience{gap:24px}
.document-main{padding:102px 24px 48px}
.document-main h1{font-size:29px;line-height:1.22;padding:15px 18px}
.document-subtitle{font-size:21px}
.document-lead{font-size:17px}
.case-blocks{grid-template-columns:1fr}
.document-main .case-block{padding:23px}
.case-figure{padding:8px;margin:25px 0}
.photo-comparison,.review-grid{grid-template-columns:1fr}
.lab-controls{grid-template-columns:1fr}
.review-link{font-size:15px;padding:16px}
.document-actions .project-action{font-size:11px}
.resume-document p{font-size:14px}}
@media print{html,body{background:white!important;color:#111!important}
body[data-page=resume] :is(header,footer,.site-background,.ambient-light,.skip-link,.print-hide){display:none!important}
body[data-page=resume] .document-main{padding:0;margin:0;max-width:none}
body[data-page=resume] .resume-document{max-width:none}
body[data-page=resume] :is(h1,h2,h3,p,a){color:#111!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
body[data-page=resume] h1{padding:0;border:0;font-size:25pt;margin:0 0 10pt}
body[data-page=resume] h2{font-size:13pt;margin-top:20pt;break-after:avoid}
body[data-page=resume] h3{font-size:11pt;break-after:avoid}
body[data-page=resume] p{font-size:10pt;line-height:1.45;orphans:3;widows:3}
@page{margin:17mm}}
#services>h2{align-self:center}
html[data-theme] #experience :is(.work-intro,.work-card p,.education-note p){color:var(--ink-secondary)}
html[data-theme] #experience :is(.work-card h3,.education-note h3){color:var(--ink)}
html[data-theme] #experience .creative-note{color:var(--ink-muted)}
html[data-theme] .document-main :is(h2,h3){color:var(--ink)}
html[data-theme] .document-main :is(p,figcaption){color:var(--ink-secondary)}
.document-main .case-document>h1,.document-main .review-intro>h1{margin-inline:auto;text-align:center}
.document-lead{margin-inline:auto}
.case-document>.document-actions{justify-content:center}
.resume-document{text-align:left}
@media print{body[data-page=resume] .resume-entry{break-inside:avoid;page-break-inside:avoid}
body[data-page=resume] h2{display:block;margin:15pt 0 7pt;padding:0 0 5pt;border:0;border-bottom:1px solid #ccc;border-radius:0;break-after:avoid-page;page-break-after:avoid}
body[data-page=resume] h3{display:block;margin:10pt 0 5pt;break-after:avoid-page;page-break-after:avoid}
body[data-page=resume] p{margin:4pt 0;line-height:1.4}
body[data-page=resume] .resume-contact{margin-bottom:10pt}}
html[data-theme] #about .hero-support{font-size:19px;line-height:1.6;margin:0 auto 18px;max-width:790px;color:var(--ink);padding:0;background:none;border:0;box-shadow:none;text-shadow:none}
#about .about-copy{margin:0 auto 18px;max-width:800px}
html[data-theme] #about .about-copy p{font-size:17px;line-height:1.8;margin:0 0 14px;padding:0;border:0;background:none;box-shadow:none;text-shadow:none;color:var(--ink-secondary)}
html[data-theme] #about .regional-location{font-size:12px;line-height:1.6;letter-spacing:.025em;max-width:800px;margin:0 auto 20px;padding:0;background:none;border:0;box-shadow:none;text-shadow:none;color:var(--ink-muted)}
#about .regional-location[hidden]{display:none}
html[data-theme] .portfolio-intro{font-size:15px;line-height:1.7;text-align:center;max-width:780px;margin:0 auto 20px;color:var(--ink-secondary)}
.creative-note h3{font-size:15px;line-height:1.6;margin:0 0 6px}
.creative-note p{font-size:14px;line-height:1.8;margin:0}
html[data-theme] #experience .creative-note h3{color:var(--ink)}
html[data-theme] #experience .creative-note p{color:var(--ink-muted)}
html[data-theme] .contact-content .availability-copy{font-size:15px;line-height:1.8;max-width:640px;margin:18px auto;color:var(--ink-secondary)}
html[data-theme] .contact-content .contact-region{font-size:12px;line-height:1.7;margin:18px auto 24px;color:var(--ink-muted)}
html[data-theme] footer .footer-note{font-size:12px;line-height:1.7;color:var(--ink-muted);max-width:420px;margin:6px auto 14px}
@media(max-width:600px){html[data-theme] #about .hero-support{font-size:17px;line-height:1.6;margin-bottom:16px}
html[data-theme] #about .about-copy p{font-size:15px;line-height:1.75}
#about .about-copy{margin-bottom:14px}
html[data-theme] .portfolio-intro{font-size:14px;margin-bottom:18px}}
html[data-theme] #about .identity-kicker{font-size:12px;margin-bottom:16px;color:var(--ink-muted)}
html[data-theme] #about h1{text-transform:none;font-size:clamp(32px,4vw,46px);letter-spacing:-.035em;max-width:900px;margin-bottom:22px}
html[data-theme] #about .hero-support{max-width:650px;font-size:19px;line-height:1.7;margin:0 auto 16px}
html[data-theme] #about .path-intro{font-size:12px;line-height:1.6;color:var(--ink-muted);margin:0 auto 20px}
.discovery-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:880px;width:100%;margin:0 auto 18px}
.path-card{position:relative;text-align:left;padding:20px 20px 18px;min-height:106px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-rest);display:flex;flex-direction:column;gap:8px;color:var(--ink);transition:transform var(--duration-standard),box-shadow var(--duration-standard)}
.path-number{font-size:10px;color:var(--signature)}
.path-card strong{font-size:16px;line-height:1.45;letter-spacing:-.02em}
.path-card small{font-size:11px;line-height:1.5;color:var(--ink-muted)}
.path-card:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--focus)}
.hero-side,.meet-actions,.contact-tail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin:8px auto 28px}
.hero-side .project-action{font-size:11px;text-transform:none}
.quiet-link{font-size:12px;color:var(--signature);min-height:44px;display:inline-flex;align-items:center;gap:6px}
button[data-guide-open],.guide-launcher{display:none}
html[data-guide-ready=true] button[data-guide-open]{display:inline-flex}
html[data-theme] #portfolio .project-hook{font-size:14px;line-height:1.5;color:var(--signature);font-weight:600;margin:12px 0 14px;max-width:100%}
html[data-theme] #services>h2{text-transform:none}
.bench-intro{font-size:15px;line-height:1.7;color:var(--ink-secondary);margin:0;text-align:center}
.workbench{width:100%;max-width:970px;padding:12px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-card)}
.bench-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-bottom:1px solid var(--edge)}
html[data-theme] .bench-tabs button{flex:1;min-width:84px;min-height:48px;border-radius:var(--radius-control);border:1px solid transparent;background:transparent;color:var(--ink-secondary);font:600 14px var(--font-body);cursor:pointer;padding:10px}
html[data-theme] .bench-tabs button[aria-selected=true]{background:var(--surface-gradient);border-color:var(--edge);box-shadow:var(--shadow-raised);color:var(--signature)}
.bench-panel{display:grid;grid-template-columns:.65fr 1fr;gap:40px;align-items:center;padding:35px 28px;min-height:320px;text-align:left}
.bench-panel[hidden]{display:none}
.bench-diagram{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:20px}
.bench-diagram span{position:relative;min-width:150px;text-align:center;padding:16px 20px;font:13px/1.5 var(--font-body);border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface-gradient);box-shadow:var(--shadow-rest);color:var(--ink-secondary)}
.bench-diagram span:not(:last-child)::after{content:"";position:absolute;width:1px;height:34px;top:100%;left:50%;background:var(--signature);opacity:.5}
.bench-diagram span:nth-child(2){color:var(--signature);transform:translateX(16px)}
html[data-theme] .bench-copy h3{font-size:25px;line-height:1.35;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px}
html[data-theme] .bench-copy p{font-size:16px;line-height:1.8;color:var(--ink-secondary);margin:0 0 18px}
.bench-copy details{margin-bottom:20px}
.bench-copy summary{cursor:pointer;min-height:44px;align-content:center;font-size:13px;color:var(--signature)}
html[data-theme] .bench-copy details p{font-size:14px;margin-top:8px}
.bench-aside{display:block;color:var(--ink-muted);font-size:11px;line-height:1.7;margin-top:18px}
.bench-diagram span{transition:transform 220ms}
.bench-panel:has(.bench-copy details[open]){align-items:start}
html[data-theme] #experience{gap:24px}
html[data-theme] #experience h2{text-transform:none}
.meet-copy{max-width:770px;text-align:left}
.meet-copy h3{font-size:24px;line-height:1.5;letter-spacing:-.025em;color:var(--ink);margin:0 0 18px}
.meet-copy p{font-size:17px;line-height:1.85;color:var(--ink-secondary);margin:0 0 18px}
#experience .creative-note{text-align:left;max-width:770px;width:100%;border-left:2px solid var(--signature);padding:8px 0 8px 20px}
.experience-depth{max-width:1080px;width:100%;text-align:left}
.experience-depth>summary{max-width:770px;margin:auto;min-height:48px;align-content:center;font-size:14px;color:var(--signature);cursor:pointer}
.experience-depth .experience-grid{margin:18px auto}
.experience-depth .education-note{margin:0 auto}
.experience-depth[open]{padding-bottom:10px}
html[data-theme] #contact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:44px 24px;min-height:calc(100svh - var(--header-height,72px))}
html[data-theme] #contact h2{text-transform:none;margin:0 0 4px}
.contact-room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:970px;width:100%;text-align:left}
.contact-story{display:flex;flex-direction:column;gap:18px;min-width:0}
.contact-eyebrow{font-size:11px;letter-spacing:.045em;color:var(--signature)}
html[data-theme] .contact-story h3{font-size:32px;line-height:1.25;letter-spacing:-.035em;color:var(--ink);margin:0;max-width:14ch}
html[data-theme] #contact .contact-story p{margin:0;max-width:46ch;color:var(--ink-secondary);font-size:16px;line-height:1.8}
html[data-theme] #contact .contact-story .contact-availability{font-size:14px}
html[data-theme] #contact .contact-story .contact-place{font-size:12px;color:var(--ink-muted)}
.contact-console{padding:28px;border:1px solid var(--edge);border-radius:var(--radius-surface);background:var(--surface-gradient);box-shadow:var(--shadow-card);min-width:0}
.contact-console-top{display:flex;justify-content:space-between;color:var(--ink-muted);font-size:11px;padding-bottom:18px;border-bottom:1px solid var(--edge);margin-bottom:20px}
.contact-console-top i{color:var(--signature)}
.contact-address{font-size:clamp(19px,2.3vw,26px);letter-spacing:-.03em;color:var(--ink);line-height:1.5;display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
html[data-theme] #contact .contact-small{font-size:12px;line-height:1.6;color:var(--ink-muted);margin:6px 0 22px}
.contact-console>.primary{width:100%;justify-content:space-between;font-size:13px;min-height:48px}
.contact-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;margin-top:22px}
.contact-links a{font-size:13px;color:var(--signature);display:inline-flex;align-items:center;min-height:44px;gap:6px}
.contact-tail{margin:0;gap:24px}
.contact-tail button{font-size:11px;text-transform:none}
.footer-inner{flex-wrap:wrap}
.footer-detour{flex-basis:100%;max-width:600px;text-align:center;margin:0 auto;color:var(--ink-muted)}
.footer-detour summary{font-size:11px;min-height:44px;align-content:center;cursor:pointer}
.footer-detour p{line-height:1.8!important;font-size:12px!important}
.footer-detour a{display:inline-flex;align-items:center;min-height:44px;color:var(--signature)}
html[data-guide-ready=true] .guide-launcher{display:flex;position:fixed;right:18px;bottom:18px;z-index:90;align-items:center;justify-content:center;padding:4px;border:1px solid var(--edge);border-radius:18px;background:var(--header-surface);box-shadow:var(--shadow-raised);cursor:pointer;color:var(--signature);backdrop-filter:blur(18px);min-width:60px;min-height:60px}
html[data-guide-tucked=true] .guide-launcher,html[data-guide-hidden=true] .guide-launcher,html[data-guide-open=true] .guide-launcher{visibility:hidden;pointer-events:none}
.guide-launch-label{pointer-events:none;position:absolute;right:calc(100% + 12px);white-space:nowrap;padding:10px 14px;border:1px solid var(--edge);background:var(--surface-high);color:var(--ink-secondary);border-radius:var(--radius-control);box-shadow:var(--shadow-rest);font:12px/1.5 var(--font-body);opacity:0;transform:translateX(5px);transition:opacity 180ms,transform 180ms}
.guide-launcher:is(:hover,:focus-visible) .guide-launch-label{opacity:1;transform:none}
.pocket-guide{position:fixed;z-index:300;inset:auto 20px 90px auto;margin:0;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 116px);overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid var(--edge);border-radius:24px;background:var(--surface-high);background-image:var(--surface-gradient);box-shadow:var(--shadow-card);color:var(--ink);font-family:var(--font-body);text-align:left;scrollbar-width:thin}
.guide-backdrop{position:fixed;inset:0;z-index:299;background:rgb(10 15 23 / .28);backdrop-filter:blur(3px)}
.guide-backdrop[hidden],.pocket-guide[hidden]{display:none}
.pocket-guide:not([hidden]){animation:guide-arrive 220ms var(--ease-out)}
@keyframes guide-arrive{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.guide-top{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--edge);margin-bottom:18px}
.guide-top>div{flex:1;min-width:0}
.pocket-guide .guide-top h2{font-size:18px;line-height:1.5;margin:0;padding:0;background:none;border:0;box-shadow:none;text-shadow:none;text-transform:none;color:var(--ink);text-align:left}
.pocket-guide .guide-top p{font-size:11px;line-height:1.6;color:var(--ink-muted);margin:3px 0 0}
#guide-close{width:44px;height:44px;flex:none;border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--surface-gradient);color:var(--ink);font-size:24px;cursor:pointer}
#guide-answer h3{font-size:19px;line-height:1.45;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
#guide-answer p{font-size:14px;line-height:1.8;color:var(--ink-secondary);margin:0 0 14px}
.guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.guide-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--signature);border:1px solid var(--edge);border-radius:9px;padding:8px 12px;background:var(--surface-gradient)}
.guide-prompts{display:flex;flex-direction:column;gap:7px}
.guide-prompts button{font:12px/1.6 var(--font-body);text-align:left;min-height:44px;padding:10px 13px;border-radius:10px;border:1px solid var(--edge);color:var(--ink-secondary);background:var(--surface-gradient);cursor:pointer;transition:border-color 180ms}
.guide-prompts button:hover{border-color:var(--signature)}
.guide-more>summary{cursor:pointer;font-size:12px;color:var(--signature);min-height:48px;align-content:center}
.guide-bottom{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:10px;line-height:1.6;color:var(--ink-muted)}
#guide-hide{font:10px/1.5 var(--font-body);color:var(--ink-muted);min-height:44px;border:0;background:none;cursor:pointer;padding:8px 0}
:is(.path-card,.bench-tabs button,.bench-panel,.bench-copy summary,.experience-depth>summary,.contact-links a,.contact-address,.quiet-link,.footer-detour summary,.guide-launcher,.pocket-guide button,.pocket-guide a,.pocket-guide summary):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media(max-width:999px){.contact-room{gap:28px;max-width:700px}
.contact-console{padding:23px}
.contact-story h3{font-size:28px}
.discovery-paths{gap:10px}
.path-card{padding:17px 15px}
.bench-panel{gap:22px;padding:25px 20px}
.bench-diagram{padding:12px}
.bench-diagram span{min-width:115px}}
@media(max-width:650px){html[data-theme] #about h1{font-size:32px;line-height:1.25}
html[data-theme] #about .hero-support{font-size:17px;line-height:1.7}
.discovery-paths{grid-template-columns:1fr;gap:10px}
.path-card{min-height:66px;padding:14px 16px 14px 43px;gap:4px}
.path-number{position:absolute;left:16px;top:18px}
.path-card strong{font-size:14px}
.path-card small{font-size:11px}
.hero-side{margin:2px auto 22px;gap:8px 14px}
.hero-side .project-action{font-size:11px;min-height:44px}
.bench-panel{grid-template-columns:1fr;gap:14px;padding:20px 14px;min-height:0}
.bench-diagram{flex-direction:row;gap:10px;padding:8px 0 14px}
.bench-diagram span{min-width:0;flex:1;padding:12px 5px;font-size:11px}
.bench-diagram span:not(:last-child)::after{height:1px;width:10px;left:100%;top:50%}
.bench-diagram span:nth-child(2){transform:translateY(-5px)}
html[data-theme] .bench-tabs button{min-width:70px;font-size:13px}
.bench-tabs{gap:4px}
.bench-copy h3{font-size:23px!important}
.bench-copy p{font-size:15px!important}
.meet-copy h3{font-size:23px}
.meet-copy p{font-size:16px}
.contact-room{grid-template-columns:1fr;gap:24px;max-width:460px}
.contact-story{gap:14px}
.contact-story h3{max-width:none!important;font-size:29px!important}
html[data-theme] #contact{padding:40px 8px;gap:24px}
.contact-story p{font-size:15px!important}
.contact-story .contact-availability{font-size:13px!important}
.contact-console{padding:22px}
.contact-address{font-size:24px}
.contact-tail{gap:10px}
.contact-links{gap:8px 14px}
.pocket-guide{inset:auto 12px 12px;width:calc(100vw - 24px);max-height:calc(100dvh - 84px);padding:18px;border-radius:22px}
.guide-launcher{right:12px!important;bottom:12px!important;min-width:48px!important;min-height:48px!important}
.guide-launch-label{display:none}
.footer-detour{max-width:100%}}
@media(prefers-reduced-motion:reduce){.pocket-guide:not([hidden]){animation:none}
.path-card,.guide-launch-label,.bench-diagram span{transition:none}
.path-card:is(:hover,:focus-visible){transform:none}}
html[data-motion=reduce] .pocket-guide:not([hidden]){animation:none}
html[data-motion=reduce] :is(.path-card,.guide-launch-label,.bench-diagram span){transition:none}
html[data-motion=reduce] .path-card:is(:hover,:focus-visible){transform:none}
html[data-theme] .pocket-guide .guide-top h2{filter:none;backdrop-filter:none}
html[data-theme] .pocket-guide .guide-top h2::before,html[data-theme] .pocket-guide .guide-top h2::after{display:none}
svg.icon-sprite{position:absolute;inset:auto;width:0;height:0;overflow:hidden;pointer-events:none}
svg.ui-icon{position:static;inset:auto;display:inline-block;vertical-align:middle;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform 180ms var(--ease-out),filter 180ms}
.ui-brand{font-size:24px;line-height:1;width:24px;text-align:center;flex:none;color:inherit}
header .nav-links a .ui-icon{width:17px;height:17px;margin-right:5px}
header .nav-links a{display:inline-flex;align-items:center;justify-content:center}
main>section>h2 .ui-icon,.portfolio-heading .ui-icon{width:.85em;height:.85em;margin-right:8px}
.project-action{gap:9px}
.project-action .ui-icon{width:16px;height:16px}
.project-action .ui-brand{font-size:16px;width:16px}
:is(.entry-object,.bench-object,.signal-badge,.signal-mail,.quest-card,.project-action):is(:hover,:focus-visible)>.ui-icon{transform:translateY(-2px) rotate(-3deg);filter:drop-shadow(0 2px 5px var(--glow))}
.icon-detail{transform-box:fill-box;transform-origin:center;transition:transform 200ms}
:is(a,button,summary):is(:hover,:focus-visible) .icon-camera .icon-detail{transform:rotate(20deg)}
:is(a,button,summary):is(:hover,:focus-visible) .icon-mail .icon-detail{transform:translateY(-2px)}
:is(a,button):is(:hover,:focus-visible) :is(.icon-map,.icon-model) .icon-detail{stroke-dasharray:30;animation:icon-path 450ms ease-out both}
@keyframes icon-path{from{stroke-dashoffset:30;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
html[data-theme] #about{min-height:calc(100svh - var(--header-height,72px));padding:70px 24px 66px;display:grid;place-items:center}
.entry-space{max-width:1020px;width:100%;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}
html[data-theme] #about h1.entry-brand{background:none;border:0;box-shadow:none;text-shadow:none;padding:0;margin:0 0 24px;letter-spacing:normal;line-height:1.2;max-width:100%;text-transform:none}
html body .entry-brand .logo.entry-logo{display:inline-flex;align-items:center;width:max-content;height:72px;max-width:100%;font-family:"Kumbh Sans",sans-serif;font-size:clamp(39px,6vw,64px);font-weight:400;line-height:normal;letter-spacing:normal;margin:0;background-color:var(--brand-fallback);background-image:linear-gradient(to top,var(--brand-gradient-bottom) 0%,var(--brand-gradient-top) 100%);background-size:100% 160px;background-position:center;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-fallback);text-shadow:none;filter:none;opacity:1;transform:none;border:0;border-radius:0;box-shadow:none}
html body .entry-brand .logo.entry-logo .logo-icon{font-family:"Font Awesome 6 Brands";font-weight:400;font-size:1em;line-height:1;margin:0;background:none!important;color:inherit!important;-webkit-text-fill-color:transparent;text-shadow:none;filter:none;transform:none}
html[data-theme] #about .entry-line{font-size:18px;line-height:1.8;margin:0 0 50px;color:var(--ink-secondary)}
.entry-dock{display:flex;gap:18px;align-items:center;justify-content:center;max-width:100%;min-height:138px;margin-bottom:40px;padding:0 16px}
html[data-theme] .entry-object{position:relative;display:flex;align-items:center;justify-content:center;width:90px;height:90px;min-width:64px;margin:0;padding:20px;border:1px solid var(--edge);border-radius:24px;background:var(--surface-gradient);box-shadow:var(--shadow-card);color:var(--ink);cursor:pointer;transition:transform 230ms var(--ease-out),box-shadow 230ms,border-color 230ms}
.entry-object>.ui-icon{width:38px;height:38px;color:var(--signature)}
.object-label{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;white-space:nowrap;font:12px/1.5 var(--font-body);color:var(--ink-secondary);opacity:0;transform:translateY(-3px);transition:opacity 160ms,transform 160ms;pointer-events:none}
.entry-object:is(:hover,:focus-visible){transform:translateY(-7px)!important;box-shadow:var(--shadow-hover);border-color:var(--focus)}
.entry-object:is(:hover,:focus-visible) .object-label{opacity:1;transform:none}
html[data-hero=shelf] .entry-object:nth-child(1),html[data-hero=shelf] .entry-object:nth-child(6){transform:translateY(15px) rotate(-5deg)}
html[data-hero=shelf] .entry-object:nth-child(2),html[data-hero=shelf] .entry-object:nth-child(5){transform:translateY(-4px) rotate(3deg)}
html[data-hero=shelf] .entry-object:nth-child(3){transform:translateY(9px) rotate(-3deg)}
html[data-theme] .identity-whisper{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:12px/1.6 var(--font-body);padding:8px 12px;border:0;background:none;color:var(--ink-muted);cursor:pointer}
.identity-whisper .ui-icon{width:16px;height:16px}
.terminal-path{font:13px/1.8 monospace;color:var(--signature)}
.hero-invitation{margin-bottom:30px}
.project-category .ui-icon{width:16px;height:16px;margin-right:8px}
.project-hook .ui-icon{width:20px;height:20px;margin-right:8px}
.project-peek{font-size:12px;line-height:1.7;color:var(--ink-muted);display:block;margin:0 0 20px}
.detail-trigger{margin-bottom:18px}
.project-short-summary{display:none!important}
.project-selector .ui-icon{width:17px;height:17px}
.project-details template{display:none}
.project-details .project-actions{flex-wrap:wrap}
.object-workbench{padding:22px}
.bench-objects{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
html[data-theme] .bench-object{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 8px;min-height:100px;font:600 13px/1.5 var(--font-body);color:var(--ink-secondary);border:1px solid var(--edge);border-radius:18px;background:var(--surface-gradient);box-shadow:var(--shadow-rest);cursor:pointer}
.bench-object>.ui-icon{width:32px;height:32px;color:var(--signature)}
html[data-theme] .bench-object[aria-expanded=true]{border-color:var(--focus);box-shadow:var(--shadow-raised);color:var(--signature)}
.bench-idle{text-align:center;min-height:120px;align-content:center;color:var(--ink-muted);padding:24px 12px}
.bench-idle .ui-icon{opacity:.6}
.bench-idle p{font-size:12px;line-height:1.8;margin:12px 0 0}
.bench-idle[hidden]{display:none}
.bench-copy summary .ui-icon{width:16px;height:16px;margin-right:6px}
.object-workbench .bench-panel{padding-bottom:12px}
.about-room{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:58px;align-items:center;max-width:1080px;width:100%;text-align:left}
.about-portrait{min-width:0}
.about-portrait #about-picture{width:100%;margin:0;max-width:460px}
.about-brief{min-width:0}
.about-one{font-size:23px;line-height:1.7;color:var(--ink);margin:0 0 22px}
.education-pin{display:inline-flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:12px;line-height:1.7;margin-bottom:28px}
.education-pin .ui-icon{width:21px;height:21px;color:var(--signature)}
.about-disclosures>details{border-bottom:1px solid var(--edge);margin:0 0 12px;padding-bottom:8px;max-width:100%}
.about-disclosures>details>summary{font-size:14px;min-height:50px;align-content:center;cursor:pointer;color:var(--signature);margin:0}
.about-disclosures>details>summary .ui-icon{width:19px;height:19px;margin-right:8px}
.about-disclosures .meet-copy h3{font-size:20px;margin:18px 0 12px}
.about-disclosures .meet-copy p{font-size:15px}
.about-disclosures .experience-grid{grid-template-columns:1fr}
.about-disclosures .education-note{grid-template-columns:1fr}
.about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.about-disclosures .creative-note{padding:10px 0 10px 15px!important}
#playground{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:60px 24px;min-height:calc(100svh - 72px)}
#playground h2{margin:0}
.section-whisper{font-size:15px;color:var(--ink-secondary);margin:0;text-align:center}
.side-quests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1100px;width:100%}
html[data-theme] .quest-card{display:flex;flex-direction:column;align-items:flex-start;gap:15px;text-align:left;min-width:0;padding:26px 22px;border:1px solid var(--edge);border-radius:24px;background:var(--surface-gradient);box-shadow:var(--shadow-card);color:var(--ink);cursor:pointer;font:14px/1.7 var(--font-body);margin:0;transition:transform 180ms,border-color 180ms}
.quest-card>.ui-icon{width:37px;height:37px;color:var(--signature)}
.quest-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.quest-card strong{font-size:21px;line-height:1.4;letter-spacing:-.02em}
.quest-card>span:not(.quest-kicker):not(.quest-action){font-size:13px;color:var(--ink-secondary)}
.quest-action{margin-top:auto;font-size:12px;display:flex;align-items:center;gap:8px;color:var(--signature)}
.quest-action .ui-icon{width:16px;height:16px}
.quest-card:is(:hover,:focus-visible){transform:translateY(-3px);border-color:var(--focus)}
.lab-footnote{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.lab-footnote small{font-size:11px;color:var(--ink-muted)}
html[data-theme] #contact{gap:30px;padding:50px 24px}
.contact-finale{max-width:1000px;width:100%;text-align:center}
.contact-invite{margin:0 auto 32px}
.contact-invite h3{font-size:clamp(25px,3vw,35px);line-height:1.4;letter-spacing:-.03em;color:var(--ink);margin:0 0 9px}
.contact-invite p{font-size:13px;line-height:1.7;color:var(--ink-muted);margin:0}
.contact-signal-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:repeat(3,auto);gap:14px 22px;text-align:left}
.signal-mail{grid-row:1/4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;position:relative;padding:35px;border-radius:25px;border:1px solid var(--edge);background:var(--surface-gradient);box-shadow:var(--shadow-card);color:var(--ink);min-width:0;margin:0}
.mail-emblem{width:78px;height:78px;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge);background:var(--surface-gradient);box-shadow:var(--shadow-raised);border-radius:22px;color:var(--signature)}
.mail-emblem .ui-icon{width:42px;height:42px}
.signal-caption{font-size:12px;color:var(--ink-muted)}
.signal-mail strong{font-size:clamp(20px,2.4vw,29px);letter-spacing:-.03em;overflow-wrap:anywhere;line-height:1.5}
.signal-arrow{position:absolute;bottom:28px;right:28px;color:var(--signature)}
.signal-badge{display:flex;align-items:center;gap:22px;padding:22px 26px;border:1px solid var(--edge);border-radius:19px;background:var(--surface-gradient);box-shadow:var(--shadow-rest);color:var(--ink);min-height:94px;margin:0}
.signal-badge>.ui-icon:first-child,.signal-badge>.ui-brand{width:32px;height:32px;font-size:30px;color:var(--signature)}
.signal-badge>span{display:flex;flex:1;flex-direction:column;gap:6px}
.signal-badge strong{font-size:17px;line-height:1.4}
.signal-badge small{font-size:11px;line-height:1.5;color:var(--ink-muted)}
.signal-badge>.ui-icon:last-child{width:16px;height:16px;color:var(--ink-muted)}
.signal-mail:is(:hover,:focus-visible),.signal-badge:is(:hover,:focus-visible){border-color:var(--focus);box-shadow:var(--shadow-hover)}
.contact-status-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:24px 0 12px}
.availability{text-align:left;flex:1;max-width:560px;color:var(--ink-secondary)}
.availability summary{cursor:pointer;font-size:12px;min-height:44px;align-content:center;color:var(--signature)}
.availability summary .ui-icon{width:17px;height:17px;margin-right:8px}
html[data-theme] #contact .availability p{font-size:14px;line-height:1.8;margin:12px 0;color:var(--ink-secondary)}
.availability small{font-size:11px;color:var(--ink-muted)}
.region-pin{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.7;min-height:44px;color:var(--ink-muted)}
.region-pin .ui-icon{width:16px;height:16px}
.contact-companion{display:flex;justify-content:space-between;align-items:center;gap:20px}
.contact-companion button{display:none}
html[data-guide-ready=true] .contact-companion button{display:flex;align-items:center;gap:12px;padding:8px;border:0;background:none;color:var(--ink-secondary);font:12px/1.5 var(--font-body);cursor:pointer}
.contact-companion .quiet-link{gap:9px}
.contact-companion .quiet-link .ui-icon{width:16px;height:16px}
.signal-badge small{max-width:100%}
.signal-badge .ui-brand{align-content:center}
.dev-character{width:62px;height:74px}
.dev-character svg{position:static;inset:auto;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;overflow:visible}
html[data-guide-ready=true] .guide-launcher{padding:4px 8px;border-radius:20px;min-width:64px;min-height:76px}
.guide-launch-label{max-width:210px;white-space:normal;text-align:left}
.guide-prompts button{display:flex;align-items:center;gap:9px}
.guide-prompts .ui-icon{width:17px;height:17px;color:var(--signature)}
#guide-close .ui-icon{width:19px;height:19px}
.guide-actions button{font:12px/1.6 var(--font-body);min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:9px;background:var(--surface-gradient);color:var(--signature);cursor:pointer}
.scene-panel{position:fixed;z-index:400;top:50%;left:50%;translate:-50% -50%;width:min(700px,calc(100vw - 32px));max-height:calc(100dvh - 72px);padding:26px;border:1px solid var(--edge);border-radius:26px;background:var(--surface-high);background-image:var(--surface-gradient);box-shadow:var(--shadow-card);color:var(--ink);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:left}
.scene-panel[hidden],.scene-backdrop[hidden]{display:none}
.scene-backdrop{position:fixed;inset:0;z-index:399;background:rgb(10 15 23/.32);backdrop-filter:blur(4px)}
.scene-heading{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--edge);margin-bottom:20px}
.scene-heading>div{min-width:0}
.scene-heading #scene-kicker{font-size:10px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:var(--signature);margin:0 0 6px}
#scene-title{font-size:25px;line-height:1.4;letter-spacing:-.025em;text-transform:none;margin:0;padding:0;border:0;background:none;box-shadow:none;text-shadow:none;color:var(--ink)}
#scene-title::before,#scene-title::after{display:none}
.scene-close{width:44px;height:44px;min-width:44px;border:1px solid var(--edge);border-radius:12px;color:var(--ink);background:var(--surface-gradient);cursor:pointer;display:grid;place-items:center}
.scene-close .ui-icon{width:20px;height:20px}
#scene-content p{font-size:16px;line-height:1.85;color:var(--ink-secondary);margin:0 0 20px}
#scene-content .project-role{display:block;font-size:13px;line-height:1.8;color:var(--signature);margin-bottom:20px}
#scene-content .project-tech{font-size:13px;line-height:1.8;margin:20px 0;color:var(--ink)}
#scene-content .action-note{font-size:12px;line-height:1.8;margin-bottom:24px;color:var(--ink-muted)}
#scene-content .project-action{margin:5px 8px 5px 0}
.panel-actions{display:flex;gap:10px;flex-wrap:wrap}
.scene-panel:not([hidden]){animation:panel-in 160ms ease-out}
@keyframes panel-in{from{opacity:0}to{opacity:1}}
.scene-panel[data-scene=game]{width:min(540px,calc(100vw - 24px));padding:22px}
.game-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.game-scores{display:flex;gap:17px;font-size:13px;color:var(--ink)}
.game-scores span{display:inline-flex;align-items:center;gap:7px}
.score-dot{width:14px;height:14px;border-radius:50%;border:1px solid #758595;display:inline-block}
.score-dark{background:#263344}
.score-light{background:#f1eee4}
#scene-content .game-status{font-size:13px;line-height:1.7;min-height:44px;margin:12px 0 6px;color:var(--ink)}
.reversi-board{display:grid;grid-template-rows:repeat(8,1fr);gap:3px;padding:7px;max-width:440px;width:100%;aspect-ratio:1;margin:0 auto;border:1px solid var(--edge);border-radius:15px;background:var(--surface-gradient);box-shadow:var(--shadow-rest)}
.board-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;min-height:0}
.board-cell{min-width:0;min-height:0;display:flex}
.board-square{position:relative;flex:1;min-width:0;min-height:0;width:100%;aspect-ratio:1;padding:3px;border:1px solid var(--edge);border-radius:6px;background:var(--surface-gradient);display:grid;place-items:center;cursor:pointer;color:var(--signature)}
.board-square[aria-disabled=false]{border-color:var(--signature)}
.board-square[data-legal=true]:not([data-hide-hints=true])::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--signature)}
.board-piece{width:84%;height:84%;border-radius:50%;border:1px solid #718298;box-shadow:0 2px 3px rgb(0 0 0/.25);display:block}
.piece-dark{background:linear-gradient(145deg,#45576c,#172337)}
.piece-light{background:linear-gradient(145deg,#fffdf2,#d7d6cf)}
.board-square.is-flipped .board-piece{animation:piece-settle 180ms ease-out}
@keyframes piece-settle{from{transform:scale(.65);opacity:.5}to{transform:scale(1);opacity:1}}
.game-controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.game-controls button{min-height:44px;font:12px/1.5 var(--font-body);padding:8px 14px;border:1px solid var(--edge);border-radius:10px;color:var(--signature);background:var(--surface-gradient);cursor:pointer}
.game-controls button:disabled{opacity:.5;cursor:default}
.game-help{font-size:12px;line-height:1.8;color:var(--ink-muted)}
.game-help summary{min-height:44px;align-content:center;color:var(--signature);cursor:pointer}
#scene-content .game-help p{font-size:12px;line-height:1.8;margin:10px 0}
.game-provenance{font-size:10px;line-height:1.8;color:var(--ink-muted);display:block;margin-top:8px}
.game-provenance a{color:var(--signature)}
.game-help a{color:var(--signature)}
.signal-puzzle{display:flex;align-items:center;justify-content:center;gap:18px;padding:30px 0}
.signal-switch{width:90px;min-height:95px;display:flex;flex-direction:column;align-items:center;gap:16px;justify-content:center;border:1px solid var(--edge);border-radius:19px;background:var(--surface-gradient);color:var(--ink-secondary);font:13px/1.5 var(--font-body);cursor:pointer}
.signal-switch[aria-pressed=true]{color:var(--signature);border-color:var(--signature);box-shadow:var(--shadow-raised)}
.signal-switch .ui-icon{width:30px;height:30px}
#scene-content .signal-state{font-size:16px;text-align:center}
.signal-note{text-align:center;font-size:12px!important}
.visuals-future{text-align:center}
.lens-mark{display:flex;justify-content:center;gap:30px;margin:45px 0;color:var(--signature)}
.lens-mark .ui-icon{width:90px;height:90px}
.visuals-future .document-actions{justify-content:center}
.visuals-future p{max-width:650px;margin-inline:auto}
.board-square:focus-visible{outline-offset:0;z-index:1;outline-width:3px}
@media(max-width:1100px){.bench-objects{gap:7px}
.bench-object{padding-inline:5px!important}
.side-quests{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-room{gap:30px}
.signal-mail{padding:25px}
.signal-badge{padding:18px 22px}
.entry-dock{gap:13px}
.entry-object{width:78px!important;height:78px!important}
.contact-status-row{gap:18px}}
@media(max-width:799px){html[data-theme] #about{padding:55px 20px}
.entry-dock{display:grid;grid-template-columns:repeat(3,78px);gap:30px 24px;margin-bottom:34px;padding:0}
.object-label{font-size:10px;top:calc(100% + 8px);opacity:1;transform:none}
.entry-object{padding:18px!important}
.entry-object>.ui-icon{width:32px;height:32px}
.entry-brand .logo.entry-logo{font-size:48px!important}
.entry-line{margin-bottom:35px!important}
.about-room{grid-template-columns:1fr;max-width:620px}
.about-portrait{max-width:340px;justify-self:center}
.about-one{text-align:center}
.education-pin{display:flex;justify-content:center}
.bench-objects{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bench-object{min-height:90px!important}
.object-workbench{padding:16px}
.contact-signal-grid{gap:12px;grid-template-columns:1fr 1fr}
.signal-badge{padding:18px;gap:14px}
.signal-mail strong{font-size:23px}
.contact-status-row{flex-direction:column;gap:4px}}
@media(max-width:550px){html[data-theme] #about{padding-inline:16px;min-height:calc(100svh - 68px)}
.entry-brand .logo.entry-logo{font-size:39px!important;height:54px!important;background-size:100% 97.5px!important}
html[data-theme] #about .entry-line{font-size:15px}
.entry-dock{gap:28px 19px;grid-template-columns:repeat(3,70px)}
.entry-object{width:70px!important;height:70px!important;min-width:0;border-radius:20px!important}
.entry-object>.ui-icon{width:29px;height:29px}
.identity-whisper{font-size:11px!important}
.bench-objects{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bench-object{font-size:12px!important;gap:11px!important}
.bench-object>.ui-icon{width:27px;height:27px}
.about-one{font-size:20px}
.side-quests{grid-template-columns:1fr}
.quest-card{min-height:0;padding:24px!important}
.quest-card>.ui-icon{width:31px;height:31px}
.quest-card strong{font-size:22px}
.quest-kicker{margin-top:0}
.quest-card .quest-action{margin-top:4px}
#playground{padding:44px 8px}
.lab-footnote{gap:8px}
.lab-footnote small{text-align:center}
.contact-signal-grid{grid-template-columns:1fr}
.signal-mail{grid-row:auto;padding:25px;gap:13px}
.mail-emblem{width:60px;height:60px}
.mail-emblem .ui-icon{width:33px;height:33px}
.signal-mail strong{font-size:25px}
.signal-badge{min-height:80px;gap:20px}
.signal-badge>.ui-icon:first-child,.signal-badge>.ui-brand{width:26px;height:26px;font-size:26px}
.contact-invite h3{font-size:28px}
.contact-invite p{font-size:12px}
.contact-invite{margin-bottom:25px}
html[data-theme] #contact{padding:44px 8px}
.contact-companion{flex-wrap:wrap;justify-content:center;gap:4px}
.scene-panel{width:calc(100vw - 24px);padding:20px;max-height:calc(100dvh - 44px);border-radius:22px}
.scene-panel[data-scene=game]{padding:16px}
.scene-heading{gap:14px;margin-bottom:16px}
#scene-title{font-size:22px}
.scene-heading #scene-kicker{font-size:9px}
#scene-content p{font-size:15px}
.reversi-board{gap:2px;padding:5px}
.board-row{gap:2px}
.board-square{padding:2px;border-radius:4px}
.game-topline{gap:8px}
.game-scores{font-size:12px;gap:12px}
.game-status{font-size:12px!important}
.signal-puzzle{gap:10px}
.signal-switch{width:76px}}
@media(prefers-reduced-motion:reduce){.dev-character *,.scene-panel,.ui-icon,.icon-detail,.entry-object,.board-piece{animation:none!important;transition:none!important}
.entry-object,.ui-icon{transform:none!important}}
html[data-motion=reduce] :is(.dev-character *,.scene-panel,.ui-icon,.icon-detail,.entry-object,.board-piece){animation:none!important;transition:none!important}
html[data-motion=reduce] :is(.entry-object,.ui-icon){transform:none!important}
@media(forced-colors:active){.entry-brand .logo.entry-logo,.entry-brand .logo.entry-logo .logo-icon{background:none!important;-webkit-text-fill-color:LinkText!important;color:LinkText!important}
.board-piece{forced-color-adjust:none}
.scene-panel,.pocket-guide{background:Canvas!important}
.ui-icon{stroke:currentColor}}
.bench-idle[hidden]{display:none}
html[data-pass="13"] .skip-link{transform:none!important;translate:0 -160%}
html[data-pass="13"] .skip-link:focus{translate:0 0}
.project-hook,.project-category{display:flex;align-items:center;gap:7px}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html{scroll-padding-top:calc(var(--header-height,72px) + 12px)}
header{padding-top:var(--safe-top)!important;}
main{padding-left:var(--safe-left);padding-right:var(--safe-right)}
footer{padding-bottom:calc(28px + var(--safe-bottom))!important}
.entry-shortcuts{display:none}
.footer-guide{display:inline-grid!important;place-items:center;width:44px;height:44px;border:1px solid var(--edge);border-radius:12px;background:var(--surface-gradient);color:var(--signature);cursor:pointer}
.footer-guide .ui-icon{width:20px;height:20px}
html[data-guide-ready=true] #guide-launcher{width:58px;height:72px;min-width:58px!important;min-height:72px!important;padding:5px;right:auto!important;bottom:auto!important;left:var(--dev-x,calc(100% - 76px));top:var(--dev-y,calc(100% - 96px));transition:opacity 140ms;border-radius:19px;contain:layout;touch-action:manipulation}
#guide-launcher .dev-character{width:43px;height:56px;animation:none!important}
#guide-launcher .dev-character *{animation:none!important;transition:none!important}
html[data-dev-ready]:not([data-dev-visible=true]) #guide-launcher{visibility:hidden;pointer-events:none}
.guide-launch-label{display:block!important;width:max-content;max-width:min(200px,calc(100vw - 90px));right:auto;left:calc(100% + 12px);transform:none!important;pointer-events:none;text-align:left;visibility:hidden;opacity:0!important;z-index:1}
#guide-launcher[data-cue-side=left] .guide-launch-label{left:auto;right:calc(100% + 12px)}
#guide-launcher[data-cue-visible=true] .guide-launch-label{visibility:visible;opacity:1!important}
#dev-quiet{font:11px/1.5 var(--font-body);min-height:44px;padding:8px 10px;border:1px solid var(--edge);border-radius:9px;color:var(--signature);background:var(--surface-gradient);cursor:pointer}
#dev-quiet[aria-pressed=true]{background:var(--surface-high)}
.pocket-guide{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);bottom:calc(16px + var(--safe-bottom));right:calc(16px + var(--safe-right))}
.scene-panel{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px)}
.scene-heading,.guide-top{position:sticky;top:-27px;background:var(--surface-high);z-index:3;padding-top:5px}
button,a,summary{-webkit-tap-highlight-color:transparent}
button:active:not(:disabled),.entry-object:active,.signal-badge:active{filter:brightness(.95)}
.resume-sheet{overflow-wrap:anywhere}
.document-main{overflow-wrap:break-word}
html[data-release] :is(.skip-link,.guide-launcher,.footer-guide,.entry-shortcuts a,#dev-quiet):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media(max-width:900px){header .nav-links{max-height:calc(100dvh - var(--header-height,72px) - var(--safe-bottom) - 12px);overflow:auto;overscroll-behavior:contain;padding-bottom:calc(12px + var(--safe-bottom))}
header .menu-icon{min-width:44px;min-height:44px}}
@media(max-width:799px){html[data-theme] #about{padding:32px 18px calc(28px + var(--safe-bottom));min-height:calc(100svh - var(--header-height,72px))}
.entry-space{gap:0}
.entry-brand{margin-bottom:10px!important}
html[data-theme] #about .entry-line{margin-bottom:9px!important;font-size:15px}
.entry-dock{gap:28px 24px;margin:0 0 32px}
.entry-shortcuts{display:flex;justify-content:center;gap:8px;width:100%;max-width:340px;margin:0 0 8px}
.entry-shortcuts a{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:46px;padding:8px 10px;border:1px solid var(--edge);border-radius:13px;background:var(--surface-gradient);color:var(--signature);font-size:12px;box-shadow:var(--shadow-rest)}
.entry-shortcuts .ui-icon{width:17px;height:17px}
.identity-whisper{min-height:44px!important;margin:0!important}
.contact-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:10px}
.signal-mail{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:54px minmax(0,1fr) 24px;align-items:center;gap:0 15px;padding:22px}
.mail-emblem{grid-column:1;grid-row:1/3;width:52px;height:52px}
.mail-emblem .ui-icon{width:29px;height:29px}
.signal-mail .signal-caption{grid-column:2;grid-row:1;font-size:10px}
.signal-mail strong{grid-column:2;grid-row:2;font-size:clamp(18px,5.5vw,25px);overflow-wrap:anywhere}
.signal-mail .signal-arrow{position:static;grid-column:3;grid-row:1/3}
.signal-badge{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px 8px;min-height:104px}
.signal-badge>span{display:block}
.signal-badge strong{font-size:12px}
.signal-badge small,.signal-badge>.ui-icon:last-child{display:none}
.signal-badge>.ui-icon:first-child,.signal-badge>.ui-brand{width:25px;height:25px;font-size:25px}
.contact-status-row{margin-top:17px}
.contact-invite{margin-bottom:22px}
html[data-theme] #contact{padding:32px 10px calc(30px + var(--safe-bottom));gap:17px}
.contact-companion{margin-top:12px;gap:4px}
.contact-companion>button{min-height:50px}
.contact-status-row .region-pin{font-size:10px}
.project-action{min-height:44px}
.project-selector{min-height:44px}
.bench-object{touch-action:manipulation}
.bench-panel{scroll-margin-top:calc(var(--header-height,72px) + 12px)}}
@media(max-width:550px){.scene-panel{top:auto;bottom:calc(10px + var(--safe-bottom));left:50%;translate:-50% 0;width:calc(100% - 20px - var(--safe-left) - var(--safe-right));max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);padding:20px;border-radius:24px}
.scene-panel[data-scene=game]{width:calc(100% - 20px - var(--safe-left) - var(--safe-right));padding:15px}
.scene-heading{top:-20px}
.scene-panel[data-scene=game] .scene-heading{top:-15px}
.pocket-guide{inset:auto calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));width:auto;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)}
.guide-top{top:-18px}
.game-controls{padding-bottom:4px}
.reversi-board{touch-action:manipulation}
html[data-theme] #about{padding-top:24px;padding-bottom:24px}
.entry-brand .logo.entry-logo{font-size:37px!important;height:52px!important;background-size:100% 92.5px!important}
.entry-dock{grid-template-columns:repeat(3,66px);gap:28px 21px;margin-bottom:30px}
.entry-object{width:66px!important;height:66px!important;border-radius:20px!important}
.entry-shortcuts a{font-size:11px;padding-inline:8px;gap:6px}
.signal-mail{padding:19px 16px;grid-template-columns:43px minmax(0,1fr) 18px;column-gap:12px}
.mail-emblem{width:42px;height:47px}
.contact-invite h3{font-size:27px}
.signal-badge{min-height:96px;padding:18px 6px}}
@media(max-width:360px){header .logo{font-size:23px!important;background-size:100% 57.5px!important}
header .nav-container{gap:8px}
.entry-brand .logo.entry-logo{font-size:33px!important;background-size:100% 82.5px!important}
.signal-mail strong{font-size:17px}
.entry-shortcuts{gap:5px}
.contact-companion{flex-direction:column}}
@media(max-height:500px) and (orientation:landscape){html[data-theme] #about{min-height:calc(100svh - var(--header-height,72px));padding-block:25px}
.entry-dock{margin-top:16px}
.reversi-board{width:min(100%,320px);min-width:240px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){#guide-launcher,#guide-launcher *{animation:none!important;transition:none!important}}
html[data-motion=reduce] #guide-launcher,html[data-motion=reduce] #guide-launcher *{animation:none!important;transition:none!important}
@media(max-width:900px){header{padding-left:calc(14px + var(--safe-left))!important;padding-right:calc(14px + var(--safe-right))!important}
header .nav-container{display:grid;grid-template-columns:minmax(0,1fr) 52px 44px;gap:10px;width:100%}
header .brand-name{display:contents}
header .logo{grid-column:1;grid-row:1;justify-self:start}
header .nav-container .menu-icon{position:static;grid-column:3;grid-row:1;margin:0}
header .toggle-container{grid-column:2;grid-row:1;width:52px;min-width:52px;gap:0;margin:0}
header .mode-icon{display:none}
header #toggle-dark-mode{left:0;width:52px;height:44px}
header .toggle-label{width:52px}
header .nav-links{z-index:10}}
#guide-launcher[data-cue-side=below] .guide-launch-label{left:50%;right:auto;top:calc(100% + 8px);translate:-50% 0;text-align:center;font-size:11px;padding:8px 10px}
#guide-launcher:not([data-cue-side=below]) .guide-launch-label{top:50%;translate:0 -50%}
@media(max-width:799px){.entry-dock{row-gap:44px;margin-bottom:36px}
.entry-dock .object-label{font-size:11px;line-height:1.35;top:calc(100% + 7px)}}
/* The original developer illustration, with a lighter touch for each theme. */
.entry-space .entry-dude-brand{background:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;padding:0!important;margin:0 0 16px!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;max-width:100%!important;line-height:1!important}
.entry-dude-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border-radius:18px;padding:4px;transition:transform .3s cubic-bezier(.16,1,.3,1),filter .3s ease}
.entry-dude-link:hover,.entry-dude-link:focus-visible{transform:translateY(-4px) scale(1.02)}
.entry-dude-link:focus-visible{outline:2px solid var(--signature,#fa6771);outline-offset:6px}
.hero-dude-img{display:block;width:auto;height:190px;max-height:220px;max-width:min(340px,85vw);object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.08));transition:filter .3s ease,transform .3s ease}
.hero-dude-light{display:block}
.hero-dude-dark{display:none}
html[data-theme=night] .hero-dude-light,body.dark-mode .hero-dude-light{display:none!important}
html[data-theme=night] .hero-dude-dark,body.dark-mode .hero-dude-dark{display:block!important;filter:drop-shadow(0 12px 32px rgba(0,0,0,.45))}
@media(max-width:768px){.entry-space .entry-dude-brand{margin:0 0 12px!important}.hero-dude-img{height:160px;max-height:180px;max-width:min(280px,80vw)}}
@media(max-width:480px){.hero-dude-img{height:135px;max-height:150px;max-width:min(230px,75vw)}}

@media(prefers-reduced-motion:reduce){.entry-dude-link,.hero-dude-img{transition:none}.entry-dude-link:hover,.entry-dude-link:focus-visible{transform:none}}