:root{--bg: #eef3fa;--bg-soft: #f7faff;--panel: rgba(255, 255, 255, .76);--panel-strong: rgba(255, 255, 255, .94);--text: #0f2038;--muted: #5c6f8a;--line: rgba(19, 45, 83, .14);--cyan: #2384ff;--violet: #7f73ff;--silver: #6f84aa;--slate: #4674ad;--shell: 1180px;--shadow: 0 20px 58px rgba(51, 76, 115, .16);font-family:Monaco,Lucida Console,monospace}*{box-sizing:border-box;font-family:Monaco,Lucida Console,monospace}html,body,#app{min-height:100%}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,rgba(77,140,255,.14),transparent 28%),radial-gradient(circle at 80% 18%,rgba(127,115,255,.1),transparent 24%),linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);color:var(--text)}a{color:inherit}button,input,textarea{font:inherit}.app-shell{position:relative;min-height:100vh;overflow-x:clip}.ambient-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle 90px at var(--pointer-x) var(--pointer-y),rgba(118,104,255,.14),transparent 74%);opacity:.68;z-index:0}.shell{position:relative;z-index:1;width:min(92vw,var(--shell));margin:0 auto}.site-header{position:sticky;top:0;z-index:12;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);background:#f0f6ffb8}.nav-shell{display:flex;align-items:center;justify-content:space-between;min-height:66px}.brand{text-decoration:none;font-size:.92rem;letter-spacing:.22em;color:var(--slate);font-weight:700}.nav-links{display:flex;gap:1.2rem}.nav-links a{text-decoration:none;color:var(--muted);font-size:.84rem;transition:color .18s ease}.nav-links a:hover,.nav-links .router-link-active{color:var(--text)}.hero-shell{padding:1.4rem 0 1.2rem}.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:1.6rem;align-items:start;min-height:auto}.hero-copy{max-width:760px}.kicker,.section-label{margin:0 0 .9rem;color:var(--cyan);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}.section-label-strong{font-size:clamp(1.1rem,2.2vw,1.55rem);letter-spacing:.08em}h1,h2,h3,p{margin:0}.hero-copy h1,.page-banner h1{display:grid;gap:.38rem;font-size:clamp(2.5rem,7vw,5.2rem);line-height:.96;letter-spacing:-.05em}.hero-copy h1 span{display:block;margin-top:.62rem;color:var(--muted);font-size:clamp(1.05rem,2.8vw,1.6rem);letter-spacing:.01em}.hero-line{margin-top:1.05rem;color:var(--slate);font-size:clamp(.92rem,1.8vw,1.15rem);letter-spacing:.12em;text-transform:uppercase}.hero-description,.section-intro{margin-top:1rem;max-width:720px;color:var(--muted);font-size:.96rem;line-height:1.76}.hero-panel{padding:1.05rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#ffffffe6,#f5f9ffc7);box-shadow:var(--shadow)}.panel-line{display:grid;gap:.35rem;padding:.85rem 0;border-bottom:1px solid var(--line)}.panel-line:last-child{border-bottom:0}.panel-line span{color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}.panel-line strong{font-size:.9rem;color:var(--text);font-weight:400}.project-section{padding:.8rem 0 4.8rem}.section-head{display:grid;grid-template-columns:1fr auto;gap:1.3rem;align-items:end;margin-bottom:1.2rem}.section-head h2{font-size:clamp(1.7rem,3.7vw,2.7rem);letter-spacing:-.04em}.filter-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem}.filter-chip{border:1px solid var(--line);border-radius:999px;padding:.48rem .86rem;background:#ffffffb3;color:var(--muted);cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}.filter-chip.active,.filter-chip:hover{color:var(--text);border-color:#2384ff5c;background:#2384ff1a}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.92rem}.project-card{--rx: 0deg;--ry: 0deg;position:relative;padding:1.05rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,#ffffffe6,#f5f9ffbf),var(--panel);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;box-shadow:var(--shadow);cursor:pointer;transition:transform .22s ease,border-color .18s ease,box-shadow .22s ease;overflow:hidden}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.85),transparent 34%);opacity:.72}.project-card[data-accent=cyan]{box-shadow:0 16px 58px #2384ff24}.project-card[data-accent=violet]{box-shadow:0 16px 58px #7f73ff24}.project-card[data-accent=silver]{box-shadow:0 16px 58px #7c91b01f}.project-card[data-accent=slate]{box-shadow:0 16px 58px #4674ad21}.project-card:hover{border-color:#2384ff52}.project-top,.metric-row,.stack-row{position:relative;z-index:1}.project-top{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.78rem;margin-bottom:1.4rem}.project-card h3{position:relative;z-index:1;font-size:1.22rem;letter-spacing:-.04em;margin-bottom:.6rem}.project-summary,.project-detail{position:relative;z-index:1;color:var(--muted);line-height:1.7}.metric-row,.stack-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}.metric-row span,.stack-row span{border:1px solid var(--line);border-radius:999px;padding:.25rem .58rem;color:var(--slate);font-size:.7rem;background:#ffffffb8}.page-banner{padding:2.1rem 0 1.1rem}.page-projects .page-banner h1{font-size:clamp(2rem,5.2vw,3.9rem)}.contact-section{padding:0 0 4.8rem}.contact-link,.detail-link{display:inline-flex;margin-top:1rem;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(19,45,83,.4);padding-bottom:.15rem}.detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;justify-content:center;align-items:center;padding:1.1rem;background:#e5eefc8a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.detail-panel{width:min(94vw,760px);max-height:88vh;padding:1.6rem;border:1px solid var(--line);border-radius:22px;background:var(--panel-strong);box-shadow:var(--shadow);overflow:auto}.close-button{border:1px solid var(--line);border-radius:999px;padding:.42rem .74rem;color:var(--muted);background:transparent;cursor:pointer;margin-bottom:.9rem}.detail-caption{margin-bottom:.32rem;color:var(--cyan);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}.detail-group{margin-top:1.18rem}.timeline{list-style:none;margin:0;padding:0;border-left:1px solid rgba(35,132,255,.25)}.timeline li{display:grid;grid-template-columns:48px 1fr;gap:.78rem;padding:.18rem 0 .72rem .78rem;position:relative}.timeline li:before{content:"";position:absolute;left:-5px;top:.38rem;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px #2384ff29}.timeline-phase{color:var(--cyan);font-size:.72rem;letter-spacing:.08em}.timeline-title{color:var(--text);font-size:.88rem}.timeline-detail{color:var(--muted);font-size:.82rem;margin-top:.15rem}.metric-chart{display:grid;gap:.56rem}.metric-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.78rem;margin-bottom:.24rem}.metric-head strong{color:var(--text)}.metric-bar{height:9px;border-radius:999px;background:#2384ff24;overflow:hidden}.metric-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2384ff,#7f73ff);box-shadow:0 0 12px #2384ff42}.flow-graph{display:flex;flex-wrap:wrap;gap:.42rem}.flow-node{border:1px solid var(--line);border-radius:12px;background:#ffffffb8;color:var(--muted);font-size:.78rem;padding:.45rem .58rem;cursor:pointer;display:inline-flex;align-items:center;gap:.42rem;transition:all .16s ease}.flow-node.active,.flow-node:hover{color:var(--text);border-color:#2384ff66;background:#2384ff1a}.flow-arrow{color:var(--cyan);font-size:.76rem}.flow-detail{margin-top:.58rem;color:var(--muted);font-size:.84rem}.panel-enter-active,.panel-leave-active{transition:opacity .22s ease}.panel-enter-active .detail-panel,.panel-leave-active .detail-panel{transition:transform .26s ease}.panel-enter-from,.panel-leave-to{opacity:0}.panel-enter-from .detail-panel,.panel-leave-to .detail-panel{transform:translateY(24px) scale(.98)}.reveal-card{animation:card-rise .62s ease both}.project-card:nth-child(2){animation-delay:70ms}.project-card:nth-child(3){animation-delay:.12s}.project-card:nth-child(4){animation-delay:.17s}@keyframes card-rise{0%{opacity:0;transform:perspective(1100px) translateY(22px) rotateX(3deg)}to{opacity:1;transform:perspective(1100px) translateY(0) rotateX(0)}}@media(max-width:980px){.hero-grid,.section-head,.project-grid{grid-template-columns:1fr}.hero-grid{min-height:auto;padding-top:0}.hero-shell{padding-top:.9rem}}@media(max-width:640px){.nav-shell{min-height:60px}.nav-links{gap:.75rem}.hero-copy h1,.page-banner h1{font-size:clamp(2.2rem,12vw,3.4rem)}.project-card,.detail-panel{padding:.92rem;border-radius:16px}}