/* ========================================================================
   Peng-Siang Wang / Engineering Portfolio — 100% static Cloudflare Pages build
   CSS design system: Warm white + muted teal, with an optional dark theme
   ======================================================================== */
:root {
  --bg: #06101b;
  --bg-deep: #030a13;
  --sidebar: #07121e;
  --surface: #0c1a29;
  --surface-2: #112337;
  --surface-hover: #13293c;
  --line: rgba(130,174,202,.15);
  --line-strong: rgba(117,188,215,.29);
  --text: #edf6fb;
  --text-muted: #a6bdce;
  --text-soft: #738ba0;
  --accent: #62e3ed;
  --accent-2: #65abff;
  --accent-deep: #007985;
  --accent-wash: rgba(98,227,237,.095);
  --accent-glow: rgba(58,211,229,.18);
  --scrollbar: #213e54;
  --shadow: 0 22px 80px rgba(0,0,0,.21);
  --radius: 19px;
  --sidebar-width: 238px;
  --topbar-height: 80px;
  --content-pad: clamp(22px,3.6vw,64px);
  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg:#f7f8f6;--bg-deep:#f0f3ef;--sidebar:#fff;
  --surface:#fff;--surface-2:#f2f5f2;--surface-hover:#edf4f0;
  --line:#dce3dd;--line-strong:#a8beb1;
  --text:#24352f;--text-muted:#52645b;--text-soft:#65756c;
  --accent:#167065;--accent-2:#426c83;--accent-deep:#11594f;
  --accent-wash:#eaf3ee;--accent-glow:rgba(22,112,101,.08);
  --scrollbar:#bbc8bd;--shadow:0 4px 20px rgba(36,53,47,.035);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter","Segoe UI","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 1.4px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent 2%,#000 48%,transparent);z-index:-2}
::selection{background:var(--accent);color:#03121d}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img,svg{display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:0}
::-webkit-scrollbar{width:9px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:20px;border:2px solid var(--bg)}
[hidden]{display:none!important}
.skip-link{position:fixed;top:-80px;left:22px;z-index:101;background:var(--accent);color:#031421;padding:14px 20px;border-radius:10px;font-weight:700}.skip-link:focus{top:15px}
.ambient{position:fixed;pointer-events:none;border-radius:50%;filter:blur(65px);z-index:-1;opacity:.43}
.ambient-a{width:560px;height:560px;top:-210px;right:-260px;background:radial-gradient(circle,#075267,transparent 65%)}
.ambient-b{width:450px;height:450px;top:48%;left:18%;background:radial-gradient(circle,#07334c,transparent 70%)}
html[data-theme="light"] .ambient{opacity:.11}

/* Sidebar navigation */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);z-index:60;background:linear-gradient(155deg,var(--sidebar),var(--bg-deep));border-right:1px solid var(--line);padding:32px 17px 22px;display:flex;flex-direction:column;transition:transform .4s var(--ease)}
.sidebar::after{content:"";position:absolute;top:32px;right:-1px;height:72px;width:1px;background:linear-gradient(transparent,var(--accent),transparent);opacity:.55}
.brand{display:flex;align-items:center;gap:13px;margin-bottom:65px;padding:0 6px}
.brand-icon{height:51px;width:51px;display:grid;place-items:center;flex-shrink:0;border:1px solid rgba(99,223,237,.48);background:linear-gradient(145deg,rgba(24,83,105,.65),rgba(9,29,46,.5));color:var(--accent);clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);position:relative}
.brand-icon span{font-weight:900;font-size:19px;letter-spacing:-2px}.brand-icon i{position:absolute;right:3px;bottom:3px;width:5px;height:5px;background:var(--accent)}
.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:13px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:760}.brand-copy small{font-size:8px;color:var(--text-soft);letter-spacing:1.1px;white-space:nowrap}
.sidebar-label{font-size:10px;letter-spacing:2px;color:var(--text-soft);padding:0 17px;margin-bottom:12px;font-weight:700}
.side-nav{display:flex;flex-direction:column;gap:6px}
.nav-link{position:relative;display:flex;align-items:center;gap:13px;padding:14px 14px 14px 17px;min-height:51px;color:var(--text-muted);border:1px solid transparent;border-radius:10px;transition:background .24s,color .24s,border .24s}
.nav-link svg{width:18px;height:18px;stroke-width:1.7}.nav-link span{font-size:13px;font-weight:600}.nav-link b{margin-left:auto;color:var(--text-soft);font-size:10px;font-weight:500;opacity:.56}
.nav-link:hover{background:var(--accent-wash);color:var(--text)}.nav-link.is-active{background:linear-gradient(95deg,rgba(19,119,147,.18),rgba(27,76,115,.10));color:var(--accent);border-color:rgba(65,177,218,.22)}
.nav-link.is-active::before{content:"";height:24px;width:2px;border-radius:2px;background:var(--accent);position:absolute;left:-1px;top:50%;transform:translateY(-50%);box-shadow:0 0 12px var(--accent)}
.sidebar-bottom{margin-top:auto;padding:0 10px 0 12px}.system-info{display:flex;align-items:center;gap:7px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:1.15px;color:var(--text-muted)}.system-info span:last-child{margin-left:auto;color:var(--text-soft)}
.signal{width:6px;height:6px;border-radius:50%;background:#49e3b4;box-shadow:0 0 0 4px rgba(73,227,180,.09),0 0 11px rgba(73,227,180,.6);display:inline-block;flex-shrink:0}
.sidebar-bottom p{color:var(--text-soft);font-size:11px;line-height:1.8;margin:20px 0 18px}.sidebar-local{display:flex;align-items:center;gap:9px;color:var(--text-soft);font-size:10px;letter-spacing:1.1px;font-variant-numeric:tabular-nums}.sidebar-local svg{height:14px;width:14px;color:var(--accent)}
.page-shell{margin-left:var(--sidebar-width);min-width:0}

/* Topbar */
.topbar{height:var(--topbar-height);position:sticky;top:0;z-index:45;display:flex;justify-content:space-between;align-items:center;padding:0 var(--content-pad);background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.top-left,.top-right,.breadcrumb{display:flex;align-items:center}.top-right{gap:12px}.breadcrumb{gap:12px;color:var(--text-soft);font-size:11px;font-weight:700;letter-spacing:1.4px;min-width:0}.breadcrumb span:last-child{color:var(--text)}.crumb-dot{height:7px;width:7px;border:1px solid var(--accent);background:var(--accent);box-shadow:0 0 12px var(--accent)}.slash{opacity:.3}
.search-button,.icon-button,.language-switch button{background:transparent;color:var(--text-muted);border:1px solid var(--line);transition:color .24s,background .24s,border-color .24s}
.search-button{height:37px;border-radius:8px;display:flex;align-items:center;gap:11px;padding:0 10px;font-size:11px;letter-spacing:.2px;min-width:166px}.search-button svg{height:15px;width:15px}.search-button kbd{margin-left:auto;border:1px solid var(--line);background:var(--surface-2);border-radius:4px;padding:2px 5px;color:var(--text-soft);font-family:inherit;font-size:9px}
.search-button:hover,.icon-button:hover{color:var(--accent);background:var(--accent-wash);border-color:var(--line-strong)}
.language-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.language-switch button{min-width:43px;padding:6px 10px;font-size:11px;border:0;border-radius:6px}.language-switch button.selected{background:var(--accent);color:#051523;font-weight:800;box-shadow:0 3px 12px var(--accent-glow)}
.icon-button{height:37px;width:37px;display:grid;place-items:center;border-radius:8px}.icon-button svg{height:17px;width:17px}.mobile-menu{display:none;margin-right:13px}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:655px;background:linear-gradient(135deg,var(--bg-deep),var(--bg) 70%);border-bottom:1px solid var(--line);isolation:isolate}
.hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,var(--bg-deep) 2%,rgba(4,13,25,.95) 27%,rgba(4,12,25,.5) 70%,rgba(5,16,29,.22)),url('./assets/hero-lab.webp');background-size:cover,cover;background-position:center,right top;z-index:-3;opacity:.92}
.hero-noise{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 99%,rgba(100,197,223,.065) 100%),linear-gradient(0deg,transparent 99%,rgba(100,197,223,.055) 100%);background-size:68px 68px;mask-image:linear-gradient(90deg,transparent 3%,#000 45%,#000);z-index:-2;opacity:.8}
.hero::after{content:"";position:absolute;bottom:-180px;left:9%;width:500px;height:250px;background:radial-gradient(ellipse,rgba(28,149,175,.16),transparent 70%);filter:blur(20px);pointer-events:none;z-index:-1}
.hero-layout{padding:90px var(--content-pad) 80px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:10px;min-height:655px;max-width:1800px;margin:auto;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:730px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.9px;margin-bottom:29px;white-space:nowrap}.eyebrow-square{width:8px;height:8px;border:1px solid var(--accent);transform:rotate(45deg);box-shadow:0 0 14px var(--accent-glow)}.eyebrow-line{width:52px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.8}
.hero-hi{color:var(--text-muted);font-size:12px;letter-spacing:4.5px;font-weight:700;margin-bottom:6px}
.hero h1{margin:0;line-height:1.18;font-size:clamp(60px,6.6vw,112px);font-weight:860;letter-spacing:-4.6px;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 12px 35px rgba(0,0,0,.2)}.hero-period{color:var(--accent);text-shadow:0 0 26px var(--accent-glow)}
.hero-english{font-size:11px;font-weight:750;letter-spacing:1.85px;color:var(--accent);margin:13px 0 43px;line-height:1.5}.hero-english span{padding:0 7px;color:var(--text-soft)}
.hero-tagline{font-size:clamp(24px,2.7vw,40px);letter-spacing:-1.3px;line-height:1.48;max-width:630px;font-weight:740;margin:0 0 12px;text-wrap:balance}.hero-role{color:var(--accent);font-size:13px;font-weight:710;letter-spacing:1px;margin:0 0 19px}.hero-lead{font-size:14px;color:var(--text-muted);line-height:1.97;max-width:590px;margin:0}
.hero-actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:31px}
.button{border-radius:9px;min-height:47px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.3px;font-weight:750;white-space:nowrap;border:1px solid transparent;transition:transform .24s var(--ease),box-shadow .24s,border-color .24s,background .24s;color:inherit}
.button svg{width:17px;height:17px}.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(120deg,#67e7ee,#49a7df);color:#061825;box-shadow:0 10px 35px rgba(32,190,218,.16)}.button-primary:hover{box-shadow:0 14px 42px rgba(37,213,232,.28)}
.button-outline{border-color:var(--line-strong);background:rgba(6,20,34,.38);color:var(--text)}.button-outline:hover{border-color:var(--accent);background:var(--accent-wash)}
.hero-micro{display:flex;align-items:center;gap:12px;margin-top:39px;font-size:10px;letter-spacing:1.1px;color:var(--text-soft);font-weight:700;flex-wrap:wrap}.hero-micro svg{height:14px;width:14px;color:var(--accent)}.micro-divider{width:28px;height:1px;background:var(--accent)}.micro-dot{width:2px;height:2px;border-radius:50%;background:var(--accent)}
.hero-portrait-side{height:440px;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;z-index:1}
.orbit{border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.orbit-outer{width:355px;height:355px;border:1px dashed rgba(98,227,237,.25);animation:orbit 60s linear infinite}.orbit-inner{width:315px;height:315px;border:1px solid rgba(98,227,237,.17);box-shadow:0 0 60px rgba(31,150,198,.15),inset 0 0 40px rgba(17,101,132,.11)}.orbit-dot{position:absolute;width:9px;height:9px;border:2px solid var(--accent);background:var(--bg);border-radius:50%;left:calc(50% + 162px);top:calc(50% - 78px);box-shadow:0 0 16px var(--accent)}
@keyframes orbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.portrait-frame{position:relative;width:265px;height:309px;clip-path:polygon(15% 0,85% 0,100% 13%,100% 87%,85% 100%,15% 100%,0 87%,0 13%);background:linear-gradient(145deg,#315c78,#0b2131);border:2px solid rgba(127,223,238,.39);box-shadow:0 14px 45px rgba(0,0,0,.45);overflow:hidden;transform:rotate(-2deg);transition:transform .5s var(--ease)}.portrait-frame:hover{transform:rotate(0) scale(1.025)}
.portrait-frame img{height:100%;width:100%;object-fit:cover;background:#112d3c}.portrait-frame img:not(.custom-photo){filter:saturate(.8)}.portrait-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(17,211,229,.06),transparent 27%,transparent 70%,rgba(1,22,34,.34))}
.portrait-cross{position:absolute;width:17px;height:17px;border-color:var(--accent);z-index:1}.cross-tl{top:16px;left:17px;border-left:2px solid;border-top:2px solid}.cross-br{right:17px;bottom:16px;border-right:2px solid;border-bottom:2px solid}
.portrait-upload{position:absolute;z-index:4;bottom:13px;right:18px;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#052034;border:4px solid #112939;box-shadow:0 4px 18px rgba(0,0,0,.35);clip-path:none}.portrait-upload svg{width:16px;height:16px}.portrait-upload:hover{background:#fff;transform:scale(1.06)}
.portrait-data{position:absolute;background:rgba(6,22,35,.78);border:1px solid rgba(96,189,215,.25);backdrop-filter:blur(10px);border-radius:9px;padding:12px 14px;box-shadow:var(--shadow);color:#e9f6fa}.portrait-data-top{top:36px;left:-4px;transform:rotate(-1deg)}.portrait-data-top small,.portrait-data-top span{display:block;font-size:8px;letter-spacing:1.3px;color:#9ec7d8}.portrait-data-top strong{display:block;font-weight:800;letter-spacing:1.8px;font-size:12px;margin:8px 0}.portrait-data-bottom{right:0;bottom:48px;display:flex;align-items:center;gap:9px}.portrait-data-bottom small{font-size:10px;color:#cde0e8;max-width:155px;line-height:1.4}
.hero-coordinate{position:absolute;right:6px;top:24px;writing-mode:vertical-rl;font-size:9px;color:#7eaab9;letter-spacing:2.1px}.hero-coordinate span{color:var(--accent);padding:8px 0}
.hero-scroll{position:absolute;bottom:0;left:var(--content-pad);display:flex;align-items:center;gap:18px;color:var(--text-soft);font-size:9px;font-weight:700;letter-spacing:1.6px}.scroll-track{height:34px;width:1px;background:rgba(98,227,237,.16);position:relative;overflow:hidden}.scroll-track i{display:block;width:1px;height:16px;background:var(--accent);animation:scroll-drop 2.3s ease-in-out infinite}
@keyframes scroll-drop{0%{transform:translateY(-18px)}80%,100%{transform:translateY(45px)}}

/* Shared cards and section headers */
.glass-card{position:relative;background:linear-gradient(130deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface-2) 72%,transparent));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);isolation:isolate;overflow:hidden;transition:border-color .28s,transform .35s var(--ease),box-shadow .35s}
.glass-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(370px circle at var(--mx,100%) var(--my,0%),var(--accent-wash),transparent 62%);opacity:0;transition:opacity .5s}.glass-card:hover::before{opacity:1}.glass-card:hover{border-color:var(--line-strong)}
.content-section{padding:107px var(--content-pad) 0;max-width:1800px;margin:auto}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:29px}.section-kicker{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:10px;letter-spacing:1.8px;font-weight:750;margin-bottom:14px}.section-kicker span{padding:5px 7px;border:1px solid var(--line-strong);border-radius:3px;font-size:9px}.section-kicker i{width:26px;height:1px;background:var(--accent)}
.section-heading h2{font-size:clamp(27px,3vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.2;margin:0}.section-heading h2 span{font-size:clamp(12px,1.25vw,16px);font-weight:600;letter-spacing:.5px;color:var(--text-soft);margin-left:5px;white-space:nowrap}.section-heading>p{color:var(--text-soft);font-size:9px;letter-spacing:1.4px;font-weight:700;text-align:right;margin:0 0 5px}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--delay,0ms)}[data-reveal].is-visible{opacity:1;transform:translateY(0)}
.metrics .metric:nth-child(2),.timeline-entry:nth-child(2){transition-delay:70ms}.metrics .metric:nth-child(3),.timeline-entry:nth-child(3){transition-delay:140ms}.metrics .metric:nth-child(4){transition-delay:210ms}

/* KPI grid */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:25px var(--content-pad) 0;max-width:1800px;margin:auto}
.metric{padding:24px 21px 23px;min-height:168px;overflow:hidden}.metric::after{content:"";position:absolute;right:0;top:0;width:75px;height:75px;background:linear-gradient(225deg,rgba(94,223,237,.055),transparent)}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent)}.metric-top svg{width:23px;height:23px}.metric-top span{font-size:8px;letter-spacing:1.3px;color:var(--text-soft)}
.metric-value{display:block;font-size:clamp(25px,2.5vw,41px);letter-spacing:-1.1px;font-variant-numeric:tabular-nums;margin-top:14px;line-height:1.05}.metric-label{font-size:12px;font-weight:740;margin-top:10px}.metric-note{font-size:10px;color:var(--text-soft);margin-top:7px;line-height:1.5}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.75fr);gap:16px}.about-card{padding:38px 38px 28px}.card-topline,.impact-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--accent);letter-spacing:1.9px;font-weight:770}.card-topline svg,.impact-top svg{width:22px;height:22px}
.about-card h3{font-size:clamp(22px,2.45vw,34px);letter-spacing:-1.2px;line-height:1.5;margin:25px 0 18px;max-width:700px}.about-prose p{color:var(--text-muted);font-size:13px;line-height:2.05;margin:0 0 12px}.about-signature{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:23px;margin-top:30px}.signature-icon{font-size:23px;font-weight:900;letter-spacing:-2px;color:var(--text)}.signature-icon span{color:var(--accent)}.about-signature strong{font-size:12px;display:block}.about-signature small{display:block;color:var(--text-soft);font-size:9px;letter-spacing:1.25px;margin-top:5px}
.principles{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}.principle{padding:19px 24px 18px;min-height:125px}.principle-number{font-size:11px;color:var(--accent);font-weight:750;letter-spacing:1.2px}.principle-number span{color:var(--text-soft)}.principle-arrow{position:absolute;right:22px;top:20px;color:var(--text-soft)}.principle-arrow svg{width:17px;height:17px}.principle h3{margin:12px 0 5px;font-size:18px;letter-spacing:-.3px}.principle p{color:var(--text-muted);font-size:11px;line-height:1.65;margin:0}

/* Project list */
.filter-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.filter-button{display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:10px 14px;color:var(--text-muted);font-size:11px;font-weight:650;transition:.24s}.filter-button svg{width:14px;height:14px}.filter-button .filter-pip{height:5px;width:5px;border-radius:50%;background:var(--text-soft)}.filter-button:hover{border-color:var(--line-strong);color:var(--text)}.filter-button.active{background:var(--accent-wash);color:var(--accent);border-color:rgba(98,227,237,.39)}.filter-button.active .filter-pip{background:var(--accent)}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.project-card{min-width:0;display:flex;flex-direction:column}.project-card:hover{transform:translateY(-4px)}.project-featured{grid-column:span 2;display:grid;grid-template-columns:1.03fr .97fr;min-height:347px}
.project-media{position:relative;min-height:212px;overflow:hidden;background:radial-gradient(ellipse at 78% 56%,rgba(18,118,164,.25),transparent 52%),linear-gradient(160deg,#09253b,#081522)}
.project-featured .project-media{min-height:347px}.project-photo{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.85) contrast(1.14);opacity:.65;transition:transform .9s var(--ease)}.project-card:hover .project-photo{transform:scale(1.045)}.project-media-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,13,23,.81),transparent 54%),linear-gradient(105deg,rgba(3,13,25,.26),rgba(9,29,48,.2));pointer-events:none}
.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 96%,rgba(94,205,239,.11) 100%),linear-gradient(90deg,transparent 96%,rgba(94,205,239,.09) 100%);background-size:33px 33px;mask-image:linear-gradient(105deg,#000,transparent 85%);pointer-events:none}
.project-diagram{position:absolute;top:50%;left:52%;width:330px;height:270px;transform:translate(-50%,-43%) rotate(-6deg);opacity:.93;filter:drop-shadow(0 4px 17px rgba(26,193,230,.35));transition:transform .75s var(--ease);pointer-events:none}.project-card:hover .project-diagram{transform:translate(-50%,-46%) rotate(0)}.project-diagram-small{width:250px;height:175px;left:73%;top:52%;opacity:.88}
.project-media-top{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#d0e7f0;font-size:9px;letter-spacing:1.25px;font-weight:750;z-index:1}.project-media-top span:last-child{color:#9fd5e5;font-size:8px;text-align:right}
.ai-visual-label{position:absolute;right:15px;bottom:13px;z-index:3;color:#afeaf2;font-size:8px;font-weight:750;letter-spacing:.65px;padding:5px 7px;border:1px solid rgba(99,205,224,.32);border-radius:4px;background:rgba(1,16,28,.65)}
.media-corner{position:absolute;width:16px;height:16px;border-color:rgba(103,237,242,.8);z-index:2}.media-corner-a{left:14px;bottom:14px;border-left:2px solid;border-bottom:2px solid}.media-corner-b{right:14px;bottom:14px;border-right:2px solid;border-bottom:2px solid}
.project-info{padding:24px 26px 23px;display:flex;flex-direction:column;flex:1}.project-featured .project-info{padding:32px 32px 30px}.project-caption{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.category-pill{display:inline-flex;align-items:center;min-height:24px;padding:5px 9px;border:1px solid rgba(75,194,209,.27);color:var(--accent);background:var(--accent-wash);border-radius:5px;font-size:10px;font-weight:750;letter-spacing:.3px}.project-status{font-size:10px;color:var(--text-soft);display:inline-flex;align-items:center;gap:7px}.project-status i{height:5px;width:5px;border-radius:50%;background:#82dac3;box-shadow:0 0 8px rgba(112,239,204,.45)}
.project-info h3{font-size:clamp(19px,2vw,28px);margin:19px 0 7px;letter-spacing:-.65px;line-height:1.35}.project-subtitle{color:var(--accent);font-size:12px;line-height:1.7;font-weight:600;margin:0 0 9px}.project-description{color:var(--text-muted);font-size:12px;line-height:1.85;margin:0 0 21px}.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.project-tags span{font-size:10px;color:var(--text-muted);padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:rgba(98,176,211,.04);letter-spacing:.15px}.project-open{padding:0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--accent);display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:23px;padding-top:17px;font-size:12px;font-weight:760;letter-spacing:.4px;text-align:left}.project-open svg{height:17px;width:17px;transition:transform .2s}.project-open:hover svg{transform:translate(3px,-3px)}
.project-footnote{margin:19px 0 0;display:flex;align-items:center;gap:11px;color:var(--text-soft);font-size:11px;line-height:1.7}.project-footnote svg{width:14px;height:14px;color:var(--accent)}

/* Experience */
.experience-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.68fr);gap:18px;align-items:start}.timeline{position:relative;padding-left:42px}.timeline::before{content:"";position:absolute;left:14px;top:18px;bottom:40px;width:1px;background:linear-gradient(var(--accent),var(--line),transparent)}.timeline-entry{position:relative;margin-bottom:15px}.timeline-entry:last-child{margin-bottom:0}.timeline-point{position:absolute;left:-42px;top:19px;height:30px;width:30px;display:grid;place-items:center;color:var(--accent);border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);box-shadow:0 0 0 6px var(--bg)}.timeline-point svg{height:15px;width:15px}.timeline-content{padding:23px 26px}.timeline-label{display:flex;justify-content:space-between;gap:10px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.65px}.timeline-label span:last-child{color:var(--text-soft)}.timeline-content h3{font-size:17px;line-height:1.45;margin:13px 0 5px}.timeline-subtitle{font-size:12px;font-weight:650;color:var(--text-muted)}.timeline-content p{font-size:11px;color:var(--text-soft);line-height:1.85;margin:12px 0 0}
.impact-card{padding:30px;min-height:380px;background:radial-gradient(ellipse at 70% 30%,rgba(21,98,124,.16),transparent 60%),var(--surface)}.impact-number{font-size:clamp(60px,6vw,100px);font-weight:860;letter-spacing:-5px;line-height:1.1;margin-top:35px;color:var(--text)}.impact-number span{font-size:35px;color:var(--accent);vertical-align:top;position:relative;top:10px;margin-left:3px}.impact-name{font-size:14px;font-weight:750;margin-top:3px}.impact-meter{height:5px;background:var(--surface-2);border-radius:5px;margin-top:30px;overflow:hidden}.impact-meter span{display:block;width:84%;height:100%;border-radius:5px;background:linear-gradient(90deg,#3cbfd5,#83e5f3);box-shadow:0 0 15px rgba(63,208,224,.47)}.impact-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.impact-split>div{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}.impact-split>div:last-child{border:0}.impact-split strong{font-size:28px;letter-spacing:-1px}.impact-split span{color:var(--text-soft);font-size:11px}.impact-card>p{font-size:11px;line-height:1.75;color:var(--text-soft);margin:29px 0 0}

/* Skills */
.skills-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.72fr);gap:16px}.skills-card{min-height:390px;display:grid;grid-template-columns:185px minmax(0,1fr)}.skills-tabs{display:flex;flex-direction:column;gap:8px;padding:23px 12px;background:rgba(19,57,78,.08);border-right:1px solid var(--line)}.skill-tab{position:relative;display:flex;align-items:center;gap:10px;min-height:57px;border:1px solid transparent;border-radius:8px;padding:12px 12px;color:var(--text-muted);background:transparent;text-align:left;font-size:11px;font-weight:700;transition:.22s}.skill-tab svg{width:17px;height:17px;flex-shrink:0}.skill-tab span{line-height:1.45}.skill-tab em{margin-left:auto;font-style:normal;font-size:9px;color:var(--text-soft)}.skill-tab:hover{background:var(--accent-wash);color:var(--text)}.skill-tab.active{color:var(--accent);border-color:var(--line-strong);background:var(--accent-wash)}
.skill-detail{padding:27px 28px;min-width:0}.skill-detail-top{display:flex;align-items:center;gap:12px}.skill-icon{height:42px;width:42px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:10px;color:var(--accent);background:var(--accent-wash)}.skill-detail-top>span{color:var(--text-soft);font-size:9px;letter-spacing:1.3px;word-break:break-all}.skill-detail h3{margin:22px 0 7px;font-size:24px}.skill-detail>p{color:var(--text-muted);font-size:12px;line-height:1.9;margin:0 0 24px}.skill-chips{display:flex;flex-wrap:wrap;gap:10px}.skill-chips span{border:1px solid var(--line-strong);background:linear-gradient(135deg,var(--surface-2),var(--surface));color:var(--text);border-radius:7px;padding:10px 12px;font-size:11px;transition:background .2s,border-color .2s,transform .2s}.skill-chips span:hover{transform:translateY(-2px);border-color:var(--accent)}.skill-footnote{margin-top:26px;display:flex;align-items:flex-start;gap:9px;color:var(--text-soft);font-size:10px;line-height:1.65}.skill-footnote svg{width:14px;height:14px;color:var(--accent)}
.workflow-card{padding:29px 24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:390px}.workflow-ring{height:119px;width:119px;border:1px dashed var(--line-strong);border-radius:50%;display:grid;place-items:center;margin:0 auto 17px;position:relative;box-shadow:0 0 60px rgba(38,167,196,.065)}.workflow-ring::before{content:"";position:absolute;inset:13px;border:1px solid var(--line-strong);border-radius:50%}.workflow-ring::after{content:"";position:absolute;top:4px;left:29px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.workflow-ring-inner{height:49px;width:49px;border-radius:15px;background:var(--accent-wash);display:grid;place-items:center;color:var(--accent)}.workflow-ring-inner svg{height:25px;width:25px}.workflow-meta{display:flex;justify-content:space-between;width:100%;font-size:9px;color:var(--accent);font-weight:770;letter-spacing:1.4px}.workflow-meta span{color:var(--text-soft)}.workflow-card h3{font-size:20px;line-height:1.45;margin:12px 0}.workflow-steps{display:flex;align-items:center;gap:5px;max-width:100%;flex-wrap:wrap}.workflow-steps span{font-size:9px;letter-spacing:.7px;color:var(--text-muted);font-weight:770}.workflow-steps i{width:7px;height:1px;background:var(--accent)}.workflow-card p{font-size:11px;color:var(--text-soft);line-height:1.75;margin:13px 0 0}

/* Education */
.education-card{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:380px}.education-left{padding:34px;background:linear-gradient(145deg,rgba(43,136,164,.10),transparent);border-right:1px solid var(--line)}.education-tag,.future-kicker{color:var(--accent);font-size:10px;letter-spacing:1.7px;font-weight:750}.school-emblem{margin-top:22px;height:56px;width:56px;border:1px solid var(--line-strong);border-radius:12px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center}.school-emblem svg{height:32px;width:32px}.education-left h3{font-size:25px;letter-spacing:-.7px;margin:17px 0 5px}.education-left>p{font-size:12px;line-height:1.75;color:var(--text-muted);margin:0 0 10px}.edu-period{color:var(--text-soft);font-size:11px}.edu-ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:27px;padding-top:20px}.edu-ranks>div{border-right:1px solid var(--line);padding-left:13px}.edu-ranks>div:first-child{padding-left:0}.edu-ranks>div:last-child{border-right:0}.edu-ranks small{display:block;color:var(--text-soft);font-size:9px;letter-spacing:1.1px}.edu-ranks strong{display:block;font-size:19px;white-space:nowrap;margin-top:8px;font-variant-numeric:tabular-nums}
.education-right{padding:34px 36px;min-width:0}.future-kicker{display:flex;align-items:center;gap:13px}.education-right>h3{font-size:clamp(19px,2vw,27px);line-height:1.5;letter-spacing:-.6px;margin:19px 0 11px;max-width:730px}.education-right>p{color:var(--text-muted);font-size:12px;line-height:1.95;margin:0 0 22px;max-width:760px}.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.focus-item{border:1px solid var(--line);padding:16px 14px;border-radius:9px;background:var(--accent-wash);min-height:141px}.focus-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent);font-size:10px;font-weight:750}.focus-top svg{height:20px;width:20px}.focus-item h4{font-size:13px;line-height:1.5;margin:14px 0 5px}.focus-item p{font-size:10px;color:var(--text-soft);line-height:1.65;margin:0}

/* Contact & footer */
.contact-section{margin:120px var(--content-pad) 0;position:relative;isolation:isolate;border:1px solid var(--line-strong);border-radius:22px;min-height:470px;overflow:hidden;background:linear-gradient(120deg,rgba(7,27,44,.96),rgba(5,20,33,.94));box-shadow:0 25px 80px rgba(0,0,0,.2)}
.contact-section::before{content:"";inset:0;position:absolute;z-index:-2;background:radial-gradient(ellipse at 90% 0,rgba(31,184,199,.21),transparent 48%),radial-gradient(ellipse at 30% 100%,rgba(13,73,121,.21),transparent 58%)}.contact-graphics{position:absolute;right:-115px;top:-115px;width:500px;height:500px;border:1px solid rgba(90,226,241,.21);border-radius:50%;z-index:-1;box-shadow:0 0 0 49px rgba(74,191,213,.025),0 0 0 100px rgba(74,191,213,.025),inset 0 0 75px rgba(62,204,223,.05)}.contact-graphics::after{content:"";position:absolute;inset:80px;border:1px dashed rgba(90,226,241,.28);border-radius:50%}
.contact-inner{position:relative;z-index:1;padding:66px clamp(28px,6vw,85px);max-width:760px}.contact-kicker{display:flex;align-items:center;gap:13px;color:#7cecf0;font-size:11px;letter-spacing:1.4px;font-weight:760}.contact-inner h2{font-size:clamp(36px,4.9vw,66px);letter-spacing:-2px;line-height:1.28;margin:24px 0 19px;color:#f5fbff}.contact-inner p{max-width:510px;color:#adc8d7;line-height:1.95;font-size:13px}.contact-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.contact-section .button-outline{border-color:rgba(148,199,224,.34);color:#f6fcff}.contact-socials{display:flex;gap:18px;flex-wrap:wrap;margin-top:35px}.social-link{display:inline-flex;align-items:center;gap:8px;color:#afd0df;font-size:11px;font-weight:720}.social-link svg{width:16px;height:16px}.social-link svg:last-child{width:11px;height:11px}.social-link:not(.is-unset):hover{color:#73f0f2}.social-link.is-unset{opacity:.47;cursor:default}.contact-corner{position:absolute;right:22px;bottom:21px;color:#6d9cac;font-size:9px;letter-spacing:1.3px}.contact-corner span{color:var(--accent)}
.footer{padding:30px var(--content-pad) 42px;margin-top:35px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--text-soft);font-size:10px;letter-spacing:.45px}.footer a{color:var(--accent);font-weight:800}.footer a:hover{text-decoration:underline}.footer-online{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.1px}

/* Project detail dialog */
.modal,.command-dialog{border:1px solid var(--line-strong);padding:0;max-width:min(94vw,740px);max-height:min(90vh,960px);background:var(--surface);color:var(--text);border-radius:18px;box-shadow:0 35px 90px rgba(0,0,0,.55);overflow:auto}
.modal::backdrop,.command-dialog::backdrop{background:rgba(0,7,16,.79);backdrop-filter:blur(7px)}
.modal-shell{min-width:0}.modal-top{padding:16px 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:var(--accent);font-size:10px;letter-spacing:1.3px;font-weight:750}.modal-close{height:33px;width:33px}
.modal-hero{padding:27px 33px 24px;position:relative;overflow:hidden;isolation:isolate;min-height:205px}.modal-hero-visual{position:absolute;inset:0;z-index:-1;opacity:.28;mask-image:linear-gradient(90deg,transparent 15%,#000 100%)}.modal-hero-visual img{width:100%;height:100%;object-fit:cover}.modal-hero::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg)}.modal-hero h2{font-size:clamp(25px,3vw,36px);line-height:1.35;letter-spacing:-.8px;margin:18px 0 8px}.modal-hero p{color:var(--text-muted);font-size:13px;margin:0;line-height:1.7}.modal-body{padding:28px 33px 35px}.modal-summary{font-size:14px;color:var(--text-muted);line-height:1.95;margin-bottom:24px;border-left:2px solid var(--accent);padding-left:18px}.modal-section{padding:20px 0;border-top:1px solid var(--line)}.modal-section h3{margin:0 0 14px;display:flex;align-items:center;gap:10px;font-size:14px}.modal-section h3 svg{width:18px;height:18px;color:var(--accent)}.modal-section p,.modal-section li{font-size:12px;color:var(--text-muted);line-height:1.9;margin:0}.modal-section ul{margin:0;padding-left:19px}.modal-section li{margin:7px 0}.modal-last{border-bottom:1px solid var(--line);margin-bottom:22px}
.command-dialog{width:min(94vw,600px);max-height:min(75vh,750px);border-radius:15px;overflow:hidden}.command-head{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding:18px 18px}.command-head>svg{color:var(--accent);height:20px;width:20px}.command-head input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font-size:14px}.command-head input::placeholder{color:var(--text-soft)}.command-esc{font-size:10px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);color:var(--text-muted);padding:6px 8px}.command-results{padding:11px;max-height:58vh;overflow:auto}.command-item{display:flex;align-items:center;gap:13px;width:100%;padding:14px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-muted);text-align:left}.command-item svg{height:17px;width:17px}.command-item>span{font-size:13px;font-weight:700;color:var(--text)}.command-item small{margin-left:auto;font-size:10px}.command-item svg:last-child{width:14px;height:14px}.command-item:hover,.command-item.selected{background:var(--accent-wash);border-color:var(--line-strong)}.command-item.selected>svg{color:var(--accent)}.command-empty{padding:14px;color:var(--text-soft);font-size:13px}.command-footer{border-top:1px solid var(--line);display:flex;gap:22px;padding:12px 20px;color:var(--text-soft);font-size:10px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,35px);opacity:0;z-index:110;pointer-events:none;max-width:min(90vw,600px);background:#102d3b;border:1px solid rgba(98,227,237,.47);color:#e8fbfd;padding:13px 18px;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.3);font-size:12px;line-height:1.7;text-align:center;transition:opacity .3s,transform .3s}.toast.visible{opacity:1;transform:translate(-50%,0)}
body.modal-open,body.sidebar-open{overflow:hidden}.noscript{position:fixed;bottom:0;left:0;right:0;padding:14px;background:#5b3512;color:white;font-size:13px;z-index:99}.editor-helper{position:fixed;bottom:17px;left:50%;transform:translateX(-50%);z-index:80;max-width:min(95vw,660px);padding:10px 12px;background:rgba(15,45,61,.95);color:#e9f7fb;border:1px solid rgba(95,214,226,.42);border-radius:10px;display:flex;align-items:center;gap:11px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:11px}.editor-helper button{padding:7px 10px;border-radius:6px;border:1px solid rgba(95,214,226,.6);background:transparent;color:#9bf1f2;white-space:nowrap}.editor-helper>a{font-size:20px;margin-left:6px}

/* Light-theme overrides for photographic dark sections */
html[data-theme="light"] .hero{background:#eaf3f6}html[data-theme="light"] .hero-art{opacity:.22;filter:saturate(.8)}html[data-theme="light"] .hero h1{text-shadow:none}html[data-theme="light"] .button-outline{background:rgba(236,245,248,.6)}html[data-theme="light"] .portrait-data{background:rgba(9,39,56,.87)}html[data-theme="light"] .project-media{background:#08293d}html[data-theme="light"] .contact-section{background:linear-gradient(120deg,#092335,#113c51)}

/* Responsive */
@media(max-width:1320px){
  :root{--sidebar-width:212px;--content-pad:clamp(22px,3vw,45px)}
  .sidebar{padding-left:13px;padding-right:13px}.hero-layout{grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr)}.hero h1{font-size:clamp(55px,6vw,90px)}.portrait-frame{width:230px;height:277px}.orbit-outer{width:320px;height:320px}.orbit-inner{width:280px;height:280px}.orbit-dot{left:calc(50% + 145px)}
  .about-grid{grid-template-columns:minmax(0,1.3fr) minmax(270px,.8fr)}.skills-layout{grid-template-columns:minmax(0,1.35fr) minmax(235px,.75fr)}.workflow-card{padding:25px 21px}.education-card{grid-template-columns:305px minmax(0,1fr)}.education-left,.education-right{padding:28px}
}
@media(max-width:1080px){
  .hero-layout{grid-template-columns:minmax(0,1.18fr) minmax(255px,.72fr);min-height:610px;padding-top:66px;padding-bottom:70px}.hero{min-height:610px}.hero h1{font-size:66px;letter-spacing:-3px}.hero-tagline{font-size:27px}.hero-portrait-side{height:350px}.portrait-frame{width:204px;height:245px}.orbit-outer{width:280px;height:280px}.orbit-inner{width:250px;height:250px}.portrait-data-top{left:-22px;top:9px}.portrait-data-top span{display:none}.portrait-data-bottom{right:-15px;bottom:14px}.hero-coordinate{right:-4px}
  .metric{padding:20px 17px}.metric-value{font-size:31px}.metric-note{font-size:9px}.about-card{padding:29px}.project-featured{grid-template-columns:1fr 1fr}.education-card{grid-template-columns:1fr}.education-left{border-right:0;border-bottom:1px solid var(--line)}.education-right{padding:31px}.edu-ranks{max-width:430px}.contact-section{margin-top:95px}
}
@media(max-width:920px){
  :root{--sidebar-width:0px;--topbar-height:70px;--content-pad:clamp(20px,5vw,46px)}
  .sidebar{width:255px;transform:translateX(-105%);box-shadow:15px 0 60px rgba(0,0,0,.35);padding:28px 16px 22px}.sidebar.open{transform:translateX(0)}.mobile-backdrop{position:fixed;inset:0;z-index:55;background:rgba(0,8,19,.57);backdrop-filter:blur(3px)}
  .mobile-menu{display:grid}.brand{margin-bottom:46px}.topbar{padding:0 var(--content-pad)}.hero-layout{grid-template-columns:minmax(0,1.15fr) minmax(230px,.75fr)}.hero h1{font-size:clamp(58px,8vw,80px)}
  .metrics{grid-template-columns:repeat(4,1fr)}.metric-value{font-size:29px}.about-grid{grid-template-columns:1.25fr .8fr}.about-card h3{font-size:26px}.skills-layout{grid-template-columns:1fr}.workflow-card{min-height:230px;display:grid;grid-template-columns:130px 1fr;column-gap:24px;align-items:start}.workflow-ring{grid-row:1/span 4;align-self:center}.workflow-card h3{margin:6px 0}.workflow-card p{margin:0}
}
@media(max-width:720px){
  .search-button{min-width:37px;width:37px;justify-content:center;padding:0}.search-button span,.search-button kbd{display:none}.top-right{gap:8px}.breadcrumb{font-size:10px}.hero{min-height:unset}.hero-layout{display:flex;flex-direction:column;align-items:stretch;gap:15px;padding-top:57px;padding-bottom:86px}.hero-copy{max-width:640px}.hero h1{font-size:clamp(60px,12vw,86px)}.hero-tagline{font-size:clamp(25px,5vw,35px)}.hero-lead{max-width:640px}.hero-portrait-side{height:330px;margin-top:24px;align-self:center;width:min(100%,410px)}.portrait-frame{width:220px;height:252px}.orbit-outer{width:292px;height:292px}.orbit-inner{width:262px;height:262px}.portrait-data-top{left:0}.portrait-data-bottom{right:0}.hero-coordinate{right:1%}.hero-english{margin-bottom:29px}.hero-micro{margin-top:24px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:17px}.metric{min-height:146px}.metric-value{font-size:34px}.content-section{padding-top:80px}.section-heading{align-items:flex-start}.section-heading>p{display:none}.section-heading h2{font-size:31px}.about-grid{grid-template-columns:1fr}.principles{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.principle{padding:19px}.principle h3{font-size:16px}.principle-arrow{right:10px;top:15px}.principle p{font-size:10px}
  .projects-grid{grid-template-columns:1fr}.project-featured{grid-column:span 1;display:flex;min-height:0}.project-featured .project-media{min-height:246px}.project-info,.project-featured .project-info{padding:24px}.project-card{min-height:0}.experience-layout{grid-template-columns:1fr}.impact-card{min-height:0;padding:29px}.impact-number{margin-top:12px}.impact-card>p{margin-top:19px}
  .education-right{padding:28px}.contact-section{margin-left:var(--content-pad);margin-right:var(--content-pad);min-height:0}.contact-inner{padding:53px 28px 72px}.contact-graphics{right:-270px}.contact-corner{bottom:16px;left:28px;right:auto;font-size:8px}.footer-online{display:none}
}
@media(max-width:510px){
  :root{--content-pad:18px}.topbar{height:64px}.hero-layout{padding-top:44px}.hero-hi{font-size:10px}.hero h1{font-size:clamp(55px,13vw,74px);letter-spacing:-3px}.hero-english{font-size:9px;letter-spacing:1px}.hero-tagline{font-size:27px}.hero-role{font-size:12px}.hero-lead{font-size:12px}.hero-actions{gap:9px}.button{font-size:11px;padding:0 13px;min-height:44px}.hero-micro{font-size:9px;gap:9px}.hero-portrait-side{width:100%}.hero-coordinate{display:none}
  .metric{padding:18px 14px;min-height:148px}.metric-value{font-size:30px}.metric-top span{font-size:7px}.metric-label{font-size:11px}.metric-note{font-size:9px}.section-heading h2{font-size:28px}.section-heading h2 span{font-size:11px}.about-card{padding:24px}.about-card h3{font-size:23px}.about-prose p{font-size:12px}.principles{grid-template-columns:1fr}.principle{min-height:100px;padding:16px 21px}.principle h3{margin:8px 0 3px}.principle p{font-size:11px}.filter-bar{gap:7px}.filter-button{font-size:10px;padding:9px 10px}
  .project-media{min-height:199px}.project-featured .project-media{min-height:230px}.project-info h3{font-size:22px}.timeline{padding-left:35px}.timeline::before{left:12px}.timeline-point{left:-35px;width:26px;height:26px}.timeline-content{padding:20px}.timeline-content h3{font-size:15px}.timeline-label{font-size:9px}.impact-number{font-size:65px}
  .skills-card{grid-template-columns:1fr}.skills-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;border-right:0;border-bottom:1px solid var(--line)}.skill-tab{padding:10px;min-height:49px}.skill-tab span{font-size:10px}.skill-tab em{display:none}.skill-detail{padding:23px}.workflow-card{display:flex;min-height:0}.workflow-ring{margin:0 auto 20px}.workflow-meta{margin-bottom:10px}
  .focus-grid{grid-template-columns:1fr}.focus-item{min-height:0;padding:16px}.focus-item h4{margin:7px 0 3px}.education-left,.education-right{padding:25px}.edu-ranks strong{font-size:16px}.education-left h3{font-size:23px}.education-right>h3{font-size:21px}.contact-inner{padding:42px 22px 72px}.contact-inner h2{font-size:39px}.contact-inner p{font-size:12px}.contact-buttons{gap:9px}.contact-socials{gap:13px}.footer{align-items:flex-start;line-height:1.8}.editor-helper{flex-wrap:wrap;font-size:10px}.modal-hero,.modal-body{padding-left:23px;padding-right:23px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}

/* Print-to-PDF: a clean, readable document rather than a screenshot. */
.print-skills{display:none}
@media print{
  :root{--text:#142432;--text-muted:#395064;--text-soft:#546d7c;--line:rgba(0,0,0,.18);--surface:#fff;--surface-2:#fff;--shadow:none;--accent:#087e8d;--bg:#fff}
  @page{size:A4;margin:14mm}
  body{background:white;color:#152838!important;font-size:10pt;overflow:visible}
  body::before,.ambient,.sidebar,.topbar,.hero-art,.hero-noise,.hero-portrait-side,.hero-scroll,.hero-actions,.hero-micro,.filter-bar,.project-footnote,.project-media,.project-open,.contact-graphics,.contact-corner,.contact-buttons,.contact-socials,.footer,.workflow-ring,.workflow-meta,.workflow-steps,.workflow-card,.impact-meter,.modal,.command-dialog,.toast,.editor-helper{display:none!important}
  .page-shell{margin:0}.hero{min-height:0;border:0;background:white}.hero-layout{padding:0 0 15px;display:block;min-height:0}.hero h1{font-size:35pt;line-height:1.1;color:#152838}.hero-tagline{font-size:17pt;color:#152838}.hero-role,.hero-english,.eyebrow{color:#087e8d}.hero-lead{max-width:100%;color:#395064;font-size:10pt}.hero-english{margin:6px 0 16px}.hero-hi{margin:0}
  .metrics{padding:10px 0;grid-template-columns:repeat(4,1fr);gap:7px}.metric{padding:10px!important;min-height:0;border:1px solid #d0dade}.metric-value{font-size:16pt;margin-top:6px}.metric-label{font-size:9pt}.metric-note{font-size:8pt}
  .content-section{padding:20px 0 0;break-inside:avoid}.section-heading{margin-bottom:13px}.section-heading h2{font-size:18pt}.section-kicker{font-size:8pt;margin-bottom:5px}.section-heading>p{display:none}.about-grid{display:block}.about-card{padding:16px;border:1px solid #d0dade}.about-card h3{font-size:15pt;margin:10px 0}.about-prose p{font-size:9pt;line-height:1.6}.principles{display:none}.about-signature{margin-top:12px;padding-top:10px}.signature-icon{font-size:14pt}
  .projects-grid{grid-template-columns:1fr 1fr;gap:8px}.project-featured{grid-column:span 2;display:block;min-height:0}.project-card{border:1px solid #d0dade;break-inside:avoid}.project-info,.project-featured .project-info{padding:13px}.project-info h3{font-size:13pt;margin:7px 0}.project-subtitle,.project-description{font-size:9pt;margin:4px 0}.project-tags{margin-top:8px}.project-tags span{font-size:7pt;padding:3px 5px}
  .experience-layout{display:block}.timeline{padding-left:30px}.timeline-content{padding:10px}.timeline-entry{break-inside:avoid;margin-bottom:8px}.timeline-content h3{font-size:11pt;margin:5px 0}.timeline-content p{margin:4px 0}.impact-card{display:none}.skills-layout{display:block}.skills-card{min-height:0;grid-template-columns:155px 1fr}.skills-tabs{padding:5px}.skill-tab{min-height:34px}.skill-detail{padding:12px}.skill-chips span{padding:4px 6px;font-size:8pt}.skill-detail h3{margin:10px 0}.skill-detail>p{margin:5px 0}.education-card{grid-template-columns:1fr 1fr;min-height:0}.education-left,.education-right{padding:14px;border:0}.school-emblem{display:none}.education-left h3{margin:8px 0}.focus-grid{grid-template-columns:1fr}.focus-item{min-height:0;padding:7px}.focus-top,.focus-item p{display:none}.focus-item h4{margin:0}.contact-section{margin:20px 0 0;min-height:0;border:1px solid #d0dade;border-radius:0;background:#fff!important}.contact-inner{padding:12px 15px}.contact-inner h2{font-size:16pt;color:#152838;margin:5px 0}.contact-inner p{font-size:9pt;color:#395064}.contact-kicker{color:#087e8d}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.glass-card{box-shadow:none!important;background:white!important;break-inside:avoid}.glass-card::before{display:none}
}
@media(max-width:510px){
  .breadcrumb{max-width:106px;white-space:nowrap;overflow:hidden}.breadcrumb .crumb-dot,.breadcrumb .slash,.breadcrumb [data-i18n="topPortfolio"]{display:none}.breadcrumb #breadcrumb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}
}
@media(max-width:375px){.breadcrumb{display:none}.hero-english{font-size:8px}.hero h1{font-size:55px}}

/* ========================================================================
   V2 / Evidence-driven resume sections — FC / TEL / GS, field notes,
   awards and graded coursework. Images from source are identified as photos.
   ======================================================================== */
.sidebar{padding-top:24px}
.brand{margin-bottom:35px}
.side-nav{gap:4px}
.nav-link{min-height:45px;padding-top:10px;padding-bottom:10px}
.sidebar-bottom p{margin:11px 0}
#hero-name{letter-spacing:-2px}
#hero-en-name{letter-spacing:1.45px}
.project-media-maker .project-photo,.project-media-fpv .project-photo,.project-media-drone .project-photo{opacity:.95;filter:saturate(1) contrast(1.01)}
.project-media-maker .project-media-overlay,.project-media-fpv .project-media-overlay,.project-media-drone .project-media-overlay{background:linear-gradient(0deg,rgba(4,13,23,.68),transparent 42%)}
.project-media-maker::after,.project-media-fpv::after,.project-media-drone::after{opacity:.38}
.system-eyebrow{display:block;font-size:10px;font-weight:760;letter-spacing:2px;color:var(--accent)}
.system-deepdive{margin-top:42px;padding:33px 36px 23px;background:radial-gradient(ellipse at 95% 20%,rgba(27,175,206,.11),transparent 57%),linear-gradient(130deg,var(--surface),var(--surface-2))}
.deepdive-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:26px}.deepdive-head>div{max-width:780px}.deepdive-head h3{font-size:clamp(22px,2.25vw,31px);line-height:1.4;letter-spacing:-.8px;margin:11px 0 9px}.deepdive-head p{font-size:12px;color:var(--text-muted);line-height:1.9;margin:0}.system-version{border:1px solid var(--line-strong);border-radius:7px;padding:9px 11px;white-space:nowrap;font-size:10px;font-weight:750;letter-spacing:1px;color:var(--accent)}
.arch-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:20px}.arch-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:10px;position:relative}.arch-nodes::before{content:"";position:absolute;top:50%;left:10%;right:10%;height:1px;background:var(--accent);opacity:.19;z-index:0}.arch-node{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;min-height:188px;padding:19px 15px 16px;border-radius:12px;border:1px solid var(--line-strong);color:var(--text);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 84%,transparent));box-shadow:0 14px 28px rgba(0,0,0,.04);transition:border-color .25s,background .25s,transform .25s}.arch-node:hover{transform:translateY(-3px);border-color:var(--accent)}.arch-node.active{border-color:var(--accent);background:linear-gradient(155deg,rgba(45,188,200,.20),var(--surface));box-shadow:0 0 25px var(--accent-glow)}.arch-num{font-size:9px;color:var(--text-soft);letter-spacing:1.7px;font-weight:800}.arch-node strong{font-size:38px;font-weight:850;letter-spacing:-2px;line-height:1;color:var(--text)}.arch-node.active strong{color:var(--accent)}.arch-node small{font-size:11px;font-weight:650;line-height:1.55;color:var(--text-muted);max-width:100%}.arch-node svg{width:15px;height:15px;position:absolute;right:16px;top:18px;color:var(--accent)}
.arch-detail{min-width:0;border:1px solid var(--line);border-radius:12px;padding:23px 24px;background:linear-gradient(160deg,var(--accent-wash),transparent 48%);display:flex;flex-direction:column;justify-content:center;min-height:188px}.arch-detail-kicker{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.5px}.arch-detail h4{font-size:22px;line-height:1.3;margin:12px 0 8px}.arch-detail>p{font-size:12px;line-height:1.88;color:var(--text-muted);margin:0 0 18px}.arch-hardware{display:flex;align-items:flex-start;gap:11px;padding-top:15px;border-top:1px solid var(--line);color:var(--text-soft);font-size:10px;line-height:1.7;word-break:break-word}.arch-hardware svg{height:17px;width:17px;color:var(--accent)}
.deepdive-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:9px;color:var(--text-soft);font-weight:720;letter-spacing:1.15px;margin-top:21px;padding-top:17px;border-top:1px solid var(--line)}
.debug-header{margin:45px 0 19px}.debug-header>span{color:var(--accent);font-size:10px;font-weight:760;letter-spacing:1.7px}.debug-header h3{font-size:24px;letter-spacing:-.6px;line-height:1.45;margin:10px 0 6px}.debug-header p{font-size:12px;color:var(--text-muted);line-height:1.8;margin:0}.debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.debug-case{min-width:0}.debug-case>summary{list-style:none;position:relative;padding:25px 26px 29px;cursor:pointer;min-height:162px}.debug-case>summary::-webkit-details-marker{display:none}.debug-code{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--accent);font-size:10px;font-weight:780;letter-spacing:1.1px}.debug-code small{color:var(--text-soft);font-size:9px;text-align:right}.debug-case h4{max-width:93%;font-size:18px;line-height:1.6;margin:17px 0 0}.debug-expand{position:absolute;right:22px;bottom:18px;color:var(--accent);transition:transform .2s}.debug-expand svg{width:18px;height:18px}.debug-case[open] .debug-expand{transform:rotate(90deg)}.debug-content{border-top:1px solid var(--line);padding:6px 26px 27px}.debug-content>div{border-bottom:1px dashed var(--line);padding:17px 0 14px}.debug-content>div:last-child{border:0;padding-bottom:0}.debug-content b{font-size:10px;font-weight:780;letter-spacing:1px;color:var(--accent)}.debug-content p{font-size:12px;line-height:1.85;color:var(--text-muted);margin:9px 0 0}
.awards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.award-card{min-width:0;min-height:244px;padding:25px 27px 19px;display:flex;flex-direction:column;align-items:flex-start}.award-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;color:var(--text-soft);font-size:11px;font-weight:760;font-variant-numeric:tabular-nums}.award-icon{height:34px;width:34px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);border:1px solid var(--line-strong);border-radius:9px}.award-icon svg{width:20px;height:20px}.award-badge{font-size:9px;font-weight:750;color:var(--accent);letter-spacing:1.1px;border:1px solid var(--line-strong);border-radius:6px;padding:6px 9px;margin-top:12px}.award-card h3{font-size:17px;line-height:1.48;letter-spacing:-.25px;margin:13px 0 6px}.award-card>p{font-size:12px;line-height:1.7;color:var(--text-muted);margin:0 0 16px}.award-foot{width:100%;border-top:1px solid var(--line);margin-top:auto;padding-top:13px;display:flex;align-items:flex-start;gap:8px;color:var(--text-soft);font-size:10px;line-height:1.6}.award-foot svg{width:15px;height:15px;color:var(--accent)}
.course-panel{padding:25px 29px 27px;margin-top:17px}.course-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.course-panel-heading h3{font-size:22px;margin:9px 0 0}.course-panel-heading>span{font-size:10px;color:var(--text-soft)}.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.course-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:70px;padding:13px 14px;border:1px solid var(--line);border-radius:9px;background:var(--accent-wash)}.course-item span{font-size:11px;line-height:1.5;color:var(--text-muted)}.course-item strong{font-size:20px;white-space:nowrap;color:var(--accent);font-variant-numeric:tabular-nums}
html[data-theme="light"] .system-deepdive{background:linear-gradient(130deg,#f9fcff,#e6f4f7)}
html[data-theme="light"] .arch-node.active{background:linear-gradient(155deg,rgba(45,188,200,.13),#fff)}
@media(max-width:1300px){.arch-layout{grid-template-columns:1fr}.arch-node{min-height:158px}.course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.arch-nodes{grid-template-columns:repeat(3,minmax(0,1fr))}.debug-grid,.awards-grid{grid-template-columns:1fr}.award-card{min-height:210px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.system-deepdive{padding:24px 19px 18px;margin-top:29px}.deepdive-head{flex-direction:column;margin-bottom:20px}.deepdive-head h3{font-size:22px}.arch-nodes{gap:6px}.arch-node{min-height:138px;padding:13px 9px 11px;gap:9px}.arch-node strong{font-size:27px}.arch-node small{font-size:9px}.arch-node svg{top:12px;right:8px;width:13px;height:13px}.arch-detail{padding:19px 17px}.arch-detail h4{font-size:18px}.deepdive-foot{font-size:8px}.debug-header{margin-top:31px}.debug-header h3{font-size:19px}.debug-case>summary{padding:20px 18px 23px;min-height:135px}.debug-case h4{font-size:16px}.debug-content{padding:5px 18px 20px}.award-card{padding:20px}.award-card h3{font-size:16px}.course-panel{padding:20px 18px}.course-panel-heading{flex-direction:column;align-items:flex-start}.course-panel-heading h3{font-size:19px}.course-item{gap:7px;padding:11px 10px}.course-item span{font-size:10px}.course-item strong{font-size:18px}}
@media(max-width:390px){.arch-node small{font-size:8px}.arch-node strong{font-size:24px}.course-grid{grid-template-columns:1fr}.course-item{min-height:48px}}
@media print{
  .system-deepdive,.debug-grid{display:none!important}
  .awards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .award-card{min-height:0;padding:11px;border-radius:0;break-inside:avoid}
  .award-badge{margin-top:5px}.award-card h3{font-size:10pt;margin:6px 0 3px}.award-card>p{font-size:8pt}.award-foot{font-size:7pt;padding-top:6px}
  .course-panel{padding:11px;margin-top:8px}.course-panel-heading{margin-bottom:8px}.course-grid{grid-template-columns:repeat(4,1fr);gap:5px}.course-item{min-height:38px;padding:6px}.course-item span{font-size:7pt}.course-item strong{font-size:9pt}
}

/* Calm portfolio layout; preserve the independent print-to-resume styles. */
@media screen {
  :root { --radius:14px; --topbar-height:72px; --content-pad:clamp(24px,4vw,64px); }
  html { scroll-padding-top:96px; }
  body::before,.ambient,.sidebar::after,.hero-art,.hero-noise,.hero::after,
  .orbit,.orbit-dot,.portrait-cross,.hero-coordinate,.hero-scroll,
  .glass-card::before,.metric::after,.media-corner,.project-media::after,
  .contact-graphics,.contact-section::before,.contact-corner { display:none; }

  .sidebar { background:var(--sidebar); padding:32px 18px 28px; }
  .brand { gap:12px; margin-bottom:48px; padding:0 8px; }
  .brand-icon { width:42px; height:42px; clip-path:none; border-radius:10px; border:0; background:var(--accent-wash); }
  .brand-icon span { font-size:17px; }
  .brand-icon i,.nav-link.is-active::before,.system-info,.sidebar-local { display:none; }
  .brand-copy strong { font-size:14px; letter-spacing:.4px; }
  .brand-copy small { font-size:8px; letter-spacing:.5px; }
  .sidebar-label { letter-spacing:1px; margin-bottom:16px; }
  .side-nav { gap:7px; }
  .nav-link { min-height:46px; gap:12px; }
  .nav-link.is-active { background:var(--accent-wash); border-color:transparent; }
  .nav-link b { opacity:.7; }
  .sidebar-bottom { border-top:1px solid var(--line); }
  .sidebar-bottom p { font-size:12px; margin:20px 0 0; }
  .topbar { background:color-mix(in srgb,var(--surface) 94%,transparent); }
  .crumb-dot { box-shadow:none; width:6px; height:6px; border-radius:50%; }
  .breadcrumb { letter-spacing:.7px; }
  .search-button,.icon-button { height:40px; }
  .icon-button { width:40px; }
  .language-switch button.selected { box-shadow:none; }

  .hero { background:var(--bg); min-height:0; }
  .hero-layout { max-width:1260px; min-height:590px; padding-top:72px; padding-bottom:72px; grid-template-columns:minmax(0,1fr) 300px; gap:48px; }
  .eyebrow { font-size:10px; letter-spacing:1.4px; margin-bottom:30px; white-space:normal; line-height:1.7; }
  .eyebrow-square { width:6px; height:6px; transform:none; box-shadow:none; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .eyebrow-line { display:none; }
  .hero-hi { letter-spacing:2.5px; font-size:11px; margin-bottom:12px; }
  .hero h1 { font-size:clamp(58px,5.8vw,88px); letter-spacing:-2px; text-shadow:none; }
  .hero-period { text-shadow:none; }
  .hero-english { font-size:11px; margin:14px 0 28px; line-height:1.9; }
  #hero-en-name { letter-spacing:.7px; }
  .hero-tagline { font-size:clamp(25px,2.5vw,34px); line-height:1.6; letter-spacing:-.7px; margin-bottom:14px; text-wrap:pretty; }
  .hero-role { font-size:13px; letter-spacing:.25px; line-height:1.8; margin-bottom:16px; }
  .hero-lead { font-size:14px; line-height:1.95; max-width:580px; }
  .hero-actions { gap:12px; margin-top:28px; }
  .button { min-height:48px; font-size:13px; border-radius:8px; }
  .button-primary { background:var(--accent); color:var(--bg-deep); box-shadow:none; }
  .button-primary:hover { background:var(--accent-deep); box-shadow:none; }
  .button-outline { background:var(--surface); }
  .hero-micro { margin-top:26px; letter-spacing:.4px; }
  .hero-micro .micro-divider { display:none; }
  .hero-portrait-side { height:auto; width:100%; display:flex; flex-direction:column; gap:16px; }
  .portrait-frame { width:240px; height:280px; clip-path:none; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); transform:none; box-shadow:var(--shadow); }
  .portrait-frame:hover { transform:none; }
  .portrait-frame img { background:var(--surface-2); }
  .portrait-frame::after { display:none; }
  .portrait-upload { right:14px; bottom:14px; background:var(--surface); color:var(--accent); border:1px solid var(--line); box-shadow:0 3px 12px rgba(36,53,47,.08); }
  .portrait-upload:hover { background:var(--accent-wash); }
  .portrait-data { position:static; padding:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; color:var(--text); transform:none; text-align:center; }
  .portrait-data-top { order:1; }
  .portrait-data-top small,.portrait-data-top span { display:none; }
  .portrait-data-top strong { font-size:11px; font-weight:650; letter-spacing:1.3px; margin:2px 0 0; }
  .portrait-data-bottom { order:2; margin-top:-8px; }
  .portrait-data-bottom small { max-width:240px; color:var(--text-soft); line-height:1.7; }
  .portrait-data-bottom .pulse { display:none; }

  .content-section,.metrics { max-width:1260px; }
  .content-section { padding-top:88px; }
  .section-heading { align-items:center; padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid var(--line); }
  .section-heading h2 { font-size:34px; letter-spacing:-.7px; line-height:1.4; }
  .section-heading h2 span { font-size:12px; letter-spacing:1px; margin-left:10px; }
  .section-kicker { font-size:10px; margin-bottom:12px; letter-spacing:1.2px; }
  .section-kicker span { padding:0; border:0; }
  .section-kicker i { width:18px; background:var(--line-strong); }
  .section-heading>p { max-width:210px; font-size:10px; line-height:1.8; letter-spacing:.8px; }
  .glass-card { background:var(--surface); box-shadow:var(--shadow); }
  .glass-card:hover { box-shadow:var(--shadow); }
  .metrics { gap:0; padding-top:32px; }
  .metric { background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; min-height:132px; padding:8px 24px; }
  .metric:first-child { padding-left:0; }
  .metric:last-child { border-right:0; }
  .metric-top svg { height:18px; width:18px; }
  .metric-top span { display:none; }
  .metric-value { margin-top:14px; font-size:32px; }
  .metric-label { font-size:13px; margin-top:10px; }
  .metric-note { font-size:11px; line-height:1.6; }
  .about-grid { grid-template-columns:minmax(0,1.5fr) minmax(230px,.7fr); gap:28px; }
  .about-card { padding:32px; }
  .about-card h3 { font-size:27px; letter-spacing:-.5px; }
  .about-prose p { font-size:14px; line-height:1.95; margin-bottom:18px; }
  .principles { gap:0; }
  .principle { padding:22px 8px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; min-height:0; }
  .principle:last-child { border-bottom:0; }
  .principle-arrow,.principle-number span { display:none; }
  .principle h3 { font-size:18px; margin:10px 0 7px; }
  .principle p { font-size:13px; line-height:1.8; }

  .filter-bar { margin-bottom:24px; gap:8px; }
  .filter-button { font-size:12px; padding:11px 16px; }
  .filter-button.active { border-color:var(--accent); }
  .projects-grid { gap:24px; }
  .project-featured { grid-column:auto; display:flex; min-height:0; }
  .project-media,.project-featured .project-media { min-height:0; height:240px; flex-shrink:0; }
  .project-card:hover { transform:translateY(-2px); }
  .project-info,.project-featured .project-info { padding:28px; }
  .project-info h3 { font-size:23px; line-height:1.55; margin-top:18px; }
  .project-subtitle { font-size:13px; line-height:1.8; }
  .project-description { font-size:14px; line-height:1.85; margin-bottom:22px; }
  .project-tags span { font-size:11px; padding:6px 9px; }
  .project-status { font-size:11px; line-height:1.7; }
  .project-status i { background:var(--accent); box-shadow:none; }
  .project-media-top { font-size:10px; color:#fff; }
  .project-media-top span:last-child { display:none; }
  .project-media-top span:first-child { padding:6px 9px; border-radius:5px; background:rgba(12,31,26,.65); }
  .ai-visual-label { color:#fff; background:rgba(12,31,26,.78); border:0; font-size:9px; }
  .system-deepdive { margin-top:36px; padding:32px; }
  .arch-layout { grid-template-columns:1fr; gap:20px; }
  .arch-node { min-height:145px; padding:20px; background:var(--surface); box-shadow:none; }
  .arch-node.active { background:var(--accent-wash); box-shadow:none; }
  .arch-node strong { font-size:32px; }
  .arch-node small { font-size:12px; }
  .arch-detail { background:var(--surface-2); padding:24px; }
  .deepdive-head p,.arch-detail>p,.debug-header p,.debug-content p { font-size:14px; line-height:1.85; }
  .debug-header { margin-top:40px; }
  .debug-grid { gap:24px; }
  .debug-case h4 { font-size:18px; }
  .deepdive-foot { letter-spacing:.5px; }
  .experience-layout,.skills-layout { gap:24px; }
  .timeline-content { padding:26px; }
  .timeline-content p,.impact-card>p,.workflow-card p { font-size:13px; line-height:1.85; color:var(--text-muted); }
  .timeline-label { font-size:11px; flex-wrap:wrap; }
  .timeline-subtitle { font-size:13px; line-height:1.7; }
  .impact-card { background:var(--surface); }
  .impact-number { font-size:72px; letter-spacing:-3px; }
  .impact-meter span { background:var(--accent); box-shadow:none; }
  .awards-grid { gap:24px; }
  .award-card { padding:28px; min-height:240px; }
  .award-card>p,.skill-detail>p,.education-right>p,.education-left>p { font-size:14px; line-height:1.85; }
  .award-foot { font-size:11px; }
  .skills-card { grid-template-columns:180px minmax(0,1fr); }
  .skill-tab { font-size:12px; }
  .skill-detail { padding:28px; }
  .skill-chips span { font-size:12px; padding:9px 11px; background:var(--surface-2); }
  .workflow-ring { display:none; }
  .workflow-card { justify-content:center; min-height:0; }
  .workflow-card h3 { margin:20px 0; }
  .workflow-steps { gap:7px; }
  .workflow-steps span { font-size:10px; }
  .education-card { grid-template-columns:300px minmax(0,1fr); }
  .education-left { background:var(--surface-2); }
  .education-right { padding:32px; }
  .focus-item { background:var(--surface); }
  .focus-item p { font-size:12px; line-height:1.8; }
  .course-panel { padding:28px; margin-top:24px; }
  .course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .course-item { background:var(--surface-2); }
  .course-item span { font-size:12px; }

  .contact-section { max-width:calc(1260px - 2 * var(--content-pad)); margin:88px auto 0; width:calc(100% - 2 * var(--content-pad)); min-height:0; border-radius:16px; background:var(--surface); box-shadow:none; }
  .contact-inner { max-width:800px; padding:48px; }
  .contact-kicker { color:var(--accent); }
  .contact-inner h2 { font-size:42px; letter-spacing:-1px; color:var(--text); line-height:1.5; margin:18px 0; }
  .contact-inner p { color:var(--text-muted); font-size:14px; }
  .contact-section .button-outline { color:var(--text); border-color:var(--line-strong); }
  .social-link { color:var(--text-muted); }
  .social-link.is-unset { opacity:1; color:var(--text-soft); }
  .social-link:not(.is-unset):hover { color:var(--accent); }
  .footer { max-width:1260px; margin:40px auto 0; font-size:11px; }
  .footer-online { display:none; }
  .modal-section p,.modal-section li { font-size:14px; }
  html[data-theme="light"] .hero { background:var(--bg); }
  html[data-theme="light"] ::selection { background:var(--accent); color:#fff; }
  html[data-theme="light"] .skip-link { color:#fff; }
  html[data-theme="light"] .button-primary,html[data-theme="light"] .language-switch button.selected { color:#fff; }
  html[data-theme="dark"] .button-primary:hover { background:var(--accent-2); }
  html[data-theme="light"] .button-outline { background:var(--surface); }
  html[data-theme="light"] .portrait-data { background:transparent; }
  html[data-theme="light"] .project-photo { opacity:1; filter:saturate(.85); }
  html[data-theme="light"] .project-media-overlay { background:linear-gradient(0deg,rgba(12,31,26,.32),transparent 35%); }
  html[data-theme="light"] .contact-section,html[data-theme="light"] .system-deepdive { background:var(--surface); }
  html[data-theme="light"] .arch-node.active { background:var(--accent-wash); }
  html[data-theme="light"] .modal::backdrop,html[data-theme="light"] .command-dialog::backdrop { background:rgba(36,53,47,.35); backdrop-filter:blur(4px); }
}
@media screen and (max-width:1320px) {
  .hero-layout { grid-template-columns:minmax(0,1fr) 240px; gap:32px; }
  .portrait-frame { width:220px; height:260px; }
  .skills-layout { grid-template-columns:1fr; }
  .workflow-card { display:block; padding:28px; }
  .workflow-card h3 { margin:16px 0; }
  .workflow-card p { margin-top:16px; }
}
@media screen and (max-width:1080px) {
  .hero-layout { padding-top:56px; padding-bottom:56px; gap:24px; grid-template-columns:minmax(0,1fr) 200px; }
  .portrait-frame { width:190px; height:226px; }
  .hero-tagline { font-size:26px; }
  .about-grid,.experience-layout,.education-card { grid-template-columns:1fr; }
  .principles { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; gap:24px; }
  .principle { border:0; padding:8px 0; }
  .education-left { border-right:0; border-bottom:1px solid var(--line); }
  .project-info,.project-featured .project-info { padding:24px; }
  .project-info h3 { font-size:21px; }
  .project-media,.project-featured .project-media { height:210px; }
}
@media screen and (max-width:760px) {
  .hero-layout { display:flex; flex-direction:column; align-items:stretch; gap:32px; min-height:0; padding-top:48px; padding-bottom:44px; }
  .hero h1 { font-size:64px; }
  .hero-portrait-side { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:12px 18px; }
  .portrait-frame { width:88px; height:104px; border-radius:12px; }
  .portrait-data-top { flex:1; text-align:left; }
  .portrait-data-top strong { font-size:10px; letter-spacing:.8px; }
  .portrait-data-bottom { width:100%; margin-top:0; }
  .portrait-upload { width:30px; height:30px; right:5px; bottom:5px; }
  .portrait-upload svg { height:14px; width:14px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; padding-top:28px; }
  .metric { padding:0 18px; min-height:125px; }
  .metric:nth-child(odd) { padding-left:0; }
  .metric:nth-child(even) { border-right:0; }
  .metric-value { font-size:30px; }
  .content-section { padding-top:64px; }
  .section-heading { padding-bottom:18px; margin-bottom:24px; }
  .section-heading h2 { font-size:28px; }
  .section-heading>p { display:none; }
  .about-card { padding:24px; }
  .about-card h3 { font-size:24px; }
  .projects-grid,.debug-grid,.awards-grid { grid-template-columns:1fr; }
  .project-media,.project-featured .project-media { height:240px; }
  .project-info h3 { font-size:23px; }
  .system-deepdive { padding:24px; }
  .deepdive-head { flex-direction:column; }
  .deepdive-head h3 { font-size:24px; }
  .arch-nodes { gap:8px; }
  .arch-node { min-height:132px; padding:16px 10px; }
  .arch-node strong { font-size:28px; }
  .arch-node small { font-size:11px; }
  .arch-node svg { display:none; }
  .arch-detail { padding:20px; }
  .deepdive-foot span:last-child { display:none; }
  .contact-section { margin-top:64px; }
  .contact-inner { padding:32px 24px; }
  .contact-inner h2 { font-size:32px; }
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:510px) {
  :root { --topbar-height:64px; --content-pad:20px; }
  .topbar { height:var(--topbar-height); }
  .hero h1 { font-size:58px; }
  .hero-english { font-size:10px; margin-bottom:24px; }
  .hero-tagline { font-size:25px; }
  .hero-role { font-size:12px; }
  .hero-actions { gap:10px; }
  .button { padding:0 14px; font-size:12px; }
  .section-heading h2 span { font-size:11px; margin-left:4px; }
  .principles { grid-template-columns:1fr; gap:0; }
  .principle { border-bottom:1px solid var(--line); padding:18px 4px; }
  .principle h3 { margin-top:8px; }
  .project-media,.project-featured .project-media { height:220px; }
  .project-caption { align-items:flex-start; gap:8px; }
  .project-status { font-size:10px; }
  .skills-card { grid-template-columns:1fr; }
  .skills-tabs { display:grid; grid-template-columns:1fr 1fr; border-right:0; border-bottom:1px solid var(--line); padding:12px; }
  .skill-tab { padding:10px; min-height:56px; }
  .skill-tab span { font-size:11px; }
  .skill-detail,.education-left,.education-right,.course-panel { padding:24px; }
  .focus-grid { grid-template-columns:1fr; }
  .focus-item { min-height:0; padding:18px; }
  .course-panel-heading { align-items:flex-start; }
  .course-item { padding:12px; }
  .course-item span { font-size:11px; }
  .debug-code { letter-spacing:.3px; }
  .debug-case>summary { padding:22px; }
  .debug-content { padding:6px 22px 24px; }
  .contact-inner h2 { font-size:29px; }
  .footer { line-height:1.8; }
}
@media screen and (max-width:390px) {
  .course-grid { grid-template-columns:1fr; }
  .hero-micro { font-size:9px; gap:8px; }
  .section-heading h2 { font-size:26px; }
}