.composition-account { box-sizing: border-box; max-width: 38rem; margin: 4rem auto; padding: 2rem; font-family: inherit; }
.composition-account *, .composition-account *::before, .composition-account *::after { box-sizing: inherit; }
.composition-account h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; }
.composition-account p { line-height: 1.5; }
.composition-account form { display: grid; gap: 1rem; margin: 1.5rem 0; }
.composition-account label { display: grid; gap: .4rem; }
.composition-account input { min-width: 0; width: 100%; padding: .75rem; border: 1px solid #999; border-radius: .3rem; font: inherit; background: white; color: #202020; }
.composition-account button { padding: .8rem 1.2rem; border: 0; border-radius: .3rem; background: #202020; color: white; font: inherit; cursor: pointer; }
.composition-account :focus-visible { outline: 3px solid #0875bb; outline-offset: 3px; }
.composition-account .cp-checkbox { display: flex; align-items: center; }
.composition-account .cp-checkbox input { width: auto; }
.composition-account .cp-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.composition-account .cp-notice { padding: 1rem; background: #e8f2e8; color: #163016; }
.composition-account .cp-error { background: #fff0ed; color: #702010; }
.composition-account nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.composition-account summary { cursor: pointer; }