/* Pixel night: a quiet game-world frame around a readable professional portfolio. */
@font-face{font-family:"Pixelify Sans";src:url("/assets/fonts/PixelifySans.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
:root{
 --bg:#101321;--surface:#191d30;--surface-hover:#22283e;--text:#edeae4;--muted:#b2b3c5;--subtle:#9c9fb6;
 --line:#3c435e;--accent:#bce8d0;--accent-soft:#233e3a;--button-text:#14291f;--header:rgba(16,19,33,.95);
 --panel:#191d30;--panel-head:#21263b;--panel-border:#454c68;--panel-inset:#131828;
 --diagram-surface:#272c47;--diagram-alt:#363857;--diagram-bg:#131828;--panel-header:#21263b;--diagram-stroke:#8e92b5;--diagram-muted:#9299b7;
 --pixel:"Pixelify Sans",var(--mono);--gold:#e6c897;
}
:root[data-theme="light"]{
 --bg:#f4f0ed;--surface:#faf6f1;--surface-hover:#e9e3df;--text:#292c41;--muted:#595b73;--subtle:#64647c;
 --line:#bdb8c7;--accent:#32644f;--accent-soft:#e0ece3;--button-text:#fff9f0;--header:rgba(244,240,237,.96);
 --panel:#faf6f1;--panel-head:#e9e4e4;--panel-border:#b8b1c4;--panel-inset:#efeae8;
 --diagram-surface:#e4dfe9;--diagram-alt:#d1cee0;--diagram-bg:#efeae8;--panel-header:#e9e4e4;--diagram-stroke:#706887;--diagram-muted:#766f87;--gold:#7d5c38;
}
body{background-image:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;background-image:radial-gradient(#a1a2c2 .8px,transparent 1px),radial-gradient(#c2b29b .8px,transparent 1px);background-size:131px 151px,227px 197px;background-position:19px 32px,73px 109px}
body[data-page="home"]::before{opacity:.12}
h1,h2,h3{letter-spacing:-.025em}
h1{font-family:var(--pixel);font-weight:500;letter-spacing:0}
h2{font-weight:600}
.wrap{width:min(1200px,calc(100% - 96px))}
.header-inner{height:80px;gap:24px}
.brand-mark{font-family:var(--pixel);font-size:28px;letter-spacing:-2px;border-radius:0;border:0;background:transparent;box-shadow:none;padding:0;color:var(--accent)}
.brand-name{font-size:10px;letter-spacing:.1em}
.primary-nav{gap:8px}
.primary-nav a{border-radius:0;padding:10px 14px;gap:8px}
.primary-nav a svg{width:15px;height:15px}
.primary-nav a[aria-current]{background:var(--surface);border-color:var(--line);box-shadow:inset 0 -2px var(--accent);color:var(--accent)}
.primary-nav a::after{display:none}
.primary-nav a:hover{background:var(--surface)}
.theme-toggle,.resume-link{border-radius:0}
.theme-toggle{width:39px;height:39px}
.resume-link{font-family:var(--mono);font-size:11px}
.button{border-radius:0;font-size:12px;min-height:46px;box-shadow:3px 3px 0 #090c1660;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.button:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 #090c1660}
.button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #090c1660}
.button-dark{border:1px solid var(--accent)}
.button-outline{border-color:var(--panel-border);background:var(--surface)}
.eyebrow,.panel-meta,.workspace-toolbar{letter-spacing:.075em}
.tiny-dot{border-radius:0}
.gui-panel,.page-intro,.case-intro,.about-statement,.timeline-item,.skill-group,.contact-card,.contact-aside,.case-section,.contribution-card,.process-strip,.case-overview,.contribution,.flow-section,.email-panel,.contact-link,.contact-link:first-child{
 border-radius:0;box-shadow:4px 4px 0 #070a141f
}
.panel-titlebar{background:var(--panel-head);border-color:var(--panel-border)}
.panel-titlebar>span:first-child{font-family:var(--mono);font-size:11px;color:var(--muted)}
.panel-titlebar svg{color:var(--accent);width:15px;height:15px}
.panel-titlebar::after{content:"";width:5px;height:5px;border:1px solid var(--subtle);margin-left:4px;flex-shrink:0}
.panel-titlebar .panel-meta{margin-left:auto}
.workspace-toolbar{padding-block:28px 24px}
.workspace-toolbar>div>span:last-child{color:var(--accent)}
.page-intro{position:relative;overflow:hidden}
.page-intro::after{content:"✧";position:absolute;right:44px;top:25px;font:120px var(--pixel);color:var(--accent);opacity:.15}
.page-intro h1,.case-intro h1{font-family:var(--pixel);font-size:clamp(48px,6vw,76px);font-weight:500;letter-spacing:0}
.section-heading .eyebrow{color:var(--accent);font-size:10px}
.section-heading h2{font-size:32px;font-weight:500}
.project-card{transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.project-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:5px 7px 0 #070a1430}
.project-card .project-body h3{font-size:27px;line-height:1.35}
.project-content{padding:34px;gap:45px}
.project-description{font-size:14px;line-height:1.9}
.project-diagram{border-radius:0;background:var(--panel-inset)}
.project-diagram figcaption{color:var(--subtle);font-family:var(--mono);letter-spacing:.04em;font-size:9px}
.technical-art{shape-rendering:crispEdges}
.technical-art rect{rx:0}
.tags li{border-radius:0;font-size:10px;background:var(--panel-inset)}
.background-grid{gap:28px}
.background-grid h3{font-size:22px}
.contact-strip{border:1px solid var(--panel-border)}
.contact-strip h2{font-family:var(--pixel);font-size:36px;font-weight:400;letter-spacing:0}
.site-footer{margin-top:55px;font-family:var(--mono);font-size:10px}
body[data-page="home"] main.wrap{width:100%}
body[data-page="home"] main>section:not(.pixel-world),body[data-page="home"] main>.world-note{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.pixel-world{position:relative;isolation:isolate;width:100%;max-width:100%;margin-left:0;height:clamp(700px,calc(100svh - 80px),850px);min-height:700px;overflow:hidden;background:#121536 url("/assets/night-landscape.svg") center bottom/cover no-repeat}
[data-theme="light"] .pixel-world{background-color:#d4cfe3;background-image:url("/assets/dawn-landscape.svg")}
.sky-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:-2}
.world-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(12,16,37,.52),rgba(12,16,37,.13) 54%,transparent 80%)}
[data-theme="light"] .world-shade{background:linear-gradient(90deg,rgba(233,225,230,.6),rgba(233,225,230,.12) 65%,transparent)}
.world-topline{display:flex;justify-content:space-between;align-items:center;padding-top:30px;color:#c4c2d3;font:9px var(--mono);letter-spacing:.15em}
.world-topline>span:first-child{display:flex;align-items:center;gap:12px}
.pixel-star{color:#d9c297;font:16px var(--pixel)}
.world-edition{opacity:.65}
.world-copy{position:relative;padding-top:70px;pointer-events:none}
.world-copy a{pointer-events:auto}
.world-copy h1{font-family:var(--pixel);font-size:clamp(74px,8vw,114px);font-weight:500;letter-spacing:-.035em;line-height:.97;margin-bottom:26px;color:#f0e9dc;text-shadow:4px 4px 0 #282943;max-width:750px}
.world-copy h1>span{display:block}
.pixel-period{color:#bce8d0}
.world-role{font-size:18px;color:#e4dfeb;letter-spacing:.01em;margin-bottom:16px}
.world-description{max-width:440px;color:#c1bfd3;font-size:14px;line-height:1.85;margin-bottom:27px}
.world-actions{display:flex;align-items:center;gap:14px}
.world-actions .button{padding:12px 21px;min-height:47px}
.world-actions .button-dark{background:#bce8d0;border-color:#c6eed9;color:#14291f;box-shadow:4px 4px 0 #122730}
.world-actions .button-outline{background:rgba(18,23,45,.78);color:#e6e2ee;border-color:#686582}
.world-actions .button>span[aria-hidden]{font-size:10px}
.world-bottom{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.world-scroll{color:#bbb9cf;font:9px var(--mono);letter-spacing:.15em;display:flex;gap:11px;align-items:center;padding-block:10px}
.scroll-pixel{font:24px var(--pixel);color:#bce8d0}
.skip-intro{position:absolute;right:30px;top:70px;z-index:3;font:11px var(--mono);padding:10px 14px;border:1px solid #656785;background:#161a31;color:#ebe4da}
.world-note{padding:29px 0;display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.6}
.note-star{font:25px var(--pixel);color:var(--gold)}
.note-coordinate{margin-left:auto;font:9px var(--mono);letter-spacing:.07em;white-space:nowrap;color:var(--subtle)}
body[data-page="home"] .selected-section{margin-top:0;padding-top:74px;border-top:0}
.home-background{padding-top:78px}
.is-intro .world-copy h1>span:nth-child(1){animation:pixel-arrive .8s .4s both steps(16,end)}
.is-intro .world-copy h1>span:nth-child(2){animation:pixel-arrive .8s .65s both steps(16,end)}
.is-intro .world-role{animation:pixel-arrive .75s .9s both}
.is-intro .world-description{animation:pixel-arrive .75s 1.1s both}
.is-intro .world-actions{animation:pixel-arrive .75s 1.25s both}
.is-intro .world-bottom{animation:pixel-arrive .8s 1.45s both}
@keyframes pixel-arrive{from{opacity:0;transform:translateY(18px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
[data-theme="light"] .world-topline{color:#4f4b66}
[data-theme="light"] .world-copy h1{color:#32344e;text-shadow:3px 3px 0 #efe2dc}
[data-theme="light"] .world-role{color:#3f3c56}
[data-theme="light"] .world-description{color:#555068}
[data-theme="light"] .world-actions .button-dark{background:#32644f;border-color:#32644f;color:#fff4dd;box-shadow:4px 4px 0 #c2b9ca}
[data-theme="light"] .world-actions .button-outline{background:#f2e8e7dd;border-color:#868299;color:#39364f}
[data-theme="light"] .world-scroll{color:#fff1e6}
[data-theme="light"] .scroll-pixel{color:#ffe6ad}
[data-theme="light"] .skip-intro{color:#39364f;background:#f2e8e7;border-color:#868299}
@media(min-width:1600px){.world-copy{padding-top:90px}.world-copy h1{font-size:120px}}
@media(max-width:1100px){
 .header-inner{gap:18px}.brand-name{display:none}
 .world-copy{padding-top:85px}.world-copy h1{font-size:94px}
 .world-description{max-width:420px}.world-edition{display:none}
}
@media(max-width:800px){
 .wrap,body[data-page="home"] main>section:not(.pixel-world),body[data-page="home"] main>.world-note{width:calc(100% - 56px)}
 .world-copy h1{font-size:84px}.world-copy{padding-top:80px}
 .world-role{font-size:16px}.note-coordinate{display:none}
 .project-content{gap:28px;padding:28px}
 .world-scroll span:last-child{font-size:8px}
}
@media(max-width:600px){
 .wrap,body[data-page="home"] main>section:not(.pixel-world),body[data-page="home"] main>.world-note{width:calc(100% - 40px)}
 .header-inner{height:69px}.brand-mark{font-size:26px}
 .header-actions{gap:10px}.resume-link{padding:8px 10px;font-size:10px}.theme-toggle{width:35px;height:35px}
 .primary-nav.is-open{border-radius:0;background:var(--panel);border-color:var(--line)}
 .pixel-world{height:760px;min-height:760px}
 .world-topline{padding-top:25px;font-size:8px;letter-spacing:.07em}
 .world-copy{padding-top:52px}
 .world-copy h1{font-size:clamp(59px,13.3vw,80px);line-height:1.02;margin-bottom:23px;text-shadow:3px 3px 0 #282943}
 .world-role{font-size:15px;max-width:290px;line-height:1.65;margin-bottom:14px}
 .world-description{max-width:325px;font-size:13px;line-height:1.85;margin-bottom:25px}
 .world-actions{gap:10px;align-items:stretch;flex-wrap:wrap}
 .world-actions .button{min-height:44px;padding:10px 13px;font-size:10px;gap:10px}
 .world-shade{background:linear-gradient(180deg,rgba(12,16,37,.2),rgba(12,16,37,.26) 62%,transparent 80%)}
 .world-bottom{bottom:20px;gap:12px;align-items:flex-start;flex-direction:column-reverse}
 .world-scroll{padding:0;font-size:8px}
 .world-note{padding:23px 0;font-size:12px;gap:12px}
 .skip-intro{top:50px;right:20px;padding:8px 10px;font-size:10px}
 body[data-page="home"] .selected-section{padding-top:50px}
 .section-heading h2{font-size:27px}
 .section-heading .button{min-height:40px}
 .project-content{padding:25px}
 .project-card .project-body h3{font-size:24px}
 .project-grid{gap:25px}
 .panel-titlebar{padding:14px 18px}
 .panel-titlebar>span:first-child{font-size:9px}
 .panel-meta{font-size:8px}.panel-titlebar::after{display:none}
 .home-background{padding-top:58px}
 .background-grid{gap:22px}
 .contact-strip h2{font-size:31px}
 .page-intro::after{right:20px;font-size:90px;top:35px}
 .page-intro h1{font-size:49px}
 .case-intro h1{font-size:clamp(30px,9vw,49px);overflow-wrap:anywhere}
 .site-footer{font-family:var(--sans)}
}
@media(max-width:359px){
 .world-copy h1{font-size:56px}
 .world-role{font-size:14px}
 .world-actions .button{font-size:9px;padding:10px}
}
@media(prefers-reduced-motion:reduce){
 .is-intro .world-copy *,.is-intro .world-bottom{animation:none!important;opacity:1;transform:none;filter:none}
 .project-card:hover{transform:none}
}
.world-copy h1>span,.world-role,.world-description,.world-actions{transform-origin:left center}
[data-theme="light"] .pixel-period{color:#32644f}