: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;justify-content:center;align-items:center;padding:8px;background:#2d2d2d99;border-radius:50px;width:fit-content;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;gap:0;padding:6px!important;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)!important;max-width:44px;white-space:nowrap;position:relative;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:50%!important}.btn-icon-text .btn-label{opacity:0;transition:opacity .2s;font-size:.9rem;font-weight:700;letter-spacing:.3px}.btn-icon-text svg{width:28px;height:28px;flex-shrink:0;fill:currentColor;transition:transform .2s}@media (hover: hover) and (min-width: 769px){.btn-icon-text:hover{max-width:200px;gap:10px;padding:6px 16px 6px 12px!important;border-radius:25px!important;background:#ffffff26!important;box-shadow:0 4px 10px #0000004d!important}.btn-icon-text:hover .btn-label{opacity:1}.btn-icon-text:hover svg{transform:scale(1.1)}}@media (hover: none){.btn-icon-text{transition:all .3s cubic-bezier(.4,0,.2,1) 2.5s!important}.btn-icon-text .btn-label{transition:opacity .2s 2.5s!important}.btn-icon-text svg{transition:transform .2s 2.5s!important}.btn-icon-text:active{max-width:200px;gap:10px;padding:6px 16px 6px 12px!important;border-radius:25px!important;background:#fff3!important;box-shadow:0 4px 10px #0000004d!important;transition:all .3s cubic-bezier(.4,0,.2,1) .35s!important}.btn-icon-text:active .btn-label{opacity:1;transition:opacity .2s .35s!important}.btn-icon-text:active svg{transform:scale(1.1);transition:transform .2s .35s!important}}#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}.modal.hidden{display:none}.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}}