@asafarim/markdown-explorer-viewer/demo/dist/assets/index-53195edd.css

A reusable React component for exploring and viewing markdown files with file tree navigation

._fileTree_vmfr8_1{padding:0;margin:0;height:100%;display:flex;flex-direction:column;overflow-y:auto}._searchContainer_vmfr8_10{padding:.5rem;border-bottom:1px solid var(--me-border);background:var(--me-bg-secondary);position:sticky;top:0;z-index:1}._searchInput_vmfr8_19{width:100%;padding:.5rem;border:1px solid var(--me-border);border-radius:var(--me-radius);background-color:var(--me-bg-primary);color:var(--me-text-primary);font-size:.875rem;transition:var(--me-transition)}._searchInput_vmfr8_19:focus{outline:none;border-color:var(--me-primary);box-shadow:0 0 0 2px #2563eb1a}._searchInput_vmfr8_19::placeholder{color:var(--me-text-muted)}._treeNode_vmfr8_40{margin:.125rem 0}._nodeButton_vmfr8_44{width:100%;text-align:left;background:none;border:none;padding:.375rem .5rem;border-radius:var(--me-radius);color:var(--me-text-primary);cursor:pointer;transition:var(--me-transition);display:flex;align-items:center;gap:.5rem;font-size:.875rem}._nodeButton_vmfr8_44:hover{background-color:var(--me-bg-tertiary)}._nodeButton_vmfr8_44._active_vmfr8_64{background-color:var(--me-primary);color:#fff}._nodeButton_vmfr8_44._folder_vmfr8_69{font-weight:500}._nodeIcon_vmfr8_73{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;font-size:.875rem}._folderIcon_vmfr8_82{color:#f59e0b}._fileIcon_vmfr8_86{color:var(--me-primary)}._fileName_vmfr8_90{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._children_vmfr8_97{margin-left:1rem;border-left:1px solid var(--me-border);padding-left:.5rem}._expandIcon_vmfr8_103{width:1rem;height:1rem;transition:transform .2s ease;color:var(--me-text-muted)}._expandIcon_vmfr8_103._expanded_vmfr8_110{transform:rotate(90deg)}._emptyState_vmfr8_114{padding:2rem 1rem;text-align:center;color:var(--me-text-muted);font-style:italic}._noResults_vmfr8_121{padding:1rem;text-align:center;color:var(--me-text-muted);font-size:.875rem}._nodeButton_vmfr8_44[data-file-type=md] ._fileIcon_vmfr8_86{color:#10b981}._nodeButton_vmfr8_44[data-file-type=txt] ._fileIcon_vmfr8_86{color:var(--me-text-secondary)}._nodeButton_vmfr8_44[data-file-type=json] ._fileIcon_vmfr8_86{color:#f59e0b}._nodeButton_vmfr8_44[data-file-type=js] ._fileIcon_vmfr8_86,._nodeButton_vmfr8_44[data-file-type=jsx] ._fileIcon_vmfr8_86,._nodeButton_vmfr8_44[data-file-type=ts] ._fileIcon_vmfr8_86,._nodeButton_vmfr8_44[data-file-type=tsx] ._fileIcon_vmfr8_86{color:#3b82f6}._markdownViewer_ye8hx_1{max-width:none;line-height:1.6;color:var(--me-text-primary);text-align:left}._markdownViewer_ye8hx_1 h1,._markdownViewer_ye8hx_1 h2,._markdownViewer_ye8hx_1 h3,._markdownViewer_ye8hx_1 h4,._markdownViewer_ye8hx_1 h5,._markdownViewer_ye8hx_1 h6{margin:1.5em 0 .5em;font-weight:600;line-height:1.3;color:var(--me-text-primary);text-align:left}._markdownViewer_ye8hx_1 h1{font-size:2.25rem;border-bottom:2px solid var(--me-border);padding-bottom:.5rem}._markdownViewer_ye8hx_1 h2{font-size:1.875rem;border-bottom:1px solid var(--me-border);padding-bottom:.25rem}._markdownViewer_ye8hx_1 h3{font-size:1.5rem}._markdownViewer_ye8hx_1 h4{font-size:1.25rem}._markdownViewer_ye8hx_1 h5{font-size:1.125rem}._markdownViewer_ye8hx_1 h6{font-size:1rem;color:var(--me-text-secondary)}._markdownViewer_ye8hx_1 p{margin:1rem 0;text-align:left}._markdownViewer_ye8hx_1 ul,._markdownViewer_ye8hx_1 ol{padding-left:2rem;margin:1rem 0;list-style-position:outside}._markdownViewer_ye8hx_1 li{margin:.25rem 0}._markdownViewer_ye8hx_1 ul li,._markdownViewer_ye8hx_1 ol li{margin-bottom:.5rem}._markdownViewer_ye8hx_1 blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:4px solid var(--me-primary);background-color:var(--me-bg-secondary);border-radius:0 var(--me-radius) var(--me-radius) 0}._markdownViewer_ye8hx_1 blockquote p{margin:.5rem 0;color:var(--me-text-secondary);font-style:italic}._markdownViewer_ye8hx_1 code{background-color:var(--me-code-bg);border:1px solid var(--me-code-border);border-radius:var(--me-radius);padding:.125rem .25rem;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.875em;color:var(--me-text-primary);text-align:left}._markdownViewer_ye8hx_1 pre{background-color:var(--me-code-bg);border:1px solid var(--me-code-border);border-radius:var(--me-radius-lg);padding:1rem;overflow-x:auto;margin:1rem 0;position:relative;text-align:left}._markdownViewer_ye8hx_1 pre code{background:none;border:none;padding:0;color:inherit}._markdownViewer_ye8hx_1 table{width:100%;border-collapse:collapse;margin:1rem 0;border:1px solid var(--me-border);border-radius:var(--me-radius-lg);overflow:hidden}._markdownViewer_ye8hx_1 th,._markdownViewer_ye8hx_1 td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--me-border)}._markdownViewer_ye8hx_1 th{background-color:var(--me-bg-secondary);font-weight:600;color:var(--me-text-primary)}._markdownViewer_ye8hx_1 td{color:var(--me-text-primary)}._markdownViewer_ye8hx_1 tr:last-child td{border-bottom:none}._markdownViewer_ye8hx_1 tr:nth-child(2n){background-color:var(--me-bg-secondary)}._markdownViewer_ye8hx_1 a{color:var(--me-primary);text-decoration:none;border-bottom:1px solid transparent;transition:var(--me-transition)}._markdownViewer_ye8hx_1 a:hover{border-bottom-color:var(--me-primary)}._markdownViewer_ye8hx_1 img{max-width:100%;height:auto;border-radius:var(--me-radius);margin:1rem 0;box-shadow:var(--me-shadow)}._markdownViewer_ye8hx_1 hr{border:none;height:1px;background-color:var(--me-border);margin:2rem 0}._markdownViewer_ye8hx_1 input[type=checkbox]{margin-right:.5rem;cursor:pointer}._markdownViewer_ye8hx_1 ._task-list-item_ye8hx_359{list-style:none;margin-left:-2rem;padding-left:2rem}._markdownViewer_ye8hx_1 ._hljs_ye8hx_373{background-color:var(--me-code-bg)!important;color:var(--me-text-primary)!important}._codeBlockContainer_ye8hx_385{position:relative;margin:1rem 0}._copyButton_ye8hx_395{position:absolute;top:.5rem;right:.5rem;background-color:var(--me-bg-tertiary);border:1px solid var(--me-border);border-radius:var(--me-radius);padding:.25rem .5rem;font-size:.75rem;color:var(--me-text-secondary);cursor:pointer;transition:var(--me-transition);opacity:0}._codeBlockContainer_ye8hx_385:hover ._copyButton_ye8hx_395{opacity:1}._copyButton_ye8hx_395:hover{background-color:var(--me-bg-primary);color:var(--me-text-primary)}._copyButton_ye8hx_395._copied_ye8hx_443{background-color:var(--me-primary);color:#fff}._loading_ye8hx_455{display:flex;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--me-text-muted)}._loadingSpinner_ye8hx_471{width:2rem;height:2rem;border:2px solid var(--me-border);border-top:2px solid var(--me-primary);border-radius:50%;animation:_spin_ye8hx_1 1s linear infinite;margin-right:1rem}@keyframes _spin_ye8hx_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._error_ye8hx_503{padding:2rem;text-align:center;color:#dc2626;background-color:#dc26260d;border:1px solid rgba(220,38,38,.2);border-radius:var(--me-radius-lg);margin:1rem 0}._tableWrapper_ye8hx_525{overflow-x:auto;margin:1rem 0}._emptyState_ye8hx_537{text-align:center;padding:4rem 2rem;color:var(--me-text-muted)}._emptyState_ye8hx_537 h3{margin:0 0 .5rem;color:var(--me-text-secondary)}._emptyState_ye8hx_537 p{margin:0;font-size:.875rem}._frontmatterHeader_ye8hx_571{padding:1.5rem;margin-bottom:2rem;background:var(--me-surface);border:1px solid var(--me-border);border-radius:8px;border-left:4px solid var(--me-primary)}._frontmatterTitle_ye8hx_589{margin:0 0 .5rem!important;font-size:2rem!important;font-weight:700!important;color:var(--me-text-primary)!important;border:none!important;padding:0!important}._frontmatterDescription_ye8hx_607{margin:0 0 1rem!important;font-size:1.125rem;color:var(--me-text-secondary)!important;font-style:italic}._frontmatterMeta_ye8hx_621{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:0}._frontmatterDate_ye8hx_637{font-size:.875rem;color:var(--me-text-secondary);background:var(--me-background);padding:.25rem .5rem;border-radius:4px;border:1px solid var(--me-border)}._frontmatterTags_ye8hx_655{display:flex;flex-wrap:wrap;gap:.5rem}._frontmatterTag_ye8hx_655{font-size:.75rem;color:var(--me-primary);background:var(--me-primary-light);padding:.25rem .5rem;border-radius:12px;border:1px solid var(--me-primary);font-weight:500}@media (max-width: 768px){._markdownViewer_ye8hx_1{font-size:.875rem}._markdownViewer_ye8hx_1 h1{font-size:1.875rem}._markdownViewer_ye8hx_1 h2{font-size:1.5rem}._markdownViewer_ye8hx_1 h3{font-size:1.25rem}._markdownViewer_ye8hx_1 pre{padding:.75rem;font-size:.8rem}._markdownViewer_ye8hx_1 table{font-size:.8rem}._markdownViewer_ye8hx_1 th,._markdownViewer_ye8hx_1 td{padding:.5rem}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#ffffff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#005cc5}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-comment,.hljs-code,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}._breadcrumbs_a7ydz_1{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--me-text-secondary);overflow-x:auto;white-space:nowrap;padding:.5rem 0}._breadcrumbItem_a7ydz_23{display:flex;align-items:center;gap:.5rem}._breadcrumbLink_a7ydz_35{color:var(--me-primary);text-decoration:none;padding:.25rem .5rem;border-radius:var(--me-radius);transition:var(--me-transition);cursor:pointer}._breadcrumbLink_a7ydz_35:hover{background-color:var(--me-bg-tertiary)}._breadcrumbCurrent_a7ydz_61{color:var(--me-text-primary);font-weight:500;padding:.25rem .5rem}._breadcrumbSeparator_a7ydz_73{color:var(--me-text-muted);font-size:.75rem}._homeIcon_a7ydz_83{width:1rem;height:1rem;color:var(--me-text-muted)}@media (max-width: 768px){._breadcrumbs_a7ydz_1{font-size:.8rem}._breadcrumbLink_a7ydz_35,._breadcrumbCurrent_a7ydz_61{padding:.125rem .25rem}}:root{--me-primary: #2563eb;--me-primary-hover: #1d4ed8;--me-text-primary: #1f2937;--me-text-secondary: #6b7280;--me-text-muted: #9ca3af;--me-bg-primary: #ffffff;--me-bg-secondary: #f9fafb;--me-bg-tertiary: #f3f4f6;--me-border: #e5e7eb;--me-border-hover: #d1d5db;--me-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);--me-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--me-radius: .375rem;--me-radius-lg: .5rem;--me-transition: all .15s ease-in-out;--me-sidebar-width: 280px;--me-code-bg: #f8fafc;--me-code-border: #e2e8f0}[data-theme=dark]{--me-text-primary: #f9fafb;--me-text-secondary: #d1d5db;--me-text-muted: #9ca3af;--me-bg-primary: #111827;--me-bg-secondary: #1f2937;--me-bg-tertiary: #374151;--me-border: #374151;--me-border-hover: #4b5563;--me-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3);--me-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3);--me-code-bg: #1e293b;--me-code-border: #334155}._markdownExplorer_i85en_39{display:flex;height:100%;min-height:0;width:100%;background-color:var(--me-bg-primary);color:var(--me-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}._markdownExplorer_i85en_39._hideFileTree_i85en_50{--me-sidebar-width: 0px}._sidebar_i85en_55{width:var(--me-sidebar-width);background-color:var(--me-bg-secondary);border-right:1px solid var(--me-border);overflow:hidden;transition:width .3s ease;display:flex;flex-direction:column;height:100%;min-height:0}._sidebarContent_i85en_67{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--me-text-muted) transparent}._sidebarContent_i85en_67::-webkit-scrollbar{width:6px}._sidebarContent_i85en_67::-webkit-scrollbar-track{background:transparent}._sidebarContent_i85en_67::-webkit-scrollbar-thumb{background-color:var(--me-text-muted);border-radius:3px;opacity:.5;transition:opacity .2s ease}._sidebarContent_i85en_67:hover::-webkit-scrollbar-thumb{opacity:1}._sidebar_i85en_55._collapsed_i85en_96{width:0}._sidebarHeader_i85en_100{padding:1rem;border-bottom:1px solid var(--me-border);background-color:var(--me-bg-tertiary)}._sidebarTitle_i85en_106{font-size:.875rem;font-weight:600;color:var(--me-text-primary);margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}._toggleButton_i85en_116{background:none;border:none;color:var(--me-text-secondary);cursor:pointer;padding:.25rem;border-radius:var(--me-radius);transition:var(--me-transition);display:flex;align-items:center;margin-left:auto}._toggleButton_i85en_116:hover{background-color:var(--me-bg-tertiary);color:var(--me-text-primary)}._mainContent_i85en_135{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;height:100%}._contentHeader_i85en_145{padding:1rem;border-bottom:1px solid var(--me-border);background-color:var(--me-bg-secondary);display:flex;align-items:center;gap:1rem}._contentArea_i85en_154{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:2rem;background-color:var(--me-bg-primary);height:calc(100% - 60px)}._fileViewer_i85en_166{padding:2rem}._fileViewer_i85en_166 h3{margin:0 0 1rem;color:var(--me-text-primary)}._rawContent_i85en_175{background-color:var(--me-code-bg);border:1px solid var(--me-code-border);border-radius:var(--me-radius-lg);padding:1rem;overflow:auto;max-height:400px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.875rem;white-space:pre-wrap}._folderView_i85en_188{padding:0}._folderView_i85en_188 h2{margin:0 0 1.5rem;color:var(--me-text-primary);font-size:1.5rem}._fileGrid_i85en_198{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:0}._fileCard_i85en_205{background:var(--me-bg-secondary);border:1px solid var(--me-border);border-radius:var(--me-radius-lg);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:var(--me-transition);display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:120px;text-decoration:none;color:var(--me-text-primary)}._fileCard_i85en_205:hover{background:var(--me-bg-tertiary);border-color:var(--me-border-hover);transform:translateY(-2px);box-shadow:var(--me-shadow-lg)}._folderCard_i85en_229{background:linear-gradient(135deg,var(--me-bg-secondary) 0%,var(--me-bg-tertiary) 100%)}._fileCardIcon_i85en_233{font-size:2rem;margin-bottom:.5rem}._fileCardName_i85en_238{font-weight:500;font-size:.875rem;word-break:break-word;line-height:1.3}._fileCardType_i85en_245{font-size:.75rem;color:var(--me-text-muted);background:var(--me-code-bg);padding:.125rem .375rem;border-radius:var(--me-radius);border:1px solid var(--me-code-border)}._emptyState_i85en_255{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--me-text-muted)}._emptyState_i85en_255 h3{margin:0 0 .5rem;color:var(--me-text-secondary)}._emptyState_i85en_255 p{margin:0;font-size:.875rem}@media (max-width: 768px){._markdownExplorer_i85en_39{flex-direction:column}._sidebar_i85en_55{width:100%;height:auto;max-height:40vh;border-right:none;border-bottom:1px solid var(--me-border)}._sidebar_i85en_55._collapsed_i85en_96{height:0;max-height:0}._contentArea_i85en_154{padding:1rem}._fileGrid_i85en_198{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}._fileCard_i85en_205{padding:1rem .75rem;min-height:100px}._fileCardIcon_i85en_233{font-size:1.5rem}._fileCardName_i85en_238{font-size:.8rem}}._fadeIn_i85en_318{animation:_fadeIn_i85en_318 .3s ease-in-out}@keyframes _fadeIn_i85en_318{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--me-bg-primary);color:var(--me-text-primary);transition:background-color .2s,color .2s}.app.light{--me-bg-primary: #ffffff;--me-bg-secondary: #f8f9fa;--me-text-primary: #212529;--me-text-secondary: #6c757d;--me-border: #dee2e6;--me-accent: #0d6efd;--me-accent-hover: #0b5ed7}.app.dark{--me-bg-primary: #16181c;--me-bg-secondary: #21232a;--me-text-primary: #f3f4f6;--me-text-secondary: #8e99af;--me-border: #252736;--me-accent: #FFD600;--me-accent-hover: #FFB300}.app-header{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--me-bg-secondary);border-bottom:1px solid var(--me-border);box-shadow:0 2px 4px #0000000d;z-index:10}.app-header h1{margin:0;font-size:1.5rem;font-weight:600;color:var(--me-text-primary)}.theme-toggle{background:none;border:2px solid var(--me-border);border-radius:8px;padding:.5rem 1rem;font-size:1.2rem;cursor:pointer;transition:all .2s;color:var(--me-text-primary);background-color:var(--me-bg-primary)}.theme-toggle:hover,.theme-toggle:focus{border-color:var(--me-accent);box-shadow:0 2px 8px #0000001a;outline:none}.app-main{flex:1 1 auto;display:flex;min-height:0;overflow:hidden;width:100%}.demo-explorer{flex:1 1 auto;display:flex;min-width:0;min-height:0}.demo-explorer [class*=sidebar]{min-width:220px;max-width:340px;width:280px;flex:0 0 280px;height:100%;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--me-border);background:var(--me-bg-secondary);overflow:hidden}.demo-explorer [class*=sidebarContent]{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--me-text-secondary) transparent}.demo-explorer [class*=sidebarContent]::-webkit-scrollbar-thumb{background:var(--me-text-secondary);border-radius:3px;opacity:.5;transition:opacity .2s}.demo-explorer [class*=sidebarContent]:hover::-webkit-scrollbar-thumb{opacity:1}.demo-explorer [class*=mainContent]{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;padding:24px;background:var(--me-bg-primary)}.app-footer{flex:0 0 auto;padding:1rem 2rem;background-color:var(--me-bg-secondary);border-top:1px solid var(--me-border);text-align:center;z-index:10}.app-footer p{margin:0;font-size:.95rem;color:var(--me-text-secondary)}.app-footer strong{color:var(--me-accent);font-weight:600}@media (max-width: 900px){.app-header,.app-footer{padding:.75rem 1rem}.app-header h1{font-size:1.25rem}.theme-toggle{padding:.4rem .8rem;font-size:1rem}.demo-explorer [class*=sidebar]{min-width:140px;max-width:200px;width:160px;flex-basis:160px}}@media (max-width: 700px){.app-main,.demo-explorer{flex-direction:column}.demo-explorer [class*=sidebar]{width:100%;max-width:100%;min-width:0;flex-basis:auto;border-right:none;border-bottom:1px solid var(--me-border)}.demo-explorer [class*=mainContent]{padding:12px 6px}}*:focus{outline:2px solid var(--me-accent);outline-offset:2px}*{transition:background-color .2s,border-color .2s,color .2s}.app-main{height:calc(100vh - 120px)!important;overflow:hidden!important}.demo-explorer [class*=sidebar]{display:flex!important;flex-direction:column!important;height:100%!important;overflow:hidden!important}.demo-explorer [class*=sidebarContent]{flex:1!important;overflow-y:auto!important;height:calc(100% - 60px)!important}.demo-explorer [class*=fileTree]{overflow-y:auto!important;height:auto!important;max-height:none!important}.demo-explorer [class*=searchContainer]{position:sticky!important;top:0!important;z-index:10!important;background-color:inherit!important}.demo-explorer [class*=mainContent]{overflow:auto!important}.demo-explorer [class*=sidebarContent]::-webkit-scrollbar{width:6px}.demo-explorer [class*=sidebarContent]::-webkit-scrollbar-track{background:transparent}.demo-explorer [class*=sidebarContent]::-webkit-scrollbar-thumb{background-color:#9ca3af;border-radius:3px;opacity:.7}.demo-explorer [class*=sidebarContent]::-webkit-scrollbar-thumb:hover{opacity:1}.folder-content-container{padding:20px;max-width:100%;overflow-x:hidden}.folder-title{margin-bottom:24px;font-size:1.5rem;display:flex;align-items:center;gap:8px}.folder-icon{font-size:1.6rem}.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-height:calc(100vh - 200px);overflow-y:auto;padding:10px 0}.folder-item{display:flex;flex-direction:column;align-items:center;padding:16px;border:1px solid #ddd;border-radius:8px;cursor:pointer;text-align:center;width:100%;transition:all .2s ease;box-shadow:0 2px 4px #0000000d;background:transparent;color:inherit;text-decoration:none;min-height:120px;justify-content:center}.folder-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.folder-item.light{background:white;color:#333}.folder-item.dark{background:#333;color:#f5f5f5;border-color:#555}.item-icon{font-size:28px;margin-bottom:12px}.item-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;width:100%;font-size:14px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-folder{padding:40px;text-align:center;color:#666}.empty-folder-message{text-align:center;color:#666;margin-top:40px;font-style:italic}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;overflow:hidden}#root{height:100vh}.demo-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:1rem 2rem;text-align:center}.demo-header h1{margin:0 0 .5rem;font-size:2rem}.demo-header p{margin:0;opacity:.9}.demo-container{height:calc(100vh - 120px);display:flex;flex-direction:column}.demo-controls{padding:1rem 2rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.demo-controls label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500}.demo-controls select,.demo-controls input{padding:.25rem .5rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem}.demo-controls button{padding:.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:.375rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:background-color .2s}.demo-controls button:hover{background:#2563eb}.explorer-container{flex:1;overflow:hidden}