*,*:before,*:after{box-sizing:border-box}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}html{height:100%;margin:0}body{display:flex;height:100%;width:100%;gap:8px;margin:0;padding:8px}button{margin:8px 0}.settings{display:flex;flex-direction:column;width:30rem}.colors{display:grid;grid-template-columns:1fr 1fr}.cards{display:flex;flex-direction:column;flex-grow:1}#front,#back{position:relative}#back{display:none}p.code{font-family:monospace;background-color:#eee;padding:2px 4px;border-radius:4px;overflow-wrap:break-word}