:root{--red:#ff383c;--light-red:#ffb5b6;--green:#34c759;--light-green:#c2efcd;--blue:#08f;--light-blue:#b3dbff;--black:#1d1d1f;--gray:#c7c7cc;--light-gray:#f2f2f7;--white:#fff;font-family:sans-serif;font-weight:600}body{box-sizing:border-box;background-color:var(--white);height:100dvh;margin:0}#root{height:100%}.home{box-sizing:border-box;flex-direction:column;gap:24px;height:100%;margin:0;padding:16px 8px;display:flex}h1{text-align:center;color:var(--black);font-size:2rem}.drop-area{background-color:var(--light-gray);border:4px dashed var(--gray);text-align:center;border-radius:24px;margin-top:auto;padding:8px;transition:background-color .3s,border-color .3s,color .3s}.drop-area.loaded{background-color:var(--light-blue);border:4px solid var(--light-blue)}.info-wrapper{opacity:0;height:0;transition:height .6s,opacity .3s;overflow:hidden}.info-wrapper.loaded{opacity:1}.info-wrapper-inner{overflow:hidden}.error-info{border:4px solid var(--red);background-color:var(--light-red);overflow-wrap:anywhere;border-radius:16px;margin:8px;padding:8px}.quiz-info{border:4px solid var(--blue);background-color:var(--white);overflow-wrap:anywhere;border-radius:16px;margin:8px;padding:8px}h2{color:var(--black);margin:8px;font-size:1.5rem}.l{text-align:left;margin:16px 8px}.qnum{margin-bottom:8px}.ellipsis{white-space:nowrap;justify-content:center;min-width:0;display:flex}.ellipsis-l{text-overflow:ellipsis;min-width:0;overflow:hidden}.ellipsis-r{flex-shrink:0}.file-input-label{background-color:var(--blue);border:1px solid var(--blue);color:var(--white);border-radius:16px;margin:8px;padding:8px;transition:background-color .3s,border-color .3s,color .3s;display:block}.file-input-label.loaded{background-color:var(--gray);border:1px solid var(--black);color:var(--black)}.start-button{background-color:var(--light-gray);color:var(--gray);border:none;border-radius:24px;padding:16px;font-size:1.2rem}.start-button:enabled{background-color:var(--blue);color:var(--white)}