:root{
  --bg:#0c0c0e; --panel:#141416; --line:#26262a; --text:#e8e6e3; --dim:#8b8b93;
  --red:#e5383b; --red-soft:rgba(229,56,59,.14);
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}


header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(12,12,14,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font:600 15px var(--mono);text-decoration:none}
.logo b{color:var(--red)}
nav{display:flex;gap:4px}
nav a{font:14px var(--mono);color:var(--dim);text-decoration:none;padding:6px 12px;border-radius:4px;transition:color .15s,background .15s}
nav a:hover{color:var(--text)}
nav a.on{color:var(--red);background:var(--red-soft)}

main{min-height:calc(100vh - 140px);padding:56px 0 80px}
h1,h2,h3{font-family:var(--mono);line-height:1.15;letter-spacing:-.02em;margin:0}
h2.page{font-size:clamp(28px,5vw,40px);font-weight:800;margin-bottom:8px}
.sub{color:var(--dim);margin:0 0 40px;max-width:56ch}
footer{border-top:1px solid var(--line);padding:24px 0;color:var(--dim);font:13px var(--mono)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}


.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:24px 0 8px}
.prompt{font:14px var(--mono);color:var(--dim);margin-bottom:20px;min-height:1.6em}
.prompt i{color:var(--red);font-style:normal}
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--red);vertical-align:-.15em;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero h1{font-size:clamp(38px,7vw,64px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--red)}
.lead{margin:24px 0 32px;max-width:46ch;color:#c9c7c4}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font:600 14px var(--mono);text-decoration:none;padding:11px 20px;border:1px solid var(--line);border-radius:4px;transition:border-color .15s,background .15s,transform .15s}
.btn:hover{border-color:var(--red);transform:translateY(-1px)}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.btn.pri:hover{background:#f04a4d}
.screen{border:1px solid var(--line);background:var(--panel);border-radius:6px;overflow:hidden}
.screen .bar{font:12px var(--mono);color:var(--dim);padding:8px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.screen canvas{display:block;width:100%;height:auto;aspect-ratio:1}

.road{margin-top:72px}
.road h3{font-size:15px;font-weight:600;color:var(--dim);margin-bottom:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:0;padding:0;position:relative}
.steps li{position:relative;padding-top:26px;font-size:15px}
.steps li::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line)}
.steps li::after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line)}
.steps li.now::before{background:linear-gradient(90deg,var(--red),var(--line))}
.steps li.now::after{background:var(--red)}
.steps li.theory::before{background:repeating-linear-gradient(90deg,var(--dim) 0 6px,transparent 6px 12px)}
.steps li.theory::after{border-style:dashed;border-color:var(--dim)}
.steps li.goal::before{background:none}
.steps li.goal::after{border-style:dashed}
.steps li.now::after{border-color:var(--red);box-shadow:0 0 0 0 var(--red);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.steps b{display:block;font:600 15px var(--mono)}
.steps span{color:var(--dim);font-size:14px}


.photo{margin:0;position:relative;aspect-ratio:4/5;width:100%;max-width:340px;justify-self:end;display:grid;place-items:center;background-color:#0a0a0b;border:1px solid var(--line);border-radius:6px;font:13px var(--mono);color:#4a4a52;
  background-image:repeating-linear-gradient(0deg,transparent 0 15px,#17171a 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,#17171a 15px 16px)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px}
.photo::before,.photo::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--red);transition:transform .25s;z-index:2}
.photo::before{top:-8px;left:-8px;border-right:0;border-bottom:0}
.photo::after{bottom:-8px;right:-8px;border-left:0;border-top:0}
.photo:hover::before{transform:translate(-4px,-4px)}
.photo:hover::after{transform:translate(4px,4px)}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font:12px var(--mono);color:var(--dim);background:linear-gradient(transparent,rgba(12,12,14,.92));z-index:1}
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.about p{margin:0 0 1em;color:#c9c7c4;max-width:54ch}
.about .pin{max-width:380px;justify-self:end;width:100%}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:24px 0 0;font:14px var(--mono)}
.facts dt{color:var(--red)}
.facts dd{margin:0;color:var(--dim)}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:560px}
.links a{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font:14px var(--mono);transition:padding-left .2s,color .15s}
.links a:hover{padding-left:10px;color:var(--red)}
.links span{color:var(--dim)}


.hm{overflow-x:auto;padding:4px 0 8px}
.hm-in{width:max-content}
.mo,.cells{display:grid;grid-auto-flow:column;grid-auto-columns:11px;gap:3px}
.mo{height:18px;font:11px var(--mono);color:var(--dim)}
.mo span{white-space:nowrap}
.cells{grid-template-rows:repeat(7,11px)}
.c{display:block;border-radius:2px;background:#17171a;animation:pop .45s both;animation-delay:calc(var(--i,0)*12ms)}
.c.l1{background:rgba(229,56,59,.3)}
.c.l2{background:rgba(229,56,59,.55)}
.c.l3{background:rgba(229,56,59,.8)}
.c.l4{background:var(--red)}
.c.n{visibility:hidden}
.cells .c:hover{outline:1px solid var(--text);outline-offset:1px}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
.hm-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font:12px var(--mono);color:var(--dim)}
.leg{display:flex;align-items:center;gap:4px}
.leg .c{width:11px;height:11px;animation:none}

.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sk{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;transition:border-color .2s,transform .2s}
.sk:hover{border-color:var(--red);transform:translateY(-2px)}
.sk .ic{flex:none;width:40px;height:40px;display:grid;place-items:center;background:#0a0a0b;border:1px solid var(--line);border-radius:5px;color:var(--red)}
.sk svg{width:22px;height:22px}
.sk b{display:block;font:600 15px var(--mono);padding-right:62px}
.sk span{display:block;font-size:14px;color:var(--dim);line-height:1.45;margin-top:2px}
.sk .st{position:absolute;top:12px;right:12px;font:11px var(--mono);font-style:normal;padding:0 7px;border-radius:3px;border:1px solid var(--dim);color:var(--dim)}
.sk .st.now{color:var(--red);border-color:var(--red)}
.sk .st.theory,.sk .st.goal{border-style:dashed}


.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.card:hover{border-color:var(--red)}
.shot{aspect-ratio:16/9;background:#0a0a0b;border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.card:hover .shot img{transform:scale(1.04)}
.ph{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--mono);color:#4a4a52;
  background:repeating-linear-gradient(0deg,transparent 0 15px,#17171a 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,#17171a 15px 16px)}
.card .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:18px}
.card p{margin:0;color:#b5b3b0;font-size:15px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font:12px var(--mono);color:var(--dim);border:1px solid var(--line);padding:1px 8px;border-radius:3px}
.card .gh{font:600 13px var(--mono);color:var(--red);text-decoration:none;margin-top:4px}
.card .gh:hover{text-decoration:underline}


.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .2s}
.posts a:hover{padding-left:12px}
.posts a:hover h3{color:var(--red)}
.posts time{font:13px var(--mono);color:var(--dim);padding-top:4px}
.posts h3{font-size:19px;transition:color .15s}
.posts p{margin:6px 0 0;color:var(--dim);font-size:15px}
.back{font:13px var(--mono);color:var(--dim);text-decoration:none;display:inline-block;margin-bottom:32px}
.back:hover{color:var(--red)}
.post{max-width:68ch}
.post h1{font-size:clamp(28px,5vw,42px);font-weight:800;margin-bottom:10px}
.meta{font:13px var(--mono);color:var(--dim);margin-bottom:36px}
.md h2{font-size:24px;margin:2.2em 0 .6em}
.md h3{font-size:19px;margin:1.8em 0 .5em}
.md p{margin:0 0 1.2em}
.md a{color:var(--red)}
.md ul,.md ol{padding-left:1.3em;margin:0 0 1.2em}
.md li{margin-bottom:.3em}
.md li::marker{color:var(--red)}
.md blockquote{margin:0 0 1.2em;padding:2px 0 2px 18px;border-left:3px solid var(--red);color:#c9c7c4}
.md code{font:.88em var(--mono);background:var(--panel);border:1px solid var(--line);padding:1px 6px;border-radius:3px}
.md pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;overflow-x:auto;margin:0 0 1.4em}
.md pre code{background:none;border:0;padding:0;font-size:14px;line-height:1.55}
.md img{max-width:100%;border-radius:6px;border:1px solid var(--line)}
.md hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.empty{color:var(--dim);font:14px var(--mono)}

@media (max-width:760px){
  .hero,.about{grid-template-columns:1fr}
  .photo{justify-self:start;max-width:300px}
  .about .pin{justify-self:stretch;max-width:none}
  .steps{grid-template-columns:1fr;row-gap:24px}
  .posts a{grid-template-columns:1fr;gap:4px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}