*{box-sizing:border-box;margin:0;padding:0}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background-color:#111;color:#fff;overflow:hidden}#app-container{display:flex;flex-direction:row;width:100vw;height:100vh;position:relative}#left-panel{flex:1;display:flex;flex-direction:column;position:relative}#canvas-container{flex-grow:1;height:100%}#right-panel{width:400px;background:#1a1a1a;border-left:1px solid #333;display:flex;flex-direction:column;padding:10px;gap:10px}#right-panel canvas{flex:1;width:100%;background:#111;border:1px solid #222;border-radius:4px}#legend-panel{position:absolute;top:20px;right:20px;background:#000000b3;padding:15px;border-radius:8px;border:1px solid #333;pointer-events:none}.legend-item{display:flex;align-items:center;margin-bottom:8px;font-size:14px}.legend-item:last-child{margin-bottom:0}.color-box{width:16px;height:16px;border-radius:4px;margin-right:10px}#ui-panel{position:absolute;bottom:20px;left:20px;background:#000c;padding:20px;border-radius:8px;border:1px solid #333;width:320px;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;gap:15px;pointer-events:auto}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{display:flex;justify-content:space-between;font-size:14px;font-weight:700}input[type=range]{width:100%;cursor:pointer}textarea{width:100%;background:#ffffff1a;border:1px solid #555;color:#fff;padding:5px;border-radius:4px;font-family:monospace;font-size:12px;resize:vertical}textarea:focus{outline:none;border-color:#888}.export-controls button:hover,.file-upload:hover{background:#444!important}.status-group{font-size:14px;text-align:center;color:#aaa;display:flex;flex-direction:column;gap:5px}.toggle-group{flex-direction:row;justify-content:space-between;margin-top:5px}.toggle-group label{font-weight:400;display:flex;align-items:center;gap:5px;cursor:pointer}.info-box{background:#ffffff1a;padding:10px;border-radius:4px;font-size:13px;color:#ddd}#educational-tooltip{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000000d9;padding:15px;border-radius:8px;border:1px solid #555;width:90%;max-width:500px;z-index:10;pointer-events:none}#educational-tooltip h4{margin-bottom:10px;color:#fff}#educational-tooltip p{margin-bottom:8px;font-size:13px;line-height:1.4;color:#ccc}#educational-tooltip p:last-child{margin-bottom:0}@media(max-width:768px){#app-container{flex-direction:column}#right-panel{width:100%;height:50vh;border-left:none;border-top:1px solid #333}#legend-panel{position:static;width:100%;border-radius:0;border-left:none;border-right:none;border-top:none;display:flex;justify-content:space-around;flex-wrap:wrap}.legend-item{margin-bottom:0;margin-right:10px}}