:root{--bg:#0b1418;--panel:#0f1c21;--panel2:#13242a;--line:#1f343b;--text:#e8f1f3;--mute:#8aa3aa;--teal:#7fd3df;--amber:#f0a868;--amber2:#ffbf86;--danger:#f28c8c;--ok:#8fe0a8;--r:14px;--font:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--teal);text-decoration:none}#root{height:100vh}.brand{display:flex;align-items:center;gap:10px;color:var(--text)}.brand .mark{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 210deg,var(--amber),var(--teal),var(--amber));box-shadow:0 0 24px #f0a86844;position:relative;flex:none}.brand .mark:after{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:4px;background:#0c171b;clip-path:polygon(50% 0,100% 100%,0 100%)}.brand b{font-size:19px;font-weight:800;letter-spacing:-.02em}.brand em{font:500 11px var(--mono);color:var(--teal);font-style:normal;margin-left:2px}.hub{height:100vh;overflow-y:auto}.hub-top{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f1c21,#0c171b);position:sticky;top:0;z-index:2}.hub-top nav{display:flex;gap:8px}.hub-wrap{max-width:1180px;margin:0 auto;padding:40px 32px 56px}.hero h1{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:0 0 12px}.hero h1 span{color:var(--amber)}.hero p{color:var(--mute);font-size:16px;max-width:640px;margin:0 0 32px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--text);transition:.2s;min-height:150px}.card:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:0 10px 30px #0006}.card .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#7fd3df14;border:1px solid #7fd3df33;color:var(--teal)}.card .ic svg{width:22px;height:22px}.card h3{margin:0;font-size:16px;font-weight:700}.card h3 .tag{margin-left:8px;vertical-align:2px}.card p{margin:0;color:var(--mute);font-size:13px}.tag{font:600 10px var(--mono);padding:2px 7px;border-radius:20px;background:#f0a8681f;color:var(--amber);letter-spacing:.04em}.tag.teal{background:#7fd3df1a;color:var(--teal)}.foot{margin-top:40px;color:var(--mute);font-size:12px;text-align:center}.tool{display:grid;grid-template-columns:340px 1fr;height:100vh}.side{background:linear-gradient(180deg,#0f1c21,#0c171b);border-right:1px solid var(--line);overflow-y:auto;padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px}.side::-webkit-scrollbar{width:8px}.side::-webkit-scrollbar-thumb{background:#1f343b;border-radius:8px}.back{display:flex;align-items:center;justify-content:space-between}.back a{font-size:12px;color:var(--mute)}.back a:hover{color:var(--amber)}.side h2{margin:4px 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em;display:flex;gap:8px;align-items:center}.side .desc{margin:0;color:var(--mute);font-size:12.5px}.sec{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#0f1c2199;display:flex;flex-direction:column;gap:10px}.sec>h4{margin:0;font:600 11px var(--mono);color:var(--teal);text-transform:uppercase;letter-spacing:.08em}.row{display:flex;align-items:center;gap:10px;justify-content:space-between}.row label{color:var(--mute);font-size:12.5px;flex:1}.row input[type=number],.row select,.row input[type=text],.full{background:#0b1418;border:1px solid var(--line);border-radius:9px;padding:7px 9px;outline:none;min-width:0}.row input[type=number]{width:84px;text-align:right;font-family:var(--mono);font-size:12.5px}.row select,.row input[type=text]{width:160px}.full{width:100%}input:focus,select:focus,textarea:focus{border-color:var(--teal)}.rng{display:flex;flex-direction:column;gap:4px}.rng .top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute)}.rng .top b{font:500 12px var(--mono);color:var(--text)}input[type=range]{width:100%;accent-color:var(--amber)}input[type=color]{width:42px;height:28px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:#0b1418;border:1px solid var(--line);border-radius:10px;padding:3px}.seg button{border:0;background:none;padding:6px 4px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--mute)}.seg button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px #2f525b}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{border:1px solid var(--line);background:#0b1418;border-radius:20px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--mute)}.chips button.on,.chips button:hover{border-color:var(--amber);color:var(--text)}.sw{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mute);cursor:pointer}.sw input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:34px;height:20px;border-radius:20px;background:#1f343b;position:relative;cursor:pointer;transition:.2s;flex:none}.sw input:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#cfe;top:3px;left:3px;transition:.2s}.sw input:checked{background:var(--amber)}.sw input:checked:after{left:17px;background:#fff}.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:11px 14px;font-weight:700;cursor:pointer;background:linear-gradient(180deg,var(--amber2),var(--amber));color:#2a1606;transition:.15s}.btn:hover{filter:brightness(1.07)}.btn:disabled{opacity:.5;cursor:default}.btn.ghost{background:#13242a;color:var(--text);border:1px solid var(--line);font-weight:600}.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}.upload{display:flex;gap:12px;align-items:center;padding:14px;border:1px dashed #2f525b;border-radius:var(--r);background:#10222880;cursor:pointer;transition:.2s}.upload:hover,.upload.drag{border-color:var(--amber);background:#f0a86812}.upload b{display:block;font-weight:600;font-size:13px}.upload span{font-size:12px;color:var(--mute)}.note{font-size:11.5px;color:var(--mute);margin:0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stat{background:#0b1418;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.stat small{display:block;color:var(--mute);font-size:11px}.stat b{font:500 13px var(--mono)}.stat.big{grid-column:span 2}.stat.big b{font-size:20px;color:var(--amber)}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#11252b 0,#0b1418 70%)}.stage canvas{display:block;width:100%!important;height:100%!important}.hud{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center;background:#0f1c21d9;border:1px solid var(--line);border-radius:12px;padding:5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud button{border:0;background:none;color:var(--mute);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px}.hud button:hover,.hud button.on{background:var(--panel2);color:var(--text)}.info{position:absolute;left:16px;bottom:14px;font:500 12px var(--mono);color:var(--mute);background:#0f1c21cc;border:1px solid var(--line);border-radius:10px;padding:7px 11px}.info b{color:var(--text)}.busy{position:absolute;right:16px;bottom:14px;font:500 12px var(--mono);color:var(--amber);opacity:0;transition:.2s}.busy.on{opacity:1}.err{position:absolute;right:16px;top:14px;max-width:340px;font-size:12px;color:var(--danger);background:#2a1414e6;border:1px solid #5a2a2a;border-radius:10px;padding:8px 11px;display:none}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;pointer-events:none}.empty h3{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}.empty h3 span{color:var(--amber)}.empty p{color:var(--mute);margin:0}.flat{display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}.flat .doc{width:100%;max-width:900px;height:100%;display:flex;flex-direction:column;gap:14px}.pane{flex:1;min-height:0;border:1px solid var(--line);border-radius:var(--r);background:repeating-conic-gradient(#0f1c21 0,#0f1c21 25%,#0c171b 0,#0c171b 50%) 0 0/20px 20px;display:grid;place-items:center;overflow:hidden;position:relative}.pane img,.pane svg{max-width:100%;max-height:100%;object-fit:contain}.pane .lbl{position:absolute;top:8px;left:10px;font:600 10px var(--mono);color:var(--teal);text-transform:uppercase;letter-spacing:.08em}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:0}.result{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.result .stat b{font-size:18px}.bars{display:flex;flex-direction:column;gap:8px}.bar{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:12.5px;color:var(--mute)}.bar i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--amber))}.bar b{font:500 12px var(--mono);color:var(--text);text-align:right}@media (max-width:820px){.tool{grid-template-columns:1fr;grid-template-rows:55vh 1fr;height:auto;min-height:100vh}.stage{order:-1;height:55vh}.side{border-right:0;border-top:1px solid var(--line)}.hero h1{font-size:30px}.hub-top,.hub-wrap{padding-left:16px;padding-right:16px}.two{grid-template-columns:1fr}.result{grid-template-columns:1fr 1fr}}