:root{color-scheme:light;font-family:"Noto Serif SC",Songti SC,STSong,Georgia,PingFang SC,Microsoft YaHei,serif;--ink: #18201d;--muted: #69736f;--paper: #f7f2e8;--line: rgba(24, 32, 29, .14);--green: #315f4d;--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 18% 8%,rgba(167,94,36,.11),transparent 32rem),radial-gradient(circle at 82% 12%,rgba(49,95,77,.11),transparent 30rem),linear-gradient(135deg,#fbf7ee 0%,var(--paper) 48%,#efe7d8 100%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(24,32,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,32,29,.04) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 76%);mask-image:linear-gradient(to bottom,black,transparent 76%)}.page-shell{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:clamp(36px,6vw,72px) 0 48px}.hero{padding-bottom:clamp(24px,4vw,42px)}.eyebrow{margin:0 0 14px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}h1,h2,p{margin-top:0}h1{max-width:none;margin-bottom:12px;font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.06em;font-weight:520;white-space:nowrap}.lead{max-width:760px;margin-bottom:0;color:#3e4844;font-size:clamp(14px,1.3vw,16px);line-height:1.55}.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:0}.tab-btn{font-family:var(--sans);font-size:14px;font-weight:500;padding:10px 20px;border:none;background:none;color:var(--muted);cursor:pointer;position:relative;transition:color .15s}.tab-btn:hover{color:var(--ink)}.tab-btn.active{color:var(--green)}.tab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--green)}.hidden{display:none}.project-list{display:grid;gap:0;border-top:1px solid var(--line)}.project-item{border-bottom:1px solid var(--line)}.project-header{display:grid;grid-template-columns:1fr auto;align-items:start;gap:clamp(18px,4vw,42px);padding:clamp(12px,2vw,18px) 0;cursor:pointer;-webkit-user-select:none;user-select:none}.project-header:hover h2{color:var(--green)}.project-header-left{min-width:0}.project-item h2{margin-bottom:0;font-size:clamp(17px,1.8vw,22px);line-height:1.2;letter-spacing:-.04em;font-weight:520;display:inline-flex;align-items:center;gap:6px}.project-link{color:var(--muted);display:inline-flex;align-items:center;transition:color .15s;flex-shrink:0}.project-link:hover{color:var(--green)}.summary{margin-bottom:0;color:var(--muted);font-size:clamp(13px,1.15vw,15px);line-height:1.55}.status-badge{flex-shrink:0;font-family:var(--sans);font-size:12px;font-weight:500;padding:3px 10px;border-radius:4px;white-space:nowrap;line-height:1.4}.status-available{color:#1a6b3c;background:#e6f5ec}.status-dev{color:#7a5a00;background:#fef7e0}.status-done{color:#2d5a8a;background:#e8f0fa}.status-archived{color:var(--muted);background:#18201d0f}.project-detail{padding:0 0 clamp(14px,2vw,20px);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.detail-grid{display:grid;grid-template-columns:auto 1fr;gap:6px clamp(12px,2vw,20px);margin:0;padding:clamp(10px,1.5vw,14px) clamp(14px,2vw,20px);background:#18201d06;border-radius:6px}.detail-grid dt{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.04em;white-space:nowrap}.detail-grid dd{margin:0;font-size:clamp(13px,1.1vw,14px);line-height:1.55}.tech-tags{display:flex;flex-wrap:wrap;gap:6px}.tech-tag{font-family:var(--sans);font-size:11px;padding:2px 8px;border-radius:3px;background:#315f4d14;color:var(--green);white-space:nowrap}@media(max-width:720px){.page-shell{width:min(100% - 28px,920px);padding-top:44px}h1{white-space:normal}.project-header{grid-template-columns:1fr;gap:8px}.project-item h2{white-space:normal}.detail-grid{grid-template-columns:1fr;gap:4px}.detail-grid dt{margin-top:6px}}
