:root{color-scheme:dark}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#05060d;color:#f5f5f7}body{min-height:100vh}.app-shell{position:relative;width:100%;height:100%;overflow:hidden}.background-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 5%,#112238,#04070f 20%,#02040b,#01020a);pointer-events:none;overflow:hidden}.background-layer:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,rgba(255,255,255,.24) .5px,transparent .6px),radial-gradient(circle,rgba(255,255,255,.18) .55px,transparent .65px);background-size:16px 16px,42px 42px;opacity:.9;pointer-events:none}.background-layer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 12% 14%,rgba(255,255,255,.95) .18rem,transparent .2rem),radial-gradient(circle at 26% 28%,rgba(255,255,255,.8) .12rem,transparent .14rem),radial-gradient(circle at 38% 20%,rgba(255,255,255,.7) .08rem,transparent .1rem),radial-gradient(circle at 72% 18%,rgba(255,255,255,.9) .2rem,transparent .24rem),radial-gradient(circle at 54% 48%,rgba(255,255,255,.75) .1rem,transparent .13rem),radial-gradient(circle at 84% 60%,rgba(255,255,255,.82) .14rem,transparent .17rem),radial-gradient(circle at 18% 70%,rgba(255,255,255,.72) .09rem,transparent .12rem),radial-gradient(circle at 46% 82%,rgba(255,255,255,.78) .1rem,transparent .13rem),radial-gradient(circle at 78% 86%,rgba(255,255,255,.65) .08rem,transparent .1rem);opacity:.98;pointer-events:none}.viewer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.controls-panel{position:absolute;left:1.5rem;top:1.5rem;width:min(340px,calc(100vw - 3rem));padding:1.5rem;background:#08090fe0;border:1px solid rgba(255,255,255,.08);border-radius:28px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2;box-shadow:0 40px 120px #00000038}.controls-panel h2{margin:0 0 1rem;font-size:1.4rem;letter-spacing:.02em}.control-row{display:grid;gap:.6rem;margin-bottom:1rem}.control-row label{display:block;font-size:.92rem;color:#c7c9d3;text-transform:uppercase;letter-spacing:.12em}.control-row input[type=color]{width:100%;height:2.6rem;border:none;padding:0;border-radius:16px;cursor:pointer}.control-row input[type=range]{width:100%;accent-color:#76d3ff}.controls-panel>.control-row:last-child{margin-bottom:0}@media (max-width: 640px){.controls-panel{top:auto;bottom:1rem;left:1rem;right:1rem;width:auto}}