:root{
  --bg:#f4f6f8;
  --ink:#1f2937;
  --brand:#1f3a5f;
  --accent:#2c7be5;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
header{position:sticky;top:0;z-index:10;background:var(--brand);color:#fff;padding:16px 24px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
header h1{margin:0;font-size:22px}
.wrapper{display:flex;max-width:1200px;margin:0 auto}
.sidebar {width:220px; background:white; min-height:calc(100vh - 70px); padding:15px; position:sticky; top:70px; align-self:flex-start;}
.sidebar h3{margin-top:0;font-size:14px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.sidebar a {display:block; color:#2c3e50; margin:10px 0; text-decoration:none; font-size:14px;}
.sidebar a:hover{background:#eef3fb}
.content{flex:1;padding:28px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:22px 22px 10px 22px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
h2{margin-top:0;color:var(--brand)}
h3{color:var(--brand)}
p{margin:10px 0}
ul{margin:8px 0 14px 22px}
li{margin:6px 0}
.section{display:flex;gap:18px;align-items:flex-start}
.section img{width:280px;max-width:40%;border-radius:10px;border:1px solid #e5e7eb}
.section .text{flex:1}
.note{background:#eef3fb;border-left:4px solid var(--accent);padding:10px 12px;border-radius:6px;margin:10px 0}
.table{width:100%;border-collapse:collapse;margin:10px 0 18px 0}
.table th,.table td{border:1px solid #e5e7eb;padding:8px;text-align:left;vertical-align:top}
.footer{color:var(--muted);font-size:12px;margin-top:20px}
@media (max-width:900px){
  .wrapper{flex-direction:column}
  .sidebar{position:relative;top:0;width:100%;min-height:auto;border-right:none;border-bottom:1px solid #e5e7eb}
  .section{flex-direction:column}
  .section img{max-width:100%;width:100%}
}

.layout {align-items:flex-start;}