@import"https://unpkg.com/open-props/easings.min.css";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--border-color: #e5e7eb;--text-primary: #1f2937;--text-secondary: #6b7280;--accent-color: #098842;--accent-text: #ffffff;--hover-bg: rgba(0, 0, 0, .05);--sidebar-width: 380px;--canvas-grid: rgba(0, 0, 0, .03);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden;transition:background-color .4s ease,color .3s ease}[data-theme=dark]{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-tertiary: #374151;--border-color: #4b5563;--text-primary: #f9fafb;--text-secondary: #d1d5db;--hover-bg: rgba(255, 255, 255, .1);--canvas-grid: rgba(255, 255, 255, .05);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3)}#app{display:flex;flex-direction:column;height:100vh}.top-bar{background:var(--accent-color);border-bottom:1px solid rgba(0,0,0,.1);padding:12px 20px;display:flex;align-items:center;gap:16px;height:48px;color:var(--accent-text);box-shadow:var(--shadow-sm)}.menu-items{display:flex;gap:4px}.menu-item{position:relative}.menu-item:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px;z-index:101;background:transparent}.menu-btn{background:transparent;border:none;color:var(--accent-text);padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);transition:all .2s ease}.menu-btn:hover{background:#ffffff26}.menu-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;padding:8px 0;display:none;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.menu-item:hover .menu-dropdown,.menu-dropdown:hover{display:block;opacity:1;pointer-events:all}.menu-dropdown hr{border:none;border-top:1px solid var(--border-color);margin:4px 0}.menu-option{display:block;padding:10px 20px;color:var(--text-primary);text-decoration:none;font-size:14px;transition:all .15s ease}.menu-option:hover{background:var(--hover-bg);padding-left:24px}.menu-option-has-submenu{position:relative}.menu-submenu{position:absolute;top:0;left:100%;margin-left:8px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:180px;padding:8px 0;display:none;z-index:101;opacity:0;pointer-events:none;transition:opacity .2s ease}.menu-submenu:before{content:"";position:absolute;top:0;right:100%;width:8px;height:100%;background:transparent}.menu-option-has-submenu:hover .menu-submenu,.menu-submenu:hover{display:block;opacity:1;pointer-events:all}.title-container{display:flex;align-items:center;gap:8px;position:absolute;left:50%;transform:translate(-50%);cursor:pointer}.document-title{font-size:17px;font-weight:600;color:var(--accent-text);transition:opacity .2s ease;line-height:1.2;display:inline-block;transform:translateY(-2px)}.title-container:hover .document-title{opacity:.8}.edit-icon-btn{background:transparent;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;color:var(--accent-text);opacity:.85}.title-container:hover .edit-icon-btn,.edit-icon-btn:hover{opacity:1}.edit-icon-btn svg{pointer-events:none}.filename-input-edit{background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,.7);color:var(--accent-text);padding:0 0 2px;font-size:17px;font-weight:400;width:auto;min-width:100px;transition:all .2s ease;line-height:1.2}.filename-input-edit:focus{outline:none;border-bottom-color:#fff}.top-bar>*:not(:last-child){flex:0 0 auto}.btn{padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn:hover{background:var(--hover-bg);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary{background:var(--accent-color);border-color:var(--accent-color);color:var(--accent-text)}.btn-primary:hover{background:#077633;transform:translateY(-1px)}.main-content{display:flex;flex:1;overflow:hidden}.canvas-container{flex:1;position:relative;background:#fafafa;overflow:hidden;display:flex;flex-direction:column}#tikz-canvas{width:100%;height:100%;background:var(--bg-primary);position:relative}[data-theme=dark] .canvas-container{background:#111827}.floating-export-btn{position:absolute;bottom:24px;right:24px;z-index:10;padding:12px 24px;font-weight:600;font-size:15px;box-shadow:var(--shadow-xl);border-radius:var(--radius-md)}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column}.sidebar-header{padding:20px 24px 16px;border-bottom:1px solid var(--border-color);font-size:16px;font-weight:600;color:var(--text-primary);background:var(--bg-primary)}.sidebar-section{padding:16px 20px;border-bottom:none}.sidebar-section-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.tool-category{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0}.tool-button{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-primary);padding:12px 8px;box-shadow:var(--shadow-sm);min-height:60px;aspect-ratio:1}.tool-icon{font-size:18px;margin-bottom:4px}.tool-label{font-size:10px;font-weight:500;text-align:center;line-height:1.2}.tool-button:hover{background:var(--bg-primary);border-color:var(--accent-color);box-shadow:0 4px 12px #09884226;transform:translateY(-2px) scale(1.02)}.tool-button.active{background:var(--accent-color);border-color:var(--accent-color);color:var(--accent-text);box-shadow:var(--shadow-md)}.property-label{font-size:13px;color:var(--text-secondary);margin-bottom:8px;display:block;font-weight:500}.property-input{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.code-panel{padding:16px;background:var(--bg-tertiary);border-radius:var(--radius-md);font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}[data-theme=dark] .code-panel{background:var(--bg-tertiary)}.theme-toggle{margin-left:auto;background:transparent;border:none;color:var(--text-primary);cursor:pointer;font-size:20px;padding:0;border-radius:var(--radius-sm);display:grid;place-items:center;width:40px;height:40px;transition:all .2s ease;opacity:.85}.theme-toggle:hover{opacity:1}.top-bar .theme-toggle{color:var(--accent-text)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.sidebar-header{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;padding:16px;border-bottom:1px solid var(--border-color)}.element-name-display{font-size:16px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .2s ease;border-bottom:1px solid transparent}.element-name-display:hover{border-bottom-color:var(--accent-color)}.edit-name-btn{padding:4px;background:transparent;border:none;cursor:pointer;color:var(--text-secondary);transition:all .2s ease;border-radius:var(--radius-sm)}.edit-name-btn:hover{background:var(--hover-bg);color:var(--accent-color)}.element-name-input{position:absolute;left:16px;right:16px;padding:8px 12px;background:var(--bg-primary);border:none;border-bottom:2px solid var(--accent-color);border-radius:0;font-size:16px;font-weight:500;outline:none;text-align:center}.property-row{display:flex;gap:12px}.property-row .property-group{flex:1}.property-group{margin-bottom:16px}.property-label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.property-input{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;color:var(--text-primary);transition:all .2s ease}.property-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #0988421a}.property-input[type=color]{padding:4px;height:40px;cursor:pointer}.property-input[type=range]{padding:0;height:6px;background:var(--border-color);border:none;border-radius:3px;outline:none;-webkit-appearance:none}.property-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm)}.property-input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:none;box-shadow:var(--shadow-sm)}.property-input[type=checkbox]{width:auto;margin-right:8px;transform:scale(1.2)}.property-input[type=number]{-moz-appearance:textfield}.property-input[type=number]::-webkit-outer-spin-button,.property-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[data-theme=dark] .element-name-display{background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme=dark] .property-input{background:var(--bg-primary);border-color:var(--border-color);color:var(--text-primary)}[data-theme=dark] .property-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #09884233}.arrow-buttons-container{display:flex;gap:8px;align-items:flex-start}.arrow-button-group{display:flex;flex-direction:column;align-items:center;gap:4px}.arrow-button{width:40px;height:40px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s ease}.arrow-button:hover{background:var(--hover-bg);border-color:var(--accent-color);color:var(--accent-color)}.arrow-button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.arrow-dropdown{width:100%;margin-top:4px}.arrow-dropdown .property-input{font-size:12px;padding:4px 8px}[data-theme=dark] .arrow-button{background:var(--bg-primary);border-color:var(--border-color);color:var(--text-secondary)}[data-theme=dark] .arrow-button:hover{background:var(--hover-bg);border-color:var(--accent-color);color:var(--accent-color)}[data-theme=dark] .arrow-button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.style-buttons-container{display:flex;gap:4px;align-items:center}.style-button{width:32px;height:32px;border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.style-button:hover{background-color:var(--hover-bg);border-color:var(--text-secondary)}.style-button.active{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.style-button.active:hover{background-color:var(--accent-color);opacity:.9}[data-theme=dark] .style-button{background-color:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}[data-theme=dark] .style-button:hover{background-color:var(--hover-bg);border-color:var(--text-secondary)}[data-theme=dark] .style-button.active{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.custom-dropdown{position:relative;display:inline-block;width:100%}.custom-dropdown-button{width:100%;padding:6px 8px;border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);border-radius:var(--radius-sm);font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .15s ease;min-height:32px}.custom-dropdown-button:hover{border-color:var(--accent-color);background-color:var(--hover-bg)}.custom-dropdown-button:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 1px #09884233}.custom-dropdown-arrow{transition:transform .15s ease;opacity:.7}.custom-dropdown.open .custom-dropdown-arrow{transform:rotate(180deg)}.custom-dropdown-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:1000;max-height:160px;overflow-y:auto;display:none;margin-top:2px;min-width:180px}.custom-dropdown-menu::-webkit-scrollbar{width:4px}.custom-dropdown-menu::-webkit-scrollbar-track{background:transparent}.custom-dropdown-menu::-webkit-scrollbar-thumb{background:#0000004d;border-radius:2px}.custom-dropdown-menu::-webkit-scrollbar-thumb:hover{background:#00000080}[data-theme=dark] .custom-dropdown-menu::-webkit-scrollbar-thumb{background:#ffffff4d}[data-theme=dark] .custom-dropdown-menu::-webkit-scrollbar-thumb:hover{background:#ffffff80}.custom-dropdown.open .custom-dropdown-menu{display:block}.custom-dropdown-option{padding:6px 8px;cursor:pointer;transition:background-color .1s ease;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-dropdown-option:hover{background-color:var(--hover-bg)}.custom-dropdown-option.selected{background-color:var(--accent-color);color:#fff}.custom-dropdown-option.selected:hover{background-color:var(--accent-color)}[data-theme=dark] .custom-dropdown-button{background-color:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}[data-theme=dark] .custom-dropdown-button:hover{background-color:var(--hover-bg);border-color:var(--accent-color)}[data-theme=dark] .custom-dropdown-menu{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .custom-dropdown-option:hover{background-color:var(--hover-bg)}.theme-toggle{--icon-fill: var(--text-primary);--icon-fill-hover: var(--text-primary)}.top-bar .theme-toggle{--icon-fill: #ffffff;--icon-fill-hover: #ffffff}.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px;stroke-linecap:round}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{opacity:0}[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=dark] .sun-and-moon>.moon>circle{cx:17;transform:translate(0)}}@media(prefers-reduced-motion:no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon .moon>circle{transition:transform .25s var(--ease-out-5)}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s var(--ease-out-5)}}[data-theme=dark] .sun-and-moon>.sun{transition-timing-function:var(--ease-3);transition-duration:.25s;transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{transition-duration:.15s;transform:rotate(-25deg)}[data-theme=dark] .sun-and-moon .moon>circle{transition-duration:.5s;transition-delay:.25s}}