:root{
--bg: #fafafa;
--text: #171717;
--muted: #616161;
--accent: #2563eb;
--card: #ffffff;
--border: #e5e7eb;
}


html, body{ height: 100%; }
body{
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
}


header, main, footer{
    max-width: 900px; margin: 0 auto; padding: 16px;
}


header{
padding-top: 24px;
}


h1{
    font-size: 2.1rem; margin: 0 0 8px;
}

header p{
    color: var(--muted); margin: 0 0 8px; 
}


nav{
    position: sticky; 
    top: 0; background: linear-gradient(#fff, #fff0);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid var(--border); 
}

nav ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px; 
    padding: 10px 16px; 
    margin: 0 auto; 
    max-width: 900px;

}

nav a{
    text-decoration: none;
    color: var(--accent); }
    
nav a:hover{
    text-decoration: underline;
}


main{
    padding-top: 8px;
}

article{
    background: var(--card);
    border: 1px solid var(--border); 
    border-radius: 10px; 
    padding: 20px; 
    box-shadow: 0 2px 14px rgba(0,0,0,.05);
}

section + section{ margin-top: 20px; }


h2{ font-size: 1.35rem; margin: 0 0 8px; }


p, li{ max-width: 75ch; }


ul{ padding-left: 1.2rem; }


aside{ 
    background: #f7fafc;
    border: 1px dashed #d1d5db;
    color: #374151;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 0; 
}


code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; 
    background: #f3f4f6; 
    padding: 0 .25rem; 
    border-radius: 4px; 
}

pre{
    background: #0b1021;
    color: #e5edff;
    padding: 14px;
    border-radius: 8px;
    overflow: auto;
    border: 1px solid #111827;
}

footer{ color: var(--muted); text-align: center; padding-bottom: 36px; }

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin: 40px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

input[type="password"] {
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: #5fb962;
}

button:hover {
    background-color: #4CAF50;
}