/* layer-2.wiki - Isometric Technical Docs */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#FFFFFF;color:#374151;font-family:'Source Sans 3',sans-serif;font-size:17px;line-height:1.8;overflow-x:hidden;display:flex;min-height:100vh}

/* Sidebar toggle (mobile) */
.sidebar-toggle{display:none;position:fixed;top:16px;left:16px;z-index:200;background:#F6F8FB;border:1px solid #E2E8F0;border-radius:8px;padding:8px;cursor:pointer}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:98}
.sidebar-overlay.visible{display:block}

/* Sidebar */
.sidebar{width:280px;min-height:100vh;background:#F6F8FB;border-right:1px solid #E2E8F0;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:99;background-image:radial-gradient(circle,#CBD5E1 1px,transparent 1px);background-size:20px 20px;scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:2px}

/* Sidebar header */
.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid #E2E8F0}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.logo-text{font-family:'Libre Baskerville',serif;font-weight:700;font-size:16px;color:#1A2332}

/* TOC */
.sidebar-nav{padding:16px 0}
.toc-section{margin-bottom:8px}
.toc-category{padding:8px 20px 4px}
.toc-category-label{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#6B7280}
.toc-item{display:flex;align-items:center;gap:8px;padding:6px 20px;text-decoration:none;font-size:14px;color:#374151;border-left:4px solid transparent;transition:all 0.2s}
.toc-item:hover{background:rgba(91,141,239,0.06);color:#1A2332}
.toc-item.active{border-left-color:#5B8DEF;background:rgba(91,141,239,0.08);color:#1A2332;font-weight:600}
.toc-icon{flex-shrink:0}

/* Main content */
.main-content{margin-left:280px;flex:1;max-width:100%;overflow-x:hidden}

/* Article header */
.article-header{padding:48px 48px 32px;background:#F6F8FB;border-bottom:1px solid #E2E8F0;position:relative;overflow:hidden}
.isometric-scene{position:relative;max-width:720px;margin:0 auto}
.iso-l1-platform{opacity:0;transform:translateY(40px);transition:opacity 0.6s ease,transform 0.6s ease}
.iso-l1-platform.visible{opacity:1;transform:translateY(0)}
.iso-l2-structure{opacity:0;transform:translateX(-40px);transition:opacity 0.4s ease 0.2s,transform 0.4s ease 0.2s}
.iso-l2-structure.visible{opacity:1;transform:translateX(0)}
.annotation{opacity:0;transition:opacity 0.3s ease 0.6s}
.annotation.visible{opacity:1}
.article-header-text{max-width:720px;margin:32px auto 0;text-align:center}
.article-title{font-family:'Libre Baskerville',serif;font-weight:700;font-size:40px;color:#1A2332;letter-spacing:-0.01em;margin-bottom:12px}
.article-subtitle{font-size:18px;color:#6B7280;max-width:560px;margin:0 auto}

/* Content wrapper */
.content-wrapper{display:grid;grid-template-columns:1fr 200px;max-width:960px;margin:0 auto;padding:0 48px;gap:40px}
.content-column{max-width:720px}

/* Article sections */
.article-section{padding:48px 0;opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.article-section.visible{opacity:1;transform:translateY(0)}
.section-title{font-family:'Libre Baskerville',serif;font-weight:700;font-size:28px;color:#1A2332;letter-spacing:-0.01em;margin-bottom:20px}
.section-body p{margin-bottom:1.2em;color:#374151}

/* Isometric diagrams */
.iso-diagram{margin:32px 0;padding:24px;background:#F6F8FB;border:1px solid #E2E8F0;border-radius:8px;text-align:center}
.iso-diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* Section dividers */
.section-divider{display:flex;align-items:center;justify-content:center;padding:16px 0}
.section-divider svg{display:block}

/* Code inline */
code,.code-inline{font-family:'Fira Code',monospace;font-size:14px;background:#EEF2F7;border-radius:3px;padding:2px 6px;color:#1A2332}

/* Flow arrows animation */
.flow-arrow{stroke-dasharray:6 4;stroke-dashoffset:0;animation:flowAnim 2s linear infinite}
@keyframes flowAnim{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}

/* Margin notes (right column) */
.margin-notes{position:relative}
.margin-note{background:#FFFFFF;border-left:3px solid #5B8DEF;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#6B7280;line-height:1.6;position:sticky;top:100px;opacity:0;transform:translateX(10px);transition:opacity 0.4s ease,transform 0.4s ease}
.margin-note.visible{opacity:1;transform:translateX(0)}
.margin-note-title{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:#5B8DEF;margin-bottom:4px}

/* Counter animation values */
.counter-value{font-family:'Fira Code',monospace;font-weight:700;color:#5B8DEF;font-size:20px}

/* Depth layering for L1/L2 */
.depth-l1{box-shadow:0 4px 12px rgba(0,0,0,0.08);position:relative;z-index:1;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:8px;padding:20px;margin-bottom:-12px}
.depth-l2{box-shadow:0 8px 20px rgba(91,141,239,0.12);position:relative;z-index:2;background:#F0F4FA;border:1px solid rgba(91,141,239,0.3);border-radius:8px;padding:20px;margin-top:-12px;margin-left:16px}

/* Protocol badges */
.protocol-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600}
.badge-rollup{background:rgba(52,211,153,0.12);color:#059669}
.badge-bridge{background:rgba(249,115,22,0.12);color:#EA580C}
.badge-sidechain{background:rgba(148,163,184,0.12);color:#64748B}

/* Footer */
.article-footer{padding:48px;text-align:center;border-top:1px solid #E2E8F0;margin-top:48px}
.footer-text{font-size:14px;color:#6B7280}

/* Responsive */
@media(max-width:1024px){
.content-wrapper{grid-template-columns:1fr;gap:0}
.margin-notes{display:none}
}
@media(max-width:768px){
.sidebar{transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.sidebar.open{transform:translateX(0)}
.sidebar-toggle{display:block}
.main-content{margin-left:0}
.article-header{padding:24px 16px}
.content-wrapper{padding:0 16px}
.article-title{font-size:28px}
.section-title{font-size:22px}
}