.dev-hero{gap:var(--sp-4) var(--sp-5);min-inline-size:0;padding:var(--sp-4);border-radius:var(--r-block);background-color:var(--surface);color:var(--text);font-family:var(--body-font);box-shadow:var(--shadow-soft);grid-template-columns:minmax(0,1fr);grid-template-areas:"figure""body""extra";align-items:center;margin-block-end:var(--sp-7);display:grid;overflow:clip}.dev-hero>.home-panel-figure{min-inline-size:0;padding:var(--sp-6);border-radius:var(--r-block);color:var(--text);grid-area:figure;place-items:center;text-decoration-line:none;display:grid;position:relative}.dev-hero .home-panel-art{z-index:1;inline-size:100%;max-inline-size:calc(var(--photo-max) * 2);display:block;position:relative}.dev-hero>.home-panel-figure:focus-visible{outline:var(--ring) solid var(--accent);outline-offset:calc(var(--ring) * -1 - var(--ring-offset))}.dev-hero>.home-panel-body{gap:var(--sp-4);grid-area:body;align-content:end;min-inline-size:0;display:grid}.dev-hero .home-panel-body p{margin:var(--sp-0)}.dev-hero .home-panel-title{margin:var(--sp-0);font-family:var(--head-font);font-weight:var(--w-bold);font-size:var(--display);line-height:var(--lh-head);letter-spacing:var(--track-none);color:var(--text);overflow-wrap:break-word}.dev-hero .home-panel-text{max-inline-size:var(--measure);font-size:var(--step-1);line-height:var(--lh-body);color:var(--text);overflow-wrap:break-word}.dev-hero-extra{gap:var(--sp-3);grid-area:extra;align-content:start;min-inline-size:0;display:grid}.dev-hero-extra p{margin:var(--sp-0)}.dev-hero-action{display:flex}.dev-hero-contact{max-inline-size:min(calc(var(--measure) * .5), 80%);text-align:center;text-decoration:none}@media (min-width:48rem){.dev-hero{padding:var(--sp-6)}}@media (min-width:64rem){.dev-hero{gap:var(--sp-4) var(--sp-7);padding:var(--sp-7);grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"figure body""figure extra"}}.proj-list{margin:var(--sp-0);padding:var(--sp-0);gap:var(--sp-3);grid-template-columns:minmax(0,1fr);list-style:none;display:grid}@media (min-width:48rem){.proj-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.proj-list{grid-template-columns:repeat(3,minmax(0,1fr))}}.proj-item{gap:var(--sp-2);min-inline-size:0;padding:var(--sp-4);background-color:var(--surface);color:var(--text);border:var(--hair) solid var(--line);border-radius:var(--r-card);align-content:start;display:grid;position:relative}.proj-item:hover{border-color:var(--accent)}.proj-link{gap:var(--sp-2);min-inline-size:0;color:var(--text);text-decoration-line:none;display:grid}.proj-link:after{content:"";border-radius:var(--r-card);position:absolute;inset:0}.proj-link:focus-visible{outline:none}.proj-link:focus-visible:after{outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}.proj-name{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:var(--step-0);overflow-wrap:anywhere;text-align:start}.proj-link:hover .proj-name{text-decoration-line:underline;text-decoration-thickness:var(--hair);text-underline-offset:var(--underline-offset)}.proj-line{color:var(--muted);font-size:var(--step--1);line-height:var(--lh-body);overflow-wrap:break-word}.proj-meta{align-items:center;gap:var(--sp-2);min-block-size:var(--sp-5);flex-wrap:wrap;display:flex}.proj-meta:empty{display:none}.proj-badge{align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background-color:var(--soft);color:var(--text);border:var(--hair) solid var(--line);border-radius:var(--r-pill);font-size:var(--step--1);line-height:var(--lh-body);display:inline-flex}.proj-badge:before{content:"";inline-size:var(--sp-2);block-size:var(--sp-2);border-radius:var(--r-pill);background-color:var(--muted)}.proj-badge[data-outcome=shipped]:before{background-color:var(--ok)}.proj-badge[data-outcome=active]:before{background-color:var(--accent)}.proj-badge[data-outcome=failed]:before{background-color:var(--mark)}.how{gap:var(--sp-5);margin-block:var(--sp-7);min-inline-size:0;display:grid}.how-lead{max-inline-size:var(--measure);color:var(--muted)}.how-principles{margin:var(--sp-0);padding:var(--sp-0);gap:var(--sp-4);counter-reset:how;grid-template-columns:minmax(0,1fr);list-style:none;display:grid}@media (min-width:48rem){.how-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}.how-principle{gap:var(--sp-2);border-inline-start:var(--rule) solid var(--line);align-content:start;min-inline-size:0;padding-inline-start:var(--sp-5);display:grid}.how-principle p{margin:var(--sp-0);line-height:var(--lh-long)}.how-principle-title{font-size:var(--step-1);line-height:var(--lh-head)}.how-group{gap:var(--sp-4);margin-block-start:var(--sp-5);display:grid}.how-group-title{font-size:var(--step-2);line-height:var(--lh-head)}.how-tools{margin:var(--sp-0);padding:var(--sp-0);gap:var(--sp-3);grid-template-columns:minmax(0,1fr);list-style:none;display:grid}@media (min-width:48rem){.how-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.how-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}.how-tool{gap:var(--sp-2);min-inline-size:0;padding:var(--sp-4);background-color:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r-card);align-content:start;display:grid}.how-tool p{margin:var(--sp-0)}.how-tool-name{font-family:var(--font-mono);font-size:var(--step-0);text-align:start;overflow-wrap:anywhere}.how-tool-kind{color:var(--muted);font-size:var(--step--1)}.how-tool-how{line-height:var(--lh-body)}.how-tool-source{color:var(--muted);font-size:var(--step--1);line-height:var(--lh-body);text-align:start;overflow-wrap:anywhere}.how-updated{color:var(--muted);font-size:var(--step--1);max-inline-size:var(--measure)}.dev-read.dev-post .item{gap:var(--sp-6)}.dev-read.dev-post .item-body,.dev-read.dev-post .abstract,.dev-read.dev-post .lead{max-inline-size:calc(var(--measure) + 3 * var(--sp-7))}.dev-read.dev-post .item-body,.dev-read.dev-post .abstract p{font-size:var(--step-long);line-height:var(--lh-long)}.dev-read.dev-post .item>.image-slot{aspect-ratio:var(--image-ratio);max-block-size:none}@media (min-width:80rem){.dev-read.dev-post .item>.image-slot{max-block-size:var(--measure)}.dev-read.dev-post .item:has(>.end-of-reading){grid-template-columns:minmax(0, calc(var(--measure) + 3 * var(--sp-7))) minmax(calc(var(--margin-w) - var(--sp-7)), 1fr)}}