*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f0eb;--bg2:#ece7e1;--bg3:#e3ded8;
  --surface:#fff;--surface2:#faf8f6;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.12);
  --t1:#191919;--t2:#4a4a4a;--t3:#7a7a7a;--t4:#a0a0a0;
  --accent:#c45a3c;--accent2:#b04e33;
  --green:#2d8a5e;--amber:#b8860b;--rose:#c45a5a;
  --font:'Styrene A Web','Söhne',system-ui,-apple-system,sans-serif;
  --body:'Söhne','Inter',system-ui,-apple-system,sans-serif;
  --mono:'Söhne Mono','SF Mono','JetBrains Mono',monospace;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--t2);font-family:var(--body);-webkit-font-smoothing:antialiased}
::selection{background:rgba(196,90,60,.12);color:var(--t1)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
a{color:inherit;text-decoration:none}

/* Shell */
#shell{display:grid;grid-template-columns:200px 1fr;height:100vh}

/* Sidebar */
#sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:24px 0}
.sb-logo{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:3px;color:var(--t1);padding:0 24px;margin-bottom:32px}
.sb-nav{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--t3);transition:all .12s}
.sb-link:hover{color:var(--t2);background:rgba(0,0,0,.04)}
.sb-link.active{color:var(--t1);background:rgba(0,0,0,.06)}
.sb-link svg{width:16px;height:16px;opacity:.45}
.sb-link.active svg{opacity:.7}
.sb-bottom{margin-top:auto;padding:0 24px;display:flex;flex-direction:column;gap:12px}
.sb-uptime{font-family:var(--mono);font-size:11px;color:var(--t4)}
.sb-social{display:flex;align-items:center;gap:6px}
.sb-social a{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t4);text-decoration:none;transition:color .15s}
.sb-social a:hover{color:var(--t2)}
.sb-social svg{width:13px;height:13px}

/* Main */
#content{overflow-y:auto;overflow-x:hidden}

/* Tags */
.c-web{color:#3672a4}.c-read{color:#7c5cbf}.c-game{color:var(--amber)}.c-sys{color:var(--green)}

@media(max-width:768px){
  #shell{grid-template-columns:1fr}
  #sidebar{display:none}
}