@font-face{font-family:OwlanniPixel;src:url('assets/press-start-2p.ttf') format('truetype');font-display:swap;font-weight:400}
.about-game{padding-top:60px;scroll-margin-top:25px;color:#000}.game-eyebrow,.game-hud,.game-frame-header,.game-idle,.game-title,.game-actions button,.game-skills,.game-message{font-family:OwlanniPixel,monospace;font-weight:400}.game-eyebrow{font-size:8px;line-height:1.8;margin:0 0 18px}.game-heading h2{font-size:clamp(30px,3vw,46px);line-height:1.15;font-weight:500;letter-spacing:-1.4px;margin:0 0 28px}.game-hud{display:flex;gap:22px;align-items:center;justify-content:space-between;border-block:2px solid #000;padding:17px 0;font-size:8px;line-height:1.8;margin-bottom:20px}.game-grid{display:grid;grid-template-columns:5fr 4fr 3fr;grid-template-rows:270px 270px;gap:18px}.game-frame{position:relative;min-width:0;background:#fff;color:#000;border:2px solid #000;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));transition:background .14s steps(2),color .14s steps(2);padding:19px;overflow:hidden;isolation:isolate}.game-frame:before{content:'';position:absolute;inset:6px;border:1px solid currentColor;pointer-events:none;opacity:.18;z-index:-1}.level-about{grid-column:1;grid-row:span 2}.level-journey{grid-column:2/4}.game-frame-header{display:flex;align-items:start;justify-content:space-between;gap:15px;width:100%;padding:0 0 13px;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;text-align:left;font-size:7px;line-height:1.8;cursor:pointer}.game-frame-header>span:last-child{white-space:nowrap}.pixel-media{display:block;position:absolute;right:24px;bottom:35px;width:160px;height:160px;object-fit:contain;image-rendering:pixelated;filter:grayscale(1) contrast(1.08);transition:filter .14s steps(2)}.level-about .pixel-media{width:270px;height:270px;max-width:80%;top:42%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}.level-journey .pixel-media{right:18px;bottom:28px;height:170px;width:170px}.level-conversation .pixel-media,.level-design-code .pixel-media{height:140px;width:140px;left:50%;right:auto;bottom:43px;transform:translateX(-50%)}.game-idle{position:absolute;bottom:21px;left:21px;font-size:8px}.game-content{position:absolute;left:21px;right:21px;top:73px;opacity:0;visibility:hidden;transition:opacity .14s steps(2);pointer-events:none}.game-title{font-size:11px;line-height:1.7;margin:0 0 12px}.game-typewriter{font-family:Poppins,Arial,sans-serif;font-size:12px;line-height:1.7;margin:0;min-height:62px}.game-actions{position:absolute;left:21px;right:21px;bottom:20px;visibility:hidden;opacity:0}.game-actions button{font-size:7px;line-height:1.9;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;padding:8px 7px}.game-actions button:hover,.game-actions button[aria-pressed=true]{background:#fff;color:#000;translate:0 -2px}.game-actions button:focus-visible,.game-frame-header:focus-visible{outline:2px dashed currentColor;outline-offset:3px}.game-skills{font-size:8px;line-height:2;display:flex;flex-wrap:wrap;gap:6px 15px;margin-bottom:17px}.game-message{font-size:7px;line-height:1.9;position:absolute;bottom:8px;left:21px;right:21px;margin:0;pointer-events:none}.game-frame[data-active=true]{background:#000;color:#fff}.game-frame[data-active=true] .pixel-media{filter:grayscale(1) invert(1);opacity:.18}.game-frame[data-active=true] .game-idle{display:none}.game-frame[data-active=true] .game-content{opacity:1;visibility:visible}.game-frame.is-ready .game-actions{opacity:1;visibility:visible}.game-frame.is-writing .game-typewriter:after{content:'_';animation:pixel-cursor .6s steps(1) infinite}.level-about .game-content{top:90px}.level-about[data-active=true] .pixel-media{top:60%;opacity:.38;width:180px;height:180px}.level-about .game-actions{bottom:46px}.level-journey .game-content{right:190px}.journey-map{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed currentColor;padding-top:10px}.journey-map button{position:relative;translate:0 var(--node-offset);padding:7px 8px}.skill-inventory{display:flex;gap:7px;flex-wrap:wrap}.game-hint{font-size:10px;color:#6b6b6b;margin:18px 0 0}.game-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes pixel-cursor{50%{opacity:0}}
.client-logos{display:flex;align-items:center;gap:70px;flex-wrap:wrap;margin:35px 0 0}.client-logos figure{margin:0;flex:0 1 300px}.client-logos img{width:100%;height:130px;object-fit:contain;display:block}
@media(max-width:1050px) and (min-width:721px){.game-grid{grid-template-columns:4fr 4fr 3fr;grid-template-rows:285px 285px;gap:14px}.game-frame{padding:15px}.game-frame-header{font-size:6px;gap:8px}.game-content{left:17px;right:17px}.game-title{font-size:9px}.game-typewriter{font-size:11px}.level-journey .game-content{right:125px}.level-journey .pixel-media{width:115px;height:135px}.game-actions{left:17px;right:17px}.game-actions button{font-size:6px;padding:7px 5px}.journey-map{gap:5px}.level-about .pixel-media{width:210px;height:240px}}
@media(max-width:720px){.about-game{padding-top:45px}.game-eyebrow{font-size:7px}.game-heading h2{font-size:31px}.game-hud{flex-wrap:wrap;gap:12px;font-size:7px}.game-grid{grid-template-columns:1fr;grid-template-rows:none;gap:16px}.game-frame{grid-column:auto;grid-row:auto;height:295px;padding:18px}.level-about{height:380px}.game-frame-header{font-size:6px}.game-title{font-size:10px}.game-typewriter{font-size:12px}.game-content,.level-about .game-content{top:75px}.level-about .pixel-media{width:210px;height:210px;top:48%}.level-about[data-active=true] .pixel-media{width:130px;height:130px;top:63%}.level-journey .game-content{right:21px}.level-journey .pixel-media{height:135px;width:135px;bottom:57px}.level-journey[data-active=true] .pixel-media{opacity:.1}.game-actions{bottom:25px}.game-message{font-size:6px;bottom:7px}.game-actions button{font-size:6px}.client-logos{gap:30px}.client-logos figure{flex-basis:240px}.client-logos img{height:100px}}
@media(prefers-reduced-motion:reduce){.game-frame,.pixel-media,.game-content{transition:none}.game-frame.is-writing .game-typewriter:after{animation:none}.game-actions button:hover{translate:none}}
/* Solid stepped pixel outline, without decorative shadows. */
.game-frame{border:0;padding:21px}.game-frame:before{inset:0;border:0;opacity:1;background:currentColor;z-index:-2}.game-frame:after{content:'';position:absolute;inset:2px;background:#fff;z-index:-1;pointer-events:none;clip-path:polygon(0 7px,7px 7px,7px 0,calc(100% - 7px) 0,calc(100% - 7px) 7px,100% 7px,100% calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,7px calc(100% - 7px),0 calc(100% - 7px))}.game-frame[data-active=true]:after{background:#000}
.game-frame:before{background:#000}
/* Keep the original pixel illustrations legible and inside each level. */
.pixel-media{filter:none;transition:opacity .14s steps(2);pointer-events:none}
.level-about .pixel-media{width:90%;height:430px;max-width:90%;top:51%}
.level-journey .pixel-media{width:94%;height:280px;right:3%;bottom:0}
.level-conversation .pixel-media,.level-design-code .pixel-media{width:88%;height:195px;bottom:32px}
.game-frame[data-active=true] .pixel-media{filter:none;opacity:.12}
.level-about[data-active=true] .pixel-media{width:80%;height:300px;top:59%;opacity:.28}
.level-journey .game-content{right:21px;max-width:510px}
.game-title{font-size:10px}
@media(max-width:1050px) and (min-width:721px){
 .game-grid{grid-template-columns:1fr 1fr;grid-template-rows:320px 285px}
 .level-about,.level-journey{grid-column:auto;grid-row:auto}
 .level-about .pixel-media{width:90%;height:235px;top:53%}
 .level-about[data-active=true] .pixel-media{width:65%;height:155px;top:61%;opacity:.15}
 .level-about .game-content{top:73px}
 .level-about .game-skills{font-size:6px;gap:4px 9px;margin-bottom:9px}
 .level-about .game-actions{bottom:28px}
 .level-journey .pixel-media{width:94%;height:280px;right:3%;bottom:0}
 .level-journey .game-content{right:21px}
 .level-conversation .pixel-media,.level-design-code .pixel-media{width:92%;height:190px}
 .game-title{font-size:9px}
 .game-frame-header>span:last-child{display:none}
}
@media(max-width:720px){
 .level-about .pixel-media{width:85%;height:285px;top:50%}
 .level-about[data-active=true] .pixel-media{width:65%;height:180px;top:63%}
 .level-journey .pixel-media{width:94%;height:280px;right:3%;bottom:0}
 .level-conversation .pixel-media,.level-design-code .pixel-media{width:90%;height:205px;bottom:35px}
 .game-title{font-size:10px}
}
/* Text and controls share normal flow, so copy can never cover the buttons. */
.trust-section .client-logos{display:flex;flex-wrap:nowrap;gap:0;margin-top:42px;border-block:1px solid #e7e7e7;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.trust-section .client-logos:focus-visible{outline:2px solid #00bbc4;outline-offset:5px}
.trust-section .client-logos figure{min-width:0;flex:1 0 0;padding:28px 16px 20px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;scroll-snap-align:start}
.trust-section .client-logos img{width:100%;max-width:160px;height:90px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .25s,opacity .25s}
.trust-section .client-logos figure:hover img{filter:none;opacity:1}
.trust-section .client-logos figcaption{font-family:Poppins,Arial,sans-serif;font-size:10px;line-height:1.5;text-align:center;color:#6b6b6b;min-height:30px;max-width:210px}
@media(max-width:1050px){.trust-section .client-logos figure{flex:0 0 180px}}
@media(max-width:720px){.trust-section .client-logos{margin-top:28px}.trust-section .client-logos figure{flex:0 0 155px;padding:24px 12px 18px}.trust-section .client-logos img{height:85px;max-width:140px}.trust-section .client-logos figcaption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.trust-section .client-logos img{transition:none}}
.game-grid{grid-template-columns:5fr 3.5fr 3.5fr;grid-template-rows:repeat(2,minmax(300px,auto))}
.game-frame{display:flex;flex-direction:column;gap:16px;min-height:300px}
.game-frame-header{flex-shrink:0;position:relative;z-index:1}
.game-content,.level-about .game-content,.level-journey .game-content{position:relative;inset:auto;max-width:none;display:none;flex-shrink:0}
.game-frame[data-active=true] .game-content{display:block}
.game-title{font-family:Poppins,Arial,sans-serif;font-size:18px;font-weight:600;line-height:1.35;margin:0 0 12px}
.game-typewriter{font-size:13px;line-height:1.65;min-height:0}
.game-actions,.level-about .game-actions{position:relative;inset:auto;display:none;margin-top:auto;padding-top:8px;flex-shrink:0;z-index:1}
.game-frame[data-active=true] .game-actions{display:block}
.game-message{position:relative;inset:auto;display:none;font-size:6px;flex-shrink:0}
.game-message:not(:empty){display:block}
.game-frame[data-active=true] .pixel-media{opacity:.06}
.level-about[data-active=true] .pixel-media{opacity:.12}
.skill-inventory{gap:8px}
.journey-map{flex-wrap:wrap;justify-content:flex-start;gap:8px}
.journey-map button{translate:none;font-size:6px}
@media(max-width:1050px) and (min-width:721px){
 .game-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(320px,auto))}
 .game-title{font-size:18px}
 .game-typewriter{font-size:13px}
}
.about-introduction{font-size:14px;line-height:1.9;color:#667177;max-width:760px;margin:0 0 30px}.game-typewriter{white-space:pre-line;line-height:1.85}.game-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(430px,auto))}.level-about,.level-journey,.level-conversation,.level-design-code{grid-column:auto;grid-row:auto}.game-title{font-size:21px;line-height:1.35}.game-frame{padding:27px;gap:20px}.level-about .pixel-media{height:360px;max-width:85%;top:50%}.level-journey .pixel-media{height:340px}.level-conversation .pixel-media,.level-design-code .pixel-media{height:310px}.game-actions button{font-size:7px;padding:10px}.game-hint{line-height:1.8}
@media(max-width:720px){.game-grid{grid-template-columns:1fr;grid-template-rows:none}.game-frame{min-height:390px;padding:23px}.level-about{min-height:420px}.game-title{font-size:21px}.game-typewriter{font-size:13px}.about-introduction{font-size:13px}.level-about .pixel-media{height:300px}.level-journey .pixel-media{height:270px}}
@media(max-width:720px){
 .game-grid{grid-template-columns:1fr;grid-template-rows:none}
 .game-frame{height:auto;min-height:320px}
 .level-about{min-height:380px}
 .game-title{font-size:19px}
}
@media(max-width:720px){.game-frame{min-height:390px}.level-about{min-height:420px}.game-title{font-size:21px}}
.game-frame[data-active=true] .pixel-media{opacity:0}