:root{
  --navy:#08182B;
  --navy-2:#0C2339;
  --panel:rgba(12,35,57,.72);
  --line:rgba(122,190,235,.16);
  --line-strong:rgba(122,190,235,.34);
  --chalk:#E6F0F8;
  --muted:#7FA3BF;
  --cyan:#35D6F0;
  --signal:#FFC24B;
  --grid:rgba(122,190,235,.07);
  --grid-major:rgba(122,190,235,.11);
  --radius:2px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
}
body.paper{
  --navy:#F6F4EE;
  --navy-2:#EFECE3;
  --panel:rgba(255,255,255,.82);
  --line:rgba(20,45,70,.18);
  --line-strong:rgba(20,45,70,.38);
  --chalk:#122334;
  --muted:#5A6E80;
  --cyan:#0E7C93;
  --signal:#A2661A;
  --grid:rgba(20,45,70,.06);
  --grid-major:rgba(20,45,70,.1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--navy);color:var(--chalk);
  touch-action:manipulation;
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
/* background grid - click it */
#field{
  position:fixed;inset:0;z-index:0;cursor:crosshair;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  transition:background-position .18s ease;
}
#tears{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.tear{
  position:absolute;left:0;width:100%;
  mix-blend-mode:screen;pointer-events:none;
  animation:tearOut .34s steps(3) forwards;
}
body.paper .tear{mix-blend-mode:multiply}
@keyframes tearOut{
  0%{opacity:.85}
  55%{opacity:.7}
  100%{opacity:0}
}
#scan{
  position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(53,214,240,.16) 0 1px,transparent 1px 4px);
}
body.glitching #scan{animation:scanFlash .3s steps(2) forwards}
@keyframes scanFlash{0%{opacity:.9}100%{opacity:0}}

.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
#page{position:relative;z-index:1}

a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
p{margin:0}

/* top bar */
.rail{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--navy) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.rail .wrap{display:flex;align-items:center;gap:18px;height:52px}
.mark{font-family:var(--mono);font-weight:700;font-size:14px}
.mark span{color:var(--cyan)}
body.glitching .mark{
  text-shadow:2px 0 var(--cyan),-2px 0 var(--signal);
  transform:translateX(-2px);
}
.rail nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.rail nav a{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-decoration:none;padding:4px 2px;border-bottom:1px solid transparent}
.rail nav a:hover,.rail nav a:focus-visible{color:var(--chalk);border-bottom-color:var(--cyan)}
.status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent)}
.flip{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:5px 10px;cursor:pointer}
.flip:hover,.flip:focus-visible{color:var(--chalk);border-color:var(--line-strong)}

/* hero */
.hero{padding:74px 0 56px;border-bottom:1px solid var(--line)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:26px}
.meta-row b{color:var(--chalk);font-weight:500}
.name{font-family:var(--mono);font-size:clamp(2.7rem,10vw,7rem);line-height:.9;letter-spacing:-.055em;font-weight:700;margin-bottom:20px}
.name .slash{color:var(--cyan)}
.pitch{max-width:56ch;font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.5}
.pitch em{font-style:normal;border-bottom:2px solid var(--signal);padding-bottom:1px}

/* terminal */
.term-shell{margin-top:44px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
.term-bar .lamp{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.term-bar .lamp.on{background:var(--signal)}
.term-bar .path{margin-left:auto}
#term{font-family:var(--mono);font-size:13.5px;line-height:1.75;padding:18px 16px 8px;min-height:270px;max-height:400px;overflow-y:auto}
#term .ln{white-space:pre-wrap;word-break:break-word}
#term .cy{color:var(--cyan)}
#term .sg{color:var(--signal)}
#term .mu{color:var(--muted)}
#term .kv{display:flex;gap:14px}
#term .kv b{color:var(--muted);font-weight:400;min-width:98px;flex:none}
.prompt-row{display:flex;align-items:center;gap:9px;padding:0 16px 16px;font-family:var(--mono);font-size:13.5px}
.prompt-row .ps1{color:var(--cyan);flex:none}
#cmd{flex:1;background:transparent;border:0;outline:0;color:var(--chalk);font-family:var(--mono);font-size:13.5px;padding:6px 0;caret-color:var(--signal)}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 16px}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:transparent;border:1px dashed var(--line-strong);border-radius:var(--radius);padding:4px 9px;cursor:pointer}
.chip:hover,.chip:focus-visible{color:var(--navy);background:var(--cyan);border-style:solid;border-color:var(--cyan)}
body.paper .chip:hover,body.paper .chip:focus-visible{color:#fff}

/* section headings */
section{padding:70px 0;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:38px}
.head h2{font-size:clamp(1.45rem,3.4vw,2rem)}
.head .rule{flex:1;height:1px;background:var(--line)}
.head .idx{font-family:var(--mono);font-size:12.5px;color:var(--cyan)}

/* timeline */
.entry{display:grid;grid-template-columns:120px 1fr;gap:0 34px;padding:22px 0;border-top:1px solid var(--line)}
.entry:first-of-type{border-top:0}
.when{font-family:var(--mono);font-size:12.5px;color:var(--signal);padding-top:4px}
.entry h3{font-size:1.1rem;margin-bottom:6px}
.entry p{max-width:66ch;color:color-mix(in srgb,var(--chalk) 82%,transparent)}
.entry .tag{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:9px}

/* project card */
.builds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.builds.single{grid-template-columns:minmax(0,600px)}
.builds.pair{grid-template-columns:repeat(2,1fr)}
.build .tags a{color:var(--cyan);text-decoration:none}
.build .tags a:hover{border-bottom:1px solid var(--cyan)}
.aside{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--muted);max-width:60ch}
.build{border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;position:relative;background:var(--panel)}
.build::before,.build::after{content:"";position:absolute;width:11px;height:11px;border:1px solid var(--cyan)}
.build::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.build::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.build .num{font-family:var(--mono);font-size:2.4rem;line-height:1;color:var(--signal);letter-spacing:-.04em}
.build .unit{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:18px;display:block}
.build h3{font-size:1.05rem;margin-bottom:8px}
.build p{font-size:.92rem;color:color-mix(in srgb,var(--chalk) 80%,transparent)}
.build .tags{margin-top:16px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* skills table */
.skills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.skills li{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:8px 14px;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.skills li:hover{color:var(--navy);background:var(--cyan);border-color:var(--cyan)}
body.paper .skills li:hover{color:#fff}

.marq{overflow:hidden;padding:1px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq + .marq{margin-top:10px}
.marq-track{display:flex;gap:10px;width:max-content;animation:scrollx 32s linear infinite}
.marq.rev .marq-track{animation-direction:reverse}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hobbies{display:flex;flex-wrap:wrap;align-items:baseline;list-style:none;padding:0;margin:0;gap:0 4px}
.hobbies li{font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:-.01em;transition:color .2s}
.hobbies li:hover{color:var(--cyan)}
.hobbies li+li::before{content:"·";color:var(--signal);margin:0 14px 0 10px}

.end{padding:80px 0 96px;border-bottom:0}
.end h2{font-size:clamp(1.8rem,5vw,3.1rem);line-height:1.08;max-width:20ch;margin-bottom:18px}
.end p{max-width:56ch;color:color-mix(in srgb,var(--chalk) 82%,transparent);margin-bottom:30px}
.links{display:flex;flex-wrap:wrap;gap:12px}
.links a{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:13px;text-decoration:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 14px;
  transition:background .2s,border-color .2s,color .2s;
}
.links a svg{width:16px;height:16px;flex:none;fill:currentColor;display:block}
.links a .lbl{
  display:inline-block;max-width:0;margin-left:0;
  overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .34s cubic-bezier(.4,0,.2,1),opacity .22s ease,margin-left .34s cubic-bezier(.4,0,.2,1);
}
.links a:hover .lbl,.links a:focus-visible .lbl{max-width:260px;margin-left:9px;opacity:1}
@media (hover:none){
  .links a .lbl{max-width:260px;margin-left:9px;opacity:1}
}
.links a:hover,.links a:focus-visible{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
body.paper .links a:hover,body.paper .links a:focus-visible{color:#fff}
.links a.key{background:var(--signal);color:#08182B;border-color:var(--signal)}
.links a.key:hover{background:var(--cyan)}
.colophon{margin-top:52px;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.9}
.copy{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}

/* corner counter */
#hint{
  position:fixed;right:14px;bottom:12px;z-index:30;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius);padding:4px 9px;
  background:color-mix(in srgb,var(--navy) 82%,transparent);pointer-events:none;
}
#hint b{color:var(--cyan);font-weight:400}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.svg-defs{position:absolute;width:0;height:0}

@media (max-width:880px){
  .builds{grid-template-columns:1fr}
  .entry{grid-template-columns:1fr;gap:6px}
  .rail nav a:not(.keep){display:none}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .status span{display:none}
  #hint{left:14px;right:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  #hint,#tears,#scan,#field,.term-shell,.rail{display:none}
  .links a .lbl{max-width:none;margin-left:9px;opacity:1}
  body{background:#fff;color:#000}
}