/* An editorial personal introduction, followed by the interactive tool tray. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.about.about-playful{position:relative;isolation:isolate;margin:0;padding:106px 8% 55px;border-bottom:0;text-align:center;background:linear-gradient(180deg,#f3faff 0,#fff 24%)}
.about-eyebrow{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:23px;border-bottom:1px solid #dce9ef}
.about-playful .section-label{font-size:12px;letter-spacing:.075em;gap:16px;color:#547387}
.about-place{display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.08em;color:#6d8b9c}
.about-place>span{color:#24ace0}
.about-centered{margin:57px auto 0;max-width:1040px}
.about.about-playful .about-centered h2{font-size:clamp(68px,7.3vw,106px);line-height:1.02;letter-spacing:-.04em;margin:0 0 56px;font-weight:400}
.about-centered h2>span,.about-centered h2>em{display:block}
.about.about-playful .about-centered h2 em{color:#328eb2;position:relative}
.about-bio{display:grid;grid-template-columns:190px minmax(0,1fr) 164px;gap:46px;text-align:left;align-items:center;padding:30px 0;border-top:1px solid #dce9ef;border-bottom:1px solid #dce9ef}
.about-identity{display:flex;flex-direction:column;align-items:flex-start}
.about-small-label{font-size:11px;letter-spacing:.1em;color:#7290a1;margin-bottom:10px}
.about-name{font:400 36px/.96 var(--serif);letter-spacing:-.035em;color:#182d38}
.about-name em{font-size:46px;color:#328eb2}
.about-role{font-size:12px;line-height:1.6;color:#638195;margin-top:15px}
.about.about-playful .about-story p{margin:0 0 22px;font-size:18px;line-height:1.75;color:#5c798d;text-wrap:pretty;max-width:none}
.about-story strong{font-weight:500;color:#243f4c}
.about.about-playful .about-story p.about-ai-note{margin-top:12px;font-size:15px;line-height:1.7;color:#7893a4}
.about-centered .text-link{font-size:14px;gap:36px;padding:4px 0 10px}
.about-experience{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:28px;border-left:1px solid #dce9ef}
.about-years{font:400 77px/.85 var(--serif);letter-spacing:-.055em;color:#328eb2}
.about-years>span{font-size:35px;vertical-align:top;margin-left:5px;line-height:1}
.about-experience>span:nth-child(2){font-size:10px;line-height:1.65;letter-spacing:.065em;color:#638195;margin-top:15px}
.about-experience>em{font:italic 22px/1.2 var(--serif);color:#328eb2;margin-top:15px;white-space:nowrap}
.tools-playground{max-width:920px;margin:38px auto 0;text-align:left}
.tools-arena{--tile-size:88px;position:relative;isolation:isolate;z-index:2;height:320px;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;align-items:flex-end;gap:16px;padding:30px 16px 20px;overflow:visible}
.tools-arena.is-physics-ready{display:block;padding:0}
.tool-tile{position:relative;flex:0 0 var(--tile-size);width:var(--tile-size);height:var(--tile-size);padding:0;border:0;border-radius:calc(var(--tile-size)*.22);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #ffffff24,inset 0 -3px 0 #00000007,0 5px 7px #284d6210;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:rotate(-8deg);color:white;background:#095cff}
.tool-tile:nth-child(2n){transform:rotate(12deg)}
.tool-tile:nth-child(3n){transform:rotate(-18deg)}
.tool-tile img{display:block;width:53%;height:53%;pointer-events:none;filter:brightness(0) invert(1)}
.tool-next{background:#111318}.tool-figma{background:#c650f9}.tool-wordpress{background:#21759b}.tool-css{background:#68349b}.tool-html{background:#ee5125}.tool-react{background:#55d1ee}.tool-js{background:#f5d914}.tool-js img{filter:brightness(0);opacity:.87}
.tool-claude{background:#d97757}.tool-chatgpt{background:#168b75}.tool-figma-make{background:#3f59d9}.tool-lovable{background:#ed5d79}
.tool-research{background:#e98354}.tool-flows{background:#6860d8}.tool-systems{background:#2d75c6}.tool-prototype{background:#23aab1}.tool-brand{background:#e56f99}
.tool-name{position:absolute;inset:auto 0 6px;text-align:center;font-size:10px;font-weight:500;letter-spacing:.02em;pointer-events:none;opacity:0;transition:opacity .2s}
.tool-tile:hover .tool-name,.tool-tile:focus-visible .tool-name{opacity:1}
.tool-tile.is-grabbed{cursor:grabbing;z-index:3}
.tool-tile:focus-visible{outline:3px solid #142f44;outline-offset:4px;z-index:4}
.tool-tile.is-pointer-focused,.tool-tile.is-grabbed{outline:0 solid transparent;outline-offset:0}
.tool-tile.is-pointer-focused .tool-name,.tool-tile.is-grabbed .tool-name{opacity:0}
.tool-tile:disabled{cursor:default;opacity:1}
.tools-arena.is-physics-ready .tool-tile{position:absolute;left:0;top:0;visibility:hidden;will-change:transform}
.tools-arena.is-physics-ready .tool-tile.is-released{visibility:visible;animation:tool-arrive .18s ease-out both}
@keyframes tool-arrive{from{opacity:0}to{opacity:1}}
.tools-playground-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 3px 0;min-height:50px;color:#7893a4;font-size:12px}
.tools-playground-caption p{display:inline-flex;align-items:center;gap:8px;margin:0}
.tools-playground-caption svg{width:15px;height:15px;flex-shrink:0}
.tools-reset{display:inline-flex;align-items:center;gap:7px;padding:8px 0 8px 12px;border:0;background:none;color:#5c798d;font-size:12px;white-space:nowrap}
.tools-reset:hover{color:#0084bc}
@media(max-width:1100px){.about.about-playful{padding:90px 6% 48px}.about-centered{margin-top:45px}.about-bio{grid-template-columns:160px minmax(0,1fr) 140px;gap:30px}.about-experience{padding-left:20px}.about.about-playful .about-centered h2{font-size:clamp(65px,8vw,90px);margin-bottom:44px}.about.about-playful .about-story p{font-size:17px}.about-place{font-size:10px;letter-spacing:.05em}.tools-arena{--tile-size:76px;height:300px;gap:13px}}
@media(max-width:760px){.about.about-playful{padding:64px 24px 36px}.about-eyebrow{gap:15px;padding-bottom:18px}.about-playful .section-label{font-size:11px;gap:8px;letter-spacing:.035em}.about-place{font-size:9px;letter-spacing:.04em}.about-place>span,.about-place{display:none}.about-centered{margin-top:38px}.about.about-playful .about-centered h2{font-size:clamp(42px,8.8vw,68px);line-height:1.08;letter-spacing:-.038em;margin-bottom:35px}.about-bio{grid-template-columns:1fr 1fr;gap:27px 20px;padding:24px 0 28px}.about-identity{grid-column:1;grid-row:1}.about-name{font-size:32px}.about-name em{font-size:41px}.about-role{font-size:11px;margin-top:12px}.about-experience{grid-column:2;grid-row:1;justify-self:end;padding-left:23px;width:143px}.about-years{font-size:64px}.about-years>span{font-size:28px}.about-experience>span:nth-child(2){font-size:9px;margin-top:12px}.about-experience>em{font-size:20px;margin-top:12px}.about-story{grid-column:1/-1;grid-row:2}.about.about-playful .about-story p{font-size:16px;line-height:1.75;margin:0 0 20px;max-width:none}.about-centered .text-link{gap:32px}.tools-playground{margin-top:24px}.tools-arena{--tile-size:60px;height:285px;gap:13px;padding:20px 8px}.tools-playground-caption{font-size:11px;padding-top:13px}.tools-reset{font-size:11px}.tool-name{font-size:8px;bottom:4px}}
@media(max-width:380px){.about.about-playful{padding-left:18px;padding-right:18px}.about.about-playful .about-centered h2{font-size:40px}.about-experience{width:130px;padding-left:19px}.tools-arena{--tile-size:56px;height:285px}.tools-playground-caption{gap:8px;font-size:10px}.tools-reset{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tool-tile{will-change:auto!important}.tool-name{opacity:1}.tools-playground-caption p{display:none}}

/* Living sketchbook: open typography and personal annotations, not cards. */
.about.about-playful{background:radial-gradient(ellipse at 50% 20%,#e9f8ff80,transparent 55%),#fff;padding-top:100px}
.about-eyebrow{border:0;justify-content:center;padding-bottom:0}
.about-eyebrow .section-label{border:0;border-radius:0;padding:0;background:none;font-size:12px}
.about-place{display:none}
.about-centered{margin-top:48px;max-width:1100px}
.about-sketch{position:relative;padding:12px 0 36px}
.about.about-playful .about-centered h2{margin:0;font-size:clamp(70px,7.4vw,110px);line-height:1.08;letter-spacing:-.045em}
.about-centered h2>.sketch-mind{text-align:left;padding-left:10%;transform:rotate(-2deg)}
.sketch-mind b{font-weight:400;background:#d9f3fe;border-radius:55% 45% 50% 45%;padding:0 .12em}
.about-centered h2>.sketch-hands{text-align:right;padding-right:8%;margin-top:5px;transform:rotate(1deg)}
.about.about-playful .about-centered h2>.sketch-soul{display:table;margin:10px auto 0;font-size:1.16em;color:#1687b5;transform:rotate(-3deg);padding:0 .08em .06em}
.sketch-soul:after{content:"";position:absolute;bottom:-3px;left:8%;width:84%;height:12px;border-bottom:2px solid #23afe0;border-radius:50%;transform:scaleX(0);transform-origin:left;transition:transform 1s .45s cubic-bezier(.2,.7,.2,1)}
#about-title.is-visible .sketch-soul:after{transform:scaleX(1)}
.sketch-annotations{pointer-events:none}
.sketch-location{position:absolute;left:0;bottom:20px;text-align:left;font:22px/1.2 var(--serif);color:#54798c;transform:rotate(-8deg)}
.sketch-location em{color:#1687b5}
.sketch-craft{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:137px;height:137px;border:1px solid #80cce8;border-radius:50%;color:#1687b5;transform:rotate(9deg);background:#e5f7ff70;box-shadow:inset 0 0 0 6px #fff9}
.sketch-craft strong{font:400 61px/.9 var(--serif);letter-spacing:-.06em}
.sketch-craft>span{font:italic 20px/1.2 var(--serif);margin-top:8px}
.about-bio{display:block;border:0;padding:30px 0 0;max-width:665px;margin:0 auto;text-align:center}
.about.about-playful .about-story p{font-size:18px;line-height:1.8;margin-bottom:21px}
.about-story strong{color:#162e3b;font-weight:550}
.tools-playground{margin-top:0}
.tools-arena{height:245px}
.sketch-craft{width:192px;height:108px;display:grid;grid-template-columns:42% 58%;grid-template-rows:1fr;gap:0;border:1px solid #9cd7eb;border-radius:15px;color:#1687b5;transform:rotate(5deg);background:linear-gradient(90deg,#def5fd 0 42%,#fff 42% 100%);box-shadow:5px 6px 0 #dff3fb,inset 0 0 0 3px #ffffff}
.sketch-craft strong{grid-column:1;grid-row:1;align-self:center;justify-self:center;font:400 57px/.9 var(--serif);letter-spacing:-.06em}
.sketch-craft strong sup{font:400 22px/1 var(--sans);vertical-align:top;margin-left:1px}
.sketch-craft>span{grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:7px;padding:0 0 0 10px}
.sketch-craft>span b{font:600 10px/1 var(--sans);letter-spacing:.1em;color:#638195}
.sketch-craft>span small{font:500 12px/1.45 var(--sans);letter-spacing:.035em;color:#294a5b}
.sketch-craft>i{position:absolute;right:9px;top:7px;font:14px/1 var(--sans);color:#27a8d4}
.tools-arena{height:300px;border-bottom:0}
@media(max-width:1100px){.about.about-playful{padding-top:85px}.about-centered{margin-top:42px}.about.about-playful .about-centered h2{font-size:clamp(65px,7.5vw,88px)}.sketch-craft{width:176px;height:98px;right:-12px}.sketch-craft strong{font-size:53px}.sketch-craft>span b{font-size:9px}.sketch-craft>span small{font-size:11px}.sketch-location{font-size:19px;left:-10px;bottom:8px}.about-bio{max-width:600px;padding-top:38px}}
@media(max-width:760px){.about.about-playful{padding-top:64px}.about-centered{margin-top:32px}.about-sketch{padding:0}.about.about-playful .about-centered h2{font-size:clamp(40px,8.5vw,62px);line-height:1.15;letter-spacing:-.04em}.about-centered h2>.sketch-mind{padding-left:0}.about-centered h2>.sketch-hands{padding-right:0;margin-top:9px}.about.about-playful .about-centered h2>.sketch-soul{font-size:1.15em;margin-top:14px}.sketch-soul:after{height:7px}.sketch-annotations{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:36px 4px 0}.sketch-location{position:static;font-size:18px}.sketch-craft{position:static;width:156px;height:88px;flex-shrink:0}.sketch-craft strong{font-size:47px}.sketch-craft strong sup{font-size:18px}.sketch-craft>span{padding-left:5px;gap:6px}.sketch-craft>span b{font-size:9px}.sketch-craft>span small{font-size:10px}.sketch-craft>i{right:7px;top:6px;font-size:11px}.about-bio{padding-top:31px}.about.about-playful .about-story p{font-size:16px;line-height:1.8}.about.about-playful .about-story p.about-ai-note{font-size:14px}.tools-playground{margin-top:0}.tools-arena{height:330px}}
@media(prefers-reduced-motion:reduce){.sketch-soul:after{transform:scaleX(1);transition:none}}

/* Light-blue editorial notes around the original About headline. */
.about.about-playful{background:radial-gradient(ellipse at 50% 18%,#e7f8ffb5,transparent 55%),#fff}
.about-editorial{max-width:1100px;margin-inline:auto;padding:12px 0 20px}
.about.about-playful .about-editorial h2{position:relative;z-index:1;margin:0;font-size:clamp(70px,7.4vw,110px);line-height:1.08;letter-spacing:-.045em;text-align:center}
.about-editorial .sketch-mind{text-align:left!important;padding-left:10%!important;transform:rotate(-2deg)!important}
.about-editorial .sketch-mind b{font-weight:400!important;background:#d9f3fe!important;border-radius:55% 45% 50% 45%!important;padding:0 .12em!important;color:#18303b}
.about-editorial .sketch-hands{text-align:right!important;padding-right:8%!important;margin-top:5px!important;transform:rotate(1deg)!important}
.about.about-playful .about-editorial h2>.sketch-soul{display:table;margin:10px auto 0!important;font-size:1.16em;color:#1687b5;transform:rotate(-3deg)!important;padding:0 .08em .06em!important}
.about-editorial .sketch-soul:after{border-color:#51bce4}
.about-stickers{position:absolute;inset:0;z-index:2;pointer-events:none}
.about-sticker{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #c6e6f4;border-radius:999px;background:#f4fbffed;color:#356d86;box-shadow:0 8px 20px #318db31a;font:500 12px/1 var(--sans);white-space:nowrap;backdrop-filter:blur(8px);animation:about-sticker-float 5.5s ease-in-out infinite}
.about-sticker i{font:18px/1 var(--sans);color:#27a9d8;font-style:normal}
.about-sticker-intent{left:-1%;top:38%;transform:rotate(-7deg)}
.about-sticker-built{right:-1%;top:67%;transform:rotate(6deg);animation-delay:-2.4s}
@keyframes about-sticker-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.about-editorial .sketch-annotations{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 0;padding:0 10px;pointer-events:none}
.about-editorial .sketch-location{position:static;display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #cfe9f5;border-radius:999px;background:#f4fbff;color:#5c8294;font:500 10px/1 var(--sans);letter-spacing:.08em;transform:rotate(-3deg)}
.about-editorial .sketch-location i{font-style:normal;color:#49afd3}
.about-editorial .sketch-craft{position:static;display:inline-flex;align-items:center;gap:13px;width:auto;height:auto;padding:9px 17px 10px 12px;border:1px solid #a9d9ec;border-radius:17px;color:#176b8c;transform:rotate(3deg);background:linear-gradient(135deg,#e6f7ff,#f8fcff);box-shadow:0 7px 0 #75bfda2b,inset 0 1px 0 #fff}
.about-editorial .sketch-craft strong{font:400 38px/.9 var(--serif);letter-spacing:-.07em;color:#1789b4}
.about-editorial .sketch-craft strong sup{font:400 17px/1 var(--sans);vertical-align:top;margin-left:1px}
.about-editorial .sketch-craft>span{display:flex;flex-direction:column;gap:4px;margin:0;padding:0}
.about-editorial .sketch-craft>span b{font:600 9px/1 var(--sans);letter-spacing:.07em;color:#58849a}
.about-editorial .sketch-craft>span small{font:600 10px/1.2 var(--sans);letter-spacing:.035em;color:#24556b}
.about-editorial .about-bio{max-width:900px;padding-top:35px}
.about-editorial .about-story p:first-child{max-width:800px;margin-inline:auto}
@media(max-width:1100px){.about-sticker-intent{left:0;top:31%}.about-sticker-built{right:0;top:70%}}
@media(max-width:760px){
 .about-editorial{padding:0}
 .about.about-playful .about-editorial h2{font-size:clamp(40px,8.5vw,62px);line-height:1.15;letter-spacing:-.04em}
 .about-editorial .sketch-mind{padding-left:0!important}
 .about-editorial .sketch-hands{padding-right:0!important;margin-top:9px!important}
 .about.about-playful .about-editorial h2>.sketch-soul{font-size:1.15em;margin-top:14px!important}
 .about-stickers{position:static;display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:24px}
 .about-sticker{position:static;padding:8px 11px;font-size:11px}
 .about-sticker i{font-size:15px}
 .about-editorial .sketch-annotations{align-items:center;gap:10px;margin-top:20px;padding:0}
 .about-editorial .sketch-location{padding:8px 10px;font-size:9px;letter-spacing:.04em}
 .about-editorial .sketch-craft{gap:9px;padding:8px 12px 9px 10px;border-radius:14px}
 .about-editorial .sketch-craft strong{font-size:30px}
 .about-editorial .sketch-craft strong sup{font-size:13px}
 .about-editorial .sketch-craft>span b{font-size:8px}
 .about-editorial .sketch-craft>span small{font-size:9px}
 .about-editorial .about-bio{max-width:600px;padding-top:28px}
 .about-editorial .about-story p:first-child{max-width:none}
}
@media(max-width:390px){.about-editorial .sketch-annotations{flex-wrap:wrap;align-items:center}.about-editorial .sketch-location{font-size:8px}.about-editorial .sketch-craft{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.about-sticker{animation:none}}

/* Carry a faint wash of the same sky into About so the hero fades across the seam. */
.about.about-playful{background:linear-gradient(180deg,#fff 0,#f5fbfe 180px,#fff 440px)}
.about.about-playful::before{content:"";position:absolute;z-index:-1;top:-185px;left:0;right:0;height:470px;pointer-events:none;background:url("assets/hero-sky-9447.jpg") center bottom/cover no-repeat;opacity:.24;mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 58%,transparent 100%)}
.about-sticker i .sparkle-mark{width:18px;height:18px;color:#27a9d8}
@media(max-width:760px){.about-sticker i .sparkle-mark{width:15px;height:15px}}

/* Keep the hand-drawn underline beneath the final About line continuous. */
.about-editorial .sketch-soul::after{
  left:4%;
  bottom:-1px;
  width:92%;
  height:3px;
  border:0;
  border-radius:999px;
  background:#51bce4;
  transform:scaleX(0) rotate(-1deg);
  transform-origin:left center;
}
#about-title.is-visible .sketch-soul::after{
  transform:scaleX(1) rotate(-1deg);
}
@media(max-width:760px){
  .about-editorial .sketch-soul::after{bottom:0;height:2px}
}
@media(prefers-reduced-motion:reduce){
  .about-editorial .sketch-soul::after{transform:scaleX(1) rotate(-1deg)}
}