*{box-sizing:border-box}body{margin:0;background:#080e16;color:#dce6ee;font-family:DM Sans,system-ui,sans-serif}#app{display:flex;height:100dvh}aside{width:310px;flex-shrink:0;padding:30px 24px;background:#101923;border-right:1px solid #22313d;overflow:auto}.brand{display:flex;align-items:center;gap:9px;color:#68e1b6;font-weight:700;letter-spacing:2px;font-size:14px}.brand b{font-weight:700}.brand span{margin-left:auto;font-size:10px;color:#7e97a8;letter-spacing:1px}h1{font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-1px;margin:32px 0 16px}.intro{font-size:13px;line-height:1.6;color:#94a8b8}section{border-top:1px solid #283744;margin-top:25px;padding-top:21px}label{display:block;font-size:10px;letter-spacing:1.4px;color:#a5bacb;margin:15px 0 9px}label span,output{float:right;color:#68e1b6}.row{display:flex;gap:8px}button,select{background:#20313e;border:1px solid #354958;color:#eef4f8;border-radius:6px;padding:9px 11px;font-size:12px;cursor:pointer}button:hover{background:#2b4655}button:disabled{opacity:.5;cursor:default}select{flex:1;min-width:0;width:100%}#add{background:#68e1b6;color:#0b241b;border:0}input[type=range]{width:100%;accent-color:#68e1b6}small{display:block;font-size:10px;line-height:1.5;color:#718b9c;margin-top:12px}.secondary{margin-top:12px;width:100%}footer{font-size:10px;line-height:1.8;color:#7792a3;margin-top:30px}main{position:relative;flex:1;min-width:0;background:radial-gradient(ellipse at 50% 50%,#142633,#080e16 75%)}header{position:absolute;top:0;width:100%;padding:28px 32px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}header b{font-size:11px;letter-spacing:2px}header span{display:block;color:#7995a9;font-size:11px;margin-top:8px}.pill{font-size:9px;letter-spacing:2px;border:1px solid #2e4554;border-radius:20px;padding:9px 15px;height:32px;color:#81aabd}#viewport{width:100%;height:100%}canvas{display:block;touch-action:none}.legend{position:absolute;bottom:92px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1px;color:#809cad;white-space:nowrap}.legend div{width:140px;height:4px;border-radius:4px;background:linear-gradient(90deg,#256bcb,#58dacb,#fff092)}.hint{position:absolute;bottom:66px;width:100%;text-align:center;font-size:11px;color:#668699}#error{position:absolute;top:120px;left:10%;right:10%;padding:24px;background:#402524;border:1px solid #c28077;border-radius:10px}@media(max-width:750px){#app{height:auto;min-height:100dvh;flex-direction:column}aside{width:100%;order:2;padding:20px}main{height:65dvh;flex:none;order:1}h1{margin-top:15px}header{padding:18px}.pill{display:none}section{margin-top:15px}}[hidden]{display:none!important}input[type=file]{max-width:100%;font-size:10px}#objbar{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;gap:8px;align-items:center;background:#101923e0;border:1px solid #2a3b48;border-radius:10px;padding:8px}#chips{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}.chip{white-space:nowrap;padding:8px 12px;flex-shrink:0}.chip.on{background:#68e1b6;color:#0b241b;border-color:#68e1b6}.empty{font-size:11px;color:#7792a3}.barbtns{display:flex;gap:6px;flex-shrink:0}.barbtns button{padding:8px 11px;white-space:nowrap}#delete{color:#ffb4a8}.pair{display:flex;gap:8px;align-items:center}.pair input[type=range]{flex:1;min-width:0}.pair input[type=number]{width:74px;background:#0d1620;border:1px solid #354958;color:#eef4f8;border-radius:6px;padding:7px;font-size:12px}.row.wrap{flex-wrap:wrap;margin-top:12px}.row.wrap button{flex:1;padding:8px 6px}label.check{display:flex;gap:8px;align-items:center;letter-spacing:0;font-size:12px;margin:14px 0 0}@media(pointer:coarse){button,select,.pair input[type=number]{min-height:42px}input[type=range]{height:30px}}@media(max-width:750px){main{height:62dvh}#objbar{flex-direction:column;align-items:stretch}.barbtns{justify-content:space-between}.barbtns button{flex:1;padding:10px 4px}.legend,.hint{display:none}header{padding:14px 16px}}