.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}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--yellow);color:var(--petrol);height:calc(89svh - 100px);min-height:600px;max-height:850px}
.hero-top{position:absolute;inset:28px var(--gutter) auto;display:flex;justify-content:space-between;gap:24px;font-size:11px;line-height:1.5;z-index:2;pointer-events:none}
.hero-content{position:absolute;left:var(--gutter);top:110px;z-index:2;pointer-events:none;width:40%}
.hero h1{font-size:106px;line-height:.98;color:var(--petrol)}
.hero h1 span{color:var(--pink)}
#story-line{font-size:27px;line-height:1.35;margin-top:28px;min-height:110px;max-width:380px;text-wrap:balance}
.hero-projects{display:inline-flex;align-items:center;gap:22px;font-size:13px;padding-block:12px;border-bottom:1px solid var(--petrol);pointer-events:auto;margin-top:15px}
.hero-projects:hover{border-color:var(--pink)}
.physics-stage{position:absolute;left:44%;right:22px;top:60px;bottom:78px}
#story-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}
#story-canvas:focus{outline:none}
#story-canvas:focus-visible{outline:2px solid var(--petrol)}
#story-canvas.is-grabbing{cursor:grabbing}
.physics-cursor{position:absolute;left:0;top:0;pointer-events:none;background:var(--petrol);color:var(--yellow);padding:5px 10px;font-size:11px;opacity:0;transition:opacity .15s;white-space:nowrap}
.physics-cursor.is-visible{opacity:1}
.hero-bottom{position:absolute;inset:auto var(--gutter) 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;z-index:3}
.motion-control{display:flex;align-items:center;gap:10px}
.motion-control>span{font-size:11px;margin-right:14px;min-width:110px}
.hero .icon-button{border-color:var(--petrol);width:40px;height:40px;color:var(--petrol)}
.hero .icon-button:hover{background:var(--petrol);color:var(--yellow)}
.hero .icon-button:focus-visible{outline-color:var(--petrol)}
@media(min-width:1600px){.hero h1{font-size:128px}.hero-content{top:125px}#story-line{font-size:30px;max-width:420px}.physics-stage{left:43%;right:50px}}
@media(max-width:1100px){.hero h1{font-size:90px}.hero-content{top:115px}#story-line{font-size:23px;min-height:100px}.physics-stage{left:43%;right:10px}.hero-projects{font-size:12px;gap:12px}.hero-top{font-size:10px}}
@media(max-width:760px){.hero{height:calc(93svh - 82px);min-height:690px;max-height:900px}.hero-content{top:73px;width:calc(100% - 48px)}.hero h1{font-size:65px;line-height:1.02}.hero h1 br{display:none}#story-line{font-size:25px;line-height:1.3;min-height:72px;margin-top:18px;max-width:440px}.hero-projects{margin-top:0;font-size:12px}.hero-top{top:22px;font-size:9px;gap:16px}.hero-top>span:first-child{max-width:180px}.physics-stage{left:8px;right:8px;top:295px;bottom:80px}.hero-bottom{bottom:20px}.hero-bottom>span{max-width:130px;font-size:9px}.motion-control{gap:8px}.motion-control>span{display:none}.hero .icon-button{width:38px;height:38px}.physics-cursor{display:none}}
@media(max-width:480px){.hero{min-height:650px;height:calc(92svh - 82px)}.hero h1{font-size:53px}.hero-content{top:80px;width:calc(100% - 40px)}#story-line{font-size:23px;min-height:64px;max-width:340px}.physics-stage{top:275px;bottom:74px}.hero-bottom>span{font-size:8px;max-width:132px}.hero-top{font-size:8px}.hero-top>span:first-child{max-width:155px}.hero-projects{font-size:11px}}
@media(max-width:360px){.hero h1{font-size:45px}#story-line{font-size:21px}.hero-top{font-size:8px}.hero-bottom>span{max-width:100px}.hero .icon-button{width:34px;height:34px}.motion-control{gap:6px}}
@media(prefers-reduced-motion:reduce){.physics-cursor{transition:none}}