*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden;background:#1a1a1a;color:#fff}canvas{display:block;width:100%;height:100%;cursor:grab}canvas:active{cursor:grabbing}#canvas-container{width:100vw;height:100vh;position:fixed;top:0;left:0;pointer-events:none}#canvas-container canvas{pointer-events:auto}#control-panel{position:fixed;top:20px;right:20px;width:320px;max-height:calc(100vh - 40px);background:#1e1e23f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;overflow-y:auto;box-shadow:0 8px 32px #0006;z-index:100;pointer-events:auto}#control-panel h2{font-size:18px;margin-bottom:20px;color:#f63;font-weight:600}.control-group{margin-bottom:16px}.control-group label{display:block;font-size:13px;color:#aaa;margin-bottom:6px;font-weight:500}.control-group input[type=text]{width:100%;padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:13px;font-family:Courier New,monospace;margin-bottom:8px;transition:border-color .2s}.control-group input[type=text]:focus{outline:none;border-color:#f63}.control-group input[type=number]{padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:13px;font-family:Courier New,monospace;transition:border-color .2s}.control-group input[type=number]:focus{outline:none;border-color:#f63}.control-group textarea{width:100%;padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:13px;font-family:Courier New,monospace;margin-bottom:8px;transition:border-color .2s;resize:vertical;min-height:80px}.control-group textarea:focus{outline:none;border-color:#f63}.control-group .hint{display:block;font-size:11px;color:#888;font-style:italic;margin-top:-4px;margin-bottom:8px}.control-group select{width:100%;padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:border-color .2s}.control-group select:focus{outline:none;border-color:#f63}.control-group input[type=range]{width:calc(100% - 60px);height:4px;background:#ffffff1a;border-radius:2px;outline:none;-webkit-appearance:none;margin-right:10px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#f63;border-radius:50%;cursor:pointer}.control-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#f63;border-radius:50%;cursor:pointer;border:none}.control-group input[type=color]{width:100%;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#0000004d;cursor:pointer}.control-group span{display:inline-block;min-width:45px;font-size:13px;color:#fff;text-align:right;font-family:Courier New,monospace}#custom-inputs{display:none;padding:12px;background:#0003;border-radius:6px;border:1px solid rgba(255,102,51,.2)}#custom-inputs.active{display:block}#update-btn{width:100%;padding:12px;background:linear-gradient(135deg,#f63,#f84);border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:8px}#update-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #f636}#update-btn:active{transform:translateY(0)}.secondary-btn{width:100%;padding:12px;background:linear-gradient(135deg,#36f,#48f);border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:8px}.secondary-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #36f6}.secondary-btn:active{transform:translateY(0)}.secondary-btn:disabled{background:#444;cursor:not-allowed;opacity:.5}.secondary-btn:disabled:hover{transform:none;box-shadow:none}#error-message{margin-top:12px;padding:10px;background:#ff323226;border:1px solid rgba(255,50,50,.3);border-radius:6px;color:#f66;font-size:12px;display:none}#error-message.active{display:block}.info{margin-top:12px;padding:10px;background:#6699ff1a;border:1px solid rgba(102,153,255,.2);border-radius:6px;font-size:11px;color:#8bf;line-height:1.4}#control-panel::-webkit-scrollbar{width:8px}#control-panel::-webkit-scrollbar-track{background:#0003;border-radius:4px}#control-panel::-webkit-scrollbar-thumb{background:#ff663380;border-radius:4px}#control-panel::-webkit-scrollbar-thumb:hover{background:#ff6633b3}@media (max-width: 768px){#control-panel{width:calc(100% - 40px);max-height:50vh}}#instructions-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;pointer-events:auto;opacity:1;transition:opacity .3s ease,visibility .3s ease;cursor:pointer;visibility:visible}#instructions-overlay.hidden{opacity:0;pointer-events:none;visibility:hidden;display:none}.instruction-content{background:#1e1e23fa;border:2px solid #ff6633;border-radius:16px;padding:32px;max-width:400px;text-align:center;box-shadow:0 8px 32px #0009;cursor:default;pointer-events:auto}.instruction-content h3{color:#f63;font-size:24px;margin-bottom:20px}.instruction-content ul{list-style:none;padding:0;margin:20px 0;text-align:left}.instruction-content li{padding:10px 0;font-size:14px;color:#ddd;border-bottom:1px solid rgba(255,255,255,.1)}.instruction-content li:last-child{border-bottom:none}.instruction-content strong{color:#f63}#got-it-btn{margin-top:20px;padding:12px 32px;background:linear-gradient(135deg,#f63,#f84);border:none;border-radius:8px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}#got-it-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #f639}#got-it-btn:active{transform:translateY(0)}.strand-panel{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;margin-bottom:12px}.strand-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.strand-title{font-size:13px;font-weight:600;color:#f63}.strand-visibility{display:flex;align-items:center;gap:6px;font-size:12px;color:#aaa;cursor:pointer}.strand-visible-checkbox{cursor:pointer}.strand-controls{display:flex;flex-direction:column;gap:8px}.control-group-mini{display:flex;flex-direction:column;gap:4px}.control-group-mini label{font-size:11px;color:#888;font-weight:500}.control-group-mini input[type=text]{width:100%;padding:6px 8px;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-size:12px;font-family:Courier New,monospace;transition:border-color .2s}.control-group-mini input[type=text]:focus{outline:none;border-color:#f63}.control-group-mini textarea{width:100%;padding:8px 10px;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-size:12px;font-family:Courier New,monospace;transition:border-color .2s;resize:vertical;min-height:60px;line-height:1.4}.control-group-mini textarea:focus{outline:none;border-color:#f63;background:#00000080}.control-group-mini textarea::placeholder{color:#666;font-size:11px}.control-group-mini input[type=color]{width:100%;height:32px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#0000004d;cursor:pointer}.small-btn{flex:1;padding:8px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.small-btn:hover{background:#ffffff26;border-color:#ffffff4d}.small-btn:active{transform:scale(.98)}#strands-container{max-height:400px;overflow-y:auto;margin-bottom:16px}#strands-container::-webkit-scrollbar{width:6px}#strands-container::-webkit-scrollbar-track{background:#0003;border-radius:3px}#strands-container::-webkit-scrollbar-thumb{background:#f636;border-radius:3px}#strands-container::-webkit-scrollbar-thumb:hover{background:#f639}