@font-face{font-family:'qsl-mono';src:url('/_next/static/media/97ac91773d3121b2-s.p.woff2') format('woff2');font-display:swap}
@font-face{font-family:'qsl-mono-alt';src:url('/_next/static/media/463dafcda517f24f-s.p.woff') format('woff');font-display:swap}
@font-face{font-family:'qsl-otf';src:url('/_next/static/media/6df7f667924dd080-s.p.otf') format('opentype');font-display:swap}
@font-face{font-family:'qsl-otf-alt';src:url('/_next/static/media/c23e48eb5c254e79-s.p.otf') format('opentype');font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#09090b;color:#fafafa;font-family:'qsl-otf-alt','qsl-mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}

.header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#09090b}
.header button{background:none;border:none;color:#fafafa;cursor:pointer;padding:8px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.header button:hover{background:#27272a}

.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}

.logo{width:224px;margin-bottom:4px;display:flex;align-items:center;justify-content:center}
.logo svg{width:100%;height:auto}

.tagline{text-align:center;font-size:14px;line-height:1.7;color:#a1a1aa;margin:20px 0;max-width:400px;letter-spacing:.02em}

.form{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.form input{width:224px;height:36px;border:1px solid #27272a;border-radius:6px;background:transparent;color:#fafafa;padding:0 12px;font-size:14px;font-family:inherit}
.form input::placeholder{color:#71717a}
.form input:focus{outline:none;border-color:#a1a1aa}
.form button{width:224px;height:36px;border:none;border-radius:6px;background:#a1a1aa;color:#09090b;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s}
.form button:hover{background:#d4d4d8}

.footer{padding:20px 24px}
.puzzle{font-size:12px;color:#27272a;cursor:crosshair;margin-bottom:20px}
.social{display:flex;gap:16px;align-items:center;height:30px}
.social a{color:#fafafa;text-decoration:none;display:flex;align-items:center;transition:opacity .15s}
.social a:hover{opacity:.7}
.social .blog-link{font-size:13px}

.qday{position:fixed;bottom:20px;right:20px;display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 16px;height:30px;border-radius:9999px;border:1px solid #315941;background:#151f19;color:#4ade80;font-size:13px;font-family:inherit;cursor:pointer}
.qday:hover{background:#1a2e22}
.qday svg{color:#22c55e;width:16px;height:16px}

/* Slide-out nav */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-drawer{position:fixed;top:0;left:0;bottom:0;width:280px;background:#09090b;border-right:1px solid #27272a;z-index:100;transform:translateX(-100%);transition:transform .25s ease;padding:24px;display:flex;flex-direction:column}
.nav-drawer.open{transform:translateX(0)}
.nav-close{align-self:flex-end;background:none;border:none;color:#fafafa;cursor:pointer;padding:8px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.nav-close:hover{background:#27272a}
.nav-links{display:flex;flex-direction:column;gap:4px}
.nav-links a{color:#a1a1aa;text-decoration:none;font-size:14px;padding:10px 12px;border-radius:6px;transition:background .15s,color .15s}
.nav-links a:hover{background:#27272a;color:#fafafa}
.nav-section{font-size:11px;color:#52525b;text-transform:uppercase;letter-spacing:.1em;padding:16px 12px 6px;margin-top:8px}

/* Expandable nav item */
.nav-expandable{position:relative;margin:4px 0}
.nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;color:#fafafa;text-decoration:none;font-size:14px;padding:10px 12px;border-radius:6px;transition:background .15s,color .15s;cursor:pointer;background:none;border:none;font-family:inherit;text-align:left}
.nav-toggle:hover{background:#27272a}
.nav-toggle svg{transition:transform .2s;flex-shrink:0}
.nav-toggle.open svg{transform:rotate(90deg)}
.nav-submenu{overflow:hidden;max-height:0;transition:max-height .3s ease;margin:4px 0 4px 16px;display:flex;flex-direction:column;gap:2px}
.nav-submenu.open{max-height:500px}
.nav-submenu a{display:block;font-size:13px!important;color:#52525b!important;padding:8px 12px 8px 16px!important;border-left:2px solid #1a1a1e;border-radius:0!important;margin:0!important;line-height:1.4}
.nav-submenu a:hover{color:#a1a1aa!important;border-left-color:#315941;background:transparent!important}
.nav-submenu a.active{color:#4ade80!important;border-left-color:#4ade80}

/* Site footer */
.site-footer{text-align:center;padding:32px 24px;border-top:1px solid #1a1a1e;margin-top:auto}
.site-footer p{font-size:11px;color:#27272a;line-height:1.8}
.site-footer a{color:#52525b;text-decoration:none}
.site-footer a:hover{color:#a1a1aa}
.site-footer .disclaimer{color:#1a1a1e;margin-top:8px}

@media(max-width:600px){.tagline{max-width:224px}}