:root { --ink: #18233a; --muted: #5f6878; --accent: #2867c7; --line: #e5e9ef; --soft: #f5f7fa; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 400 16px/1.65 "IBM Plex Mono", ui-monospace, monospace; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 2; background: rgb(255 255 255 / .82); backdrop-filter: blur(10px); }
.site-header nav { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 1.15rem 1rem; font-weight: 500; font-size: .9rem; }
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; display: flex; align-items: center; padding: clamp(6rem, 12vw, 9rem); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 54rem 72rem at 0 0, #b8d3ff 0%, #dbeaff 24%, #f7faff 52%, #fff 80%); }
.hero-pattern { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; stroke: #d9e1ec; mask-image: radial-gradient(ellipse 92% 88% at 0 0, #000 0%, #000b 36%, transparent 76%); }
.code-symbols { fill: var(--accent); opacity: .22; font: 26px "IBM Plex Mono", monospace; }
.hero-content { max-width: none; }
.hello { margin: 0 0 1.5rem; font-size: clamp(1.3rem, 2.4vw, 2.3rem); font-weight: 700; color: #50607a; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.7rem; font-size: clamp(2.6rem, 6.2vw, 6rem); line-height: .98; letter-spacing: -.075em; white-space: nowrap; }
h1 span { color: var(--accent); }
.hero-role { margin: 0; color: var(--muted); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.4rem); }
.hero-links { position: absolute; bottom: clamp(2rem, 7vw, 5rem); display: flex; gap: clamp(1.1rem, 2.5vw, 2.2rem); flex-wrap: wrap; }
.hero-links a { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; color: #4d5d76; }
.hero-links svg, .project-source svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.split-section { display: grid; grid-template-columns: minmax(13rem, 4fr) minmax(0, 8fr); gap: clamp(2rem, 7vw, 7rem); padding: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--line); }
.section-title h2 { margin: 0; font-size: clamp(2.4rem, 3.2vw, 4rem); letter-spacing: -.075em; line-height: .95; white-space: nowrap; }
.section-title span { display: block; width: 75px; height: 5px; margin-top: .9rem; border-radius: 99px; background: var(--accent); }
.intro { max-width: 47rem; margin-bottom: 2rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.skill-pills, .project-tags { display: flex; flex-wrap: wrap; gap: .65rem; }
.skill-pills span { padding: .45rem .8rem; background: #edf2f8; border-radius: 999px; font-weight: 600; }
.project-list { display: grid; gap: 1.25rem; }
.project-card { position: relative; min-height: 0; padding: clamp(1.4rem, 3vw, 2.3rem); border: 1px solid var(--line); border-radius: 1.1rem; background: var(--soft); transition: transform .2s, box-shadow .2s, background .2s; }
.project-card:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 1rem 2.5rem #18233a16; }
.project-demo { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.project-content { position: relative; z-index: 1; pointer-events: none; }
.project-number { color: var(--accent); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.project-card h3 { margin: .8rem 0; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.04em; }
.project-card p { max-width: 44rem; margin-bottom: 1.25rem; color: var(--muted); font-size: .91rem; }
.project-tags { padding-top: .1rem; }
.project-tags span { padding: .28rem .5rem; color: #fff; border-radius: .35rem; background: var(--ink); font-size: .72rem; font-weight: 600; }
.project-open { position: absolute; top: 1.4rem; right: 4.3rem; z-index: 1; display: flex; align-items: center; gap: .3rem; color: var(--ink); font-size: 1.35rem; }
.project-open::before { content: "demo"; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .04em; opacity: 0; transform: translateX(.25rem); transition: opacity .2s, transform .2s; }
.project-card:hover .project-open::before { opacity: 1; transform: translateX(0); }
.project-source { position: absolute; top: 1.45rem; right: 1.45rem; z-index: 2; width: 1.25rem; height: 1.25rem; color: var(--ink); }
.detail-list { display: grid; gap: 1.2rem; }
.detail-list article { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: .75rem; background: #fff; }
.detail-list article > div { min-width: 0; }
.detail-list h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.detail-list p { margin: 0; color: var(--muted); }
.detail-list > article > span { flex: 0 0 auto; color: var(--muted); font-size: .78rem; text-align: right; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--line); color: var(--muted); }
footer strong, footer span { display: block; } footer strong { color: var(--ink); font-size: 1.3rem; } footer > div:last-child { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .84rem; }
@media (max-width: 800px) { .split-section { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .site-header nav { justify-content: flex-start; overflow-x: auto; white-space: nowrap; } .hero { padding-inline: 1.5rem; } h1 { font-size: clamp(1.7rem, 8.4vw, 2.5rem); } .split-section { padding-inline: 1.5rem; } .section-title h2 { font-size: clamp(2.2rem, 11vw, 3.2rem); } .detail-list article, footer { flex-direction: column; } .detail-list > article > span { text-align: left; } }