html{height:100%}body{max-width:72ch;box-sizing:border-box;margin:0 auto;padding:2ch;background:linear-gradient(#fff, #fff) 50% 50%/72ch 200% repeat-y,conic-gradient(from var(--from), red, orange, blue, green, indigo, violet) 50% 50%/73ch 100vh no-repeat #ccc;background-attachment:fixed;min-height:100%;transition:background .5s ease-in-out;animation:swirl 6s infinite;--from: 45deg}body>p:last-child{padding:0 0 3ch 0}dt{font-weight:bold}dd{margin:1em}form[method=post]{margin:0;display:grid;gap:1rem;padding:1rem;background:#ffffe0;border:2px solid #ff0;font-family:sans-serif}form[method=post] *{margin:0;padding:0;display:block;width:100%;font-family:sans-serif;font-size:1rem}form[method=post] input{padding:.5rem}form:has(h2) h2>b{color:color-mix(in srgb, currentColor 80%, yellowgreen);background:#9acd32;aspect-ratio:1;border-radius:50%;display:inline-flex;justify-content:center;gap:2px;align-items:center;padding:2px;font-weight:normal;font-size:1.5rem;position:relative;border:1px solid}form:has(h2) h2>i{font-size:1rem;font-weight:normal;font-family:system-ui,sans-serif;display:inline-block;max-height:0;overflow:hidden;transition:max-height .3s linear}form:has(h2) form:has(h2) h2>i{padding:.5lh;background:#9acd32;line-height:1.4rem;margin:1lh 0}form:has(h2):has(input:checked) h2>i{margin:1lh 0 0;max-height:10lh;border:1px solid;background:#9acd32;padding:1lh}form:has(h2):has(input:checked) h2>b::after{content:"";position:absolute;display:block;height:1lh;overflow:hidden;background:#9acd32;bottom:-1lh;border-inline:1px solid;width:.2rem}@keyframes swirl{0%{--from: 0deg}50%{--from: 350deg}100%{--from: 0deg}}h2:has(+dl+form){border:3px double orange;background:bisque;padding:.1rem .5rem;line-height:1;color:darkred;font-family:sans-serif}dl:has(+form){display:grid;font-family:sans-serif;gap:.33rem;margin:0 0 1rem .75rem}dl:has(+form) dt{font-weight:normal;color:darkred}dl:has(+form) dd{margin:0 0 0 1rem;display:flex;gap:1rem;justify-content:start;align-items:center}dl:has(+form) dd img{opacity:.9;width:1.5rem;aspect-ratio:1;border-radius:50%}a:has(img[ismap]){display:block;width:min-content}a:has(img[ismap]) img{display:block;width:549px;height:60px}
