body{margin:0;padding:0}
        .skills-explorer{display:flex;min-height:calc(100vh - 56px - 150px);background:var(--paper-deep,#f5f0e8);padding-top:56px;margin-top:0}
        [data-theme="dark"] .skills-explorer{background:rgba(255,255,255,.02)}
        .explorer-sidebar{width:280px;background:var(--paper-deep,#f5f0e8);border-right:1px solid var(--divider,#e5e5e5);display:flex;flex-direction:column}
        [data-theme="dark"] .explorer-sidebar{background:rgba(255,255,255,.03);border-right-color:rgba(255,255,255,.1)}
        .sidebar-header{padding:16px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-faint,#999);border-bottom:1px solid var(--divider,#e5e5e5)}
        [data-theme="dark"] .sidebar-header{border-bottom-color:rgba(255,255,255,.1)}
        .file-tree{flex:1;overflow-y:auto;padding:8px 0}
        .tree-folder-header{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13px;font-weight:500;color:var(--ink,#1a1a1a);cursor:pointer;user-select:none}
        [data-theme="dark"] .tree-folder-header{color:var(--ink,#e0ddd5)}
        .tree-folder-header:hover{background:rgba(0,0,0,.04)}
        [data-theme="dark"] .tree-folder-header:hover{background:rgba(255,255,255,.05)}
        .tree-chevron{width:14px;height:14px;transition:transform .2s;flex-shrink:0}
        .tree-folder.collapsed .tree-chevron{transform:rotate(-90deg)}
        .tree-folder.collapsed .tree-folder-content{display:none}
        .tree-folder-content{padding-left:12px}
        .tree-item{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 28px;cursor:pointer;font-size:13px;color:var(--ink-secondary,#444);transition:all .15s;border-left:3px solid transparent}
        [data-theme="dark"] .tree-item{color:var(--ink-secondary,#aaa)}
        .tree-item:hover{background:rgba(0,0,0,.04)}
        [data-theme="dark"] .tree-item:hover{background:rgba(255,255,255,.05)}
        .tree-item.active{background:rgba(212,120,106,.08);color:var(--red-faded,#D4786A);border-left-color:var(--red-faded,#D4786A)}
        [data-theme="dark"] .tree-item.active{background:rgba(212,120,106,.15)}
        .tree-item-icon{width:18px;height:18px;flex-shrink:0}
        .tree-item-name{flex:1;font-family:var(--font-mono,monospace)}
        .explorer-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--paper-deep,#f5f0e8)}
        [data-theme="dark"] .explorer-main{background:rgba(255,255,255,.02)}
        .editor-tabs{display:flex;background:var(--paper-deep,#f5f0e8);border-bottom:1px solid var(--divider,#e5e5e5);overflow-x:auto}
        [data-theme="dark"] .editor-tabs{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.1)}
        .editor-tab{display:flex;align-items:center;gap:8px;padding:14px 16px 14px 20px;font-size:13px;color:var(--ink-muted,#888);border-right:1px solid var(--divider,#e5e5e5);cursor:pointer;white-space:nowrap;transition:all .15s}
        [data-theme="dark"] .editor-tab{color:var(--ink-muted,#888);border-right-color:rgba(255,255,255,.1)}
        .editor-tab:hover{color:var(--ink,#1a1a1a);background:rgba(0,0,0,.02)}
        [data-theme="dark"] .editor-tab:hover{background:rgba(255,255,255,.03)}
        .editor-tab.active{color:var(--ink,#1a1a1a);background:var(--paper,#faf8f3);border-bottom:2px solid var(--red-faded,#D4786A);margin-bottom:-1px}
        [data-theme="dark"] .editor-tab.active{background:var(--bg-base,#131627)}
        .tab-icon{width:14px;height:14px}
        .tab-close{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;margin-left:4px}
        .editor-tab:hover .tab-close{opacity:.6}
        .tab-close:hover{opacity:1!important;background:rgba(0,0,0,.1)}
        [data-theme="dark"] .tab-close:hover{background:rgba(255,255,255,.1)}
        .editor-content{flex:1;overflow-y:auto;padding:40px;background:var(--paper,#faf8f3)}
        [data-theme="dark"] .editor-content{background:var(--bg-base,#131627)}
        .skill-view{display:none;max-width:860px;margin:0 auto}
        .skill-view.active{display:block}
        .skill-hero{display:flex;align-items:flex-start;gap:24px;margin-bottom:36px;padding-bottom:32px;border-bottom:1px dashed var(--divider,#e5e5e5)}
        [data-theme="dark"] .skill-hero{border-bottom-color:rgba(255,255,255,.1)}
        .skill-emoji{font-size:56px;line-height:1}
        .skill-info{flex:1}
        .skill-name{font-family:var(--font-display,serif);font-size:32px;font-weight:700;margin-bottom:8px;color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .skill-name{color:var(--ink,#e0ddd5)}
        .skill-tagline{font-size:16px;color:var(--ink-secondary,#555);margin-bottom:14px;line-height:1.6}
        [data-theme="dark"] .skill-tagline{color:var(--ink-secondary,#aaa)}
        .skill-badges{display:flex;gap:10px;flex-wrap:wrap}
        .skill-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}
        .badge-lang{background:rgba(123,167,166,.15);color:var(--monet-pond,#7BA7A6)}
        .badge-stars{background:rgba(212,175,55,.15);color:var(--monet-gold,#D4AF37)}
        .badge-ver{background:rgba(120,140,93,.15);color:var(--monet-olive,#788C5D)}
        .skill-section{margin-bottom:40px}
        .section-title{font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-faint,#999);margin-bottom:20px;display:flex;align-items:center;gap:10px}
        .section-title::after{content:'';flex:1;height:1px;background:var(--divider,#e5e5e5)}
        [data-theme="dark"] .section-title::after{background:rgba(255,255,255,.1)}
        .feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
        .feature-card{background:var(--paper-deep,#f5f0e8);border:1px solid var(--divider,#e5e5e5);border-radius:10px;padding:20px;transition:all .2s}
        [data-theme="dark"] .feature-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
        .feature-card:hover{border-color:var(--red-faded,#D4786A);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
        [data-theme="dark"] .feature-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.2)}
        .feature-icon{font-size:28px;margin-bottom:12px}
        .feature-title{font-weight:600;font-size:15px;margin-bottom:6px;color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .feature-title{color:var(--ink,#e0ddd5)}
        .feature-desc{font-size:13px;line-height:1.7;color:var(--ink-secondary,#555)}
        [data-theme="dark"] .feature-desc{color:var(--ink-secondary,#aaa)}
        .workflow{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:center}
        .workflow-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;flex:0 0 auto;width:130px}
        .workflow-step:not(:last-child)::after{content:'';position:absolute;top:28px;left:calc(50% + 32px);width:calc(100% - 64px);height:2px;background:var(--divider,#e5e5e5)}
        [data-theme="dark"] .workflow-step:not(:last-child)::after{background:rgba(255,255,255,.12)}
        .step-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--paper-deep,#f5f0e8);border:2px solid var(--divider,#e5e5e5);position:relative;z-index:1;transition:all .2s}
        [data-theme="dark"] .step-circle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
        .workflow-step:hover .step-circle{border-color:var(--red-faded,#D4786A);transform:scale(1.08)}
        .step-label{font-size:12px;font-weight:600;margin-top:10px;color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .step-label{color:var(--ink,#e0ddd5)}
        .step-desc{font-size:11px;color:var(--ink-muted,#888);margin-top:4px;line-height:1.5}
        .arch-diagram{background:var(--paper-deep,#f5f0e8);border:1px solid var(--divider,#e5e5e5);border-radius:12px;padding:24px;overflow-x:auto}
        [data-theme="dark"] .arch-diagram{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
        .arch-diagram svg{display:block;margin:0 auto}
        .compare-table{width:100%;border-collapse:collapse;font-size:14px}
        .compare-table th{text-align:left;padding:12px 16px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid var(--divider,#e5e5e5);color:var(--ink-faint,#999)}
        [data-theme="dark"] .compare-table th{border-bottom-color:rgba(255,255,255,.1)}
        .compare-table td{padding:12px 16px;border-bottom:1px solid var(--divider,#e5e5e5);vertical-align:top;line-height:1.6}
        [data-theme="dark"] .compare-table td{border-bottom-color:rgba(255,255,255,.06)}
        .compare-table tr:last-child td{border-bottom:none}
        .cell-bad{color:#c0392b;text-decoration:line-through;opacity:.7}
        .cell-good{color:var(--monet-olive,#788C5D);font-weight:500}
        [data-theme="dark"] .cell-bad{color:#e74c3c}
        [data-theme="dark"] .cell-good{color:#a8c686}
        .skill-tags{display:flex;gap:10px;flex-wrap:wrap}
        .skill-tag{padding:6px 14px;background:var(--paper-deep,#f5f0e8);border:1px solid var(--divider,#e5e5e5);border-radius:6px;font-size:13px;color:var(--ink-secondary,#444);font-family:var(--font-mono,monospace)}
        [data-theme="dark"] .skill-tag{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink-secondary,#aaa)}
        .skill-code{background:var(--paper-deep,#f5f0e8);border:1px solid var(--divider,#e5e5e5);border-radius:8px;padding:16px 20px;font-family:var(--font-mono,monospace);font-size:14px;color:var(--ink,#1a1a1a);overflow-x:auto}
        [data-theme="dark"] .skill-code{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink,#e0ddd5)}
        .skill-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
        .skill-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s}
        .btn-primary{background:var(--red-faded,#D4786A);color:white}
        .btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,120,106,.3)}
        .btn-secondary{background:transparent;color:var(--ink-secondary,#555);border:1px solid var(--divider,#e5e5e5)}
        .btn-secondary:hover{border-color:var(--ink-muted,#888);color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .btn-secondary{color:var(--ink-secondary,#aaa);border-color:rgba(255,255,255,.15)}
        [data-theme="dark"] .btn-secondary:hover{border-color:rgba(255,255,255,.3);color:var(--ink,#e0ddd5)}
        .welcome-view{text-align:center;padding:80px 40px}
        .welcome-icon{font-size:72px;margin-bottom:24px}
        .welcome-title{font-family:var(--font-display,serif);font-size:28px;font-weight:700;margin-bottom:16px;color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .welcome-title{color:var(--ink,#e0ddd5)}
        .welcome-subtitle{font-size:16px;line-height:1.8;color:var(--ink-muted,#888);margin-bottom:32px;max-width:500px;margin-left:auto;margin-right:auto}
        .welcome-hint{font-size:14px;color:var(--ink-faint,#aaa)}
        .stats-row{display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap}
        .stat-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-secondary,#555)}
        [data-theme="dark"] .stat-item{color:var(--ink-secondary,#aaa)}
        .stat-num{font-weight:700;font-size:20px;color:var(--ink,#1a1a1a);font-family:var(--font-mono,monospace)}
        [data-theme="dark"] .stat-num{color:var(--ink,#e0ddd5)}
        .pattern-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
        .pattern-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--paper-deep,#f5f0e8);border:1px solid var(--divider,#e5e5e5);border-radius:8px;font-size:13px;transition:all .15s}
        [data-theme="dark"] .pattern-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
        .pattern-item:hover{border-color:var(--red-faded,#D4786A)}
        .pattern-num{width:24px;height:24px;border-radius:50%;background:var(--red-faded,#D4786A);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
        .pattern-name{font-weight:500;color:var(--ink,#1a1a1a)}
        [data-theme="dark"] .pattern-name{color:var(--ink,#e0ddd5)}
        @media(max-width:768px){
            .skills-explorer{flex-direction:column;padding-top:120px}
            .explorer-sidebar{width:100%;max-height:200px}
            .editor-content{padding:24px 20px}
            .skill-hero{flex-direction:column;align-items:center;text-align:center}
            .skill-name{font-size:24px}
            .skill-badges{justify-content:center}
            .workflow{flex-direction:column;align-items:center}
            .workflow-step:not(:last-child)::after{display:none}
            .feature-grid{grid-template-columns:1fr}
        }