:root{--black:#000000;--white:#FFFFFF;--dark-bg:#0A0A0A;--light-bg:#FAFAFA}html,body,#root{height:100%}html{background:var(--dark-bg)}body{margin:0;background:var(--dark-bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";transition:background 3s cubic-bezier(.4,0,.2,1),color 3s cubic-bezier(.4,0,.2,1)}body.light-on{background:var(--light-bg);color:var(--dark-bg)}.page{position:relative;min-height:100%;display:grid;place-items:center;overflow:hidden}.grain{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02;mix-blend-mode:overlay;animation:grain 6s steps(10) infinite;transition:opacity .15s cubic-bezier(.4,0,.2,1)}body.light-on .grain{opacity:.015}@keyframes grain{0%{transform:translate(0)}10%{transform:translate(-3%,-4%)}20%{transform:translate(2%,-1%)}30%{transform:translate(-1%,3%)}40%{transform:translate(4%,1%)}50%{transform:translate(-2%,-3%)}60%{transform:translate(3%,2%)}70%{transform:translate(-4%)}80%{transform:translate(1%,-2%)}90%{transform:translate(-1%,1%)}to{transform:translate(0)}}.center{text-align:center;z-index:1}.word{display:inline-flex;gap:.2rem}.letter{display:inline-block;font-weight:800;font-size:clamp(36px,10vw,120px);letter-spacing:.06em;color:transparent;-webkit-text-stroke:2px var(--fg);text-shadow:0 0 0 var(--fg);filter:drop-shadow(0 12px 30px rgba(229,9,20,.15));animation:reveal .9s cubic-bezier(.2,.8,.1,1) both}@keyframes reveal{0%{opacity:0;transform:translateY(40px) scale(.9) skewY(6deg)}60%{opacity:1}to{opacity:1;transform:translateY(0) scale(1) skewY(0)}}.subtitle{margin-top:120px;font-size:clamp(20px,3.5vw,28px);letter-spacing:.32em;text-transform:lowercase;opacity:0}body .subtitle{color:var(--white)}body.light-on .subtitle.black-text{color:var(--dark-bg)}.subtitle .char{display:inline-block}.subtitle.visible{opacity:1;animation:wholeFadeIn 2s ease forwards}.subtitle.visible.fade-out{animation:wholeFadeOut 2s ease forwards}.subtitle.black-text.visible .char{opacity:0;animation:charFadeInBlack 1.2s ease forwards}@keyframes wholeFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes wholeFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@keyframes charFadeInBlack{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.logo{width:min(64vw,760px);height:auto;display:block;opacity:0;animation:logoFadeIn .3s ease-out forwards;filter:brightness(0) saturate(100%) invert(0%) drop-shadow(0 0 20px rgba(0,0,0,.1)) drop-shadow(0 18px 60px rgba(0,0,0,.3));transition:filter .15s cubic-bezier(.4,0,.2,1)}body.light-on .logo{filter:brightness(0) saturate(100%) invert(0%) drop-shadow(0 0 20px rgba(0,0,0,.1)) drop-shadow(0 18px 60px rgba(0,0,0,.3))}.logo:after{content:"";display:block;margin:auto;width:80%;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.3;transition:opacity .15s cubic-bezier(.4,0,.2,1)}body.light-on .logo:after{opacity:.15}@keyframes logoFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}