:root { --paper:#f5f8f6; --ink:#10292d; --muted:#5e7273; --line:#d6e2df; --teal:#0c7f8d; --navy:#0b2428; --gold:#dda93c; --danger:#b84c3c; }
:focus-visible { outline:3px solid #e86c53; outline-offset:3px; }
.intro h1 { max-width:760px; }
.intro { animation:developer-enter .5s cubic-bezier(.2,.8,.2,1) both; }
.endpoint dt { border-left:3px solid #e86c53; padding-left:8px; }
.key-panel { border-top:3px solid #0c7f8d; }
.primary { box-shadow:0 5px 0 #0b2428; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.primary:hover { transform:translateY(-2px); box-shadow:0 7px 0 #0b2428; }
@keyframes developer-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (max-width:850px) { .layout { min-width:0; } main { width:100%; } }
@media (max-width:560px) {
    body { overflow-x:hidden; }
    .topbar,.layout,main,section,.intro { min-width:0; max-width:100%; }
    .top-actions { display:grid; grid-template-columns:1fr; align-items:stretch; gap:10px; }
    .top-actions .button { width:100%; min-width:0; }
    h1,h2,h3,p,dd { overflow-wrap:anywhere; }
    .code-block,.table-wrap { max-width:100%; }
    dialog form { padding:20px 16px; }
    .key-item { align-items:flex-start; flex-direction:column; }
    .key-item .revoke { width:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }