:root{--bg:#fff;--text:#18181b;--muted:#6b7280;--border:#e5e7eb;--accent:#18181b;--max-width:620px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6}.wrap{max-width:var(--max-width);margin:0 auto;padding:0 24px}main{padding:96px 0 40px}section{margin-bottom:64px}.hero{flex-direction:column;align-items:flex-start;gap:20px;display:flex}.avatar{object-fit:cover;border:1px solid var(--border);border-radius:50%;width:128px;height:128px}h1{letter-spacing:-.02em;margin:0 0 8px;font-size:28px;font-weight:700}.tagline{color:var(--muted);max-width:480px;margin:0;font-size:16px}h2{text-transform:uppercase;letter-spacing:.04em;color:var(--text);border-bottom:2px solid var(--text);margin:0 0 24px;padding-bottom:12px;font-size:20px;font-weight:700}.timeline{flex-direction:column;gap:20px;display:flex}.item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:18px;display:flex}.item:last-child{border-bottom:none;padding-bottom:0}.item-main{flex-direction:column;gap:2px;display:flex}.item-title{font-size:15px;font-weight:600}.item-sub{color:var(--muted);font-size:14px}.item-detail{color:var(--muted);margin-top:4px;font-size:13px}.item-date{color:var(--muted);white-space:nowrap;flex-shrink:0;font-size:13px}.tags{flex-wrap:wrap;gap:8px;display:flex}.tag{border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 12px;font-size:13px}.cards{flex-direction:column;gap:16px;display:flex}.card{border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .15s,transform .15s,box-shadow .15s}.card:hover,.card-clickable:focus-within{border-color:var(--text);transform:translateY(-2px);box-shadow:0 6px 16px #18181b0f}.skill-group{letter-spacing:.04em;color:var(--text);align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600;display:flex}.skill-emoji{font-size:15px;line-height:1;transition:transform .15s}.skill-card:hover .skill-emoji{transform:scale(1.15)}.card-title{margin:0 0 8px;font-size:15px;font-weight:600}.card-desc{color:var(--muted);margin:0 0 12px;font-size:14px;line-height:1.6}.card-clickable{cursor:pointer;position:relative}.card-clickable:focus-within{outline:2px solid var(--text);outline-offset:2px}.card-link{overflow-wrap:anywhere;max-width:100%;color:var(--muted);align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;text-decoration:none;transition:color .15s;display:inline-flex}.card-link:after{content:"";border-radius:14px;position:absolute;inset:0}.card-clickable:hover .card-link,.card-clickable:focus-within .card-link{color:var(--text)}.card-arrow{transition:transform .15s;display:inline-block}.card-clickable:hover .card-arrow,.card-clickable:focus-within .card-arrow{transform:translate(4px)}.connect-links{flex-direction:column;gap:12px;display:flex}.connect-links a{color:var(--text);border:1px solid var(--border);border-radius:14px;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;transition:border-color .15s,transform .15s;display:flex}.connect-links a:hover{border-color:var(--text);transform:translateY(-1px)}.connect-links a .icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.connect-links a .icon svg{width:20px;height:20px}.icon.mail{color:#16a34a;background:#ecfdf3}.icon.linkedin{color:#2563eb;background:#eff6ff}.icon.github{color:#fff;background:#18181b}.connect-links a .label-col{flex-direction:column;gap:2px;display:flex}.connect-links a .label-small{color:var(--muted);font-size:12px}.connect-links a .label-value{color:var(--text);font-size:15px;font-weight:600}footer{border-top:1px solid var(--border);padding:24px 0 48px}footer .wrap{color:var(--muted);text-align:center;font-size:13px}@media (prefers-reduced-motion:reduce){.card,.card-arrow,.skill-emoji,.connect-links a{transition:none}.card:hover,.card-clickable:focus-within,.skill-card:hover .skill-emoji,.card-clickable:hover .card-arrow,.card-clickable:focus-within .card-arrow{transform:none}}@media (width<=480px){h1{font-size:24px}.item{flex-direction:column}}