@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Bungee+Shade&family=DM+Mono&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Nunito:wght@400;600;700&family=Rubik+Wet+Paint&display=swap');

html { overflow-x:hidden; }
body { background:#fff6dc; color:#283125; font-family:Nunito,sans-serif; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,#df461f22 1.2px,transparent 0);
  background-size:28px 28px; }
.glow { display:none; }
.personal { max-width:1200px; margin:auto; padding:0 5vw; }
.personal section { margin:0; }

.hello { position:relative; padding:48px 0 36px; min-height:min(92vh,780px); overflow:hidden; }
.hello-grid { position:absolute; inset:0; background:
  linear-gradient(90deg,transparent 49.5%,#28312512 49.5%,#28312512 50.5%,transparent 50.5%),
  linear-gradient(transparent 49.5%,#28312512 49.5%,#28312512 50.5%,transparent 50.5%);
  background-size:120px 120px; mask-image:linear-gradient(180deg,#000 0%,transparent 85%); pointer-events:none; }
.bubble-field { position:absolute; top:38%; right:0; bottom:130px; left:65%; pointer-events:none; }
.bubble { pointer-events:auto; position:absolute; border:3px solid #283125; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 30% 28%,#fffefa 0%,#f1ccd9 45%,#4252ad88 100%);
  box-shadow:inset -6px -10px 0 #4252ad33,4px 4px 0 #283125;
  transition:transform 180ms cubic-bezier(.19,1,.22,1),opacity 200ms ease; min-width:44px; min-height:44px; padding:0; }
.bubble:active { transform:scale(.97); }
.bubble.is-popped { opacity:0; transform:scale(1.35); pointer-events:none; }
.b0 { width:52px; height:52px; top:22%; left:38%; }
.b1 { width:44px; height:44px; top:34%; left:52%; animation:float-b 7s ease-in-out infinite alternate; }
.b2 { width:64px; height:64px; top:48%; left:28%; animation:float-a 9s ease-in-out infinite alternate-reverse; }
.b3 { width:40px; height:40px; top:18%; right:32%; background:radial-gradient(circle at 30% 28%,#fffefa,#e3e86a); }
.b4 { width:56px; height:56px; bottom:32%; left:18%; animation:float-b 8s ease-in-out infinite alternate; }
.b5 { width:48px; height:48px; bottom:38%; right:14%; }
.b6 { width:36px; height:36px; top:42%; right:42%; animation:float-a 6s ease-in-out infinite alternate; }
@keyframes float-a { to { transform:translate(10px,-14px); } }
@keyframes float-b { to { transform:translate(-12px,8px) rotate(6deg); } }

.hello-doodles { position:absolute; inset:0; pointer-events:none; }
.doodle { pointer-events:auto; position:absolute; font-family:'DM Mono',monospace; font-size:13px; padding:8px 14px; border:2px solid #283125; background:#fffefa; transform:rotate(-6deg); cursor:pointer; transition:transform 150ms ease,background 150ms ease; min-height:44px; }
.doodle:focus-visible { outline:3px solid #4252ad; outline-offset:3px; }
.doodle.is-spin { animation:doodle-spin 500ms cubic-bezier(.2,.8,.2,1); }
@keyframes doodle-spin { 50% { transform:rotate(18deg) scale(1.08); background:#e3e86a; } }
.d1 { top:12%; left:2%; animation:drift-a 9s ease-in-out infinite alternate; }
.d2 { top:8%; right:8%; color:#4252ad; font-weight:700; animation:drift-b 11s ease-in-out infinite alternate; }
.d3 { bottom:28%; left:4%; background:#e3e86a; animation:drift-b 8s ease-in-out infinite alternate-reverse; }
.d4 { bottom:18%; right:22%; animation:drift-a 10s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform:rotate(8deg) translate(12px,-18px); } }
@keyframes drift-b { to { transform:rotate(-12deg) translate(-16px,10px); } }

.hello-note { font-size:26px; margin:0 0 12px 5px; font-family:'Fraunces',serif; font-style:italic; font-variation-settings:'opsz' 144,'wght' 850; color:#4252ad; animation:note-wonk 3.5s ease-in-out infinite alternate; }
@keyframes note-wonk { from { font-variation-settings:'opsz' 9,'wght' 340; letter-spacing:0; } to { font-variation-settings:'opsz' 144,'wght' 900; letter-spacing:.02em; } }
.intro-copy p:first-child { font-family:'Fraunces',serif; font-variation-settings:'opsz' 100,'wght' 620; font-size:24px; }
.hello h1 { font-family:'Bagel Fat One',sans-serif; font-weight:400; font-size:clamp(64px,13vw,166px); line-height:1.03; letter-spacing:-.035em; margin:0; color:#df461f; text-shadow:3px 3px 0 #283125; }
.name-line { display:flex; width:fit-content; }
.name-line>span { display:inline-block; transform-origin:50% 85%; cursor:crosshair; }
.surname { margin-left:20%; color:#4252ad; text-shadow:3px 3px 0 #df461f; }
.name-line>span:hover { animation:boing 650ms cubic-bezier(.2,.8,.2,1); }
@keyframes boing { 25% { transform:rotate(-18deg) translateY(-24px) scale(1.1,.85); } 55% { transform:rotate(12deg) translateY(3px) scale(.9,1.1); } 80% { transform:rotate(-5deg); } }

.wiggle { position:absolute; top:240px; right:5%; transform:rotate(13deg); border:3px solid #283125; border-radius:50%; width:100px; height:100px; background:#e3e86a; color:#283125; font:700 20px Nunito,sans-serif; cursor:pointer; transition:transform 200ms cubic-bezier(.19,1,.22,1); }
.wiggle:focus-visible { outline:3px solid #df461f; outline-offset:4px; }
@media(hover:hover) { .wiggle:hover { transform:rotate(-12deg) scale(1.02); } }
.wiggle:active { transform:rotate(13deg) scale(.97); }

.intro-copy { margin:28px 0 0 8%; max-width:440px; font-size:21px; line-height:1.5; }
.intro-copy p { margin:0 0 12px; }
.intro-copy a { display:inline-block; margin-top:16px; font-weight:700; text-decoration-thickness:2px; }
.ifx-hello { font-size:17px; margin:16px 0 0; padding:12px 14px; border:2px dashed #4252ad; background:#fffefa; transform:rotate(-1deg); }
.ifx-hello a { margin-top:0; display:inline; }

.icon-links { display:flex; flex-wrap:wrap; gap:16px; margin:32px 0 0 8%; }
.icon-link { display:grid; place-items:center; width:48px; height:48px; min-width:44px; min-height:44px; border:3px solid #283125; background:#fffefa; color:#283125; box-shadow:4px 4px 0 #4252ad; transition:transform 150ms ease,background 150ms ease,color 150ms ease; }
.icon-link svg { width:24px; height:24px; }
.icon-link:focus-visible { outline:3px solid #df461f; outline-offset:4px; }
@media(hover:hover) { .icon-link:hover { transform:translate(-2px,-2px); background:#e3e86a; } }

.stack-strip { pointer-events:none; position:absolute; top:auto; left:auto; right:calc(10% - 70px); bottom:30px; width:280px; height:280px; padding:0; border:0; background:none; box-shadow:none; }
.stack-strip::before, .stack-strip::after { content:''; position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; }
.stack-strip::before { width:252px; height:122px; margin:-61px 0 0 -126px; border:2.5px dashed #28312566; transform:rotate(-14deg); animation:swirl-a 16s ease-in-out infinite alternate; }
.stack-strip::after { width:232px; height:112px; margin:-56px 0 0 -116px; border:2.5px solid #4252ad55; transform:rotate(10deg); animation:swirl-b 19s ease-in-out infinite alternate-reverse; }
@keyframes swirl-a { from { transform:rotate(-21deg) scale(1); } to { transform:rotate(-7deg) scale(1.06); } }
@keyframes swirl-b { from { transform:rotate(15deg) scale(1.05); } to { transform:rotate(3deg) scale(.96); } }
.stack-logo { pointer-events:auto; position:absolute; display:grid; place-items:center; width:46px; height:46px; background:#fffefa; border:2.5px solid #283125; border-radius:50%; box-shadow:3px 3px 0 #283125; text-decoration:none; animation:dizzy calc(4.6s + var(--i,0)*0.65s) ease-in-out infinite alternate; animation-delay:calc(var(--i,0) * -1.7s); transition:scale 150ms ease; }
.stack-logo:nth-of-type(1) { top:1%; left:37%; width:48px; height:48px; }
.stack-logo:nth-of-type(2) { top:24%; left:76%; width:42px; height:42px; }
.stack-logo:nth-of-type(3) { top:60%; left:80%; width:46px; height:46px; }
.stack-logo:nth-of-type(4) { top:78%; left:52%; width:42px; height:42px; }
.stack-logo:nth-of-type(5) { top:62%; left:6%; width:48px; height:48px; }
.stack-logo:nth-of-type(6) { top:16%; left:4%; width:44px; height:44px; }
.stack-logo svg, .stack-logo img { width:26px; height:26px; display:block; }
.stack-logo:hover { scale:1.18; }
.stack-logo:focus-visible { outline:3px solid #df461f; outline-offset:3px; }
.stack-strip:hover::before, .stack-strip:hover::after, .stack-strip:hover .stack-logo,
.stack-strip:focus-within::before, .stack-strip:focus-within::after, .stack-strip:focus-within .stack-logo { animation-play-state:paused; }
.stack-strip.is-zoom::before, .stack-strip.is-zoom::after { animation-duration:2s; }
.stack-strip.is-zoom .stack-logo { animation-duration:1.1s; }
@keyframes dizzy { from { translate:0 0; rotate:-9deg; scale:1; } 50% { translate:7px -11px; rotate:7deg; scale:1.07; } to { translate:-8px 9px; rotate:-5deg; scale:.96; } }

.eyes { position:absolute; right:10%; bottom:120px; display:flex; gap:8px; background:#fff6dc; border:3px solid #283125; border-radius:999px; padding:14px 18px; transform:rotate(12deg); cursor:pointer; box-shadow:6px 6px 0 #283125; }
.eyes>span { display:grid; place-items:center; width:62px; height:83px; border:3px solid #283125; border-radius:50%; background:#fffefa; transition:scale 120ms ease; }
.eyes i { display:block; width:22px; height:30px; background:#283125; border-radius:50%; transition:transform 80ms linear; }
.eyes.is-blink>span { scale:1 .12; }
.eyes:active>span { scale:1 .15; }

.experiments { padding:40px 0 70px; }
.experiments h2,.small-writing h2 { font-family:'Bagel Fat One',sans-serif; font-weight:400; font-size:clamp(30px,5vw,58px); line-height:1.15; }
.section-lede { max-width:52ch; font-size:18px; margin:14px 0 36px; }
.section-kicker { font-family:'Bungee Shade',cursive; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:#df461f; margin:0 0 8px; }

.experiment-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 64px; }
.experiment-list > .ifx-spotlight,
.experiment-list > .wp-lab { grid-column:1 / -1; }

.ifx-spotlight { display:grid; grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr); gap:40px 48px; padding:36px 0 48px; border-top:4px solid #283125; border-bottom:4px solid #283125; align-items:start; }
.ifx-copy h3 { font-size:clamp(28px,4vw,42px); margin:0 0 12px; }
.ifx-copy h3 a { color:#4252ad; text-decoration-thickness:3px; }
.ifx-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:15px; color:#5d5245; }
.ifx-meta a { font-weight:700; }
.gh-icon { display:inline-grid; place-items:center; width:28px; height:28px; color:#283125; border:2px solid currentColor; border-radius:50%; text-decoration:none !important; transition:transform 150ms ease, color 150ms ease, background 150ms ease; }
.gh-icon svg { width:17px; height:17px; }
.gh-icon:hover,.gh-icon:focus-visible { color:#4252ad; background:#e3e86a; transform:translateY(-2px); }
.gh-icon:focus-visible { outline:3px solid #df461f; outline-offset:3px; }
.ifx-facts { display:flex; flex-wrap:wrap; gap:7px; margin:24px 0 20px; }
.ifx-facts span { padding:7px 9px; background:#fffefa; border:1px solid #28312566; font:500 11px 'DM Mono',monospace; }
.ifx-facts span:first-child { background:#e3e86a; border-color:#283125; }
.ifx-stage { display:flex; flex-direction:column; gap:20px; }
.ifx-card { width:100%; height:auto; border:3px solid #283125; box-shadow:8px 8px 0 #4252ad; transform:rotate(-1.5deg); }

.wp-lab { padding:36px 0 48px; border-top:4px solid #283125; border-bottom:4px solid #283125; background:linear-gradient(165deg,#4252ad12 0%,#fff6dc 45%,#e3e86a33 100%); }
.wp-lab h3 { font-family:'Bagel Fat One',sans-serif; font-weight:400; font-size:clamp(28px,4.5vw,48px); margin:0 0 12px; color:#4252ad; }
.wp-lab-lede { max-width:58ch; font-size:18px; line-height:1.5; margin:0 0 28px; }
.wp-repo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 32px; margin-bottom:32px; }
.wp-repo { padding:18px 16px 20px; background:#fffefa; border:3px solid #283125; box-shadow:6px 6px 0 #283125; transform:rotate(-.5deg); }
.wp-repo:nth-child(2) { transform:rotate(.8deg); box-shadow:6px 6px 0 #4252ad; }
.wp-repo:nth-child(3) { transform:rotate(-1deg); box-shadow:6px 6px 0 #df461f; }
.wp-repo h4 { font-size:20px; margin:0 0 10px; overflow-wrap:anywhere; }
.wp-repo h4 a { color:#283125; text-decoration-thickness:2px; }
.wp-repo>p { font-size:16px; line-height:1.45; margin:0 0 10px; }
.wp-posts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
.wp-post { min-width:0; }
.wp-post .twitter-tweet { margin:0; padding:18px 20px; background:#fffefa; border:3px solid #283125; box-shadow:5px 5px 0 #4252ad; font-size:16px; line-height:1.5; }
.wp-post .twitter-tweet p { margin:0 0 10px; }
.wp-post iframe { max-width:100%; }

.experiment { padding:8px 0 0; display:grid; grid-template-columns:1fr; gap:10px; align-items:start; border-top:2px solid #28312566; }
.experiment:nth-of-type(even) { margin-left:0; }
.experiment h3 { font-size:24px; overflow-wrap:anywhere; margin:0 0 6px; }
.experiment>p { max-width:42ch; font-size:18px; margin:0; }
.experiment-meta { display:flex; align-items:center; gap:10px; font-size:14px; margin:0; color:#5d5245; }
.experiment-meta a { font-weight:700; }
.used-by { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin:0; font-size:13px; font-weight:700; color:#5d5245; }
.used-by a { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fffefa; border:2px solid #283125; overflow:hidden; margin-left:-12px; box-shadow:2px 2px 0 #283125; transition:scale 150ms ease; }
.used-by a:first-of-type { margin-left:0; }
.used-by a:hover { scale:1.15; }
.used-by a:focus-visible { outline:3px solid #df461f; outline-offset:2px; }
.used-by img { width:28px; height:28px; display:block; object-fit:contain; }
.used-by a { animation:used-by-wiggle 5.6s ease-in-out infinite; animation-delay:calc(var(--i) * -0.7s); }
@keyframes used-by-wiggle { 0%,72%,100% { transform:rotate(0deg) translateY(0); } 76% { transform:rotate(-4deg) translateY(-1px); } 80% { transform:rotate(3deg) translateY(0); } 84% { transform:rotate(-2deg) translateY(-1px); } 88% { transform:rotate(0deg) translateY(0); } }
.used-by a:hover,.used-by a:focus-visible { animation-play-state:paused; }
.experiment>a { text-decoration-thickness:2px; }
.experiment .strike-spec,.experiment .code-morph,.experiment .stamp-row,.experiment .night-bar { justify-self:start; max-width:100%; align-self:center; }

.strike-spec { font-family:'DM Mono',monospace; font-size:16px; background:#e3e86a; padding:28px; border:2px solid #283125; text-align:left; cursor:pointer; width:min(100%,300px); }
.strike-spec.is-pruned del { opacity:.25; text-decoration:line-through; }

.code-morph { font-family:'DM Mono',monospace; background:#f1ccd9; padding:30px 20px; font-size:17px; border:2px solid #283125; cursor:pointer; width:min(100%,320px); text-align:left; }
.code-morph.is-trimmed [data-trim-before] { opacity:.35; }
.trim-arrow { margin:0 6px; }

.stamp-row { display:flex; gap:12px; flex-wrap:wrap; padding:10px 0; }
.stamp-hit { font-family:'Bagel Fat One',sans-serif; font-size:22px; padding:14px 20px; border:3px solid #283125; background:#fffefa; cursor:pointer; transform:rotate(-4deg); }
.stamp-hit.is-stamped { background:#df461f; color:#fff6dc; animation:stamp-slam 400ms cubic-bezier(.2,.8,.2,1); }
@keyframes stamp-slam { 0% { transform:scale(1.3) rotate(-12deg); } 100% { transform:rotate(-4deg); } }

.night-bar { display:flex; justify-content:space-between; gap:16px; width:min(100%,300px); padding:35px 22px; font-size:18px; border:2px solid #283125; background:#fffefa; color:#283125; cursor:pointer; text-align:left; animation:night-card-wiggle 4.8s ease-in-out infinite; }
.night-bar.is-dreaming { background:#283125; color:#e3e86a; border-color:#283125; }
.night-bar i { font-style:normal; color:#4252ad; display:inline-block; }
.night-bar.is-dreaming i { color:#e3e86a; animation:moon-hop 1.2s ease-in-out infinite alternate; }
@keyframes moon-hop { to { transform:translateY(-4px); } }
@keyframes night-card-wiggle { 0%,78%,100% { transform:rotate(0deg); } 82% { transform:rotate(-1.2deg) translateY(-2px); } 86% { transform:rotate(1.2deg); } 90% { transform:rotate(-.5deg); } }
.night-bar:active { transform:scale(.98); }
.bubble-screensaver { position:fixed; inset:0; z-index:5; pointer-events:none; }

.strike-spec:focus-visible,.code-morph:focus-visible,.night-bar:focus-visible,.eyes:focus-visible,.icon-link:focus-visible,.experiment a:focus-visible { outline:3px solid #4252ad; outline-offset:3px; }

.stars { font-size:.65em; font-weight:600; color:#5d5245; vertical-align:middle; }

.small-writing { max-width:700px; padding:50px 0 90px; }
.small-writing h2 { font-size:36px; }
.small-writing ul { list-style:none; padding:0; }
.small-writing li { display:flex; justify-content:space-between; gap:24px; padding:15px 0; border-bottom:1px solid rgba(40,49,37,.15); }
.small-writing time { font-size:14px; color:#5d5245; flex-shrink:0; }

.personal-footer { display:flex; flex-wrap:wrap; gap:20px 30px; padding:30px 0 50px; align-items:center; border-top:3px solid #283125; }
.personal-footer p { margin-right:auto; font-weight:700; }

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .experiment:hover .stamp-hit:not(.is-stamped) { animation:wiggle-stamp 800ms ease-in-out infinite alternate; }
}
@keyframes wiggle-stamp { to { transform:rotate(6deg) translateY(-3px); } }

@media(max-width:900px) {
  .ifx-spotlight { grid-template-columns:1fr; }
  .wp-repo-grid { grid-template-columns:minmax(0,1fr); }
  .wp-posts { grid-template-columns:1fr; }
  .experiment-list { grid-template-columns:minmax(0,1fr); gap:42px; }
  .experiment,.experiment:nth-of-type(even) { margin-left:0; }
  .experiment .strike-spec,.experiment .code-morph,.experiment .stamp-row,.experiment .night-bar { justify-self:stretch; }
}

@media(max-width:650px) {
  .hello { min-height:auto; padding-top:24px; padding-bottom:140px; }
  .hello-note { font-size:22px; margin-bottom:8px; }
  .hello h1 { font-size:clamp(54px,15vw,100px); }
  .bubble-field { top:76%; right:50%; bottom:105px; left:0; }
  .hello h1 { font-size:clamp(58px,16vw,100px); }
  .surname { margin-left:12%; }
  .wiggle { top:210px; right:0; width:68px; height:68px; font-size:16px; }
  .intro-copy { margin:24px 0 0; max-width:92%; font-size:18px; }
  .ifx-hello { margin-top:12px; padding:10px 12px; }
  .intro-copy a { margin-top:12px; }
  .icon-links { margin:20px 0 0; margin-left:0; gap:12px; }
  .eyes { bottom:12px; right:5%; padding:8px 10px; }
  .eyes>span { width:43px; height:57px; }
  .eyes i { width:16px; height:22px; }
  .bubble.b0,.bubble.b2,.bubble.b4,.bubble.b6 { display:none; }
  .stack-strip { display:none; }
  .stack-logo svg, .stack-logo img { width:24px; height:24px; }
  .doodle { font-size:11px; padding:6px 10px; }
  .d3 { bottom:8%; left:2%; }
  .small-writing li { font-size:16px; flex-direction:column; gap:4px; }
}

@media(prefers-reduced-motion:reduce) {
  .name-line>span:hover { animation:none; }
  .doodle,.bubble,.stack-strip::before,.stack-strip::after,.stack-logo,.used-by a,.hello-note,.night-bar,.night-bar.is-dreaming i { animation:none; }
  .bubble.is-popped { transform:none; }
}