:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#eee;background-color:#121212}body{margin:0;padding:0;display:block;min-width:320px;min-height:100vh}#app{max-width:100%;margin:0 auto;text-align:center;display:flex;flex-direction:column;height:100vh;height:100dvh}.header{padding:15px 20px;background:#191919e6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 4px 15px #0000004d;z-index:1000;position:relative;transition:all .3s ease-in-out}.header.collapsed{padding:0!important;height:44px!important;min-height:44px!important}.header.collapsed>*:not(.header-toggle):not(.header-top){display:none!important}.header-toggle{position:absolute;top:8px;right:12px;width:28px;height:28px;background:#333;border:1px solid rgba(255,255,255,.2);border-radius:4px;box-shadow:0 2px 4px #0003;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1001;font-size:14px;color:#fff;transition:transform .3s}.header.collapsed .header-toggle{transform:rotate(180deg)}.header-top{display:flex;align-items:center;justify-content:center;gap:0px;transition:all .3s ease-in-out}.header.collapsed .header-top{justify-content:flex-start;padding-left:10px;height:44px}.logo{height:5rem;width:auto;flex-shrink:0;display:block;margin:-1.75rem 0;position:relative;z-index:1;transition:all .3s ease-in-out}.header.collapsed .logo{height:32px;margin:0}h1{margin:0;font-size:1.5rem;color:#fff;line-height:1;transition:all .3s ease-in-out}.header.collapsed h1{font-size:1.1rem;margin-left:8px}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:8px;background:#2d2d2d99;border-radius:25px;width:fit-content;max-width:100%;margin:15px auto 0;gap:5px;box-shadow:inset 0 1px 3px #0000000d}.toolbar input{padding:8px 12px;font-size:1rem;border:1px solid #444;background-color:#222;color:#fff;border-radius:4px;width:400px;max-width:100%}.toolbar-group{display:flex;align-items:center;gap:5px;padding:0 10px}.toolbar-separator{width:1px;height:24px;background:#fff3;margin:0 5px}.btn-icon-text{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;padding:0!important;transition:background .2s ease-in-out!important;position:relative;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:50%!important;overflow:visible!important;cursor:pointer}.btn-icon-text svg{width:28px;height:28px;flex-shrink:0;fill:currentColor;transition:transform .2s}.btn-icon-text .btn-label{position:absolute;bottom:-38px;left:50%;transform:translate(-50%) translateY(5px);background:#141419f2;color:#fff;padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;box-shadow:0 4px 12px #0006;border:1px solid rgba(255,255,255,.1);transition:all .2s ease-in-out;z-index:2000}@media (hover: hover) and (min-width: 769px){.btn-icon-text:hover{background:#ffffff1a!important}.btn-icon-text:hover svg{transform:scale(1.1)}.btn-icon-text:hover .btn-label{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}}@media (hover: none){.btn-icon-text.touch-active{background:#ffffff26!important}.btn-icon-text.touch-active svg{transform:scale(1.1)}.btn-icon-text.touch-active .btn-label{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}}#btnTokenize{color:#f1c40f}#btnTokenize:hover,#btnExample{color:#f39c12}#btnExample:hover{color:#e67e22}#btnClear{color:#95a5a6}#btnClear:hover,#btnExportImage{color:#e74c3c}#btnExportImage:hover{color:#c0392b}#btnSaveProject{color:#3498db}#btnSaveProject:hover{color:#2980b9}#btnLoadProject{color:#8e44ad}#btnLoadProject:hover{color:#9b59b6}#btnUndo{color:#95a5a6}#btnUndo:hover{color:#f39c12!important}#btnRedo{color:#95a5a6}#btnRedo:hover{color:#2ecc71!important}#btnHelp{color:#17a2b8}#btnHelp:hover{color:#1abc9c!important}#btnZoomIn{color:#2ecc71}#btnZoomIn:hover{color:#27ae60!important}#btnZoomOut{color:#e74c3c}#btnZoomOut:hover{color:#c0392b!important}#btnZoomReset{color:#3498db}#btnZoomReset:hover{color:#2980b9!important}.editor-layout{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;position:relative}#treeContainer{flex-grow:1;overflow:auto;background-color:#21252b;position:relative;display:flex;justify-content:center;align-items:center}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.hidden,.modal.hidden{display:none!important}.modal-content{background-color:#1e1e1e;padding:30px;border-radius:12px;max-width:420px;width:90%;box-shadow:0 15px 40px #0006;display:flex;flex-direction:column;gap:20px;text-align:center}.modal-content h3{margin:0;color:#fff;font-size:1.4rem;font-weight:800}.modal-content p{margin:0;color:#abb2bf;font-size:1.05rem}.modal-actions{display:flex;flex-direction:column;gap:12px;margin-top:10px}.modal-actions button{padding:12px 20px;font-size:1rem;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.modal-actions button:hover{transform:translateY(-1px)}.modal-actions button.btn-green{background-color:#2ecc71}.modal-actions button.btn-green:hover{background-color:#27ae60}.modal-actions button.btn-orange{background-color:#f39c12}.modal-actions button.btn-orange:hover{background-color:#e67e22}.modal-actions button.btn-blue{background-color:#3498db}.modal-actions button.btn-blue:hover{background-color:#2980b9}.modal-actions button.btn-red{background-color:#e74c3c;margin-top:5px}.modal-actions button.btn-red:hover{background-color:#c0392b}@media (max-width: 768px){.header{padding:10px}.toolbar{margin-top:10px;width:90%;flex-wrap:wrap;border-radius:15px}.toolbar input{width:100%}}.fab-group{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:2000;pointer-events:none}.fab-button{width:44px;height:44px;border-radius:50%;background-color:#34495ee6;color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000004d;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto;padding:0}.fab-button:hover{background-color:#2c3e50;transform:scale(1.1)}.fab-button svg{width:24px;height:24px;display:block}@media (max-height: 500px){.fab-group{display:grid;grid-template-columns:repeat(2,1fr);bottom:12px;right:12px;gap:8px}.fab-button{width:38px;height:38px;font-size:16px}.fab-button svg{width:20px;height:20px}}.fab-settings{position:absolute;top:20px;left:20px;z-index:2000;pointer-events:auto}.settings-panel{position:absolute;top:0;left:0;width:300px;height:100%;background:#16161cf5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.08);box-shadow:4px 0 20px #00000080;z-index:3000;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.settings-panel.open{transform:translate(0)}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.settings-header h2{margin:0;font-size:1.15rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}.settings-close{width:30px;height:30px;border-radius:50%;border:none;background:#ffffff14;color:#aaa;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.settings-close:hover{background:#ffffff26;color:#fff}.settings-body{flex:1;overflow-y:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}.settings-body::-webkit-scrollbar{width:5px}.settings-body::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.settings-section{border-bottom:1px solid rgba(255,255,255,.05)}.settings-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.settings-section-header:hover{background:#ffffff0a}.settings-section-header h3{margin:0;font-size:.85rem;font-weight:600;color:#bbb;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.settings-section-header .chevron{font-size:12px;color:#666;transition:transform .25s}.settings-section.collapsed .chevron{transform:rotate(-90deg)}.settings-section-content{padding:0 18px 14px;display:flex;flex-direction:column;gap:14px;transition:max-height .3s ease,opacity .3s ease,padding .3s ease;max-height:600px;opacity:1;overflow:hidden}.settings-section.collapsed .settings-section-content{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.setting-row label{font-size:.88rem;color:#ccc;white-space:nowrap;flex-shrink:0}.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1f;border-radius:22px;cursor:pointer;transition:background .25s}.toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .25s}.toggle-switch input:checked+.toggle-slider{background:#3498db}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px)}.setting-range{display:flex;flex-direction:column;gap:6px;width:100%}.setting-range .range-header{display:flex;justify-content:space-between;align-items:center}.setting-range label{font-size:.88rem;color:#ccc}.setting-range .range-value{font-size:.8rem;color:#3498db;font-weight:600;min-width:32px;text-align:right}.setting-range input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1f;border-radius:2px;outline:none;cursor:pointer}.setting-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#3498db;border-radius:50%;border:2px solid #1a1a2e;cursor:pointer;transition:transform .15s}.setting-range input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.setting-range input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#3498db;border-radius:50%;border:2px solid #1a1a2e;cursor:pointer}.setting-color{display:flex;align-items:center;justify-content:space-between;width:100%}.setting-color label{font-size:.88rem;color:#ccc}.setting-color input[type=color]{-webkit-appearance:none;width:36px;height:28px;border:2px solid rgba(255,255,255,.12);border-radius:6px;background:none;cursor:pointer;padding:1px}.setting-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.setting-color input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.setting-select{display:flex;flex-direction:column;gap:6px;width:100%}.setting-select label{font-size:.88rem;color:#ccc}.setting-select select{width:100%;padding:7px 10px;background:#ffffff14;color:#eee;border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:.85rem;cursor:pointer;outline:none;transition:border-color .2s}.setting-select select:focus{border-color:#3498db}.setting-select select option{background-color:#22222c;color:#eee}.settings-reset{margin:16px 18px;padding:10px;background:#e74c3c26;color:#e74c3c;border:1px solid rgba(231,76,60,.3);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;flex-shrink:0}.settings-reset:hover{background:#e74c3c40}.settings-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;z-index:2500;opacity:0;pointer-events:none;transition:opacity .3s}.settings-overlay.visible{opacity:1;pointer-events:auto}@media (max-width: 768px){.settings-panel{width:100%;border-right:none}}