*{box-sizing:border-box;margin:0;padding:0}html,body,#app{color:#e8eaed;background:#0f1117;width:100%;height:100%;font-family:system-ui,sans-serif;overflow:hidden}.app{width:100%;height:100%;display:flex}.toolbar{border-right:1px solid #2a2f3a;flex-direction:column;flex-shrink:0;gap:12px;width:260px;padding:12px;display:flex;overflow-y:auto}.toolbar h1{font-size:1.1rem;font-weight:600}.stats{color:#8a919e;flex-direction:column;gap:4px;font-size:.85rem;display:flex}.stats-row{line-height:1.3}.stats strong{color:#e8eaed;font-weight:600}.actions{flex-direction:column;gap:6px;display:flex}.actions-row{gap:6px;display:flex}.actions-row button{flex:1}.actions button,.circle-form button{color:inherit;cursor:pointer;background:#1a1f2b;border:1px solid #3a4150;border-radius:4px;padding:6px 10px}.actions button:hover,.circle-form button:hover{background:#252b3a}.actions button:disabled{opacity:.4;cursor:default}.btn-tooltip{position:relative}.btn-tooltip:after{content:attr(data-tooltip);white-space:nowrap;pointer-events:none;opacity:0;z-index:1;background:#252b3a;border:1px solid #3a4150;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:opacity .1s .5s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.btn-tooltip:not(:hover):after{transition-delay:0s}.btn-tooltip:hover:after{opacity:1}.pick-hint{color:#8a919e;font-size:.85rem}.circle-title{font-size:.95rem;font-weight:600}.circle-form{flex-direction:column;gap:8px;display:flex}.circle-form label{justify-content:space-between;align-items:center;gap:8px;font-size:.85rem;display:flex}.circle-form input{width:100px;color:inherit;background:#0f1117;border:1px solid #3a4150;border-radius:4px;padding:4px 6px}.circle-form input[type=color]{cursor:pointer;background:0 0;border:1px solid #3a4150;border-radius:4px;width:48px;height:28px;padding:0}.circle-form input[type=color]:disabled{opacity:.4;cursor:default}.circle-field-color{flex-direction:row;justify-content:space-between;align-items:center}.circle-field-random{cursor:pointer;align-items:center;gap:8px;font-size:.85rem;display:flex}.circle-field-random input{cursor:pointer;width:auto}.scene-panel{border-top:1px solid #2a2f3a;flex-direction:column;gap:8px;padding-top:4px;display:flex}.scene-panel h2{font-size:.95rem;font-weight:600}.scene-field{flex-direction:column;gap:6px;font-size:.85rem;display:flex}.scene-field-color{flex-direction:row;justify-content:space-between;align-items:center}.gravity-control{flex-direction:column;gap:6px;display:flex}.gravity-control input[type=range]{accent-color:#5b8def;width:100%}.gravity-control input[type=number]{width:100%;color:inherit;background:#0f1117;border:1px solid #3a4150;border-radius:4px;padding:4px 6px}.friction-control{flex-direction:column;gap:6px;display:flex}.friction-control input[type=range]{accent-color:#5b8def;width:100%}.friction-control input[type=number]{width:100%;color:inherit;background:#0f1117;border:1px solid #3a4150;border-radius:4px;padding:4px 6px}.scene-range-control{flex-direction:column;gap:6px;display:flex}.scene-range-control input[type=range]{accent-color:#5b8def;width:100%}.scene-range-control input[type=number]{width:100%;color:inherit;background:#0f1117;border:1px solid #3a4150;border-radius:4px;padding:4px 6px}.scene-field input[type=color]{cursor:pointer;background:0 0;border:1px solid #3a4150;border-radius:4px;width:48px;height:28px;padding:0}.canvas-wrap{flex:1;min-width:0;position:relative}.canvas-wrap canvas{cursor:pointer;width:100%;height:100%;display:block}.error{z-index:1;color:#f88;text-align:center;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;padding:24px;display:none;position:absolute;inset:0}.error:not([hidden]){pointer-events:auto;display:flex}