:root{--primary-color:#4f5b93;--primary-color-hover:#793862;--primary-color-light:#c3cae4;--bg-code:#e4e4e4;--success-color:#79b933;--failure-color:#d84848;--bg-light:#f2f2f2;--bg-medium:#e1e1e1;--bg-dark:#c8c8c8;--font-family-mono:"Fira Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-family-sans-serif:"Fira Sans", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--border-radius:.75rem}html,body{text-align:center;height:100%;margin:0;font-size:clamp(14px,1.2vw,18px)}body{background-color:var(--bg-light);font-family:var(--font-family-sans-serif)}button,a.button{border-radius:var(--border-radius);cursor:pointer;white-space:nowrap;border:2px solid #0000;min-width:2rem;padding:.15rem .3rem;line-height:1.5rem}:is(button,a.button):hover{filter:brightness(115%)}a.button{color:#dbe1ff;background-color:var(--primary-color);text-decoration:none}@media (width<=700px){html,body{font-size:clamp(18px,1.5vw,22px)}}#exercise{flex-direction:column;height:100dvh;display:flex}#exercise header{height:2rem}#exercise main{flex-direction:column;flex:1;width:100%;margin-inline:auto;display:flex}#exercise main>*{margin:.5rem;padding:.5rem}#exercise main #answer,#exercise main #cards{flex-wrap:wrap;gap:.25rem;min-height:2.5rem;display:flex}#exercise main #choices{flex-direction:column;align-items:stretch;gap:.25rem;display:flex}#exercise main #choices span.card button.face{width:100%}#exercise main #answer{border-bottom:.2rem solid var(--bg-dark);border-radius:0}#exercise main #answer button.face{background-color:var(--bg-code);color:#000}#exercise main #cards span.card{background-color:var(--primary-color-light)}#exercise main #cards span.card[data-is-placed=true] button.face{visibility:hidden}#exercise main span.card,#exercise main button.face{border-radius:var(--border-radius);height:2.2rem;display:block}#exercise main button.face{color:#dbe1ff;background-color:var(--primary-color);font-family:var(--font-family-mono);white-space:nowrap;font-size:1rem}#exercise main p code{background-color:var(--bg-code);font-family:var(--font-family-mono);color:#e74c3c;border-radius:3px;padding:.2rem .3rem;font-size:.9rem}#exercise footer{background-color:var(--bg-medium);flex-flow:wrap;justify-content:center;align-items:center;gap:1rem;min-height:5rem;padding:.5rem;display:flex}#exercise footer #result{flex-direction:row;align-items:center;gap:1rem;width:10rem;display:flex}#exercise footer #result i{background-color:#333;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;padding:.5rem;display:flex}#exercise footer #result i.success{fill:var(--success-color)}#exercise footer #result i.failure{fill:var(--failure-color)}#exercise footer a.button{background-color:var(--success-color);color:#000}#exercise footer a.button.secondary{border-color:var(--success-color);background-color:#0000}@media (width>=700px){#exercise main{width:600px}}