@font-face{font-family:Alte;src:url('/brand/Alte-Haas-Grotesk-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Tomkin;src:url('/brand/Tomkin-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Tomkin;src:url('/brand/Tomkin-Medium.ttf') format('truetype');font-style:normal;font-weight:500 900;font-display:swap}
:root{--wolii-accent:#6432ff}
body,body p,body span,body a,body input,body textarea,body button{font-family:Tomkin,sans-serif!important}
body h1,body h2,body h3,body h4,body h1 span,body h2 span,body h3 span{font-family:Alte,sans-serif!important;font-weight:700!important}
nav a,button,[data-framer-name="Navigation"] a{font-weight:500!important}
::selection{background:#6432ff;color:white}
a:hover{color:#6432ff!important}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #6432ff!important;outline-offset:4px}
h1[aria-label="GABRIEL"],h1[aria-label="by wolii"]{position:relative!important;min-height:clamp(100px,13vw,190px);overflow:visible!important}
h1[aria-label="GABRIEL"]>*,h1[aria-label="by wolii"]>*{visibility:hidden!important}
h1[aria-label="GABRIEL"]::after,h1[aria-label="by wolii"]::after{content:'';position:absolute;inset:0;background:url('/brand/by-wolii.svg') left center/contain no-repeat;animation:wolii-reveal 1.3s ease-out both;transition:filter .65s ease,transform .65s ease}
h1[aria-label="by wolii"]:hover::after{filter:blur(5px);transform:translateY(-2px)}
@keyframes wolii-reveal{from{filter:blur(18px);opacity:0;transform:translateY(12px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}
a[href*="madebythanh.lemonsqueezy.com"]{display:none!important}
#wolii-seal{position:fixed;bottom:24px;right:24px;width:62px;height:62px;z-index:1000;border:2px solid #6432ff;border-radius:50%;background:white;box-shadow:0 4px 20px #6432ff20;pointer-events:none}
#wolii-seal img{position:absolute;inset:5px;width:48px;height:48px;opacity:0;animation:wolii-cycle 12s linear infinite;object-fit:contain}
#wolii-seal img:nth-child(2){animation-delay:-9s}#wolii-seal img:nth-child(3){animation-delay:-6s}#wolii-seal img:nth-child(4){animation-delay:-3s}
@keyframes wolii-cycle{0%,20%{opacity:1;filter:blur(0);transform:scale(1)}25%,95%{opacity:0;filter:blur(3px);transform:scale(.94)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@media(max-width:600px){#wolii-seal{width:46px;height:46px;bottom:14px;right:14px}#wolii-seal img{inset:3px;width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){#wolii-seal img{animation:none;opacity:0}#wolii-seal img:first-child{opacity:1}h1[aria-label="by wolii"]::after{animation:none;transition:none}h1[aria-label="by wolii"]:hover::after{filter:none;transform:none}}
/* Compact signature and centered animated mark replacing the homepage photo stack. */
h1[aria-label="GABRIEL"],h1[aria-label="by wolii"]{min-height:72px!important;height:clamp(72px,8vw,112px)!important}
h1[aria-label="GABRIEL"]::after,h1[aria-label="by wolii"]::after{background-size:auto 85%;background-position:left center}
body.wolii-home [data-framer-name="Profile Image"]{display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;min-height:260px!important}
body.wolii-home [data-framer-name="Profile Image"]>*:not(#wolii-seal){display:none!important}
body.wolii-home #wolii-seal{position:relative!important;inset:auto!important;width:clamp(160px,19vw,280px)!important;height:clamp(160px,19vw,280px)!important;margin:auto;border:0;background:transparent;box-shadow:none;flex-shrink:0}
body.wolii-home #wolii-seal img{inset:0!important;width:100%!important;height:100%!important}
/* Keep decorative marks below modal surfaces. */
#wolii-seal{z-index:0!important}
body.wolii-home [data-framer-name="Profile Image"]{z-index:0!important;isolation:isolate}
#overlay{position:relative;z-index:2147483000!important}
[role="dialog"],[aria-modal="true"]{z-index:2147483001!important}
h1,h2,h3,h4,h1 span,h2 span,h3 span,h4 span{ text-transform:lowercase!important }
/* CV collage in the existing Playground surface; the rest of the site is unchanged. */
@font-face{font-family:WoliiHand;src:url('/brand/CasualHuman.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:WoliiHand;src:url('/brand/CasualHuman-Bold.otf') format('opentype');font-weight:700;font-display:swap}
.wolii-playground{position:relative!important;overflow:hidden!important;min-height:560px;touch-action:pan-y!important;isolation:isolate}
.wolii-collage{position:absolute;inset:0;overflow:hidden;background:transparent;color:#171717}
.pg-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.pg-viewport{position:absolute;inset:0 0 44px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;outline-offset:-5px!important}
.pg-viewport.is-dragging{cursor:grabbing}
.pg-track{display:flex;width:max-content;height:100%;will-change:transform}
.pg-band{display:flex;height:100%;flex:none}
.pg-scene{position:relative;width:530px;height:100%;min-height:500px;flex:none;padding:28px;box-sizing:border-box}
.pg-hand,.pg-hand span{font-family:WoliiHand,cursive!important;font-size:44px!important;font-weight:400!important;line-height:1.02!important;letter-spacing:0!important;text-transform:none!important}
.pg-hand{position:absolute;max-width:440px;z-index:2;transform:rotate(-7deg);color:#171717}
.pg-hand{animation:pg-hand-drawn .42s steps(1,end) infinite}
.pg-hand>span{display:inline-block}
.pg-hand .pg-space{width:.22em}
.pg-top{top:5%;left:38px}
.pg-bottom{bottom:10%;left:110px;transform:rotate(5deg);font-size:38px!important}
.pg-paper{position:absolute;box-sizing:border-box;background:#fff url('/assets/74db2f78b01f393019.png') center/cover;border:7px solid #fff;padding:22px 24px;box-shadow:3px 7px 0 #00000014;max-width:340px;transform:rotate(4deg);z-index:1}
.pg-paper h2{font-size:34px!important;line-height:1.02!important;margin:0 0 12px!important;letter-spacing:-.012em!important}
.pg-paper p{font:17px/1.45 Tomkin,sans-serif!important;margin:0!important}
.pg-paper strong{display:block;font-weight:500!important;font-size:17px}
.pg-paper small{display:block;font:12px/1.5 Tomkin,sans-serif!important;letter-spacing:.05em;margin:8px 0 15px;color:#555}
.pg-bio{top:26%;left:234px;width:265px;transform:rotate(5deg)}
.pg-character{position:absolute;left:23px;top:24%;width:208px;height:300px;object-fit:contain;transform:rotate(-7deg)}
.pg-sticker{filter:drop-shadow(5px 0 #fff) drop-shadow(-5px 0 #fff) drop-shadow(0 5px #fff) drop-shadow(0 -5px #fff) drop-shadow(2px 5px 0 #0002)}
.pg-place{left:90px;bottom:10%;transform:rotate(-5deg)}
.pg-experience{top:24%;left:65px;width:350px;transform:rotate(-4deg)}
.pg-tag{position:absolute;right:46px;top:17%;padding:8px 15px;background:#171717;color:#fff;transform:rotate(8deg);font:500 14px Tomkin,sans-serif!important;border:4px solid white;box-shadow:2px 3px #0002;z-index:3}
.pg-brandnames{position:absolute;bottom:12%;left:45px;right:40px;display:flex;gap:8px;flex-wrap:wrap;transform:rotate(-3deg)}
.pg-brandnames span{padding:8px 13px;background:white;border:1px solid #171717;border-radius:40px;font:500 16px Tomkin,sans-serif!important;box-shadow:2px 3px #0001}
.pg-asterisk{position:absolute;width:85px;height:85px;right:27px;top:42%;transform:rotate(10deg);z-index:2}
.pg-software{margin:0;display:flex;align-items:center;flex-direction:column;gap:5px;transform:rotate(-7deg)}
.pg-software img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(4px 0 white) drop-shadow(-4px 0 white) drop-shadow(0 4px white) drop-shadow(0 -4px white) drop-shadow(2px 4px #0002);pointer-events:none}
.pg-software figcaption{font:12px/1.2 Tomkin,sans-serif!important;padding:4px 7px;background:white;border-radius:3px;text-align:center}
.pg-icon-a,.pg-icon-b{position:absolute;bottom:19%;left:72px;transform:rotate(-11deg)}
.pg-icon-b{left:325px;transform:rotate(10deg)}
.pg-tag-bottom{top:auto;bottom:11%;right:50px}
.pg-tool-intro{position:absolute;left:40px;right:45px;top:21%;font:17px/1.4 Tomkin,sans-serif!important;max-width:390px}
.pg-tools-grid{position:absolute;top:38%;left:40px;right:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:30px 16px}
.pg-tools-grid .pg-software:nth-child(even){transform:rotate(8deg)}
.pg-tools-grid img{width:62px;height:62px}
.pg-free{top:23%;left:62px;width:330px;transform:rotate(4deg)}
.pg-languages{top:54%;left:60px;transform:rotate(-4deg);font-size:36px!important}
.pg-language-note{position:absolute;top:67%;left:100px;transform:rotate(4deg);padding:12px 22px;background:#fff;border:1px solid #171717}
.pg-language-note p{margin:3px 0;font:16px/1.4 Tomkin,sans-serif!important}
.pg-scene-6 .pg-bottom{bottom:3%;left:245px;max-width:260px}
.pg-number{position:absolute;bottom:0;left:28px;color:#666;font:12px Tomkin,sans-serif!important}
.pg-hint{position:absolute;bottom:9px;left:0;right:0;text-align:center;margin:0;font:13px/1.4 Tomkin,sans-serif!important;pointer-events:none;color:#555}
@keyframes pg-hand-drawn{0%,100%{filter:var(--pg-ink-0,none)}33.333%{filter:var(--pg-ink-1,none)}66.666%{filter:var(--pg-ink-2,none)}}
@media(max-width:809px){.wolii-playground{min-height:570px}.pg-scene{width:390px}.pg-hand,.pg-hand span{font-size:36px!important}.pg-top{left:30px;max-width:330px}.pg-character{width:145px;height:220px;left:16px;top:27%}.pg-bio{left:160px;width:205px;padding:15px;top:24%}.pg-paper h2{font-size:28px!important}.pg-paper p,.pg-paper strong{font-size:15px!important}.pg-place{left:46px;bottom:11%}.pg-experience{left:32px;width:305px;padding:18px;top:25%}.pg-tag{right:29px;top:17%}.pg-asterisk{width:65px;right:16px;top:56%}.pg-brandnames{left:28px;bottom:9%}.pg-brandnames span{font-size:14px!important}.pg-icon-a{left:62px;bottom:15%}.pg-icon-b{left:255px;bottom:15%}.pg-bottom{left:77px;bottom:4%}.pg-tool-intro{left:30px;top:21%;font-size:15px!important}.pg-tools-grid{left:24px;right:24px;grid-template-columns:repeat(5,1fr);gap:24px 10px;top:40%}.pg-tools-grid img{width:49px;height:49px}.pg-tools-grid figcaption{font-size:10px!important}.pg-free{left:35px;width:302px;top:24%}.pg-languages{left:45px;top:55%}.pg-language-note{left:80px;top:65%}.pg-scene-6 .pg-bottom{left:180px;bottom:3%;max-width:200px}}
@media(prefers-reduced-motion:reduce){.pg-hand{animation:none;filter:none}.pg-hand>span{animation:none}.pg-track{will-change:auto}}

[style*="Alte"]{text-transform:lowercase!important}
/* Remove the template's Recognition section from About Me. */
[data-framer-name="Recognition"]{display:none!important}
/* The animated brand mark belongs only on the home page. */
body:not(.wolii-home) #wolii-seal{display:none!important}

/* Original character, traced as transparent black vector artwork. */
body.wolii-home #wolii-seal{width:clamp(194px,24.84vw,324px)!important;height:clamp(231px,29.48vw,384px)!important}
body.wolii-home #wolii-seal img{opacity:1;object-fit:contain}
/* Purple interface accents appear on hover only. */
.pad-tools button[aria-pressed="true"]{background:#171717;color:#fff}
.pad-tools button:hover{background:#6432ff;color:#fff}
.pad-editor{border-color:#777}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline-color:#171717!important}
::selection{background:#171717;color:#fff}
@media(hover:hover){
a:hover,a:hover .framer-text,button:hover,button:hover .framer-text{color:#6432ff!important;--framer-text-color:#6432ff!important}
form button[type="submit"]:hover,.pad-tools button:hover{background:#6432ff!important;color:#fff!important}
form button[type="submit"]:hover .framer-text{color:#fff!important;--framer-text-color:#fff!important}
}

/* Sentence initials for Alte prose; heading styles remain lowercase. */
body .wolii-sentence-paragraph,body .wolii-sentence-paragraph *{text-transform:lowercase!important}
body .wolii-sentence-paragraph::first-letter{text-transform:uppercase!important}
/* Character blur acts directly on the SVG image. */
body.wolii-home #wolii-seal{pointer-events:auto!important}
body.wolii-home #wolii-seal img{
 pointer-events:auto!important;opacity:1;filter:blur(0);transform:none;
 animation:wolii-character-reveal 1.4s ease-out;
 transition:filter .65s ease;
}
@keyframes wolii-character-reveal{from{filter:blur(7px);opacity:0}to{filter:blur(0);opacity:1}}
@media(hover:hover){body.wolii-home [data-framer-name="Profile Image"]:hover #wolii-seal img{filter:blur(2.5px)}}
@media(prefers-reduced-motion:reduce){body.wolii-home #wolii-seal img{animation:none;transition:none}}

/* Handwritten annotation beside the character. */
#wolii-character-note{
 position:absolute;left:72%;top:13%;width:220px;
 transform:rotate(-14deg);transform-origin:left center;
 font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive!important;
 font-size:22px;font-weight:400;line-height:1.35;letter-spacing:.02em;
 color:#171717;white-space:nowrap;pointer-events:none;text-transform:none!important;
}
@media(max-width:600px){
 #wolii-character-note{left:65%;top:12%;font-size:15px;width:150px}
}

/* Drawn lettering, not a font: keep it separate from the portrait blur. */
#wolii-character-note{left:77%;top:15%;width:250px;line-height:0;transform:rotate(-14deg)}
body.wolii-home #wolii-seal #wolii-character-note img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;animation:none!important;filter:none!important;transform:none!important;opacity:1!important;pointer-events:none!important}
@media(max-width:600px){#wolii-character-note{left:65%;width:170px;top:12%}}

/* Original Writing Note canvas needs an explicit drawing surface. */
#wolii-character-note{height:auto;aspect-ratio:405/103;overflow:visible}
#wolii-character-note canvas{display:block;pointer-events:none}

/* Small purple note aligned with the lower part of the portrait. */
#wolii-character-note{left:88%;top:auto;bottom:5%;width:190px;height:62px;aspect-ratio:auto;color:#6432ff}
@media(max-width:600px){#wolii-character-note{left:73%;top:auto;bottom:5%;width:135px;height:48px}}

#wolii-character-note{left:108%;width:150px;height:auto!important;bottom:5%;display:flex;flex-direction:column;gap:3px;overflow:visible!important}
.wolii-note-line{position:relative;flex:none;min-height:15px}
@media(max-width:600px){#wolii-character-note{left:94%;width:110px}}

/* Animated eye mark beside the main signature. */
h1[aria-label="by wolii"]::after,h1[aria-label="GABRIEL"]::after{left:clamp(60px,7vw,96px)!important;background-size:contain!important;background-position:left center!important}
body h1 .wolii-eye-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:clamp(48px,6vw,80px);height:clamp(48px,6vw,80px);visibility:visible!important;z-index:1;pointer-events:none}
.wolii-eye-icon svg{display:block;width:100%;height:100%;overflow:visible}
.wolii-eye-icon .eye-opening,.wolii-eye-icon .eye-blink{transform-origin:60.78px 60.78px}
.wolii-eye-icon .eye-pupil{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.wolii-eye-icon .eye-pupil{transition:none}}
/* Contact socials: two equal cells, including removal of unused wrappers. */
body.wolii-contact [data-framer-name="Link Wrap"] > [data-framer-name="IN"],
body.wolii-contact [data-framer-name="Link Wrap"] > [data-framer-name="BE"]{display:none!important}
body.wolii-contact [data-framer-name="Link Wrap"]:has(> [data-framer-name="IG"]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
body.wolii-contact [data-framer-name="Link Wrap"] > [data-framer-name="IG"],
body.wolii-contact [data-framer-name="Link Wrap"] > [data-framer-name="X"]{width:auto!important;min-width:0!important}
/* Slightly smaller signature and eye, scaled together. */
h1[aria-label="by wolii"],h1[aria-label="GABRIEL"]{scale:.92;transform-origin:left center}
/* Shared language controls and translated animated page headings. */
[data-language-picker]{display:flex;align-items:center;justify-content:flex-start;gap:5px;margin:12px 0 0;width:max-content;position:relative;z-index:5;align-self:flex-start}
[data-language-picker] button{font:500 14px/1 Tomkin,sans-serif!important;cursor:pointer;border:0;border-radius:2px;background:transparent;color:#171717;padding:8px 11px;transition:background .2s,color .2s;text-transform:lowercase}
[data-language-picker] button[aria-pressed="true"]{background:#171717;color:#fff}
[data-language-picker] button:hover{background:#6432ff;color:#fff!important}
[data-language-picker] button:focus-visible{outline:2px solid #6432ff!important;outline-offset:3px}
[data-language-picker]>span{color:#777;font-size:13px}
h1.wolii-localized-title{position:relative!important;min-height:1em}
h1.wolii-localized-title>*{visibility:hidden!important}
h1.wolii-localized-title::after{content:attr(data-localized-title);position:absolute;inset:0;white-space:nowrap;font:inherit;letter-spacing:inherit;animation:wolii-reveal 1.3s ease-out both}
@media(max-width:600px){h1.wolii-localized-title{font-size:clamp(30px,8vw,56px)!important}}
@media(prefers-reduced-motion:reduce){h1.wolii-localized-title::after{animation:none}}

/* Compact locale switch immediately below the About Me card. */
[data-language-picker]{position:absolute;margin:0;gap:3px;z-index:10}
[data-language-picker] button{font-size:11px!important;padding:6px 8px}
[data-language-picker]>span{font-size:11px}

/* Keep the full intro stacking context above all interface controls and overlays. */
.framer-Hxy2J .framer-hv6mkk-container{z-index:2147483646!important}
/* Keep software stickers beside the experience notes, clear of the copy. */
.pg-scene-3 .pg-experience,.pg-scene-4 .pg-experience{left:38px;width:300px}
.pg-scene-3 .pg-icon-a,.pg-scene-4 .pg-icon-a{left:390px;top:31%;bottom:auto}
.pg-scene-3 .pg-icon-b,.pg-scene-4 .pg-icon-b{left:390px;top:58%;bottom:auto}
.pg-scene-3 .pg-bottom{bottom:8%}
@media(max-width:809px){.pg-scene-3 .pg-experience,.pg-scene-4 .pg-experience{left:25px;width:245px;padding:15px}.pg-scene-3 .pg-icon-a,.pg-scene-4 .pg-icon-a{left:294px;top:31%}.pg-scene-3 .pg-icon-b,.pg-scene-4 .pg-icon-b{left:294px;top:58%}.pg-scene-3 .pg-software img,.pg-scene-4 .pg-software img{width:62px;height:62px}.pg-scene-3 .pg-bottom{bottom:2%;left:65px}.pg-scene-4 .pg-tag-bottom{bottom:4%}}

/* The interactive dots belong to the complete folder, including its header. */
.wolii-playground-folder{isolation:isolate}
.wolii-playground-folder>.pg-dots{z-index:0}
.wolii-playground-folder>[data-framer-name="Header"]{position:relative;z-index:1}
.pg-character{filter:none!important}
/* Expanded About card sits above page controls; original paper and clip remain. */
.framer-K0jC5[data-framer-name="Desktop Open"],.framer-K0jC5[data-framer-name="Mobile Open"]{z-index:2147483005!important}
[data-language-picker].wolii-modal-hidden,body:has(.framer-K0jC5[data-framer-name="Desktop Open"]) [data-language-picker],body:has(.framer-K0jC5[data-framer-name="Mobile Open"]) [data-language-picker]{visibility:hidden!important;pointer-events:none!important}
.wolii-about-open .framer-1n800pw{overflow:hidden!important;justify-content:flex-start!important;gap:28px!important;min-height:0}
.wolii-about-open .framer-1ht2dsq{max-width:none!important}
.wolii-about-open .wolii-about-prose{font:700 28px/1.18 Alte,sans-serif!important;letter-spacing:-.012em!important;text-transform:none!important}
.wolii-about-graphics{display:none}
.wolii-about-open .wolii-about-graphics{display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:100%;flex:none;padding:10px 0 4px}
.wolii-about-graphics .about-symbol{width:55px;height:55px;object-fit:contain;transform:rotate(-9deg)}
.about-tool-marks{display:flex;gap:9px;align-items:center}
.about-tool-marks img{width:35px;height:35px;object-fit:contain;transform:rotate(5deg)}
.about-tool-marks img:nth-child(2){transform:rotate(-6deg)}
.about-note{width:100%;font:500 15px Tomkin,sans-serif!important;color:#555;border-bottom:1px solid #17171730;padding-bottom:14px}
.wolii-about-open .framer-15mima1-container{display:none!important}
.wolii-about-open .framer-1h5pjyg{width:100%!important;min-height:0!important}
.wolii-about-open .framer-m6g14e{display:none!important}
.wolii-about-services{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wolii-about-services li{font:500 14px/1.3 Tomkin,sans-serif!important;padding:5px 0;border:0;border-radius:0;background:transparent;overflow-wrap:anywhere}
.wolii-about-services li::before{content:none}
@media(max-width:600px){.wolii-about-open .wolii-about-prose{font-size:24px!important}.wolii-about-open .framer-1n800pw{gap:22px!important}.wolii-about-services{grid-template-columns:1fr}.wolii-about-graphics{gap:14px}}

.framer-K0jC5:not(.wolii-about-open) .wolii-about-services{display:none!important}

/* The collage survives responsive hydration replacing the host classes. */
body.wolii-playground-page [data-framer-name="Playground Container"]:has(.wolii-collage){position:relative!important;overflow:hidden!important;min-height:560px;touch-action:pan-y!important;isolation:isolate}
@media(max-width:809px){body.wolii-playground-page [data-framer-name="Playground Container"]:has(.wolii-collage){min-height:570px}}

/* Original About layout, with smaller, compact service typography and no scroll. */
.wolii-about-open .wolii-about-services{row-gap:4px}
.wolii-about-open .wolii-about-services li{font:500 12px/1.2 Tomkin,sans-serif!important;padding:0;white-space:normal}