:root{--bg:#102626;--panel:#183c36;--border:#326354;--text:#eef9f5;--muted:#aac8bf;--accent:#b9ffdf}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,sans-serif}.viewer{height:100%;display:flex}.sidebar{border-right:1px solid var(--border);flex:0 0 240px;padding:16px 8px;overflow-y:auto}.sidebar h1{margin:0 8px 16px;font-size:16px}.sidebar h2{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:16px 8px 4px;font-size:11px;font-weight:600}.sidebar a{color:var(--text);border-radius:6px;padding:6px 8px;text-decoration:none;display:block}.sidebar a:hover{background:var(--panel)}.sidebar a[aria-current=page]{background:var(--panel);color:var(--accent);font-weight:600}main{flex-direction:column;flex:1;min-width:0;display:flex}header{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:8px 12px;display:flex}header button{border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;border-radius:6px;padding:4px 10px}header a{color:var(--accent);flex:none}.path{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}iframe{background:#fff;border:0;flex:1;width:100%}@media (width<=700px){.viewer{flex-direction:column}.sidebar{border-right:0;border-bottom:1px solid var(--border);flex:0 0 40%}main{min-height:0}}