:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#242b35;background:#f9fafb;--accent:195,203,214;--accent-strong:#697888;--accent-wash:rgba(180,193,208,.13);--ink:#242b35;--sub:#56616e;--surface:rgba(255,255,255,.74);--panel-border:rgba(116,137,154,.20);--page:#f6f8f9;--night:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100svh;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #425d7b;outline-offset:4px}button:disabled{opacity:.5;cursor:not-allowed}button,select{touch-action:manipulation}
.app{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 54% 60% at 79% 37%,rgba(var(--accent),.095),transparent 85%),radial-gradient(ellipse 45% 47% at 10% 100%,rgba(190,205,217,.11),transparent 90%),linear-gradient(145deg,#fafbfc,#f0f3f5 80%,#f8fafb);transition:background 650ms,color 650ms;isolation:isolate}
.app[data-scene="mist"]{background:radial-gradient(circle at 76% 44%,rgba(var(--accent),.13),transparent 36%),radial-gradient(circle at 56% 20%,rgba(202,213,221,.35),transparent 30%),linear-gradient(125deg,#f9fafc,#edf3f7 45%,#f9fafc)}
.app[data-scene="paper"]{background:#fbfbfa}
.app[data-scene="dark"]{--ink:#f1f4f8;--sub:#a9b4c2;--surface:rgba(30,37,47,.64);--panel-border:rgba(215,225,240,.22);--accent-wash:rgba(164,180,196,.12);background:radial-gradient(circle at 71% 42%,rgba(var(--accent),.10),transparent 48%),linear-gradient(140deg,#171c24,#1f2933 70%,#10161d)}
.app[data-scene="dark"] .theme-light{filter:invert(1)}
.app[data-scene="dark"] .scene-line{opacity:.32}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(81,104,126,.13) .55px,transparent .55px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent 3%,#000 57%,transparent 100%);opacity:.22}
.ambient{position:absolute;z-index:0;pointer-events:none;inset:0;overflow:hidden}.scene-line{position:absolute;width:75vw;height:75vw;max-width:1050px;max-height:1050px;right:-20vw;top:-22vw;border:1px solid rgba(156,176,193,.13);border-radius:50%;box-shadow:0 0 0 92px rgba(177,195,211,.03),0 0 0 180px rgba(161,190,209,.025),0 0 0 270px rgba(161,190,209,.012);opacity:.65;transition:opacity 1.2s ease,transform 1.2s ease}.scene-line.second{right:14vw;top:43%;width:350px;height:350px;max-height:40vw;max-width:40vw;box-shadow:none;opacity:.37;transform:rotateX(60deg) rotate(-12deg)}
.app[data-scene="paper"] .ambient{opacity:.2}
.shell{position:relative;z-index:1;max-width:1500px;min-height:100svh;margin:auto;padding:28px clamp(22px,5vw,82px) 26px;display:flex;flex-direction:column}
nav{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.27em;color:var(--ink);font-size:13px;font-weight:730}.brand-mark{width:35px;height:35px;border:1px solid var(--panel-border);border-radius:11px;display:grid;place-items:center;position:relative;transform:rotate(-8deg)}.brand-mark:before{content:"";width:15px;height:15px;border:1.6px solid currentColor;opacity:.58;border-radius:50% 45% 75% 22%;transform:rotate(30deg)}.brand small{display:block;letter-spacing:.21em;font-size:9px;font-weight:500;margin-top:5px;color:var(--sub)}.lab-tag{display:inline-flex;align-items:center;gap:10px;color:var(--sub);font-size:11px;letter-spacing:.05em}.lab-tag span{width:6px;height:6px;background:rgb(var(--accent));border:1px solid rgba(91,103,118,.35);border-radius:50%}
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.12fr);gap:clamp(20px,3vw,65px);align-items:center;padding:20px 0}.info{z-index:2;padding:36px 0;max-width:580px}.eyebrow{display:flex;align-items:center;gap:14px;color:var(--sub);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:620}.eyebrow:before{content:"";width:32px;height:1px;background:var(--sub);opacity:.7}.info h1{font-size:clamp(53px,6vw,96px);letter-spacing:-.083em;line-height:1.025;font-weight:510;margin:29px 0 21px;color:var(--ink)}.info h1 em{font-style:normal;font-weight:320;color:var(--sub)}.description{max-width:425px;line-height:1.85;font-size:15px;color:var(--sub);margin:0 0 31px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{border-radius:999px;border:1px solid var(--panel-border);padding:15px 22px;color:var(--ink);background:var(--surface);backdrop-filter:blur(16px);font-size:12px;font-weight:640;box-shadow:0 6px 20px rgba(26,50,68,.025);transition:transform .23s,box-shadow .23s,background .23s}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(26,50,68,.075)}.btn.main-btn{background:var(--ink);color:var(--page);border-color:transparent}.app[data-scene="dark"] .btn.main-btn{background:#f7f9fa;color:#212a32}.plain{border:0;background:transparent;color:var(--sub);font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:8px 3px}
.note{font-size:11px;color:var(--sub);margin:23px 0 0;line-height:1.6}.note strong{color:var(--ink);font-weight:590}
.liza-stage{position:relative;min-height:560px;display:grid;place-items:center;isolation:isolate}.liza-stage::before{position:absolute;content:"";inset:8% 0;border-radius:50%;background:radial-gradient(circle at 50% 47%,rgba(var(--accent),.10),transparent 56%);z-index:-1;pointer-events:none}.canvas-shell{position:relative;width:min(100%,690px);aspect-ratio:1;touch-action:none;cursor:grab}.canvas-shell:active{cursor:grabbing}canvas{height:100%;width:100%;display:block;pointer-events:none}.liza-caption{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;border:1px solid var(--panel-border);background:var(--surface);backdrop-filter:blur(12px);border-radius:30px;padding:9px 15px;font-size:11px;color:var(--sub)}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-strong);box-shadow:0 0 10px rgba(var(--accent),.4)}.orb-instruction{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-size:11px;color:var(--sub);letter-spacing:.015em;text-align:center;white-space:nowrap}
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--sub);font-size:10px;letter-spacing:.045em;border-top:1px solid var(--panel-border);padding-top:17px}.hint{opacity:.82}
.panel{display:none;position:relative;width:min(100%,480px);margin-top:22px;border:1px solid var(--panel-border);border-radius:24px;background:var(--surface);box-shadow:0 24px 70px rgba(83,106,127,.06);backdrop-filter:blur(24px);padding:20px;animation:slide-in .5s cubic-bezier(.2,.7,.3,1) both}.panel.open{display:block}.panel h2{margin:0 0 5px;font-size:15px;letter-spacing:-.025em;font-weight:660}.panel p{color:var(--sub);font-size:11px;line-height:1.6;margin:0 0 15px}.group{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:14px 0 9px}.group strong{font-size:11px;font-weight:620;color:var(--ink)}.group output{font-size:10px;color:var(--sub)}.swatches,.scenes,.modes{display:flex;gap:8px;flex-wrap:wrap}.swatch{height:31px;width:31px;border:2px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 0 1px var(--panel-border);transition:transform .2s}.swatch:hover{transform:scale(1.1)}.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}.customcolor{width:31px;height:31px;padding:0;border:1px solid var(--panel-border);border-radius:50%;background:transparent;overflow:hidden}.customcolor::-webkit-color-swatch-wrapper{padding:0}.customcolor::-webkit-color-swatch{border:none;border-radius:50%}.scene-btn,.mode-btn{border:1px solid var(--panel-border);border-radius:50px;padding:9px 13px;background:rgba(255,255,255,.24);color:var(--sub);font-size:11px}.app[data-scene="dark"] .scene-btn,.app[data-scene="dark"] .mode-btn{background:rgba(255,255,255,.055)}.scene-btn[aria-pressed="true"],.mode-btn[aria-pressed="true"]{color:var(--ink);border-color:rgba(79,98,113,.48);background:var(--accent-wash)}.range{width:100%;accent-color:#75889c;cursor:pointer}.controls-note{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-top:18px}.controls-note span{color:var(--sub);font-size:10px}.controls-note .btn{padding:11px 16px;font-size:11px}.work-message{border:1px solid var(--panel-border);border-radius:16px;background:var(--surface);padding:17px 19px;line-height:1.65;color:var(--sub);font-size:12px;max-width:460px;margin-top:25px}.work-message strong{color:var(--ink)}
@keyframes slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.shell{padding-left:30px;padding-right:30px}main{grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:7px}.liza-stage{min-height:440px}.info h1{font-size:clamp(51px,6vw,71px)}}
@media(max-width:740px){.shell{padding:22px 22px 19px}main{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:35px}.info{padding:0}.info h1{font-size:clamp(53px,14vw,79px);margin:19px 0 16px}.description{font-size:13px;line-height:1.7;margin-bottom:20px}.panel{max-width:100%;margin-top:20px}.liza-stage{min-height:300px;width:100%;margin-top:-6px}.canvas-shell{width:min(100%,480px)}.liza-caption{bottom:0}.orb-instruction{top:1%}.note{margin-top:16px}.lab-tag{font-size:9px}footer{line-height:1.5}}
@media(max-width:370px){.shell{padding:19px 16px}.info h1{font-size:49px}.btn{padding:13px 17px}.orb-instruction{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}.btn:hover{transform:none}}
.entry-status{max-width:460px;padding:9px 12px;border:1px solid var(--panel-border);border-radius:12px;background:var(--surface);font-size:12px;color:var(--sub)}.entry-status[data-error="true"]{border-color:#b8787c;color:#8f353b}

/* LIZA uses the same layered glass signature as the Liquid dashboard. */
.info h1{max-width:650px;font-size:clamp(49px,5.3vw,78px);line-height:.98;letter-spacing:-.078em;font-weight:560;margin:25px 0 22px}
.info h1 em{display:inline-block;color:#667985;font-weight:350}
.description{max-width:435px;font-size:15px;line-height:1.78;color:#52606b}
.app[data-scene="dark"] .info h1 em{color:#b1c6d0}.app[data-scene="dark"] .description{color:#bbc5cf}
.liza-stage{min-height:620px;overflow:visible;touch-action:pan-y}
.liza-stage:before{inset:3% 0;background:radial-gradient(ellipse at 50% 47%,rgba(var(--accent),.24),transparent 50%),radial-gradient(ellipse at 54% 70%,rgba(96,169,198,.10),transparent 62%);}
.orb-instruction{top:2%;z-index:3;letter-spacing:.16em;font-size:9px;font-weight:650;color:#738896}
.orb-wrap{position:relative;width:min(100%,660px);height:580px;display:grid;place-items:center;isolation:isolate;touch-action:pan-y;cursor:grab;perspective:900px}
.orb-wrap:active{cursor:grabbing}
.orb-aura{position:absolute;width:min(87%,510px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--accent),.24),rgba(130,197,216,.12) 36%,rgba(144,198,215,.035) 60%,transparent 72%);transition:opacity .5s ease,scale .8s ease;animation:aura-drift 9s ease-in-out infinite}
.orb-ring{position:absolute;display:block;pointer-events:none;border:1px solid rgba(255,255,255,.82);border-radius:49% 51% 58% 42%/48% 44% 56% 52%;box-shadow:inset 0 0 25px rgba(255,255,255,.32),0 0 38px rgba(var(--accent),.14);background:radial-gradient(ellipse at 32% 22%,rgba(255,255,255,.68),rgba(var(--accent),.14) 32%,rgba(126,190,208,.07) 60%,transparent 72%)}
.ring-one{width:72%;height:68%;opacity:.48;transform:translateZ(-55px) rotate(-18deg);animation:membrane-one 8s ease-in-out infinite}
.ring-two{width:62%;height:76%;opacity:.40;border-color:rgba(168,207,220,.8);background:linear-gradient(122deg,rgba(255,255,255,.34),rgba(var(--accent),.10) 48%,rgba(255,255,255,.15));transform:translateZ(-24px) rotate(27deg);animation:membrane-two 10s ease-in-out infinite}
.orb-core{position:relative;z-index:1;width:clamp(260px,31vw,365px);height:clamp(285px,33vw,385px);border:1px solid rgba(255,255,255,.94);overflow:hidden;border-radius:63% 37% 73% 27%/37% 66% 34% 63%;background:radial-gradient(ellipse at 29% 18%,#fff 0 3%,rgba(255,255,255,.95) 8% 14%,transparent 33%),radial-gradient(ellipse at 76% 72%,rgba(var(--accent),.66),transparent 48%),radial-gradient(ellipse at 39% 52%,rgba(255,255,255,.78),transparent 58%),linear-gradient(145deg,rgba(255,255,255,.89),rgba(166,210,224,.42) 48%,rgba(255,255,255,.73));box-shadow:inset 19px 15px 37px rgba(255,255,255,.92),inset -27px -33px 51px rgba(45,87,104,.20),inset 2px 0 23px rgba(116,185,206,.22),0 25px 58px rgba(var(--accent),.34),0 0 0 15px rgba(255,255,255,.20),0 0 83px rgba(var(--accent),.26);transform:translateZ(0);translate:0 0;scale:1;transform-origin:center;animation:liza-breathe var(--motion-duration,7s) cubic-bezier(.42,0,.25,1) infinite;transition:border-radius .5s ease,box-shadow .45s ease,filter .45s ease}
.orb-core:before,.orb-core:after{content:"";position:absolute;pointer-events:none;border-radius:50%;z-index:4}
.orb-core:before{inset:12% 11% 14% 15%;border:1px solid rgba(255,255,255,.76);background:linear-gradient(122deg,rgba(255,255,255,.42),transparent 38% 67%,rgba(var(--accent),.12));box-shadow:inset 5px 6px 16px rgba(255,255,255,.68),0 0 18px rgba(255,255,255,.20);transform:rotate(-23deg);animation:current-flow 8s ease-in-out infinite alternate}
.orb-core:after{inset:6% 5% 8% 8%;border:1px solid rgba(255,255,255,.40);border-radius:53% 47% 61% 39%/44% 57% 43% 56%;transform:rotate(36deg);box-shadow:inset 0 0 29px rgba(255,255,255,.22);animation:inner-wave 11s ease-in-out infinite alternate}
.orb-liquid{position:absolute;inset:16% 10% 12%;border-radius:48% 52% 38% 62%/51% 40% 60% 49%;background:radial-gradient(ellipse at 44% 54%,rgba(255,255,255,.32),transparent 41%),linear-gradient(155deg,transparent 26%,rgba(255,255,255,.40) 48%,rgba(var(--accent),.25) 54%,transparent 74%);filter:blur(2px);transform:rotate(-21deg) scale(1.12);animation:liquid-current 6.6s ease-in-out infinite alternate}
.orb-membrane{position:absolute;inset:20% 24% 17% 14%;border:1px solid rgba(255,255,255,.78);border-right-color:rgba(var(--accent),.38);border-radius:62% 38% 42% 58%/42% 59% 41% 58%;box-shadow:inset 7px 4px 17px rgba(255,255,255,.44),0 0 23px rgba(255,255,255,.15);transform:rotate(31deg);animation:membrane-flow 8.4s ease-in-out infinite alternate}
.orb-glint{position:absolute;z-index:5;left:23%;top:14%;width:70px;height:35px;border-radius:50%;background:rgba(255,255,255,.92);filter:blur(10px);rotate:-29deg;animation:glint-flow 5.2s ease-in-out infinite}
.orb-bubble{position:absolute;z-index:6;display:block;border:1px solid rgba(255,255,255,.92);border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 12%,rgba(255,255,255,.35) 27%,rgba(var(--accent),.27) 75%);box-shadow:inset 2px 2px 5px white,0 0 14px rgba(var(--accent),.24)}
.bubble-one{width:17px;height:17px;left:25%;top:31%;animation:bubble-drift 5s ease-in-out infinite}.bubble-two{width:10px;height:10px;right:25%;bottom:29%;animation:bubble-drift 6s ease-in-out -2s infinite reverse}
.water-fragment{position:absolute;z-index:2;display:block;width:var(--size,9px);height:var(--size,9px);left:calc(50% + var(--x));top:calc(50% + var(--y));border:1px solid rgba(255,255,255,.95);border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff 0 12%,rgba(255,255,255,.6) 29%,rgba(var(--accent),.48) 73%);box-shadow:inset 1px 1px 3px #fff,0 0 12px rgba(var(--accent),.40);animation:particle-float var(--speed,5s) ease-in-out var(--delay,0s) infinite alternate;transition:scale .4s ease,opacity .4s ease}
.fragment-one{--x:-193px;--y:-94px;--size:9px;--speed:4.8s}.fragment-two{--x:194px;--y:-126px;--size:7px;--speed:6.4s;--delay:-3s}.fragment-three{--x:-237px;--y:48px;--size:6px;--speed:5.4s;--delay:-2s}.fragment-four{--x:224px;--y:81px;--size:12px;--speed:7s;--delay:-1s}.fragment-five{--x:-112px;--y:-211px;--size:5px;--speed:4.5s;--delay:-2.7s}.fragment-six{--x:122px;--y:203px;--size:7px;--speed:5.8s;--delay:-4s}.fragment-seven{--x:-178px;--y:170px;--size:4px;--speed:6.2s;--delay:-1.5s}.fragment-eight{--x:35px;--y:-245px;--size:5px;--speed:4.2s;--delay:-3.2s}
.orb-label{position:absolute;bottom:4%;left:0;right:0;text-align:center;color:#708591;font-size:9px;font-weight:650;letter-spacing:.17em}
.orb-caption{bottom:1%;z-index:5}
.orb-wrap:hover .orb-core{filter:saturate(1.13);box-shadow:inset 19px 15px 37px rgba(255,255,255,.94),inset -27px -33px 51px rgba(45,87,104,.22),0 28px 70px rgba(var(--accent),.43),0 0 0 18px rgba(255,255,255,.24),0 0 104px rgba(var(--accent),.32)}
.orb-wrap:hover .orb-aura{scale:1.15;opacity:.9}
.orb-wrap[data-mode="elastic"] .orb-core{border-radius:44% 56% 30% 70%/62% 35% 65% 38%;animation-duration:3.8s}
.orb-wrap[data-mode="elastic"] .orb-ring{animation-duration:5s}
.orb-wrap[data-mode="particles"] .water-fragment{scale:1.6;opacity:.95}
.orb-wrap[data-mode="explore"] .orb-core{filter:hue-rotate(16deg) saturate(1.18)}
.orb-wrap[data-mode="fluid"] .orb-liquid{animation-duration:4.8s}
@keyframes liza-breathe{0%,100%{translate:0 5px;scale:.98 1.02}34%{translate:5px -12px;scale:1.045 .96}68%{translate:-4px -3px;scale:.96 1.055}}
@keyframes membrane-one{0%,100%{scale:1;rotate:-12deg}50%{scale:1.04;rotate:9deg}}
@keyframes membrane-two{0%,100%{scale:.96 1;rotate:16deg}50%{scale:1.04 .97;rotate:-14deg}}
@keyframes current-flow{from{transform:rotate(-34deg) scale(.96)}to{transform:rotate(24deg) scale(1.06)}}
@keyframes inner-wave{from{transform:rotate(30deg) scale(.98)}to{transform:rotate(42deg) scale(1.04)}}
@keyframes liquid-current{from{transform:rotate(-24deg) scale(.92,1.08)}to{transform:rotate(12deg) scale(1.1,.94)}}
@keyframes membrane-flow{from{transform:rotate(23deg) scale(.92)}to{transform:rotate(43deg) scale(1.08)}}
@keyframes glint-flow{0%,100%{translate:0 0;scale:1;opacity:.58}50%{translate:21px 28px;scale:1.24;opacity:.97}}
@keyframes bubble-drift{0%,100%{translate:0 0;scale:.9}50%{translate:9px -17px;scale:1.13}}
@keyframes particle-float{from{translate:0 9px;scale:.84}to{translate:7px -13px;scale:1.16}}
@keyframes aura-drift{0%,100%{scale:.94;opacity:.72}50%{scale:1.08;opacity:1}}
@media(max-width:1050px){.liza-stage{min-height:500px}.orb-wrap{height:500px}.orb-core{width:clamp(250px,34vw,330px);height:clamp(275px,37vw,350px)}.fragment-one{--x:-159px}.fragment-two{--x:161px}.fragment-three{--x:-188px}.fragment-four{--x:178px}.fragment-five{--y:-183px}.fragment-six{--y:177px}.fragment-seven{--x:-141px;--y:149px}.fragment-eight{--y:-208px}}
@media(max-width:740px){.info h1{font-size:clamp(38px,11.2vw,56px);line-height:1.02;margin:19px 0 16px;letter-spacing:-.075em}.info h1 em{display:inline-block}.description{font-size:13px;line-height:1.68}.liza-stage{min-height:390px;margin-top:8px}.orb-wrap{width:min(100%,480px);height:390px}.orb-core{width:clamp(235px,64vw,310px);height:clamp(255px,69vw,330px)}.ring-one{width:78%;height:67%}.ring-two{width:67%;height:76%}.fragment-one{--x:-128px;--y:-72px}.fragment-two{--x:130px;--y:-92px}.fragment-three{--x:-145px;--y:36px}.fragment-four{--x:148px;--y:60px}.fragment-five{--x:-70px;--y:-156px}.fragment-six{--x:78px;--y:151px}.fragment-seven{--x:-130px;--y:130px}.fragment-eight{--x:24px;--y:-173px}.orb-label{bottom:0}.orb-instruction{top:0;font-size:8px}.orb-caption{bottom:-1%}}
@media(max-width:390px){.info h1{font-size:36px}.liza-stage{min-height:350px}.orb-wrap{height:350px}.orb-core{width:224px;height:248px}.fragment-one{--x:-111px}.fragment-two{--x:113px}.fragment-three{--x:-128px}.fragment-four{--x:130px}}
@media(prefers-reduced-motion:reduce){.orb-aura,.orb-ring,.orb-core,.orb-core:before,.orb-core:after,.orb-liquid,.orb-membrane,.orb-glint,.orb-bubble,.water-fragment{animation:none!important;transition:none!important}}

/* Pause decorative work while hidden, at zero energy, or with reduced motion. */
.app[data-motion-paused="true"] *, .app[data-motion-paused="true"] *::before, .app[data-motion-paused="true"] *::after{animation-play-state:paused!important}