:root{--bw:#000;--bg:#fff}html,body{height:100%}body{background:var(--bg);color:var(--bw);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:EB Garamond,serif;font-size:18px;line-height:1.6}code,pre,.mono{font-family:Source Code Pro,monospace;font-size:14px}.header{border-bottom:1px solid var(--bw);text-align:center;padding:12px 24px}.header h1{margin:0;font-family:EB Garamond,serif;font-size:24px;font-weight:700}.nav-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}.nav-dot{border:1px solid var(--bw);cursor:pointer;width:8px;height:8px;transition:all .2s}.nav-dot:hover{opacity:.7}.nav-dot.active{background:var(--bw)}.main-container{display:flex;position:relative;min-height:calc(100vh - 120px)}.content-area{display:flex;flex:1;justify-content:center;align-items: center;padding:24px}.nav-button{position:absolute;background:var(--bw);color:var(--bg);border:1px solid var(--bw);cursor:pointer;padding:12px;font-family:Source Code Pro,monospace;font-size:14px;top:50%;transform:translateY(-50%)}.nav-button:hover{opacity:.9}.nav-button.prev{left:24px}.nav-button.next{right:24px}.footer{border-top:1px solid var(--bw);text-align:center;opacity:.7;padding:12px 24px;font-family:Source Code Pro,monospace;font-size:12px}@media (max-width:768px){.nav-button{padding:8px;font-size:12px}.nav-button.prev{left:12px}.nav-button.next{right:12px}.content-area{padding:16px}}