#lesson-list{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;height:100dvh;display:flex}#lesson-list a[data-is-disabled="1"]{cursor:not-allowed;filter:saturate(10%)brightness(150%)}#exercise>*{margin:.25rem;padding:.25rem}#exercise #answer,#exercise #cards{flex-wrap:wrap;gap:.25rem;min-height:2.5rem;display:flex}#exercise #choices{flex-direction:column;align-items:stretch;gap:.25rem;display:flex}#exercise #choices span.card button.face{width:100%}#exercise #answer{border-bottom:.2rem solid var(--bg-dark);border-radius:0}#exercise #answer button.face{background-color:var(--bg-code);color:#000}#exercise #cards span.card{background-color:var(--primary-color-light)}#exercise #cards span.card[data-is-placed=true] button.face{visibility:hidden}#exercise span.card,#exercise button.face{border-radius:var(--border-radius);height:2.2rem;display:block}#exercise button.face{color:#dbe1ff;background-color:var(--primary-color);font-family:var(--font-family-mono);white-space:nowrap;font-size:1rem}#exercise-result{flex-direction:row;justify-content:center;align-items:center;gap:1rem;display:flex}#exercise-result i{background-color:#333;border-radius:50%;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;padding:.5rem;display:flex}#exercise-result i.success{fill:var(--success-color)}#exercise-result i.failure{fill:var(--failure-color)}#exercise-playground{box-sizing:border-box;flex-direction:column;flex:1;gap:.5rem;padding:1em;display:flex}#exercise-playground #php-input,#exercise-playground #php-output{background-color:var(--bg-code);border:1px solid var(--bg-medium);text-align:left;font-family:var(--font-family-mono);resize:none;margin:0;padding:.25rem;font-size:.8rem;display:block}#exercise-playground #php-input{flex:3}#exercise-playground #php-output{flex:1}#exercise-playground #php-run{color:#dbe1ff;background-color:var(--primary-color);min-width:5rem;margin:0 auto}a.button.success{background-color:var(--success-color);color:#000}@media (width>=700px){#exercise,#exercise-success{width:600px}}: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)}}main{box-sizing:border-box;flex-direction:column;width:100%;height:100dvh;margin-inline:auto;padding:1rem .25rem;display:flex}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}