:root { --ink:#183d47; --deep:#143f4e; --teal:#0f7668; --pale:#e7f2ef; --line:#cadbd7; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.65 "Segoe UI",Arial,sans-serif; color:var(--ink); background:#f5f8f7; }
a { color:#08675c; }
a:focus-visible,button:focus-visible { outline:3px solid #e1a62f; outline-offset:3px; }
.topbar { min-height:76px; display:flex; align-items:center; gap:16px; padding:10px 24px; background:white; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--deep); text-decoration:none; }
.brand img { width:52px; height:52px; }
.brand strong,.brand small { display:block; }
.brand small { color:#5c7479; }
.language { margin-left:auto; } .sidebar-toggle { border:1px solid var(--line); background:white; padding:8px 11px; font-size:20px; }
.shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 150px); } .sidebar { padding:26px 14px; background:var(--deep); }
.sidebar a { display:block; padding:9px 13px; color:#e4f2f0; text-decoration:none; border-radius:5px; } .sidebar a:hover,.sidebar a[aria-current=page] { color:var(--deep); background:var(--pale); }
.shell.sidebar-collapsed { grid-template-columns:0 minmax(0,1fr); } .shell.sidebar-collapsed .sidebar { visibility:hidden; overflow:hidden; padding:0; }
main { width:min(1180px,100%); padding:42px 34px 72px; } h1,h2,h3 { line-height:1.18; color:var(--deep); } h1 { font-size:clamp(34px,5vw,58px); } h2 { margin-top:42px; }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:42px; align-items:center; padding:38px; border-radius:16px; color:white; background:linear-gradient(135deg,var(--deep),#175e68); } .hero h1 { color:white; } .hero p { color:#d8edef; } .hero img { width:100%; max-width:310px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; } .button { padding:11px 17px; border-radius:6px; color:var(--deep); background:white; font-weight:700; text-decoration:none; } .button.primary { background:#e7a82d; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .cards article,details,dl { padding:20px; background:white; border:1px solid var(--line); border-radius:9px; } .screenshot { width:100%; border:1px solid #9db4b2; }
details { margin:12px 0; } summary { cursor:pointer; font-weight:700; } dt { margin-top:12px; font-weight:700; } dd { margin:2px 0 12px; }
.parameters { display:grid; grid-template-columns:minmax(190px,280px) 1fr; } .parameters dt,.parameters dd { margin:0; padding:12px; border-bottom:1px solid var(--line); } code,.hash { overflow-wrap:anywhere; } pre { overflow:auto; padding:16px; background:#eef4f2; }
footer { display:flex; justify-content:space-between; gap:16px; padding:22px 28px; border-top:1px solid var(--line); background:white; }
@media (max-width:820px) { .shell { grid-template-columns:1fr; } .sidebar { display:none; } .shell.sidebar-open .sidebar { display:block; } main { padding:28px 18px 52px; } .hero,.cards { grid-template-columns:1fr; } .parameters { grid-template-columns:1fr; } footer { flex-direction:column; } .brand small { display:none; } }