*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden}html{scroll-behavior:smooth}#root{width:100%;min-height:100vh}section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative}body[data-mode=engineer] section+section:before{content:"";position:absolute;top:0;left:5vw;right:5vw;height:1px;background:linear-gradient(90deg,transparent,#39ff8855 20%,#39ff8855 80%,transparent);pointer-events:none}body[data-mode=video] section+section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#0a0a0a;pointer-events:none}body{font-family:Inter,system-ui,sans-serif;transition:background .6s cubic-bezier(.7,0,.2,1),color .6s cubic-bezier(.7,0,.2,1);min-height:100vh}body[data-mode=engineer]{background:#0a0e0c;color:#e6edf3}body[data-mode=video]{background:#ffe500;color:#0a0a0a}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:translateY(0)}.h-carousel{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;padding:6px 4px 18px}.h-carousel>*{scroll-snap-align:start;flex-shrink:0}body[data-mode=engineer] ::selection{background:#39ff88;color:#0a0e0c}body[data-mode=video] ::selection{background:#03f;color:#ffe500}body[data-mode=engineer]::-webkit-scrollbar{width:10px}body[data-mode=engineer]::-webkit-scrollbar-track{background:#0a0e0c}body[data-mode=engineer]::-webkit-scrollbar-thumb{background:#1f2a23;border-radius:5px}body[data-mode=video]::-webkit-scrollbar{width:10px}body[data-mode=video]::-webkit-scrollbar-track{background:#ffe500}body[data-mode=video]::-webkit-scrollbar-thumb{background:#03f;border-radius:5px}.curtain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none;transform:translateY(100%);will-change:transform;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.curtain.engineer{background:#0a0e0c}.curtain.video{background:#03f}.curtain:before{content:"";opacity:0;display:block}.curtain.engineer:before{content:">_";color:#39ff88;font-family:JetBrains Mono,monospace;font-size:clamp(32px,5vw,64px);letter-spacing:-.05em}.curtain.video:before{content:"";width:min(280px,50vw);aspect-ratio:240 / 160;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none'><rect x='14' y='38' width='160' height='98' rx='8' fill='%23FFE500' stroke='%230a0a0a' stroke-width='6'/><path d='M174 64l46-28v92l-46-28z' fill='%23FF3D2E' stroke='%230a0a0a' stroke-width='6' stroke-linejoin='round'/><circle cx='62' cy='86' r='26' fill='%23ffffff' stroke='%230a0a0a' stroke-width='6'/><circle cx='62' cy='86' r='12' fill='%230033FF' stroke='%230a0a0a' stroke-width='4'/><rect x='30' y='18' width='40' height='24' rx='3' fill='%23ffffff' stroke='%230a0a0a' stroke-width='6'/><circle cx='130' cy='66' r='6' fill='%23FF3D2E'/><rect x='118' y='110' width='44' height='10' rx='2' fill='%230a0a0a'/></svg>");background-repeat:no-repeat;background-position:center;background-size:contain}.curtain:after{content:"";opacity:0;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.curtain.engineer:after{content:"switching mode";color:#39ff88;font-family:JetBrains Mono,monospace;font-size:clamp(13px,2vw,20px)}.curtain.video:after{content:"ROLL KAMERA";color:#ffe500;font-family:Archivo Black,sans-serif;font-size:clamp(28px,5vw,64px);letter-spacing:.04em}.curtain.active{animation:curtainSwipe 1.1s cubic-bezier(.85,0,.15,1) forwards}.curtain.active:before{animation:curtainText 1.1s cubic-bezier(.85,0,.15,1) forwards}.curtain.active:after{animation:curtainText 1.1s cubic-bezier(.85,0,.15,1) forwards .04s}.curtain.video.active:before{animation:curtainText 1.1s cubic-bezier(.85,0,.15,1) forwards,cameraShake .12s ease-in-out .42s 4}@keyframes slideUp{0%{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes curtainSwipe{0%{transform:translateY(100%)}45%{transform:translateY(0)}55%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes curtainText{0%,30%{opacity:0;transform:translateY(12px)}45%,55%{opacity:1;transform:translateY(0)}70%,to{opacity:0;transform:translateY(-8px)}}@keyframes cameraShake{0%{transform:rotate(0) translate(0)}20%{transform:rotate(-4deg) translate(-4px,-2px)}40%{transform:rotate(4deg) translate(4px,2px)}60%{transform:rotate(-3deg) translate(-3px,1px)}80%{transform:rotate(3deg) translate(3px,-1px)}to{transform:rotate(0) translate(0)}}@keyframes blink{50%{opacity:0}}@keyframes engPulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes blobFloat{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-20px,20px) rotate(15deg)}}@keyframes marqueeL{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes marqueeR{0%{transform:translate(-50%)}to{transform:translate(0)}}@keyframes modalIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}button{font-family:inherit}a{color:inherit;text-decoration:none}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}body[data-mode=engineer] section[id]{scroll-margin-top:54px}body[data-mode=video] section[id]{scroll-margin-top:62px}@media (max-width: 767px){section{justify-content:flex-start}.h-carousel{gap:14px;padding:4px 2px 14px}}
