:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;height:100vh;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.layout{display:flex;flex-direction:column;height:100vh;background-color:#f9fafb}.header{background:linear-gradient(135deg,#475569,#64748b);color:#fff;box-shadow:0 1px 5px #00000014;padding:0}.header-content{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;flex-direction:column;justify-content:center}.header-text-container{text-align:center;width:100%}.header h1{font-size:1.4rem;margin:0;font-weight:600;letter-spacing:.5px}.header-subtitle{font-size:.9rem;opacity:.9;margin:2px 0 0;font-weight:400}.main-content{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:16px}.feature-banner{display:flex;gap:16px;margin-bottom:16px}.feature-card{flex:1;background:#fff;border-radius:8px;padding:16px;display:flex;align-items:center;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.feature-icon{font-size:2rem;margin-right:16px}.feature-text h3{margin:0 0 4px;font-size:1.1rem;font-weight:600;color:#1f2937}.feature-text p{margin:0;color:#6b7280;font-size:.9rem}.editor-preview-container{display:flex;flex:1;gap:16px;overflow:hidden;transition:all .3s ease}.fullscreen-mode{flex-direction:column}.panel{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000000d,0 1px 3px #0000001a;transition:all .3s ease}.panel.hidden{display:none}.panel.fullscreen{flex:1;height:100%}.editor-panel,.preview-panel{flex:1}.panel-header{background:linear-gradient(to right,#f1f5f9,#f9fafb);padding:12px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.panel-header h2{margin:0;font-size:1.1rem;font-weight:600;color:#374151}.preview-iframe{width:100%;height:100%;border:none;display:block;background-color:#fff;transition:all .3s ease}.fullscreen .preview-iframe{border-radius:0;box-shadow:none}.fullscreen-mode .preview-panel{height:calc(100vh - 220px)}.error{position:absolute;top:0;left:0;right:0;max-height:50%;overflow-y:auto;background-color:#fee2e2f2;color:#b91c1c;padding:16px;border-radius:0 0 8px 8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:10;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.error h3{margin-top:0;margin-bottom:8px;color:#991b1b;font-weight:600;font-size:1rem}.error pre{margin:0;white-space:pre-wrap;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.5;overflow-x:auto;max-height:300px}.dependency-manager{display:flex;align-items:center;gap:16px}.add-dependency-button{background-color:#4caf50;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px}.add-dependency-button:hover{background-color:#388e3c}.current-dependencies{flex:1}.current-dependencies h3{margin:0 0 4px;font-size:14px}.current-dependencies ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.current-dependencies li{display:flex;align-items:center;gap:8px;background-color:#e3f2fd;padding:4px 8px;border-radius:4px;font-size:12px}.remove-button{background-color:transparent;border:none;color:#f44336;cursor:pointer;font-size:12px;padding:0}.remove-button:hover{text-decoration:underline}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;padding:24px;width:500px;max-width:90vw}.modal h2{margin-top:0;margin-bottom:16px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:4px;font-weight:500}.form-group input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.quick-add{margin-top:24px;margin-bottom:24px}.quick-add h4{margin-top:0;margin-bottom:8px}.package-category{margin-bottom:12px}.package-category h5{margin:12px 0 8px;font-size:14px;color:#666;border-bottom:1px solid #eee;padding-bottom:4px}.package-buttons{display:flex;flex-wrap:wrap;gap:8px}.package-buttons button{background-color:#e3f2fd;border:1px solid #bbdefb;color:#1565c0;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:12px}.package-buttons button:hover{background-color:#bbdefb}.modal-actions{display:flex;justify-content:flex-end;gap:12px}.modal-actions button{padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px}.modal-actions button:first-child{background-color:#f5f5f5;border:1px solid #ddd;color:#333}.modal-actions button:last-child{background-color:#2196f3;border:none;color:#fff}.modal-actions button:last-child:hover{background-color:#1976d2}.modal-actions button:disabled{opacity:.7;cursor:not-allowed}.example-prompt{margin:8px 16px;padding:8px 16px;background-color:#e6f7ff;border:1px solid #91d5ff;border-radius:4px}.example-prompt-content{display:flex;align-items:center;justify-content:space-between}.example-prompt-buttons{display:flex;gap:8px}.load-example-button{background-color:#1890ff;color:#fff;border:none;padding:4px 12px;border-radius:4px;cursor:pointer}.load-example-button:hover{background-color:#40a9ff}.dismiss-button{background-color:#f0f0f0;border:1px solid #d9d9d9;padding:4px 12px;border-radius:4px;cursor:pointer}.dismiss-button:hover{background-color:#fafafa;border-color:#1890ff;color:#1890ff}.editor-content{flex:1;overflow:hidden}.preview-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.preview-frame-container{flex:1;position:relative;height:100%;background-color:#fff;border-radius:0 0 8px 8px;overflow:hidden}.preview-container{flex:.55;overflow:hidden;position:relative;display:flex;flex-direction:column}.library-info-banner{display:none}.tooltip-container{display:flex;gap:10px;flex-wrap:wrap}.tooltip-button{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .2s,box-shadow .2s,background .3s;box-shadow:0 2px 4px #6366f140;display:flex;align-items:center;justify-content:center}.tooltip-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #6366f159;background:linear-gradient(135deg,#4338ca,#4f46e5)}.tooltip-button:active{transform:translateY(0);box-shadow:0 1px 2px #6366f140}@media (max-width: 768px){.editor-preview-container{flex-direction:column}.panel{width:100%}.editor-panel,.preview-panel{height:50vh}.fullscreen-mode .preview-panel{height:calc(100vh - 180px)}.footer-info-banner,.library-info-banner{flex-direction:column;align-items:flex-start}.tooltip-container{width:100%;margin-top:10px}.header-content{padding:8px 16px}.header h1{font-size:1.2rem}.header-subtitle{font-size:.8rem}}.fullscreen{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;background:#fff!important}.fullscreen .panel-header{background:linear-gradient(135deg,#475569,#64748b);color:#fff;padding:10px 20px;display:flex;justify-content:space-between;align-items:center}.fullscreen .panel-header h2{color:#fff;font-weight:600}.exit-fullscreen-button{background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);padding:6px 12px;border-radius:4px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.exit-fullscreen-button:hover{background-color:#ffffff4d}.footer-info-banner{background-color:#f3f4f6;border-radius:8px;padding:12px 20px;margin-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;box-shadow:0 1px 3px #0000000d}.footer-info-banner p{margin:0;color:#4b5563;font-size:.9rem;flex:1;min-width:300px}@media (max-width: 768px){.footer-info-banner{flex-direction:column;align-items:flex-start}}