*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;color:#eee;font-family:Arial,sans-serif}body{overflow:hidden}button,input{font:inherit}.app{width:100vw;height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr) 290px;grid-template-rows:56px minmax(0,1fr) 60px;background:radial-gradient(circle at 50% 40%,#171717,#030303 55%,#000)}header,.left,.right,footer{background:rgba(6,6,6,.68);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}header{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 20px;border-bottom:1px solid #ffffff14}header b{letter-spacing:2px}header b span{color:#a11}header small{color:#666}header em{margin-left:auto;color:#666;font-style:normal;font-size:10px;letter-spacing:2px}.left,.right{padding:18px 16px;overflow:auto}.left{border-right:1px solid #ffffff14}.right{border-left:1px solid #ffffff14}h2{font-size:11px;letter-spacing:2px;color:#777;margin:0 0 14px}button{color:#ddd;background:#080808b8;border:1px solid #ffffff1c;padding:10px;cursor:pointer}button:hover,button.active{border-color:#991f1f;background:#31090999}#animations{display:grid;gap:7px}.fxbtn{text-align:left;display:flex;justify-content:space-between}.fxbtn small{color:#555}#surprise{width:100%;margin-top:14px}main{min-width:0;min-height:0;padding:18px}.stage{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid #ffffff14;background:radial-gradient(circle,#151515,#030303 50%,#000)}.stage:before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:36px 36px}.logo{--x:0px;--y:0px;--rot:0deg;--speed:1.6s;--amount:7px;--scale:1.08;--blur:5px;position:absolute;left:50%;top:50%;width:min(520px,78%);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot));transform-origin:center;text-align:center;will-change:transform,filter,opacity}.logo img{display:none;width:100%;height:auto}.logo div{font-size:clamp(40px,6vw,96px);font-weight:900;line-height:.84;letter-spacing:-4px;text-shadow:0 0 28px #9008}.logo div span{display:block;color:#a51515}.badge{position:absolute;right:12px;bottom:12px;padding:7px 10px;background:#000b;border:1px solid #ffffff1a;color:#888;font-size:10px;letter-spacing:2px}.urlLabel,.control label{display:flex;justify-content:space-between;gap:10px;color:#888;font-size:10px;letter-spacing:1px}.urlLabel{display:block}.urlLabel input{width:100%;margin-top:8px;padding:9px;background:#050505;color:#ddd;border:1px solid #ffffff1c}.twobtn{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.control{margin-top:17px}.control input[type=range]{width:100%;accent-color:#991b1b}.control output{color:#ddd}.muted{color:#666}footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid #ffffff14}footer div{display:flex;gap:8px;align-items:center}
.fx-glitch{animation:glitch var(--speed) infinite steps(2,end)}.fx-wave{animation:wave var(--speed) ease-in-out infinite}.fx-float{animation:float var(--speed) ease-in-out infinite}.fx-pulse{animation:pulse var(--speed) ease-in-out infinite}.fx-flicker{animation:flicker var(--speed) linear infinite}.fx-rgb{animation:rgb var(--speed) steps(2,end) infinite}.fx-shake{animation:shake var(--speed) linear infinite}.fx-blur{animation:blurfx var(--speed) ease-in-out infinite}.fx-tilt{animation:tilt var(--speed) ease-in-out infinite}.fx-breathe{animation:breathe var(--speed) ease-in-out infinite}.fx-scan{animation:scan var(--speed) ease-in-out infinite}.fx-mousetilt{animation:none;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(900px) rotateX(calc(var(--my,0)*var(--depth)*-1deg)) rotateY(calc(var(--mx,0)*var(--depth)*1deg)) rotate(var(--rot));transition:transform .12s ease-out}.fx-magnetic{animation:none;transform:translate(calc(-50% + var(--x) + var(--mx,0)*var(--pull)),calc(-50% + var(--y) + var(--my,0)*var(--pull))) rotate(var(--rot));transition:transform .16s cubic-bezier(.2,.8,.2,1)}.fx-spotlight:after{content:"";position:absolute;inset:-45%;pointer-events:none;background:radial-gradient(circle var(--spot) at var(--px,50%) var(--py,50%),#fff5,transparent 48%);mix-blend-mode:screen}.fx-3dfloat{animation:float3d var(--speed) ease-in-out infinite}.fx-neon{animation:neonstart var(--speed) linear infinite}.fx-tear{animation:tearf var(--speed) steps(1,end) infinite}.fx-liquid{animation:liquid var(--speed) ease-in-out infinite}.fx-scatter{animation:scatter var(--speed) cubic-bezier(.7,0,.3,1) infinite}.fx-shatter{animation:shatter var(--speed) cubic-bezier(.7,0,.2,1) infinite}.fx-depthzoom{animation:depthzoom var(--speed) ease-in-out infinite}.fx-lightsweep{overflow:hidden}.fx-lightsweep:after{content:"";position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 35%,#fff0 42%,#fff9 50%,#fff0 58%,transparent 65%);transform:translateX(-90%);animation:lightsweep var(--speed) ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}.fx-ghost{animation:ghost var(--speed) ease-in-out infinite}.fx-hologram{animation:hologram var(--speed) steps(2,end) infinite}.fx-hologram:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0ff2 0 1px,transparent 1px 5px);mix-blend-mode:screen;pointer-events:none}.fx-pixel{animation:pixel var(--speed) steps(8,end) infinite}.fx-cinematic{animation:cinematic var(--speed) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes glitch{0%,86%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot))}89%{transform:translate(calc(-50% + var(--x) - var(--amount)),calc(-50% + var(--y))) skewX(-4deg)}92%{transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y))) skewX(4deg);filter:drop-shadow(calc(var(--amount)*-1) 0 #f00) drop-shadow(var(--amount) 0 #0ff)}}@keyframes wave{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(-3deg)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - var(--amount))) rotate(3deg)}}@keyframes float{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - var(--amount)))}}@keyframes pulse{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(var(--scale))}}@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.15}}@keyframes rgb{0%,86%,100%{filter:none}90%{filter:drop-shadow(calc(var(--amount)*-1) 0 #f03) drop-shadow(var(--amount) 0 #0ef)}}@keyframes shake{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}25%{transform:translate(calc(-50% + var(--x) - var(--amount)),calc(-50% + var(--y) + var(--amount)))}75%{transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y) - var(--amount)))}}@keyframes blurfx{0%,100%{filter:blur(0)}50%{filter:blur(var(--blur)) brightness(1.4)}}@keyframes tilt{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(800px) rotateY(-10deg)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(800px) rotateY(10deg)}}@keyframes breathe{0%,100%{filter:brightness(.85) drop-shadow(0 0 4px #9005)}50%{filter:brightness(1.25) drop-shadow(0 0 30px #d008)}}@keyframes scan{0%,100%{clip-path:inset(0)}45%{clip-path:inset(0 0 78%)}55%{clip-path:inset(78% 0 0)}}
@media(max-width:900px){body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto}header,footer{grid-column:1}.left,.right{border:0;border-bottom:1px solid #ffffff14}main{min-height:60vh}footer{flex-wrap:wrap;padding:10px 18px}}
@keyframes float3d{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(900px) translateZ(0) rotateX(-4deg) rotateY(-8deg)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 18px)) perspective(900px) translateZ(calc(var(--depth)*1px)) rotateX(5deg) rotateY(9deg)}}
@keyframes neonstart{0%,8%,12%,18%{opacity:.08;filter:brightness(.3)}9%,13%,19%,72%,100%{opacity:1;filter:brightness(1.35) drop-shadow(0 0 8px #e22) drop-shadow(0 0 28px #a00)}74%{opacity:.45}}
@keyframes tearf{0%,82%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}84%{transform:translate(calc(-50% + var(--x) - var(--amount)),calc(-50% + var(--y))) skewX(8deg);clip-path:inset(18% 0 48%)}86%{transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y)));clip-path:inset(58% 0 12%)}88%{clip-path:none}}
@keyframes liquid{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) skewX(0) scale(1)}25%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) skewX(calc(var(--amount)*.18deg)) scaleX(1.03)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) skewY(calc(var(--amount)*-.12deg)) scaleY(.97)}75%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) skewX(calc(var(--amount)*-.15deg)) scaleX(.98)}}
@keyframes scatter{0%,18%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);filter:blur(0)}48%{transform:translate(calc(-50% + var(--x) - var(--amount)),calc(-50% + var(--y) + var(--amount))) rotate(-7deg) scale(.94);filter:blur(3px)}58%{transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y) - var(--amount))) rotate(6deg) scale(1.04);filter:blur(1px)}}
@keyframes shatter{0%,22%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}45%{clip-path:polygon(8% 5%,94% 0,84% 43%,100% 74%,73% 100%,42% 82%,8% 100%,18% 58%,0 28%);transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y) - var(--amount))) rotate(4deg);opacity:.35}62%{transform:translate(calc(-50% + var(--x) - 8px),calc(-50% + var(--y) + 5px));opacity:.85}}
@keyframes depthzoom{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(800px) translateZ(0) scale(1);filter:blur(0)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(800px) translateZ(90px) scale(var(--scale));filter:blur(.3px)}}
@keyframes lightsweep{0%,25%{transform:translateX(-90%)}65%,100%{transform:translateX(90%)}}
@keyframes ghost{0%,100%{text-shadow:0 0 20px #9008;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}50%{text-shadow:calc(var(--amount)*-1) 0 2px #f004,var(--amount) 0 2px #0ff3,0 0 35px #9008;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 6px))}}
@keyframes hologram{0%,100%{opacity:.92;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));filter:hue-rotate(0deg) brightness(1.2)}48%{opacity:.72;transform:translate(calc(-50% + var(--x) + var(--amount)),calc(-50% + var(--y)));filter:hue-rotate(35deg) brightness(1.6)}52%{opacity:.45;transform:translate(calc(-50% + var(--x) - var(--amount)),calc(-50% + var(--y)))}}
@keyframes pixel{0%,18%{filter:blur(12px) contrast(2);opacity:.1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.82)}45%{filter:blur(5px) contrast(1.7);opacity:.55}65%,100%{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
@keyframes cinematic{0%,18%{opacity:0;clip-path:inset(48% 0 48%);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 35px)) scale(1.08);filter:blur(8px)}48%,78%{opacity:1;clip-path:inset(0);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);filter:blur(0)}100%{opacity:0;clip-path:inset(0);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 16px)) scale(1.02)}}

/* LANDINGLAB APPEARANCE + EFFECT-SPECIFIC CONTROLS */
.stage{--stage-color:#030303;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--stage-color),#222 28%),var(--stage-color) 54%,#000)}
.logo div{color:var(--primary,#eee);text-shadow:0 0 28px color-mix(in srgb,var(--glow-color,#900),transparent 45%)}
.logo div span{color:var(--accent,#a51515)}
.controlSection{margin:24px 0 4px;padding-top:14px;border-top:1px solid #ffffff12;color:#a33;font-size:10px;letter-spacing:1.8px;font-weight:700}.controlSection:first-child{margin-top:4px;border-top:0;padding-top:0}
.colorRow{display:grid;grid-template-columns:42px 1fr;gap:8px;margin-top:7px}.colorRow input[type=color]{width:42px;height:34px;padding:2px;border:1px solid #ffffff1c;background:#050505;cursor:pointer}.colorRow .hex{min-width:0;height:34px;padding:0 9px;background:#050505;color:#ddd;border:1px solid #ffffff1c;font-family:monospace;text-transform:uppercase}
.fx-spotlight:after{background:radial-gradient(circle var(--spot) at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--spot-color,#fff),transparent 65%) 0,color-mix(in srgb,var(--spot-color,#fff),transparent 82%) var(--softness),transparent 72%)}
.fx-lightsweep:after{background:linear-gradient(var(--sweep-angle),transparent calc(50% - var(--sweep-width)),color-mix(in srgb,var(--sweep-color,#fff),transparent 100%) calc(50% - var(--sweep-width)/2),color-mix(in srgb,var(--sweep-color,#fff),transparent 30%) 50%,color-mix(in srgb,var(--sweep-color,#fff),transparent 100%) calc(50% + var(--sweep-width)/2),transparent calc(50% + var(--sweep-width)))}
.fx-hologram:after{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent,#0ff),transparent 78%) 0 1px,transparent 1px var(--scan-gap))}
.fx-mousetilt{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(var(--perspective)) rotateX(calc(var(--my,0)*var(--depth)*-1deg)) rotateY(calc(var(--mx,0)*var(--depth)*1deg)) rotate(var(--rot))}
@keyframes tilt{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(var(--perspective)) rotateY(calc(var(--tilt)*-1deg))}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(var(--perspective)) rotateY(calc(var(--tilt)*1deg))}}
@keyframes rgb{0%,86%,100%{filter:none}90%{filter:drop-shadow(calc(var(--amount)*-1) 0 var(--accent)) drop-shadow(var(--amount) 0 var(--secondary))}}
@keyframes breathe{0%,100%{filter:brightness(.85) drop-shadow(0 0 4px color-mix(in srgb,var(--glow-color),transparent 55%))}50%{filter:brightness(1.25) drop-shadow(0 0 30px color-mix(in srgb,var(--glow-color),transparent 20%))}}
@keyframes neonstart{0%,8%,12%,18%{opacity:.08;filter:brightness(.3)}9%,13%,19%,72%,100%{opacity:1;filter:brightness(1.35) drop-shadow(0 0 8px var(--glow-color)) drop-shadow(0 0 28px var(--glow-color))}74%{opacity:.45}}
@keyframes ghost{0%,100%{text-shadow:0 0 20px var(--glow-color);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}50%{text-shadow:calc(var(--amount)*-1) 0 2px var(--accent),var(--amount) 0 2px var(--secondary),0 0 35px var(--glow-color);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 6px))}}
@keyframes depthzoom{0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(var(--perspective)) translateZ(0) scale(1);filter:blur(0)}50%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) perspective(var(--perspective)) translateZ(calc(var(--depth)*1px)) scale(var(--scale));filter:blur(.3px)}}
@keyframes pixel{0%,18%{filter:blur(var(--pixel-blur)) contrast(2);opacity:.1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.82)}45%{filter:blur(calc(var(--pixel-blur)*.42)) contrast(1.7);opacity:.55}65%,100%{filter:blur(0);opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
@keyframes cinematic{0%,18%{opacity:0;clip-path:inset(48% 0 48%);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 35px)) scale(1.08);filter:blur(var(--reveal-blur))}48%,78%{opacity:1;clip-path:inset(0);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);filter:blur(0)}100%{opacity:0;clip-path:inset(0);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 16px)) scale(1.02)}}