@property --left-color{syntax: "<color>"; inherits: true; initial-value: #0033ff;}@property --left-color-dark{syntax: "<color>"; inherits: true; initial-value: #000a33;}@property --left-shadow{syntax: "<color>"; inherits: true; initial-value: rgba(0,51,255,.4);}@property --right-color{syntax: "<color>"; inherits: true; initial-value: #ff2200;}@property --right-color-dark{syntax: "<color>"; inherits: true; initial-value: #330700;}@property --right-shadow{syntax: "<color>"; inherits: true; initial-value: rgba(255,34,0,.4);}.angee-scene{width:100%;height:100%;display:flex;justify-content:center;align-items:center;perspective:2000px}.angee-shape-container{position:relative;width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;transform-origin:var(--center-origin) var(--center-origin) var(--center-origin);transform:rotateX(var(--rot-x)) rotateY(var(--rot-y));margin-left:var(--center-offset);margin-top:var(--center-offset)}.angee-shape-container.angee-anim-rotate{animation:angeeRotateShape var(--anim-duration) infinite linear}.angee-shape-1,.angee-shape-2{position:absolute;width:100%;height:100%;transform-style:preserve-3d}.angee-shape-1.angee-anim-slide{animation:angeeSlideApart1 calc(var(--anim-duration) * .25) infinite alternate ease-in-out}.angee-shape-2.angee-anim-slide{animation:angeeSlideApart2 calc(var(--anim-duration) * .25) infinite alternate ease-in-out}@keyframes angeeSlideApart1{0%,15%{transform:translateZ(0)}85%,to{transform:translate3d(calc(var(--cube-size) * -.5),calc(var(--cube-size) * .5),calc(var(--cube-size) * .5))}}@keyframes angeeSlideApart2{0%,15%{transform:translateZ(0)}85%,to{transform:translate3d(calc(var(--cube-size) * .5),calc(var(--cube-size) * -.5),calc(var(--cube-size) * -.5))}}@keyframes angeeRotateShape{0%{transform:rotateX(var(--rot-x)) rotateY(var(--rot-y))}to{transform:rotateX(calc(var(--rot-x) + 360deg)) rotateY(calc(var(--rot-y) + 360deg))}}.angee-scene.angee-anim-wander{animation:angeeCubeWander var(--wander-duration) infinite ease-in-out;will-change:transform}@keyframes angeeCubeWander{0%{transform:translate(8vw,65vh)}14%{transform:translate(40vw,18vh)}28%{transform:translate(78vw,55vh)}42%{transform:translate(28vw,75vh)}56%{transform:translate(72vw,22vh)}70%{transform:translate(12vw,38vh)}84%{transform:translate(58vw,70vh)}to{transform:translate(8vw,65vh)}}@media(prefers-reduced-motion:reduce){.angee-scene.angee-anim-wander{animation:none;transform:translate(45vw,40vh)}}.angee-cube{position:absolute;width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d}.angee-cube .angee-face{position:absolute;width:100%;height:100%;box-sizing:border-box;background-color:var(--base-dark);backface-visibility:hidden}.angee-cube .angee-face-front{transform:translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-back{transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-right{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-left{transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-top{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2))}.angee-cube .angee-face-front{background:radial-gradient(circle at top left,var(--left-color-dark) 0%,#000 100%);border:1px solid var(--left-color);box-shadow:inset 2px 2px 10px var(--left-color-dark)}.angee-cube .angee-face-left{background:linear-gradient(135deg,var(--left-color) 0%,var(--left-color-dark) 100%);border:1px solid var(--left-color);box-shadow:inset 0 0 20px var(--left-shadow)}.angee-cube .angee-face-right{background:linear-gradient(-135deg,var(--right-color) 0%,var(--right-color-dark) 100%);border:1px solid var(--right-color);box-shadow:inset 0 0 20px var(--right-shadow)}.angee-cube .angee-face-back{background:radial-gradient(circle at top right,var(--right-color-dark) 0%,#000 100%);border:1px solid var(--right-color)}.angee-cube .angee-face-top{background:var(--base-dark);border:1px solid #1a1a1a;box-shadow:inset 0 0 10px #000}.angee-cube .angee-face-bottom{background:#000;border:1px solid #111}.angee-fractal-scene{position:relative;width:100%;height:100%;min-width:1px;min-height:1px;overflow:hidden;isolation:isolate}.angee-fractal-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0a0a0f;color:#e6e6e6}button{font-family:inherit}.app{display:flex;min-height:100vh}.controls{width:360px;flex-shrink:0;padding:20px;background:#111114;border-right:1px solid #2a2a30;overflow-y:auto;height:100vh}.controls h2{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#888;border-bottom:1px solid #2a2a30;padding-bottom:8px}.controls h2:not(:first-child){margin-top:28px}.group{margin-bottom:14px}label{display:block;font-size:.82rem;color:#b8b8c0;margin-bottom:6px}label .v{float:right;color:#777}select,input[type=text]{width:100%;padding:7px 9px;background:#1a1a20;color:#fff;border:1px solid #2e2e36;border-radius:5px;font-family:inherit;font-size:.85rem}select:focus,input[type=text]:focus{border-color:#e6b400;outline:none}input[type=color]{width:100%;height:36px;border:1px solid #2e2e36;background:none;border-radius:5px;cursor:pointer;padding:2px}input[type=range]{width:100%;accent-color:#E6B400}input[type=checkbox]{accent-color:#E6B400}.row{display:flex;gap:8px}.row>*{flex:1}.colors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.colors>div label{font-size:.72rem}.swatches{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .1s}.swatch:hover{transform:scale(1.15)}.preview{flex:1;display:flex;flex-direction:column;min-width:0}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;min-height:0}.stage svg{max-width:100%;max-height:calc(100vh - 180px);height:auto;display:block}.actions{padding:16px 20px;border-top:1px solid #2a2a30;background:#0e0e12;display:flex;gap:10px;align-items:center;flex-wrap:wrap}button{background:#e6b400;color:#0a0a0f;border:0;padding:9px 16px;border-radius:5px;font-weight:600;cursor:pointer;font-size:.85rem}button:hover{background:#fcd34d}button.secondary{background:#2a2a30;color:#e6e6e6}button.secondary:hover{background:#3a3a42}.filename{flex:1;min-width:200px}.toast{position:fixed;bottom:24px;right:24px;background:#1a1a20;border:1px solid #E6B400;padding:10px 16px;border-radius:6px;font-size:.85rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}.toast.show{opacity:1}.tab-bar{display:flex;gap:4px;padding:12px 20px 0;border-bottom:1px solid #2a2a30}.tab{background:transparent;color:#888;padding:8px 14px;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:.85rem;font-weight:500}.tab.active{color:#e6b400;border-bottom-color:#e6b400}.tab:hover{color:#fff}.animated-stage{flex:1;display:flex;align-items:center;justify-content:center;background:#000;min-height:0}
