:root{--bg:#0b0c10;--fg:#f3f3f3;--accent:#d0aa5b;}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;}
.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:1em;
background:#111;padding:0 1em;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.topbar a{color:var(--accent);text-decoration:none;}
.sidebar{position:fixed;top:48px;bottom:0;width:260px;overflow:auto;background:#111;transition:.3s;transform:translateX(-100%);}
.sidebar.open{transform:translateX(0);}
button#navToggle{position:fixed;top:8px;left:8px;z-index:101;}
.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:100;}
.sidebar.open ~ .overlay{display:block;}
.content{margin-left:0;padding-top:56px;}
@media(min-width:900px){.sidebar{transform:none;width:280px;}.content{margin-left:280px;}}
.viewer{height:calc(100vh - 80px);overflow:auto;padding:16px;}
iframe#htmlView{width:100%;height:100%;border:none;background:#0b0c10;}
.dir .label{display:flex;cursor:pointer;padding:2px 6px;}
.children{margin-left:1em;display:none;}
.dir.open .children{display:block;}
.file{display:block;padding:2px 12px;color:var(--fg);text-decoration:none;}
.file.active{background:rgba(208,170,91,.3);}
.controls{display:flex;gap:.5em;padding:4px;}
#search{flex:1;}