body{margin:0;padding:0}:root{--background: #0a0a0a;--primary: #d4b8fc;--secondary: #8b77a8;--primary-accent: #151515;--secondary-accent: #222;--ui-font: Verdana, Arial, sans-serif;font-family:var(--ui-font);line-height:1.5;font-weight:600;font-size:16pt;color-scheme:dark;background-color:var(--background);color:var(--primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{margin:0 auto;padding:2rem;height:calc(100vh - 4rem);display:flex;flex-direction:column;gap:.25em}.full-width{width:100%}.card{background:var(--primary-accent);color:var(--primary);border-color:transparent;border-radius:.3em}input{font-size:12pt}.vert-spacer{margin:auto 0}.hor-spacer{margin:0 auto}.banner{font-size:1.5rem;width:calc(100% - .5rem);height:calc(1em + 1rem);background:var(--secondary-accent);padding:.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;align-self:center;gap:1rem}.banner>*{font-size:1.5rem}.pad-btn{padding-left:.25em;padding-right:.25em}.left{position:absolute;transform:translate(-2.25rem) scale(.5)}.middle{position:absolute}.right{position:absolute;transform:translate(2.25rem) scale(.5)}button:focus{border:2px solid var(--primary);border-radius:.2rem}.stitch{position:absolute}.title{display:flex;gap:.25em;text-align:center;margin-top:-1em;font-size:1.5rem;background:var(--background);font-weight:700}.fraction{display:flex;gap:.25em;font-size:1.5rem}.fraction>input{flex:1 1 0;font-weight:600;font-size:1em;text-align:center;display:block;width:auto}.fraction>div{flex:1 1 0;margin:auto 0}.editor{position:absolute;display:flex;height:80%;width:90%;z-index:1;overflow:scroll}.line-numbers{padding-top:.2em;display:flex;flex-direction:column;color:var(--secondary)}.line-numbers,.editor-area{margin:.25rem;font-weight:400;font-family:var(--ui-font);font-size:1rem;line-gap-override:0;line-height:1em}.editor-area{flex:1 1 0;min-height:5em;height:0;border:var(--primary) solid 1px;outline:none;resize:none;overflow:scroll;white-space:nowrap;background:transparent;color:var(--primary)}@media screen and (max-width: 600px){.fraction{font-size:1.25rem}.row-display,.stitch{font-size:.75em}#app{padding:.5rem}}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.toast{position:absolute;z-index:20;pointer-events:none;background:var(--primary);color:var(--secondary-accent);animation:fadeInOut 2s ease forwards;padding:.5em;border-radius:100vh;left:50%;top:20%;transform:translate(-50%) translateY(-50%)}