body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#000;color:#fff;margin:0;padding:0;display:flex;flex-direction:column;height:100dvh;overflow:hidden}*{box-sizing:border-box}#root{width:100%;height:100%;display:flex;flex-direction:column}:root{--btn-height: 44px}.app-container{display:flex;flex-direction:column;height:100dvh;width:100%;transition:padding-right .35s cubic-bezier(.25,.8,.25,1)}.header{padding:8px 10px;text-align:center;background:#111;border-bottom:1px solid #333;z-index:10;display:flex;justify-content:space-between;align-items:center}.header-text{flex-grow:1}.stats{color:#00e5ff;font-weight:700;font-family:monospace;font-size:15px;margin-bottom:2px}.info{color:#aaa;font-size:10px;line-height:1.3}.hamburger{font-size:26px;cursor:pointer;padding:0 15px;-webkit-user-select:none;user-select:none;transition:.2s}.hamburger:active{transform:scale(.8);color:#00e5ff}.chaos-bar{padding:6px 8px;background:#151515;border-top:1px solid #333;display:flex;align-items:center;gap:8px;z-index:10;flex-shrink:0}.chaos-bar select{flex-grow:1;margin:0;padding:4px;font-size:12px;height:28px;border-radius:4px;background:#222;color:#fff;border:1px solid #444}.canvas-container{flex-grow:1;display:flex;align-items:center;justify-content:center;background:#050505;position:relative;overflow:hidden;touch-action:none}.modifiers-panel{background:#1a1a1a;padding:3px 10px;display:flex;justify-content:center;align-items:center;border-top:1px solid #333;font-size:11px;color:#ccc;z-index:10;flex-wrap:wrap;gap:12px;flex-shrink:0}.mod-checkbox{display:flex;align-items:center;gap:4px;cursor:pointer}.mod-checkbox input{margin:0;accent-color:#00e5ff}.btn-tune{background:#222;border:1px solid #ffbc00;color:#ffbc00;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}.btn-tune.active{background:#f33;border-color:#f33;color:#fff}.transformer-box{position:relative;background:#111;border-top:1px solid #333;overflow:hidden;height:75px;z-index:10;flex-shrink:0}.transformer-track{display:flex;width:100%;height:100%;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.quick-adjust,.live-formula-panel{flex:0 0 100%;width:100%;height:100%;box-sizing:border-box;position:relative}.switch-btn{position:absolute;top:0;width:35px;height:100%;display:flex;align-items:center;justify-content:center;background:#ffffff05;cursor:pointer;color:#888;z-index:5;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;transition:.1s}.switch-btn:hover{background:#ffffff0d;color:#fff}.switch-btn:active{background:#ffffff1a;color:#00e5ff}.switch-btn.right{right:0;border-left:1px solid #222}.switch-btn.left{left:0;border-right:1px solid #222}.quick-adjust{padding:8px 40px 8px 10px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.live-formula-panel{display:flex;flex-direction:column;background:#0a0a0a;justify-content:center}.live-formula-scroll{overflow-x:auto;white-space:nowrap;padding:6px 10px 6px 45px;display:flex;align-items:center;font-family:monospace;font-size:11px;gap:6px;flex-grow:1;scrollbar-width:none}.live-formula-scroll::-webkit-scrollbar{display:none}.formula-slider-panel{display:flex;padding:4px 10px 4px 45px;background:#151515;align-items:center;gap:8px;border-top:1px dashed #333;height:32px;box-sizing:border-box;flex-shrink:0}.formula-slider-panel input[type=range]{flex-grow:1;accent-color:#ffbc00;margin:0;height:6px;cursor:pointer}.quick-group-left,.quick-group-right{display:flex;flex-direction:column;gap:10px;justify-content:center}.quick-col{display:flex;align-items:center;gap:8px;width:100%}.quick-col input[type=range]{width:100%;margin:0;cursor:pointer;min-width:0;accent-color:#00e5ff}.reset-btn{background:#333;border:1px solid #555;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0;padding:0}.reset-btn:active{background:#555}.math-term{display:inline-flex;align-items:center;background:#151515;padding:4px 6px;border-radius:6px;border:1px solid #333;transition:.2s}.math-term.tuning{border-color:#ffbc00;background:#ffbc001a}.math-val{cursor:pointer;color:#ffbc00;padding:2px 4px;margin:0 2px;border-radius:4px;background:#ffbc001a;transition:.1s;-webkit-user-select:none;user-select:none;border-bottom:1px solid transparent}.math-val:hover{background:#ffbc004d;border-bottom:1px solid #ffbc00}.math-val.active{background:#ffbc00;color:#000;font-weight:700;transform:scale(1.05)}.math-plus{color:#555;font-weight:700;font-size:12px}.small-tool-btn{background:#222;border:1px solid #444;color:#fff;border-radius:4px;cursor:pointer;height:22px;width:26px;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0;-webkit-user-select:none;user-select:none}.small-tool-btn:active{background:#444}button.paused{background:#f33!important;color:#fff!important;border-color:#f33}canvas{width:100%;max-width:900px;max-height:100%;aspect-ratio:1 / 1;background-color:#000;box-shadow:0 0 30px #00e5ff0d;object-fit:contain;cursor:crosshair}.controls{padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 8px;background:#111;border-top:1px solid #333;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;z-index:10;flex-shrink:0}button{height:var(--btn-height);background:#222;border:1px solid #444;color:#fff;font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.1s;-webkit-user-select:none;user-select:none;padding:0 4px;text-align:center}button:active{background:#444;transform:scale(.95)}#btn-rand{background:linear-gradient(135deg,#ff007f,#7f00ff);border:none;font-size:13px}#btn-tpl{background:linear-gradient(135deg,#0f8,#08f);border:none;color:#000;font-size:13px}#btn-final{border-color:#f0f;color:#f0f;font-size:11px}#btn-color{border-color:#00e5ff;color:#00e5ff}#btn-sym{border-color:#ffbc00;color:#ffbc00}#btn-zoom{border-color:#0f8;color:#0f8}#btn-pause{border-color:#f33;color:#f33}#btn-save-json{border-color:#aaa;color:#aaa}#btn-save-img{border-color:#0cf;color:#0cf}.settings-menu{position:fixed;bottom:-65dvh;left:0;width:100%;height:60dvh;overflow-x:hidden;background:#0c0c0cf2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid #444;z-index:2000;transition:bottom .35s cubic-bezier(.25,.8,.25,1);display:flex;flex-direction:column;box-shadow:0 -10px 40px #000c}.settings-menu.open{bottom:0}.menu-top-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;padding:10px 15px;background:#0a0a0a}.menu-top-bar h2{margin:0;font-size:15px;color:#fff;letter-spacing:1px}.menu-close{font-size:24px;cursor:pointer;color:#aaa;line-height:1;padding:0 5px;-webkit-user-select:none;user-select:none}.menu-close:active{color:#fff;transform:scale(.9)}.menu-scroll-area{flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.menu-section{background:#ffffff08;padding:12px;border-radius:8px;border:1px solid #222;align-self:start}.menu-section h3{margin:0 0 10px;font-size:12px;color:#ffbc00;border-bottom:1px solid #333;padding-bottom:6px}@media(min-width:900px){.app-container.settings-open{padding-right:350px}.settings-menu{top:0;bottom:0!important;left:auto!important;right:-350px;width:350px;height:100dvh;border-top:none;border-left:1px solid #444;box-shadow:-10px 0 40px #000c}.settings-menu.open{bottom:0!important;right:0}.menu-scroll-area{grid-template-columns:1fr}}