*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:linear-gradient(180deg,var(--bg), #e6f6ff 60%);
  color:var(--ink);
  padding:32px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  justify-content:center;
}

.container{
  width:100%;
  max-width:var(--maxw);
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:24px;
  align-items:start;
}

header.titlebar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--panel), rgba(255,255,255,0.01));
  border:1px solid var(--glass);
  box-shadow:var(--shadow);
}

.logo{
  width:72px;height:72px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;font-family:var(--serif);
  font-size:1.1rem;
  box-shadow:0 8px 24px rgba(11,118,242,0.08);
}

header h1{margin:0;font-size:1.25rem}
header p{margin:6px 0 0 0;color:var(--muted);font-size:0.95rem}

main.card{
  background:var(--panel);
  border-radius:12px;
  padding:24px;
  border:1px solid var(--glass);
  box-shadow:var(--shadow);
  line-height:1.65;
  overflow-wrap:break-word;
}

aside.panel{
  background:linear-gradient(180deg,var(--panel), rgba(255,255,255,0.01));
  border-radius:12px;padding:18px;border:1px solid var(--glass);
  box-shadow:var(--shadow);
  position:sticky; top:32px;
  height:fit-content;
  font-size:0.95rem;
  color:var(--muted);
}

h2{font-family:var(--serif);margin-top:0;color:var(--ink)}
h3{margin:12px 0 6px 0;color:var(--ink)}
p.lead{color:var(--muted);font-size:1rem}
p{color:var(--muted);margin:0 0 12px 0}

ul,ol{margin:8px 0 12px 20px;color:var(--muted)}
pre{background:#071827;color:#bfeef0;padding:12px;border-radius:10px;overflow:auto;font-family:var(--mono);font-size:0.92rem}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--glass);color:var(--accent);font-weight:700;font-size:0.86rem;border:1px solid rgba(11,118,242,0.05)}
.cta{display:flex;gap:10px;margin-top:12px}
.btn{padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;font-weight:800;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(11,118,242,0.06);color:var(--muted);font-weight:700}

.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:0.92rem;margin-top:8px}

.note{background:linear-gradient(180deg, rgba(11,118,242,0.03), rgba(11,118,242,0.01));padding:12px;border-radius:10px;border-left:4px solid rgba(11,118,242,0.14);color:var(--muted);margin:12px 0}
.warning{background:linear-gradient(180deg, rgba(255,230,225,0.02), rgba(255,230,225,0.01));padding:12px;border-radius:10px;border-left:4px solid rgba(255,120,120,0.18);color:#7a0505;margin:12px 0}

table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:10px;border-bottom:1px solid rgba(11,118,242,0.04);text-align:left;color:var(--muted)}

footer{grid-column:1 / -1;margin-top:18px;color:var(--muted);font-size:0.95rem;text-align:center}

@media (max-width:980px){
  .container{grid-template-columns:1fr;padding:16px}
  aside.panel{position:relative;top:auto}
}