:root{
  --ink:#102033;--ink-soft:#425268;--paper:#f5f1e8;--paper-2:#fffdf8;--panel:#ffffff;
  --navy:#102a43;--navy-2:#163c5c;--orange:#ff6b35;--orange-2:#ff8a5b;--cyan:#21a6a1;
  --line:#d9d3c8;--line-dark:rgba(16,42,67,.14);--shadow:0 18px 50px rgba(30,47,67,.12);
  --radius:26px;--radius-sm:16px;--max:1180px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.62}
a{color:inherit}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}.container{width:min(var(--max),calc(100% - 32px));margin-inline:auto}
.skip-link{position:fixed;left:12px;top:-80px;z-index:9999;padding:10px 14px;border-radius:10px;background:#fff;color:var(--navy);font-weight:900}.skip-link:focus{top:12px}:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(245,241,232,.9);border-bottom:1px solid rgba(16,42,67,.1);backdrop-filter:blur(18px)}.nav-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:950;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--navy);color:white;font-size:.8rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.site-menu{display:flex;gap:4px;align-items:center}.site-menu a{text-decoration:none;color:var(--ink-soft);font-weight:800;padding:10px 14px;border-radius:12px}.site-menu a:hover,.site-menu a.active{color:var(--navy);background:rgba(16,42,67,.07)}.menu-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:12px;padding:9px 13px;font-weight:900}
.hero-section{padding:38px 0 28px}.hero-wrap{position:relative;overflow:hidden;border-radius:34px;background:var(--navy);color:#fff;box-shadow:0 28px 70px rgba(16,42,67,.22)}.hero-wrap:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(33,166,161,.35),transparent 31%),radial-gradient(circle at 16% 84%,rgba(255,107,53,.22),transparent 34%)}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr;gap:28px;align-items:stretch;padding:clamp(28px,5vw,70px)}.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:950}.eyebrow{align-self:flex-start;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e5fbfa}.kicker{color:var(--orange)}h1,h2,h3,p{margin-top:0}.hero-copy h1,.page-hero h1,.project-detail h1{font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.06em;margin:20px 0;max-width:12ch}.hero-copy p,.page-hero p,.project-detail-head p{font-size:clamp(1rem,2vw,1.18rem);max-width:65ch}.hero-copy p{color:#c9d7e5}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.button{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border:1px solid transparent;border-radius:14px;padding:12px 17px;font-weight:900;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.button:hover{transform:translateY(-2px)}.button.primary{color:#fff;background:var(--orange);box-shadow:0 12px 28px rgba(255,107,53,.24)}.button.primary:hover{background:#f45a25}.button.secondary{color:var(--navy);background:#fff;border-color:rgba(16,42,67,.1)}.hero-wrap .button.secondary{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}.button.danger{color:#fff;background:#b4233a}.button.small{padding:9px 13px;font-size:.88rem}.skill-row,.tag-row{display:flex;gap:8px;flex-wrap:wrap}.skill-row{margin-top:28px}.skill-row span,.tag-row span{border:1px solid rgba(16,42,67,.12);background:#edf3f6;color:var(--navy);border-radius:999px;padding:6px 10px;font-weight:850;font-size:.78rem}.hero-wrap .skill-row span{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#eaf4fb}
.hero-visual{display:grid;align-content:center}.terminal-card{border-radius:24px;background:#081725;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.28);overflow:hidden}.terminal-top{display:flex;align-items:center;gap:7px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.08);color:#8eabc3;font-size:.78rem}.terminal-dot{width:9px;height:9px;border-radius:50%;background:#ff715b}.terminal-dot:nth-child(2){background:#f6c85f}.terminal-dot:nth-child(3){background:#4cc38a}.terminal-body{padding:22px;display:grid;gap:13px;font-family:"SFMono-Regular",Consolas,monospace;font-size:.88rem;color:#d6e5f1}.code-line{display:flex;gap:12px}.code-n{color:#56748e}.code-key{color:#61d4ce}.code-value{color:#ffab7a}.system-pulse{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pulse-card{border-radius:14px;padding:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.pulse-card span{display:block;color:#7894aa;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}.pulse-card strong{display:block;margin-top:5px;font-size:.92rem;color:#fff}
.section{padding:64px 0}.section-soft{background:#ebe5da;border-block:1px solid rgba(16,42,67,.08)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:24px}.section-head h2{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.04;margin:7px 0 0;letter-spacing:-.05em}.section-intro{color:var(--ink-soft);max-width:62ch}.text-link{color:var(--navy);font-weight:950;text-underline-offset:4px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.project-card,.lab-card,.content-panel,.callout,.page-hero{background:var(--panel);border:1px solid var(--line-dark);box-shadow:var(--shadow)}.project-card{border-radius:22px;overflow:hidden;display:flex;flex-direction:column}.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#dfe7eb}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.project-card:hover .card-media img{transform:scale(1.035)}.media-placeholder{height:100%;min-height:220px;display:grid;place-items:center;background:linear-gradient(135deg,#d8e7ec,#f6d9c8)}.media-placeholder span{display:grid;place-items:center;width:88px;height:88px;border-radius:24px;background:var(--navy);color:#fff;font-size:1.6rem;font-weight:950}.card-body{padding:22px;display:flex;flex-direction:column;flex:1}.card-body h2,.card-body h3{font-size:1.24rem;line-height:1.25;margin-bottom:10px}.card-body h2 a,.card-body h3 a{text-decoration:none}.card-body p,.lab-card p,.content-panel p{color:var(--ink-soft)}.card-body .text-link{margin-top:auto;padding-top:18px}.status-line{display:flex;justify-content:flex-start;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:950;margin-bottom:10px}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lab-card{position:relative;border-radius:22px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}.lab-card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-35px;top:-35px;background:rgba(33,166,161,.08)}.lab-card h2,.lab-card h3{font-size:1.4rem;margin:15px 0 10px;position:relative}.lab-card .button{margin-top:auto}.lab-card .tag-row{margin:8px 0 22px}.lab-index{font-size:2.25rem;color:rgba(16,42,67,.18);font-weight:950}.callout{border-radius:28px;padding:34px;display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:68px}.callout h2{font-size:clamp(1.6rem,3.5vw,2.7rem);margin:8px 0 10px}.callout p{color:var(--ink-soft);max-width:72ch;margin-bottom:0}
.page-hero{border-radius:30px;padding:clamp(28px,5vw,58px);margin-top:42px;background:linear-gradient(135deg,#fff,#f4ede1)}.page-hero .eyebrow{background:#edf3f6;color:var(--navy);border-color:rgba(16,42,67,.1)}.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);color:var(--navy)}.page-hero p{color:var(--ink-soft)}.project-detail{padding:48px 0 72px}.project-detail-head{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}.project-detail-head .eyebrow{background:#edf3f6;color:var(--navy);border-color:rgba(16,42,67,.1)}.project-detail-head h1{color:var(--navy);max-width:16ch}.detail-media{min-height:330px;border-radius:26px;overflow:hidden;background:#dfe7eb;box-shadow:var(--shadow)}.detail-media img{width:100%;height:100%;min-height:330px;object-fit:cover}.detail-media .media-placeholder{min-height:330px}.detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:26px}.content-panel{border-radius:22px;padding:26px}.content-panel h2{font-size:1.5rem;line-height:1.2;margin:8px 0 14px;color:var(--navy)}.prose{color:var(--ink-soft);white-space:normal}.detail-sidebar,.about-stack{display:grid;gap:16px}.action-stack{display:grid;gap:10px}.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.timeline{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:22px}.timeline li{display:grid;grid-template-columns:48px 1fr;gap:14px}.timeline>li>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--navy);color:#fff;font-weight:950}.timeline h2{font-size:1.08rem;margin-bottom:5px}.clean-list{padding-left:20px;color:var(--ink-soft)}.contact-panel h2{font-size:1.3rem}.flash{margin-top:16px;border-radius:12px;padding:12px 14px;font-weight:750}.flash-success{background:#e5f7ef;color:#175c43}.flash-error{background:#fde9ed;color:#8f2034}
.auth-page{display:grid;place-items:center;padding:22px;background:var(--paper)}.auth-card{width:min(580px,100%);border:1px solid var(--line-dark);border-radius:24px;padding:30px;background:#fff;box-shadow:var(--shadow)}.auth-card h1{font-size:2rem;margin:16px 0 8px}.auth-card p{color:var(--ink-soft)}.stack-form{display:grid;gap:14px;margin-top:20px}.stack-form label{display:grid;gap:6px;font-weight:800;font-size:.88rem}.stack-form input,.stack-form textarea,.stack-form select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff;color:var(--ink)}.stack-form textarea{min-height:130px;resize:vertical}
.demo-shell{padding:38px 0 70px}.demo-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.demo-head h1{font-size:clamp(2.15rem,5vw,4.3rem);line-height:1.02;margin:10px 0 0;color:var(--navy);letter-spacing:-.05em}.demo-head p{color:var(--ink-soft);max-width:70ch}.demo-head .eyebrow{background:#edf3f6;color:var(--navy);border-color:rgba(16,42,67,.1)}.demo-panel{border:1px solid var(--line-dark);border-radius:24px;background:#fff;box-shadow:var(--shadow);padding:16px}.demo-grid{display:grid;grid-template-columns:290px 1fr;gap:16px}.demo-sidebar{display:grid;align-content:start;gap:12px}.metric{border:1px solid var(--line-dark);border-radius:15px;padding:13px;background:#f7f8f7}.metric span{display:block;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.metric strong{font-size:1.28rem;color:var(--navy)}.demo-canvas-wrap{position:relative;border-radius:18px;overflow:hidden;background:#06111f;min-height:440px}.demo-canvas-wrap canvas{width:100%;height:auto;display:block;touch-action:none}.demo-controls{display:flex;flex-wrap:wrap;gap:9px}.demo-controls .button{flex:1}.range-field{display:grid;gap:6px;color:var(--ink-soft);font-weight:800;font-size:.85rem}.range-field input{width:100%}.demo-note{font-size:.84rem;color:var(--ink-soft);margin:0}.demo-status{padding:12px;border-radius:14px;background:#edf7f6;color:#176e6a;font-weight:800;font-size:.86rem}
.site-footer{border-top:1px solid rgba(16,42,67,.1);background:var(--navy);color:#fff;padding:34px 0 18px}.footer-grid{display:flex;align-items:start;justify-content:space-between;gap:24px}.footer-grid p{color:#b9cad8;margin:5px 0}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#fff;font-weight:850}.footer-bottom{margin-top:22px;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);color:#91a7b9;font-size:.84rem}
@media(max-width:980px){.hero-grid,.project-detail-head,.detail-grid,.about-grid{grid-template-columns:1fr}.card-grid,.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy h1{max-width:15ch}.hero-visual{max-width:720px}.demo-grid{grid-template-columns:1fr}.demo-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-sidebar .demo-controls,.demo-sidebar .demo-note,.demo-sidebar .range-field,.demo-sidebar .demo-status{grid-column:1/-1}.demo-canvas-wrap{min-height:360px}}
@media(max-width:720px){.container{width:min(100% - 22px,var(--max))}.nav-row{min-height:66px;flex-wrap:wrap}.menu-toggle{display:inline-flex}.site-menu{display:none;width:100%;padding:0 0 12px;flex-direction:column;align-items:stretch}.site-menu.open{display:flex}.site-menu a{text-align:left;padding:12px 14px}.hero-section{padding-top:14px}.hero-wrap{border-radius:24px}.hero-grid{padding:24px 20px;gap:24px}.hero-copy h1,.page-hero h1,.project-detail h1{font-size:clamp(2.35rem,13vw,3.9rem)}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .button{width:100%}.system-pulse{grid-template-columns:1fr}.card-grid,.lab-grid{grid-template-columns:1fr}.section-head,.callout,.demo-head,.footer-grid{align-items:flex-start;flex-direction:column}.section{padding:44px 0}.section-head{margin-bottom:18px}.page-hero{margin-top:20px;border-radius:22px;padding:26px 20px}.project-detail{padding-top:28px}.callout{padding:24px;margin-bottom:46px}.callout .button{width:100%}.demo-shell{padding-top:24px}.demo-panel{padding:10px;border-radius:19px}.demo-sidebar{grid-template-columns:1fr 1fr;gap:8px}.metric{padding:11px}.metric strong{font-size:1.08rem}.demo-canvas-wrap{min-height:0;aspect-ratio:16/10}.demo-canvas-wrap canvas{height:100%;object-fit:contain}.demo-controls{position:relative}.demo-controls .button{min-height:46px}.footer-links{gap:12px}.terminal-body{padding:16px;font-size:.76rem}.code-line{gap:8px}}
@media(max-width:430px){.demo-sidebar{grid-template-columns:1fr}.demo-sidebar .demo-controls,.demo-sidebar .demo-note,.demo-sidebar .range-field,.demo-sidebar .demo-status{grid-column:auto}.skill-row span,.tag-row span{font-size:.72rem}.brand span:last-child{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}