@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Light.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/assets/fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@layer reset,layout,components;:root{--accent: #4ade80;--accent-hover: #6ee7b7;--accent-dim: oklch(.681 .101 134);--accent-soft: rgba(74, 222, 128, .1);--punch-color: oklch(.82 .128 88);--danger: #f87171;--color-bg: #0d1610;--color-surface: #111d14;--color-border: #1e3322;--color-divider: #162419;--color-text: rgba(236, 253, 245, .88);--color-text-muted: rgba(209, 250, 229, .55);--color-text-subtle: rgba(167, 243, 208, .35);--color-heading: rgba(240, 255, 248, .96);--font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "Menlo", "Monaco", "Consolas", monospace;--text-xs: clamp(.75rem, .7rem + .25vw, .8125rem);--text-sm: clamp(.875rem, .82rem + .28vw, .9375rem);--text-base: clamp(1rem, .94rem + .3vw, 1.0625rem);--inner-max: 72rem;--inner-pad: clamp(1.25rem, 5vw, 3rem);color-scheme:dark}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}main{flex:1}img,svg,canvas,video{display:block;max-width:100%}a{color:inherit;text-decoration:none}address{font-style:normal}}@layer layout{.site-header-inner,.hero-inner,.site-footer-inner{max-width:var(--inner-max);margin-inline:auto;padding-inline:var(--inner-pad)}}@layer components{.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--color-divider);background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.site-header-inner{display:flex;align-items:flex-end;gap:1rem;padding-block:.875rem}.site-logo-group{flex-shrink:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6rem;row-gap:.15rem;.site-logo{grid-area:1 / 1}#coderunner-best-wrap-hdr{grid-area:1 / 2;align-self:end;justify-self:end;transform:translateY(5px);cursor:pointer}.site-role{grid-column:1 / -1}}.site-role{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--color-text-subtle);transition:color .22s;cursor:pointer}.site-logo{flex-shrink:0;display:flex;align-items:center;color:var(--color-text-subtle);cursor:pointer;.site-logo-svg{height:52px;width:auto;display:block}}.site-logo-group:has(.site-logo:hover,.site-role:hover) .site-logo{color:#f0fff8a6}.site-logo-group:has(.site-logo:hover,.site-role:hover) .site-role{color:#f0fff8a6}.site-logo-svg .logo-path{stroke-dasharray:100;stroke-dashoffset:0}.site-logo:hover .logo-path,.site-logo-group:has(.site-role:hover) .logo-path{animation:logo-draw .75s ease forwards,logo-flicker 2s .65s ease forwards}.site-logo:hover .logo-cursor,.site-logo-group:has(.site-role:hover) .logo-cursor{animation:logo-cursor-in .75s ease forwards,logo-cursor-flicker 2s .65s ease forwards}@keyframes logo-draw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes logo-flicker{0%{opacity:1;filter:drop-shadow(0 0 4px rgba(74,222,128,.5))}5%{opacity:.05;filter:none}7%{opacity:1;filter:drop-shadow(0 0 8px rgba(74,222,128,.8))}9%{opacity:.05;filter:none}11%{opacity:.85;filter:drop-shadow(0 0 5px rgba(74,222,128,.5))}13%{opacity:.05;filter:none}15%{opacity:.9;filter:drop-shadow(0 0 4px rgba(74,222,128,.4))}20%{opacity:0;filter:none}38%{opacity:0;filter:none}41%{opacity:.2;filter:drop-shadow(0 0 2px rgba(74,222,128,.2))}43%{opacity:0;filter:none}46%{opacity:.15;filter:drop-shadow(0 0 1px rgba(74,222,128,.15))}48%{opacity:0;filter:none}51%{opacity:1;filter:drop-shadow(0 0 14px rgba(74,222,128,1))}54%{opacity:.75;filter:drop-shadow(0 0 5px rgba(74,222,128,.5))}56%{opacity:.05;filter:none}58%{opacity:1;filter:drop-shadow(0 0 7px rgba(74,222,128,.7))}61%{opacity:1;filter:drop-shadow(0 0 4px rgba(74,222,128,.5))}to{opacity:1;filter:drop-shadow(0 0 3px rgba(74,222,128,.3))}}@keyframes logo-cursor-in{0%,65%{opacity:0}to{opacity:.55}}@keyframes logo-cursor-flicker{0%,to{opacity:.55}5%{opacity:0}7%{opacity:.55}9%{opacity:0}11%{opacity:.5}13%{opacity:0}15%{opacity:.5}20%{opacity:0}38%{opacity:0}41%{opacity:.15}43%{opacity:0}48%{opacity:0}51%{opacity:.7}56%{opacity:0}58%{opacity:.6}61%{opacity:.55}}.header-best[hidden]{display:none}.header-best{display:flex;align-items:center;gap:.3em;font-family:var(--font-mono);font-size:.8rem;color:#ebcb8b;letter-spacing:.04em;user-select:none}.header-best-sym{opacity:.75;font-size:.7em;line-height:1}#coderunner-best-hdr{color:#ebcb8b;font-variant-numeric:tabular-nums}.header-links{display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.5rem);margin-inline-start:auto;list-style:none;margin-top:5px}.hero-divider{border:none;border-top:1px solid rgba(255,255,255,.18);margin-block:clamp(1.5rem,3vw + 6dvh,5rem) 0}#coderunner-touch-zone+.hero-divider{margin-block-start:0}@keyframes tz-pulse{0%,to{opacity:.35}50%{opacity:.9}}#coderunner-touch-zone{display:flex;visibility:hidden;height:100px;cursor:pointer;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:2rem;color:var(--accent);user-select:none;&.active{visibility:visible;animation:tz-pulse 2s ease-in-out infinite}&.used{visibility:visible;animation:none;opacity:.25}}.hero-game{max-width:600px;margin-top:clamp(1.5rem,3vw + 6dvh,5rem);margin-inline:auto}#coderunner-wrap{position:relative;canvas{width:100%;display:block;border-radius:4px;image-rendering:pixelated}}#coderunner-hud{position:absolute;top:8px;right:12px;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;color:#8fbcbb;letter-spacing:1px;text-shadow:0 0 6px rgba(143,188,187,.5);user-select:none}#coderunner-lives{color:#bf616a;letter-spacing:-4px;text-shadow:0 0 6px rgba(191,97,106,.5);padding-right:2px;.lost{opacity:.2;filter:grayscale(1)}}#coderunner-controls{position:absolute;top:-26px;right:0;display:flex;align-items:center;gap:.5rem;visibility:visible;&.hidden{visibility:hidden}}#coderunner-mute{background:none;border:none;cursor:pointer;opacity:.8;user-select:none;padding:2px;display:flex;align-items:center;&:hover{opacity:1}&:active{transform:scale(.9)}}#coderunner-quit-btn{background:none;border:none;cursor:pointer;opacity:.6;padding:2px;display:flex;align-items:center;transition:opacity .15s;&:hover{opacity:1}&:active{transform:scale(.9)}}#coderunner-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:11px;color:#4c566a;letter-spacing:.5px;user-select:none}#coderunner-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d8dee9;background:#0d1610c7;text-align:center;cursor:pointer;transition:background .15s;gap:10px;font-family:var(--font-mono);border-radius:4px;&.hidden{display:none}h1{color:#8fbcbb;font-size:28px;letter-spacing:3px;text-shadow:0 0 10px rgba(143,188,187,.6)}p{font-size:13px;color:#8a94a6;max-width:400px;line-height:1.5}.key{color:#090f0b;background:#8fbcbb;padding:1px 6px;border-radius:3px;font-weight:700}p:last-of-type{color:#8fbcbb;letter-spacing:1px}.coderunner-keys{display:flex;gap:1.25rem;font-size:11px;color:#4c5a68}}#coderunner-overlay:hover{background:#0d1610a6}#coderunner-score-final{color:#ebcb8b;font-size:15px;margin-top:4px}.coderunner-overlay-btns{display:flex;gap:.5rem;margin-top:4px}#coderunner-info-btn,#coderunner-elements-btn{background:none;border:1px solid rgba(143,188,187,.18);color:#4c5a68;font-family:var(--font-mono);font-size:11px;padding:3px 10px;border-radius:3px;cursor:pointer;letter-spacing:.05em;transition:color .15s,border-color .15s;&:hover{color:#8fbcbb;border-color:#8fbcbb80}&.hidden{display:none}}#coderunner-info-overlay,#coderunner-elements-overlay{position:absolute;top:0;left:0;right:0;min-height:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-block:28px 32px;background:#0d1610eb;font-family:var(--font-mono);border-radius:4px;z-index:2;&.hidden{display:none}}#coderunner-elements-overlay canvas{width:100%;height:auto;image-rendering:pixelated}.coderunner-info-overlay-lbl{position:absolute;top:8px;left:50%;transform:translate(-50%);font-size:11px;color:var(--color-text-subtle);letter-spacing:.05em;white-space:nowrap}.coderunner-stats-list{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0;padding:0;list-style:none;font-size:14px;dt{color:#8fbcbb;font-size:12px;letter-spacing:.05em}dd{margin:0;color:#ebcb8b;font-variant-numeric:tabular-nums}}.coderunner-info-close-hint{background:none;border:none;font-family:var(--font-mono);font-size:12px;color:#8fbcbb;letter-spacing:1px;margin-top:4px;cursor:pointer;opacity:.8;&:hover{opacity:1}#coderunner-info-overlay &,#coderunner-elements-overlay &{position:absolute;bottom:8px;left:50%;transform:translate(-50%);margin-top:0;white-space:nowrap}}.hero{position:relative;min-height:calc(100dvh - 66px);display:flex;align-items:flex-start;overflow:hidden}.hero-video{position:absolute;inset:0;overflow:hidden}.hero-video video{width:100%;height:100%;object-fit:cover;opacity:.12}.hero-video:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--color-bg) 0%,transparent 12%,transparent 88%,var(--color-bg) 100%)}.hero-inner{position:relative;padding-block-start:max(1rem,calc(20dvh - 66px));padding-block-end:clamp(3rem,8vw,6rem)}.hero-handle{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:clamp(1.25rem,2.5vw,2rem)}.hero-content{text-align:center}.hero-motto{display:flex;flex-direction:column;gap:.05em;width:fit-content;margin-inline:auto;margin-bottom:clamp(2rem,4vw,3.5rem)}.hero-setup{font-size:clamp(2rem,2.5vw + .75rem,4rem);font-weight:300;color:#f0fff8a6;line-height:1.15;letter-spacing:-.02em}.hero-punch{font-size:clamp(3.5rem,5.5vw + 1rem,8.5rem);font-weight:700;background:linear-gradient(to bottom,#e7bf59,#d49c3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));line-height:1;letter-spacing:-.04em}.hero-footnote-mark{font-size:.45em;font-weight:300;vertical-align:super;opacity:.6}.hero-footnote{font-size:var(--text-sm);font-weight:300;color:#f0fff8a6;letter-spacing:.03em;align-self:flex-end;margin-top:-.4em;em{font-style:normal}}.hero-links{display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,1.75rem);align-items:flex-start}.hero-link{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--color-text-subtle);border-radius:10px;padding:.45rem .5rem;margin:-.45rem -.5rem;transition:color .22s,background .22s;svg{width:28px;height:28px}span{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em}&:hover{color:var(--accent);background:#ffffff0d}}[data-brand=github]:hover{color:#e6edf3;background:#e6edf312}[data-brand=npm]:hover{color:#cb3837;background:#cb38371f}[data-brand=devto]:hover{color:#a8b1ff;background:#a8b1ff1a}[data-brand=mastodon]:hover{color:#6364ff;background:#6364ff1f}[data-brand=bluesky]:hover{color:#0085ff;background:#0085ff1f}[data-brand=teblo]:hover{color:#00b1ed;background:#00b1ed1a}[data-brand=hadley]:hover{color:#e6cc78;background:#e6cc781a}.hero-link--text .hero-link-mark{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid currentColor;border-radius:6px;font-family:var(--font-mono);font-size:12px;font-weight:700;opacity:.85}.nav-burger{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--color-text-subtle);padding:.4rem;border-radius:6px;transition:color .2s,background .2s;flex-shrink:0;&:hover{color:var(--color-text-muted);background:#ffffff0d}.icon-close{display:none}&[aria-expanded=true] .icon-menu{display:none}&[aria-expanded=true] .icon-close{display:block}}@media(max-width:640px){.hero-handle{text-align:center}#coderunner-overlay,#coderunner-info-overlay{overflow:hidden}#coderunner-overlay{gap:5px;h1{font-size:20px;letter-spacing:2px}p:first-of-type{display:none}.coderunner-keys{display:none}}.nav-burger{display:flex;margin-inline-start:auto;align-self:center;transform:translateY(7px)}.header-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.25rem var(--inner-pad) .75rem;background:color-mix(in srgb,var(--color-bg) 96%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-divider);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s;&.is-open{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .2s,transform .2s}}.hero-link{flex-direction:row;justify-content:flex-start;gap:.875rem;padding:.65rem 0;border-radius:0;margin:0;border-bottom:1px solid rgba(255,255,255,.05);&:last-child{border-bottom:none}svg{width:22px;height:22px;flex-shrink:0}span{display:block!important;font-size:var(--text-sm);letter-spacing:.02em}}}.scroll-hint{display:none;position:absolute;bottom:3rem;left:50%;transform:translate(-50%);color:#f0fff880;pointer-events:none;animation:scroll-hint-bounce 2.4s ease-in-out infinite}.scroll-hint svg{width:56px;height:56px}@keyframes scroll-hint-bounce{0%,to{transform:translate(-50%) translateY(0);opacity:.5}50%{transform:translate(-50%) translateY(10px);opacity:.82}}@media(min-width:1600px){.scroll-hint{display:block}}.site-footer{border-top:1px solid var(--color-divider);padding-block:1.75rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent-dim);letter-spacing:.08em;text-transform:uppercase}.site-footer-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem}.footer-copy{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-subtle)}.footer-email,.footer-phone{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);transition:color .2s;&:hover{color:#f0fff8a6}}}.terminal-section{display:flex;justify-content:center;padding-block:3.5rem 4.5rem;perspective:1200px;background-color:#0e2d3e;background-image:radial-gradient(at 50% 96%,hsla(0,100%,20%,.35) 0px,transparent 50%),radial-gradient(at 5% 30%,hsla(136,95%,15%,1) 0px,transparent 50%),radial-gradient(at 91% 35%,hsla(214,83%,25%,1) 0px,transparent 75%),radial-gradient(at 82% 73%,hsla(265,72%,20%,1) 0px,transparent 50%)}.terminal-wrap{width:min(625px,100% - 2rem);border-radius:10px;overflow:hidden;position:relative;box-shadow:0 24px 80px #0009,0 4px 16px #0006;transform:rotateY(-25deg);transform-style:preserve-3d}.terminal-wrap .ap-player{font-size:15px!important;border-radius:10px!important;box-shadow:10px 10px 15px #00000040!important;background:#333 linear-gradient(135deg,#0000,#7d7d7d4d 46%,#2d2d2dcc 46.8%,#0000)!important;background:#000000b3 linear-gradient(135deg,transparent 0%,rgb(200 200 200 / .25) 46%,rgb(200 200 200 / .15) 46.5%,transparent 100%)!important}.terminal-wrap .asciinema-theme-asciinema{background-color:#121314!important}.terminal-wrap .ap-term{border-color:transparent!important}.terminal-wrap .ap-control-bar{background:linear-gradient(to bottom,#00000080,#000 25% 100%)!important;color:#bbb!important}.terminal-wrap .ap-kbd-button{display:none!important}.tech-stack{display:flex;justify-content:center;padding-block:2.5rem 3.5rem;border-top:1px solid rgba(143,188,187,.07)}.tech-stack-inner{display:flex;gap:2.25rem;align-items:center;flex-wrap:wrap;justify-content:center}.tech-logo{width:44px;height:44px;fill:#8fbcbb38;transition:fill .3s ease,filter .3s ease}.tech-logo:hover{fill:#8fbcbbd9;filter:drop-shadow(0 0 10px rgba(143,188,187,.45))}