@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Quicksand:wght@700&display=swap');

:root{--paper:#f7f7f2;--ink:#202020;--muted:#74766f;--blue:#00a3ff;--line:#dddfd7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}::selection{background:#00a3ff40}.site-header{max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:36px 5.5%}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font-size:21px;font-weight:650;letter-spacing:-.8px}.brand img{width:36px;height:36px}.brand-period{color:var(--blue)}.studio-label{font-size:12px;color:#62665d;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:var(--blue);border-radius:50%}.hero{position:relative;max-width:1600px;margin:auto;min-height:calc(100svh - 108px);padding:110px 5.5% 130px;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:25px}.eyebrow{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0 0 32px}.eyebrow>span{width:21px;height:2px;background:var(--blue)}h1{font-size:clamp(52px,5.65vw,90px);font-weight:500;line-height:1.075;letter-spacing:-.065em;margin:0}.last-line{white-space:nowrap}.accent{color:#0099ef}.tagline{font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:#696c64;margin:29px 0 0;letter-spacing:-.3px}.hero-art{position:relative;width:100%;aspect-ratio:1;max-width:470px;justify-self:end;display:flex;align-items:center;justify-content:center}.art-grid{position:absolute;inset:0;background-image:radial-gradient(#cacfc5 .85px,transparent .85px);background-size:22px 22px;mask-image:radial-gradient(ellipse,#000 25%,transparent 72%)}.art-coordinate{position:absolute;font-family:monospace;font-size:9px;color:#858a7e;letter-spacing:1px}.coordinate-top{top:10%;left:13%}.coordinate-bottom{bottom:7%;right:5%}.bracket{position:absolute;top:22%;height:59%;width:22%;border-top:solid 18px var(--ink);border-bottom:solid 18px var(--ink)}.bracket-left{left:14%;border-left:solid 18px var(--ink)}.bracket-right{right:14%;border-right:solid 18px var(--ink)}.vector{position:absolute;width:39%;height:19%;background:var(--blue);border-radius:100px;transform:rotate(-34deg);box-shadow:0 18px 35px -22px #0081d05c;animation:vector-in 1.2s cubic-bezier(.2,.8,.2,1) both}.vector span{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent,#ffffff18)}.scroll-cue{position:absolute;bottom:38px;left:5.5%;display:flex;align-items:center;gap:14px;text-decoration:none;font-size:11px;color:#666b60;letter-spacing:.2px}.scroll-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #cdd0c5;border-radius:50%;font-size:16px;transition:transform .25s,background .25s}.scroll-cue:hover .scroll-icon{transform:translateY(4px);background:#e7ece2}.hero-note{position:absolute;bottom:48px;right:5.5%;font-size:10px;color:#8b8e84}.reveal-section{max-width:1600px;margin:auto;padding:0 5.5%}.section-rule{border-top:1px solid var(--line);padding-top:21px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:9px;letter-spacing:1.6px;color:#7e8377}.box-stage{height:70svh;min-height:430px;display:flex;justify-content:center;align-items:center;position:relative}.empty-box{width:144px;height:144px;border:1px solid #a7b6bb;border-radius:5px;background:#ffffff30;opacity:0;transform:translateY(38px) scale(.88);will-change:opacity,transform}.approach-line{position:absolute;top:0;height:23%;width:1px;background:linear-gradient(transparent,var(--line))}footer{max-width:1600px;margin:auto;padding:26px 5.5% 30px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#858a7e;border-top:1px solid var(--line)}.footer-dot{color:var(--blue);margin-left:22px;font-size:17px}a:focus-visible{outline:2px solid var(--blue);outline-offset:7px}@keyframes vector-in{from{opacity:0;transform:translate(-15px,12px) rotate(-34deg)}to{opacity:1;transform:translate(0,0) rotate(-34deg)}}
@media(min-width:1600px){.hero{min-height:850px}}
@media(max-width:1000px){.hero{grid-template-columns:1.5fr 1fr;padding-top:90px;padding-bottom:140px}h1{font-size:clamp(48px,6.5vw,68px)}.bracket{border-top-width:13px;border-bottom-width:13px}.bracket-left{border-left-width:13px}.bracket-right{border-right-width:13px}.art-coordinate{font-size:7px;letter-spacing:0}.coordinate-bottom{right:0}.tagline{font-size:16px}.hero-art{transform:translateX(12px)}}
@media(max-width:700px){.site-header{padding:25px 7%}.brand{font-size:19px}.brand img{width:31px;height:31px}.studio-label{display:none}.hero{padding:59px 7% 95px;min-height:calc(100svh - 81px);display:flex;flex-direction:column;align-items:stretch;gap:13px}.eyebrow{font-size:9px;margin-bottom:24px;letter-spacing:1.4px}h1{font-size:clamp(40px,9.8vw,67px);letter-spacing:-.06em}.tagline{font-size:15px;line-height:1.7;margin-top:23px;max-width:330px}.desktop-break{display:none}.hero-art{width:240px;max-width:62vw;align-self:center;transform:none;margin-top:20px}.bracket{border-top-width:11px;border-bottom-width:11px}.bracket-left{border-left-width:11px}.bracket-right{border-right-width:11px}.coordinate-top{top:7%}.coordinate-bottom{bottom:2%}.scroll-cue{left:7%;bottom:27px}.hero-note{right:7%;bottom:37px;font-size:8px;max-width:115px;text-align:right}.reveal-section{padding:0 7%}.box-stage{height:65svh;min-height:380px}.empty-box{width:120px;height:120px}footer{padding:22px 7%;font-size:9px}.footer-dot{margin-left:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.vector{animation:none}.scroll-icon{transition:none}.empty-box{transform:none!important;will-change:opacity}}

/* The large identity yields to a compact, fixed signature as the page scrolls. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:10;max-width:none;padding:22px 5.5%;background:rgb(247 247 242 / .88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgb(32 32 32 / .07);opacity:0;visibility:hidden;transform:translateY(-18px);pointer-events:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility .4s}
.site-header.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.hero{min-height:100svh;padding-top:90px;padding-bottom:120px;grid-template-columns:1.4fr 1fr}
.hero-art{aspect-ratio:auto;min-height:430px;flex-direction:column;gap:20px;transform-origin:center;will-change:transform,opacity}
.hero-logo{position:relative;z-index:1;display:block;width:min(85%,350px);height:auto}
.hero-wordmark{position:relative;z-index:1;font-size:clamp(25px,2.6vw,39px);font-weight:550;letter-spacing:-1.5px;white-space:nowrap}
.art-grid{inset:-30px -10px}
@media(min-width:1600px){.hero{min-height:100svh}}
@media(max-width:1000px){.hero-art{transform:none;min-height:350px}.hero-wordmark{font-size:27px}}
@media(max-width:700px){.site-header{padding:16px 7%}.hero{min-height:100svh;padding:40px 7% 94px;gap:35px;justify-content:center}.hero-art{order:-1;width:240px;max-width:65vw;min-height:0;gap:12px;margin:0 auto}.hero-logo{width:160px;max-width:100%}.hero-wordmark{font-size:25px;letter-spacing:-1px}.hero-copy{text-align:center}h1{font-size:clamp(38px,9vw,60px)}.tagline{margin:20px auto 0}.art-grid{inset:-18px}.scroll-cue{bottom:25px}}
@media(max-height:700px) and (min-width:701px){.hero{padding-top:70px;padding-bottom:100px}.hero-art{min-height:300px}.hero-logo{width:250px}h1{font-size:clamp(48px,5.3vw,76px)}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none;transform:none}.hero-art{will-change:auto}}

.brand,.hero-wordmark{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:0}
#hero-heading{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:0}

/* A playable interpretation of the bracket-and-pill identity. */
.game-section{min-height:100svh;padding:110px 7% 55px;display:grid;place-items:center;border-top:1px solid var(--line);scroll-margin-top:0}
.game-shell{width:min(100%,900px)}
.game-scoreboard{display:flex;justify-content:space-between;align-items:center;padding:0 40px 24px;font-variant-numeric:tabular-nums}
.game-label{display:block;color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px}
#sum{font-size:clamp(34px,4vw,48px);line-height:1;font-weight:500;letter-spacing:-1.8px;transition:color .2s}
.game-stats{display:flex;gap:35px;text-align:right}.game-stats output{font-size:18px}
.game-stats>span{min-width:55px}
.game-arena{height:clamp(300px,52svh,520px);position:relative;outline:none;border-radius:3px}
.game-arena:focus-visible{outline:1px solid #00a3ff55;outline-offset:12px}
.game-bracket{position:absolute;top:0;bottom:0;width:38px;border-top:10px solid var(--ink);border-bottom:10px solid var(--ink);pointer-events:none}
.game-bracket-left{left:0;border-left:10px solid var(--ink)}.game-bracket-right{right:0;border-right:10px solid var(--ink)}
.falling-numbers{position:absolute;inset:0 40px;overflow:hidden;background-image:radial-gradient(#c9d0c3 .7px,transparent .7px);background-size:25px 25px}
.falling-number{position:absolute;transform:translate(-50%,-50%);font-variant-numeric:tabular-nums;font-size:clamp(17px,2.2vw,23px);font-weight:500;letter-spacing:-.6px;white-space:nowrap}.is-positive{color:#007fc6}.is-negative{color:#575a53}
.catcher{position:absolute;top:87%;left:50%;width:clamp(62px,15%,120px);height:clamp(20px,3vw,30px);background:var(--blue);border-radius:100px;transform:translate(-50%,-50%);box-shadow:0 5px 18px #00a3ff18}
.game-overlay{position:absolute;inset:0 40px;z-index:2;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.game-overlay[hidden]{display:none}.game-overlay h2{font-size:clamp(28px,4vw,44px);font-weight:500;letter-spacing:-1.6px;margin:0 0 14px}.game-overlay p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 28px;max-width:280px}
#game-start{font:500 14px 'DM Sans',sans-serif;background:var(--ink);color:var(--paper);padding:13px 25px;border:none;border-radius:50px;cursor:pointer;display:flex;align-items:center;gap:28px;transition:background .2s,transform .2s}#game-start:hover{background:#007fc6;transform:translateY(-2px)}
.game-controls{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:28px}.game-controls p{font-size:11px;color:var(--muted);margin:0}.game-controls p span{display:block;text-align:center;letter-spacing:7px;font-size:14px;margin-top:5px;color:#969d90}
.direction-button{border:1px solid #cdd0c5;border-radius:100px;width:86px;height:42px;color:var(--ink);background:rgb(255 255 255 / .6);font:22px 'DM Sans',sans-serif;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .2s,background .2s}.direction-button:hover{border-color:var(--blue)}.direction-button:active{background:#00a3ff20;border-color:var(--blue)}button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.sum-negative{color:#b2443e}.just-caught{animation:catch-flash .25s ease-out}@keyframes catch-flash{50%{box-shadow:0 0 0 9px #00a3ff20}}
.catch-positive{animation:catch-positive .42s ease-out}.catch-negative{animation:catch-negative .52s ease-out}.catch-value{position:absolute;top:87%;z-index:2;transform:translate(-50%,-50%);font-size:19px;font-weight:700;white-space:nowrap;pointer-events:none;animation:catch-value-rise .65s ease-out forwards}.catch-value-positive{color:#008bd9}.catch-value-negative{color:#d75d51}@keyframes catch-positive{45%{transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 12px #00a3ff35}}@keyframes catch-negative{25%,65%{transform:translate(-50%,-50%) translateX(5px);background:#e56b5b;box-shadow:0 0 0 10px #e56b5b30}45%{transform:translate(-50%,-50%) translateX(-5px)}}@keyframes catch-value-rise{to{opacity:0;transform:translate(-50%,-55px)}}
.game-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.game-section{padding:95px 6% 40px}.game-scoreboard{padding:0 23px 25px}.game-stats{gap:20px}.game-stats output{font-size:15px}.game-bracket{width:23px;border-top-width:7px;border-bottom-width:7px}.game-bracket-left{border-left-width:7px}.game-bracket-right{border-right-width:7px}.falling-numbers,.game-overlay{left:24px;right:24px}.game-arena{height:48svh;min-height:300px}.game-overlay{padding:14px}.game-overlay h2{font-size:29px}.game-overlay p{font-size:12px}.game-controls{gap:22px}.direction-button{width:75px}.game-controls p{font-size:10px}}
@media(max-width:700px){.game-scoreboard{padding-left:8px;padding-right:8px}.game-stats{gap:10px}.game-stats>span{min-width:46px}}
@media(prefers-reduced-motion:reduce){.just-caught{animation:none}#game-start,.direction-button,#sum{transition:none}}
.game-overlay p:has(.final-catch-count){font-size:17px;color:var(--ink)}.final-catch-count{display:block;font-size:clamp(70px,11vw,112px);line-height:1.1;font-weight:500;letter-spacing:-.07em;color:var(--blue);font-variant-numeric:tabular-nums}
.game-overlay p:has(.final-sum){max-width:none;color:var(--ink);font-size:17px}.final-sum{display:block;margin:12px 0 16px;font-size:clamp(70px,11vw,112px);line-height:1.1;font-weight:500;letter-spacing:-.07em;color:var(--blue);font-variant-numeric:tabular-nums}.final-caught{display:block;color:var(--muted);font-size:13px}
.contact-footer{display:block;padding:55px 5.5% 25px}.footer-main{display:flex;justify-content:space-between;gap:40px;padding-bottom:65px}.footer-main h2{margin:0 0 16px;color:var(--ink);font-size:clamp(24px,3vw,36px);font-weight:500;letter-spacing:-.05em}.contact-email{color:var(--ink);font-size:clamp(16px,1.8vw,21px);text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:3px}.contact-email:hover{color:#008bd9}.footer-main address{font-style:normal;font-size:14px;line-height:1.85;color:#666b60}.footer-main address strong{font-weight:600;color:var(--ink)}.footer-bottom{border-top:1px solid var(--line);padding-top:23px;font-size:10px;color:#858a7e}@media(max-width:700px){.contact-footer{padding:42px 7% 24px}.footer-main{display:block;padding-bottom:45px}.footer-main address{margin-top:42px}}
.game-section{position:relative;padding-bottom:max(85px,8svh)}.game-scroll-cue{left:7%;bottom:26px}@media(max-width:700px){.game-section{padding-bottom:85px}.game-scroll-cue{left:6%;bottom:24px}}
:root{--compact-header-height:81px}
.game-section{min-height:calc(100svh - var(--compact-header-height));scroll-margin-top:var(--compact-header-height);padding-top:30px;padding-bottom:72px}
.game-arena{height:clamp(300px,calc(100svh - var(--compact-header-height) - 265px),520px)}
.game-scroll-cue{bottom:19px}
@media(max-width:700px){:root{--compact-header-height:64px}.game-section{min-height:calc(100svh - var(--compact-header-height));padding-top:24px;padding-bottom:70px}.game-arena{height:clamp(260px,calc(100svh - var(--compact-header-height) - 240px),420px)}.game-scroll-cue{bottom:15px}}
.game-scroll-cue{position:fixed;z-index:11;left:7%;bottom:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}.game-scroll-cue.is-visible{opacity:1;visibility:visible;pointer-events:auto}@media(max-width:700px){.game-scroll-cue{left:6%;bottom:24px}}

/* The game has its own topbar offset; do not add a second page-wide offset. */
html{scroll-padding-top:0}
.page-scroll-cue{position:fixed;z-index:20;left:5.5%;bottom:38px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}.page-scroll-cue.is-visible{opacity:1;visibility:visible;pointer-events:auto}@media(max-width:700px){.page-scroll-cue{left:7%;bottom:27px}}
.contact-pill{display:inline-flex;align-items:center;justify-content:center;gap:24px;margin-top:30px;padding:14px 24px;border-radius:100px;background:var(--blue);color:#fff;text-decoration:none;font-size:14px;font-weight:650;box-shadow:0 6px 20px #00a3ff24;transition:transform .2s,box-shadow .2s,background .2s}.contact-pill:hover{transform:translateY(-3px);box-shadow:0 10px 25px #00a3ff38;background:#008bd9}.contact-pill span{font-size:17px;font-weight:400}@media(max-width:700px){.contact-pill{margin-top:25px}}