*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.app{position:relative;width:100%;height:100%;display:flex}.main-content{flex:1;position:relative;width:100%;height:100%}.canvas-container{width:100%;height:100%}.triangulation-canvas,.canvas{display:block;width:100%;height:100%;cursor:pointer}.control-panel,.controls{position:absolute;top:20px;left:20px;background:#fffffff2;padding:16px;border-radius:12px;box-shadow:0 4px 20px #00000026;min-width:280px;max-width:320px;max-height:calc(100vh - 40px);overflow-y:auto;z-index:100}.controls h2{margin:0 0 12px;font-size:18px;font-weight:600;color:#333}.control-group{margin-bottom:16px}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:6px}.select{width:100%}.select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}.select__trigger:hover{border-color:#999}.select__trigger:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e233}.select__trigger[data-expanded]{border-color:#4a90e2}.select__icon{font-size:12px;color:#666}.select__content{background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 12px #00000026;overflow:hidden;z-index:1000}.select__listbox{padding:4px;max-height:300px;overflow-y:auto}.select__item{padding:8px 12px;border-radius:4px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.select__item:hover,.select__item[data-highlighted]{background:#f0f0f0}.select__item[data-selected]{background:#e3f2fd;color:#1976d2}.select__item-indicator{color:#1976d2;font-weight:700}.slider{width:100%}.slider__track{position:relative;height:6px;background:#e0e0e0;border-radius:3px}.slider__fill{position:absolute;height:100%;background:#4a90e2;border-radius:3px}.slider__thumb{position:absolute;width:18px;height:18px;background:#fff;border:2px solid #4a90e2;border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;transition:box-shadow .2s}.slider__thumb:hover{box-shadow:0 0 0 4px #4a90e233}.slider__thumb:focus{outline:none;box-shadow:0 0 0 4px #4a90e24d}.slider__value{font-size:12px;color:#666;margin-top:4px;text-align:right}.regenerate-btn{width:100%;padding:10px 16px;background:#4a90e2;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s}.regenerate-btn:hover{background:#357abd}.regenerate-btn:active{transform:scale(.98)}.regenerate-btn:focus{outline:none;box-shadow:0 0 0 3px #4a90e24d}.secondary-btn{width:100%;padding:8px 12px;background:#f0f0f0;color:#333;border:1px solid #ddd;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s}.secondary-btn:hover{background:#e0e0e0}.export-buttons,.config-buttons{display:flex;gap:8px}.export-btn,.config-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s}.export-btn{background:#27ae60;color:#fff}.export-btn:hover{background:#229954}.config-btn{background:#8e44ad;color:#fff}.config-btn:hover{background:#7d3c98}.export-btn:active,.config-btn:active{transform:scale(.98)}.checkboxes{display:flex;flex-direction:column;gap:8px}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:#4a90e2;cursor:pointer}.stats{margin-top:12px;padding-top:12px;border-top:1px solid #eee;font-size:12px;color:#666}.stat-item{display:flex;justify-content:space-between;margin-bottom:4px}.stat-item:last-child{margin-bottom:0}.stat-label{color:#888}.stat-value{font-weight:500;color:#333}.instructions{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;pointer-events:none}.color-pickers{display:flex;flex-direction:column;gap:12px}.color-picker-item{display:flex;flex-direction:column;gap:4px}.color-picker-item label{font-size:12px;color:#666}.color-picker-item input[type=color]{width:100%;height:36px;padding:2px;border:1px solid #ddd;border-radius:6px;cursor:pointer;background:#fff}.color-picker-item input[type=color]:hover{border-color:#999}.color-picker-item input[type=color]:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e233}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-btn{width:32px;height:32px;padding:0;background:#f0f0f0;border:1px solid #ddd;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.zoom-btn:hover{background:#e0e0e0}.zoom-btn:active{transform:scale(.95)}.zoom-value{flex:1;text-align:center;font-size:13px;font-weight:500;color:#555}.tutorial-panel{margin-top:12px;padding:12px;background:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.tutorial-panel h3{margin:0 0 8px;font-size:14px;font-weight:600;color:#333}.step-info{margin-bottom:12px}.step-counter{font-size:12px;color:#666;margin-bottom:4px}.step-description{font-size:13px;color:#444;line-height:1.4;min-height:40px;padding:8px;background:#fff;border-radius:4px;border:1px solid #ddd}.tutorial-controls{display:flex;gap:6px;margin-bottom:12px}.tutorial-btn{flex:1;padding:8px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center;justify-content:center}.tutorial-btn:active{transform:scale(.95)}.tutorial-btn.play{background:#27ae60;color:#fff}.tutorial-btn.play:hover{background:#229954}.tutorial-btn.pause{background:#e74c3c;color:#fff}.tutorial-btn.pause:hover{background:#c0392b}.tutorial-btn.reset{background:#95a5a6;color:#fff}.tutorial-btn.reset:hover{background:#7f8c8d}.tutorial-btn.step{background:#3498db;color:#fff}.tutorial-btn.step:hover{background:#2980b9}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed}.speed-control{display:flex;flex-direction:column;gap:4px}.speed-control label{font-size:12px;color:#666}.speed-slider{width:100%}.speed-value{font-size:11px;color:#888;text-align:right}.tutorial-legend{margin-top:12px;padding-top:12px;border-top:1px solid #ddd}.tutorial-legend h4{margin:0 0 8px;font-size:12px;font-weight:600;color:#555}.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:11px;color:#666}.legend-color{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.2)}.legend-color.bad-triangle{background:#ff00004d}.legend-color.boundary{background:#f60}.legend-color.current-point{background:#0f0}.separator{height:1px;background:#e0e0e0;margin:16px 0}.animation-controls{margin-top:12px;padding:12px;background:#f0f8ff;border-radius:8px;border:1px solid #b8d4e8}.animation-buttons{display:flex;gap:8px;margin-bottom:12px}.animation-btn{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.animation-btn:active{transform:scale(.97)}.animation-btn.start{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.animation-btn.start:hover{background:linear-gradient(135deg,#5a67d8,#6b46a3)}.animation-btn.stop{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.animation-btn.stop:hover{background:linear-gradient(135deg,#e879f9,#f43f5e)}.animation-info{margin-top:8px;padding:8px;background:#ffffffb3;border-radius:4px;font-size:12px;color:#555;line-height:1.4}.collapsible{margin-bottom:12px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff;transition:all .2s ease}.collapsible:hover{border-color:#ccc}.collapsible__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(to bottom,#f8f9fa,#f0f1f3);border:none;cursor:pointer;transition:all .2s ease;font-family:inherit}.collapsible__trigger:hover{background:linear-gradient(to bottom,#f0f1f3,#e8e9eb)}.collapsible__trigger:active{background:#e8e9eb}.collapsible__trigger[data-expanded]{background:linear-gradient(to bottom,#4a90e2,#357abd);color:#fff}.collapsible__trigger[data-expanded] .collapsible__icon{color:#fff}.collapsible__title{font-size:14px;font-weight:600;color:inherit}.collapsible__icon{font-size:12px;color:#666;transition:transform .2s ease}.collapsible__trigger[data-expanded] .collapsible__icon{transform:rotate(0)}.collapsible__content{overflow:hidden}.collapsible__content[data-closed]{animation:slideUp .2s ease-out}.collapsible__content[data-expanded]{animation:slideDown .2s ease-out;padding:14px}@keyframes slideDown{0%{height:0;opacity:0}to{height:var(--kb-collapsible-content-height);opacity:1}}@keyframes slideUp{0%{height:var(--kb-collapsible-content-height);opacity:1}to{height:0;opacity:0}}.collapsible__content .control-group:last-child{margin-bottom:0}.zoom-buttons{display:flex;gap:8px}.tutorial-info,.tutorial-description{margin-bottom:8px}.tutorial-info{font-size:12px;font-weight:600;color:#4a90e2}