body{margin:0;padding:0;overflow:hidden;font-family:Arial,sans-serif}#controls{position:absolute;top:10px;left:10px;background:#ffffffe6;padding:15px;border-radius:8px;box-shadow:0 2px 10px #0003;z-index:1000;pointer-events:auto;box-sizing:border-box;max-height:calc(100vh - 210px);overflow-y:auto}#controls h3{margin:0 0 6px;font-size:16px}#controls label{display:block;margin:5px 0;font-size:12px}#controls .section{margin-top:8px;padding-top:8px;border-top:1px solid #ddd;font-size:13px;font-weight:700}#controls details.section>summary{cursor:pointer;font-size:13px;font-weight:700;list-style-position:inside}#controls details.section[open]>summary{margin-bottom:4px}#controls details.section label{font-weight:400}#controls input[type=range]{width:150px}#controls button{margin-top:6px;padding:6px 12px;cursor:pointer;border:none;background:#4caf50;color:#fff;border-radius:4px;font-size:12px}#controls button:hover{background:#45a049}#controls button.share{background:#3f7fd0}#controls button.share:hover{background:#366eb5}#info{position:absolute;bottom:10px;left:10px;background:#ffffffe6;padding:10px;border-radius:8px;font-size:12px;z-index:1000;pointer-events:auto;max-width:250px;max-height:180px;overflow-y:auto;box-sizing:border-box}.particle-item{display:flex;justify-content:space-between;align-items:center;padding:4px;margin:2px 0;background:#c8dcff4d;border-radius:4px;font-size:11px}.particle-item button{padding:2px 6px;font-size:10px;cursor:pointer;border:none;background:#ff6b6b;color:#fff;border-radius:3px}.particle-item button:hover{background:#ff5252}.button-row{display:flex;gap:4px}.button-row button{flex:1;margin-top:0}.panel-actions{position:sticky;bottom:-15px;z-index:1;margin-top:8px;padding:6px 0 0;background:#fffffff2;border-top:1px solid #ddd}.note{font-size:11px;color:#666;font-weight:400}.note-line{min-height:14px}.control-select{margin-left:5px;padding:2px;max-width:190px}#particleList{margin-top:8px;max-height:105px;overflow-y:auto}#legend{position:absolute;bottom:10px;right:10px;background:#ffffffe6;padding:10px;border-radius:8px;font-size:11px;z-index:1000;pointer-events:auto}#legend .swatch{font-weight:700}#legendRamp{margin-top:5px}#legendScale{margin-top:4px;font-size:10px;color:#666}.legend-section{margin-top:10px;padding-top:8px;border-top:1px solid #ccc}@media(max-height:820px){#controls{padding:10px;font-size:12px}.panel-actions{bottom:-10px}#controls h3{margin-bottom:4px;font-size:15px}#controls label{margin:3px 0}#controls .section{margin-top:6px;padding-top:6px}#info{max-height:150px}}#controls.two-column{max-width:520px}#controls.two-column #panelBody{column-count:2;column-gap:16px;column-rule:1px solid #e4e4e4}#controls.two-column #panelBody>*,#controls.two-column #panelBody label{break-inside:avoid}@media(max-width:620px){#controls,#info{max-width:45vw}#controls input[type=range]{width:100%}.control-select{max-width:100%}#legend{max-width:45vw}}