:root{--bg:#070b12;--bg2:#0b1220;--panel:#101724db;--panel-solid:#101724;--panel2:#1e293bb8;--panel3:#94a3b81a;--fg:#e7eefc;--muted:#8494ad;--faint:#5c6b85;--line:#94a3b829;--line-strong:#94a3b847;--accent:#38bdf8;--accent2:#6366f1;--accent-soft:#38bdf824;--ok:#34d399;--danger:#f87171;--warn:#fbbf24;--radius:14px;--radius-sm:10px;--shadow:0 10px 30px #0206178c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{overscroll-behavior:none;height:100%}body{background:radial-gradient(900px 480px at 78% -12%,#38bdf829,transparent 70%), radial-gradient(760px 420px at 6% 106%,#6366f124,transparent 70%), var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,PingFang SC,Noto Sans SC,Microsoft YaHei,sans-serif}.app{flex-direction:column;height:100dvh;max-height:100dvh;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:40;background:linear-gradient(#101724f2,#0b1220db);flex-wrap:wrap;align-items:center;gap:.6rem;padding:.45rem .7rem;display:flex}.topbar h1{letter-spacing:.3px;align-items:center;gap:.45rem;font-size:.98rem;font-weight:650;display:flex}.topbar h1:before{content:"";background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:5px;width:16px;height:16px;box-shadow:0 0 14px #38bdf88c}.topbar h1 small{color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-size:.7rem;font-weight:400}.toolbar{flex-wrap:wrap;align-items:center;gap:.4rem;margin-left:auto;display:flex}button,select,input{font:inherit;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);touch-action:manipulation;min-height:38px;font-size:.85rem;transition:background .16s,border-color .16s,box-shadow .16s,transform 80ms}button{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.35rem .72rem;font-weight:500}button:hover{border-color:var(--line-strong);background:#334155cc}button:active{transform:scale(.965)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{color:#04121f;background:linear-gradient(135deg,#38bdf8f2,#6366f1f2);border-color:#0000;font-weight:700;box-shadow:0 6px 18px #38bdf847}button.primary:hover{box-shadow:0 8px 24px #38bdf866}button.primary.running{color:#1a0703;background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 6px 18px #ef44444d}button.danger{color:var(--danger)}button.active{background:var(--accent-soft);color:var(--accent);border-color:#38bdf88c;font-weight:600}button.block-btn{width:100%;margin-top:.6rem}.main{flex:1;min-height:0;display:flex;position:relative}.canvas-wrap{background:radial-gradient(760px 420px at 68% -8%,#38bdf814,#0000 65%),radial-gradient(640px 380px at 8% 108%,#6366f112,#0000 65%),#070c14;flex:1;min-width:0;min-height:100px;position:relative;overflow:hidden}.canvas-wrap>canvas{touch-action:none;cursor:crosshair;display:block;position:absolute;inset:0}.canvas-wrap .datapanel canvas{touch-action:auto;position:static;inset:auto}.inspector{border-left:1px solid var(--line);background:linear-gradient(#111827f5,#0b1220f5);flex:none;width:264px;padding:.85rem;overflow-y:auto}.insp-head{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.7rem;display:flex}.insp-head h2{letter-spacing:.2px;font-size:.92rem;font-weight:650}.insp-close{min-width:32px;min-height:32px;color:var(--muted);background:0 0;border-color:#0000;border-radius:8px;padding:0}.insp-close:hover{background:var(--panel2);color:var(--fg)}.inspector .field{margin-bottom:.75rem}.inspector label{color:var(--muted);align-items:center;gap:.4rem;margin-bottom:.32rem;font-size:.76rem;display:flex}.inspector label .fl{flex:1}.inspector .fnum{text-align:right;font-variant-numeric:tabular-nums;background:#02061799;width:78px;min-height:30px;padding:.15rem .4rem;font-size:.8rem}.inspector input[type=range]{width:100%;accent-color:var(--accent);background:0 0;border:0;height:24px;min-height:22px;padding:0}.insp-readout{border:1px solid var(--line);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;background:#0206178c;gap:.22rem;margin:.7rem 0;padding:.6rem .65rem;font-size:.8rem;display:grid}.insp-readout span{width:1.5em;color:var(--accent);font-style:italic;font-weight:700;display:inline-block}.pallete{border-top:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:linear-gradient(#0b1220e6,#101724f5);flex-wrap:wrap;flex:none;align-items:center;gap:.55rem;padding:.45rem .7rem;display:flex;position:relative}.pal-scroll{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;align-items:center;gap:.6rem;min-width:0;padding-bottom:1px;display:flex;overflow:auto hidden}.pal-scroll::-webkit-scrollbar{display:none}.pal-group{flex:none;align-items:center;gap:.25rem;display:flex}.pal-group+.pal-group{border-left:1px solid var(--line);padding-left:.55rem}.pal-label{color:var(--faint);-webkit-user-select:none;user-select:none;letter-spacing:.8px;text-transform:uppercase;margin-right:.15rem;font-size:.66rem}.pallete button{background:#1e293b8c;border-radius:9px;min-height:34px;padding:.25rem .55rem;font-size:.78rem}.pallete button.active{background:var(--accent-soft);color:var(--accent);border-color:#38bdf880;box-shadow:inset 0 0 0 1px #38bdf82e}.pal-preset{background:#1e293b8c;flex:none;max-width:46vw;min-height:34px;margin-left:.2rem;padding:.25rem .45rem;font-size:.78rem}.sceneio{border-top:1px solid var(--line);z-index:20;background:#090e18eb;flex-wrap:wrap;flex:none;align-items:center;gap:.4rem;padding:.4rem .7rem;display:flex;position:relative}.sceneio button{background:#1e293b73;min-height:32px;padding:.2rem .5rem;font-size:.76rem}.sceneio .saved{align-items:center;gap:.2rem;display:inline-flex}.statusbar{z-index:30;border-top:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums;background:#070b12f2;flex-wrap:wrap;flex:none;align-items:center;gap:1rem;padding:.35rem .8rem;font-size:.72rem;display:flex;position:relative}.statusbar .sb-time{color:var(--accent)}.statusbar .warn{color:var(--warn)}.statusbar .hint{opacity:.5;margin-left:auto}.zoomctl{z-index:30;flex-direction:column;gap:.4rem;display:flex;position:absolute;bottom:.6rem;right:.6rem}.zoomctl button{border:1px solid var(--line);width:40px;min-height:40px;color:var(--accent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);background:#101724db;border-radius:11px;padding:0;font-size:1.05rem}.datapanel{pointer-events:none;border:1px solid var(--line);border-radius:var(--radius);z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:min(46vw,258px);box-shadow:var(--shadow);background:linear-gradient(#101724e0,#0b1220db);padding:.5rem .6rem;position:absolute;bottom:.6rem;left:.6rem}.dp-head{color:var(--muted);justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.3rem;font-size:.68rem;display:flex}.dp-head strong{color:#cfe3ff;letter-spacing:.2px;font-weight:600}.dp-read{white-space:nowrap;color:var(--ok);font-variant-numeric:tabular-nums}.datapanel canvas{width:100%;height:80px;display:block}.momentumpanel{pointer-events:none;z-index:10;border:1px solid var(--line);border-radius:var(--radius);color:#dbe6f5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:210px;box-shadow:var(--shadow);background:linear-gradient(#101724e0,#0b1220db);padding:.5rem .65rem;font-size:11px;position:absolute;bottom:8.6rem;left:.6rem}.mp-table{border-collapse:collapse;width:100%}.mp-table th,.mp-table td{text-align:right;font-variant-numeric:tabular-nums;padding:1.5px 6px}.mp-table thead th{color:var(--faint);font-weight:500}.mp-total td{border-top:1px solid var(--line-strong);color:var(--ok);font-weight:700}.mp-note{color:var(--faint);margin-top:4px}.backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;background:#0206178c;border:0;border-radius:0;min-height:0;padding:0;animation:.18s fade;display:none;position:absolute;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (width<=900px){.inspector{z-index:60;pointer-events:none;width:272px;transition:transform .24s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;transform:translate(102%);box-shadow:-18px 0 40px #02061799}.inspector.open{pointer-events:auto;transform:none}.backdrop{display:block;position:absolute}}@media (width<=560px){.topbar{gap:.4rem;padding:.35rem .5rem}.topbar h1{font-size:.9rem}.toolbar button{min-height:38px;padding:.25rem .5rem;font-size:.78rem}.datapanel{width:min(60vw,212px)}.datapanel canvas{height:62px}.momentumpanel{min-width:190px;font-size:10px;bottom:8rem}.pallete{gap:.3rem;padding:.35rem .4rem}.pallete button{padding:.2rem .45rem;font-size:.74rem}.pal-preset{max-width:40vw}.zoomctl{bottom:5.8rem}.statusbar .hint{display:none}.inspector{width:min(82vw,286px)}.sceneio{padding:.3rem .4rem}.sceneio button{min-height:30px;font-size:.72rem}}@media (pointer:coarse){.pallete button{min-height:40px;padding:.35rem .55rem}.pal-preset,.toolbar button{min-height:40px}.zoomctl button{width:44px;min-height:44px}.sceneio button{min-height:34px}}@media (height<=560px){.topbar{padding:.28rem .5rem}.topbar h1 small{display:none}.pallete{gap:.3rem;padding:.28rem .4rem}.pallete button{min-height:32px;padding:.15rem .42rem;font-size:.72rem}.pal-label,.momentumpanel{display:none}.datapanel{width:min(36vw,190px)}.datapanel canvas{height:52px}.zoomctl{flex-direction:row;bottom:.4rem;right:.4rem}.statusbar .hint,.sceneio{display:none}}.helpwrap{z-index:120;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#03070ea8;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.helpbox{border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(#111827fa,#090e1afa);width:min(560px,94vw);max-height:86dvh;padding:1.1rem 1.2rem;overflow:auto;box-shadow:0 30px 70px #020617b3}.helpbox h2{letter-spacing:.5px;margin:0 0 .7rem;font-size:1rem}.helpbox table{border-collapse:collapse;width:100%;font-size:.8rem}.helpbox th{text-align:left;color:var(--accent);white-space:nowrap;border-bottom:1px solid var(--line);vertical-align:top;padding:.4rem .5rem;font-weight:600}.helpbox td{color:var(--muted);border-bottom:1px solid var(--line);padding:.4rem .5rem}.helptip{color:var(--faint);margin:.8rem 0;font-size:.75rem}.helpbox button{width:100%}.toolbar .speed{border:1px solid var(--line);background:var(--panel2);border-radius:10px;align-items:center;gap:.25rem;min-height:34px;padding:0 .35rem 0 .5rem;display:inline-flex}.toolbar .speed span{color:var(--muted);font-size:.78rem}.toolbar .speed select{color:var(--fg);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;min-height:26px;padding:.15rem .1rem;font-size:.78rem}.toast{left:50%;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:200;border:1px solid var(--line);color:var(--fg);pointer-events:none;background:#0b1220f0;border-radius:10px;padding:.5rem .85rem;font-size:.8rem;animation:.18s ease-out toastin;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000073}@keyframes toastin{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}@media (pointer:coarse){.insp-close{min-width:44px;min-height:44px;margin:-.2rem -.25rem -.2rem 0;font-size:1.05rem}}