.vertex-label{color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap;transform:translate(-50%,-150%);box-shadow:0 2px 8px #0000004d}.vertex-label.angle-vertex{background:#f0f}.vertex-label.selected-vertex{background:red}.line-length-label{background:#000000b3;color:#fff;padding:2px 6px;border-radius:8px;font-size:10px;font-weight:400;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}.tooltip{background:linear-gradient(135deg,#0ea5e9f2,#3b82f6f2);color:#fff;padding:14px 18px;border-radius:12px;box-shadow:0 12px 40px #0ea5e959,0 0 0 1px #ffffff26;min-width:180px;font-size:13px;line-height:1.5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);transform:translate(-50%,-120%);pointer-events:none}.tooltip-title{font-weight:700;margin-bottom:10px;font-size:15px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px}.tooltip-line{margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:12px}.tooltip-label{color:#ffffffd9;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.tooltip-value{color:#fff;font-weight:700;font-size:13px}.tooltip-html{pointer-events:none}.canvas-container{background:#fff}.view-2d{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}.view-2d svg{max-width:90%;max-height:90%;background:#f9fafb;border-radius:12px;box-shadow:0 8px 32px #0000001a;border:2px solid #e5e7eb}.view-2d-label{margin-top:20px;font-size:18px;font-weight:600;color:#1f2937;text-shadow:0 2px 4px rgba(0,0,0,.1)}.control-panel{position:absolute;top:20px;left:20px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:20px;min-width:280px;max-width:320px;max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 8px 32px #0000001a;z-index:100}.panel-section{margin-bottom:24px}.panel-section:last-child{margin-bottom:0}.panel-section h2{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:12px}.shape-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shape-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s;font-size:12px;color:#4b5563}.shape-button:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.shape-button.active{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.shape-icon{display:flex;align-items:center;justify-content:center;color:currentColor;line-height:1}.shape-name{font-weight:500}.controls{display:flex;flex-direction:column;gap:12px}.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:13px;font-weight:500;color:#374151}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#e5e7eb;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;transition:all .2s;-moz-appearance:none}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:#764ba2}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all .2s}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);background:#764ba2}.value{font-size:14px;font-weight:600;color:#667eea;text-align:right}.color-control{display:flex;flex-direction:column;gap:8px}.color-control label{font-size:13px;font-weight:500;color:#374151}.color-picker-wrapper{display:flex;align-items:center;gap:12px;padding:8px;background:#f9fafb;border-radius:8px;border:2px solid #e5e7eb}.color-picker{width:60px;height:40px;border:none;border-radius:6px;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid #e5e7eb;border-radius:6px}.color-picker::-moz-color-swatch{border:2px solid #e5e7eb;border-radius:6px}.color-value{font-size:13px;font-weight:600;color:#6b7280;font-family:Courier New,monospace}.view-buttons{display:flex;gap:8px}.view-button{flex:1;padding:10px 16px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:#4b5563;transition:all .2s}.view-button:hover{border-color:#667eea;transform:translateY(-1px)}.view-button.active{border-color:#667eea;background:#667eea;color:#fff}.help-text{font-size:12px;color:#6b7280;line-height:1.5;margin-bottom:12px}.clear-button{width:100%;padding:10px 16px;background:#fff;border:2px solid #ef4444;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:#ef4444;transition:all .2s}.clear-button:hover{background:#ef4444;color:#fff;transform:translateY(-1px)}.info-panel{position:absolute;top:20px;right:20px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:20px;min-width:280px;max-width:320px;max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 8px 32px #0000001a;z-index:100}.info-section{margin-bottom:24px}.info-section:last-child{margin-bottom:0}.info-section h3{font-size:15px;font-weight:600;color:#1f2937;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e5e7eb}.info-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6}.info-item:last-child{border-bottom:none}.info-item.subtle{padding:6px 0;border-bottom:none}.info-label{font-size:13px;color:#6b7280;font-weight:500}.info-value{font-size:14px;color:#1f2937;font-weight:600}.info-value.highlight{color:#667eea;font-size:18px}.info-value.formula{font-family:Fira Code,Courier New,Courier,monospace;font-size:13px;color:#111827}.info-message{font-size:13px;color:#9ca3af;font-style:italic;text-align:center;padding:12px 0}.info-note{font-size:11px;color:#9ca3af;margin-top:8px;text-align:center;font-style:italic}.angle-result{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:8px;padding:12px;margin-top:8px}.face-header{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px}.face-name{font-size:14px;font-weight:600;color:#1f2937}.face-type{font-size:12px;font-weight:600;color:#2563eb;background:#2563eb1a;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}.formula-variables{margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}.formula-variables-title{font-size:12px;font-weight:600;color:#4b5563;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.variable-list{display:grid;gap:6px}.variable-item{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:8px;font-size:13px;color:#374151}.variable-symbol{font-family:Fira Code,Courier New,Courier,monospace;font-weight:600;color:#2563eb}.variable-description{color:#4b5563}.control-panel::-webkit-scrollbar,.info-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track,.info-panel::-webkit-scrollbar-track{background:transparent}.control-panel::-webkit-scrollbar-thumb,.info-panel::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.control-panel::-webkit-scrollbar-thumb:hover,.info-panel::-webkit-scrollbar-thumb:hover{background:#9ca3af}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-input{cursor:pointer}.comparison-scale-group{margin-top:12px}.comparison-ratio{font-size:11px;color:#6b7280;margin-top:4px}.export-button{width:100%;padding:10px 16px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.export-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.export-button:active{transform:translateY(0);box-shadow:none}.comparison-note{margin-top:8px}.mobile-toggle-button{display:none}.panel-content{display:contents}@media (max-width: 768px) and (orientation: portrait){.control-panel{position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;min-width:100%;max-height:70vh;border-radius:16px 16px 0 0;padding:0;margin:0;box-shadow:0 -4px 20px #00000026;transition:transform .3s ease-in-out;overflow:hidden;z-index:1000}.control-panel.minimized{transform:translateY(calc(100% - 50px))}.mobile-toggle-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:0;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;position:sticky;top:0;z-index:10}.mobile-toggle-button:active{opacity:.9}.mobile-toggle-text{text-transform:uppercase;letter-spacing:.5px}.panel-content{display:block;padding:16px;max-height:calc(70vh - 50px);overflow-y:auto;overflow-x:hidden}.control-panel.minimized .panel-content{overflow:hidden}.info-panel{display:none}.panel-section{margin-bottom:20px}.panel-section h2{font-size:15px}.shape-grid{grid-template-columns:repeat(4,1fr);gap:6px}.shape-button{padding:10px 6px;font-size:11px}.shape-icon{font-size:20px}.control-group label{font-size:12px}.value{font-size:13px}.view-button,.export-button,.clear-button{padding:10px 12px;font-size:13px}}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.scene-container{width:100%;height:100%}.app-title{position:absolute;bottom:20px;left:50%;transform:translate(-50%);text-align:center;color:#1f2937;z-index:10;pointer-events:none}.app-title h1{font-size:28px;font-weight:700;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.app-title p{font-size:14px;font-weight:400;margin:0;opacity:.7;text-shadow:0 1px 2px rgba(0,0,0,.1)}@media (max-width: 768px){.app-title{bottom:10px}.app-title h1{font-size:20px}.app-title p{font-size:12px}}@media (max-width: 768px) and (orientation: portrait){.app{display:flex;flex-direction:column}.scene-container{flex:1;min-height:0;height:auto}}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background:#fff}#root{width:100%;height:100%}*{box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00000080}