html{height:100%;color-scheme:light dark}body{--baseColor: #fff;--leastColor: #fee9ec}@media screen and (prefers-color-scheme: dark){body{--baseColor: #191919;--leastColor: rebeccapurple}}*{box-sizing:border-box}body{box-sizing:border-box;margin:0 auto;padding:2ch;min-height:100%;transition:background .5s ease-in-out;animation:swirl 6s infinite;--from: 45deg;background:linear-gradient(var(--baseColor), var(--baseColor)) 50% 50%/72ch 200% repeat-y,conic-gradient(from var(--from), red, orange, blue, green, indigo, violet) 50% 50%/73ch 100vh no-repeat var(--leastColor);background-attachment:fixed;display:grid;gap:.5rem}body>*{max-width:35rem;margin:auto;width:100%}body>p:last-child{padding:0 0 3ch 0}dt{font-weight:bold}dd{margin:1em}form[method=post]{margin:0 auto;display:grid;gap:1rem;padding:1rem;background:#ffffe0;border:2px solid #ff0;font-family:system-ui,sans-serif;color:#666}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{display:inline-flex;color:color-mix(in srgb, currentColor 80%, yellowgreen);background:#9acd32;width:3.5rem;height:3.5rem;border-radius:50%;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,background .3s linear,border .3s linear}form:has(h2) form:has(h2) h2>i{padding:.5lh;background:#9acd32;line-height:1.4rem;margin:1lh 0;transition:max-height .3s linear,background .3s linear,border .3s linear,mask 1s linear;mask:radial-gradient(circle at 50% 0, red 50%, rgba(0, 0, 0, 0)) 0 0/0 0 no-repeat}form:has(h2):has(input:checked) h2>i{margin:1lh 0 0;max-height:10lh;border:1px solid;background:#9acd32;padding:1lh;mask:radial-gradient(circle at 50% 0, red 50%, rgba(0, 0, 0, 0)) 0 0/100vw 100vh no-repeat}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;cursor:pointer}@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:#fa7b7b;font-family:sans-serif}dl:has(+form){display:grid;font-family:sans-serif;gap:.33rem;margin:0 auto 1rem auto}dl:has(+form) dt{font-weight:normal;color:#fa7b7b}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}a:has(img[ismap]) img{display:block;aspect-ratio:549/60;width:100%;height:auto}h2:has(+a[name=INDEX]),a[name=INDEX]~ol{font-family:system-ui,sans-serif;font-variant-caps:petite-caps;font-size:1rem}h2:has(+a[name=INDEX]){margin-bottom:-0.8rem;letter-spacing:.3rem;font-size:1.3rem;font-style:italic;font-weight:400}
